본문 바로가기

전체 글260

(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.
(2)인터렉티브_자바스크립트_특정 태그에 핸들러 적용하기(요소노드.onclick프로퍼티), Window객체,document객체(Dom모델), console.log() VS console.dir(), DOM 트리 구조 ● 이론1 : 버튼태그를 querySelector() || getElement...()로 변수 저장한 후, 버튼을 누를 시, 어떠한 동작 구현 코드 작성 => 노드.onclick 프로퍼티 + 핸들링 , 핸들러 작성○ 개념1 : // 버튼을 누를 시, 동작 구현 해보기순서1_ getElement() || querySelector() 로 요소노드로 변수에 저장 순서2_  요소노드의 프로퍼티인 onclick 순서3_  핸들러로 구현할 코드 작성○ 연습 문제 1 :- index.html Click! - "Click!"버튼을 누를 시, console창에 "시발련아" 문자열 출력하도록 js작성하기 하기답 ://순서1_ 버튼태그 요소노드 변수로 저장const btn = querySelector('#n.. 2024. 11. 28.

티스토리툴바