자바스크립트에서 이벤트핸들러를 등록하는 방법은 2가지다. 1. 이벤트타깃에 프로퍼티 지정 1-1. onclick, onchange, onload 이런 st.: 이 기법은 널리 쓰이는 이벤트타입에 대해 모든 브라우저가 지원한다. 하지만 이 기법은 각 이벤트타입에 대해 하나의 핸들러만 등록됨을 가정하고 있다. 다음은 window객체의 onload 프로퍼티에 함수를 지정한 예이다. 이 함수가 이벤트핸들러가 된다. window.onload = function(){ console.log('test'); } 1-2. 이벤트핸들러 프로퍼티로 핸들러 지정하기: HTML의 속성을 통해서 지정하는 것이다. Click here 2. 이벤트타깃의 메서드에 이벤드핸들러 지정 2-1. addEventListener(): 파라미터..

자바스크립트의 함수사용방법 1. 함수정의표현식(함수선언 후 호출) 2. 함수표현식(변수에 할당 가능) 2-1. 익명함수(Anonymous function) 2-2. 즉시실행함수(Immediately invoked function) 익명함수와 즉시실행함수의 목적은 무엇인가? 다른 언어에서는 반복적으로 실행되는 코드의 블록을 function으로 정의해서 사용했다. 자바스크립트에서는 함수의 블록을 통해 변수의 scope이 제어되며, 인자로서 함수를 사용하는 경우도 많다. 그래서 반복적으로 실행되는 코드보다는 일회성으로 사용되는 코드를 함수로 정의하는 경우가 많다. 이를 지원하는 방법이 익명함수, 즉시실행함수이다. 함수정의표현식으로 정의된 함수의 선언문은 호이스팅이 된다. 함수 선언문 위에서 함수를 호출해도 문..

* 하기 표에서는 변수생성시 1. 선언, 2.초기화, 3.값할당의 순서만 언급하였지만, TDZ를 포함한 자세한 내용은 https://junhobaik.github.io/js-let-cont-hoisting/ 에서 확인하도록 하자. var function scope(function(){} 속의 {}curly brackets 안에서 선언되어도 그 {}의 바깥에서도 유효함). 변수생성시 1. 선언 + 2. 초기화(메모리할당) 이 동시에 이루어짐. 초기화를 마친 변수는 아직 undefined 상태임. 어느 위치에서는 재선언, 재할당이 가능함. let block scope (let 변수가 선언된 {} 안에서만 유효함. 변수생성시 1. 선언, 2. 초기화(메모리할당), 3. 값할당의 순서를 거쳐야 함. 재할당만 가..

스터디플랜 도움말: https://nolboo.kim/blog/2014/03/13/how-to-learn-javascript-properly/ 주차 커리큘럼 자바스크립트 완벽가이드 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 JavaScript.is(Sexy) 0 0 Web Fundamentals 트랙 좌동 1~2 1 서문 개요 2 1장 자바스크립트 소개 1장 자바스크립트란 무엇인가 3 2장 어휘 구조 2장 HTML 속의 자바스크립트 4 Introduction to JavaScript 섹션 좌동 5 3장 데이터 타입과 값 3장 언어의 기초 6 4장 변수 4장 변수와 스코프, 메모리 7 5장 표현식과 연산자 8 섹션2 Functions 부터 섹션5 Control Flow 까지 좌동 3~4 9 6장 문장..

querySelector querySelectorAll name, id, class 등을 CSS 선택자를 사용하여 요소를 찾는다. 한 개의 요소만을 반환하거나, 없다면 null을 반환한다. 객체 배열을 반환한다.

진부한 토글 // Tedious toggle if (shadesEl.classList.contains('rad')) { shadesEl.classList.remove('rad'); } else { shadesEl.classList.add('rad'); } classList property를 사용한 토글 coolButton.addEventListener('click', () => { shadesEl.classList.toggle('cool'); }); classList toggle의 두번째 매개변수는 boolean값 자리이다. let someCondition; let b = shadesEl.classList.toggle('cool', !!someCondition); console.log(b); // som..