메뉴 건너뛰기

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;

  1. No Image 26Jul
    by
    2015/07/26 Views 6389 

    안드로이드 종료 취소 다이얼로그 코드

  2. No Image 26Jul
    by
    2015/07/26 Views 6528 

    폰갭 비콘 디텍팅 안될 때 (기본적인건 다 되있어야됨)

  3. No Image 26Jul
    by
    2015/07/26 Views 6658 

    안드로이트 비콘 스캐닝시 고려 사항

  4. No Image 26Jul
    by
    2015/07/26 Views 10828 

    블루투스 및 비콘 관련 정리

  5. 블루투스(Bluetooth) 통신에 대해 알아보자

  6. 안드로이드 팝업창 만들기(xml 내용 집어넣기)

  7. No Image 23Jul
    by
    2015/07/23 Views 6683 

    안드로이드 스튜디오 gradle error 해결

  8. [안드로이드] 화면추가 버튼 리스너

  9. [안드로이드] 페이스북 같은 슬라이드 메뉴 만들기

  10. 안드로이드 ( Android ) APK 파일 생성하기

  11. 안드로이드 webview (웹뷰) 개발 #4 - 멀티터치 ( 확대 / 축소 ) 적용

  12. 안드로이드 webview (웹뷰) 개발 #3 - 초기 로딩화면 (splash) 띄우기 + 아이콘 적용하기

  13. 안드로이드 webview (웹뷰) 개발 #2 - 파일 첨부 및 플러그인 적용하기

  14. 안드로이드 webview (웹뷰) 개발 #1 - 웹사이트를 어플로 만들어 보자!

  15. No Image 17Jul
    by
    2015/07/17 Views 7029 

    [안드로이드] 버튼 이벤트 처리하기

  16. No Image 17Jul
    by
    2015/07/17 Views 7225 

    [안드로이드] 뷰(View)에 여백넣기

  17. No Image 17Jul
    by
    2015/07/17 Views 7140 

    [안드로이드] 뷰(View)의 너비와 높이 지정하기

  18. No Image 16Jul
    by
    2015/07/16 Views 7071 

    [안드로이드] 레이아웃의 기본2

  19. No Image 16Jul
    by
    2015/07/16 Views 6962 

    [안드로이드] 레이아웃의 기본1

  20. No Image 16Jul
    by
    2015/07/16 Views 6767 

    [안드로이드] Activity에 대해서

Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved