★ ManiPulation DOM 태그/속성/텍스트 조작 innerHTML > 문제점 > 모든걸 문자열로 처리.. 1. innerHTML을 이용한 방식 div1.innerHTML = ''; 2. DOM을 이용한 방식(잘안씀) btn1.addEventListener('click', function() { //2. //2.1 태그 생성 createElement() const input = document.createElement('input'); // console.log(input.nodeType); console.log(input.nodeName); //2.2 속성 추가 setAttributeNode() const type = document.createAttribute('type'); //type=""..
★ EVENT BOM 방식 //BOM 이벤트 window.document.all.btn1.onclick = function() { alert('BOM'); }; DOM 방식 //DOM 이벤트 document.getElementById('btn2').addEventListener('click', function() { alert('DOM'); }); ■ BOM과 DOM의 차이 1. BOM은 이벤트 매핑을 관리 X, DOB 이벤트 매핑을 관리 O const btn1 = document.getElementById('btn1'); const btn2 = document.getElementById('btn2'); //BOM은 이벤트 매핑을 관리 할 수 없다. btn1.onclick = m1; btn1.onclic..
★ AXIS 본인을 기준으로 주변의 요소(부모, 자식, 형제)를 검색하는 도구 HTML 코드 Axis 할아버지 큰아버지 사촌 아버지 큰형 조카 작은형 나 큰애 둘째 손자 막내 동생 막내동생 조카 작은아버지 사촌 CSS 코드 자식 태그 me.childNodes : 자식 노드들 me.firstChild : 첫번째 자식노드 me.lastChild : 마지막 자식노드 document.getElementById('btn').onclick = function() { const me = document.getElementById('me'); //나로부터 다른 사람 검색 // me.className = 'check'; //자식 태그 //- me.childNodes : 자식 노드들 //- me.firstChild : 첫..
★ BOM, DOM 태그조작 1. 태그 검색(BOM, DOM) 2. 속성 조작(BOM, DOM) 3. PCDATA 조작(DOM) > innerText, textContent ★ 콘텐츠 조작 시작 태그와 끝 태그 사이의 내용물 조작 1. innerText 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티 비표준(MS) 태그를 인식 X // div1.innerText ='홍길동'; alert(div1.innerText); div1.innerText = '홍길동'; //결과는 똑같이 escape 되서 나옴 2. innerHTML 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티 태그 인식 O div1.innerHTML = '홍길동'; //동적으로 태그 생성하기 div1.innerHTML = '' /..
★ DOM, Document Object Model BOM > name 사용, id/class 인식 불가능 DOM > name/id/class 모두 사용.(name 비권장) BOM 다음 버전 모든 태그 조작 가능 기능 풍부 태그 검색 도구 > 풍부 DOM LEVEL 1 > DOM LEVEL 2 > DOM LEVEL 3 DOM LEVEL 0(BOM) DOM > BOM 확장 : DOM의 모든 기능을 BOM의 document 내부에 구현해놨다. ■ DOM > 태그 검색(식별자) 1. id 검색 document.getElementById('id') 2. class 검색 document.getElementByClassName('class') 3. name 검색 document.getElementByName('na..
★ 생성자, Constructor 멤버 초기화 같은 구조(*)의 객체를 생성하는 것이 목표 생성자 함수의 이름은 대문자로 시작한다.(관습) > 일반 함수와 구분하기 위해서 function User(name, age) { this.name = name; this.age = age; this.hello = function() { console.log('내 이름은 ' + this.name); } } 호출 방법 //생성자 함수를 일반 함수처럼 호출하지 않는다!! // User('홍길동', 20); const m3 = new User('홍길동', 20); console.log(m3); const m5 = new User('이순신', 25); console.log(m5); 전역 변수와 전역 함수는 무조건 Windo..
★ Function "함수는 1급 객체이다" 1급 객체, First class object 함수를 객체처럼 취급한다. > 함수를 값처럼 취급할 수 있다. 1. 함수를 변수에 담을 수 있다.(저장) n1 = f1; //함수명이 가지고 있는 주소 값을 복사 console.log(typeof n1); 2. 함수를 매개변수에 전달할 수 있다. function a6() { console.log('a6'); }; function a7(temp) { //temp = a6 console.log('a7'); temp(); }; //매개변수로 함수(a6)를 전달 a7(a6); 3. 함수를 반환값으로 사용할 수 있다. //함수를 반환값으로 사용할 수 있다. function a9() { console.log('a9'); } ..
★ 문제 4 아래와 같은 문서를 생성하시오. 조건 타이머를 구현하시오. 를 사용한다. let n = 0; 누적 변수를 사용한다. 누적 변수의 값을 시,분,초 단위로 환산한다. ■ HTML 코드 : : ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 5 아래와 같은 문서를 생성하시오. 조건 활성화된 버튼을 클릭하시오. 흰색 버튼: 클릭이 가능하다. 회색 버튼: 클릭이 불가능하다. 힌트 + fontawesome icon 흰색 버튼: btn:enabled { background-color: white; } 회색 버튼: btn:disabled { background-color: gray; } ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 6 아래와 같은 문서를 생..
