1.Javascript란?

동적 html 화면 구성을 위한 언어다.

• 특징
  • 브라우저에서만 실행 : 브라우저내에 js실행 인터프리터 내장
  • 브라우저별 실행 인터프리터는 조금씩 다름

2.Javascript 구성

2.1 기본구성

자바스크립트를 작성하기 위해서는 '\'태그를 이용한다. 스크립트 태그는 웹 문서에서 어디든지 위치할 수 있다. head태그 안에도 선언 가능하고 body태그 안에도 가능하다.

하지만 브라우저가 웹 문서를 읽는 순서에 의해 스크립트가 원하는 방식으로 동작하지 않을 수도 있다. 예를 들어 body태그에서 선언한 변수를 사용하는 script가 body태그 위에 작성되어 있고, 스크립트가 읽는 동시에 실행된다면? 아직 body태그가 읽히지 않아 변수값이 없는데, 그 값을 가져와야 하므로 에러가 발생하게 된다. 이런 경우는 body태그에서 변수를 선언하는 부분 뒤에 script태그를 위치시켜야 한다.

2.2 변수

2.2.1 변수타입

자바스크립트는 3가지 타입으로 변수타입을 설정한다.

• var : 타입 미지정을 의미하는 타입이다. var로 선언된 변수는 값이 초기화될 때 타입이 정해진다. 또한 var타입 변수는 새로운 값, 새로운 타입으로 재할당, 재선언이 가능하다.
• let : var과 마찬가지로 타입 미지정을 의미하지만, 다른점은 var과 달리 해당된 블록이나 표현식안에서만 유효한 변수를 선언한다는 것이다. 또한 var과 달리 재할당은 가능하지만 재선언은 가능하지 않다.
• const : let과 똑같이 해당된 블록이나 표현식안에서만 유효한 변수를 선언한다. const는 var, let과 달리 상수를 표현하므로 선언할 때 초기화를 필수로 하고 재할당, 재선언 모두 가능하지 않다.

2.2.2 변수표현 백틱( 포매팅 개념 )

만약 let i = 1; 으로 i변수를 1로 선언 및 초기화했다고 가정한다. 이때 console창에 이 변수 i에 대한 값을 출력하고 싶다면 어떻게 할까?

console.log(i);

다음과 같이 간단하게 표현 가능하다. 그럼 "변수값은 : (i값에따라변함)입니다" 라고 출력하고 싶다면?

console.log("변수값은 : "+i+"입니다");

다음과 같다. 이때 만약, 넣어줘야할 변수가 많아지거나 출력횟수가 여러변 될 경우 불필요한 연산( + 연산 )이 많아지게 된다. 이로 인해 새롭게 나온 변수 표현법이 있다. 포매팅의 개념과 같은데 백틱이라고 불리는(ESC키 밑에 있는 키) ` 과 ${ } 를 이용하는 것이다. 예제를 통해 알아본다.

console.log(`변수값은 : ${i}입니다`);

다음과 같이 백틱(`)은 작은따움표나 큰따움표를 대신하는 느낌으로 사용되고, ${}는 변수를 나타내는 느낌으로 사용된다. 이를 통해 더 간편하고 간결한 변수 표현이 가능해진다.

2.3 함수

2.3.1 사용자 정의 함수

• 함수선언 : function 선언할함수명 ( 사용할파라미터명 ) { 로직 }

이때, java에서는 파라미터에 타입을 직접 설정해주어야 했지만, javascript에서는 파라미터에 타입을 직접 설정하면 오히려 에러가 생긴다.( (var v1, var v2)틀림! --> (v1, v2)맞음!)

2.3.1.1 익명함수

사용자 정의 함수를 선언할 때 function뒤에 선언할함수명을 작성했었다. 하지만 function에 대한 함수명을 지정하지 않아도 된다. 이것이 바로 익명함수다. 그럼 익명함수는 어떻게 호출할까? 사실 익명함수는 함수명을 지정하지는 않지만 변수명을 지정해 변수명을 통해 호출한다. 즉, 함수명 대신 변수명을 사용한다고 보면 쉽다. 익명함수 예제를 본다.

let f1 = function() { // function에는 함수명을 지정하지 않았지만, f1이라는 변수명으로 함수를 저장함.
    console.log("1.익명함수");
}
f1();  // 함수명 f1을 통해 익명함수 호출. 콘솔창에 "1.익명함수" 출력됨.

