JavaScript
객체 기반의 스크립트 언어로, 동적인 웹사이트 제작을 위해 사용하는 프로그래밍 언어이다.
1. 변수(Variable)
변수는 말 그대로 변하는 수라는 의미로, 프로그래밍할 때 계속해서 변하는 데이터를 담는 공간이다.
① 변수 선언 - 데이터를 담는 공간을 생성
자바스크립트의 변수는 var, let, const 키워드를 사용하여 정의할 수 있다.
var 변수명; * ;(세미콜론)을 꼭 붙여줘야 한다.
② 변수 초기화 - 선언한 변수에 값을 대입
변수명 = 값;
변수 선언과 초기화를 동시에 var 변수명 = 값;
- 변수명 생성시 주의 사항
- 변수명 첫 글자로는 $, _(언더바), 영문자만 올 수 있으며 숫자로 시작할 수 없다.
- 변수명 첫 글자 다음은 영문자, 숫자, $, _(언더바)만 포함할 수 있다.
- 변수명으로 예약어를 사용할 수 없다.
- 변수명은 되도록 의미를 부여하고 자세하게 작성하는 것이 좋다. 따라서, 의미가 불명확한 단어 조합은 피해야 한다.
- 변수명을 사용할 때는 대/소문자를 구분해야 한다.
2. 자료형(Data type)
① 문자형(String) : ("")큰따옴표 혹은 ('')작은따옴표로 감쌈
var str1 = "Hello World";
var str2 = '1234567890';② 숫자형(Number) : 말 그대로 숫자
var num1 = 1; // 정수
var num2 = -1; // 음수
var num3 = 0.123; // 실수③ 논리형(Boolean) : true(참) 또는 false(거짓)
var t = true;
vat f = false;④ Unedfined : 정의 되지 않음. 값이 입력되지 않은 상태 (데이터가 없음)
⑤ Null : 값을 비워둠. 빈 값을 입력한 상태 (빈 데이터)
* 고의적으로 값을 비워둘 때 사용한다.
데이터의 자료형을 알고 싶을 때는 typeof 데이터
3. 연산자
① 산술 연산자 - +(덧셈), -(뺄셈), *(곱셈), /(나눗셈), %(나머지)
숫자 외에 문자열도 산술 가능하다. 단, 덧셈에서만 차이점이 있으며 나머지 산술연산자는 동일하게 작동한다.
console.log(11+22); // 33
console.log("11"+"22"); // 1122② 대입 연산자 - =, +=, *=, /=, %=
a = b
a += b // a = a+b
a *= b // a = a*b
a /= b // a = a/b
a %= b // a = a%b③ 증감 연산자 - ++(1씩 증가), --(1씩 감소)
증감 연산자의 위치에 따라 증감의 실행 순서가 달라진다.
++변수 // 증가 선실행
변수++ // 증가 후실행
--변수 // 감소 선실행
변수-- // 감소 후실행④ 비교 연산자 - >(크다), <(작다), >=(크거나 같다), <=(작거나 같다), ==(같다, 자료형 고려X), !=(다르다, 자료형 고려X), ===(같다, 자료형 고려O), !===(다르다, 자료형 고려O)
console.log(1 == "1"); // true, 자료형에 상관없이 값이 일치
console.log(1 === "1"); // false, 자료형이 불일치⑤ 논리 연산자 - ||(or, 하나라도 ture라면 결과는 ture), &&(and, 하나라도 false라면 결과는 false), !(not, 값이 true면 결과는 반대로 false)
console.log(10 > 20 || 20 === 20)
// false || true => 하나라도 true가 있으므로 true
console.log(10 > 20 && 20 === 20)
// false && true => 하나라도 false가 있으므로 false⑥ 삼항 조건 연산자 - <조건식> ? <true일 경우 명령> : <false일 경우 명령>;
4. 함수(Function)
함수는 프로그램의 코드를 저장해둔 공간이다. 함수는 function 키워드를 사용해 정의하며 함수 안에 작성된 코드는 바로 실행되는 것이 아니고 함수가 호출되면 실행된다.
// 함수 정의 방법 1
function 함수명(매개변수) {
자바스크립트 코드;
]
// 함수 호출 방법 1
함수명(인자);
// 함수 정의 방법 2
var 참조변수 = function(매개변수) {
자바스크립트 코드;
}
// 함수 호출 방법 2
참조변수(인자);
// *인자는 함수로 전달하는 데이터이며, 이 인자는 함수의 매개변수로 들어간다.5. 배열(Array)
배열은 여러 개의 데이터를 담아두는 자료구조이다. 자바스크립트에서는 배열을 구성하는 각각의 데이터를 배열 요소(element)라고 하며, 배열의 위치를 가리키는 숫자를 인덱스(index)라고 한다.
자바스크립트에서의 배열은 배열 요소의 타입이 고정되어 있지 않기 때문에 같은 배열에 있더라도 배열 요소의 데이터 타입이 다를 수 있다. 또한 인덱스가 연속적이지 않아도 되기 때문에 특정 배열 요소가 비어있을 수 있다.
// 배열 정의 방법 1
var arr1 = [배열요소1, 배열요소2, ...];
// 배열 정의 방법 2
var arr2 = Array(배열요소1, 배열요소2, ...);
// 배열 정의 방법 3
var arr3 = new Array(배열요소1, 배열요소2, ...);배열의 인덱스는 언제나 0부터 시작하며 배열[인덱스]로 참조할 수 있다.
6. 객체(Object)
객체는 기능(Method)과 속성(Property)을 가지고 있다.
// 객체 정의
var 객체 = {
property : data,
property : data,
method : 자바스크립트 코드;
}
// 객체의 메서드 실행
객체.method();
// 객체의 속성값 가져오기
객체.property;
객체['proprty'];
// 객체의 속성값 변경
객체.property = 값;7. 조건문
조건문은 true, false를 반환한다.
7-1. if문
if문은 조건식을 만족할 경우에만 코드를 실행한다.
if (조건) { 조건이 true라면 수행할 명령 }
var a = 100;
var b = 200;
if (a < b) {
document.write("true");
}7-2. else문
else문은 조건식을 만족할 때와 만족하지 않을 때에 따라 실행하는 명령이 달라진다.
if (조건) { 조건이 true라면 수행할 명령 } else { 조건이 false라면 수행할 명령 }
var a = 100;
var b = 200;
if (a < b) {
document.write("true");
} else {
document.write("false");
}7-3. else if문
else if문은 조건을 여러가지 생성하고, 각 조건에 맞는 명령을 실행한다.
if (조건1) { 조건1이 true라면 수행할 명령 } elseif (조건2) { 조건2가 true라면 수행할 명령 } else { 모든 조건을 만족하지 않을 때 수행할 명령 }
var a = 100;
var b = 200;
if (a < b) {
document.write("a < b");
} else if ( a == b ) {
document.write("a == b");
} else {
document.write("모든 조건에 만족하지 않는다.);
}7-4. 중첩 if문
중첩 if문은 조건문 안에 조건문을 삽입해서 사용하는 것이다.
if (조건1) { if (조건2) {} }
var a = 100;
var b = 200;
if (a != b) {
if (a < b) {
document.write("b는 a보다 크다.");
} else {
document.write("a는 b보다 크다.");
} else {
document.write("a와 b는 같다.");
}8. 반복문
반복문은 같은 코드를 원하는 횟수만큼 반복 실행한다.
8-1. while문
while문은 조건식을 만족할 때까지 코드를 반복실행한다.
while (조건) { 수행할 명령; 증감식; }
var i = 0;
while (i < 10) {
document.write("HI");
i++;
}8-2. do while문
while문은 조건식의 만족 여부를 먼저 감사한 후에 코드의 실행 여부를 결정하지만, do while문은 무조건 한 번은 코드를 실행한 후에 조건식 만족 여부를 검사한다.
do { 수행할 명령; 증감식; } while (조건)
var i = 0;
do {
document.write("HI");
i++;
} while (i < 10);8-3. for문
for문은 조건식을 만족할 때까지 코드를 반복 실행한다.
for (초깃값; 조건; 증감식) { 수행할 명령 }
for (var i=0; i<10; i++) {
document.write("HI");
}8-4. 중첩 for문
중첩 for문은 for문 안에 for문을 사용하는 것이다.
for (초깃값; 조건; 증감식) { for (초깃값; 조건; 증감식) {} }
8-5. break문 / continue문
-
break문
while문 또는 for문 안에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료한다.
for (초깃값; 조건; 증감식) { break; 수행할 명령 } -
continue문
while문에서 continue문을 사용할 경우 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 한다.
for (초깃값; 조건; 증감식) { continue; 수행할 명령 }
for문에서 continue문을 사용할 경우 다음에 오는 코드는 무시하고 바로 증감식으로 이동해 증감 연산을 실행 한다.
while(조건식) { 증감식 ; continue; 수행할 명령' }
9. 선택문
선택문인 switch문은 변수에 저장된 값과 switch문에 있는 경우(case)의 값을 검사하여 일치하는 값이 있을 때 그에 해당하는 코드를 실행한다.
if문과 용도는 비슷하지만, if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행 시킬 때 사용한다.
switch(변수) { case 값1 : 코드1; break; case 값2 : 코드2; break; ... default : 코드n}
변수에 저장된 값은 switch문을 만나면 case 값을 하나씩 검사한다. 일치하는 데이터가 있는 경우 그에 해당하는 코드를 실행하고 break문을 만나 switch문을 종료한다. 만일 일치하는 값이 없으면 default에 있는 코드를 실행하고 switch문을 종료한다.
var animal = "cat";
switch (animal) {
case "puppy":
console.log("강아지");
break;
case "cat":
console.log("고양이");
break;
case "rabbit":
console.log("토끼");
break;
case "lion":
console.log("사자");
break;
default : alert("보기 중에 없는 동물입니다.");
}