WEB/JavaScript (17) 썸네일형 리스트형 [JavaScript] 반복문 우리가 다룰 반복문은 총 6가지이다. for in 반복문 for of 반복문 for 반복문 while 반복문 break continue 하나씩 살펴보자. for in 반복문 for in 반복문은 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다. 기본 형태는 다음과 같다. for (const 반복 변수 in 배열 또는 객체) { 문장 } 직접 예시를 보는 것이 이해가 빠르다. 보다시피 for 반복문의 반복 변수(위의 코드에서는 i)에는 요소의 인덱스들이 들어옴을 확인할 수 있다. 이를 활용해서 배열 요소에 접근할 수 있다. for of 반복문 for in 반복문은 반복 변수에 인덱스가 들어간다. 그래서 반복문 내부에 요소를 사용하려면 fruits[i]와 같은 형태로 사용하며, 사실은 안정성을 .. [JavaScript] 배열 배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 이 때 배열 내부에 들어 있는 값을 요소라고 한다. [요소, 요소, 요소, ... , 요소] 배열에 요소를 추가해보자. 총 2가지 방법이 있다. push() 메소드를 사용하는 방법 concat() 메소드를 사용하는 방법 unshift() 메소드를 사용하는 방법 인덱스를 사용하는 방법 첫번째 방법부터 살펴보자. push() 메소드는 배열의 끝에 원소를 추가하는 방법이다. 사용방법은 다음과 같다. 배열.push(요소) 두번째 방법을 살펴보자. concat() 메소드는 복수의 원소를 배열에 추가하는 방법이다. 사용방법은 다음과 같다. var li = ['a', 'b', 'c', 'd', 'e']; li = li.concat(['f', 'g'].. [JavaScript] 조건문 # if 조건문 if 조건문은 자바스크립트에서 가장 일반적인 조건문이다. 기본 형태는 다음과 같다. if(불 값이 나오는 표현식) { 불 값이 참일 때 실행할 문장 } if 조건문을 이용하여 오전과 오후를 구분하는 코드를 짜보자. # if else 조건문 else 구문은 서로 반대되는 상황을 표현하는 구문이다. 기본 형태는 다음과 같다. if(불 값이 나오는 표현식){ 불 값이 참일 때 실행할 문장 } else { 불 값이 거짓일 때 실행할 문장 } if else 조건문을 이용하여 오전과 오후를 구분하는 코드를 짜보자. # if else if 조건문 if else if 조건문은 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용한다. 기본 형태는 다음과 같다. if (불 표현식) { 문장 } else if.. [JavaScript] NaN (Not a Number) NaN은 자바스크립트에서 숫자이지만, 숫자로 나타낼 수 없는 숫자를 뜻한다. 이게 뭔 소린가? 할 수 있는데 다음의 코드를 실행시켜 결과를 확인해보자. Number("$273") NaN typeof(Number("$273")) 'number' 보다시피 $273을 Number라는 함수를 사용해서 숫자로 변환했으므로 자바스크립트에서 자료형은 숫자라고 나오지만, 실직적으로 숫자로 변환할 수 없으므로 'Not a Number' 라고 출력을 하는 것이다. 추가로 특정 값이 NaN인지 체크를 하는 방법이 있다. 바로 isNaN을 이용하면 된다. 다음의 코드를 보자. isNaN("273") false isNaN("$273") true [JavaScript] 키워드와 식별자 키워드란 자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어를 말한다. 식별자란 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어를 말한다. 식별자를 만들 때는 다음과 같은 규칙을 반드시 지켜야 한다. 키워드를 사용하면 안됩니다. 숫자로 시작하면 안됩니다. 특수문자는 _와 $만 허용합니다. 공백 문자를 포함할 수 없습니다. 식별자로 사용 가능한 단어와 불가능한 단어를 살펴보자. 식별자로 사용 가능한 단어 식별자로 사용 불가능한 단어 alpha alpha10 _alpha $alpha AlPha ALPHA break 273alpha has space 식별자를 만들 때 자바스크립트 개발자 대부분이 지키는 관례가 있다. 이는 식별자의 의미를 더 명확하게 하려고 사용하는 규칙이다. 클래스의 이름은 .. [JavaScript] 입력 (prompt, confirm) 문자열 입력 문자열을 입력할 때 사용하는 함수는 prompt()이다. 사용법은 다음과 같다. prompt(메시지 문자열, 기본 입력 문자열) 이를 적용해보자. 결과를 확인해보면 위와 같은 창이 나오고 입력칸에는 초기값이 입력되어있다. 원하는 문자열을 입력하고 '확인'을 누르면 input에 문자열이 저장되면서 내용이 경고창에 출력된다. 불 입력 문자열 외에 불 자료형도 값으로 입력받을 수 있다. 이때 사용하는 함수가 confirm()이다. 사용법은 다음과 같다. confirm(메시지 문자열) 이를 적용해보자. 결과를 확인해보면 위와 같은 창이 나오고 '확인'과 '취소'버튼이 보인다. '확인'을 눌러보자. '확인'을 누르니 'true'가 나온다. 반대로 '취소'를 누르면 'false'가 나온다. [JavaScript] 템플릿 문자열 템플릿 문자열(Template literals)은 내장된 표현식을 허용하는 문자열 리터럴을 말한다. 템플릿 문자열의 사용법은 다음과 같다. `string text ${expression} string text` 보다시피 큰 따옴표나 작은 따옴표 대신 백틱(` `)을 이용한다. 템플릿 문자열은 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호를 이용하여 표기가 가능하다. 간단한 예제를 몇 개 살펴보자. `표현식 273 + 52의 값은 ${273 + 52}입니다...!` '표현식 273 + 52의 값은 325입니다...!' var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // "Fifteen .. [JavaScript] 증감 연산자 증감 연산자는 복합 대입 연산자는 약간 간략하게 사용한 형태이다. 증감 연산자 설명 변수++ 기존의 변수 값에 1을 더합니다(후위). ++변수 기존의 변수 값에 1을 더합니다(전위). 변수-- 기존의 변수 값에 1을 뺍니다(후위). --변수 기존의 변수 값에 1을 뺍니다(전위). 예제를 살펴보자. 실행 결과 10 11 12 후위란 해당 문장을 실행한 후 값을 더하라는 의미이다. 첫번째 문장을 실행하면서 10이 출력되었고 1을 더한 것이다. 두번째 문장을 실행하면서 11이 출력되었고 1을 더한다. 세번째 문장을 실행하면서 12가 출력되었고 1을 더한다. 따라서 number의 값은 현재 13이라고 생각해볼 수 있다. 다음 예제를 살펴보자. 실행 결과 11 12 13 전위란 해당 문장을 실행하기 전에 더하라는.. 이전 1 2 3 다음
