함수의 기본 피라미터/리턴값/돔선택/반복문/이벤트연결/부모/자식/형제요소선택하기/DOM스타일제어
변수의 유효범위 (변수의 scope)
- 지역변수 : 블록안에서 선언된 변수 (해당 블록에서만 읽힘)
- 지역변수를 쓰는 이유 : 특정 코드블록 안에서만 전용으로 쓰이는 정보값을 저장
- 전역변수 : 블록밖에서 선언된 변수 (어디서든 읽힘)
- 전역변수를 쓰는 이유 : 복수개의 함수나 코드블록안에서 특정 값을 공유해야될때
호이스팅(hoisting)
- 블록안에서 선언된 지역변수값이 블록바깥으로 강제로 끌어올라가져서 전역변수화
- 일반함수 블록이 아닌 조건문, 반복문 안쪽에 있는 지역변수는 호이스팅이 발생
함수의 종류
- 선언적함수 : 함수의 호출위치가 자유로움
- 익명함수 : 함수의 이름이 없는 함수 (해당 함수만으로는 호출이 불가, 이벤트에 대입, 변수에 대입)
- 대입형함수 : 변수에 익명함수를 대입하는 형태 (변수에 대입된 이후 호출가능)
- 즉시실행함수 : 함수가 선언되자마자 자기 자신을 즉시 호출 (해당 함수의 코드블록을 캡슐화해서 호이스팅 방지)
- 화살표함수(arrow function) : 기존의 대입형함수의 형태를 좀더 간결하게 표현한 구문
(this객체를 생성하지 않음- 객체지향 프로그램시 편리)
plus(2, 3);
//선언적 함수
function plus(num1, num2) {
console.log(num1 + num2);
}
//대입형 함수 (변수에 익명함수 대입)
const minus = function (num1, num2) {
console.log(num1 - num2);
}
minus(5, 2);
//화살표 함수 (ES6)
const divider = (num1, num2) => console.log(num1 / num2);
divider(8, 2);
//즉시실행 함수
(function (num1, num2) {
console.log(num1 * num2);
})(2, 3);돔선택
- 단일요소 선택
const frame = document.querySelector('#wrap');
- 복수요소 선택
const boxs = document.querySelectorAll('#wrap>article');
console.log(boxs[0]);
console.log(boxs[1]);
console.log(boxs[2]);
for, 기본적인 반복문
forEach, 배열, 유사배열에 쓸수있는 전용 내장함수
const colors = ["red", "green", "blue", "aqua", "pink"];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
const classA = [
{
name: "Andy",
age: 20,
address: "seoul"
},
{
name: "Andy1",
age: 30,
address: "Daegu"
},
{
name: "Andy2",
age: 40,
address: "Busan"
},
];
for (let num = 0; num < classA.length; num++) {
console.log(classA[num].name);
}
map(es6) : 순수배열에만 쓸수 있는 전용 내장함수 (복사기능 포함: 불변성)
for of : 배열전용 반복문
const colors = ["red", "green", "blue"];
for (let color of colors) {
console.log(color);
}
for (let color of colors) console.log(color); //중괄호 생략가능
for in : 객체전용 반복문
const student1 = {
name: "david",
age: 20,
habby: "sports"
}
for (let key in student1) {
console.log(key); //name, age, habby
console.log(student1[key]); //david, 20, sports
}
for (let i = 0; i < boxs.length; i++) {
console.log(boxs[i]);
}
//forEach, 배열, 유사배열 모두 반복처리 가능
//반복기능만 있음
boxs.forEach((el, idx) => {
console.log('el', el);
console.log('idx', idx);
});
const colors = ['red', 'green', 'blue'];
//map,순수 배열만 반복처리 가능
//반복을 돌면서 해당 배열값을 새롭게 복사해서 반환 (불변성 유지: immutable)
colors.map((el, idx) => {
console.log(el);
console.log(idx);
});
for (const el of colors) {
console.log(el);
}
const student1 = {
name: 'David',
age: 20,
isFemale: false,
address: 'Seoul',
};
for (const info in student1) {
console.log(student1[info]);
}
while문
const cars = ["bmw", "volvo", "hyundai"];
for (let i = 0; i < cars.length; i++) {
console.log(cars[i]);
}
let i = 0;
while (cars[i]) {
console.log(cars[i]);
i++;
}이터러블 객체
const txt = "hello";
for (let letter of txt) {
console.log(letter);
}
//h e l(2) o이벤트 연결
<body>
<a href="#">버튼</a>
<div class="box" style="width: 100px; height: 100px; background-color: aqua"></div>
<ul>
<li>button1</li>
<li>button2</li>
<li>button3</li>
<li>button4</li>
<li>button5</li>
</ul>
<script>
const btn = document.querySelector('a');
const box = document.querySelector('.box');
const lis = document.querySelectorAll('ul li');
/*
btn.onclick = (e) => {
e.preventDefault();
console.log('엄청중요한 코드');
}
btn.addEventListener('click', (e) => {
e.preventDefault();
console.log('테스트코드')
})
*/
box.onmouseenter = () => {
console.log('You mouseentered..');
}
box.onmouseleave = () => {
console.log('You mouseleaved..');
}
lis.forEach((li, idx) => {
li.addEventListener('click', () => {
console.log(idx);
})
});
//이벤트문과 함수 분리
//선언적 함수 호출시 인수전달이 필요없는 경우
//btn.addEventListener('click', test);
//선언적 함수 호출시 인수전달해야 되는 경우는 다시한번 wrapping 함수로 패키징해서 호출
btn.addEventListener('click', () => test('Emily'));
function test(name) {
console.log('Hello ' + name);
}
</script>
</body>부모,자식,형제요소 선택하기
<body>
<section>
<article>box1</article>
<article>box2</article>
<article>box3</article>
<ul>
<li>button1</li>
<li class="btn">button2</li>
<li>button3</li>
</ul>
</section>
<script>
const section = document.querySelector('section');
//직계 자식요소를 유사배열로 반환
const article = section.children;
//원하는 자식요소만 다시 querySelector로 탐색
const ul = section.querySelector('ul');
const btn = section.querySelector('.btn');
console.log(btn);
//현재요소기준 이전 형제요소
console.log(btn.previousElementSibling);
//현재요소기준 다음 형제요소
console.log(btn.nextElementSibling);
//현재요소기준 직계 부모요소
console.log(btn.parentElement);
//현재요소기준 조상요소
console.log(btn.closest('section'))
</script>
</body>DOM스타일 제어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
article {
width: 200px;
height: 200px;
background-color: hotpink;
margin: 50px;
transition: 1s;
}
</style>
<body>
<button>getColor</button>
<article></article>
<script>
/*
기본적으로 DOM객체의 style값은 null로 비워져 있음
style값을 수정해서 DOM의 스타일을 변경은 가능하지만
일반 css로 적용되어 있는 원래 스타일값은 style 프로퍼티로 반환이 안됨
getComputedStyle(DOM)
- 기존 css에 연결되어 있는 스타일값을 구함
- 실제 CSS파일에 접근해서 적용되어 있는 스타일값을 구하는게 아니라
- 현재 브라우저에 랜더링되고 있는 스타일값을 다시 연산해서 해당 값을 반환
*/
const box = document.querySelector('article');
const btn = document.querySelector('button');
box.addEventListener('click', () => {
box.style.backgroundColor = 'aqua';
box.style.transform = 'rotate(45deg)';
})
btn.addEventListener('click', () => {
const bg = getComputedStyle(box)['background-color'];
console.log(bg);
})
</script>
</body>
</html>