개발 노트

Javascript // 7일차 [DOM 기초] 본문

Javascript

Javascript // 7일차 [DOM 기초]

Meter216 2022. 11. 7. 17:07

목차

1. 이론

2. 배열 복습

3. 로또 만들기

1. 이론

 

DOM

document

object

model

 

브라우저는 HTML, CSS, JS를 해석하는 능력이 있다.

DOM은 자바 스크립트를 통해 HTML 을 조작하는 모든 메서드를 말한다.

DOM은 자바 스크립트라기 보다는 JS로 HTML을 조작하는 기능을 '브라우저' 가 구현한 것이다.

브라우저가 JS를 활용해서 HTML의 랜더 하는곳에 구현하는 능력을 실현시킨 것이 DOM 이다. DOM은 브라우저가 만들어 준 것이다.

 

BOM = browser object model 

 

DOM과 BOM을 합쳐서 WEP APIS 라고 부른다.

 

DOM을 잘 하려면 

기본적으로 객체, 메서드, 함수를 잘 알아야한다.

JS는 기본적으로 윈도우라는 객체를 준다.

JS에서 아무 객체를 만들지 않은 상태로 THIS 를 입력하게 되면

WINDOW와 같은 의미를 가진다 . (THIS === WINDOW) 같은 객체이다.

console.log(this) 를 입력하면 윈도우 객체가 열린다.

 

앞서 계속 언급되었던 힙 이라는 공간에 윈도우가 생기고 시작된다고 보면 된다.

 

window.document.getElementById("html#id")

 

H1엘리먼트를 변수로 담고 있는것.

HTML을 CSS 처럼 JS에서 조작 할 수 있게되는 것.

** . 을 사용했기 때문에 객체 타입을 가지게 된다는 것도 유추해야한다.

id를 새로 변수에 지정하는 것이 아니라 

어느 힙 공간에 있던 주소 만 부여 하는것이라 보는게 맞다.

 

#실사

*HTML

<body>
        <h1 id="title"></h1>
        <Span>span2</span>
        <h2 id="DOM-title">
            DOM
            <span class="sp">span1</span>
            <span class="sp">span2</span>
            <span class="sp">span3</span>
        </h2>
        <script src="./public/js/dom.js"></script>

    </body>

 

**JS

const title = window.document.getElementById("아이디명") // 데이터 타입은 스트링 이어야 함
const class = document.getElementsByClassName("클래스")
const all = document.querySelector("선택자") // 여러개 선택하고 싶다면 Selector 뒤에 All 필요


title.innerHTML = "텍스트를 바꿀 수 있다."

const sp = document.getElementsByTagNam("태그명") // 태그는 element에 s를 붙여 복수임을 나타낸다

const domTitle = document.getElementById("DOM-title") // dom-title에 지정
const spList = domTitle.getElementsByTagName("span") // dom-title 안에 들어있던 span들만 선택 할 수 있따
for (let i = 0; i < spList.length; i++){
   spList[i].innerHTML = "span1-" + (i + 1)
}

 

window.document 에 들어가 있는 모든 내용이 DOM이다.

window 라는 객체는 JS에서 기본적으로 생략이 가능하다.

 

아무것도 쓰지 않은 상태에서 THIS는 WINDOW지만, 

객체 안에서 THIS는 객체를 가르키게 된다.

 

console.log(document) 찍고 안에 나오는 메서드들을 사용할 줄 알면 된다.

 

**대소문자 구분 필수**

 

2. 배열

 

const arr = ["apple", "bannana", "orange"]
const arr2 = []

console.log(arr[0]) // apple

console.log(arr[2]) // orange

console.log(arr[1]) // banana

console.log(arr.length) // 3

배열 인덱스 값은 기본적으로 0부터 시작한다

 

 

# 배열 요소 추가/삭제

arr[3] = melon // 배열의 3 인덱스에 멜론을 추가
arr.push("melon") // 배열의 마지막에 멜론을 추가 형식 헷갈림 주의

arr.pop() // 배열의 마지막을 삭제
arr.splice(2,2) //배열의 2 인덱스부터 2개를 삭제 (삭제할 인덱스값, 삭제할 요소 개수)
let arr2 = arr.slice(2,4) // 배열 2의 인덱스부터 4의 인덱스 까지만 썰어서 arr2 에 부여하는것

 ( 배열의 추가삭제는 문법이 차이가 있고, slice 같은 경우 헷갈릴 수 있으니 어느정도 구분이 가능 할 정도로 외우자. )

 

 

#선형검색 (linear search) 완전탐색


[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, 79, 21, 5, 8, 12, 99, 7], 21)
const search2 = linearSearch([10, 6, 3, 79, 21, 5, 8, 12, 99, 7], 99)
console.log(search1)
console.log(search2)

 

 

 

# 로또 만들기

 

const lottoBox = document.querySelectorAll("#gnb > li")
const lottoNumber = [] //1~45
const result = [] // 랜덤 6개

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
    // lottoNumber[number-1]
    lottoNumber.splice(number-1, 1)
    result.push(number)
}

console.log(result)

for (let i = 0; i < result.length; i++){
    lottoBox[i].innerHTML  = result[i]
}

console.log(Math.random() * 45) // 소수점 자리로 랜덤으로 뽑아줌 * 45 (45까지 숫자가 나오는듯 하다)

lottoNumber result 배열 생성

for 문으로 lottoNumber 45까지 숫자 생성

nomber에 랜덤 숫자 45까지 중 하나 뽑기 , 0이 나오면 안되니 +1 추가

lottoNumber.splice(인덱스 값에서-1, 1개만) ** 중요 //  나온 숫자가 22 일 때 인덱스값은 21이기 때문에 //

result에 push를 넣어 6개 숫자 완성

 

마지막 innerHTML 을 통해 li에 담으면 임시 로또 완성

 

저작자표시 (새창열림)

'Javascript' 카테고리의 다른 글

Javascript // 9일차 [DOM-]  (0) 2022.11.09
Javascript // 8일차 [DOM-2(Event)] // 로또  (0) 2022.11.08
Javascript// 6일차 [상속, 날짜, 삼항연산자]  (0) 2022.11.04
Javascript// 5일차 [메서드, 생성자 함수]  (0) 2022.11.03
Javascript // 4일차 [함수표현식, 콜백, 화살표함수, 객체]  (0) 2022.11.02
'Javascript' Related Articles more