Day031

RISK_TAKER·2023년 3월 15일

💡 Math 객체

관련 메소드
random(): 0~1사이의 수를 뽑는다.
floor(): 소수점 버림
round(): 소수점 반올림
ceil(): 소수점 올림
From ~ To 사이의 랜덤한 숫자를 출력하는 방법

	Math.floor(Math.random() * (To - From + 1) ) + From;

💡 Date 객체

시간을 출력하는 방법
js에서 월에 해당하는 값은 0~11이다.
시간은 UTC 시간이 기준
UTC + 9 = 한국시간

	let date1 = new Date();
	console.log(date1); //현재 시간을 출력
	
	let date2 = new Date(2023, 3, 15); //년월일
			   //출력값 : 2023-04-14T15:00:00.000Z
	let date2_2 = new Date("2023-03-15"); //년월일
			   //출력값 : 2023-03-15T00:00:00.000Z
	let diff9Hours = 1000 * 60 * 60 * 9; //9시간

관련 메소드
getFullYear()
getMonth()
getDate()
getHours
getMinutes()
getSeconds()
getTime() : 밀리 초단위의 값을 반환한다.

💡 브라우저 객체 모델

웹브라우저에서 제공하는 객체 모델
window 객체의 속성
관련 메소드
open(경로, 이름, 속성) : 브라우저에서 새창을 연다.
scrollTo() : 웹브라우저의 스크롤 위치를 특정 위치로 이동한다.
scrollBy() : 스크롤의 위치를 현재 위치에서 상대 위치로 이동한다.

<body>
    <button onclick="openNew()" style="top:200px">창띄우기</button>
    <button onclick="closeNew()" style="top:250px">창닫기</button>
    <button onclick="windowInfo()">속성확인</button>
    <button onclick="sclTo()" style="top:100px;">스크롤To</button>
    <button onclick="sclBy()" style="top:150px;">스크롤By</button>
    <script>
        function openNew() {
            window.open('https://www.naver.com', 'title', 'width=200, height=200, left=1600, top=200');
        }
        // alert('알림창 텍스트');
        function closeNew() {
            window.close();
        }
        function windowInfo() {
            console.log(window.innerWidth);
            console.log(window.innerHeight);
            console.log(window.outerWidth);
            console.log(window.outerHeight);
            console.log(window.screenTop);
            console.log(window.screenLeft);
            console.log(window.screenX);
            console.log(window.screenY);
            console.log(window.scrollX);
            console.log(window.scrollY);
        }
        function sclTo(){
            // window.scrollTo(200,200);
            window.scrollTo({left:200, top:200, behavior:'smooth'});
        }
        function sclBy(){
            // window.scrollTo(200,200);
            window.scrollTo({left:200, top:200, behavior:'smooth'});
            // window.scrollBy(200, 200);
            window.scrollBy({left:200, top:200, behavior:'smooth'});
        }
    </script>
</body>

V8엔진 : js를 실행시킬 수 있도록 만들어주는 엔진, Node.js를 설치하면서 설치가 되었다.
작성한 코드를 실행하면 V8엔진을 통해서 console로 결과를 보여준다.
브라우저객체모델 : 브라우저와 소통하는 코드, 출력되는 결과를 보기위해서는 html파일 내에 script 태그 안에 코드를 작성한 후 브라우저를 통해 실행하여 결과를 확인한다.

💡 문서 객체 모델(DOM, Document Object Model)

웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조
메소드로 노드 선택하기
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()

