오늘 내가 배운 것
1. DOM 과 BOM
2. 배열
- 배열의 기초
- 배열 선택하기, 배열 길이 구하기
- 배열에 요소 추가하기
- 1~100까지를 담은 배열 만들기
- 배열 안에 요소를 빼기
3. 간단한 알고리즘 문제
- 선형검색(완전탐색) (Linear search)
4. 로또 번호 생성기
1. DOM 과 BOM
DOM (문서 객체 모델)
DOM = Document Object Model 의 약자이고, 여기서 Document는 HTML을 말한다.
DOM은 자바스크립트로 html을 조작하는 기능을 `브라우저`가 구현한 것
브라우저 기본적으로 HTML, CSS, JS를 해석하는 능력이 있다.
브라우저가 js를 이용해서 HTML, CSS를 조작할 수 있는 기능을 `DOM` 이라고 한다.
BOM (브라우저 객체 모델)
BOM = Brower Object Model 의 약자, 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체
`navigator` 객체는 브라우저와 운영체제에 대한 정보를 제공한다.
`location` 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해 준다.
`alert`/`confirm`/`prompt` 역시 BOM의 일부입니다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이다.
Web APIs(Application Programming interface) : 비동기로 돌아간다.
- DOM : Document object Model
- BOM : Brower object Model
JavaScript 의 표준이 아니다
* interface : 어떠한 동작을 원할 때 그 동작을 하는 기능을 만드는 것.
console.log(this)
console.log(window)
console.log(this === window) // t / 같은 객체를 바라보고 있다. //참조형window 객체 :
1. 브라우저 창(browser window)을 대변하고, 이를 제어할 수 있는 메서드를 제공
2. 자바스크립트 코드의 전역 객체이다.
`console.log(window)`를 출력해보면 console창에 window 객체에 대한 메서드가 많이 나오는데
그중에 document 안에 있는 기능이 다 DOM의 기능이다.
document 경로를 선택할 때 최상위인 window부터
window.document.getElementById()가 기본인데 window는 `생략 가능`하다.
<!-- html에 작성한 데이터 -->
<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>const title = window.document.getElementById("title")
// 메서드 // 리턴값 : html 엘리먼트 or null
// 참조 형태
// title에 대입시킨다.
console.log(title) //title 의 출력값 확인하고
title.innerHTML = 'DOM에 오신 것을 환영합니다.' // title 안에 내용을 바꿔서 호출 한다.
// 도큐먼트 뒤에 s 있으면 복수형
const sp = document.getElementsByTagName('span') // span이라는 태그를 다 선택
console.log(sp) // 배열로 리턴해줌..
//body 내에 h2에 span 을 선택하려면
const domTitle = document.getElementById("DOM-title") //domTitle에 id로 할당한 DOM-title을 대입한다.
console.log(domTitle)
const spList = domTitle.getElementsByTagName('span') // #DOM-title 안에 span 태그를 선택하여 spList에 대입
console.log(spList.length) // spList의 배열의 길이 확인하기문제 1
코드 짜기 전 순서 정리
span1 3개를 span1-1, span1-2, span1-3으로 바꿔주기.
1. 0~2까지 반복하는 for문
2. spList Element를 각각 출력
3. span 1-1 span 1-2 span 1-3으로 바꿀 것이다.
for(i = 0 ; i < spList.length ; i ++){
console.log(i) // 1.
console.log(spList[1]) //2.
spList[i].innerHTML = 'span1-' + (i+1) //3.
}
// 만약 클래스를 지정했다면
const spList2 = domTitle.getElementsByClassName('sp') //className도 여러개 선택할 수 있기 때문에 -s 복수형
for(i=0; i < spList2.length; i++){
spList2[i].innerHTML = "span1-" + (i+1);
}HTML- id, class 호출하기
//바디 안에 id or class를 getElement를 이용해서 호출하는 방법
document.getElementById()
document.getElementsByClassName()
//`getElementById` : ELement의 id값을 호출 하기 위해 사용한다. id는 1개만 선택할 수 있음.
//똑같은 이름의 id로 지정할 수 있지만 getElement로 호출 시 중복된 id값은 제일 앞에 있는 id 만 호출이 된다.
HTML에서 <li> 를 선택하는 방법
<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>//방법 1 : id를 부여한 태그를 새로운 변수에 대입하여 호출하고,
// 그 변수를 시작해서 li값을 호출한다.2단계이기 때문에 코드도 길어지고, 가독성이 안좋다.
const gnb2 = document.getElementById("gnb")
const list2 = gnb2.getElementsByTagName("li")
//방법 2 : 이게 제일 많이 쓰이는 방법이 될텐데, querySelector을 이용하여 작성한다.
// CSS에서 사용하던 문법, 직관적이라 보기 편하다,
const list = document.querySelectorAll('#gnb > li') //파라미터는 string 타입!!!
//li 전체를 선택하고 싶었기 때문에 querySelectorAll 이고 1개만 선택하고 싶을 땐 querySelector 로 작성한다.(s 없음.)
2. 배열
배열의 기초
// 배열
const arr = []
const arr2 = []
console.log( arr===arr2)//False 참조형이기 때문 두 배열 모두 안에 요소가 비었지만 같지않다.배열 하나에 여러 가지 형태의 데이터 타입을 사용하는 것은 좋지 않다. (사용하는 것 자체는 에러 없음.)
배열 선택하기, 배열 길이 구하기
//index 0 1 2
const arr = ["apple", "banana", "orange"]
// apple, orange, banana 를 console에 출력하고, 배열의 길이를 구하시오
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
console.log(arr.length)
// apple, banana, orange를 for문을 이용하여 console 에 출력하시오.
for(i=0; i < arr.length; i++){
console.log(arr[i])
}배열에 요소 추가하기
push() : 배열의 마지막에 추가하여 준다.
//방법 1
arr[3] = 'melon'
//방법 2
arr.push("melon")
1~100까지를 담은 배열 만들기
// 1부터 100까지 배열로 표현하기
// 빈 배열 length : 0
const arr3 = []
//방법 1
for(i=0; i<100 ; i++){
arr3[i] = i+1
}
console.log(arr3)
// 방법 2
for( i=1; i <=100; i++){
arr3.push(i)
}
console.log(arr3)
배열 안에 요소를 빼기
1. pop() : 배열의 마지막 요소를 삭제한다.
// melon 삭제
const arr = ["apple", "banana", "orange", "melon"]
arr.pop() // const arr = ["apple", "banana", "orange"]
console.log(arr)
arr.push("melon") // const arr = ["apple", "banana", "orange", "melon"]
2. splice(A,B) : 배열에서 중간에 있는 요소를 뺀다.
parameter A : 삭제할 요소의 인덱스 값 (시작점)
parameter B : 시작점부터 삭제할 요소의 개수
const arr4 = [1,2,3,4,5,6]
arr4.splice(2,1) // 인덱스 2번 부터 1개 (인덱스 2번만 삭제)
console.lol(arr4) // [1,2,4,5,6] 배열 자체의 값이 변한다.3.slice(A,B) : 보이고 싶은 값을 선택한다.
parameter A : 보일 인덱스 번호 (시작점)
parameter B : 보일 인덱스 번호 (종료점 - 미만!)
const arr4 = [1,2,3,4,5,6]
let arr5 = arr4.slice(2,5) // 인덱스2번 ~ 인덱스 4번까지 (5미만)
console.log(arr4) // [1,2,3,4,5,6]
console.log(arr5) // [3, 4, 5]arr4의 데이터를 잘라서 arr5에 대입시켜 출력한 것이므로 arr4의 값은 변화가 없다
parameter B의 값이 `미만`임을 주의하자..
3. 간단한 알고리즘 문제
선형검색(완전탐색) (Linear search)
내가 찾고 싶은 배열에 모든 값을 다 확인한다.
//기본문법
function linearSearch(array, target){
const length = array.length;
for(i = 0; i < length; i++){
if(array[i] === target){
return i
}
}
return -1 // 반복문이 끝날 때까지 없었다면 -1 이 나와야하기 때문에 반복문이 끝난 곳에 return
}
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 //인덱스 4 : 5번째
console.log(search2) //8 //인덱스 8 : 9번째
console.log(search3) //3 // 2개 있지만 지금 반복문이 앞에서부터 시작하고 그게 처음 값을 확인하면 리턴 하고 함수 종료
console.log(search4) //-1 // 없다.반환된 i 값은 index의 값이므로 0부터 라는 것을 까먹지 말자..
4. 로또 번호 생성기
로또 번호 생성기
//핵심 코드
//0.0~0.9 랜던값으로 뽑는다.
console.log(Math.random() * 10)
// 0.0~0.9 사이의 값 * 45 한 후 소수점은 다 버린다.
console.log(Math.floor(Math.random() * 45))코드 짜기 전 순서 정리
1. 1~45까지 배열을 담는다.
2. 배열 6개 짜리를 만든다.
3. 랜덤 숫자로 6개를 뽑는다.
<head>
<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: 85px;
}
</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>const lottoNumber = []
const result = []
const lottoBox = document.querySelectorAll("#gnb > li") // string 타입
//lottoNumber 배열에 1~45까지 입력
for(let i=1 ; i <=45 ; i++){
lottoNumber.push(i)
}
// 0.0~0.9 사이의 값 * 45 한 후 소수점은 다 버린다.
// 로또는 1부터 선택 가능하므로 +1을 해서 최솟값을 1로 잡아준다.
for( i=0; i < 6; i++){
const number = Math.floor(Math.random() * 45) + 1
lottoNumber[number-1] // lottoNumber의 요소를 선택하려면 인덱스번호를 선택해야한다.
// number는 1부터 시작하기 때문에 인덱스 번호를 호출하기 위해선
// -1 을 해준다.
lottoNumber.splice(number-1, 1) // 인덱스번호부터 1개만 보여주기 위함
result.push(number) // result의 마지막에 요소를 추가시켜줌.
}
for(let i = 0; i < result.length; i++){
lottoBox[i].innerHTML = result[i] // result로 나온 요소를 인덱스번호 0~5까지 값을
// lottoBox의 인덱스0~5번 요소에 바꿔줌
}
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221109 JavaScript - form을 이용한 이벤트활용 (1) | 2022.11.10 |
|---|---|
| 221108 JavaScript - 이벤트 (EVENT) (0) | 2022.11.09 |
| 221104 - JavaScript - prototype, 메서드 Date, indexOf, 삼항연산자 (0) | 2022.11.05 |
| 221103 JavaScript - 메서드, this, 생성자함수, getter, setter, 피보나치 수열, 메모이제이션 (1) | 2022.11.04 |
| 221102 JavaScript - 객체 (0) | 2022.11.03 |
댓글