JavaScript - 웹 브라우저 window DOM BOM

 

자바스크립트

 

출처 :  http://learn.javascript.ru/browser-environment

 

웹 브라우저 구성요소들은 하나하나 객체화 되어있다.

 

js 위치

<script></script>

헤더 위치 할경우 : onload = funcion() {}

 

외부파일 자바스크립트 코드를 .js 파일 안에 넣기

head 안에 src 지정

<script type = “ text/javascript” src=”myscript.js”>

</script>

 

---

 

window 객체 (전역)

-ECMAscript : 스크립트 표준

-DOM(Document Object Model) : html, xml, 구조화된 문서 접근 프로그래밍

-BOM : 브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스

 

객체 : JS에서는 거의 모든 것이 객체

객체의 내용은 Property or 멤버라고 부름 / 키와 값으로 구성

 

Object 객체

최상위 객체

 

 

창 제어

window.open 메소드

window.open('demo2.html')	새 창이 만들어 진다.
window.open('demo2.html','_self')	스크립트가 실행되는 창
window.open('demo2.html','_blank')	새 창을 의미
window.open('demo2.html','ot')	창에 이름 붙일 수 있다. 열려있다면 해당 창을 로드
window..open('demo2.html','_black','width=200,height=200,resizable='yes')	새 창의 모양과 관련된 속성이 온다.

 

ex)

<input type="button" value="open" onclick="winopen();" />
<input type="text" onkeypress="winmessage(this.value)" />
<input type="button" value="close" onclick="winclose()" />

<script>
function winopen(){
	win = window.open('demo2.html', 'ot');
}

function winmessage(msg){
	win.document.getElementById('message').innerText=msg;
}

function winclose(){
	win.close();
}
</script>

winopen() 이 실행 되면서 win 주소이 유지되고 새 창이 열립니다.

winmessage() 에서 this.value 를 통해 input 값이 파라미터 값으로 전달, win객체를 통해 innerText 변경을 할 수 있습니다.

winclose() 함수에서 win.close() 메소드를 통해 닫기를 실행합니다.

 

 

스크롤

window.scrollTo(0,1000);

 

 

 

---

 

Number 객체

var a = new Number(123); -> Number{123} 객체를 반환, a는 Number 객체의 인스턴스

var b = Number(‘123’); -> 123 원시 타입 반환 , 주로 문자열을 숫자열로 바꿀 때

 

 

Location 객체

페이지이동

function page_replace() {
    location.replace("link_page.html");
    location.href="..";
}

console.log(location.href); // 테스트 할 때

 

location 객체는 URL을 의미에 따라서 별도의 프로퍼티로 제공하고 있다.

console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)

http://opentutorials.org:80/module/1?id=1#hash 

 

페이지 이동 : javascript (자바스크립트)

 

 

 

Navigator 객체

navigator 객체는 브라우저와 관련된 정보를 컨트롤

브라우저에 대한 버전, 정보, 종류 등 관련된 정보 제공

 

종류	설명
navigator.appCodeName	브라우저의 코드명을 반환합니다.
navigator.appName	브라우저의 이름을 반환합니다.
navigator.appVersion	브라우저의 버전을 반환합니다.
navigator.cookieEnabled	브라우저의 쿠키 사용 가능 여부를 반환합니다.
navigator.language	브라우저에서 사용되는 언어를 반환합니다.
navigator.onLine	브라우저가 온라인인지 여부를 반환합니다.
navigator.platform	브라우저가 실행되는 플랫폼 정보를 반환합니다.
navigator.product	브라우저에서 사용되는 엔진 이름을 반환합니다.
navigator.userAgent	브라우저와 운영체제 정보를 반환합니다.

 

---

 

DOM (문서 객체 모델)

Document 객체 

HTML 태그들 중 최상위 노드

 

웹 페이지가 load 되면 브라우저는 웹 페이지의 DOM을 생성

DOM -> 웹 페이지를 자바스크립트로 제어하기 위한 객체 모델

 

 

문서정보 API

document.title
document.URL
document.referrer
document.lastModified

 

요소 선택하기

<마크업>

document.getElementsByTagName(‘’); : 태그명을 통해 모든 요소 선택

