[javascript ] 기초정리

 

1. innerHTML 

<h1>HTML DOM 요소를 이용한 innerHTML 프로퍼티</h1>

<p id="text">이 문장을 바꿀 것입니다!</p>



<script>

var str = document.getElementById("text"); // text라는 아이디를 가져옴

str.innerHTML = "이 문장으로 바뀌었습니다!"; // id가 text인 inner 요소를 바꿈

</script>

 

2. document.write() 

<h1>Document 객체의 write() 메소드</h1>

<script>
	document.write(4 * 5); //화면에 20 이라고 표시 디버깅할 떄 주로 사용
</script>

 

3. 객체(object) - 변수를 객체처럼 사용하여 딕셔너리 형식으로 이용가능

<h1>객체 타입</h1>
<p id="result"></p>

<script>
var dog = { name: "해피", age: 3 };	// 객체의 생성

// 객체의 프로퍼티 참조
document.getElementById("result").innerHTML = 
"강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";
</script>

 

4. 문자열을 숫자로 변환

 - Number(), parseInt(),  parseFloat()

 

5. 동등 연산자와 일치 연산자

동등 연산자(==)는 두 피연산자의 값이 서로 같으면 참(true)을 반환합니다.

이때 두 피연산자의 타입이 서로 다르면, 비교를 위해 강제로 타입을 같게 변환합니다.

하지만 일치 연산자(===)는 타입의 변환 없이 두 피연산자의 값이 같고, 타입도 같아야만 참(true)을 반환합니다.

var x = 3, y = '3', z = 3;

document.write((x == y) + "<br>");  // x와 y의 타입이 서로 다르므로 타입을 서로 같게 한 후 비교를 하므로 true

document.write((x === y) + "<br>"); // x와 y의 타입이 서로 다르므로 false

document.write(x === z);            // x와 z은 값과 타입이 모두 같으므로 true

 

6. 삼항 연산자(ternary operator)

var x = 3, y = 5;

var result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.

document.write("둘 중에 더 큰 수는 " + result + "입니다.");

 

7. 쉼표 연산자

 

// 보통의 for문

for(var i = 0; i < 10; i++){
	document.write("i : " + i);
}


// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.

for (var i = 0, j = 9; i <= j; i++, j--) {

    document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");

}

 

8. switch 문 - 자바와 동일

var day = new Date().getDay(); // 오늘의 요일을 반환함. (일요일: 0 ~ 토요일: 6)

switch (day) {

    case 1: // 월요일인 경우

    case 2: // 화요일인 경우

    case 3: // 수요일인 경우

    case 4: // 목요일인 경우

    default: // 0부터 6까지의 값이 아닌 경우

        document.write("아직도 주말은 멀었네요... 힘내자구요!!");

        break;

    case 5: // 금요일인 경우

        document.write("오늘은 불금이네요!!");

        break;

    case 6: // 토요일인 경우

    case 0: // 일요일인 경우

        document.write("즐거운 주말에도 열심히 공부하는 당신~ 최고에요!!");

        break;

}

 

9. for / in 문 - in은 객체안의 변수에 접근하려고 할 때 사용

<script>
var obj = {
name : "이순신",
age : 20
};

for (var i in obj) {
document.write(i + "<br>");
}
</script>

 

10. for / of 문 - 객체를 순회 

<script>
var arr = [3, 4, 5];

for (var value of arr) { // 위와 같은 동작을 하는 for / of 문
document.write(value + " ");
}
</script>

 

11. 배열의 생성 - 자바스크립트 배열은 타입 상관없이 사용가능

var arrLit = [1, true, "JavaScript"];             // 배열 리터럴을 이용하는 방법

var arrObj = Array(1, true, "JavaScript");        // Array 객체의 생성자를 이용하는 방법

var arrNewObj = new Array(1, true, "JavaScript"); // new 연산자를 이용한 Array 객체 생성 방법

 

document.write(arrLit + "<br>");                  // 1,true,JavaScript

document.write(arrObj + "<br>");                  // 1,true,JavaScript 

document.write(arrNewObj);                        // 1,true,JavaScript

 

12. arguments 객체

function addNum() {
    var sum = 0;                                // 합을 저장할 변수 sum을 선언함.
    for(var i = 0; i < arguments.length; i++) { // 전달받은 인수의 총 수만큼 반복함.
        sum += arguments[i];                    // 전달받은 각각의 인수를 sum에 더함.
    }
    return sum;
}

addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0
addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

13. eval()

var x = 10, y = 20;
var a = eval("x + y"); // 30
var b = eval("y * 3"); // 60
document.write(a + "<br>" + b);