<p>p태그1</p>
    <p>p태그2</p>
    <div id="div1">고유아이디</div>
    <div class="divcls">클래스1</div>
    <div class="divcls">클래스2</div>

    <div class="conatainer1" id="targetid">
        <div class="indiv"></div>
        <div class="indiv"></div>
        <div class="indiv"></div>
    </div>
    <div class="container2">
        <div class="indiv"></div>
    </div>
    <script>
        const el1 = document.getElementById("div1");
        const el2s = document.getElementsByClassName("divcls");
        const el3s = document.getElementsByTagName("p");
        const el2 = document.getElementById("targetid");
        console.log(el1);
        console.log(el2s);
        console.log(el3s);

        const qs1 = document.querySelector("#div1");
        const qs2s = document.querySelectorAll(".divcls");
        const qs3s = document.querySelectorAll(".indiv");
        const qs4s = document.querySelectorAll(".container1 .indiv");
		const qs5s = document.querySelectorAll("p");
        console.log(qs1);
        console.log(qs2s);
        console.log(qs3s);
        console.log(qs4s);
    </script>

콘텐츠 조작하기
textContent : 노드 요소의 모든 텍스트에 접근
innerContent : 노드 요소의 텍스트 중웹브라우저에 보이는 텍스트에만 접근
innerHTML : 노드 요소의 텍스트 중 HTML태그를 포함한 텍스트에만 접근

		<p id="title">pTag문자, <span style="display: none;">Span 태그</span></p>

    	<script>
        	console.log(document.getElementById('title').textContent);
        	console.log(document.getElementById('title').innerText);
        	console.log(document.getElementById('title').innerHTML);
		</script>

텍스트 추가하기, 스타일 적용하기

	<p id="t1"></P>
    <P id="t2"></P>
    <P id="t3"></P>

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

 		document.querySelector('#t1').style.color = 'red';
        const pt2 = document.querySelector('#t2');
        pt2.style.color = 'blue';
        const pt3 = document.getElementById('title');
        pt3.style.fontSize = '30px'
	</script>

클래스 속성 조작하기

<style>
	.box {
		width: 100px;
        height: 100px;
        border: 1px solid black;
	}
    .redbox {
    	background-color: red;
	}
    .bluebox {
    	background-color: blue;
	}
    .greenbox {
    	background-color: green;
	}
</style>

<body>

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

    <script>
        document.getElementById('box1').classList.add('redbox');
        document.querySelector('#box2').classList.add('bluebox');
        document.querySelector('#box3').classList.add('greenbox');       
        document.getElementById('box4').classList.remove('redbox');
	</script>
</body>

토글(toggle) 적용하기

<head>
	<style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        .redbox {
            background-color: red;
        }        
        button {
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
	<div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box redbox"></div>
    <button onclick="box4toggle()">네번째 박스 토글</button>

    <script>
        function box4toggle() {
              document.getElementById('box4').classList.toggle('redbox');
        }
    </script>
</body>

메소드로 속성 조작하기

	<a href="https://www.naver.com" target="_blank">네이버로 이동</a>
    <script>       
        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")
    </script>

속성 추가, 속성값 설정

	document.getElementById('box1').classList.add('redbox'); //클래스 추가하는 것
	document.getElementById('box2').setAttribute("class", "box bluebox"); //클래스 값 자체를 변경하는 것

노드 추가/삭제하기

<body>

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

    <script>
        const newEl = document.createElement("a");

        const linkText = document.createTextNode("링크글자");

        const linkHref = document.createAttribute("href");
        const linkTarget = document.createAttribute("target");
        linkHref.value = "https://www.naver.com";
        linkTarget.value = "_blank";
        newEl.appendChild(linkText);
        newEl.setAttributeNode(linkHref);
        newEl.setAttributeNode(linkTarget);

        document.body.appendChild(newEl);

        const p2 = document.querySelector("#p2");
        p2.parentNode.removeChild(p2);
    </script>
</body>

모든 요소를 찾아 삭제하기

<body>
    <div id="container">
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>
	<script>
		const p12 = document.querySelectorAll("#container p");

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

RISK_TAKER

이전 포스트

Day030

다음 포스트

Day031

💡 Math 객체

💡 Date 객체

💡 브라우저 객체 모델

💡 문서 객체 모델(DOM, Document Object Model)

Day030

Day032

0개의 댓글