Web/Web Programming

[생활코딩/JavaScript] HTML과 JavaScript (기초)

[HTML] script 태그

script 태그를 사용해 HTML 코드 내부에 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>

ex1.html

HTML 코드를 통해 1+1을 입력했을 때는 각각의 요소를 문자로만 인식하여 그대로 출력되는 반면,

Script를 통해 document.write(1+1)을 하게 될 경우, 1+1이라는 덧셈 연산을 인식하고 연산 결과를 출력한다.

[HTML] 이벤트

웹 페이지에서 특정한 이벤트에 대한 처리를 수행하기 위해 JavaScript의 코드를 사용한다.

onclick 속성

버튼을 클릭했을 때의 결과를 결정한다. 이 때 onclick의 값으로는 JavaScript의 코드가 와야만 한다.

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

onclick에 대한 값으로 alert('hi')라는 JavaScript 코드를 넣어 HI라는 이름의 버튼을 클릭했을 때 'hi'라는 문구가 경고창으로 출력될 수 있도록 한다.

 

onchange 속성

text 타입의 input에 대해 값이 달라지는 이벤트에 대한 처리를 할 수 있는 속성이다. 마찬가지로 JavaScript의 코드를 값으로 한다.

<!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>
더보기

abc : changed -> abcedf -> abc : 경고창이 뜨지 않는다.

onkeydown 속성

임의의 key를 누르는 input이 발생했을 때에 대한 결과를 처리하는 속성이다. 마찬가지로 JavaScript의 코드를 값으로 한다.

<!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>
더보기
SMALL

'Web > Web Programming' 카테고리의 다른 글

[CSS] 목록과 표 장식하기  (0) 2020.08.05
[CSS] 문자와 색상 지정  (0) 2020.08.03
[CSS] CSS 속성 설정 / 스타일시트 선언 방법  (0) 2020.08.02
[CSS] WEB2.1 - WEB2.9  (0) 2020.07.29
WEB 02.1.1 유튜브 영상 공유  (0) 2020.07.22

    티스토리툴바