웹 브라우저 JavaScript3

* 해당 내용은 인프런 강의 중 이고잉님의 「웹브라우저 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 (자바스크립트) - 인프런 | 강의

2023.01.15 - [Computer Science/Etc.] - 웹 브라우저 JavaScript

웹 브라우저 JavaScript

2023.01.15 - [Computer Science/Etc.] - 웹 브라우저 JavaScript2

웹 브라우저 JavaScript2

---

 

jQuery 속성 제어 API 1 : .attr

• Element 객체의 메소드 중 setAttribute, getAttribute - jQuery 메소드 중 attr (removeAttribute - removeAttr)

jQuery 속성 제어 API 2 : .attr vs. .prop

• console.log(t1.attr('href'); 하면 설정한 attribute방식(./demo.html)
• console.log(t1.prop('href'); 하면 설정한 property방식(http://localhost/jQuery_Attribute.api/demo.html)
• console.log(t2.attr('checked')); 하면 checked 출력
• console.log(t2.prop('checked')); 하면 true 출력
• jQuery 내에서 property에 사용해야 하는 이름을 쓰거나 HTML 속성의 이름을 써도 보정되기 때문에 둘 중 아무거나 사용해도 됨.

jQuery 조회 범위 제한

• Element 객체에서 getElementBy~ 하면 범위 제한이 있었음.
• $(".marked", "#active").css("background-color", "red"); -> 인자1 : 효과 주고자 하는 element 지정. 인자2 : selector context. 첫 번째 인자에 대해 제어하려는 element.
• $("#active .marked").css("background-color", "red"); -> id가 active인 element의 하위 element 중에 marked라는 class 이름 가진 element
• $('#active').find('.marked').css("background-color", "red"); -> find 앞에 속해있는 jQuery 객체 집합 중에서 .marked 이름을 가진 class의 element만을 조회. 이 결과로 여기 해당되는 또 다른 jQuery object 리턴
• $('#active').css('color', 'blue').fine('.marked').css('color', 'red');

Node 객체

1. DOM에서 시조와 같은 역할(가장 최상위의 조상). 모든 DOM 객체는 Node 객체 상속받음.
2. Node.childNodes
3. Node.firstChild
4. Node.lastChild
5. Node.nextSibling
6. Node.prviousSibling
7. Node.contains()
8. Node.hasChildNodes()
9. 각 노드의 종류나 이름, 값, 하위 element들에 대한 text값 알 수 있음(Node.nodeType Node.nodeName Node.nodeValue Node.textContent)
10. 자식 관리 가능(appendChild(). removeChild())

Node 종류 API 1 : NodeType, NodeValue

1. 현재 선택된 node 타입, 태그명 판단
2. 노드의 종류에 따라 정해진 상수가 존재. 노드 종류에 따라 1~10까지 상수값이 있음. 때문에 비교할 때 숫자로 해도 되고 TEXT_NODE와 같이 변수로 비교해도 됨.
3. body.firstChild.nextSibling.nodeName -> "UL"출력

Node 종류 API 2 : 재귀함수1

1. 특정 element의 하위 element 조회하면서 작업 처리

Node의 변경 API 1 : 노드의 추가

1. appendChild(child) - 노드 생성해야 함. 근데 이 일은 document 객체가 기능.
   1. document.createElement(tagname)
   2. document.createTextNode(data)
2. insertBefore(newELement, referenceElement)

Node의 변경 API 2 : 노드 삭제, 교체

1. target.parentNode.removeChild(target);
2. target.replaceChild(a, target.firstChild);

jQuery Node 제어 API 1 : 추가

1. manipulation 카테고리에 속하는 API
2. before / [prepend / content / append] / after

jQuery Node 제어 API 2 : 제거

1. remove : 선택된 element 제거
2. empty : 선택된 element의 text node 제거

jQuery 노드 변경 API 3 : 교체, 복사, 이동

1. reaplaceAll : 제어 대상 인자로 전달

$('#btn1').click(function()

{

$('<div>replaceAll</div>').replaceAll('#target1');

})

  2. replaceWith : 제어 대상 먼저 지정

$('#btn2').click(function()

{

$('#target2').replaceWith('<div>replaceWith</div>');

})

  3. clone() : 복사

<script type="text/javascript">

$('#btn1').click(function()

{

$('#source').clone().replaceAll('#target1');

})

$('#btn2').click(function()

{

$('#target2').replacewith($('source').clone());

})

</script>

  4. append() : 이동

<div class = "target" id="target">

target 1

</div>

<div id="source">

source

</div>

<input type = "button" value="append source to target 1" id = "btn1" />

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$('#btn1').click(function()

{

$('#target1').append($('#source'));

})

</script>

문자열을 이용한 노드 변경

1. innerHTML() : 하위 element(자기 자신 제외)
2. outerHTML() : 자기 자신 포함한 element
3. innerText, outerText : 읽기를 하면 tag 제외한 상태로 읽어짐. 쓰기를 하면 tag 내용 그대로 출력됨
4. insertAdjacentHTML() : 원하는 위치에 적절하게 코드 추가

Document 객체

1. DOM의 시작점인 동시에 문서 전체를 의미하는 node
2. DOM에서 정의되어 있는 일종의 규격. 실제 HTML에서 Document라는 객체가 사용되는 것은 아니고 HTMLDocument 객체를 사용함.
3. 노드 생성 API : createElement() - 문서에서 사용할 node를 생성 / createTextNode()
4. 문서 정보 API : title, URL referrer lastModified

Text 객체

1. DOM tree에서 Node를 상속받는 객체로 CharacterData를 상속받음.
2. 텍스트 노드 값을 가져오는 API : data. nodeValue
3. 조작 : appendData(), deleteData(), insertData(), replaceData(), subStringData()

Text 객체 : 값 API

1. nodeValue : console.log(t.nodeValue);
2. data : console.log(t.data);

조작 API

1. appendData()
2. deleteData()
3. insertData()
4. replaceData()
5. substringData()

문서의 기하학적 특성 1 : 엘리먼트의 위치와 크기

1. 문서에 있는 여러 element 크기, 위치, 화면에서 사용하기 위한 스크롤 제어 등
2. 요소의 크기와 위치 : t.getBoundingClientRect() - 객체가 출력됨(사각형의 bottom, height, left, right, top, width 출력) - margin+border+padding+content로 이루어짐. border+padding+content의 값이 width(margin제외한 크기).
3. 부모 중 CSS position 값이 static인 td, th, table 엘리먼트가 있다면 이 엘리먼트가 offsetParent.
4. 테두리 뺸 content만의 크기 : ClientWidth, ClientHeight

문서의 기하학적 특성 2 : 뷰포트

1. 사용자에게 보여주는 영역, 문서는 전체 크기를 말함
2. pageYOffset : 스크롤을 얼만큼 움직였는지 알 수 있음(세로)
3. getBoundingClientRect().top : 보이는 뷰포트에서 content까지의 거리 -> 뷰포트의 좌표
4. pageYOffset +getBoundingClientRect().top = 타겟 element와 bodyelement사이의 거리(문서의 거리)

문서의 기하학적 특성 3 : 스크롤 제어

1. window.scrollTo(0, 1000); -> 문서의 스크롤을 page와의 offset 기준으로 1000만큼 이동.

문서의 기하학적 특성 4 : 스크린 크기

1. 뷰포트 크기 : window.innerWidth, window.innerHeight
2. 스크린 객체가 가진 크기(유저가 사용하는 모니터 크기) : screen.width, screen.height

JavaScript : 이벤트

1. event target : event가 발생하는 대상 ex)button
2. event type : event가 어떻게 발생하는 지 ex)클릭
3. event handler : event가 발생했을 때 실행할 코드

JavaScript : 이벤트 등록 : 인라인 방식

1. inline : 태그에 정해진 속성의 이름으로 값을 주는 방식으로 이벤트 설정. 태그 안에 속성이 직접적으로 들어감. this는 자기 자신을 의미함.

JavaScript : 프로퍼티 리스너 방식

1. 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트 등록
2. 이벤트 핸들러(함수)의 인자로 이벤트를 전달
3. console.dir(event); - 인자로 들어온 event의 정보 획득 가능

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="button" id="target" value="button" />

<script type="text/javascript">

var t = document.getElementById('target');

t.onclick=function(event)

{

var event = event || window.event;

var target = event.target || event.srcElement;

console.log(event.target);

}

</script>

</body>

</html>

이벤트 등록 : addEventListener 방식

1. addEventListener를 사용하는 이유 : 프로퍼티 방식으로 이벤트 등록하면 중복이 안되고 덮어서 1개만 실행됨. 이벤트 등록 과정이 여러번일 때 하나의 리스너를 이용해 복수 사용 가능.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="button" id="target" value="button" />

<script type="text/javascript">

var t = document.getElementById('target');

if(t.addEventListener)

{

t.addEventListener('click', function(event)

{

alert("hello world, "+event.target.value);

});

}

else if(t.attachEvent)

{

t.attachEvent('onclick', function(event)

{

alert('hello world, '+event.target.value);

})

}

</script>

</body>

</html>

 

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="button" id="target1" value="button" />

<input type="button" id="target2" value="button" />

<script type="text/javascript">

var t1 = document.getElementById('target1');

var t2 = document.getElementById('target2');

function btn_listener(event)

{

switch(event.target.id)

{

case 'target1':

alert(1);

break;

case 'target2':

alert(2);

break;

}

}

t1.addEventListener('click', btn_listener);

t2.addEventListener('click', btn_listener);

</script>

</body>

</html>

이벤트 전파 1 : 소개

1. 버블링 : 가장 자식 event가 발생하고 부모 event가 마지막에 호출
2. 캡처링 : 가장 부모의 event가 발생하고 가장 자식 event가 마지막에 호출

이벤트 전파 2 : Capturing

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

html{border: 5px solid red; padding: 30px;}

body{border: 5px solid green; padding: 30px;}

fieldset{border: 5px solid blue; padding: 30px;}

input{border: 5px solid black; padding: 30px;}

</style>

</head>

<body>

<fieldset>

<legend>event propagation</legend>

<input type="button" id="target" value="target">

</fieldset>

<script type="text/javascript">

function handler(event)

{

var phases=['capturing', 'target','bubbling']

console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);

}

