1) DOM / BOM
1-1) 정의 및 구분
1-2) Window(전역객체)
1-3) window.document 내의 메서드
2) Javascript 배열
2-1) push / pop
2-2) splice / slice
2-3) 선형검색(완전탐색)
2-4) 코드 예시 - Lotto
1) DOM / BOM
1-1) 정의 및 구분
DOM(Document Object Model)
- 여기서 문서는 html을 의미함!!
- DOM 또한 Javascript로 조작하지만 대부분의 사람들은 이 둘을 구분하여 배우려 함!!
- DOM: Javascript로 HTML을 조작하는 기능을 '브라우저'로 구현한 것
- 브라우저는 HTML, CSS, Javascript를 해석해줌!
BOM(Browser Object Model)
- BOM: 브라우저가 문서 이외의 조작(뒤로 가기 등)을 하거나 데이터를 저장하는 것 등을 수행하기 위해 제공하는 추가 객체
- DOM과 BOM을 묶어서 일명, 'Web APIs'라 함!!
Web APIs(Application Programming Interface): Javascript로 브라우저를 조작하는 것을 만드는 것을 말함
- DOM(Document Object Model)
- BOM(Browser Object Model)
1-2) Window(전역객체)
console.log(this); // window(전역객체) 객체가 출력됨!!
console.log("hello world");
// Javascript가 실행되면 기본적으로 'window'라는 객체를 제공해 줌!!
console.log(this === window); // true
// >> this와 window가 동일함을 뜻함!!(함수 밖에서 쓰는 객체는 곧 window 객체임을 의미함!)
// 즉, 힙이라는 공간에 'window'가 생기고 시작함!
// alert은 메서드(함수)이기에 아래와 같은 방법으로 호출하여 사용 가능함!!
// window.alert("경고합니다!"); // 경고창
const a = window.prompt("give me a data");
console.log(a);
// time()
// timeEnd()
console.log(window.console);
// setTimeout
// setInterval
// DOM
console.log(window.document);
// 즉, DOM은 window.document 안에 들어가 있는 것들(메서드)이 전부 DOM이다!!
const title = window.document.getElementById("title");
// console.log(title);
title.innerHTML = "DOM에 오신 것을 환영합니다!";
// window라는 전역객체는 기본적으로 생략해서 사용 가능하다!!
// 우리 수업의 목적: document 안에 있는 메서드를 많이 알고, 이를 사용하기 위해 훈련하는 데에 초점을 맞춤!
// 요약
console.log(this); // window 객체 출력함!
console.log(this === window); // true
/*
잘 쓰이는 window 메서드
- console.log()
- alert()
- prompt()
*/
// window.document
// window는 생략이 가능하다!
console.log(document);
// >> document 안에 나오는 메서드들을 사용할 줄 알면 된다!!
1-3) window.document 내의 메서드
Javascript
// DOM
console.log(window.document);
// 즉, DOM은 window.document 안에 들어가 있는 것들(메서드)이 전부 DOM이다!!
const title = window.document.getElementById("title");
// console.log(title);
title.innerHTML = "DOM에 오신 것을 환영합니다!";
const sp = document.getElementsByTagName("span");
console.log(sp); // (중요!!) 결과를 배열로 받아서 출력함!!
const domTitle = document.getElementById("DOM-title");
const spList = domTitle.getElementsByTagName("span");
console.log(spList);
console.log(spList.length); // 3
/*
// 1. 0~2 까지 반복하는
// 2. spList Element를 각각 출력
// 3. span1-1 span1-2 span1-3
for (let i = 0; i < spList.length; i++) {
spList[i].innerHTML = "span1-" + (i + 1);
}
*/
const spList2 = document.getElementsByClassName("sp");
for (let i = 0; i < spList2.length; i++) {
spList2[i].innerHTML = "span1-" + (i + 1);
}
/*
- getElementById(인자1) === window.document.getElementById()
>> 반환값이 객체(Object)이며, 만일 id를 잘못 기재할 시 'null'값을 반환함!!
>> 만일 동일한 id가 여러 개인 경우에는 맨 위에 태그만 출력해 줌(여러 태그를 한 번에 출력하려 하면 class를 사용해야 함!)
>> 인자1에 들어가는 값은 '태그의 id 명', 데이터 타입은 'string'이다!!
>> 복수 선택 안 됨!!
- getElementsByTagName(인자1) === window.document.getElementsByTagName()
>> 복수 선택 가능!!
>> 반환값은 배열이고, 배열 안에 들어간 값은 객체(Object)이다! => "Object[]"와 동일한 의미
>> 인자1에 들어가는 값은 '태그명', 데이터 타입은 'string'이다!!
- getElementsByClassName() === window.document.getElementsByClassName()
*/
/*
document.getElementById();
document.getElementsByClassName();
document.getElementsByTagName();
*/
const gnb = document.querySelector("#gnb");
const list = document.querySelectorAll("#gnb > li");
/*
바로 위의 list 변수에 'querySelectorAll' 결과를 담는 것을 나눠서 다른 방식으로 표현한 예시
const gnb2 = document.getElementById('gnb');
const list2 = gnb2.getElementsByTagName('li');
*/
console.log(gnb);
console.log(list);
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="title"></h1>
<span>span2</span>
<h2 id="DOM-title">
DOM
<span class="sp">span1</span>
<span class="sp">span1</span>
<span class="sp">span1</span>
</h2>
<script src="./public/js/index.js" type="text/javascript"></script>
</body>
</html>
CSS
/* 모든 span 태그를 전부 선택함! */
span {
}
/* span 태그 중 class가 'sp'인 span 태그들만 선택함 */
.sp{
}
/* span 태그 중 id가 'DOM-title'인 h2 태그의 자식 태그에 해당하는 span 태그들만 선택함! */
#DOM-title > span {
}
2) Javascript 배열
2-1) push / pop
// Array(배열)
const arr = [
{
name: "ingoo",
},
{
name: "ingoo2",
},
{
name: "ingoo3",
},
];
console.log(arr[2].name); // ingoo3
// #gnb > li:nth-child(2) => 'hello world!'로 텍스트 바꾸기
list[1].innerHTML = "hello world!";
// 배열(참조형)
// const arr2 = new Array(); // 배열 생성자 문법
const arr = ["apple", "banana", "orange"];
const arr2 = []; // 배열 리터럴 문법
console.log(arr === arr2); // false
console.log(arr[0]); // apple
console.log(arr[2]); // orange
console.log(arr[1]); // banana
console.log(arr.length); // 3
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 새로운 요소를 만들어 값 추가하기
/*
기본적인 방법
arr[3] = "melon";
console.log(arr);
*/
// push 메서드 사용
arr.push("melon"); // push: 배열의 맨마지막 요소에 값이 추가됨!!
console.log(arr);
// 1 ~ 100까지의 숫자를 빈 배열을 만들어 순서대로 값 추가하기
const arr3 = []; // length : 0
/*
push 메서드를 사용하지 않은 기본적인 for 문을 사용한 방법
for (let i = 0; i < 100; i++) {
arr3[i] = i + 1;
}
*/
for (let i = 1; i <= 100; i++) {
arr3.push(i);
}
console.log(arr3);
// 과일을 0~3까지 출력
for (let i = 0; i, i < arr.length; i++) {
console.log(arr[i]);
}
arr.pop(); // pop: 배열의 마지막 요소를 삭제함!!
console.log(arr);
2-2) splice / slice
// splice
const arr5 = [];
for (let i = 1; i <= 6; i++) {
arr5.push(i);
}
// splice 인자값 >> 원본 배열을 변형시킴!!
// 인자1: 삭제할 인덱스 값
// 인자2: 삭제할 요소 개수
arr5.splice(2, 1);
console.log(arr5); // [1, 2, 4, 5, 6] => length: 5
// slice 인자값 >> 원본 배열을 변형시키지 않고, 수정사항을 반영한 새로운 배열을 반환함!!
// 인자1: 삭제를 시작할 인덱스 값
// 인자2: 삭제를 종료할 인덱스 값(해당 인덱스 값 미포함 === 해당 인덱스 값 미만)
const arr6 = arr5.slice(2, 4);
console.log(arr5); // [1, 2, 4, 5, 6] => 원본 배열을 변형시키지 않음!!
console.log(arr6); // [4, 5]
2-3) 선형검색(완전탐색)
// 선형 검색(Linear search) or 완전탐색
// length : 10
// [10, 6, 3, 8, 21, 5, 8, 12, 99, 7]
// 위의 배열에서 값이 5에 해당하는 요소의 index 찾기
// 단, 해당 값이 없을 경우에는 '-1'을 출력할 것!!
function linearSearch(array, target) {
const length = array.length;
for (let i = 0; i < length; i++) {
if (array[i] === target) {
return i;
}
}
return -1;
}
const search1 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 21);
const search2 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 99);
const search3 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 8);
const search4 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 100);
console.log(search1); // 4
console.log(search2); // 8
console.log(search3); // 3
console.log(search4); // -1
2-4) 코드 예시 - Lotto
Javascript
console.log(Math.random() * 10); // Math.random(): 0.0 ~ 0.9의 범위 내에서 랜덤 값을 뽑아줌!!
// 로또
console.log(Math.floor(Math.random() * 45))
// 1. 1 ~ 45까지 배열에 담음
// 2. 랜덤 숫자로 6개를 뽑을 예정
// 2-1. 랜덤 숫자를 6번 뽑기
const lottoNum = []; // 1 ~ 45
const result = []; // 랜덤 6개
const lottoBox = document.querySelectorAll("#gnb > li");
for (let i = 1; i <= 45; i++) {
lottoNum.push(i);
}
for (let i = 0; i < 6; i++) {
const number = Math.floor(Math.random() * 45) + 1;
// lottoNum[number - 1]
lottoNum.splice(number - 1, 1);
result.push(number);
}
console.log(result);
for (let i = 0; i < result.length; i++) {
lottoBox[i].innerHTML = result[i];
}
※ 위의 로또 번호 구하는 코드는 현재 에러(중복 숫자 추출 등)를 포함하고 있는 코드이므로 추후 수정하여 다음 게시글에 재업로드할 예정!!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#gnb > li {
display: inline-block;
font-size: 40px;
background: black;
color: #fff;
width: 80px;
height: 80px;
border-radius: 40px;
text-align: center;
line-height: 80px;
margin: 30px;
}
</style>
</head>
<body>
<h1>Logo</h1>
<ul id="gnb">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="./public/js/array.js" type="text/javascript"></script>
</body>
</html>
+) 어림수 관련 내장함수
Math.floor
// 소수점 첫째 자리에서 내림(버림).
// ex) 3.1은 3, -1.1은 -2가 됨.
Math.ceil
// 소수점 첫째 자리에서 올림.
// ex) 3.1은 4, -1.1은 -1이 됨.
Math.round
// 소수점 첫째 자리에서 반올림.
// ex) 3.1은 3, 3.6은 4, -1.1은 -1이 됨.
Math.trunc (Internet Explorer에서는 지원하지 않음)
// 소수부를 무시.
// 3.1은 3이 되고 -1.1은 -1이 됨.
+) 객체(참조형) 생성 방법
const obj = {}; // 객체 리터럴 문법
const obj2 = new Object(); // 객체 생성자 문법
'DOM' 카테고리의 다른 글
DOM 기초(6) - 메뉴 / 서브메뉴, 이미지 슬라이드, 로또 (0) | 2022.11.14 |
---|---|
DOM 기초(5) - 이미지 슬라이드, preview / next 버튼 구현 (0) | 2022.11.11 |
DOM 기초(4) - setTimeout, setInterval, single thread, event loop (0) | 2022.11.10 |
DOM 기초(3) - DOMContentLoaded, Form 태그 이벤트, Element 생성 (0) | 2022.11.09 |
DOM 기초(2) - Event, 코드 실습(Lotto) (0) | 2022.11.08 |