Element.classList
웹 요소로부터 클래스 콜랙션을 반환하는 읽기 전용 속성이다.
선택한 요소에서 클래스를 읽어들이게 되면 클래스 목록 객체를 확인할 수 있다.
이 때 각각의 클래스 값에 0번부터 번호가 부여된다.
<p class="hello greet good">
안녕하세요
</p>const p = document.querySelector('p')
console.log(p.classList)
// 실행결과는 {0: 'hello', 1: 'greet', 2: 'good'}반환된 클래스 컬렉션은 유용한 메소드를 다수 포함하고 있는데 아래 표와 같다.
여기서 토글링이란 있으면 제거하고 없으면 만든다는 것을 의미한다.
| 메소드 | 기능 | 예시 |
| add | 지정한 클래스 값 추가 | add(”new_class”) |
| remove | 지정한 클래스 값 제거 | remove(”old_class”) |
| item | 인덱스를 이용해 클래스 값 반환 | item(1) |
| toggle | 클래스 값 토글링 | toggle(”some_value”) |
| contains | 지정한 클래스 값 존재 여부 확인 | contains(”is_contains”) |
| replace | 기존 클래스를 새 클래스로 대체 | replace(”old”, “new”) |
주요 메소드를 사용해보기 위해 html에다가 현재 시간 가져와서 표시해보기 실습!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 실습해보자</title>
<style>
.text {
color: red;
}
</style>
</head>
<body>
<h1 class="text heading">실험용 텍스트 </h1>
<button id="add">add</button>
<button id="remove">remove</button>
<button id="toggle">toggle</button>
<script src="script3.js"></script>
</body>
</html>const h1 = document.querySelector('h1')
const addBtn = document.querySelector('#add')
const removeBtn = document.querySelector('#remove')
const toggleBtn = document.querySelector('#toggle')
// text class 추가로 글자색 black -> red
addBtn.addEventListener('click', function(){
h1.classList.add('text')
})
// text class 삭제로 글자색 red -> black
removeBtn.addEventListener('click', function(){
h1.classList.remove('text')
})
// 글자색 red -> black, black -> red
toggleBtn.addEventListener('click', function(){
h1.classList.toggle('text')
})
배열
여러 개의 데이터를 보관하는 ‘주머니’ 역할을 하는 객체이다.
배열을 사용하면 이전과는 다르게 여러 개의 데이터를 대입할 수 있다.
let numbers = [1, 2, 3]이런 배열을 만드는 데에는 배열 리터럴로 생성하기, Array 생성자로 생성하기 두 가지 방법이 존재한다.
이런 두 가지 생성 방법에 큰 차이는 없기 때문에 마음에 드는 방법으로 배열 생성해서 활용하면 된다.
// 배열 리터럴로 생성
const arr = [1, 2, 3, 4, 5, 6, 7]
// 기본 내장 생성자 Array로 생성
const arr = new Array(1, 2, 3, 4, 5, 6, 7)이런 배열에는 몇 가지 특징이 존재하는데 아래와 같다.
- 배열에 포함된 값 하나하나를 ‘배열 요소’라고 한다.
- 각 배열 요소는 왼쪽부터 순서가 매겨지는데 이를 ‘인덱스 번호’라고 하고 0부터 시작한다.
- 배열 요소는 0개부터 n개까지 원하는 개수만큼 포함시킬 수 있다.
- 숫자, 문자열, 객체 등 다양한 유형의 데이터를 포함시킬 수 있다.
배열이 만들어진 다음에는 대괄호 연산자를 이용해서 특정 인덱스 번호의 배열 요소를 참조할 수 있다.
참조할 수 있다는 것은 곧 읽거나 쓸 수 있다는 것을 의미한다.
const fruit = ["apple", "grape", "mango", "banana", "orange", "pear"]
console.log(fruit[0]) // apple
console.log(fruit[3]) // banana
console.log(fruit[5]) // pear
fruit[0] = "pineapple"
console.log(fruit[0]) // pineappleMath 객체
Math는 수와 관련된 속성과 메소드를 가진 내장 객체이다. 생성자가 아니다!!
// 잘못된 사용 예
new Math()
// 적절한 사용 예
Math.메소드()
Math.속성Math 객체 역시 자주 사용되는 메소드/속성이 존재하는데 몇 가지만 살펴보면 아래 표와 같다.
| 메소드 또는 속성 | 기능 예시 | |
| abs | 주어진 숫자의 절댓값을 반환 | |
| floor | 주어진 숫자보다 작거나 같은 수 중에서 가장 큰 정수를 반환 | |
| pow | 주어진 첫 번째 숫자에 두 번째 숫자만큼 제곱해서 반환 | |
| random | 0 이상 1 이하의 난수를 반환 | |
| sign | 주어진 숫자가 양의 수인지 음의 수인지 나타내는 부호를 반환 | |
| sqrt | 주어진 숫자의 제곱근을 반환 | |
// random
console.log(Math.random()) //0 ~ 1 사이 난수.
console.log(Math.random() * 10) //0 ~ 10 사이 난수.
// 0 ~ 10 사이 난수 하나 생성해서 변수에 값 대입하고 floor
let randomNumber = Math.floor(Math.random() * 10)
console.log(randomNumber)
// pow
let number = 5
console.log(Math.pow(number, 2)) // 25
console.log(Math.pow(number, 3)) // 125
// sqrt
let powNum = Math.pow(10, 4) // 10000
console.log(Math.sqrt(powNum)) // 100
// sign
let signPlus = Math.sign(3)
console.log(signPlus) // 양수라서 1 반환
let signMinus = Math.sign(-7)
console.log(signMinus) // 음수라서 -1 반환
https://www.inflearn.com/course/입문자-자바스크립트-기초강의/dashboard
입문자를 위한 자바스크립트 기초 강의 - 인프런 | 강의
웹 사이트를 움직이는 프로그래밍 언어, 자바스크립트의 주요 개념과 문법, 그리고 활용 방법을 소개합니다. 이제 막 HTML/CSS 걸음마를 떼신 분들도 부담 없이 소화하실 수 있는, 자바스크립트 입
www.inflearn.com
'Frontend' 카테고리의 다른 글
| 입문자를 위한 자바스크립트 기초 강의_미니플젝04 (0) | 2022.08.15 |
|---|---|
| 입문자를 위한 자바스크립트 기초 강의_미니플젝03 (0) | 2022.08.13 |
| 입문자를 위한 자바스크립트 기초 강의_미니플젝01 (0) | 2022.07.23 |
| 입문자를 위한 자바스크립트 기초 강의_JS기초04 (0) | 2022.07.23 |
| 입문자를 위한 자바스크립트 기초 강의_JS기초03 (0) | 2022.07.12 |