반응형
자바 스크립트를 좀 알아보겠습니다.
HTML 파일은 아래와 같이 준비해 주세요.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="dougy.js"></script>
<title> Dougy's HTML5 </title>
</head>
<body>
<div id="big_wrapper">
<p id="tuna"> first </p>
<p id="bacon"> second </p>
<p id="tuna"> third </p>
</div>
</body>
</html>
처음 doctype은 HTML5를 사용하겠다는 의미입니다.
브라우저는 이 코드가 있을 경우 HTML5를 사용 가능하도록 만듭니다.
물론 HTML5가 지원되는 브라우저라야 되겠죠.
그리고 오늘은 자바스크립트를 할 거니까 별로 관계는 없습니다.
그래도 지금 HTML5를 배우고 있으니까 이 코드를 넣는게 낫겠죠.
그리고 script 태그를 보시면 dougy.js 를 사용할 거라고 선언했습니다.
그럼 dougy.js를 볼까요?
function getStuff() {
document.querySelector('#tuna').onclick=talk;
}
function talk() {
alert('Alert box!');
}
window.onload=getStuff;
이 코드를 복사해 넣으세요.
getStuff() 내용은 #tuna 라는 id를 가진 태그를 클릭하면 talk 함수를 실행하라는 의미입니다.
talk 함수는 alert box를 띄우는 함수구요.
맨 마작은 웹페이지가 처음 열릴 때 getStuff 함수를 사용하라는 의미입니다.
이러면 tuna라는 id를 가진 first 를 클릭하면 이렇게 alert 창이 뜹니다.
그런데 이렇게 하면 third도 id가 tuna 인데 alert창이 뜨지 않습니다.
제일 첫번째 id에만 적용 됩니다.
이렇게 여러 id에도 적용이 되야 할 경우에는 Array(배열)을 이용해야 됩니다.
그리고 querySelectorAll 을 사용하구요.
dougy.js를 아래와 같이 고칩니다.
function getStuff() {
var list = document.querySelectorAll('#tuna');
list[0].onclick=talk;
list[1].onclick=talk1;
}
function talk() {
alert('Alert box!');
}
function talk1() {
alert('Hi Alert box2!');
}
window.onload=getStuff;
참고로 아래 코드도 보세요.
function getStuff() {
var list = document.querySelectorAll('#tuna');
for(var i=0; i<list.length;i++) {
list[i].onclick = talk;
}
}
function talk() {
alert('Alert box!');
}
window.onload=getStuff;
보시면 for 문을 이용해서 id가 tuna인 모든 태그를 클릭했을 때 talk 함수를 실행하는 방법입니다.
팁으로 알려드립니다.
다음 글에서는 HTML5의 video Tag에 대해 공부하겠습니다.
HTML 파일은 아래와 같이 준비해 주세요.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="dougy.js"></script>
<title> Dougy's HTML5 </title>
</head>
<body>
<div id="big_wrapper">
<p id="tuna"> first </p>
<p id="bacon"> second </p>
<p id="tuna"> third </p>
</div>
</body>
</html>
처음 doctype은 HTML5를 사용하겠다는 의미입니다.
브라우저는 이 코드가 있을 경우 HTML5를 사용 가능하도록 만듭니다.
물론 HTML5가 지원되는 브라우저라야 되겠죠.
그리고 오늘은 자바스크립트를 할 거니까 별로 관계는 없습니다.
그래도 지금 HTML5를 배우고 있으니까 이 코드를 넣는게 낫겠죠.
그리고 script 태그를 보시면 dougy.js 를 사용할 거라고 선언했습니다.
그럼 dougy.js를 볼까요?
function getStuff() {
document.querySelector('#tuna').onclick=talk;
}
function talk() {
alert('Alert box!');
}
window.onload=getStuff;
이 코드를 복사해 넣으세요.
getStuff() 내용은 #tuna 라는 id를 가진 태그를 클릭하면 talk 함수를 실행하라는 의미입니다.
talk 함수는 alert box를 띄우는 함수구요.
맨 마작은 웹페이지가 처음 열릴 때 getStuff 함수를 사용하라는 의미입니다.
그런데 이렇게 하면 third도 id가 tuna 인데 alert창이 뜨지 않습니다.
제일 첫번째 id에만 적용 됩니다.
이렇게 여러 id에도 적용이 되야 할 경우에는 Array(배열)을 이용해야 됩니다.
그리고 querySelectorAll 을 사용하구요.
dougy.js를 아래와 같이 고칩니다.
function getStuff() {
var list = document.querySelectorAll('#tuna');
list[0].onclick=talk;
list[1].onclick=talk1;
}
function talk() {
alert('Alert box!');
}
function talk1() {
alert('Hi Alert box2!');
}
window.onload=getStuff;
function getStuff() {
var list = document.querySelectorAll('#tuna');
for(var i=0; i<list.length;i++) {
list[i].onclick = talk;
}
}
function talk() {
alert('Alert box!');
}
window.onload=getStuff;
보시면 for 문을 이용해서 id가 tuna인 모든 태그를 클릭했을 때 talk 함수를 실행하는 방법입니다.
팁으로 알려드립니다.
다음 글에서는 HTML5의 video Tag에 대해 공부하겠습니다.
반응형
'WEB_APP > HTML5' 카테고리의 다른 글
| HTML5 Canvas 이용하기 - 01 - (0) | 2011.12.21 |
|---|---|
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript (2) | 2011.12.19 |
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript (2) | 2011.12.18 |
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS (0) | 2011.12.17 |
| HTML5로 비디오 보여주기 Video Tag (0) | 2011.12.17 |
| HTML5 CSS Animation 효과 (5) | 2011.12.15 |
| HTML5 CSS Text shadow, translate 효과 등등 (0) | 2011.12.14 |
| CSS3 Rounded Corner, 그림자 효과 사용하기 (0) | 2011.12.12 |
| webkit-box 좀 더 알아보기 (Flexible Box Model) (6) | 2011.12.10 |
| HTML5 화면 Layout 잡기 -2 (Flexible Box Model) (2) | 2011.12.09 |