[2020-여름 WEB] 7주차

7주차_웹이론_21기_송희원.pdf

0.19MB

 

1. 객체

1.1 객체의 구조

 

객체는 서로 연관된 변수와 함수들을 묶어 둔 수납공간으로 비유할 수 있다.

배열을 선언한 방법과 비슷하게 객체를 선언할 수 있다.

 

 

var coworkers = {“programer” : “haesa”, “designer” : “haesa”};

var coworkers = {“programer” : “haesa”, “designer” : “haesa”};

 

위와 같이 “programmer”와 “designer”를 key라고 부르며, key를 통해 객체에 저장된 값에 접근할 수 있다.

즉, coworkers.programmer는 haesa을 나타내고, coworkers.designer는 haesa을 나타낸다.

객체에 새로운 데이터를 추가할 때는 [객체명.key=data]와 같은 형태로 추가할 수 있다.

coworkers에 bookkeeper에 대한 정보를 추가하고자 한다면 다음과 같이 하면 된다.

coworkers.bookkeeper=”teaho”;

 

 

 

1.2 Property & Method

객체는 문자열뿐만 아니라 함수도 담을 수 있다.

 

  ① 

 

var coworkers = {showAll : function(){
		for(var key in this) {
			document.write(key+" : "+this[key]+"<br>");
		}
	}
};

 

  ② 

 

coworkers.showAll = function(){
	for(var key in this){
          document.write(key+" : "+this[key]+"<br>");
	}
};

 

객체에 함수를 추가하는 방법에는 위처럼 객체를 선언할 때부터 함수를 넣는 방법과 나중에 함수를 추가하는 방법 두 가지가 있다.

이때 객체에 포함된 변수는 Property라고 하고, 함수는 Method라고 한다.

 

 

 

 

 

2. 이벤트 처리하기

2.1 이벤트

 사용자가 웹 브라우저를 사용하는 중에 발생시키는 키보드, 마우스 등의 입력을 뜻한다.

 

 

 

2.2 이벤트의 종류

  ① 마우스 이벤트

이벤트 이름	태그 속성	설명
click	onclick	요소를 클릭
dblclick	ondblclick	요소를 더블클릭
mousedown	onmousedown	커서가 요소 위에 있고 마우스 버튼을 누를 때
mousemove	onmousemove	마우스 커서를 움직이는 동안
mouseover	onmouseover	마우스 커서가 해당 요소 위에 들어갈 때
mouseout	onmouseout	마우스 커서가 해당 요소 위를 벗어날 때
mouseup	onmouseup	마우스 버튼을 뗄 때

 

  ② 키보드 이벤트

이벤트 이름	태그 속성	설명
keydown	onkeydown	키보드를 누를 때 1회 발생
keypress	onkeypress	키보드를 타이핑할 때, 손을 떼기 전까지 계속 발생한다.
keyup	onkeyup	키보드를 누른 후 뗄 때

 

  ③ 프레임/객체 이벤트

이벤트 이름	태그 속성	설명
abort	onabort	이미지가 완전히 로드 되기 전에 정지되었을 때
error	onerror	이미지 로드가 정상적으로 이루어지지 않았을 경우
load	onload	문서, 프레임, 객체 등이 브라우저에 로드가 완료될 때
resize	onresize	문서 창, 문서 뷰의 크기가 변경되었을 때
scroll	onscroll	문서 창, 문서 뷰가 스크롤 되었을 경우
unload	onunload	윈도우 창, 프레임으로부터 문서가 제거되었을 경우 창을 종료하기 직전에 처리할 사항 있는 경우 유용

 

  ④ 폼 이벤트

이벤트 이름	태그 속성	설명
change	onchange	<input>등 폼 요소의 내용이 변경되었을 때
focus	onfocus	요소가 포커스 되었을 때 (마우스 선택 혹은 이동)
blur	onblur	요소에서 포커스가 없어질 때 (focus의 반대)
reset	onreset	폼이 리셋될 때
select	onselect	<input>과 <textarea>요소에서 텍스트가 선택될 때
submit	onsubmit	폼이 실행될 때

 

 

 

  2.3 이벤트 핸들링 및 이벤트 등록

    ① 이벤트 핸들러(handler) : 이벤트가 발생시 실행하고자 하는 자바스크립트 코드나 함수를 말한다.

    ② 이벤트 등록

 이벤트의 종류와 이를 처리할 이벤트 핸들러를 연결시키는 작업이다.

이벤트 등록에는 두가지 방법이 존재한다.

첫번째는 태그 속성에 직접 이벤트 핸들러를 기술하거나 이벤트 함수를 호출하는 방법이다.

