[Vanilla JS]study 10일차

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

단비의 코딩 공부 blog

[Vanilla JS]study 10일차 - DOM2 본문

javascript&jquery

[Vanilla JS]study 10일차 - DOM2

황굽달 2023. 3. 10. 16:49

1. 문서객체선택메서드

<!DOCTYPE html>

<head>

</head>

<body>

</body>

//1. 아이디 선택방식

var title = document.getElementById('title')

title.style.color = 'red';

//2. 태그명 선택방식 - 복수로 선택 - 배열로 선택 (복수일때 for문 사용)

var h1 = document.getElementsByTagName('h1')

for(var i=0;i<h1.length;i++){

h1[i].style.textDecoration = 'underline';

}

//3. 클래스명 선택방식 - 복수로 선택 (복수일때 for문 사용)

var text = document.getElementsByClassName('text');

for(var i=0;i<h1.length;i++){

text[i].style.color = 'blue';

}

//4. CSS선택자로 선택 - 첫번째 것 한개만 선택

var first = document.querySelector('.text');

first.style.fontStyle = 'italic';

//5. CSS선택자로 선택 - 모든 것을 선택 - 복수로 선택

var all = document.querySelectorAll('.text');

all[0].style.fontSize = '20px';

all[1].style.fontSize = '30px';

</script>

</html>

2. 이벤트속성과 메서드

<!DOCTYPE html>

<head>

</head>

<body>

</body>

//1. 이벤트속성(고전이벤트) : 객체선택.on이벤트타입 = 콜백함수;

var title = document.getElementById('title');

title.onclick = function(){

this.style.color = 'red';

//this : 객체가 자기자신의 코드블록 {}내부에서 자신을 호출할 때 사용하는 키워드

}

//2. 이벤트메서드 : 객체선택.addEventListener('이벤트타입',콜백함수);

var text = document.querySelector('text');

text.addEventListener('click', function(){

this.style.color = 'blue';

});

</script>

</html>

3. 이벤트객체

<!DOCTYPE html>

<head>

</head>

<body>

//이벤트객체 : DOM과 관련된 이벤트가 발생되면, 발생될 때 생기는 정보를 저장하는 객체

//ex1) 마우스 움질일 때 위치값을 담는 것

//ex2) 키보드를 눌렀을 때 눌린 키 정보를 담는 것

//1. 문서객체선택

var btn = document.getElementById('btn');

//2-1. 고전이벤트 - 이벤트 객체 추가

btn.onclick = function(e){ //콜백함수의 첫번째 매개변수명이 이벤트객체

alert(e.type);

};

//2-2. 이벤트메서드 - 이벤트객체 추가

btn.addEventListener('mouseenter', function(e){ //콜백함수의 첫번째 매개변수명이 이벤트객체

alert(e.type);

});

</script>

</body>

</html>

4. 공통적인 속성과 메서드

<!DOCTYPE html>

<head>

<style>

*{padding: 0; margin: 0;}

h1, a{border: 3px solid black; padding: 20px; box-sizing: border-box;}

h1{margin: 20px; width: 300px;}

a{display: block; width: 100%;}

</style>

</head>

<body>

</h1>

//모든 객체는 속성과 메서드를 갖고 있음

//이벤트 객체도 속성과 메서드를 갖고 있음

//모든 이벤트가 갖고있는 공통 속성과 메서드

//이벤트흐름

//1. 캡쳐링(Capturing) : 이벤트가 하위요소로 전파되는 단계

//2. 타깃(target) : 이벤트가 실제 타깃 요소로 전달되는 단계

//3. 버블링(Bubbling) : 이벤트가 상위요소로 전파되는 단계

var h1 = document.querySelector('h1');

var a = document.querySelector('a');

h1.addEventListener('click', function(){

this.style.backgroundColor = 'blue';

});

// 부모요소의 이벤트가 있다면 하위요소 이벤트 발생시에 버블링이 발생됨

a.addEventListener('click', function(e){

e.stopPropagation(); //이벤트 캡쳐링, 버블링을 멈추는 메서드

this.style.backgroundColor = 'red';

});

</script>

</body>

</html>

5. 마우스이벤트 객체의 속성과 메서드

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

//마우스를 움직일 때 마우스 포인터의 좌표값을 반환

//pageX : 마우스 이벤트가 발생될때, 문서(document) 기준으로 마우스 포인터의 X축 좌표 반환

//pageY : 마우스 이벤트가 발생될때, 문서(document) 기준으로 마우스 포인터의 Y축 좌표 반환

