웹 브라우저 JavaScript

* 해당 내용은 인프런 강의 중 이고잉님의 「웹브라우저 JavaScript」를 수강 후 작성한 노트입니다.

 

https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C/dashboard

[무료] 웹브라우저 Javascript (자바스크립트) - 인프런 | 강의

---

Object Model(1/2) : 객체화란 무엇인가?

• imgs[0].style.width='300px';
• 이미 화면에 만들어진 img 태그는 html태그 통해 변경 불가능. 변경은 화면에 출력 되기 전 html태그 통해 변경(객체가 가리키는 style값이 동적으로 변경됨 : 객체화)
• window.alert('야호'); : 경고창 실행, window 객체가 있고 그 객체에 alert이라는 method 호출 통해 경고창 실행하는 것(객체화 통해 가능하다는 의미)

Object Model(2/2) : JavaScript Core, BOM, DOM

• window 객체 : 2가지 의미(전역 객체, window나 frame과 같은 것을 제어하기 위한 객체)
• window 객체의 property 1) document(window.document 이렇게 사용 혹은 document) - Document Object Model. 문서 제어 객체가 담겨있음
• window 객체의 property 2) BOM(Browser Object Model) - 현재 웹 브라우저의 페이지 리로드, 경고창 띄우기 등. 브라우저 제어.
• window 객체의 property 3) JavaScript Core - 브라우저라는 호스트 환경에서만 존재하는 객체. 자바스크립트가 자체적으로 갖고 있는 객체가 있음(Array, Function, Date같은.. 때문에 호스트가 무엇이든 공통적으로 이런 객체 가지고 있음)
• 웹 브라우저의 구성요소들은 하나 하나 객체화. js로 이 객체를 제어해서 웹 브라우저 제어할 수 있게 됨.
• 객체들은 서로 계층적 관계로 구조화
• 구조 구성의 가장 큰 틀의 분류 : BOM, DOM
• DOM : document
• BOM : navigator, screen, location, frames, history, XMLHttpRequest
• Javascript : Object, Array, Function

BOM(Browser Object Model)

• 웹 브라우저를 제어하기 위해 브라우저가 제공해주는 객체들을 의미
• 자바스크립트 통해 브라우저의 새 창 열기, 현재 창에 열려 있는 문서 url 알아내기, 현재 동작하고 있는 웹 브라우저의 제품명이나 버전명 알아내는 등의 것 도와주는 객체가 BOM의 객체

전역 객체 window

• window.document
• window.navigator
• window.Array 등

location 객체

• 현재 브라우저 창에 열려있는 문서 창의 url 알려줌
• console.log(location.toString(), location.href);
• alert(location); == alert(location.toString());
• console.log(location.protocol); -> 현재 문서의 프로토콜 출력
• console.log(location.host); -> 인터넷 상에서 서비스 식별하는 주소
• console.log(location.port); -> 컴퓨터에서 돌아가는 여러 소프트웨어 식별
• console.log(location.pathname); -> 웹 서버에 접속했을 때 어떤 구체적인 정보를 요청하는 정보
• console.log(location.search); -> 서비스에 전달된 id값 ex) ?id=10 형태로 출력됨.
• console.log(location.hash); -> 문서 안에 특정한 위치 지정 시 그 위치에 북마킹 가능. 이 걸 알려줌.
• http://opentutorials.org:80/module/1?id=1#hash
• http 프로토콜
• opentutorials.org 호스트
• :80 포트
• /module/1 패스네임
• ?id=1 서치
• #hash 해시 
• location.href = 'http://google.com';
• location = 'http://google.com';
• 홈페이지 리로드 하기 : location.href=location.href 혹은 location.reload();

Navigator 객체

• js이용해 js가 실행되고 있는 브라우저의 제품명, 버전 알 수 있음.
• cross browsing issue : 브라우저마다 다르게 동작하는 이슈
• 웹 표준
• navigator 객체를 통해 브라우저에 대해 알 수 있음 -> 이를 통해 웹 표준, 크로스 브라우징 이슈에 대해 해결..
• console.dir(navigator);
• appName : console.dir(navigator.appName); -> 크롬은 Netscape라는 이름 쓰고 있어서 이렇게 출력
• appVersion : 브라우저에 대한 자세한 정보(운영체제, 브라우저 환경, 브라우저 이름, 버전 나옴)
• userAgent : 웹 브라우저가 웹 서버에게 요청할 때 어떤 정보가 필요한지, 브라우저의 정보도 서버에게 전달함
• platform : 브라우저가 현재 사용되고 있는 운영체제 정보
• 기능 테스트 : 작성한 코드가 어떤 브라우저에 실행될 때 그 브라우저에 필요한 api가 있는지 확인하는 기능
• if(!object.keys){~}

창 제어

• window.open(), window.close()
• window.open('demo2.html'); - 이름 없는 새 창
• window.open('demo2.html', '_self'); - 그 창에서 실행
• window.open('demo2.html', '_blank'); - 새 창
• window.open('demo2.html', 'ot'); - 창의 이름 지정
• window.open('demo2.html', '_blank', 'width=200 ,height = 200, resizeable=yes'); - 새 탭으로 모양 만들어서 띄움
• function winopen() {win = window.open('demo2.html', 'ot', 'width=300px, height=500px')}

-> window.open()통해 새 창 열어서 나온 값 리턴(demo2파일 담고 있는 새로운 창의 윈도우 객체가 window.open의 리턴값으로 리턴된다는 의미) --> 여기선 이거를 전역변수에 담음

• <input type = "text" onkeypress = "winmessage(this.value)">
• 팝업차단 : 사용자의 인터렉션 없이 창 열려고 할 때 팝업 차단
• 도메인이 같지 않을 경우에는 A 내용 변경 -> B 내용 변경 되지 않음
• 자바스크립트를 통해 자동으로 팝업 띄워지게 하면 사용자 의지가 아닌 사이트 만든 사람의 의지로 팝업 만든 것이기 때문에 사용자의 책임으로 팝업 띄워지는 거 돌려버림. 때문에 사용자가 클릭해서 윈도우 오픈해서 사용하는 경우에는 팝업 뜨지 않음.

- DOM , 제어대상을찾기 : getElementsByTagName 1

• 제어 대상 찾기
• document.getElementsByTagName('li');
• var ul = document.getElementsByTagName('ul')[0];
• var lis = ul.getElementsByTagName('li');
• for(var i = 0 ; i < lis.length; i++)
• { lis[i].style.color='red';}
• document.getElementByClassName('active');
• document.getElementById('active');
• 가장 성능이 우수! id값 조회하기 때문에 한 개만!(id는 유일한 식별자)
• var li = document.querySelector('li'); - li라는 이름을 가진 모든 태그를 선택
• querySelector는 하나만(가장 앞에 나타나는 거), querySelectorAll은 모두 찾아 배열에 넣기
• var li = document.querySelector('.active'); - 어떤 element간에 class 속성값이 element
• 선택자를 인자로 받아 선택자에 해당되는 element들의 객체를 찾아 리턴