Javascript

HTML과의 연계, onclick 속성과 event

저는 오늘 Hello World! 2의 내용을 HTML과 연계하여 '이벤트'라는 것을 나타내는 방법을 알아볼겁니다.

우선, 다음과 같은 HTML 코드를 짜줍시다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>onclick event</title>
    </head>
    <body>
        <input type="button" value="클릭해주세요.">
    </body>
</html>

그러면 다음과 같은 버튼이 나오겠죠?

여기서 클릭해주세요. 를 클릭하면 어떤 일이 일어나나요?

당연히 우리는 아무 '이벤트'를 안 정했기 때문에  아무 일도 안 일어날겁니다.

여기서 이벤트란 어떠한 입력값을 주었을 때 주는 출력값입니다.

그러면 이제 onclick이라는 속성을 통해서 우리가 Hello World! 2에서 배운 alert와 연계해서 사용해볼까요?

onclick 속성은 input에서 '만약 이 버튼이 눌렸다면'이 됩니다.

그러면 이제 저 버튼이 클릭됬을때 alert창으로 클릭되었습니다. 라고 출력할 수 있겠죠?

다음과 같이 코드를 짜봅시다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>onclick event</title>
    </head>
    <body>
        <input type="button" value="클릭해주세요." onclick="alert('클릭하셨습니다.')">
    </body>
</html>

그러면 당연히 클릭했을 때 경고창이 실행됩니다.

댓글

댓글 본문
graphittie 자세히 보기