Dev/JAVASCRIPT (24) 썸네일형 리스트형 Javascript JS DOM & EVENT #2 부모, 자식, 형제 노드 부모 노드 접근 const red = document.getElementById('red'); 모든 부모 노드 - red.parentNode; html요소인 모든 부모 노드 - parentElement; 자식 노드 접근 const ul = document.getElementById('id'); 모든 자식 노드 리스트 - ul.childNodes; html요소인 자식 노드 리스트 - ul.children; 첫번째 자식 노드 - ul.firstChild; 마지막 자식 노드 - ul.lastChild; 첫번째 html요소인 자식 노드 - ul.firstElementChild; 마지막 html요소인 자식 노드 - ul.lastElementChild; 형제 노드 접근 const blue = document.get.. Javascript JS DOM & EVENT #1 노드에 접근하기 DOM (Document Object Model) - 문서 객체 모델 각 html 요소들을 트리형태로 된 데이터 구조로 만듬 DOM이 완성되고 나면 JS같은 프로그래밍 언어가 DOM을 제어할 수 있게됨 document.documentElement - 화면의 모든 html 요소를 가져옴 document.getElementById('id') - id로 해당하는 html 요소를 가져옴 document.getElementsByTagName('tagName') - 태그명으로 해당하는 html 요소를 객체로 가져옴 document.getElementsByClassName('class명') - class명으로 해당하는 html 요소를 객체로 가져옴 document.getElementsByName('태그 name 명'.. Javascript JS 제네레이터 (generator) 제네레이터 (generator) - 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능 // Generator // .next() .return() .throw() // yield 로 실행할 순서를 정할 수 있다. // 처음 .next() 를 통해 다음 yield 전까지 실행 // 중간에 .return('value') 를 통해 value와 done 값을 true로 바꿀수 있다. 그 이후로는 .next()가 먹히지 않는다 // .return 과 마찬가지로 .throw('error') 를 통해 에러 메세지를 출력 가능하고 그후로는 .next()가 먹히지 않는다 // .throw의 경우 try catch 문으로 감싸야한다. function* fn() { console.log(1); yield 1; consol.. Javascript JS async / await async // 함수앞에 async를 붙이면 Promise로 반환된다 // 따라서 getName() 함수는 .then() .catch() .finally() 사용이 가능하다. async function getName() { return "Mike"; } getName().then(name => console.log(name)); // return 값을 Promise로 사용 가능 async function getName() { return Promise.resolve("Tom"); } getName().then(name => console.log(name)); async function getName() { return new Promise((res, rej) => { res("James"); }); } .. Javascript JS 콜백함수 (callback) 콜백함수 - 함수의 파라미터로 들어가 호출되는 함수 ex 1) const callback = () => console.log("콜백함수"); // 혼자서 실행 X const fn = callback => callback(); fn(callback); // fn 함수에 파라미터로 callbackFn이 들어가고 함수를 실행 결과, "콜백함수" ex2) function fn(callback) { callback(); } fn(() => console.log("콜백함수")); ex3) words = ['spray','limit','elite','exuberant','destruction','present']; function myFilter(words, callback) { var result = []; for.. Javascript JS 클래스(class) Class - ES6 에 추가된 스펙 class User { constructor(name, age) { this.name = name; this.age = age; } showName() { console.log(this.name); } } const user1 = new User("Mike", 30); extends - 다른 클래스 상속 class Car { constructor(color) { this.color = color; this.wheels = 4; } driver() { console.log("drive..."); } stop() { console.log("STOP !"); } } class Bmw extends Car { park() { console.log("PARK"); } } co.. Javascript JS 상속, 프로토타입(prototype) __proto__ // __proto__ / prototype 상속의 개념 // 객체 내부에서 프로퍼티를 찾고 없으면 자동으로 __proto__ 탐색 const car = { wheels: 4, drive() { console.log("drive..."); }, }; const Bmw = function (color) { this.color = color; }; const x5 = new Bmw("red"); const z4 = new Bmw("blue"); x5.__proto__ = car; z4.__proto__ = car; prototype // prototype을 이용한 같은 방법 const Bmw = function (color) { this.color = color; }; Bmw.prototy.. Javascript JS call / apply / bind call() - 매개변수를 직접 받음 const mike = { name: "Mike" } const Tom = { name: "Tom" } function showThisName() { console.log(this.name); } showThisName(); // 아무 결과도 업음 showThisName.call(mike); // this가 mike가 되면서 this.name 결과, "Mike" function update(birthYear, occupation) { this.birthYear = birthYear; this.occupation= occupation; } update.call(mike, 1999, "singer"); console.log(mike); // mike 객체가 업데이트 됨 .. Javascript JS setTimeout / setInterval //setTimeout //(함수,시간,인수(생략가능)) function fn() { console.log(3); } setTimeout(fn, 3000); /* setTimeout에 직접 함수를 선언해도 됨 setTimeout(function(){ console.log(3) }, 3000); const tId = function fn() { console.log(3); } tId에 해당하는 스케줄링 취소 clearTimeout(tId); */ //setInterval //(함수,시간,인수(생략가능)) let num = 0; function showTime() { console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`); if (num > 5){ clearInterval(tId).. Javascript JS arguments, 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) arguments - 나머지 매개변수가 없을때 사용했다. 지금은 잘 사용하지 않음 함수로 넘어 온 모든 인수에 접근 함수내에서 이용 가능한 지역 변수 length / index Array 형태의 객체 배열의 내장 메서드 없음 (forEach, map) 사용 불가 // arguments 사용 function showName(name) { console.log(arguments.length); console.log(arguments[0]); console.log(arguments[1]); } showName('Mike', 'Tom'); // 각각 2, 'Mike', 'Tom' 이 출력됨 나머지 매개변수(Rest parameters) - 주의 나머지 매개변수는 항상 끝에 들어가야함. // 나머지 매개변수 //.. 이전 1 2 3 다음
