본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었고, 2015년 6월 이후에 폐지됩니다. 개편된 수업에서 뵙겠습니다.http://opentutorials.org/course/1688
JavaScript란?
자바스크립트란 HTML을 조작하거나, 브라우저를 제어하는데 사용되는 언어다. 생활코딩의 맥락에서 자바스크립트가 중요한 이유는 이 언어가 본격적인 프로그래밍 언어라는 점 때문이다. 이 언어를 익히면 프로그래밍 언어에 대한 기본적인 소양을 갖출 수 있다. 자세한 내용은 생활코딩의 자바스크립트 수업으로 위임하고, 이번 시간에는 자바스크립트의 '문법'이 아니라, '역할'을 전달하는데 집중할 것이다.
한줄의 코드가 백줄의 설명 보다 낫다. 아래의 코드를 보자. <script> 태그는 브라우저에게 닫히는 태그인 </script> 태그가 등장하기 전까지 나타나는 코드는 자바스크립트이기 때문에 HTML로 해석하지 말고, 자바스크립트의 문법대로 해석하라고 알려주는 것이다.
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
alert('생활코딩');
</script>
</body>
</html>
이걸 실행하면 아래와 같이 경고창이 뜨면서 '생활코딩'이라는 메시지가 출력된다. alert() 의 괄호 안에 '생활코딩'이라는 문자를 입력하고 이걸 실행했더니 경고창이 뜨는 것이다. 자바스크립트를 이용해서 브라우저를 제어한다는 것은 이런 의미다. 브라우저는 경고창이라는 기능을 가지고 있고, 여러분이 이 기능을 사용하려면 브라우저가 제공하는 alert 명령에 '생활코딩'이라는 값을 전달한다. 그럼 브라우저는 '경고음'을 내면서 '생활코딩'이라는 메시지를 화면에 출력하는 것이다.
opentutorials의 JavaScript 실습
지금까지 HTML과 CSS를 이용해서 정보를 만들고, 거기에 디자인을 입혔다. 이번에는 사용자와 상호작용하는 기능을 부가함으로서 자바스크립트의 쓰임을 부각시켜보자.
결과
자바스크립트를 시켜서 black 버튼과 white 버튼을 감시하고 있다가 사용자가 해당 버튼을 클릭하면 id 속성의 값이 body인 엘리먼트의 class 속성을 black나 white로 변경한다. 그에 따라 웹페이지에 적용되는 CSS가 달라지면서 아래와 같이 디자인이 반전된다.
전체코드
index.html 파일을 열고 아래의 코드로 교체한 후에 실행시켜본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
font-size: 0.8em;
font-family: dotum;
line-height: 1.6em;
}
body.black {
background-color: black;
color: white;
}
body.black a {
color: white;
}
body.black a:hover {
color: #f60;
}
body.black header {
border-bottom: 1px solid #333;
}
body.black nav {
border-right: 1px solid #333;
}
header {
border-bottom: 1px solid #ccc;
padding: 20px 0;
}
#toolbar {
padding: 10px;
float: right;
}
nav {
float: left;
margin-right: 20px;
min-height: 500px;
border-right: 1px solid #ccc;
}
nav ul {
list-style: none;
padding-left: 0;
padding-right: 20px;
}
article {
float: left;
}
footer {
clear: both;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #333;
}
a:hover {
color: #f60;
}
h1 {
font-size: 1.4em;
}
</style>
</head>
<body id="body">
<div>
<header>
<h1>JavaScript</h1>
</header>
<div id="toolbar">
<input type="button" value="black" onclick="document.getElementById('body').className='black'" />
<input type="button" value="white" onclick="document.getElementById('body').className='white'" />
</div>
<nav>
<ul>
<li>
<a href="http://opentutorials.org/course/49/16">JavaScript</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/17">변수와 상수</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/18">연산자</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/19">함수</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/20">이벤트</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/21">객체</a>
</li>
</ul>
</nav>
<article>
<h2>변수와 상수</h2>
<div>
<p>
변수란
</p>
<ul>
<li>
변하는 값
</li>
<li>
x = 10 일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.
</li>
</ul>
<p>
상수란
</p>
<ul>
<li>
변하지 않는 값
</li>
<li>
x = 10 일 때 오른쪽항인 10이 상수가 된다.
</li>
</ul>
</div>
</article>
</div>
</body>
</html>
위의 코드 중에서 이전 수업 대비 변경된 부분은 아래와 같다.
CSS
body.black{
background-color: black;
color:white;
}
body.black a{
color:white;
}
body.black a:hover{
color:#f60;
}
body.black header{
border-bottom:1px solid #333;
}
body.black nav {
border-right: 1px solid #333;
}
위의 코드는 웹페이지의 배경을 검은색, 글씨를 흰색으로 표시할 것을 골자로 하는 CSS다. 그런데 새로운 선택자가 등장했다. body.black은 body 태그 중에 class 속성의 값이 black 인 엘리먼트를 의미한다. 우리가 필요한 것은 사용자가 black 버튼을 눌렀을 때 위의 CSS 효과가 웹페이지에 적용되는 것이다. 이를 위해서는 body 태그의 class 속성이 black이 되어야 한다. 그런데 HTML은 한번 화면에 표시된 웹페이지를 표시된 이후에 동적으로 변경시킬 수 있는 능력이 없다. 이 때 자바스크립트가 사용된다. 이것이 이번 수업의 핵심이다. 필자는 이 말을 하기 위해서 이 단원을 만들었다.
HTML
body 태그는 매우 중요하다. 이 태그의 class 속성 값을 어떻게 변경하느냐에 따라서 디자인이 반전되기 때문이다. id 값으로 body를 준 이유는 자바스크립트가 이 태그에 class 속성 값을 부여하기 위해서다. 곧 알게 된다.
<body id="body">
JavaScript
드디어 자바스크립트가 등장했다. 이번 수업 초입에서 <script> 태그에 대해서 알아봤다. 이번에는 인라인(inline) 방식으로 자바스크립트를 사용할 것이다. 우선 아래의 HTML 코드를 보자.
<input type="button" value="black" onclick="document.getElementById('body').className='black'" />
<input type="button" value="white" onclick="document.getElementById('body').className='white'" />
이제 정말 중요한 이야기를 할 때가 됐다. 자바스크립트와 같은 언어를 이벤트 주도 프로그래밍 (event-driven programming) 이라고 부른다. 이벤트는 영어로 사건을 의미한다. 프로그래밍의 세계에서 사건이란 이런 것이다.
- 웹페이지의 로딩이 끝났다.
- 사용자가 마우스를 움직인다.
- 사용자가 버튼을 눌렀다.
이 사건들을 감시하고 있다가 그 사건이 일어났을 때 어떤 작업을 수행하도록 프로그래밍하는 것이 이벤트 프로그래밍이다. onclick 속성 값은 이 속성을 포함하고 있는 엘리먼트(예제에서는 input 태그)를 사용자가 클릭했을 때 속성 값의 코드를 실행하라는 의미다. 웹브라우저에는 다양한 이벤트가 준비되어 있는데 다음 링크를 통해서 확인해보자. http://opentutorials.org/course/49/21#eventlist
이제 구체적인 코드를 보자. 이벤트가 발생하면 아래의 순서에 따라서 자바스크립트가 실행된다.
- 사용자가 버튼을 클릭
- 브라우저는 사용자가 버튼을 클릭했다는 것을 감지하고 ,이 버튼에 onclick 속성 값이 있는지 확인
- onclick 속성의 값이 있으면 이것을 자바스크립트 코드로 해석. 아래는 자바스크립트에 대한 해설
- document.getElementById('body') : id 값이 body인 엘리먼트를 찾아주는 명령
- .className = 'black' : 4번에서 찾은 엘리먼트의 class 속성 값으로 black를 지정하는 명령
- id 값이 body인 엘리먼트의 class 속성 값을 black로 변경
- body의 class 값이 black로 변경된 것을 감지한 브라우저는 body.black 선택자에 해당되는 효과들로 웹페이지의 디자인을 변경
정리
지금까지 자바스크립트에 대해서 알아봤다. 이 수업을 시작하면서 자바스크립트가 브라우저와 HTML을 제어하는 언어라고 정의 했다. 그 뜻만 이해했다면 이 번 수업은 대성공이다. 자바스크립트에 대한 구체적인 문법은 이번 수업의 주안점이 아니다. 만약 자바스크립트가 왜 필요한지 이해되지 않는다면 수업을 한번 더 보자. 중요하다! 할 수 있다!
다음 시간부터는 서버측 기술들에 대해서 알아본다. 클라이언트 측의 기술이 사용자에게 편리한 경험을 선사한다면, 서버측 기술은 시스템이 존재하는 기반이면서 목적이라고 할 수 있다.
버전관리
연습방법
필자가 권장하는 연습방법은 자신의 블로그에 대한 스킨을 직접 만들거나 사용하고 있는 스킨을 변경해서 자신의 입맛에 맞게 수정해보는 것이다. 아래 URL에서 leezche님이 각종 서비스 별 스킨 메뉴얼을 만들고 계신다.
