-
변수의 유효범위 (변수의 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>
'🐶 etc > 2022기록' 카테고리의 다른 글
객체지향의 개념 (생성자함수, prototype, ES5) (0) 2022.11.02 console.dir(btn)/addEventListener (0) 2022.10.26 for문▶forEach/maps/for of/for in (0) 2022.10.26 자바스크립트 기초문법▶변수/자료형/연산자/조건문/함수 (0) 2022.10.26 자바스크립트 엔진의 동작 원리 (0) 2022.10.26 댓글
