[ JavaScript ] 자바스크립트 기본 문법 | BOM(Browser Obejct Model) 이란 무엇인가 | 전역객체 window

2021. 2. 7. 00:27·Archive/Develop
728x90
반응형

이미지 출처 :   https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 


 

 

자바스크립트 기본 문법  ::  BOM(Browser Object Model) 이란 무엇인가?

 

 

 

BOM(Browser Object Model)이란 웹브라우저의 창이나 프레임을 추상화해서

프로그래밍적으로 제어할 수 있도록 제공하는 수단입니다.

 

BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있습니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  전역 객체 Window

 

 

 

전역 객체인 window 는 지난 포스팅에서 한번 다뤘었습니다.

 

다시 간략하게 설명드리자면, window 객체는 모든 객체들의 부모라고 할 수 있습니다.

 

 

 

이미지 출처 : https://learn.javascript.ru/browser-environment

 

 

 

브라우저에서 윈도우 객체를 확인해 봅시다.

 

 

 

 

 

document 와 navigateor, Array 속성들도 하나하나 확인해보면,

아래 그림과 같습니다.

 

 

 

 

 

 

 

 

우리는 흔히 '내장함수' 라는 말을 씁니다.

 

실제로 내장함수는 홀로 존재하고 있는 것 처럼 보이지만, 사실은 window 객체의 메소드로 동작하고 있습니다.

 

 

 

 

 

 

 

window 는 생략 가능하기 때문에, 위의 그림과 같이

 

console.log('hello')

 

와

 

window.console.log('hello')

 

가 같은 결과를 보입니다.

 

 

 

 

우리가 자바스크립트로 만든 함수도, 자바스크립트안의 내장함수도 모두

window 객체의 메소드인 것입니다.

 

 

 

결국 전역변수 라는 것은 window 라는 전역 객체의 프로퍼티라고 할 수 있습니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  사용자와 커뮤니케이션 하기

 

 

 

HTML은 form을 통해서 사용자와 커뮤니케이션할 수 있는 기능을 제공합니다.

 

자바스크립트에는 사용자와 정보를 주고 받을 수 있는 간편한 수단을 제공합니다. 

 

 

 

 

 

alert

 

경고창이라고 부릅니다. 사용자에게 정보를 제공하거나 디버깅등의 용도로 많이 사용합니다.

 

 

 

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

 

 

 

 

confirm

 

확인과 취소 버튼이 생기고, 확인을 누르면 true, 취소를 누르면 false 를 리턴합니다.

 

 

 

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

 

 

 

 

 

 

prompt

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

'Archive > Develop' 카테고리의 다른 글

[ JavaScript ] 자바스크립트 기본 문법 | Navigator 객체 | 크로스 브라우저 이슈 해결  (0) 2021.02.07
[ JavaScript ] 자바스크립트 기본 문법 | Location 객체 | 자바스크립트 url 이동  (0) 2021.02.07
[ JavaScript ] 자바스크립트 기본 문법 | Object Model  (0) 2021.02.06
[ JavaScript ] 자바스크립트 기본 문법 | 복제와 참조 | 참조데이터란 |  (0) 2021.02.04
[ JavaScript ] 자바스크립트 기본 문법 | 원시 데이터 타입 | 래퍼객체(wrapper object)  (0) 2021.02.04
'Archive/Develop' 카테고리의 다른 글
  • [ JavaScript ] 자바스크립트 기본 문법 | Navigator 객체 | 크로스 브라우저 이슈 해결
  • [ JavaScript ] 자바스크립트 기본 문법 | Location 객체 | 자바스크립트 url 이동
  • [ JavaScript ] 자바스크립트 기본 문법 | Object Model
  • [ JavaScript ] 자바스크립트 기본 문법 | 복제와 참조 | 참조데이터란 |
코뮤(commu)
코뮤(commu)
코딩으로 커뮤니케이션하는 코뮤입니다 😎
  • 코뮤(commu)
    코뮤(COMMU)
    코뮤(commu)
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Archive
        • Hacking
        • Develop
        • ETC
      • Algorithm
      • DB&Infra
      • ETC
      • Node
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • IT지식보따리
    • IT가 맛있다
    • IT 천재
  • 공지사항

    • 배고픕니다
  • 인기 글

  • 태그

    자바스크립트
    백준
    백준 문제풀이
    백준 풀이
    코드업
    카카오 100일 프로젝트
    파이썬 기초
    oracle db
    파이썬 문제
    파이썬 기초 문제
    백준 파이썬
    Git
    코드업 기초
    오라클
    Codeup
    C++
    Python
    비박스
    파이썬
    javascript
    장고
    자바스크립트 API
    코드업 파이썬 기초 100제
    파이썬 백준
    Oracle
    자바스크립트 객체
    docker
    파이썬 알고리즘
    Django
    보안뉴스
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
코뮤(commu)
[ JavaScript ] 자바스크립트 기본 문법 | BOM(Browser Obejct Model) 이란 무엇인가 | 전역객체 window
상단으로

티스토리툴바