Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Today
Total
관리 메뉴

고리타분한 개발자

Hello Javascript (1) 본문

JavaScript/About JS

Hello Javascript (1)

sunlee334 2017. 11. 28. 00:58

Hello World

  • Javascript는 interactive한 웹페이지 작성을 가능하게 한다. 예를 들면, 이벤트(e.g. 버튼 클릭, 웹페이지 로딩 완료 등)에 반응하여 HTML 요소에 접근하고 HTML 요소를 조작할 수 있다. 정적인 HTML을 동적으로 변경할 수 있는 유일한 방법은 Javascript를 사용하는 것이다.
  • 사용자에 의해 버튼이 클릭되면 정적 HTML을 조작하는 간단한 Javascript 예제를 만들어 보자.
<!DOCTYPE html>
<html>
<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 > Hello World </title>
<style>
button { color: red; }
</style>
</head>
<body>
<h1 id = "heading" > </h1>
<button id = "my-btn"> click me! </button>
<script>
var heading = document.getElementById('heading');
var myButton = document.getElementById('my-btn');

myButton.addEventListener('click', function() {heading.innerHTML = 'Hello World!';});
</script>
</body>
</html>



외부의 Javascript 실행하기 (External Javascript)

  • HTML은 웹페이지의 내용(content)과 구조(structure)을 담당한다. Javascript의 역할은 정적인 HTML을 동적으로 변경하는 것이다. 즉, HTML과 Javascript는 역할(관심사 Concern)이 다르므로 분리된 파일로 작성하는 것이 바람직하다.
  • 위 코드를 역할에 따라 HTML과 CSS, Javascript로 각각 분리해 보자.

HTML

<!DOCTYPE html>
<html>
<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> Hello World </title>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<h1 id = "heading" > </h1>
<button id = "my-btn"> click me! </button>
<script src="main.js"></script>
</body>
</html>

Javascript

// main.js
var heading = document.getElementById('heading');
var myButton = document.getElementById('my-btn');

myButton.addEventListener('click', function () {
heading.innerHTML = 'Hello World!';
});

CSS

/* style.css */

button {
color: red;
}

참고자료

  • http://poiemaweb.com/js-syntax-basics



저작자표시

'JavaScript > About JS' 카테고리의 다른 글

자료형  (0) 2017.11.28
Hello Javascript (3)  (0) 2017.11.28
Hello Javascript (2)  (0) 2017.11.28
자바스크립트란? (2)  (0) 2017.11.28
자바스크립트란? (1)  (0) 2017.11.28
공유하기 링크
'JavaScript/About JS' Related Articles more
Comments