[생활코딩] #로또번호 추첨하기 #입문자를 위한 자바스크립트 기초 강의

 

 

✅ Element.classList

 

1️⃣ Element.classList

 

웹 요소(Element)로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다.

 

<p class = "hello greet good">
	안녕하세요
</p>

const p = document.querySelector("p")
console.log(p.classList)

콘솔에 출력된 모습

 

2️⃣ 메소드

 

반환되는 클래스 콜렉션은 유용한 메소드를 다수 포함하고 있다.

 

출처 : 생활코딩 강의

 

3️⃣ 정리

 

- clssList는 요소로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다.

- 반환된 클래스 콜렉션은 유용한 메소드를 다수 포함하고 있다.

- 일반적으로 toggle은 있으면 제거하고, 없으면 생성한다는 의미이다.

 

 

✅ 배열 개념과 사용법

 

1️⃣ 배열이란

 

배열은 여러 개의 데이터를 보관하는 "주머니" 역할을 하는 객체이다.

이전까지 변수(또는 상수)에는 데이터를 하나씩만 대입할 수 있었지만, 배열을 사용하면 여러 개의 데이터를 대입할 수 있다.

 

let number = 3; // 숫자 한 개 대입!
let numbers = [1, 2, 3] // 배열을 이용해 숫자 세 개 대입!

 

2️⃣ 배열을 만드는 두 가지 방법

 

첫 번째 방법, 배열 리터럴로 생성하기!

이 경우 쉼표로 구분한 값들을 대괄호로 묶어서 표현한다.

 

const arr = [1. 2. 3. 4. 5. 6. 7, 8]

 

 

두 번째 방법, Array 생성자로 생성하기!

배열을 만드는 데 사용하는 기본 내장 생성자가 존재한다.

 

 

const arr = new Array(1, 2, 3, 4, 5, 6, 7, 8)

 

3️⃣ 배열의 특징

 

- 배열에 포함된 값 하나하나를 "배열 요소"라고 한다.

- 각 배열 요소는 왼쪽부터 순서(번호)가 매겨진다. 이를 "인덱스 번호"라 한다.

- 인덱스 번호는 0부터 시작한다.

- 배열 요소 수는 원하는 개수만큼 포함시킬 수 있으며, 0개일 수도 있다.

- 다양한 유형의 데이터를 포함할 수 있다. 숫자, 문자열, 객체 등 ..

 

 

4️⃣ 인덱스 번호, 중요!!

 

대괄호([]) 연산자를 이용해서 특정 인덱스 번호의 배열 요소를 참조할 수 있다. 참조할 수 있다는 것은 곧 읽거나 쓸 수 있다는 것을 의미한다.

 

const ohMyGirl = ["효정", "미미", "유아", "승희", "지호", "비니", "아린"]

console.log(ohMyGirl[0]) // 효정
console.log(ohMyGirl[1]) // 미미
console.log(ohMyGirl[9]) // undefined

ohMyGirl[0] = "갓효정" // 원래 효정이었으나, 갓효정으로 변경!
console.log(ohMyGirl[0]) // 갓효정

const HOT = ["문희준", "장우혁", "강타", "토니안", "이재원"]
let index = 7
console.log(HOT[INDEX]) // undefined

let index = 3
console.log(HOT[INDEX]) // 토니안
HOT[INDEX]) = "토니"
console.log(HOT[INDEX]) // 토니

 

 

5️⃣ 내용 정리

 

- 배열은 여러 개의 데이터를 선형적으로 보관하는 객체이다.

- 배열 리터럴 또는 배열 생성자를 이용해 생성할 수 있다

- 배열 요소는 원하는 개수만큼 포함할 수 있다.

 

 

✅ 배열 메소드

 

배열은 객체이다. 메소드가 다수 정의되어 있다(속성도)

 

출처 : 생활코딩 강의

 

종류가 엄청 많아서 다 보는 것은 불가능하다. 필요할 때마다 추가로 보는 것이 좋다.

 

const pet = ["강아지", "고양이", "앵무새"]

pet.splice(0) // 0번째부터 다 지워라
pet.splice(0, 1) // 0번째부터 1개 지워라
pet.splice(0, 1, "호랑이") // 0번째부터 1개 지우고 그 자리에 호랑이를 집어넣어라


// 배열 요소 수만큼 반환해라
// forEach는 함수를 인자로 받는다.
pet.forEach(Function(){
	console.log("!")  // ! 가 세개 반환된다.
})

// forEach는 순서대로 호출한다. 첫번째는 강아지, 두번재는 고양이 이런식으로
// 따라서 매개변수가 필요하다.
pet.forEach(Function(param){
	console.log(param)  // 강아지, 고양이, 앵무새 순서대로 출력된다.
})

 

 

✅ Math 객체

 

1️⃣ 내장 객체 Math

 

Math는 수와 관련된 속성과 메소드를 가진 내장 객체이다! 생성자 아님 주의.

 

// 이렇게 하면 안된다.
new Math() // 에러난다.

// 이렇게 해야 한다.
Math.메소드()
Math.속성

 

2️⃣ 유용한 메소드들

 

출처 : 생활코딩 강의

 

// 0.25~~~ , 0.34~~~ 할 때마다 출력값이 달라진다.
// 0이상 1미만으로 1은 절대 나오지 않는다.
console.log(Math.random())

// 10보다 작은 숫자를 보고 싶으면 곱하면 된다.
console.log(Math.random() * 10)

// 주어진 숫자보다 작거나 같은 수 중에서 가장 큰 정수를 반환
let randomNumber = Math(Math.random() * 10)
console.log(randomNumber)

// 100의 5제곱 구하는 법, 파워라고 읽는다.
let number = 100
console.log(Math.pow(100, 5)) // 10000000000

// 제곱근을 구하는 법
let powNum = Math.pow(10,6)  // 1000000
console.log(Math.sqrt(powNum)) // 1000