본문 바로가기

전체 글234

(7)인터렉티브_자바스크립트_태그에 이벤트 핸들러 등록,제거하기, 이벤트객체 => 동작에 대하여, 어떤 event동작, 태그항목이 관련되어있는지의 정보 객체 ● 개념1 : 태그에 이벤트 핸들러 등록,제거하기 => addEventListener(),removeEventListener()○ 문법 :요소노드.addEventListener( 동작에 해당되는 event , 함수이름 || 직접 함수 작성 {...});Ex_const btn = document.getElementbyTagName('button');function btnClickPrint(){ console.log('버튼 누르면 출력됨');} //'click' 왼쪽 마우스 클릭 동작에 대한 event 명칭이다.btn.addEventListener('click',btnClickPrint); ○ 핸들러 등록 방법 2가지방법1_ 이벤트 핸들러를 제거할 필요가 없다면, => 매개인자 2번째 함수자리에 직접 함수 .. 2024. 11. 29.
(6)인터렉티브_자바스크립트_dataset속성 ● 아래의 JavaScript코드를 분석해보자.const fields = document.querySelectorAll('[data-field]');console.log(fields);const task = { title: '코드 에디터 개발', manager: 'CastleRing, Raccoon Lee', status: '',};for (let tag of fields) { const field = tag.dataset.field; tag.textContent = task[field];}const btns = document.querySelectorAll('.btn');for (let btn of btns) { const status = btn.dataset.status; btn.oncl.. 2024. 11. 29.
(5)인터렉티브_자바스크립트_JavaScript로 해당 태그의 속성값 조정, 특정 태그에 어떤 동작을 하면, css의 클래스 스타일 적용 및 해제=>add(),remove(),toggle() ● 개념1 : 해당 태그의 속성 출력, 설정 , 제거 => 요소노드의 프로퍼티메소드 get||set||remove()○ 종류 :출력 : console.log(요소노드.getAttribute('속성명')) => 속성명에 해당하는 속성값이 출력된다. 설정 : 요소노드.setAttribute('속성명', 설정할 값);속성 제거 : 요소노드.removeAttribute('속성명');○ 부수적인 기능 : 속성명을 매개인자로 할 때, 대소문자 구분할 필요 없다.● 연습문제1○ 문제조건 : 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 ○ 요구사항 : 태그에 직접 접근.. 2024. 11. 28.
(4)인터렉티브_자바스크립트_요소노드의 프로퍼티인, innerHtml,outerHtml,textContent , Dom트리에서 특정 노드위치에 , 1_ 노드 생성 2_ 노드 제거 3_ 노드 옮기기 ● 개념1 : 요소노드.innerHtml , 요소노드.outerHtml , 요소노드.textContent 요소노드.innerHtml : 요소노드 포함 X , 내부 태그 + 들여쓰기 포함 요소노드.outerHtml : 요소노드 포함 O , 내부 태그 + 들여쓰기 포함 요소노드.textContent : 요소노드의 자손들의 모든 텍스트 노드들 + 들여쓰기 포함//innerHtml, outerHtml, textContent 는 문제를 풀면서 익히는 게 더 낫다//솔직히 여기서 제일 중요한 프로퍼티는 textContent임○ 연습 문제 : 다음 HTML 코드를 보고 아래의 문제를 해결해 주세요. 진행 중인 토픽 인터랙티브 자바스크립트 프로그래밍 언어 이해하기 프로그래머의 세계 이해하기 .. 2024. 11. 28.

티스토리툴바