var x = document.getElementsByTagName(“li”); 모든 li 가져옴 -> 유사 배열
x[1].innerHTML //li 의 두번째 값
document.getElementsByTagName(“li”)[1].innerHTML

 

document.getElementsByName()

<input name=”fname” …

<input name=”fname” ..

var x = document.getElementsByName(“fname”)[0].tagName; //x 는 INPUT

 

document.getElementsByClassName('li'): 클래스 명으로

 

document.getElementById : 아이디 명으로

 

 

<CSS>

document.querySelector : CSS 선택자 이용해 가장 처음 나오는 요소

document.querySelector(“.example”).style.backgroundColor=”red”;

 

document.querySelectorAll : 모든 요소

var x, i;

x = document.querySelectorAll(“.example”);

for (i =0; i < x.length; i++){
           x[i].style.backgroundColor = “red”;
}

 

.firstElementChild; //첫번째 자식
.lastElementChild; //자식의 두번째

var firstValue = document.getElementById("myList").firstElementChild.innerHTML; //첫번째 자식

.lastElementChild //자식의 두번째

.nextElementSibling

var x = document.getElementById("item1").nextElementSibling.innerHTML; //id가 item1인 요소의  ‘ 다음 요소 ’

 

 

 

Node API

요소 추가

 

createElement("p"), createTextNode, createTextNode()

appendChild(document.getElementById("item") , insertBefore(추가,기준)

var root= document.getElementsByTagName('ol')[0]; // root는살아있는객체

var li= document.createElement('li'); // <li><li>
var content = document.createTextNode('게임');      // ‘게임’

li.className= 'festival'; //<li class=“festival”><li> à li.setAttribute(‘class’, ‘festival’);

li.appendChild(content); //<li class=“festival”>게임<li>
root.appendChild(li); //마지막에 추가
root.insertBefore(li, target.firstChild);// 가장 앞에 추가

root.insertBefore(li, root.fistElementChild.nexElementSibling);

                     (추가할 요소, 기준요소)

 

 

요소 대체

replaceChild(추가, 기존)

var j = document.getElementsByTagName(“li”)[2];
j.remove();
root.replaceChild(li, root.lastElementChild);
                   (교체할 요소, 교체될 요소)

 

노드 값 변경

param.firstChild.nodeValue= "텍스트 변경값";

 

요소(노드) 제거

removeChild(기존)

removeAttribute()

 

---

 

Element 

 

DOM의 계층구조에서 Element 객체의 위치

 

 

HTMLElement

var x = document.getElementById("item1")

x 는 HTMLElement

 

 

HTMLCollection

var xList = document.getElementsById("item1")

sList 는 HTMLCollection

 

 

주요기능

식별자 API	조회 API	속성 API
(Element).classList	.getElementsByClassName	getAttribute(name)
.className	getElementsByTagName	setAttribute(name,value)
.id	querySelector	hasAttribute(name) -> boolean
.tagName	.querySelectorAll	removeAttribute(name)

결과값 : undefined  그런거없다 / null  그런 거 있긴 한데 값은 없다.

 

 

식별자 api

document.getElementById(“ID1”).classList

•classList.add(‘class’): 클래스 이름이 바로 뒤에 추가된다 // class=”first” à class=”first second”
•classList.contains(‘class’): 클래스가 있는 지 검사
•classList.item(index): 클래스반환
•classList.remove(‘class’): 클래스제거
•classList.toggle(‘class’): 클래스가 없으면 추가, 있으면 제거

 

 

속성과 프로퍼티

// property 방식
elem.className= 'current';
// attribute 방식
elem.setAttribute('class','current');

 

 

프로퍼티 방식이 간편하고 속도도 빠르지만 js의 예약어 때문에 이름에 주의해야 한다.

class -> className

readonly -> readOnly

rowspan ->rowSpan / colspan -> colSpan

usemap -> userMap

for -> htmlFor

maxlength -> maxLength

 

 

class 추가하기

Element.classList : DOMTokenList (유사배열)
ex) class="marked current" --> ["marked", "current"]

classList.add('클래스명'), .remove('클래스명'), .toggle('클래스명')

 

 

 

jQuery 속성 제어

var elem= $("#target"); // id
elem.attr('title','javapp');

elem.removeAttr('title');

 

url 속성과 프로퍼티

