메뉴 건너뛰기

2014.09.04 18:57

JavaScript 맛보기

조회 수 6589 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
자바 스크립트를 좀 알아보겠습니다.
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;

List of Articles
번호 제목 날짜 조회 수
257 안드로이드 php 로 mysql json 파싱 하기 2014.08.28 9407
256 FTPClient 를이용하여 ftp상 서버에서 데이터 다운로드 편 2014.08.28 9848
255 XmlPullParser 를이용하여 데이터 가져와보기!! 2014.08.28 7221
254 FTPClient 를이용한 데이터 업로드 하기 2014.08.28 6366
253 클래스나눠서 xml 파싱과 FTP를이용하여 안드로이드에서 활용하기 2014.08.28 6180
252 전화 인텐트와 나의 전화 번호가져오기 2014.08.28 6312
251 사진찍기 및 앨범 에서 사진 가져오기!!! 2014.08.28 13889
250 안드로이드 웹에서 이미지 불러오기!! 2014.08.28 7052
249 맵에 오버레이 추가하여 아이템 넣어보기 2014.08.28 6474
248 실행중인 Service 확인하기 2014.08.28 6595
247 안드로이드 이미지 효율적으로 회전 해보기 2014.08.28 5995
246 WIFI 신호세기 강도 측정하기 2014.08.28 11238
245 WebView 줌 컨트롤러 가리기 2014.08.28 6316
244 ImageVeiw의 현재 리소스 비교하기 2014.08.28 6748
243 HTML5 Speech Input (음성인식) API 2014.09.04 6453
242 HTML5 시작하기 file 2014.09.04 5660
241 CSS3 Rounded Corner, 그림자 효과 사용하기 file 2014.09.04 6755
» JavaScript 맛보기 file 2014.09.04 6589
239 HTML5로 비디오 보여주기 Video Tag file 2014.09.04 7059
238 HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS file 2014.09.04 6453
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved