javascript의 classList 속성을 사용하여 element의 class를 사용하는 방법을 알아볼 것이다. classList는 element의 읽기전용 속성으로 CSS class의 현재 값을 반환한다. classList는 DOMTokenList 객체로 element의 class 속성을 보여준다. classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있다. Add html_class이름.classList.add("CSS_class이름"); add 메소드는 class 목록에 하나 이상의 CSS class를 추가할 수 있다. Remove html_class이름.classList.remove("CSS_class이름"); remove 메소드는 class 목록에 하나 이상의 ..
이번에는 단순하게 버튼을 눌러 숫자를 증가, 감소, 리셋하는 사이트를 만들 것이다. Increase 버튼을 누르면 가운데 숫자가 초록색으로 바뀌고, Decrease를 누르면 빨간색으로 바뀐다. 내가 쓴 코드 index.html Counter 0 Decrease Reset Increase 일단 내가 작성한 html은 이렇다. 숫자가 태그에 수정할 수 있도록 태그를 넣어주었다. 그리고 버튼을 세개를 다 따로 만들었다. 앗 그런데 를 다 빼먹었다... 레이아웃에 대해 공부할 필요가 좀 있을듯 하다. 를 남발하지 말라고 하는데 언제어디서 적절히 사용해야할지 잘 모르겠다. 여기서 또 들은 의문점은 왜 class랑 id를 굳이 같이 써야하는지다. 저번 01 Color Flipper 프로젝트에서는 버튼에 CSS용 c..
호이스팅 (Hoisting) 자바스크립트에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 한다. 즉, 변수의 선언과 초기화를 분리한 후 선언만 코드의 최상단으로 옮기는 것이다. var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다. test(); function test() { console.log("test."; } //result: "test." TDZ (Temporal Dead Zone) TDZ는 일시적인 사각지대로, 변수를 사용하는 것을 비허용하는 개념상의 공간이다. TDZ에 있는 값에 접근하게 되면 ReferenceError: Cannot access 'xxx' befo..
var, let, const 차이점 5가지 Preview중복선언 가능 여부재할당 가능 여부변수 스코프 유효범위 (유효한 참조 범위)변수 호이스팅 방식전역객체 프로퍼티 여부 varletconst중복 선언OXX값의 재할당OOXScopefunction-levelblock-levelblock-level변수 호이스팅발생발생발생전역객체의 프로퍼티OXX1. 중복선언 가능 여부var: 중복 선언이 가능//1st var declare & initializevar a = 10;console.log(a) //10//2nd var declare & initializevar a = 20;console.log(a) //20//3rd var declarevar a;console.log(a) //20var로 선언한 변수는 중복해서 ..
