Atelier BiCute

웹의 특정 요소를 조작할 때, 가장 간편한 방법은 CSS로 해당 속성을 미리 지정한 후, 클래스를 추가 삭제하는 방식으로 제어하는 것입니다. 아래는 클래스를 제어와 관계있는 classList 속성과 className에 관한 예시입니다.. - Setting - BUTTON bt1과 bt2라는 2개의 클래스를 가진 버튼을 생성. // JavaSciprt let $button = document.querySelector('button') $button.addEventListener('click', () => { // $button.classList.add("active", "add"); // $button.classList.remove("bt2"); // $button.classList.toggle("acti..

막상 사용해보면 비슷한데, 조금씩 용도가 다른 innerHTML / innerText / textContent 의 차이점입니다. - Setting - // HTML 헬로 월드 헬로 자바스크립트 숨겨놓은 글 // JavaScript let $textbox = document.getElementById('textbox'); innerHTML console.log($textbox.innerHTML); 해당 요소의 HTML값을 그대로 가져옵니다. 출력 결과 " 헬로 월드 헬로 자바스크립트 숨겨놓은 글 " ※ console.log나 alert 등으로 출력을 할경우 내부 태그도 함께 보이지만, 당연하게도 document.write로 출력할 경우엔 태그 속성이 적용된 [헬로 월드 헬로 자바스크립트]로 출력됩니다. i..

#1 map의 기본 동작 방식 [1,2,3].map(function(){ console.log('확인') }) (1) map은 array 자료의 개수만큼 함수안의 코드를 반복하여 실행해 줍니다. (2) 작성은 '배열.map.콜백함수' 이후 실행할 내용순으로 적습니다. *위와 같이 작성할 경우 배열[1,2,3]의 수만큼(3) console.log를 실행해 줍니다. 결과 #2 map의 첫번째 파라미터 [1,2,3].map(function(a){ console.log(a) }) (2) 함수안에 있는 파라미터 a는 배열에 있는 각각의 자료입니다. #3 map의 두번째 파라미터 [1,2,3].map(function(a, i){ console.log("자료" + a) console.log("인덱스" + i) }) ..

#1 일반 함수에서 사용될 경우 function 디스(){ console.log(this); } 디스(); this = Window 단, strict mode라면 undefined 'use strict' function 디스(){ console.log(this); } 디스(); #2 오브젝트 내에서 함수(Function)로 사용될 경우 let 오브젝트 = { 이름: "후시딘", 디스: function(){ console.log(this) } } 오브젝트.디스(); this = 속해있는 object #3 오브젝트 내에서 화살표 함수(Arrow Function)로 사용될 경우 let 오브젝트 = { 이름: "후시딘", 디스: () => { console.log(this) } } 오브젝트.디스(); this ..

#1 자료형(Data Type) 종류 설명 문자열 (string) 시작과 끝이 작은 따옴표('')나 큰 따옴표("")로 감싸진 값 숫자 (number) 따옴표를 사용하지 않은 숫자 논리형 (boolean) 참(true)과 거짓(false)을 나타냄 배열 (array) 하나의 변수에 여러 개의 값을 저장 객체 (object) 함수와 속성들이 함게 포함된 경우 undefined 데이터의 유형이 지정되지 않은 상태 null 데이터의 값이 유효하지 않은 상태 JavaScript에서의 False ① false, ② ''(빈 문자열), ③ 0, ④ NaN, ⑤ undefined, ⑥ null, ⑦ document.all(이건 거의 사용하지 않으니 몰라도 됨) #2 연산자 종류 설명 산술 연산자 +, -, *, /,..