var text01 = document.getElementById('text01');

var text02 = document.getElementById('text02');

//mousemove마우스를 움직였을 때

document.onmousemove = function(e){

//e : 마우스 움직임에 관련된 정보를 담는 이벤트 객체

var x = e.pageX;

var y = e.pageY;

text01.textContent = x;

text02.textContent = y;

}

</script>

</body>

</html>

6. 마우스커서 따라다니기

<!DOCTYPE html>

<head>

<style>

/* https://icon-icons.com/ */

body{cursor: none;} /* 문서 전체에서 마우스 커서 모양을 안보이게 처리*/

#cursor{position: absolute; /* css/js에서 움직이는 요소는 모두 position이 변경되어야 함*/ left: 0; top: 0;}

</style>

</head>

<body>

//1. 문서객체 선택

var cursor = document.getElementById('cursor');

document.addEventListener('mousemove', function(e){

//e : 이벤트 발생시의 정보를 담는 이벤트객체

//clientX : 기준이 현재 창이고, 마우스 포인터의 X축 좌표 반환

//clientY : 기준이 현재 창이고, 마우스 포인터의 Y축 좌표 반환

var x = e.clientX;

var y = e.clientY;

cursor.style.left = (x - 32) + 'px';

cursor.style.top = (y - 32) + 'px';

});

</script>

</body>

</html>

7. 키보드이벤트속성과 메서드

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

<p>keyCode : <span id="result01"></span></p>

<p>shiftKey : <span id="result02"></span></p>

//키보드 이벤트객체 : 키보드를 눌렀을 때 발생되는 정보를 담는 이벤트객체

//1. keyCode : 눌린 키의 유니코드(숫자)를 반환 - 탭키번호는 9번

//2. shiftKey : shift키가 눌렸다면 true반환, 그렇지 않으면 false반환

//문서객체 선택

var textBox = document.getElementById('textBox');

var result01 = document.getElementById('result01');

var result02 = document.getElementById('result02');

//이벤트 - keydown - 특수키 인식

textBox.onkeydown = function(e){

//e : 이벤트 객체

var code = e.keyCode;

var shift = e.shiftKey;

result01.textContent = code;

result02.textContent = shift;

}

</script>

</body>

</html>

8. 마우스흴 이벤트 객체의 속성

<!DOCTYPE html>

<head>

<style>

body{height: 3000px;}

#text{position: fixed; top: 20px; left: 10px;}

</style>

</head>

<body>

//wheel :마우스 휠을 움직였을 때

//과거 : mousewheel로 명칭이 달랐음

//속성

//1. deltaX : 가로스크롤바를 마우스휠로 이동, 오른쪽으로 이동하면 양수반환, 왼쪽으로 이동하면 음수반환

//2. deltaY : 세로스크롤바를 마우스휠로 이동, 아래쪽으로 가면 양수반환, 위쪽으로 가면 음수반환

//3. deltaMode : 델타값(픽셀, 라인 또는 페이지)의 측정단위를 나타내는 숫자를 반환

var text = document.getElementById('text');