let f2 = function(v){ // 위와 같은 예제지만 파라미터를 받는 형식만 추가됨.
    console.log(v);
}
f2("2.익명함수");

2.3.1.2 즉시실행함수

함수를 따로 호출하지 않고 script가 읽힐 때 즉시 실행되게 하기 위한 함수다. 즉시실행함수 예제를 본다.

(function f3(){ // 원래 함수 선언 부분을 A라고 한다면 즉시실행함수를 작성하는 법은 '(A () );' 라고 생각하면 쉽다.
    console.log("3.즉시실행함수");
}());

(function f4(v1,v2){ // 위와 같은 예제지만 파라미터를 받는 형식만 추가됨.
    console.log("4.즉시실행함수"+(v1+v2));
}(10,20));

여기서 만약 위에 언급된 익명함수를 즉시실행하고 싶다면? 다음과 같을 것이다.

(function(){ // 익명함수를 호출하기 위해 변수명을 사용했지만, 여기서는 즉시 실행하므로 따로 호출할 변수명이나 함수명따위가 필요없다.
    console.log("5.익명함수 + 즉시실행함수");
}());

(function(v1,v2){
    console.log("6.익명함수 + 즉시실행함수"+v1+" "+v2);
}(10,20));

2.3.1.3 화살표함수

마치 람다식처럼 함수를 선언할 수 있다. 애초에 funtion을 사용하지 않아 함수명이 없고, 이 때문에 호출할 때 사용할 변수명을 지정해준다. 로직내용은 다음과 같이 '=>'를 이용해 작성한다.

let v3 = (v1,v2) => v1+v2;
console.log("7",v3); // v3에 해당하는 함수가 v1,v2라는 파라미터를 필요로 했으니, 이렇게 v3라는 변수명으로만 호출하면 '(v1,v2) => v1+v2'라는 식 자체가 출력된다.
console.log("8",v3(10,20)); // 이렇게 호출해야 '30'이라는 값이 출력된다.

2.3.1.4 콜백함수

특정 이벤트에 의해 호출되는 함수를 의미한다. 예제를 통해 알아본다.

let btn1 = document.getElementById("btn"); // html내에서 id값이 btn이 요소를 btn1변수에 저장한다.
console.log(9, btn1); // btn1확인용 출력
btn1.addEventListener('click',function(){ // 여기서 'click'이라는 이벤트가 발생하면 function(){alert('click')} 가 호출되도록 한다.
    alert('click');
});

setTimeout(function(){ // 5초 뒤에 function(){alert('playdata')}가 호출되도록 한다.
    alert('playdata');
}    , 5000);

콜백함수에서 유의할 점! 보통 함수를 호출할 때 소괄호를 붙여서 '함수명()' 이런식으로 호출하는데, 콜백함수로 호출할 시에는 소괄호를 붙이지 않는다. 예시를 본다.

//html상에 버튼 있다고 가정
<button id="btn1">버튼</button>

//script태그 안에서 함수를 생성하고 버튼을 누를 시 함수를 호출하도록 콜백함수 이용
function abc(){
    //함수내용
}

document.getElementById("btn1").addEventListner('click', abc); // !!! abc()가아니라 abc로 작성해야됨 !!!

2.3.2 자바스크립트 내장 함수

자바스크립트내에 유용한 함수들이 몇가지 내장되어 있다. 몇개만 예시로 알아본다.

• forEach : 일반적으로 iterable한 요소를 순회하고 싶을 때는 for문과 index를 이용해 순회한다. forEach는 for보다 더 쉽게 iterable한 요소를 순회할 수 있게 도와준다.

const list = [1,2,3,4];
list.forEach(function(s){
    console.log(s);
}) // 콘솔창출력화면 : 1 2 3 4 순서대로 출력됨