var t1= $('t1');
t1.attr('href'); // ./demo.html : 속성 그대로

t1.prop('href'); // http://localhost/..  : 절대경로

 

 

---

 

 

문자열로 노드 변경

 

innerHTML, outerHTML

elem.innerHTML // HTML 포함해서 가져온다.

innerHTML="...";    -> 자식 HTML 변경

outerHTML="...";    -> 자신 포함 HTML 변경

 

 

innerText, outerText

값만 제어

 

 

insertAdjacentHTML('','')

target.insertAdjacentHTML('beforebegin', '<h1>해당 태그 앞</h1>');

target.insertAdjacentHTML('afterbegin', '<h1>해당 태그 바로 뒤</h1>');

target.insertAdjacentHTML('beforeend', '<h1>해당 태그 끝의 바로 앞</h1>');

target.insertAdjacentHTML('afterend', '<h1>해당 태그 끝의 뒤</h1>');

 

 

---

 

 

TEXT 객체

 

nodeValue : 값 read, write

data : 값 read

elem.nodeValue
elem.nodeValue="val";

elem.data

 

 

문자열 노드 조작 API

elem.appendData(elemId.value);

// 인덱스 사이 값 제거
elem.deleteData(stIndex.value, endIndex.value);

// 시작 인덱스 부터 삽입
elem.insertData(stIndex.value, elemId.value);

// 인덱스 사이 값 대체
elem.replaceData(stIndex.value, endIndex.value, elemId.value);

// 사이 값 출력
elem.substringData(stIndex.value, endIndex.value);

 

 

---

 

 

엘리먼트 위치와 크기

t.getBoundingClientRect() : width height top left ...등등

t.offsetParent : 측정의 기준이 되는 엘리먼트

 

 

뷰포트

console.log(t.getBoundingClientRect().top)

console.log(window.pageYOffset) // 스크롤한 px 값

 

 

뷰포트 크기

window.innerWidth

window.innerHeight

 

 

모니터 크기 

screen.width //1920

screen.height //1080

 

 

---

 

 

BOM 브라우저 객체 모델 ( Browser Object Model )

 

 

브라우저에 계층적으로 내장되어 제어하는 데 사용한는 객체

window , screen, location, history, navigation

                                                  

함수이름	설명
alert(str)	경고창을띄운다
confirm(“..”)	confirm박스를띄운다.
prompt()	prompt창을띄운다.
open()	새로운브라우저창을연다.
close()	현재의브라우저를종료시킨다.
focus()	현재의윈도우로포커스를옮긴다.
moveBy(x, y)	윈도우를(x,y)로이동(상대좌표)
moveTo(x, y)	윈도우를(x,y)로이동(절대좌표)
resizeTo()	창의크기를변경시킬때사용
print()	인쇄창을띄운다.
setInterval()	일정간격으로지속적인실행문을실행할때
setTimeout()	일정간격으로한번만실행문을실행할때
clearInterval(ID)	Interval 중지
clearTimeout(ID)	Timeout중지

 

Open(): 새 창(페이지)을 띄울때

§window.open('url경로', '대상', '옵션설정')

 

속성	설명
width	창의너비
height	창의높이
history	네비게이션경로를담고있는object
location	창의URL주소입력영역노출여부를결정(숨김=no,노출=yes)
opener	open()함수로현재윈도우를열어준부모윈도우(부모와자식연결)
toolbars	창의도구상자노출여부를결정(숨김=no,노출=yes)
scrollbars	창의스크롤막대노출여부를결정(숨김=no,노출=yes)
status	창의상태영역노출여부를결정(숨김=no,노출=yes)
left	창의좌우수평위치를설정
top	창의상하수직위치를설정

 

setInterval() / clearInterval(참조 변수); //setInterval 을 종료

일정한 간격에 자동으로 사진이 바뀌는 것( Carousel) 과 같이 반복적으로 함수를 실행

var intervalId;

function myF(){

           intervalId = setInterval( function(){ } , 3000);

}

clearInterval( 참조변수); // setInterval 종료

 

setTimeout() / clearTimeout(참조 변수)

일정한 시간 이후 한 번만 실행

 

+a : 반응형 웹, 미디어 쿼리 알아보기

 

 

---

 

이벤트

 

click, change, blur<-> focus. .

 

