주요 문법
<input type="button" onclick="alert('Hello world')" value="Hello world" />- HTML안에 JavaScript문법 넣어 버튼 만들기
alert('Hello world');- Hello world라는 경고창 띄우기
예제
- 우선 작성된 파일을 열기 위해서는 폴더를 더블클릭하거나
- 구글에서 ctrl+O 를 눌러 이와같이 선택해준다.
<버튼 만들기>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>- "button"을 클릭했을 때 onclick(HTML)안에 alert(JavaScript)문법을 실행시킬 수 있다.
- 즉 button에 대한 동작을 진행한다.
- 이 방법은 HTML와 JavaScript가 함께 있으므로 비효율적이다.
<Script 분리>
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript">
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>- button이라는 클릭타입을 만들고 id는 hw로 선언한다. 그 값은 (보이는 값) Hello world이다.
- hw라는 element를 가져오고 변수 hw로 선언
- addEventListener로 click이라는 반응이 일어났을 때 function()실행
- function()은 alert라는 경고창이고 (' ')안의 말을 표시
<외부에 있는 JavaScript 파일 불러오기>
- <script>는 기본적으로 body안에 들어가 있는 것이 정석이다.
- 이처럼 head에 들어가 있을 때 불러오는 법을 배운다.
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" id="hw" value="Hello world" />
</body>
</html>
demo.html은 이와같이 작성해준다.
window.onload = function(){
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}script.js파일은 이와같이 작성해준다.
'Web Development > JavaScript' 카테고리의 다른 글
| 6. JQuery 사용해서 문서 내 특정 요소로 객체 찾기(JavaScript) (0) | 2022.09.06 |
|---|---|
| 5. 문서 내 특정 요소로 객체 찾기 (JavaScript) (0) | 2022.09.06 |
| 4. 버튼을 누르면 새창 만들기(창 제어하기) (JavaScript) (0) | 2022.09.05 |
| 3. JavaScript에서 경고창(alert), 선택창(confirm), 검색창(prompt) 만들기 (2) | 2022.09.05 |
| 1. JavaScript 실습을 위한 Sublime Text 설치하기 (0) | 2022.09.05 |