두번째 방법은 객체의 이벤트 속성 값에 이벤트 핸들러 함수 이름을 기술하는 방법이다.

 

※DOM을 이용한 이벤트 핸들러 함수 등록 – DOM 인터페이스를 이용하여 요소 객체의 해당 이벤트 속성에 직접 이벤트 핸들러 함수를 지정하는 방법이 있다. 이벤트 핸들러는 반드시 함수 형태로 미리 구현해야 하고, 객체의 이벤트 속성에 ()없이 함수 이름만 적어야 한다.

 

 

 

 

 

3. 폼 다루기

3.1 폼 다루기와 이벤트 처리

 <input>요소를 DOM 인터페이스로 접근하여 value속성값을 읽거나 저장할 수 있다.

<input>요소의 id값을 불러오고, 해당 id의 value값을 변수에 저장하면 value 속성값을 읽어올 수 있다.

 

 

 

 

 

4. 동적 웹 문서 만들기

4.1 동적 문서 정의

 웹 문서가 브라우저에 처음 표시된 후에 콘텐츠 또는 스타일이 변경되거나 웹 문서의 콘텐츠 또는 스타일을 자바스크립트를 이용해 변경하는 문서를 말한다.

동적 문서 구현 방식에는 웹 문서의 콘텐츠를 변경시키는 방법과 CSS스타일을 변경시키는 방법 두가지가 있다.

 

 

 

4.2 스타일 속성 변경을 통한 동적 문서 만들기

 DOM을 이용하면 CSS스타일에 접근 가능하다.

 

  ① 보이기 스타일 속성 변경

 

<script>
	function toggle Visibility(id){
    	var dom = document.getElementById(id);
    	if (dom.style.visibility == “visible”)
        	dom.style.visibility = “hidden”;
    	else
        	dom.style.visibility = “visible”;
	}
</script>

Toggle Visibility:
<button onclick = “toggleVisibility(‘img1’;)”>Image1</button>

 

  ② 배경색 스타일 속성 변경

 

<script>
	function changeColor(id, color){
    	document.getElementById(id).style.background = color;
}
</script>

Box:
<button onclick = “changeColor(‘Box’, ‘red’;)”>Red</button>
<button onclick = “changeColor(‘Box’, ‘green;)”>Green</button>
<button onclick = “changeColor(‘Box’, ‘blue;)”>Blue</button>

 

  ③ 위치 스타일 속성 변경

 

<script>
function changePosition(){
    for(i=1;i<=3;i++){
        var left = document.getElementById(“left”+i).value;
        var top = document.getElementById(“top”+i).value;
        document.getElementById(“img”+i).style.left = left+”px”;
        document.getElementById(“img”+i).style.top = top+”px”;
    }
}
</script>

<form>
	Image1 : Left<input id = “left1” size = “2” type = “text”/>
	Top< input id = “top1” size = “2” type = “text”/><br/>

	Image2 : Left<input id = “left2” size = “2” type = “text”/>
	Top< input id = “top2” size = “2” type = “text”/><br/>

	Image3 : Left<input id = “left3” size = “2” type = “text”/>
	Top< input id = “top3” size = “2” type = “text”/><br/>
</form>

 

  ④ 마우스 이벤트를 이용한 위치 스타일 변경

 마우스 이벤트로 웹 브라우저 화면상의 위치 좌표 값을 이용해 요소의 위치를 변경할 수 있다.

마우스 포인터의 위치는 window객체의 event속성값에서 구할 수 있다. (client, clientY)

 

e = window.event;

mouse_x = e.clientX;

mouse_y = e.clientY;

 

 

 

4.3 요소의 콘텐츠 변경을 통한 동적 문서 만들기

  ① 웹 문서 콘텐츠 변경

 폼 위젯 요소의 value값을 변경하거나 태그 요소의 콘텐츠를 변경한다.

 

  ② HTML 태그 콘텐츠 속성

 

<p id = “example”>Thist is an example content</p>

 

위 태그에서 “This is an example content”부분이 <p>요소의 콘텐츠이고, 요소의 콘텐츠에 접근하는 속성에는 innerHTML과 innerText 두가지가 있다.

→       innerHTML : 속성에 저장된 값을 HTML태그로 해석

→       innerText : 속성에 저장된 값을 단순히 문자열로 해석

 

 

 

 

 

5. 다양한 방법으로 폼 다루기

5.1 폼 접근하기

 

  ① document.폼 이름.위젯ID.value;

  ② document.forms[index].위젯ID.value;

  ③ document.forms[index].elements[index].value;

 

 

 

5.2 폼 제어하기

  ① select() 메소드

  ② submit() 메소드

  ③ reset() 메소드

  ④ checked 속성 설정