document.getElementById('target').addEventListener('click', handler, true);

document.querySelector('fieldset').addEventListener('click', handler, true);

document.querySelector('body').addEventListener('click', handler, true);

document.querySelector('html').addEventListener('click', handler, true);

</script>

</body>

</html>

이벤트 전파 3 : Bubbling

1. addEventListener의 3번째 인자 : capturing(true), bubbling(false 혹은 인자 사용 X)
2. stopPropagation() : 이벤트 핸들러 끊어버림

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

html{border: 5px solid red; padding: 30px;}

body{border: 5px solid green; padding: 30px;}

fieldset{border: 5px solid blue; padding: 30px;}

input{border: 5px solid black; padding: 30px;}

</style>

</head>

<body>

<fieldset>

<legend>event propagation</legend>

<input type="button" id="target" value="target">

</fieldset>

<script type="text/javascript">

function handler(event)

{

var phases=['capturing', 'target','bubbling']

console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);

}

function stopHandler(event)

{

var phases=['capturing', 'target','bubbling']

console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);

event.stopPropagation();

}

document.getElementById('target').addEventListener('click', handler, false);

document.querySelector('fieldset').addEventListener('click', handler, false);

document.querySelector('body').addEventListener('click', stopHandler, false);

document.querySelector('html').addEventListener('click', handler, false);

