자바스크립트

HTML은 콘텐츠와 골격, CSS는 웹페이지의 레이아웃, JavaScript는 웹페이지의 동작
- ES1 (초판, 1997)
- ES2 (1998)
- ES3 (1999)
- ES5 (2009, 엄격모드, 배열메서드(map, filter, forEach 등), JSON 등)
- ES6 (2015, ECMAScript 2015)
- ES7 (2016, ECMAScript 2016, 이하 생략)
- ES6 부터 const, let, Promise, Arrow function, class 등의 문법들이 대거 추가
- ECMA-인터내셔널 공식 사이트 : https://www.ecma-international.org/

수업 환경 설정

about:blank

자바스크립트 삽입위치

head, body의 문서 처음, 중간, 끝
보통 body의 맨 끝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="one">hello world 1</h1>
    <h1 onclick="alert('hello')">hello world 2</h1>
    <script>
        document.getElementById('two').innerHTML = 'hello'
    </script>

    <h1 id="two">hello world 2</h1>
</body>
</html>

내부 스크립트와 외부 스크립트

<script>
    console.log('hello')
</script>

<script src="test.js"></script>

JavaScript를 출력하는 4가지 방법

문서 내에 요소를 선택하여 출력하는 방법(innerHTML, innerText 등)
문서 내에 직접 출력하는 방법(write 등)

<aside> 💡 document.write()는 기존에 html 요소를 다 지우고 다시쓰기 때문에 권장하지 않습니다. h1요소로 ‘hello world’를 하나 만든 다음 콘솔에서 document.wirte(’hello’)를 실행하시면 기존에 h1요소가 사라집니다.

</aside>
사용자 인터렉션(alert, confirm 등)
콘솔에 찍는 방법(console.log, console.table, console.error 등)

코드 구조

문(statement)은 세미콜론으로 구분(세미콜론을 붙이지 않는 곳도 있습니다.)
문은 값, 연산자, 키워드, 명령어, 표현식(값으로 평가, 함수나 key, index를 통한 값의 호출도 표현식) 등으로 구성됩니다.