나만의 개발노트

- html의 -> 화면 HTML 삽입 미리보기할 수 없는 소스 + a태그 내부에 i태그를 하면, 아이콘을 링크가 연결된 버튼처럼 사용할 수 있음

[나의 코드] - app.js // local reviews data const reviews = [ { id: 1, name: 'susan smith', job: 'web developer', img: 'https://images2.imgbox.com/e0/57/qI5bbwvg_o.jpeg', text: "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry", }, { id: 2,..

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..

Element.classList : 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다. => 엘리먼트의 class 속성들을 다루는 듯 const elementClasses = elementNodeReference.classList; - add() , remove() 메서드를 이용하여 변형할 수 있다 1. add() : 지정한 클래스 값을 추가 2. remove() : 지정한 클래스 값을 제거 3. item() : 클래스 값을 반환 4. toggle() : 클래스가 존재하면 제거하고 false, 존재하지 않으면 클래스를 추가하고 true (0과 1이 반복되는 행위) 5. contains() : class 속서에 존재하는지 확인 6. replace() :클래스 ..

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..

[나의 코드] - index.html counter 0 DECREASE RESET INCREASE - app.js const decBtn = document.getElementById('dec_btn'); const resBtn = document.getElementById('res_btn'); const incBtn = document.getElementById('inc_btn'); const value = document.getElementById('value'); let count = 0; decBtn.addEventListener('click',function(){ count--; if(count>0){ value.style.color = 'green'; }else if(count === 0){ ..

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(목)