Day 32

Math 객체

• Math.random 0<= n < 1 사이의 난수
• Math.floor() : 버림
• Math.round() : 반올림
• Math.ceil() : 올림

+++ 1부터 n까지의 랜덤한 숫자 뽑아내는 법

Math.floor(Math.random() * n) + 1

Date 객체

• Date 객체의 month는 0부터 11까지 -> (표시하고자하는 월 - 1) 해줘야 함
• UTC 시간대가 기본 -> 영국시간 + 9

let date1 = new Date();
let date2 = new Date(2023, 3, 15); // 년월일
let date2_2 = new Date("2023-03-15"); // 문자열로 넣으면 그 값 그대로 인식 

let date3 = new Date(2023, 3, 15, 10, 34, 11); // 년월일시분초

let date3_2 = new Date("2023-03-15 10:42:35"); // 시간은 문자열 그대로 넣어도 영국시간 기준으로 변환
let date3_3 = new Date("2023/03/15 10:42:35");

console.log('date2', date2)
console.log('date2_2', date2_2)

console.log('date3', date3)
console.log('date3_2', date3_2)
console.log('date3_3', date3_3)


결과
date2 2023-04-14T15:00:00.000Z
date2_2 2023-03-15T00:00:00.000Z
date3  2023-04-15T01:34:11.000Z
date3_2 2023-03-15T01:42:35.000Z
date3_3 2023-03-15T01:42:35.000Z

• getDate(날짜)
• getDay(일)
• getFullYear(년수)
• getHours(시간)
• getMinutes(분)
• getSeconds(초)
• getMilliseconds(밀리초)
  …

밀리초로 날짜 사이의 차이 구하기

let date4 = new Date('2023-03-16');
let date5 = new Date('2023-03-01');
let dateDiff = date4.getTime() - date5.getTime();

console.log(diff); // 밀리초
console.log(diff / 1000); // 초
console.log(diff / 1000 * 60); // 분
console.log(diff / 1000 * 60 * 60); // 시간
console.log(diff / 1000 * 60 * 60 * 24); // 일

결과
1296000000
1296000
21600
360
15

---

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

: 자바스크립트 언어 사양에 포함되지 않고 웹 브라우저에서 제공하는 객체

종류

• window : 웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
• document : 웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체
• location : 웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
• history : 웹 브라우저에 저장된 방문 기록이 포함된 객체
• navigator : 웹 브라우저 정보가 포함된 객체
• screen : 웹 브라우저의 화면 정보가 포함된 객체

window 객체

1. 속성

• innerWidth, innerHeight : 웹 브라우저 화면의 너비, 높이
• outerWidth, outerHeight : 웹 브라우저 창의 너비, 높이
• screenTop / screenY : 웹 브라우저 위쪽 면과 모니터의 간격
• screenLeft / screenX : 웹 브라우저 왼쪽 면과 모니터의 간격
• pageXOffset / scrollX : 웹 브라우저의 수평 스크롤 위치
• pageYOffset / scrollY : 웹 브라우저의 수직 스크롤 위치

2. 메서드

• scrollTo : 특정 좌표로만 스크롤 이동
• scrollBy : 특정 값씩 스크롤 이동

window.scrollTo(200, 200); // 200, 200으로만 이동
window.scrollTo({ left: 200, top: 200, behavior: "smooth" }); 
// 마우스 휠 굴리듯이 부드럽게 이동

window.scrollBy(200, 200); // 계속 200, 200씩 이동
window.scrollBy({ left: 200, top: 200, behavior: "smooth" });
// 마우스 휠 굴리듯이 부드럽게 이동

• open(새 창 열기), close(닫기)

open()
open(url)
open(url, target)
open(url, target, windowFeatures)

ex.

 window.open('https://www.naver.com', '_blank', 'width=200, height=200, left=300, top=200');

---

DOM(Document Object Model)

• 웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조
• DOM 트리 : 문서 객체 모델이 가지는 트리(tree) 구조

노드 타입

• 문서 노드(Node.DOCUMENT_NODE) : 최상위 document 객체의 노드 타입
• 요소 노드(Node.ELEMENT_NODE) ex. h1, p
• 속성 노드(Node.ATTRIBUTE_NODE) ex. href, src
• 텍스트 노드(Node.TEXT_NODE)
• 주석 노드(Node.COMMENT_NODE)

