메뉴 건너뛰기

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
번호 제목 날짜 조회 수
117 안드로이드 종료 취소 다이얼로그 코드 2015.07.26 6389
116 폰갭 비콘 디텍팅 안될 때 (기본적인건 다 되있어야됨) 2015.07.26 6528
115 안드로이트 비콘 스캐닝시 고려 사항 2015.07.26 6658
114 블루투스 및 비콘 관련 정리 2015.07.26 10828
113 블루투스(Bluetooth) 통신에 대해 알아보자 file 2015.07.26 14046
112 안드로이드 팝업창 만들기(xml 내용 집어넣기) file 2015.07.23 9285
111 안드로이드 스튜디오 gradle error 해결 2015.07.23 6683
110 [안드로이드] 화면추가 버튼 리스너 file 2015.07.22 7681
109 [안드로이드] 페이스북 같은 슬라이드 메뉴 만들기 file 2015.07.21 8182
108 안드로이드 ( Android ) APK 파일 생성하기 file 2015.07.17 7305
107 안드로이드 webview (웹뷰) 개발 #4 - 멀티터치 ( 확대 / 축소 ) 적용 file 2015.07.17 7552
106 안드로이드 webview (웹뷰) 개발 #3 - 초기 로딩화면 (splash) 띄우기 + 아이콘 적용하기 file 2015.07.17 8697
105 안드로이드 webview (웹뷰) 개발 #2 - 파일 첨부 및 플러그인 적용하기 file 2015.07.17 8282
104 안드로이드 webview (웹뷰) 개발 #1 - 웹사이트를 어플로 만들어 보자! file 2015.07.17 8903
103 [안드로이드] 버튼 이벤트 처리하기 file 2015.07.17 7029
102 [안드로이드] 뷰(View)에 여백넣기 file 2015.07.17 7225
101 [안드로이드] 뷰(View)의 너비와 높이 지정하기 file 2015.07.17 7140
100 [안드로이드] 레이아웃의 기본2 file 2015.07.16 7071
99 [안드로이드] 레이아웃의 기본1 file 2015.07.16 6962
98 [안드로이드] Activity에 대해서 file 2015.07.16 6767
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved