[코딩애플] js part 1-1. 강의 듣기 전 자바스크립트 기본 문법 총정리

JavaScript를 쓰는 이유

1. HTML 변경하려고 씀

<p id="hello">안녕</p>

<script>
    document.getElementById('hello').innerHTML = '바보'
</script>

2. HTML 누르면 뭐 실행하고 싶을 때 ➡️이벤트리스너

<p id="hello">안녕</p>
<button id="button">버튼</button>

<script>
    document.getElementById('button').addEventListener('click', function() {
        document.getElementById('hello').innerHTML = '바보'
    })
</script>

3. 잠깐 자료를 저장해두고 싶다면 ➡️ 변수

• 용도에 따라 var, let, const 사용 가능함

<script>
    var name = 'kim';
    let age = 20;
</script>

4. 긴 코드를 짧게 축약하려면 ➡️ 함수

<p id="hello">안녕</p>
<button id="button">버튼</button>

<script>
    document.getElementById('button').addEventListener('click', function() {
        작명();
    })
    
    function 작명() {
        document.getElementById('hello').innerHTML = '바보'
    }
</script>

5. 함수 다양하게 쓰려면 ➡️ 파라미터로 업그레이드

<p id="hello">안녕</p>
<button id="button">버튼</button>

<script>
    document.getElementById('button').addEventListener('click', function() {
        작명('바보');
    })
    
    function 작명(파라미터) {
        document.getElementById('hello').innerHTML = 파라미터
    }
</script>

화살표 함수

• 정확히 같은 역할을 하는 것은 아님. 후에 알아볼 것임.

document.getElementById('button').addEventListener('click', () => {
	작명('바보');
})

6. 한 번에 여러 개 자료를 저장하려면 ➡️ array, object

array

• array 속에 array나 함수를 넣을 수도 있다.
• 원하는 자료 뽑기 ➡️ **인덱싱**

var name = ['kim', 'park', 20];
name[0];
name[2];

object

var name = {name: 'kim', age: 20};
name.age;

7. 코드를 조건부로 실행하고 싶을 때 ➡️ if / else

if (조건식) {
	console.log('안녕');
} else if (조건식2){
    console.log('안녕2');
} else {
    console.log('안녕3');
}

🔹여러 개의 조건부를 작성하기

if (조건식 && 조건식 || 조건식) {
	console.log('안녕');
}

❗등호 종류

• 느슨한 비교(==)
• 엄격한 비교(===)

8. 반복되는 코드를 줄이고 싶을 때 ➡️ for 반복문

🔹세 번 반복하기

for (var i = 0; i < 3; i++){
	console.log('안녕');
}

forEach

• array에만 붙일 수 있음
• 파라미터를 붙이면 자료를 하나씩 가져옴

[1, 2, 3, 4].forEach(function(a) {
    ...
});