JavaScript 시작하기

자바스크립트는 사용자와 상호작용을 하는 언어이다. 즉, 동적이다 (HTML은 정적이다)
웹브라우저는 한번 화면에 출력되면 자기 자신을 바꿀 수 없다.
그러나 JavaScript를 이용한다면 JavaScript 코드에 따라서 변화가 일어난다. → 이것이 ‘JavaScript가 HTML을 제어하는 언어다’ 는 정의를 내리는 이유다.

1. `<script>`와 `</script>`

<body>
  <h1>JavaScript</h1>
  <script>document.write(1+1);</script>
  <h1>html</h1>
  1+1
</body>

<script> 태그는 안쪽에 JavaScript가 오도록 약속되어있다. 웹브라우저는 <script> 안에 있는 코드를 JavaScript로 해석한다.

그렇다면 JavaScript 와 HTML로 작성한 것은 무슨 차이가 있는가?

분명 둘 다 ‘1+1’을 적어주었지만 HTML에서는 문자 그대로, JavaScript에서는 ‘1+1’이 계산된 값인 2가 출력이 된다.

이것은 JavaScript은 동적, HTMl은 정적이라는 것을 잘 보여주는 예시이다.

2. `<input>`

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="hi" onclick="alert('hi')">
</body>
</html>

type="button"은 웹페이지에 버튼을 만들어 줄 수 있다. value는 버튼의 이름을 지정해줄 수 있다.

onclick은?

onclick의 속성값으로는 반드시 JavaScript가 와야한다.
onclick의 속성의 속성 값은 웹브라우저가 기억하고 있다가 onclick의 속성이 위치하고 있는 태그를 클릭했을 때 JavaScript 코드를 JavaScript 문법에 따라 해석해 거기 적혀 있는대로 동작할 것이다.

즉, 우리가 hi의 버튼을 클릭한다면 onclick안에 적혀있는 JavaScript 코드에 따라 실행된다.

<input type="button" value="버튼을 만들었다!" onclick="alert('버튼을 눌렀다!')">

이와 같이 웹브라우저 위에서 일어나는 일들을 event(이벤트)라고 한다.

이벤트(event)

무수히 많은 이벤트들이 존재
이벤트들로 사용자들과 상호작용하는 코드를 만들 수 있음

1. text

text는 문자를 입력할 수 있는 상자를 만들어 준다.

<body>
    <input type="text">
</body>

2. onchange

‘내용이 변했을 때’라는 이벤트를 체크한다. text 속성에서 시작할 때와 비교해 변화가 있다면 이벤트가 발생한다.

<body>
    <input type="text" onchange="alert('changed')">
</body>

3.onkeydown

text 속성안에서 down key를 누르면 이벤트가 발생한다.

<body>
    <input type="text" onkeydown="alert('key down!!')">
</body>

Console

✔️ Console을 통해서 JavaScript 코드를 실행하게 한다면 해당 웹페이지를 대상으로 JavaScript 코드가 실행된다.

먼저, Console 화면을 열어보자. 웹페이지의 빈 공간에 우클릭을 하면 아래와 같은 창이 뜬다.

맨 마지막의 ‘검사’를 눌러준다.

이곳에서 우리는 나의 필요에 따라서 코드를 작성하여 실행할 수 있다.