addEventListener( “이벤트”, 함수 ,(옵션) ) ;

버블링(false), 캡처링(true)을 조절할 수 있다.

동일한 이벤트에 여러 개의 핸들러를 등록 할 수 있다.

 

멀티 바인딩

element.addEventListener("click", 함수이름 , false);

<scripe>

  var element = document.getElementById("div");

  element.addEventListener("click", function () {alert(this.id); }, false);

</script>

 

프로퍼티 리스너 방식

var t= document.getElementById('target');
t.onclick= function(event){
    alert(window.event.target.value)
}

 

 

<ol>
    <li class="festival">가수의무대</li>
    <li class="festival">주점</li>
    <li class="festival">이벤트</li>
    <li class=”festival”>게임</li>
</ol>

var acc = document.getElementsByClassName("accordion"); 

for (var a = 0; a < acc.length; a++) {
    //액션 일어나기 대기 하다가 발생하면 실행
      acc[a].addEventListener("click",function()
      {   
             …
      },false);
}

 

 

event 객체

DOM(html 모든 요소들) 과 관련된 이벤트가 발생하면 관련 정보는 모두 event라는 객체에 저장

 

event.target : 이벤트 요소 (button, div ,,,)

event.type : 이벤트 타입

event.eventPhase : 1 캡처링, 2 target, 3 버블링

event.preventDefault();

   .preventDefault(); : 이벤트의 전파막고 기본 동작 막음(취소) (a 태그나 폼 submit  등)

if (document.getElementById("check").checked) {
	event.preventDefault();
 }

• 프로그래머가 지정하지 않아도 기본적으로 등록되어있는 핸들러를 중지
• cancelable 프로퍼티가 true 여야함
• 기본이벤트  예) a태그에 href를 지정하면 핸들러 지정없이 새로운 웹페이지로 이동
• event.stopPropagation(); : 캡처링 혹은 버블링이 더 이상 전파되지 않도록 막음 / 기본 동작 수행
• event.stopImmediatePropagation() : 같은 레벨의 이벤트도 전파 

 

 

이벤트 흐름 : 버블링 / 캡처링

버블링 : 안쪽부터 바깥으로 / false

캡처링 : 바깥부터 안쪽으로 / capture: true;

흐름 단절 : stopPropagation(), preventDefault(), stopImmediatePropagation()

    if (document.getElementById("check").checked) {

        event.stopPropagation();

        return false; // 기본 동작을 취소
    }

 

 

이벤트 위임 (delegation)

단일 핸들러를 통해 모든 후손 및 미래에 생길 후손(동적요소)에게까지 이벤트를 적용

•(예시: https://frontsom.tistory.com/13 )

 

ex) li 이벤트를 버블링으로 ul이 대신 동작

다수의 요소에 공통된 이벤트 등록할 때 편리

 

var lists = document.getElementById("sampleList"); //ul
lists.addEventListener('click', deleteList); //버블링으로 ul의 하위 요소 이벤트 감지

function deleteList() {,,}

 

 

 

옵션

capture, once, passive

target.addEventListener(type, listener, options);

element.addEventListener(‘click’, 함수이름, {

           capture: false,  //캡처링 여부

           once: true,       //ture 이벤트 딱 한번만 발생

           passive: false   //main 쓰레드 처리 기다리지 않고 화면 그리기 수행 (스크롤

})

 

 

폼

var form_elem = document.getElementById('target');
form_elem.addEventListener('submet', function(event){
	if(document.getElementById('name').value.length ===0){
    	alert('name 누락');
        event.preventDefault();
    }
});

 

문서로드 이벤트

페이지 로드 후 불러오기

window.addEventListener('DOMContentLoaded', function(event){
	var t = document.getElementById('target');
})

 

 

 

이벤트 타입 

click / event.click

eblclick

mousedown

mouseup

mousemove

mouseover

mouseout

contextmenu

 

키 이벤트

event.altKey

event.ctrlKey

event.shiftKey

 

위치

event.clientX

event.clientY

 

 

 

---

 

데이터 타입

원시타입 / 참조타입

원시타입(변하지 않는 타입) : numbers: 부동소수점 형식, string, boolean, null, undefined NaN

string 이스케이프

“aaa \”b\” cc “

