자바스크립트의 핵심
- 객체를 잘 사용한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열</title>
<style>
.plain{
font-size: 20px;
font-weight: bold;
}
.err {
color: red'
}
</style>
</head>
<body>
<div class="plain err">잘못된 값입니다</class>
<button onclick ="f();">글자색 바꾸기</button>
</div>
<script>
const f = () => {
let myDiv = document.querySelector('.plain');
console.log([myDiv]);
// myDiv.className = 'xxx';
myDiv.classList.add('err');
}
let ar = [10, 20, 30];
ar.push('배상엽');
console.log(ar);
</script>
</body>
</html>배열
let ar = [10, 20, 30];
- 배열에 값을 새롭게 추가할 때는 Array타입 객체 안에 들어있는 push 메소드를 사용한다.
ex) ar.push(500);
배열 속에 값을 삭제할 때는 pop 메소드를 사용한다.
유사배열(배열처럼 여러개의 값을 저장하기 위해 만든 것인데, 특수한 경우에 사용하기 위해 만든 타입들 ..)
DOMTokenList 타입
- 배열과 같이 여러개의 값을 저장할 때 사용
(value라는 key값이 자동으로 추가됨)
- 새로운 값을 추가하고 싶으면 add 메소드를 사용한다.
- 객체의 classList라는 key 값이 바로 DOMTokenList 타입이다.
- 기존에 있는 요소를 삭제하고 싶으면 remove메소드를 사용한다.
<div class="a b c"></div>
myDiv.classList = ['a', 'b', 'c'];
d라는 클래스, e라는 클래스랑 f라는 클래스 세 개 동시에
['a', 'b', 'c', 'd', 'e', 'f']
존재하는 태그를 조회, 수정
- 없는 태그를 만들거나 기존에 있는 태그를 삭제
1. 이 태그를 만들긴 할 것인데 어떤 위치에 만들까?
html 태그들은 tree 구조로 관리(포함 관계가 있다)가 되고 있다.
<div id = 'a'>
<h1>안녕</h1>
<div id ='b'>
글자
<p>내용
<><>
</div>
</div>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열</title>
<style>
.plain{
font-size: 20px;
font-weight: bold;
}
.err {
color: red'
}
</style>
</head>
<body>
<div class="plain err">잘못된 값입니다</class>
<button onclick ="f();">글자색 바꾸기</button>
</div>
<script>
const f = () => {
let myDiv = document.querySelector('.plain');
console.log([myDiv]);
// myDiv.className = 'xxx';
myDiv.classList.add('err');
}
let ar = [10, 20, 30];
ar.push('배상엽');
console.log(ar);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>트리구조</title>
</head>
<body>
<h1 id="a">
안녕
<span>
하세
</span>
요
</h1>
<div id="b">
글자
<h2>반갑습니다</h2>
글자
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<button onclick="f()">클릭하시면 p태그가 div#b 에 추가될거에요</button>
<script>
const f = ()=>{
let newP = document.createElement('p');
newP.textContent = '새로만든 p태그 입니다';
newP.classList.add('a');
let parent = document.querySelector('#b');
console.log([parent])
// parent.appendChild(newP); 해당 태그의 마지막 자식으로
// parent.prepend('배상엽'); //해당 태그의 가장 첫자식
// (누구를, 어디앞에) 순서
// parent.insertBefore(newP, parent.children[0]);
// parent.append('홍길동');
}
console.log([document]);
let target = document.querySelector('#b');
console.log(target.childNodes);
console.log(target.children);
</script>
</body>
</html>존재하는 태그 객체를 조회: document.querySelector() / document.getElement ...()
함수들을 통해 태그를 가져오고, 그 태그 객체의 key값 속에 들어있는 value를 사용
존재하는 태그 객체를 수정 : 태그를 가져오고, 태그 객체의 key를 =(대입 연산자) 앞에 써서 속에 들어가는 value를 다른 값으로 수정
추가: 추가하고자 하는 태그 객체를 createElement()를 통해 만든다
그 후 부모를 찾아와서 appendChild ... 등의 함수를 통해 적절한 위치에 추가
삭제: 부모를 찾아서 removeChild를 사용하여 자식 삭제
(텍스트인지, 태그 객체인지에 따라 구분해서 사용)
반복문(반복되는 작업을 쉽게 수행)
for문(반복의 횟수를 알 때)
코드1;
코드2;
for(초기식; 조건식; 증감식) {
코드4;
코드5;
}
// 초기식; 조건식; 증감식;
for(let a = 0; a < 3 ; a = a + 1) {
컴퓨터는 for문을 만나면
1. 초기식을 실행한다.
2. 조건식을 확인하고
2-1. 조건식이 true라면 for문 안 쪽으로 들어와서 코드를 차례로 수행한다.
그리고 for문이 끝나면 증감식을 실행한다. 조건식을 확인한다. (2번으로)
2-2. 조건식이 false라면 for문 반복 종료, 다음줄 실행
while문(반복의 횟수를 모르지만 조건을 알 때)
'UIUX Full-Stack Developer' 카테고리의 다른 글
| [0730] 스프링부트 SPRINGBOOT 개념정리 (0) | 2023.07.30 |
|---|---|
| [0728] 자바스크립트 DAY10 (0) | 2023.07.28 |
| [0726] React Router (0) | 2023.07.26 |
| [0726] Typescript (0) | 2023.07.26 |
| [0726] React 공부 (12) | 2023.07.26 |