1. JavaScript란?
JavaScript
: ① HTML에서 사용하는 프로그래밍 언어
② 스크립트 언어이며 웹 브라우저의 동작을 제어한다.
③ 정적인 HTML에 동적인 기능을 부여해 웹 애플리케이션으로 진화시킬 수 있다.
④ 브라우저에서 발생하는 다양한 이벤트에 연결할 수 있으며, 이를 통해 브라우저에서
기본적으로 제공하는 기능보다 더 다양한 기능을 제공한다.
JavaScript를 통해 구현할 수 있는 기능은 여러 가지이지만 JavaScript로 할 수 있는 일을 요약하자면
총 7가지로 설명할 수 있다.
2. JavaScript로 할 수 있는 일
1) HTML 문서에 새로운 HTML 요소를 추가하는 기능
ex)
<a href="http://www.google.com" id="link">Google</a>
<script>
var link = document.getElementById("link");
link.innerHTML += " (" + link.href + ")";
link.setAttribute("target", "_blank");
</script>
2) HTML 문서에 새로운 HTML 요소를 추가하는 기능
ex)
<script>
window.onload = function () {
var node = document.createElement("h1");
node.innerHTML = "Hello World!";
document.body.appendChild(node);
};
</script>
3) HTML 요소에 스타일 속성 추가 또는 수정하는 기능
ex)
<script>
window.onload = function () {
var title = document.getElementById("title");
title.style.color = "red";
title.style.fontFamily = "Tahoma, sans-serif";
title.style.borderBottom = "2px solid gold"
};
</script>
4) 기존 HTML 요소의 복제 또는 제거하는 기능
ex)
<script>
window.onload = function () {
window.setTimeout(function () {
var element = document.getElementById("remove");
element.parentNode.removeChild(element);
}, 3000);
};
</script>
5) 특정한 기능을 일정한 시간 이후에 실행하는 기능
ex)
<script>
document.getElementById("clickme").onclick = function () {
console.log("click #" + i);
window.setTimeout(function () {
var node = document.createElement("h1");
node.innerHTML = "Hello World! #" + i;
document.body.appendChild(node);
i++;
}, 2000);
};
</script>
6) 특정한 기능을 주기적으로 실행하는 기능
ex)
<script>
window.setInterval(function () {
rolling.className = "move";
window.setTimeout(function () {
rolling.className = "";
var firstChild = rolling.querySelector(":first-child");
rolling.appendChild(firstChild);
}, 400); // window.setTimeout
}, 2000); //window.setInterval
</script>
7) 마우스 이벤트 처리와 스타일 변경
ex)
<script>
dropdownMenus[i] = function () {
if (this.nextElementSibling,style.display == "block")
this.nextElementSibling,style.display == "none"
else {
for (var i = 0; i < dropdowns.length; i++)
dropdowns[i].style.display = "none"
this.nextElementSibling,style.display == "block"
}
return false;
};
</script>
앞에서 설명한 예시처럼 JavaScript를 구현하려면 <script>태그 안에서 작성하면 되는데 이 <script>태그를
head태그와 body 태그 둘 다 삽입할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
<h1>Hello World!</h1>
<script>
alert("Hello World!");
</script>
</body>
</html>
body 태그 안에서 script 태그를 넣을 때는 가급적 body 태그를 닫기 직전에 추가해야 한다.
그러나 특별한 경우가 아닌 경우에는 head 태그 안에서 작성하는 것이 좋다.
3. HTML문서에 JavaScript를 추가하는 방법
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script src="hello.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<script src"hello.js"></script>
</body>
</html>
이렇게 script 태그 안에 src 속성을 이용해 JavaScript 파일을 추가할 수 있다.
출처: <모던 웹을 위한 JavaScript + iQuery 입문>