나만의 개발노트

DOMContentLoaded : DOM트리가 완성되면 바로 실행된다. (스타일 시트, 이미지, 하위 프레임의 로딩을 기다리지 않음) window.addEventListener('DOMContentLoaded', (event) => { //실행될 코드 }); => 장점 : onload 이벤트보다 먼저 발생함. 빠른 실행속도가 필요할 때 적합하다. *onload : 문서의 모든 자원이 다운로드 되었을 때 발생 window.addEventListener('DOMContentLoaded',()=>{ const item = reviews[currentItem]; img.src = item.img; author.textContent = item.name; job.textContent = item.job; info..

currentTarget : Event 인터페이스의 읽기 전용 속성. 이벤트 핸들러가 연결된 요소를 참조한다 const element = event.currentTarget.속성 const element = event.currentTarget; let text = event.currentTarget.tagName; (참조) https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget 1st 기록 : 23.05.08(월)

forEach() : 주어진 callback함수를 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) - callback : 각 요소에 대해 실행할 함수 - currentvalue(명명된 매개변수) : 처리할 현재 요소 - index(선택적 매개변수) : 처리할 현재 요소의 인덱스 - array(선택적 매개변수) : forEach()를 호출한 배열 - thisArg : callback을 실행할 때 this로 사용할 값. //전달되지 않으면 undefined사용 1. currentvalue만 사용 const numbers = [1,2,3,4,5]; numbers.forEach(fun..

addEventListener() : 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정하는 메서드 addEventListener(type, listener); addEventListener(type, listener, options); addEventListener(type, listener, useCapture); (참조) https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener 1st 기록 : 23.04.20(목)

document.querySelector() : 선택자 or 선택자의 첫 요소를 반환한다. (일치하는 요소가 없으면 null) document.querySelector(selectors); var el = document.querySelector(".myclass"); //문서에서 myclass라는 클래스를 사용하는 첫 번째 요소를 반환 * https://itnote-for-me.tistory.com/10 참고 230417(월) [WEB2-JS] - 12강_제어할 태그 선택 https://youtube.com/playlist?list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf WEB2-JavaScript www.youtube.com [12강] 제어할 태그 선택하기 - 버튼을 눌렀을 때..

document.getElementById() : JavaScript에서 Id로 HTML에 있는 Element를 불러오는 함수 getElementById(id); html Some text here blue red javascript function changeColor(newColor) { const elem = document.getElementById("para"); elem.style.color = newColor; } 1st 기록 : 23.04.20(목)

arrays(배열) : 단일 변수 이름 아래에 여러 항목 모음을 저장할 수 있는 개체 크기 조정이 가능하고, 다양한 데이터 유형을 혼합하여 포함할 수 있다. 연관 배열이 아니므로, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes.(이해X) 인덱스는 0부터 시작한다. (첫 요소의 index는 0,두번째 요소의 index는 1 ... 마지막 요소는 array's length -1) 배열을 복사하면, 얕은 복사가 된다.(이해X) (참조) https://developer...

https://youtube.com/playlist?list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf WEB2-JavaScript www.youtube.com [16강] 조건문 [강의 내용] - 조건문 if, else if(조건문){ ...조건문이 true일 경우 실행될 코드... }else{ ...조건문이 false일 경우 실행될 코드... } [새로 알게 된 내용] - 글 태그 안에 을 사용하면 개행됨 JavaScript //-> JavaScript Java Script //-> Java Script [17강] 조건문의 활용 [실습 내용] : day모드에서는 버튼을 누르면 night모드로 변경되고, night모드에서는 버튼을 누르면 day모드로 변경되도록 하기. * 버튼은 한개 ..