개발블로그

웹페이지

JAVASCRIPT STEP 33 - Constructor

★ 생성자, 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..

웹페이지

JAVASCRIPT STEP 32 - Function

★ 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'); } ..

웹페이지

JAVASCRIPT STEP 31 - Timer 예제2

★ 문제 4 아래와 같은 문서를 생성하시오. 조건 타이머를 구현하시오. 를 사용한다. let n = 0; 누적 변수를 사용한다. 누적 변수의 값을 시,분,초 단위로 환산한다. ■ HTML 코드 : : ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 5 아래와 같은 문서를 생성하시오. 조건 활성화된 버튼을 클릭하시오. 흰색 버튼: 클릭이 가능하다. 회색 버튼: 클릭이 불가능하다. 힌트 + fontawesome icon 흰색 버튼: btn:enabled { background-color: white; } 회색 버튼: btn:disabled { background-color: gray; } ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 6 아래와 같은 문서를 생..

웹페이지

JAVASCRIPT STEP 30 - Timer 예제

★ 문제 1 아래와 같은 문서를 생성하시오. 조건 카운트 다운을 구현하시오. 카운트가 0이 되면 구글로 이동하시오. esc 키를 누르면 카운트를 중단하시오 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 2 아래와 같은 문서를 생성하시오 조건 뉴스 서비스를 구현하시오. ■ HTML 코드 네, 낮동안에도 찬바람이 강하게 불고있습니다. 때문에 체감상 느껴지는 온도는 현재기온보다 2~3도가량 낮게 나타나고 있는데요. 남부해안지역과 제주도를 중심으로는 강풍주의보도 이어지고 있기 때문에 시설물 피해 없도록 주의하셔야겠습니다. 쌀쌀했던 어제보다도 기온이 더 오르지 못하고있습니다. 현재기온 서울 7.3도, 대전 9.3도, 부산 6.8도로 이맘때 평년수준을 밑돌고있고요. 찬바람이 더해지..

웹페이지

JAVASCRIPT STEP 29 - Hoisting, Object

★ 호이스팅, 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..

웹페이지

JAVASCRIPT STEP 28 - Variable

★ 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..

웹페이지

JAVASCRIPT STEP 26 - FORM 예제

★ 문제 1 아래와 같은 문서를 생성하시오. 조건 새창을 띄운 뒤 우편 번호 검색을 하시오. 우편번호, 주소 : 새창에서 선택하면 자동 채우기 상세주소 : 포커스 맞추기 ■ HTML 코드 우편 번호 검색 우편번호 주소 상세주소 ■ css 코드 ■ JavaScript ■ 008search.html ■ 실행 결과 ★ 문제 2 아래와 같은 문서를 생성하시오. 조건 주문하시는 분 정보를 받으시는 분으로 복사하시오. ■ HTML 코드 주문하기 주문하시는 분 이름 : 주소 : 주문하시분과 정보과 동일합니다. 받으시는 분 이름 : 주소 : ■ CSS 코드 X ■ JavaScript ■ 실행 결과 ★ 문제 3 아래와 같은 문서를 생성하시오. 조건 주민번호 입력 시 나머지 컨트롤(생년월일, 성별) 제어를 하시오. 주민등..

웹페이지

JAVASCRIPT STEP 25 - FORM2

★ Radio HTML 코드 라디오 버튼 흰색 빨간색 노란색 파란색 검은색 CSS 코드 JavaScript 실행 결과 ★ Range HTML 코드 배경색(RGB) R : G : B : CSS 코드 JavaScript 실행 결과 ★ Select HTML 코드 셀렉트 박스 강아지 고양이 돼지 닭 사자 호랑이 낙타 태어난 년도 : CSS 코드 X JavaScript 실행 결과

IT의 큰손
'개발블로그' 태그의 글 목록 (4 Page)