document.onwheel = function(e){

//e : 이벤트객체

var top = e.deltaY;

text.textContent = top;

if(top > 0){ //양수라면(아래로 내린다면)

document.body.style.backgroundColor = 'yellow';

}else{ //음수라면(위로 올린다면)

document.body.style.backgroundColor = 'lightblue';

}

</script>

</body>

</html>

9. 기본이벤트 제거기

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

//a태그를 클릭하면 확인/취소창이 떠서, 확인버튼을 누르면 네이버페이지로 이동, 취소버튼을 누르면 해당페이지에 잔류

//기본이벤트 : 태그요소가 기본적으로 갖고 있는 이벤트

//1. a : 페이지가 이동되는 이벤트를 갖고 있음

//2. form : 데이터를 전송시키는 이벤트를 갖고 있음

var direct = document.getElementById('direct');

direct.addEventListener('click', function(e){

//e : 이벤트 객체

e.preventDefault(); // 기본이벤트 제거 메서드

//href값을 담는 변수

var url = this.getAttribute('href');

var q = confirm('네이버로 이동하시겠습니까?');

if(q){ //확인버튼 눌렀다면

window.open(url);

//현재창에서 변화 : location.assign(url);

}

});

</script>

</body>

</html>

10. DOM node란

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

//DOM(Document Object Model) : 문서객체

//DOM종류 : 태그, 텍스트, 태그속성, 공백, 주석 등

//DOM Node : HTML의 모든 것을 노드라고 부름

</script>

</body>

</html>

11. parentNode

<!DOCTYPE html>

<head>

<style>

div{width: 300px; height: 100px; border: 1px solid black; margin-bottom: 20px;}

</style>

</head>

<body>

</div>

</div>

//부모노드를 처리할거라 2개만 문서객체를 선택

var h1 = document.querySelector('#box01 > h1');

var p = document.querySelector('#box02 > p');

h1.addEventListener('click', function(){

this.parentNode.style.backgroundColor = 'pink';

});

p.addEventListener('click', function(){

this.parentNode.style.backgroundColor = 'lightblue';

});

</script>

</body>

</html>

12. chiledNodes

<!DOCTYPE html>

<head>

<style>

div{width: 300px; height: 200px; border: 1px solid black; margin-bottom: 20px;}

</style>

</head>

<body>

</div>

//부모요소만 선택

var box01 = document.getElementById('box01');

//자손 노드 개수 확인

var num01 = box01.childNodes.length; //공백까지도 자손으로 받아들임

var num02 = box01.childElementCount; //공백을 제외

console.log(num01); //5

console.log(num02); //2

</script>

</body>

</html>

13. nodeList

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

//문서객체 선택시 배열로 선택되는 것에 대한 문제

//getElementsByClassName(), getElementsByTagName(), querySelectorAll()

//요소 사이의 공백도 노드로 인식해서 실제 개수보다 많게 인식

var h1 = document.querySelectorAll('h1');

var color = ['red', 'green', 'blue'];

//공백까지 css를 주려하기 때문에 에러가 발생

for(var i in h1){

h1[i].style.color = color[i];

}

//for을 통해서 length로 처리하면 실제 문서객체 개수로 반환

for(var i=0; i<h1.length;i++){

h1[i].style.color = color[i];

}

</script>

</body>

</html>

14. firstlsat

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

</div>

//firstChild : 첫번째 자손 선택 - 공백도 선택

//lastChild : 마지막 자손 선택 - 공백도 선택

//공백선택 없이 요소를 바로 선택하는 속성 사용

var box = document.querySelector('#box');

box.firstElementChild.style.color = 'red';

box.lastElementChild.style.color = 'blue';

</script>

</body>

</html>

15. sibling

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

var h1 = document.querySelector('h1');

h1.previousElementSibling.style.color = 'red';

h1.nextElementSibling.style.color = 'blue';

</script>

</body>

</html>

16. 폼요소name속성선택

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

</form>

//## name속성 선택방식

//1. document.폼네임.요소네임;

document.myForm.myInput.style.borderColor = 'red';

//2. document.forms['폼네임'].elements['요소네임'];

var box = document.forms['myForm'].elements['myInput'];

box.style.height = '100px';

//3. document.forms['폼네임']['요소네임'];

document.forms['myForm']['myInput'].style.backgroundColor = 'beige';

</script>

</body>

</html>

17. 폼요소name속성선택2

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

<hr>

</form>

var box = document.myForm.myInput; //input태그 선택

var p = document.getElementById('text');

box.onkeyup = function(){

var v = this.value; //사용자가 입력한 값을 담는 변수

p.textContent = v;

}

</script>

</body>

</html>

18. className속성

<!DOCTYPE html>

<head>

<style>

.active{background-color: black; color: yellow;}

</style>

</head>

<body>

//className : 문서객체의class속성을 설정하거나 값을 반환

var h1 = document.querySelector('h1');

var p = document.querySelector('p');

h1.className = 'active';

console.log(p.className);

</script>

</body>

</html>

19. classList속성

<!DOCTYPE html>

<head>

<style>

.active{background-color: black; color: yellow;}

</style>

</head>

<body>

//classList : 문서객체의class의 값을 추가, 제거, 전환하는데 사용

//이 속성은 DOMTokenList객체로 반환됨

//1. length : 클래스 개수를 반환하는 속성

//2. add('클래스명1', '클래스명2',...) : 하나이상의 클래스를 추가하는 메서드

//3. remove('클래스명1', '클래스명2', ...) : 하나이상의 클래스를 제거하는 메서드

//4. toggle('클래스명') : add()와 remove()를 번갈아 실행하는 메서드

//5. contains('클래스명') : 해당 클래스가 있다면 true를 반환, 그렇지 않다면 false를 반환

var h1 = document.querySelector('h1');

var h2 = document.querySelector('h2');

//마우스올리면 active클래스 추가

h1.addEventListener('mouseenter', function(){

this.classList.add('active');

});

//마우스를 내리면 acive클래스 제거

h1.addEventListener('mouseleave', function(){

this.classList.remove('active');

});

//한번클릭하면 클래스추가, 또 클릭하면 클래스 제거

//toggle : 한키나 한버튼이 두가지기능을 번갈아실행

h2.addEventListener('click', function(){

this.classList.toggle('active');

});

</script>

</body>

</html>

20. 햄버거버튼

<!DOCTYPE html>

<head>

<title>햄버거버튼</title>

<style>

/* base */

*{ padding: 0; margin: 0; }

li{ list-style: none; }

a{ text-decoration: none; }

button{ cursor: pointer; } /* 마우스 손모양 */

/* panel_btn */

.panel_btn{

width: 35px; height: 30px; /* 삼선 공간 */

margin: 50px; /* 이건 작성하지 않아도 됨 */

padding: 5px; /* X자로 변경시 넘어가는 공간 처리 */

overflow: hidden; /* 최근 브라우저는 괜찮은데, 과거버전들을 transform으로 회전시에 요소 반경이 커지게 됨 -> 그것을 방지하기 위해 작성 */

}

.panel_btn a{

display: block; /* 부모영역 상속 */

width: 100%; height: 100%; /* 부모공간 전부 상속 */

position: relative; /* 자손인 span선들의 앱솔루트 기준을 현재 요소로 변경 */

}

/* line */

.panel_btn span{

position: absolute; /* 인라인요소가 블록으로 변경 */

left: 0;

width: 35px; height: 2px;

background-color: #333; /* 배경색으로 선처리 */

transition: 0.3s; /* CSS변화에 시간차를 주는 속성 */

}

.panel_btn .line01{ top: 2px; transform-origin: left top; }

.panel_btn .line02{ top: 14px; }

.panel_btn .line03{ top: 26px; transform-origin: left bottom; }

/* 클릭이벤트로 활성화될때 주는 클래스 : active */

.panel_btn a.active .line02{ transform: scaleX(0); }

.panel_btn a.active .line01{ transform: rotate(45deg); left: 5px; }

.panel_btn a.active .line03{ transform: rotate(-45deg); left: 5px; }

</style>

</head>

<body>

</a>

</div>

//문서객체 선택 - a

var btn = document.querySelector('.panel_btn > a');

btn.addEventListener('click', function(e){

//#임시링크 - 클릭 시 홈페이지 상단으로 올라가는 기본이벤트

e.preventDefault(); //기본이벤트 제거 (상단으로 올라가는 이벤트)

this.classList.toggle('active');

});

</script>

</body>

</html>

21. 문서객체영역속성

<!DOCTYPE html>

<head>

<style>

*{padding: 0; margin: 0;}

h1{

width: 200px; height: 200px; padding: 30px; border: 5px solid black; margin: 50px; background-color: pink;

white-space: nowrap; /* 글자들이 부모보다 클때 줄바꿈 처리 안함 */

overflow: hidden; /* 현재요소를 넘어간 자손을 안보이게 처리 */

}

</style>

</head>

<body>

<h1 id="test">제목태그제목태그제목태그</h1>

<hr>

<p>clientWidth : <span class="text01"></span></p>

<p>offsetWidth : <span class="text02"></span></p>

<p>scrolltWidth : <span class="text03"></span></p>

//문서객체선택

var test = document.querySelector('#test');

var text01 = document.querySelector('.text01');

var text02 = document.querySelector('.text02');

var text03 = document.querySelector('.text03');

//1. clientWidth : 폭 + 패딩

text01.textContent = test.clientWidth;

//2. offsetWidth : 폭 + 패딩 + border + 스크롤바

text02.textContent = test.offsetWidth;

//3. scrolltWidth : 폭 + 패딩 + border + 스크롤바 + overflow로 가려진 부분까지

text03.textContent = test.scrollWidth;

</script>

</body>

</html>

22. dataset속성

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

//사용자정의속성 : getAttribute()로도 값을 가져올 수 있음

//dataset : 문서객체의 사용자 정의 속성값에 접근

//문서객체선택.dataset.속성명;

//문서객체선택.dataset[속성명];

var h1 = document.querySelectorAll('h1');

for(var i=0;i<h1.length;i++){

h1[i].addEventListener('click', function(){

var dataIndex = this.dataset.index;

var tagName = this.dataset.tagName;

alert(dataIndex);

alert(tagName);

});

}

</script>

</body>

</html>

23. 로또생성기

<!DOCTYPE html>

<head>

<title>바닐라JS - 로또생성기</title>

</head>

<body>

<p>실제가 아닙니다. 오해가 없길 바랍니다.<br>새로고침시 새로운 번호가 나옵니다.</p>

</div>

</div>

</body>

</html>

@charset "utf-8";

/* base */

*{ padding: 0; margin: 0; }

/* lottoBox */

.lottoBox{

width: 1000px; border: 1px solid #ccc;

padding: 50px; box-sizing: border-box; margin: 50px auto;

}

.lottoBox:after{

content: ''; clear: both; display: block;

}

.lottoBox h2{

margin-bottom: 10px;

text-align: center; font-weight: normal;

}

.lottoBox .num{

font-weight: bold; color: #ff0000;

}

.lottoBox p{

margin-bottom: 30px;

text-align: center; color: #666; font-size: 14px;

}

.lottoBox .winningNumber{

position: relative;

display: flex; justify-content: space-between;

float: left; width: 520px; height: 120px; margin-bottom: 50px;

padding: 30px; box-sizing: border-box; border-radius: 30px;

background-color: #fafafa;

}

.lottoBox b{

position: absolute; bottom: -30px; left: 50%;

transform: translateX(-50%);

color: #666;

}

.lottoBox .plus{

float: left; width: 258px; height: 120px;

text-align: center; line-height: 90px;

font-weight: bold; font-size: 100px; color: #666;

}

.lottoBox .bonusNumber{

position: relative;

float: right; width: 120px; height: 120px; margin-bottom: 50px;

padding: 30px; box-sizing: border-box; border-radius: 30px;

background-color: #fafafa;

}

.lottoBox .winningNumber span, .lottoBox .bonusNumber span{

display: block; width: 60px; height: 60px;

border-radius: 50%;

background-color: #69c8f2;

color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);

font-size: 28px; text-align: center; line-height: 57px;

}