요소 노드 탐색 속성 : element node(요소 노드)만을 반환

• parentElement, children : 부모, 자식 요소 노드 반환
• firstElementChild, lastElementChild: 첫번째, 마지막 자식 요소 노드 반환
• previousElementSibling, nextElementSibling : 이전, 다음 요소 노드 반환

노드 선택자

1. 속성값과 태그명 사용

• getElementById(id이름)
• getElementsByClassName(class이름) (여러개)
• getElementsByTagName(tag이름) (여러개)

2. CSS 선택자 사용

• querySelector
• querySelectorAll (여러개)

+++ 여러개를 선택하는 선택자는 노드들을 배열에 담아서 리턴한다

const el1 = document.getElementById("div1");
const el2 = document.getElementsByClassName("divcls");
const el3 = document.getElementsByTagName("p");

const qs1 = document.querySelector("#div1"); // 아이디 선택자
const qs2 = document.querySelectorAll(".divcls"); // 클래스 선택자
const qs3 = document.querySelectorAll(".container1 .indiv"); // container1 안에 있는 indiv클래스만을 선택

textContent, innerText, innerHTML의 차이

• textContent : 노드 요소의 모든 텍스트에 접근, 문자로 인식
• innerText : 노드 요소의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근, 문자로 인식 (display: none일 경우 안보임)
• innerHTML : 노드 요소의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근, html로 인식

document.querySelector('#t1').textContent = "<strong>textContent</strong> 속성";
document.querySelector('#t2').innerText = "<strong>textContent</strong> 속성";
document.querySelector('#t3').innerHTML = "<strong>textContent</strong> 속성";
        

=> 화면 상 결과

add, remove, toggle

: 클래스 속성을 조작할 때 사용

// 추가 : 이미 있으면 추가 X
document.getElementById('box3').classList.add('greenbox');

// 삭제
document.getElementById('box1').classList.remove('redbox');

// 토글 (없앴다가 생겼다가)
document.getElementById('box4').classList.toggle('redbox');

화면상 결과

getAttribute, setAttribute, removeAttribute

메서드를 통해 속성 조작

• getAttribute : 가져오기
• setAttribute(속성명, 속성값) : 설정
• removeAttribute : 속성 삭제

const aTag = document.querySelector('a');
console.log(aTag.getAttribute("href"));
console.log(aTag.getAttribute("target"));

aTag.removeAttribute("href");
aTag.setAttribute("href", "https://www.daum.net");
console.log(aTag.getAttribute("href"));


결과
https://www.naver.com
_blank
https://www.daum.net

classList.add 와 setAttribute의 차이

• classList.add는 기존에 있던 클래스 값에 새로운 값을 추가하는 것이라면 setAttribute는 새로운 값을 설정해서 덮어씌운다 !

// HTML
<div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <div class="box" id="box3"></div>
    <div class="box redbox" id="box4"></div>

// JS
document.getElementById('box1').classList.add('redbox'); // box redbox
 
document.getElementById('box2').setAttribute("class", "bluebox"); // bluebox

setAttributeNode vs setAttribute

[JavaScript]HTML 애트리뷰트(Attribute) 설정하는 방법

• setAttributeNode : Attr 객체를 매개변수로 가지고, 설정된 Attr 객체를 반환. 이미 Attribute가 존재하는 경우 매개변수로 전달된 Attr객체로 대체

• setAttribute : Attribute의 이름과 값을 매개변수로 가지고 undefined를 반환. 이미 Attribute가 존재하는 경우 값을 변경

removeChild

• 부모 노드에 연결된 자식 노드를 삭제

// HTML
<div id="container">
   <p id="p1">p1</p>
   <p id="p2">p2</p>
</div>

// JS
const p2 = document.querySelector('#p2');
p2.parentNode.removeChild(p2);

// 자식 요소 모두 삭제
const p12 = document.querySelectorAll("#container p"); // 배열 형태로 담아놓기

// 1. for..of문
for (p of p12) {
	p.parentNode.removeChild(p);
}

// 2. for문
for (let i = 0; i < p12.length; i++) {
	p12[i].parentNode.removeChild(p12[i]);
}