자바스크립트 기초 형변환, 조건문, 반복문

자바스크립트 + jQuery 완전정복 스터디 1

Chapter 3. 형변환

 

형변환

1. 형변환이란?

숫자형을 문자형으로, 문자형을 숫자형으로 변환하는 것처럼 데이터형을 변환하는 것.

 

3. 형변환 종류

형변환은 두 가지 종류가 있음

- 암시적 형변환 : 자바스크립트 엔진이 필요에 의해 데이터형을 자동으로 변환시키는 것

- 명시적 형변환 : 개발자가 자바스크립트를 이용하여 직접 어떤 데이터형으로 변환할지 수동으로 명시하는 것.

 

암시적 형변환 경우

숫자+문자 = 숫자가 문자형으로. 1+“2” 는 “12”

논리+문자 = 논리가 문자형으로. true+“10” 은 “true10“

논리+숫자 = 논리가 숫자형으로. true+100 은 101

 

명시적 형변환 경우

문자를 숫자로...

parseInt() : 정수형으로(소수점 아래 탈락)

parseFloat() : 실수형으로(소수점 아래까지)

Number() : 그대로...

숫자를 문자로...

String(숫자) : 그대로...

숫자.toString(진수) : 해당 진수형으로. 숫자가 15면 값은 f

숫자.toFixed(자릿수) : 소수점 아래 자리수까지 반올림

숫자+“” : 암시적 형변환

 

 

Appendix 2. jQuery

 

제이쿼리란

크로스 브라우징 라이브러리(특정 기능을 다양한 웹 브라우저에서 동일한 방법으로 사용할 수 있는 라이브러리) 중 하나.

p. 129

순수 자바스크립트로만 코드를 작성하는 것보다 제이쿼리를 이용하면 더 간단하게 코드를 작성할 수 있음

애니메이션 기능도 제공함. p. 130

태그를 다루는 작업을 쉽고 간결하게 할 수 있음.

 

태그 노드 찾기

ex) document.getElementById(‘id’) -> $(‘#id’);

 

제이쿼리에서는 $() 함수와 css 선택자를 활용하여 노드를 찾을 수 있음.

 

 

4. 초보자가 알아야 할 jQuery 핵심 기능

1. 이벤트 등록

- $대상.on(“이벤트 이름”, 이벤트 리스너) OR $대상.단축이벤트메서드(이벤트리스너)

2. 스타일 설정하기

제이쿼리에서 제공하는 css() 메서드를 이용

- 설정 내용이 하나인 경우 : $대상.css(“스타일명”, 값);

- 설정 내용이 여럿인 경우 : $대상.css({“스타일명” : “값”, “스타일명“ : ”값“, ...});

 

 

Chapter 4. 조건문 if

특정 조건에 맞는 경우에만 특정 구문을 실행하고자 할 때 사용하는 일반적인 제어문

 

if(조건식 1) {

조건식 1이 참일 때 실행할 구문

} else if(조건식 2) {

조건식 1이 거짓이고 조건식 2가 참일 때 실행할 구문

} else {

조건식 1과 조건식 2 이외의 경우에 실행할 경우

}

 

L3. 논리 비교 연산자

주로 조건문과 함께 사용되는 논리 연산자와 비교 연산자.

 

비교 연산자 : < , > , == , != , >= , <= 두 값을 비교 p. 146

논리 연산자 : &&, || 여러 개의 비교 연산자를 묶을 때 사용 p. 148

 

논리 비교 연산자의 결과값은 참과 거짓뿐인 불리언 값.

 

L8. 조건부 연산자 p. 169

if ~ else를 조금 더 쉽게 표현할 수 있는 조건부 연산자. (삼항연산자)

(조건식) ? 조건식이 참일 때 실행되는 구문 : 조건식이 거짓일 때 실행되는 구문;

 

Chapter 5. 조건문 switch

if문과 마찬가지로 특정 조건에 맞는 경우에만 특정 구문을 실행하고자 할 때 사용.

주로 여러 개의 조건을 처리해야 할 때 사용. 다중 if~else문 보다 가독성이 좋음.

 

switch(변수 또는 값) {

case 값1 :

실행구문;

break;

case 값2 :

실행구문;

break;

...

 

default :

모든 조건이 일치하지 않을 때 실행할 구문;

}

 

조건식, case : 조건식 안에 들어있는 값이 case에 선언된 값과 같을 때 해당 구문이 실행

break : break문을 만나면 switch문에서 벗어난다. break를 만나기 전까지는 멈추지 않고 계속 내려감.

default : 조건이 모든 case값과 일치하지 않았을 경우 실행.

 

모든 switch문은 if문으로 작성할 수 있지만 모든 if문을 switch문으로 작성할 수 있는 것은 아님.

switch문의 case값은 상수만 올 수 있어서, if문의 조건식이 ‘==’을 제외한 비교연산자인 경우 case값과 매치할 수 없기 때문.

 

Chapter 6. 반복문 for

특정 구문을 여러 번 반복해서 실행할 때 사용하는 제어문. 반복횟수가 정해져 있을 때 주로 사용한다.

 

L03. 단일 for문

for(초기값; 조건식; 증감식){

실행구문;

}

 

* 초기값이나 조건식 증감식은 생략 가능. 모두 생략했을 경우 무한반복이 된다.

* 실행구문이 한 줄일때는 {}를 생략해도 좋지만 가능한 생략하지 않는 것을 권장. 구문이 늘어났을 때 빼먹을 수 있기 때문에.

 

p. 212

1. for문이 실행되면 우선 초기값 위치의 내용이 실행. 초기값 내용은 단 한 번만 실행

2. 조건식을 체크하여 참인 경우 실행구문을 실행. 거짓인 경우 for문을 벗어난다.

3. 실행구문이 실행되고 난 후 증감식 실행. 이후 다시 조건식을 체크한다.

2, 3을 반복

 

L04. for문에서 continue문과 break문

continue : 반복 중 continue문을 만났을 경우 이후 구문을 진행하지 않고 증감식으로 이동한다.

break : for문 정지, 루프를 벗어난다.

 

L05. 다중 for문

for문 안에 for문이 있는 구조. 여러번 중첩될 수 있다.

 

Chapter 6. 반복문 while p. 240

무한반복 등 반복횟수가 정해져 있지 않을 때 주로 사용한다.

 

while(조건식) {

실행구문;

...

}

실행구문 아래에 break문 등을 활용해서 조건에 맞을 때 반복문을 벗어날 수 있다.

L02. for문과 while문의 차이점

- for : 반복 횟수가 정해진 경우, 배열과 함께 주로 많이 사용됨.

- while : 무한루프나 특정 조건에 만족할 때까지 반복해야 하는 경우, 주로 파일 읽고 쓰기에 많이 사용.

 

for문과 while문은 서로 대신 사용 가능하다.

 

L03. for문에서 continue문과 break문

- continue : 도중에 continue를 만나면 이후 구문을 실행하지 않고 조건식으로 이동.

- break : 도중에 break를 만나면 while문 정지, 루프를 벗어난다.