//1. 문서객체선택

var lottoNum = document.querySelectorAll('.winningNumber > span');

var bonusNum = document.querySelector('.bonus');

//로또번호를 담을 배열변수 - 7자리받기

var lotto = [];

for(var i=0;i<7;i++){

var num = Math.floor(Math.random() * 44) + 1 ;

//같은 번호면 다시나오게

for(var j in lotto){

while(num == lotto[j]){

num = Math.floor(Math.random() * 44) + 1;

}

//배열에 숫자를 마지막 값으로 추가

lotto.push(num);

}

//보너스 번호 빼기

var bonus = lotto.pop(); //마지막값 빼서 담기

bonusNum.textContent = bonus; //문서객체의 텍스트 컨텐츠에 넣기

//나머지로또 번호를 오름차순으로 정렬

lotto.sort(function(left, right){

return left - right;

});

//숫자에 따라서 색상이 달라짐

var bgColor = ['#fbc400', '#69c8f2', '#ff7272', '#aaa', '#b0d840'];

//색상변화는 보너스번호에도, 각각 숫자에도 들어가야함 - 2번 코드 실행

function colorChange(number, obj){ //함수선언 - 생각만 하고 있는 상태

if(number >=1 && number <=10){

obj.style.background = bgColor[0];

}else if(number >=11 && number <=20){

obj.style.background = bgColor[1];

}else if(number >=21 && number <=30){

obj.style.background = bgColor[2];

}else if(number >=31 && number <=40){

obj.style.background = bgColor[3];

}else{

obj.style.background = bgColor[4];

}

//초기실행 호출 - 보너스 번호색상 지정

colorChange(bonus,bonusNum);

//for in문 쓰면 노드관련으로 에러 발생 - for문 작성

for(var i=0;i<lottoNum.length;i++){

lottoNum[i].textContent = lotto[i];

//색상지정함수 호출

colorChange(lotto[i], lottoNum[i]);

}

저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 12일차 - ES6 2 (0)	2023.03.16
[Vanilla JS]study 11일차 - ES6 (0)	2023.03.13
[Vanilla JS]study 9일차 - DOM (0)	2023.03.06
[Vanilla JS]study 8일차 - BOM (1)	2023.01.27
[Vanilla JS]study 7일차 - 기본내장객체 로또생성하기 (0)	2023.01.11

'javascript&jquery' Related Articles

단비의 코딩 공부 blog

[Vanilla JS]study 10일차 - DOM2 본문

[Vanilla JS]study 10일차 - DOM2

'javascript&jquery' 카테고리의 다른 글

티스토리툴바