[Javascript] Web Browser_1

앙버터·2023년 12월 7일

Web Programming

목록 보기

2/7

Callback

함수 선언 시 인자(argument)가 함수인 경우 인자의 함수
아래에서 One이 callback 함수

function One (){
	//Do Something
}
function Two (call_One){
	//Do Something else
    call_One()
}
Two(One);

Synchronous callback 함수

parent 함수가 끝나기 전에 callback 함수가 실행 완료
ex. forEach, map, filter 함수 등

Asynchronous callback 함수

callback 함수는 parent 함수가 끝나는 것과 무관하게 스케줄된 방식으로 나중에 완료됨 (독립적으로 실행) -> 기본
ex. setTimeout, setInterval

HTML DOM

(Document Object Model)

웹 브라우저가 웹페이지를 로드할 때, 웹페이지의 전체 html elements에 대한 Document Object Model을 메모리에 생성함
HTML DOM은 objects tree 형태로 생성됨
✅ 각 elements 들은 root, parent, child, sibling 관계를 맺고 있음
각 HTML elements는 Javascript object data type임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Title</title>
</head>
<body>
    // h1 javascript object => program에서 삭제 가능, 
    // 						   h1 object의 property값도 변경 가능
    <h1>My Header</h1>  
    <a href="#">My Link</a>
</body>
</html>

웹 브라우저가 html을 실행할 때, 내부적으로 모든 html tag 들을 javascript object로 생성하여 관리함

document : html 문서 전체를 관리하는 JS object

document.body : <body> tag를 JS object로 생성한 객체

console.dir(객체이름) 을 실행하면 JS object 상세 내용을 console에서 볼 수 있음
{
aLink:"",
...
}

HTML DOM Standard

W3C 표준화 단체가 DOM 표준 제작
각 HTML element를 object로 정의하고, html element object의 properties, methods를 정의해놓고 있음

DOM model을 이용한 JS의 작업

웹페이지의..
- 모든 html elements 변경(생성, 수정, 삭제) 가능
- 모든 html elements의 CSS style 변경 가능
- 이미 존재하는 HTML events에 대한 reaction code 생성 가능
- 새로운 HTML events 생성 가능

document

data type : Object
스크린에 로드된 웹페이지에 해당하는 JS object
모든 웹브라우저가 자동으로 생성함

<body>
    <h2>My First Page</h2>

    <p id="demo">Init Value</p>

    <script>
        // document.getElementById("demo") 
        // => p tag의 javascript object를 가져옴
        var x = document.getElementById("demo");
        x.innerHTML = "Hello World!";
        // or
        document.getElementById("demo").innerHTML = "Hello World!";
    </script>
</body>

HTML elements 가져오기 (JS object)
✅ Method

document.getElementById(id) : 1개 가져옴

document.getElementsByTagName(name) : 여러개 가져옴

document.getElementsByClassName(name) : 여러개 가져옴

innerHTML
✅ Property
특정 HTML element object에서 스크린에 보여줄 내용과 관련
해당 내용을 가져오거나 설정(setting)할 때 사용

DOM Collections

getElementsByTagName(), getElementsByClassName()
➡ 여러 개의 elements를 가져오는 HTML Collection 객체를 return

HTML Collection 객체의 주요 멤버
length : 리스트에 포함되는 요소 수
item(i) : i번째의 노드를 취득
namedItem(name) : Id 또는 name 속성이 일치하는 요소를 취득

DOM Node Lists

querySelector(selector), querySelectorAll(selector)
➡ CSS Selector로 elements return 하는 documents methods

documents object 사용

document.anchors : name 속성을 가지는 <a> 요소 모두 반환
(=getElementsByClassname('a'))
document.body : <body> 요소를 반환
document.forms : <form> 요소를 모두 반환 (input, button...)
document.title : <title> 요소를 반환

실습코드

getElementById(id)

<body
    <h2>JavaScript HTML DOM</h2>

    <p id="intro">Finding HTML Elements by Id</p>
    <p>This example demonstrates the <b>getElementsById</b> method.</p>
    
    <p id="demo"></p>
    
    <script>
        const element = document.getElementById("intro");
        
        document.getElementById("demo").innerHTML = 
                    "The text from the intro paragraph is: " + element.innerHTML;    
    </script>

</body>

getElementsByTagName()

<body>

    <!-- 예제 1. p tag 전체를 가져와서, 첫번째 객체 선택 -->
    <h2>JavaScript HTML DOM</h2>
    <p>Finding HTML Elements by Tag Name.</p>
    <p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
    <p id="demo"></p>

    <hr/>

    <ul>
        <li><a href="http://www.wings.msn.to/">
                서버 사이드 기술의 배움터 - WINGS</a></li>
        <li><a href="http://www.web-deli.com/">WebDeli</a></li>
        <li><a href="http://www.buildinsider.net/web/jqueryref">
                jQuery역방향 레퍼런스</a></li>
    </ul>

    <script>
        const element = document.getElementsByTagName("p");
        document.getElementById("demo").innerHTML = 
                'The text in first paragraph (index 1) is: ' + element[1].innerHTML;

        var list = document.getElementsByTagName('a');
        for (var i = 0, len = list.length; i < len; i++) {
            console.log(list.item(i).href);
        }                
    </script>
</body>

getElementsByClassName()

  <body>

    <h2>JavaScript HTML DOM</h2>

    <p>Finding HTML Elements by Class Name.</p>
    <p class="intro">Hello World!</p>
    <p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>
    
    <p id="demo"></p>
    
    <script>
        const x = document.getElementsByClassName("intro");
        document.getElementById("demo").innerHTML = 
                'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
    </script>    
</body>

querySelectorAll

<body>

    <h2>JavaScript HTML DOM</h2>

    <p>Finding HTML Elements by Query Selector</p>
    <p class="intro">Hello World!.</p>
    <p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>
    <p id="demo"></p>
    
    <script>
        // 
        const x = document.querySelectorAll("p.intro");
        document.getElementById("demo").innerHTML = 
                'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
    </script>
        
</body>