★ 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..
★ Variable 변수 선언하기 BOM ~ DOM ~ ES6 function-scoped 중복 선언 가능 상수 선언 불가능 전역 멤버(전역변수, 함수)는 자동으로 window 객체의 멤버(프로퍼티)가 된다. var a = 10; //a : 전역 변수 for (var p in window) { //p : 전역 변수 console.log(p); } ■ 객체가 가지는 프로퍼티를 탐색하는 루프(향상된 for문 아님 X) or(var p in screen) { console.log(p); } console.log('------------------------'); for(var p in document.all.txt1) { console.log(p); } ★ 변수 선언하기 1. var 2. let ES6 blo..
★ Timer 타이머 생성 1. number setTimeout(함수, 시간) : 1회성 타이머 btn1.onclick = m1; function m1() { //3초 후에 f1을 호출해라! //setTimeout(f1, 1000); f1(); } function f1() { // alert('따르릉'); txt1.value = (new Date()).toLocaleTimeString(); setTimeout(f1, 1000); //재귀 호출 + 무한 루프 } 2. number setInterval(함수, 시간) : 반복성 타이머 btn2.onclick = m2; function m2() { setInterval(f2, 1000); } function f2() { // alert('띵동~'); txt2...