const ad = ` it’s ${price} won `   ,  `: 백틱기호(기보드 숫자 1옆에)

숫자와 문자열 덧셈은 붙여짐 조심

사용자 입력은 항상 문자열로 들어온다. à 형 변환 필요

 

 

변수 상수

var / let(재선언 x, 재할당o) / const(재선언, 재할당 : x)

될 수 있으면 변수보다 상수

 

참조타입 : objects, arrays

 

리터럴 

값을 프로그램 안에서 직접 지정, 변수에 할당되는 값 그 자체

ex) const func = function(){return 5;}

 

Date 객체

var date = new Date(); // 현재시간

var now = new Date(‘April 2 , 2020’);

파라메타에 월 입력시 0 à 1월

getTime() : 1970년 1월 1일 0 시 와 날짜 사이의 경과시간을 밀리 초로 나타낸 숫자

/1000 : 초  | intercal / (1000 * 60 * 60 * 24) : 일 표현

타임존 명시, 절대시간(유닉스타임)으로 변환

Moment.js 사용

 

배열 생성

var day= [ ‘ ‘, ‘ ‘ ] , var day = new Array();

var divs = document.querySelectorAll(‘div’);

divs.forEach(function(div){

           div.addEventListener(‘click’, logEvent);

});                    //배열 형태 반복

 

(var,let,const) myArray={}

const로 생각하고 변경될 가능성 있으면 let 으로

배열에서는 메모리 주소는 변하지 않고 힙이 변경되기 때문에 const로

myArray ->  [Call Stack] – 주소 : 값(주소값)  -> 주소값 : 값

 

let 일 경우

let num =0;   num = 1;

myArray= [‘a’] : 새로운 주소로 할당

메모리의 주소를 할당 , 힙 메모리에 할당된 주소를 값으로 저장

 

Math.floor 내림 연산

경고창 띄우기 alert( ‘interval: ‘ +interval+ ‘일’);

 

 

함수

일급 함수 : 함수도 객체다

함수를 값처럼 쓸 수 있다.

변수 인자 반환값

 

function getGreeting(){ return “”;}

 

var f = getGreeting; 할당 / getGreeting(); 실행

f();

 

var arr=[1,2,3];

arr[1]=getGreeting;

arr[1]();

 

함수 정의 방법

function f(){ .. } : 함수 선언식

var f = function(){ };  : 함수 선언식

(function () { }) ();    : 익명함수

 

 

익명함수

var g = function f(y){

return y*y;

};

g(3); 를 호출 해야된다 f(3)는 에러

 

function x(y){

return y*y; // 내용

};

x(3);

 

var x = function(y){

           return y*y;

};

x(3);

 

즉시 실행 함수 : 선언과 동시에 바로 실행

(function(y) {

.. }) (3);

이름있는 즉시 실행 함수

(function x(y){

 return y*y;

}) (3);

(fVal = function x(y){

…

}) (3);

fVal(3);

 

클로저

: 생성될 당시의 환경을 기억하는 함수,  ( 함수안의 또 다른 함수 정의 )

스코프가 해제되어도 사라지지 않는 특성

보통 은닉화에 사용

function makeAdder(x){

 return function(y){

   return x + y;

};

}

var add5 = makeAdder(5); 이 함수를 통해서만 초기화 -> add5가 클로저 함수가 된다.

add5(2); 실행

counter 가 클래스인 것처럼 흉내낸다.

value가 함수처럼

 

 

호이스팅

함수, 전역 스코프 보고 var 으로 선언한 변수를 맨 위(유효범위의 최상단)로 끌어 올림

선언부만 끌어 올려진다. (let은 해당 안된다.) 선언과 할당 분리

var x;

x;         // 3       -> 위쪽에 var x; 선언 했기 때문에 할당 전에 활용 가능

x=3;

x;  //3

고계함수(higher-order f)

인자(파라메타)나 반환값으로 함수를 사용

function twice(f,x){

           return f(f(x));

}

function f(x){

           reutrn x*3;

}

twice(f,7);

 

 

---

 

JSON

var jsObject = JSON.parse(infoJSON); // json -> 객체

var infoStr= JSON.stringify(jsObject); // 객체 -> json

 

 

---

아이디 유일성 검사

html 검사https://validator.w3.org/

•CSS 검사http://www.css-validator.org/