[JavaScript] 구동 방식, 함수

삶_ 2022. 6. 30. 15:29

외부/내부 자바스크립트

//내부 자바스크립트
//html 내부에 직접 적어서 자바스크립트 소환하는 것

<script>
  alert('hello world');
</script>

//외부 자바스크립트
//external.js 파일
function printDate() {
  alert('hello world');
}

<head>
  <script src="../external.js"></script>
  <!-- 외부 서버의 js파일 참고인 경우 다음과 같이 사용 -->
  <script src="https://www.cdn.com/myjs/external.js"></script>
</head>

자바스크립트의 구동방식

defer

<head>안에 넣음
<script defer src="자바스크립트파일이름.js"></script>
가장 효율적임
선언되지않은 변수를 막기위함
'use strict'; 맨앞에 선언하기

자바스크립트란?

html의 정적인 정보들 이상으로 동적인 지도나 2D 그래픽 등을 보여주는 언어(사용자와 상호작용 하는것)

알아야 될 것

// 주석표시
세미콜론(;)을 사용하거나 or 사용하지 않아도 되지만 쓰는걸 추천.
- 인터프리터가 자동삽입 해준다고 함

null과 undifined

null : 값이 아무내용도 없는걸로 정의됬을때
undifined : 값이 할당(정의)되지 않았음
- Number(null) //0을 뜻함
  - Number(’0’) 은 null이 아님. 0이라는 문자임.
  - Number(’ ’) 은 안에 공백이 있으므로 true임
- Number(undefined) //NaN(=숫자가 아님)을 말함.
- = 오류문구(Not a number) (숫자가 아닌것을 숫자로 작업했을 때)
if-else 문에서 0, null이 아니면 true를 반환함 (둘은 false)

console.log()

문자열을 출력할 때 사용함
String 출력
- 문자/문자 했을때 둘다 숫자면 나눠지므로
  오류가 발생하지 않도록 조심해야 한다
- 'hello' + 'breadba'; //문자열 더하기
  'hello : ${a}' //변수a 와 문자열 같이 출력
boolean 출력
- true / false
  const a = 3 <1; //false
  a === b //같은지 확인하기

const / let / var

중복선언 X. 함수 내에서 선언되면 외부에서 쓸수없음
- var 빼고 선언,초기화, 할당이 같이 되야함
아무것도 설정 없이, a3 = "bb"; 이런식으로 변수선언만 되어 있으면 최상단에 선언된거나 마찬가지 (전역 변수)
- 문제발생할 확률 높음. 에러만 발생 안함.
- 되도록 const/let/var 을 붙여서 만들기
const : 변수 값 변경이 불가능함
- const elie = {name='elie', age=20};
let : 변수값 변경이 가능함

var : 선언하기 전에 사용 가능 (요즘 거의 안씀!)

코드 내부에서 선언해도 외부에서 접근 가능(함수 빼고)
보통 함수 내, 코드 내부에서 사용

var name2; //선언과 초기화가 동시에 됨
let name = 'enbin' //선언 및 할당(선언만 X)

//let을 안붙이고 선언해야 재할당이 가능함!
name = 'haeji'
console.log(name)

// haeji 출력됨

forEach()

함수처럼 돈다
배열의 모든 원소에 대해 특정 코드블럭을 실행 가능

//배열안의 모든 요소 출력됨
let d = [1,2,3,4];
        d.forEach(function(){
            console.log(data);
        });

for-in / for-of

객체의 모든 열거 가능한 속성에 대한 반복

for(let index in d){ //index 인덱스 출력
	console.log("in f: "+ f+","+d[f]);
}

for(let value of d){ //value 값 출력
	console.log("of f: "+ f);
}

typeof

변수의 데이터 타입을 반환함
- number, string …
- typeof 3 하면 number 뜸
타입이 정해지지 않아있으면 undefined 뜸
- typeof b == "undefined" //값의 타입을 알아볼때는 스트링으로 변환해서 해야 함
- typeof의 결과값은 string 이므로

alert

alert("우리집 \n 강아지") //줄바꿈 해서 입력됨
사용자가 확인을 누를때까지 메세지를 띄워줌
- ex, 경고창같은거
- 확인 = true, 취소 = false

prompt

두개의 매개변수를 받아, 사용자가 입력한 값을 받아옴
- result = prompt(title, ‘’)
- result = prompt(사용자에게 보여줄 문자열, 입력 필드의 초깃값)

confirm

매개변수로 받은 question과 확인 및 취소버튼이 있는 창을 보여줌
confirm(’question 입력’)
- 확인 = true, 취소 = false

String() : 문자형으로 변환

Number() : 숫자형으로 변환

Boolean() : 불린형으로 변환

기본연산자

% 홀수짝수구할때사용 나머지
거듭제곱 **
증가연산자 ++
감소연산자 --
a-- (대입후 연산) --a (연산 후 대입)
비교연산자

a != 3, a == 3

일치 연산자

타입까지 비교해주는 연산자
a = 1, b = “1”일 때, a == b는 true이다.a === b (일치연산자) 은 false가 나온다
===은 객체 주소도 같아야 함
- 0 == false (true)
  0 === false (boolean타입이 아니라서 false)
  '' == false (true)
  '' == false (false)
  null == undefined (true)
  null === undefined (false)

조건문

if문

if(age > 19){
	console.log("환영합니다.");
} else if(age === 19) {
	console.log("수능 잘 치세요");
} else {
	console.log("안녕히가세요.");
}

반복문

for문

for(let i=0; i<10; i++){
 console.log(i+1); 
}

while문
- 조건을 만족하면 계속 반복

while (i<10){
	console.log(i);
	i++;
}

do-while문
- 한번만 실행한다

let i = 0;

do {
	i++;
} while(i<10)

continue : 반복문을 멈추고 다음 반복으로 진행
break : 반복문을 멈추고 빠져나옴

for(let i=0; i<10; i++){
	if(i%2 == 0){ //나머지가 0이면 밖으로 빠져나옴(continue)
		continue;
	}
	console.log(i);
}

switch문

케이스가 다양할경우 간결하게 작성할 수 있기 때문에 사용함

let fruit = prompt("무슨 과일을 사고싶나요?");

//사용자 입력 후

switch(fruit){
	case '사과' :
		console.log("100원 입니다");
		break;
	case '바나나' :
		console.log("200원 입니다");
		break;
	case '멜론' : //두가지 다 해보기
	case '수박' :
		console.log("500원 입니다.");
	default : //그 외
		console.log("그런 과일은 없습니다.");
}

//위를 실행

논리연산자

|| (or) , && (and) , ! (NOT)

&&가 || 보다 우선순위임.
&& 쓸때 먼저 연산될 조건이 잘 일치하지않을 (확률이 적은) 것을 적으면 더 결과가 빨리 나와 좋다

저작자표시 (새창열림)