[목차]
1. DOM 입문
2. 배열 복습
1.DOM
Document Object Model.
(Document = html)
Javascript로 HTML & CSS를 조작하는 기능을 브라우저가 구현한 것
렌더 되는 영역을 다룬다.
즉 DOM의 주체는 '브라우저'
BOM
Browser Object Model.
이 두 가지를 통틀어서 `web APIs`라고 부른다.
Web APIs
- DOM
- BOM
API?
Application Programming Interface
자바스크립트로 브라우저를 조작할 수 있도록 만든다.
(인터페이스 ~ 2개 이상의 장치나 소프트웨어가 정보(신호)를 교환할 수 있도록 이어주는 장치 (=리모콘))
console.log("hello world")위 코드에는 사실 console.log를 감싸는 익명함수가 숨겨져 있다.
;(function () {
console.log("hello world")
})()this도 입력 가능
console.log(this)
// Window {window: Window, self: Window, document: document, name: '', location: Location, …}이 때 기본이 되는 객체는 window다.
console.log(window) // 언제든 사용 가능.
console.log(this === window) // > true아래는 window에서 확인 할 수 있는 여러가지 method들...
alert,
window.alert('warning') // 경고창setTimeout, setInterval, time(), timeEnd()...
window.prompt("") // `window.`은 생략 가능.
const a = window.prompt("plz data")
console.log(a)위 메서드들은 일종의 BOM이며
window 객체 속 document 안의 내용들은 모두 DOM에 해당
console.log(window.document)DOM 입문 - 1
console.log(window.document)
const title = window.document.getElementById("title")
// getElementById 대소문자 주의.
console.log(title)
// > h1#title
title.innerHTML = "DOM에 오신 것을 환영합니다!"화면에 해당 문구가 <h1>이 적용된 채로 출력된다.
자바스크립트로도 html 내용을 채워넣는 것이 가능하다. (innerHTML 메서드)
DOM 입문 - 2
자바스크립트로 원하는 엘리먼트만 선택하려면?
const sp = document.getElementsByTagName('span')
// 괄호 안은 엘리먼트명. document는 전체 문서를 의미 (<body> 영역)
console.log(sp)
// > HTMLCollection(4) [span, span, span, span] 배열로 리턴↓
const domTitle = document.getElementById('DOM-title')
const splist = domTitle.getElementsByTagName("span")
console.log(splist)
// HTMLCollection(3) [span, span, span]
// 선택한 영역 속 3개의 <span>만 선택됨.2) 자바스크립트를 이용해서 span1-1, span1-2, span1-3으로 고치기
console.log(splist.length)a) 0~2까지 반복하는 for문 작성
b) spList Element를 각각 출력
c) span1-1 span1-2 span1-3
for (let i = 0; i < splist.length; i++ ) {
console.log( splist[i] ) // > <span>span1</span>
splist[i].innerHTML = 'span1-'+(i + 1)
// innerHTML로 내용 조작 가능.
}
// splist[i]는 splist의 배열을 의미3) class 선택자로 선택하기
const spList2 = document.getElementsByClassName("sp")
for (let i = 0; i < spList2.length; i++) {
spList2[i].innerHTML = "span1-" + (i + 1)
}
// > span1-1 span1-2 span1-3 출력getElementById()
- 괄호 안에는 인자값 입력 (id속성의 값을 넣는다.
<div>의 id 속성이 header이라면 "header" 입력) - 입력 미스시 Null 출력. 제대로 기입했을 때는 Object(객체)로 리턴한다.
- 이 메서드는 복수선택이 불가능. (id는 하나만 쓰기로 약속. 혹여 같은 id를 중복해서 쓰더라도 상단태그가 우선 선택된다.)
getElementsByTagName()
- 괄호 안에는 엘리먼트 이름 입력 (
<div>,<span>...) - return값이 배열이다. (Object[], 배열 속 요소들은 객체)
- 복수선택 가능
getElementsByClassName()
- 괄호 안에 클래스 이름 입력
Object[]
const arr = [
{name:'Joo1'},
{name:'Joo2'},
{name:'Joo3'},
]
// String[]
const arr2 = [
"string1",
"string2",
"string3",
]
// Number[]
const arr3 = [
1,
2,
3,
]선택이 상당히 귀찮다.
아래는 JS가 버전업 되면서 추가된 방법
const gnb = document.querySelector('#gnb')
// 하나만 선택
const list = document.querySelectorAll('#gnb > li')
// 여러개 선택 (리턴값이 배열)↑ CSS의 선택 방법을 그대로 가져다 쓸 수 있는 신문법
기존 방식보다 훨씬 간편하다.
+)
console.log(gnb) // > ul#gnb
console.log(list) // > NodeList(4) [li, li, li, li]이 중 #gnb > li:nth-child(2)의 내용을 hello world!로 바꾸려면?
list[1].innerHTML = "<b>hello world!</b>"
console.log(list[1])2. 배열 복습
객체 생성방법 (두 방법은 동일한 의미)
const obj2 = new Object()
const obj = {}
// 객체는 중괄호배열 생성방법도 똑같다
const arr2 = new Array()
const arr = []
// 배열은 대괄호
console.log(arr === arr2) // > false (참조)+) 배열 속 요소들의 데이터타입은 하나로 통일하는 것을 추천.
(1,2,3..../'a','b','c'...)
const arr = ["apple", "banana", "orange"]
// apple
console.log(arr[0])
// orange
console.log(arr[2])
// banana
console.log(arr[1])
// 총배열갯수
console.log(arr.length) > 3만약 배열에 n번째 요소를 추가하고 싶다면 방법은 2가지.
arr[3] = 'melon' // 방법1.
arr.push('melon') // 방법2. 맨 마지막 요소 바로 뒤에 새로운 요소를 추가.
방법2(push 메서드 사용)가 더 간편하다.
배열에서 요소를 빼고 싶을 때는
arr.pop() // 배열의 마지막요소를 삭제한다.- 배열 추가
.push(): 괄호 안에 추가할 요소 이름 기입 - 배열 삭제
.pop(): 괄호를 비우면 마지막 요소 삭제
const arr5 = [1,2,3,4,5,6]
arr5.push(7)
console.log(arr5) // > [1, 2, 3, 4, 5, 6, 7]
arr5.pop()
console.log(arr5) // > [1, 2, 3, 4, 5, 6]중간에 낀 요소를 빼고 싶다면?
splice(A,B)
- 인자1(A): 삭제할 인덱스값
- 인자2(B): 삭제할 요소 갯수 (인자1을 시작점으로 차례대로 삭제됨)
arr5.splice(2,1)
console.log(arr5) // > [1, 2, 4, 5, 6] (3, 4 삭제)slice(A,B)
-인자1(A): 삭제를 시작할 인덱스값
-인자2(B): 삭제를 종료할 인덱스값 (미만)
const arr6 = arr5.slice(2, 4)
// slice는 선택한 만큼 자르고 새로운 배열(참조)을 만들어서 리턴.
console.log(arr6) // > [4, 5] 출력slice는 잘 쓰지 않는다...
++)
// menu
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}배열을 이용해서 반복문을 만들 때는 요소를 더하거나 빼기 쉽도록
최대값을 배열명.length의 형태로 입력하는 것이 좋다.
선형 검색 (Linear search) (= 완전 탐색)
- length : 10인 배열
- [10, 6, 3, 8, 21, 5, 8, 12, 99, 7]
값이 21인 요소의 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) // > 4 출력
// const search1 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 99) // > 8 출력
// const search1 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 8) // > 3, 6 출력
const search1 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 100) // > -1 출력 (없음)
console.log(Math.random()) // Math라는 객체와 random() 메서드 이용. 0.0~0.9 사이를 랜덤값으로 뽑아줌
console.log(Math.floor(Math.random() * 10)) // 1의 자리 숫자 랜덤출력. (Math.floor()는 반올림 메서드)// 로또도 만들 수 있다
// 1. 1~45까지 배열 생성
// 2. 랜덤 숫자로 6개 뽑기
const lottoNumber = [] // 1~45
const result = [] // 랜덤6개
const lottoBox = document.querySelectorAll("#gnb > li")
for (let i = 1; i <= 45; i++) {
lottoNumber.push(i)
}
for (let i = 0; i <6; i++) {
const number = Math.floor(Math.random() * 45) + 1 // +1은 0이 나오는 것 방지
// lottoNumber[number-1] // ~ 22의 인덱스값은 21
lottoNumber.splice(number-1,1) // 직전에 나오는 수는 뺀다. (중복 방지)
result.push(number)}
for (let i = 0; i < result.length; i++) {
lottoBox[i].innerHTML = result[i]
}
