ex11

CSS : 선택자 > 태그 검색 > 접근 > 서식 조작
            JavaScript : 검색도구 > 태그 검색 > 접근 > 태그 조작

            HTML 계층 구조 활용 + JavaScript 탐색

            1. BOM, Browser Object Model
                - 초창기 모델
                - 현재까지 사용
                - 선택적 모델 > 일부 태그만 관리 > 일부 태그만 조작 가능 > 빠진 태그는 조작 불가능
                - 이미지, 링크, 폼 태그 이외에는 조작이 불필요하다고 판단.
                - 태그의 name을 사용해서 접근
                - id, class는 인식 불가능

            2. DOM, Document Object Model
                - BOM > 개선한 모델
                - 현재까지 계속 사용(주력)
                - BOM 기반 + 기능 추가
                - 모든 태그를 인식 > 모든 태그를 조작
                - name, id, class 모두 인식 가능

<body>

     <img src="images/catty01.png" name="cat1">

     <hr>

     <form name="form1">
        <div>
            <input type="text" name="txt1">
        </div>
     </form>

     <form name="form2">
        <div>
            <input type="text" name="txt2">
        </div>
     </form>

    <script>

		//태그에 접근
        window.document.images[0].title = '고양이';

        window.document.form1.txt1.size = 10;

        window.document.form2.txt2.value = '홍길동';

        // window.close(); //창 닫힘
        //window.document

    </script>
</body>
</html>

ex12

Event

JavaScript Event
- 사건
- 객체(혹은 태그)에서 발생하는 사건
- 언제 발생할지 예측 불가능(시간)

JavaScript Event Handling
- 이벤트 등록(구현)
- 사건 처리
- 언제 발생할지 예측 불가능한 사건에 대해 처리를 하고 싶다. > 언젠가 사건이 발생하면 처리하기 위한 코드를 미리 준비한다. > 사건과 연결 > 이벤트 처리, 이벤트 매핑, 이벤트 구현 등..

이벤트 등록
1. 정적
- HTML 태그에 직접 적용

<body>
    <!-- ex12_event.html -->

    <h1>Event</h1>

    <form name="form1">
        <input type="text" name="txt1">
        <input type="button" value="확인(정적)" name="btn1" onclick="window.document.form1.txt1.value = '홍길동';">
        <input type="button" value="확인(동적)" name="btn2">
    </form>

    <script>
    </script>
</body>
</html>

2. 동적
- JavaScript 코드를 사용

<script>
	window.document.form1.btn2.onclick = m1; //함수 포인터

    function m1() {
        //코드 작성
        window.document.form1.txt1.value = '아무개';
    }
</script>

<script>
    var now = new Date();
    if (now.getHours() < 12) {
        //오전
        window.document.form1.btn2.onclick = m2;
    } else {
        //오후
        window.document.form1.btn2.onclick = m3;
    }

    function m2() {
        window.document.form1.txt1.value = '오전입니다.';
    }

    function m3() {
        window.document.form1.txt1.value = '오후입니다.';
    }
</script>

화면

Document

Event

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

[ex15~16] Attribute, images (0)	2023.04.21
[ex13~14] Mouse Event, Key Event (0)	2023.04.21
[ex09~10] Date, Array (0)	2023.04.21
[ex06~08] scope, casting, string (0)	2023.04.21
[ex02~05] JavaScript (0)	2023.04.20

🚀

[ex11~] BOM, event

Event

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

티스토리툴바

[ex11~] BOM, event

Event

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

'프로그래밍 공부/JavaScript' Related Articles

티스토리툴바