seoyoung.dev

[javascript]-Object model 와 BOM객체 본문

WEB/Javascript

[javascript]-Object model 와 BOM객체

seo-0 2019. 10. 20. 16:43
자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로
공부하고 기록하기 위한 용도입니다. 

 

* Object model (객체 모델)

: 웹 브라우저의 구성요소들은 객체화 하여 제공되고, 자바스크립트로 이 객체를 제어해서, 웹 브라우저를 제어할 수 있게 된다. 

: 브라우저에서 각 태그들마다 미리 객체를 만들어놓고, 해당 객체를 대상으로 메소드를 호출하거나 속성을 이용하거나

해서 객체를 활용할 수 있게 된다. 

var imgs=document.getElementByTagName('img'); 
//이미지 태그들의 목록을 가져와서 변수에 저장->여러개의 태그들 값 : 배열에 저장

imgs[0]; //html 태그에서 img 첫번째 태그에 해당되는 객체 

imgs[0].style.쟝소='300px' //img 태그의 css 속성값 변경 가능

-> 이미 화면에 렌더링이 끝난 이미지 태그를 수정하기 위해서, 
    해당 이미지를 가리키는 객체를 찾아내서, 객체가 가리키는 태그의 값, 스타일 등을 제공한다. 

window.alert('hello world!');

-> window 창과 관련된 객체의 alert 메소드를 사용 : 경고창 실행 

widnow : 전역객체/window/frame 을 제어위한 객체 

- window 객체의  property인 document 객체 : 웹 페이지의 문서를 제어하는 역할(Document Object Model)

- BOM (Browser Object Model) : 웹 페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨것

: 현재 웹브라우저가 가리키고있는 url을 알아내거나, 웹 브라우저가 표시하고있는 페이지를 reload 하거나, 경고창을 띄우거나..의 기능을 한다.

: BOM 도 window 객체의 property 

- javascript core : 자바스크립트 자체적으로 갖고있는 객체들 포함 : 호스트 환경이 무엇이던 간에, 자바스크립트 객체를 통해 배열, 함수 등 사용 가능 

* window
var a=1;
alert(a); //1 경고창

window.alert(a); //1 경고창

window.a; // 1 출력

-> 전역함수나 전역변수는 window 객체, 즉 전역 객체의 프로퍼티(전역변수) 와 메소드이다. 

- alert  : 경고창

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

-confirm  : 확인/취소 버튼 중 사용자의 입력에 따라 true,false 를 반환

    <input type="button" value="confirm" onclick="func_confirm()">;
    
    <script>
      function func_confirm(){
        if(confirm('ok?')){
          alert('ok');
        }else{
          alert('cancel');
        }
      }
      </script>

- prompt : 사용자로부터 입력 받기 - 입력값 리턴 

  <input type="button" value="prompt" onclick="func_prompt()">;
  
  <script>
    function func_prompt(){
        if(prompt('id?') ==='mine'){
          alert("welcome");
        }else
        alert('fail');
      }
      </script>

- Location 객체 : 윈도우의 문서 URL 을 얻어내고, 변경 할 수 있다. 

console.log(location.toString(), location.href);

//똑같은 결과 출력 , 후자를 더 많이 쓰긴한다. 
console.log(location) //location 정보 다 알려주지만

alert(location) //url 정보만 문자로 출력 
alert(location.toString()) //alert(location) 과 동일한 형태로 출력

       -> URL Parsing

console.log(location.protocol, location.host, location.port,location.pathname,location.search)
//브라우저 창에 출력되고 있는 문서의 url 에 대해 부분적으로 알아낼 수 있다.

url - location 객체 

       -> 현재 웹페이지의 URL 변경

location.href; // 현재 웹페이지의 url주소 

location.href="http://egoing.net" //리다이렉션, 다른 url로 이동시키고자 할 때, 
                                  //location.href 에 url 값을 준다.

      -> reload

location.href = loaction.href // reload

location.reload; //location 객체에 있는 reload를 사용

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

[javascript]-DOM Tree/HTMLElement와HTMLCollection  (0) 2019.10.21
[javascript]- Location 객체/Navigator 객체/Window객체로 창 제어  (0) 2019.10.20
[setTimeout/setInterval, EventListener, Ajax통신, CORS란?]  (0) 2019.10.04
Hoisting/함수선언식과 표현식에서의 차이  (0) 2019.10.02
javascript 기초 문법  (0) 2019.09.17
'WEB/Javascript' Related Articles more