JavaScript (83) 썸네일형 리스트형 [JavaScript] 이벤트 위임 오늘 할 일 자바스크립트 공부 유튜브 시청 저녁 약속 독서 이벤트를 적용할 때, 아래와 같이 반복문을 사용하여 나타낼 수 있으나, const list = documnet.querySelector('#list'); for(let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done') }); } const li = document.createElement('li'); li.classList.add('item'); li.textContent = '일기 쓰기'; list.append(li); '일기쓰기' 를 추가하면 그 추가된 아이템에는 이벤트핸들러가 적용이 되지 않는다. 이벤트 버.. [JavaScript] 이벤트 객체 이벤트 핸들러의 첫번째 파라미터에는 이벤트 객체가 전달된다. event 라고 작성해도 되지만 대게 e 로 작성한다. // 이벤트 객체 (Event Object) const myInput = document.querySelector('#myInput'); const myBtn = document.querySelector('#myBtn'); function printEvent(event) { console.log(event); event.target.style.color = 'red'; } myInput.addEventListener('keydown', printEvent); myBtn.addEventListener('click', printEvent); 위처럼 keydown 이벤트가 발생하면, 이벤트 정보.. [JavaScript] 이벤트 핸들러 등록하기 1. onclick 프로퍼티 활용 새로운 이벤트를 할당하게 되면, 기존의 값을 덮어쓰기 때문에 좋은 방법이라고 하기 어렵다. let btn = document.querySelector('#myBtn'); btn.onclick = function () { console.log('Hi Codeit!'); }; 2. addEventListener 메소드 사용 첫번째 파라미터로 event 내용을 전달하고, 두번째 파라미터로 이벤트 핸들러를 전달한다. 핸들러 부분에는 함수이름 만 전달해주면 됨. event1() 이런식으로 작성하는 경우가 있는데, 그러면 함수가 바로 실행된다. 하나의 요소에 여러가지 독립적인 이벤트를 등록할 수 있음. let btn = document.querySelector('#myBtn'); .. [JavaScript] 노드 삭제와 이동하기 // 노드 삭제와 이동 const today = document.querySelector('#today'); // 요소 노드 선택 const tomorrow = document.querySelector('#tomorrow'); // 노드 삭제하기: Node.remove() tomorrow.remove(); today.children[2].remove(); // today 노드의 자식요소 중에서 2번 인덱스 삭제 // 노드 이동하기: prepend, append, before, after today.append(tomorrow.children[1]); // tomorrow 노드의 자식요소 중 1번 인덱스를 today노드로 이동 tomorrow.children[1].after(today.children[1].. [JavaScript] 배열 메소드 indexOf/ includes/ reverse 배열에서 특정 값 찾기 (indexOf/ lastIndexOf) 1. indexOf (array.indexOf('element');) 배열에 있는 특정 요소의 인덱스 값을 반환 let brands = ['samsung', 'apple', 'asus', 'lg', 'apple'] console.log(brands.indexOf('apple')); // 1 2. lastIndexOf (array.indexOf('element');) 배열에 있는 특정 요소의 인덱스 값을 뒤에서 부터 찾아서 반환 let brands = ['samsung', 'apple', 'asus', 'lg', 'apple'] console.log(brands.lastIndexOf('apple')); // 4 3. 배열에 없는 요소의 인덱스.. [JavaScript] for ... of 반복문 (배열) for ... of 문 다음과 같이 배열의 요소를 반복할수 있음. let influencer = ['suwonlog', 'small.tiger', 'Minam.ludens', 'cu_convenience24'] /* for (변수 of 배열) { 동작부분; }*/ for (let i = 0; i < influencer.length; i++) { console.log(influencer[i]); } for (let element of influencer) { console.log(element); } for (let index in influencer) { console.log(influencer[index]); } /* suwonlog small.tiger Minam.ludens cu_convenienc.. [JavaScript] for ... in 반복문 (객체) for .. in 반복문 객체안에 있는 프로퍼티를 가지고 반복적인 동작을 할 때 사용되는 반복문. let codeit = { name: 'codeit', bornYear: '2017', isVeryNice: 'true', worstCourse: null, bestCourse: '자바스크립트 프로그래밍 기초', } for(let k in codeit) { console.log(k); // 키에 접근 console.log(codeit[k]); // 대괄호 표기법으로 값에 접근 } /* 실행결과 name codeit bornYear 2017 isVeryNice true worstCourse null bestCourse 자바스크립트 프로그래밍 기초 */ [JavaScript] 요소 노드 추가하기 요소 노드 추가하기 다음과 같은 HTML 태그가 있다고 할 때, 내일 할일을 추가해보려고 한다. 오늘 할 일 밥먹기 잠자기 공부하기 내일 할 일 책보기 게임하기 노래듣기 1. 요소 노드 생성 : document.createElement('태그이름') 원하는 태그 이름으로 요소 노드를 만들 수 있음. const first = document.createElement('li'); 2. 요소 노드 꾸미기 : textContent, innerHTML, ... first.textContent = '처음'; 3. 요소 노드 추가하기 : NODE.prepend, append, after, before tomorrow.prepend(first); method 를 호출한 젤 첫번째 노드로 파라미터로 전달한 값을 추가할 .. 이전 1 2 3 4 5 6 ··· 11 다음