• eval : 큰따움표(")나 작음따움표(')로 감싸진 내용에서 큰따움표나 작음따움표를 벗기고 실행하는 함수다. 예를 들어 "2+2"는 2+2라는 문자열이지만 eval("2+2")는 큰따움표를 벗기고 안에 있던 2+2가 실행되어 숫자 4를 반환한다.

console.log(eval("2+2")); // number타입 4 출력됨

2.4 객체

2.4.1 객체 생성

자바스크립트의 객체는 json객체나 맵, 딕셔너리 구조와 흡사하다. 객체를 생성하는 방법으로 2가지가 있다. 첫번째로 객체를 중괄호('{ }')로 묶고 객체 안에서 변수는 마치 key처럼 선언하고 변수값은 value처럼 선언해 콜론(':')으로 두 값을 연결하고 쉼표(',')로 연속해 변수를 선언 및 초기화하는 객체 리터럴 방식이 있고(자바 클래스 만드는 형식과 흡사하게 보임), 먼저 객체 생성자를 통해 객체를 생성하고 닷('.')과 등호('=')를 이용해 객체 안 변수값을 설정하는 방식이 있다. 다음 예시를 통해 알아본다.

• 객체 리터럴 방식

let obj1 = {                   // 객체 시작
            name: "동석",     // name변수선언
            age: 40          // age변수선언
        };                  // 객체 끝

let obj2 = {                                    // 객체 시작
        name: "연아",                           // name변수선언
        age: 20,                                // age변수선언
        color: function(){                      // color변수선언(변수값으로 함수도 넣을 수 있다)
            return this.name+' 선호하는 색은 red';
        },
        insideObj1: obj1                        // insideObj1변수선언(변수값으로 객체(위에서 미리 만들어 놓은)도 넣을 수 있다)
        
    };                                          // 객체 끝

• 객체 생성자 이용 방식

// 위와 같은 객체 생성 구조므로, 주석은 생략한다.
let obj1 = new Object();
obj1.name ="동석";
obj1.age = 40;

let obj2 = new Object();
obj2.name = "연아";
obj2.age = 20;
obj2.color = function(){ 
                return this.name+' 선호하는 색은 red';
};
obj2.insideObj1 = obj1;

2.4.2 객체 호출

정확히 객체의 변수를 호출하는 방법이다. 닷('.')을 이용해 호출한다. 위 '2.4.1 객체 생성'단계에서 생성한 obj1, obj2 객체를 이용해 예시를 든다.

// 하단 사진으로 출력물 확인
console.log(1,obj1);
console.log(2,obj2);
console.log(3,obj1.name);
console.log(4,obj2.name);
console.log(5,obj2.color());
console.log(6,obj2.insideObj1);
console.log(7,obj2.insideObj1.age);

2.4.3 자바스크립트 객체와 JSON 객체

자바스크립트 객체는 JSON객체와 흡사하다고 언급했었다. 그 이유는 JSON(JavaScript Object Notation)이란 자바스크립트 객체를 외부에 전송하기 위해 더 간단한 형태로 바꾼(직렬화 과정) 것이 바로 JSON이기 때문이다. 정확하게 말하면 JSON형식의 문자열로 바꾼다.

• 자바스크립트 객체 -> JSON 문자열 : JSON.stringfy( 자바스크립트 객체 );
• JSON문자열 -> 자바스크립트 객체 : JSON.parse( JSON 문자열 );

3.Javascript 특성

3.1 타입과 형변환( 자동 형변환 )

자바스크립트는 타입에 대해 관대하다. 그래서 다음과 같은 일들이 생긴다.

0 == false // true
0 === false // false
10 == "10" // true
10 === "10" // false

여기서 ==과 ===의 차이는 무엇일까?

3.1.1 == / === 차이

자바스크립트에서 == 과 ===

• == : '동등연산자'로 두 변수의 타입이 다르다면 자동 형변환을 통해 타입을 맞춰준 후 값이 같으면 true를 반환, 값이 같지 않으면 false를 반환한다. 즉, 변수의 값만 비교한다.(타입은 달라도 됨)

• === : '엄격한 동등연산자'로 두 변수의 타입도 같아야 하고, 값도 같아야 true를 반환한다. 타입과 값 중 하나라도 같지 않을 경우 false를 반환한다.

다음과 같은 이유로 위와 같은 상황이 발생하는 것이다. 그래서 자바스크립트에서 정확한 비교를 하기 위해서는 '==='연산자가 권장된다.

4.DOM(Document Object Model)이란?

DOM이란 웹이 브라우저에 로드되면 웹에서 만드는 트리 구조의 문서 객체다. 예를 들어 다음과 같은 html문서가 있다고 가정한다.

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
 
</body>
</html>

다음을 DOM의 트리 구조로 표현해본다.

html이라는 root node에서 시작해서, html 안에 있는 여러 태그, 스크립트, 태그의 속성, 태그안 텍스트같은 여러 node들로 퍼져나가는 형식이다. 가장 상위 노드가 root Node인 것이고, 가장 하위 노드가 leaf node인 것이다.