본문 바로가기

CodeIt_Sprint87

(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.
(3)인터렉티브_자바스크립트_Dom트리구조에서 원하는 요소노드 접근 ● 이론1 : 특정 노드를 요소노드의 변수로 저장 후, 그 요소노드를 기준으로 다른 요소노드 접근하기＠ Ex_ Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue Cat-2 Sphynx Munchkin Persian Norwegian Forset Turkish Angora.. 2024. 11. 28.

티스토리툴바