</script>

</body>

</html>

이벤트 기본 동작 취소

1. web에서는.. 이벤트가 사용자가 직접 정의하여 사용 + 브라우저가 가진 이벤트와 이에 따른 동작
2. 이벤트를 만든다는 것은 각각의 브라우저에 있는 구성 요소가 어떤 이벤트 발생 시 원하는 작업을 발생하게 하는 것. 끝난 후 브라우저가 갖고 있는 동작 방법이 최종적으로 실행됨.
3. ie9 이하 버전에서는 preventDefault()가 아닌 event.returnValue를 false로 지정하면 됨.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />

</p>

<p>

<a href="http://opentutorials.org" onclick="if(document.getElementById('prevent').checked) return false;">opentutorials</a>

</p>

<p>

<form action="http://opentutorials.org" onsubmit="if(document.getElementById('prevent').checked) return false;">

<input type="submit">

</form>

</p>

</body>

</html>

 

 

 

 

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />

</p>

<p>

<a href="http://opentutorials.org">opentutorials</a>

</p>

<p>

<form action="http://opentutorials.org">

<input type="submit">

</form>

</p>

<script type="text/javascript">

document.querySelector('a').onclick = function(event){

if(document.getElementById('prevent').checked)

return false;

};

document.querySelector('form').onclick = function(event){

if(document.getElementById('prevent').checked)

return false;

};

</script>

</body>

</html>