004. JavaScript

1. JavaScript 2. 메모장이나 크롬에서 바로 작성하는 예제 2.1. 인라인 방식 2.2. script 2.3. 외부 파일로 분리

1. JavaScript

이전에 배웠던 HTML, CSS은 웹의 내용을 작성하고 꾸미는 정적언어지만 JavaScript는 정적 페이지를 동적으로 만들어주는 언어입니다.

즉, JavaScript는 근육에 해당합니다.

2. 메모장이나 크롬에서 바로 작성하는 예제

메모장에서 아래 코드를 입력한 뒤, '다른 이름으로 저장'을 클릭해 확장자를 .txt 대신 .html로 바꿔서 저장하면 됩니다.

Mac OS의 경우에는 "텍스트 편집기"에서 "포맷"란에 들어가 "일반 텍스트 만들기"에서 작성하신 후 확장자를 .js로 변경하시면 됩니다.

2.1. 인라인 방식


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="1.css">
</head>
<body>
	<h1>Hello world</h1>
	<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>

2.2. script


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="1.css">
</head>
<body>
	<h1>Hello world</h1>
	<input type="button" id="btn" value="Hello world" />
	<script>
		var btn = document.getElementById('btn');
		btn.addEventListener('click', function() {
			alert('Hello world');
		})
	</script>
</body>
</html>

2.3. 외부 파일로 분리

외부 파일을 불러오는 경우에는 파일의 경로 (href)를 맞춰주기 위해 파일들이 같은 폴더에 위치해야 합니다. javascript 파일의 경우에도 메모장에서 작성할 수 있으며, html 파일 저장할 때와 마찬가지로 확장자를 .js 로 바꿔주면 됩니다.


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="1.css">
</head>
<body>
	<h1>Hello world</h1>
	<input type="button" id="btn" value="Hello world" />
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

파일명 : script.js


var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
	alert('Hello world');
})

어떤 방식이든 결과 화면은 이와 같이 나옵니다.