요소선택
아이디를 이용해서 요소 선택 (getElementById)
<html>
<body>
<div id="target">Hello world!</div>
<script>
document.getElementById('target').innerHTML = 'World Hello';
</script>
</body>
</html>
태그명을 이용해서 요소 선택 (getElementsByTagName)
<html>
<body>
<div>Hello world!</div>
<div>Hello world!</div>
<script>
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
divs[i].innerHTML = "World Hello!";
}
</script>
</body>
</html>
속성 변경 (setAttribute)
<html>
<head>
<style>
.active {
background-color: green;
}
</style>
</head>
<body>
<div id="target">Hello world!</div>
<div>Hello world!</div>
<script>
document.getElementById('target').setAttribute('class', 'active');
</script>
</body>
</html>
스타일 변경 (style)
<html>
<body>
<div id="target">Hello world!</div>
<div>Hello world!</div>
<button onclick="document.getElementById('target').style.backgroundColor='green'">Change</button>
</body>
</html>
이벤트 (click)
<html>
<head>
<style>
.active {
background-color: green;
}
</style>
</head>
<body>
<div id="target">Hello world!</div>
<div>Hello world!</div>
<button onclick="document.getElementById('target').setAttribute('class', 'active')">Change</button>
</body>
</html>
opentutorials.org.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
header {
border-bottom:1px solid gray;
}
nav {
float:left;
padding-top:10px;
}
article {
float:left;
width:600px;
padding-left:30px;
}
body {
font-size:0.8em;
}
h1 {
font-size:3em;
}
h2 {
font-size:2em;
}
.toolbar {
width:600px;
text-align:right;
float:left;
padding-left:30px;
}
body.black {
color:white;
background-color:black;
}
.black a {
color:red;
}
</style>
<script>
function changeColor(color){
document.getElementById('body').className=color;
}
function readability(mode){
var header = document.getElementById('header');
var nav = document.getElementById('nav');
if(mode){
header.style.display = nav.style.display = 'none';
} else {
header.style.display = nav.style.display = 'block';
}
}
</script>
</head>
<body id="body">
<header id="header">
<h1>JavaScript</h1>
</header>
<nav id="nav">
<ul>
<li>JavaScript란 무엇인가?</li>
<li>변수</li>
<li>상수</li>
<li>반복문</li>
<li>조건문</li>
</ul>
</nav>
<div class="toolbar">
<input type="button" value="검은색" onclick="changeColor('black');" />
<input type="button" value="흰색" onclick="changeColor('white');" />
<input type="button" value="단순보기" onclick="readability(true);" />
<input type="button" value="일반보기" onclick="readability(false);" />
</div>
<article>
<h2 id="title">JavaScript란 무엇인가?</h2>
<p>JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다.</p>
<p><a href="#goal">자바스크립트로 할 수 있는 일</a>을 참고하면 알 수 있지만, 최근에는 자바스크립트가 웹을 벗어나서 광범위하게 사용되고 있다. 그 효용이 다각적이면서도 배우기 쉬운 점 때문에 자바스크립트는 중급 개발자나 프로그래밍 입문자 모두가 도전해볼만한 언어다.</p>
<h3>역사</h3>
<p>HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를 해결하기 위해서 네스케이프에서 만들어졌다. 이후에 이 언어는 마이크로소프트의 인터넷 익스플로러에 jscript라는 이름으로 탑재된다. 후에 ECMA라는 표준화 기구로 이 언어의 관리 주체가 옮겨졌다.</p>
<h3>ECMAScript</h3>
<p>ECMAScript는 표준화 기구인 Ecma International에 의해서 관리되는 자바스크립트 표준안이다. 현재의 자바스크립트는 ECMAScript 3 기반으로 만들어졌고, 현재 시점(2013년)에서는 ECMAScript 5가 표준으로 정의 되었고 이 버전의 자바스크립트를 브라우저 벤더들이 자신들의 브라우저에 구현하는 작업이 한창이다. 곧 ECMAScript 5의 새로운 기능들을 웹에서도 문제 없이 사용할 수 있게 될 것이다. ECMAScript 4는 기존의 자바스크립트와 너무 큰 차이점 때문에 표준으로 채택되지 못했다.</p>
<h3>JavaScript 학습에 요구되는 선행학습</h3>
<p>웹페이지를 동적으로 제어하기 위한 목적으로 자바스크립트를 학습한다면 아래 내용은 반드시 선행해야한다. 아래 내용을 학습 한 후에 본 수업을 공부하고 DOM을 학습하면 웹페이지를 프로그래밍적으로 제어 할 수 있다. 최근에는 DOM을 직접 제어하는 것 보다는 jQuery와 같은 라이브러리를 사용하는 것이 일반적이다. DOM에 대한 내용은 <a href="http://opentutorials.org/course/49/24" target="_blank">DOM 수업</a>을 참고하고 jQuery에 대한 내용은 <a href="http://opentutorials.org/course/53" target="_blank">jQuery 수업</a>을 참고한다.</p>
</article>
</body>
</html>
나중에 공부해주세요.
생활코딩 자바스크립트 수업
