웹 페이지에 버튼을 만들고 버튼을 클릭했을 때 Welcome to the world!라는 내용이 담긴 경고창이 뜨도록 하겠습니다.
우선 버튼을 추가하겠습니다.
예시를 위해 기본 태그를 작성합니다. 웹 페이지의 제목은 alert sample로 하겠습니다. 본문에 버튼을 추가하기 위해 input 인풋 태그를 사용합니다. input 태그의 속성 property type을 "button"으로 설정합니다. 버튼에 텍스트 click here를 넣겠습니다. 속성 property value의 값을 "click here"로 지정합니다. 버튼이 생성되었습니다.
<! DOCTYPE html>
<html>
<head>
<title> alert sample </title>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="click here">
</body>
</html>
버튼을 클릭했을 때 경고창이 뜨도록 하겠습니다.
웹페이지의 버튼을 클릭하는 행위에 반응하여 경고창이 뜨는 동적인 현상을 구현해야 합니다. 이를 위해 사용하는 언어가 자바스크립트 JavaScript입니다. 경고창 alert box를 띄우는 자바스크립트 문법은 alert('경고창에 표시하고자 하는 텍스트')입니다. 클릭을 했을 때의 상황을 만들기 위해 html onclick 속성을 이용합니다. onclick의 속성 값으로는 반드시 자자바스크립트 JavaScript 문법을 작성해야 합니다. 웹브라우저는 사용자가 버튼을 클릭했을 때 onclick의 속성 값으로 입력되어 있는 자바스크립트 JavaScript의 내용을 읽고 html로 변환하여 출력합니다.
<! DOCTYPE html>
<html>
<head>
<title> alert sample </title>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="click here" onclick="alert('Welcome to the real world!)">
</body>
</html>
자바스크립트와 연계하여 동적인 현상을 구현하는 속성 property를 이벤트 event라고 합니다.
버튼을 클릭했을 때 경고창이 뜨는 것과 같이 웹브라우저에서 자바스크립트 문법과 상호작용하여 동적인 현상이 구현됩니다. 이벤트를 만드는 속성에는 onclick, onchange, onkeydown 등이 있습니다. 현대의 웹 페이지에서 자주 사용되는 이벤트 속성을 조합하여 사용자가 편리하게 웹 페이지를 읽을 수 있도록 도울 수 있습니다.
'코딩' 카테고리의 다른 글
| Comparison operators 비교연산자와 데이터타입 (Number 숫자열, String 문자열, Boolean 불리언) (0) | 2020.09.05 |
|---|---|
| 자바스크립트로 웹페이지 버튼 클릭했을 때 배경색, 글자색 바꾸기 (0) | 2020.09.04 |
| html script 스크립트 태그로 자바스크립트 JavaScript 사용하기 (0) | 2020.09.03 |
| html css 스타일 태그로 적용하는 방법과 link 링크 태그로 css 파일 연결하여 적용하는 방법 (0) | 2020.09.02 |
| css media queries 미디어 쿼리 min-width, max-width 비교하기 (0) | 2020.09.01 |
댓글