[JavaScript] 생활코딩 03~07 실습

조이은 2023. 6. 11. 21:34

01. JavaScript

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>JavaScript</h1>
    <script>
        document.write(1+1);
    </script>
    <h1>html</h1>
    1+1
</body>
</html>

- html과 자바스크립트의 차이를 알 수 있게 되는데, 자바스크립트로 작성하면 동적으로 동작한다는 것을 알 수 있다.

02. event 처리

웹 브라우저에서 클릭을 했을 때, 스크롤을 내렸을 때 등 특정한 사건이 발생하였을 때 나타나는 사건

1) onclick

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="hi" onclick="alert('hi')"/>
</body>
</html>

2) onchange

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="hi" onclick="alert('hi')"/>
    <input type="text" onchange="alert('changed')" />
</body>
</html>

3) onkeydown

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="hi" onclick="alert('hi')"/>
    <input type="text" onchange="alert('changed')" />
    <input type="text" onkeydown="alert('key down!)'" />
</body>
</html>