IMLENA

자바스크립트 기초 - 객체(BOM,DOM) 본문

WEB/Javascript

자바스크립트 기초 - 객체(BOM,DOM)

IM레나2 2021. 9. 7. 22:36

자바스크립트 기초 정리

생활코딩 - 자바스크립트 강의 공부

 

 

Javascript를 HTML에서 로드하기

 

1) Inline

- 태그에 직접 자바스크립트를 기술하는 방식

<body>
    <input type="button" onclick="alert('hello')" value="hello!"/>
</body>

Onclick - HTML안에 alert 자바스크립트

 

2) Script

    <body>
        <input type="button" id="hw" value="hello" />
        <script>
            var hw = document.getElementById('hw');
            hw.addEventListener('click', function(){
                alert('hello world');
            })
        </script>
    </body>

<script> </script> 라는 HTML태그안에 JS 코드가 삽입됨

 

3) 외부파일 삽입

    <body>
        <input type="button" id="hw" value="hello" />
        <script src="./script.js">
        </script>
    </body>
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
    alert('hello world');
})
(script.js파일 내용)

 

 

#Object Model

윈도우 객체의 프로퍼티 - DOM,BOM,JS C

 

DOM-Docuemnt Object Model

문서를 제어

BOM-Browser Object Model 

윈도우 객체의 속성에 저장되어 있다.

JS Core

 

 

 BOM  (Browser Object Model)

- 웹 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 하는 수단

window는 전역개체 이다.

alert('1') = window.alert('1')

 

#사용자와 커뮤니케이션 - alert, confirm, prompt

#location 객체

- location.href

- location.toString()

        <script> console.log(location.toString(), location.href); </script>

- location.protocol : http, https

- location.host : compurter 식별

- location.port 

- location.pathname 

- location.search : 애플리케이션에 전달한 파라미터

- location.hash : 특정 위치를 알고 싶을 때 (bookmark)

 

 

#navigator 객체

- console.dir(navigator.appName) : Netscape

- console.dir(navigator.appVersion) : 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.38

- console.dir(navigator.userAgent) : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.38

- navigator.cookieEnabled : 쿠키 사용 여부 TRUE/FALSE

- navigator.platform : Win32 운영체제

 

 

 

DOM (Document Object Model)

 

# 제어대상 찾기

- document.getElementsBy TagName() : tag name으로 찾음

- document.getElementsByClassName() : class 이름으로 찾음

- document.getElementById() : 요소 ID로 찾음

 

#jQuery

자주 사용하는 로직을 재사용할 수 있도록 고안된 라이브러리(소프트웨어)

 

-기본문법

$(selector).action()

 

$("p").hide() <p> 라는 모든 요소를 숨겨라

$(this).hide() hides the current element

$(".test").hide() - hides all element 클래스가 test

$("#test").hide() - id가 test인 요소 숨겨라

 

사용예) id가 p1인 요소에 기능 설정

<!DOCTYPE html>
<html>
    <body>
        <div id='p1'><p>test</p> </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
           $("#p1").hover(function(){
               alert("you entered p1");
           },
           function(){
                alert("bye! you leave p1");
           });
        </script>
    </body>
</html>

 

# DOM 이벤트 들

Mouse Evenets Keyboard Evenets Form Events Document/Window Events
click keypress submit load
dbclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

 

#HTML Element

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="active">JavaScript</li>
</ul>
<script>
    var li = document.getElementById('active');
    console.log(li.constructor.name);
    var lis = document.getElementsByTagName('li');
    console.log(lis.constructor.name);
</script>

document.getElementById : 리턴 데이터 타입은 HTMLLIELement
document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection
실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection

 

DOM TREE https://web.stanford.edu/

 

 

 

#HTMLCollection

리턴된 결과가 복수인 경우 사용하는 객체





오른쪽 코드, 콘솔 창 결과

 <body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="active">JavaScript</li>
</ul>
<script>
console.group('before');
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
}
console.groupEnd();
console.group('after');
lis[1].parentNode.removeChild(lis[1]);
for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
}
console.groupEnd();
</script>
</body>

 

#jQuery **추후 보충

'WEB > Javascript' 카테고리의 다른 글

자바스크립트 - Elements 객체  (0) 2021.09.13
'WEB/Javascript' Related Articles more
Comments