★ 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 아래와 같은 문서를 생..
★ 문제 1 아래와 같은 문서를 생성하시오. 조건 카운트 다운을 구현하시오. 카운트가 0이 되면 구글로 이동하시오. esc 키를 누르면 카운트를 중단하시오 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 2 아래와 같은 문서를 생성하시오 조건 뉴스 서비스를 구현하시오. ■ HTML 코드 네, 낮동안에도 찬바람이 강하게 불고있습니다. 때문에 체감상 느껴지는 온도는 현재기온보다 2~3도가량 낮게 나타나고 있는데요. 남부해안지역과 제주도를 중심으로는 강풍주의보도 이어지고 있기 때문에 시설물 피해 없도록 주의하셔야겠습니다. 쌀쌀했던 어제보다도 기온이 더 오르지 못하고있습니다. 현재기온 서울 7.3도, 대전 9.3도, 부산 6.8도로 이맘때 평년수준을 밑돌고있고요. 찬바람이 더해지..
★ 호이스팅, Hoisting 함수 호이스팅(*), 변수 호이스팅 코드를 실행하기 전, 변수 선언문과 함수 선언문은 해당 스코프의 최상단으로 끌어올려진다. > 코드를 재배치 //호출 m1(); //선언 function m1() { alert(); } ★ 객체, Object JavaScript에는 클래스가 없다. 하지만 내장 객체를 제공한다. 1. 내장 객체 Date, Array, Math, Object, Option 등.. new Date() new Array() 2. BOM 객체 window, document, form, text, button 등.. BOM 트리 > 구성 요소들 .. 3. DOM 객체 element, attribute, text 등.. 4. 사용자 정의 객체(***) JavaScrip..
