Object
객체.
자바스크립트 객체 표기법
{프로퍼티1 : 값1, 프로퍼티2 : 값2, ...}
var person={
name : '토르',
age : 400,
email : 'thor@thunder.com'
};for-in구문으로 객체의 프로퍼티에 접근하려면 문자열 인덱스를 사용합니다. 숫자가 아닌 객체의 프로퍼티가 인덱스가 됩니다.
for(x in person){
//x=='name'
output.innerHTML+=x+':'+person[x]+'<br>';
}java처럼 new로 객체를 생성하거나 생성자 함수로 객체를 생성하는게 가능한데 비교적 권장하지는 않습니다.
자바스크립트의 객체는 자바의 클래스와 비슷함
var person={
name : '유재석',
phone : {
home : '02-1234-5678',
mobile : '010-1234-5678'
}, //object 객체
email : ['test@test.com','yoo@test.com'], //배열
information : function() {
return this.name+','+this.phone.home+','+this.email[0];
} //method. this는 자기자신(person 객체)
};객체 안에는 값만 들어가는게 아니라 객체, 배열, 함수가 들어갈 수 있어요.
기존에 없는 프로퍼티를 객체.프로퍼티3=값3; 으로 넣으면 객체(object)가 생성된 이후에 객체의 프로퍼티를 추가/삭제할 수 있음
프로토타입으로 생성자 함수에 프로퍼티 추가도 가능
Date
현재시간은 Date()로 객체생성하는 게 자바와 비슷함.
var curDate=new Date;
Date(년,월,일,시,분,초)로 날짜를 지정해서 가져올수도 있어요
월은 0부터 시작하기때문에 1월은 0으로 표기해야함.
- getFullYear() : 년
- getMonth() : 월 (0(1월)~11(12월))
- getDate() : 일 (1~31)
- getDay() : 요일 (0(일)~6(토))
- getHours() : 시 (0~23)
- getMinutes() : 분 (0~59)
- getSeconds() : 초 (0~59)
- getTime() : 1970년 1월 1일 0시 0분 0초 기준으로 milli-second(1/1000초)마다 1씩 증가된 시간
DOM(Document Object Model)
html에는 자체적으로 트리형식의 포함관계가 존재하는데요 그중 document는 모든 하위요소들의 최상위계급입니다.
- 표준 객체 모델
- HTML을 위한 프로그래밍 인터페이스
- 모든 HTML 요소의 프로퍼티
- 모든 HTML에 접근하는 메소드
- 모든 HTML을 위한 이벤트
요소 접근하기
- element.tagName : 요소의 이름
- element.parentElement : 해당 요소의 상위요소 정보
- element.children : 요소의 하위요소 여러개. 배열로 접근할 수 있다.
- element.previousElementSibling : 같은 위치에 있는 요소 중 이전 요소. (코드기준 위)
- element.nextElementSibling : 같은 위치에 있는 요소 중 다음 요소. (코드기준 아래)
- element.firstElementChild : 첫번째 하위요소 정보
요소 찾기
getElementById('id');: 같은 id의 요소가 여러개 있어도 처음나온 1개의 요소만 가져옴.getElementsByTagName('tagName');: 여러개를 가져올 수 있음. Object 타입.getElementsByClassName('className');: 여러개를 가져올 수 있음.querySelectorAll('선택자'): 여러개.querySelector('선택자'): CSS 선택자에는 클래스., id는#으로 표기.- HTML Object Collection : body, form, images
onload
태그를 읽으면 실행하는 동작을 지정합니다.
<body>
페이지 실행하자마자 alert가 실행됩니다.
event 핸들링
이벤트는 요소의 태그로도 지정할 수 있지만 보통 자바스크립트에서 하는게 좋다.
<h1 id="title"
onclick="test1()"
onmouseover="test2()"
onmouseout="test3()"> 이벤트 </h1>- onclick : 요소를 클릭했을 때 실행
- onmouseover : 요소에 커서를 올렸을 때 실행
- onmouseout : 요소에 커서가 없을 때 실행
title.onclick=function(){
title.innerHTML='변경';
title.style.fontSize='3em';
title.style.fontWeight='bold';
}이렇게 자바스크립트로 이벤트 핸들러를 등록할 수 있습니다.
<p>onclick 속성에서 js함수호출</p>
p 요소의 this는 p요소 자기 자신을 의미합니다.
그래서 change함수의 매개변수로는 <p>onclick 속성에서 js함수호출</p> 해당 html 태그가 넘어가요!
<input type="text" name="userName" id="userName"
autofocus
onfocus="changeBgColor(this)"
onblur="resetBgColor(this)" onchange="toUpper(this)">-
autofocus : 자동으로 포커스를 받음
-
onfocus : 포커스를 받았을때
-
onblur : 포커스를 잃었을때
-
onchange : 입력된 내용이 바뀌었을 때(입력 후 엔터나 탭키를 눌렀을 때)
-
onkeyup : 키보드가 입력되었을 때마다
(21.09.29 추가)
Visibility
- hidden : 요소를 갑춘다.
- visible : 요소를 보여준다.
Display
- none : 요소 공간을 감춘다.
- block : 요소 공간 블록을 드러낸다.
