heenam
10. DOM과 이벤트 처리, 입력 검증 본문
문서 객체 모델
먼저 브라우저가 HTML 문서를 내부적으로 표현하는 표준 모델인 DOM부터 살펴보자.
웹 페이지가 적재되면, 브라우저는 페이지의 문서 객체 모델(DOM)을 생성한다. DOM은 HTML 문서의 계층적인 구조
를 트리로 표현한다. 트리라고 하는 이유는 나무와 비슷하기 때문이다. 트리에 있는 하나의 잎은 노드라 한다.
트리에서는 부모 노드, 자식 노드, 형제 노드의 개념이 있다.
자바스트립트를 사용하여 DOM 트리를 순회하면서 페이지 안 요소의 내용이나 속성, CSS 스타일을 우리 마음대로 변
경할 수 있다. 즉 동적으로 웹 페이지의 내용과 스타일을 변경할 수 있는 것이다. 또 각각의 요소에서 발행하는 이벤트
에 반응하는 코드를 작성할 수 있다.
DOM과 BOM
자바스크립트에서는 HTML문서와 웹 브라우저를 객체로 간주하여 처리하게 된다. HTML 문서를 객체로 표현한 것을
DOM이라 하고 웹 브라우저를 객체로 표현한 것을 BOM이라고 하며, BOM이 DOM을 포함하고 있다.
모든 객체는 window 객체 아래에 있다. 브라우저에 있는 모든 것이 객체로 표현되기 때문에 자바스크립트에서는 객체
의 속성을 변경하고 객체의 메서드를 호출해주면 웹 브라우저에 대한 거의 모든 것을 제어할 수있다.
노드의 종류
DOM에 존재하는 노드는 다음과 같이 분류할 수 있다.
DOCUMENT_NODE - DOM 트리의 루트 노드이며 HTML 문서를 나타낸다.
window.document가 바로 DOCUMENT_NODE 타입의 노드이다.
ELEMENT_NODE - HTML 요소를 나타내는 노드이다. 즉 <body>, <sript>, <style>, <html>등을 나타내는 노드이다.
ATTRIBUTE_NODE - 속성을 나타내는 노드이다. 즉 class = "myClass"와 같은 속성을나타내는 노드이다.
TEXT_NODE - 요소 안에 들어 있는 텍스트를 나타내는 노드이다.
HTML 요소 찾기
자바스크립트를 이용해 HTML 요소를 조작하여 동적인 웹 페이지를 작성하려면 먼저 원하는 요소를 찾아야 한다.
+ id찾기
+ 태그 이름 찾기
id로 HTML 요소 찾기
DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소의 id를 이용하는 것이다.
var x = document.getElementById("main") //문서 안에서id가 "main"인 요소를 찾아서 반환한다.만약 요소가 발견되면 getElementById()는 요소를 객체 형태로 반환한다. 요소가 발견되지 않으면 x는 null이 된다.
여기서 주의할 점은 getElementById()는 요소가 가지고 있는 내용을 반환하는 것이 아니라 요소 자체를 반환한다는
점이다. 따라서 요소의 내용을 추출하려면 속성 innerHTML을 사용해야 한다. innerHTML은 요소가 가지고 있는 콘텐츠
를 가져온다. 따라서 innerHTML을 이용해 <div id="main">이 가지고 있는 콘텐츠를 추출할 수 있다.
alert(document.getElementById("main").innerHTML);입력 양식 찾기
forms 객체는 배열 형태로 document 객체의 하단에 존재하는 객체이다. 사실 HTML 문서 안 모든 입력 양식은 이 배열
안에 전부 들어있다. 따라서 배열 안에서 원하는 입력 양식을 찾아도 된다.
HTML 문서 안에 입력 양식이 많다면 forms 배열 안에 어떤 순서대로 들어가 있을까? 배열에는 HTML 내에서 기술된
순서대로 입력 양식이 들어가 있다. 예를 들어 다음과 같이 입력 양식이 하나만 포함되어 있다고 하면 오른쪽과 같이
참조할 수 있다.
<form> // document.forms[0]
<input type="text" value=''> // document.forms[0].elements[0]
<input type="text" value=''> // document.forms[0].elements[1]
</form>자바스트립트에서 배열의 요소는 이름으로 찾을 수도 있게 되어 있기 때문에 입력 양식과 입력 필드에 name 속성이
지정되어 있다면 요소를 찾기는 더욱 쉽다. 'key'와 'value'의 형태로 저장된다는 의미이다. 따라서 키로도 값을 찾을 수
있다.
<form name"myform"> // document.myform
<input type="text" id="target1" name="text1"> // document.myform.text1
<input type="text" id="target2" name="text2"> // document.myform.text2
</form>따라서 찾기는 더욱 쉬어진다.
태그이름으로 HTML 요소 찾기
비슷한 메서드로 getElementsByName() 메서드가 있다. 이 메서드는 태그의 이름을 인수로 받아서 이 태그를 사용하는
모든 요소를 배열에 얺어서 반환한다.
var eleArray = document.getElementsByTagName("div");eleArray : 배열로 반환된다. 첫 번째 요소는 eleArray[0]이다.
div : 문서 안 <div> 태그를 모두 찾아서 반환된다.
DOM 트리 순회
두 번째 방법은 자식 노드와 부모 노드 관계를 이용하여 한 노드씩 방문하는 방법이다.
이 방법은 childNodes[], nextSibling[], parentNode[]를 이용한다.
childNodes: 한 요소의 모든 자식 요소에 접근할 수 있다. 배열이 반환된다.
firstChild: 'childNodes' 배열의 첫 번째 자식 노드가 반환된다. 'childNodes[0]'와같다.
listChild: 'childNodes' 배열의 마지막 번째 자식 노드가 반환된다. 'childNodes[childNodes.length-1]'와 같다.
parentNode: 현재 노드의 부모 노드를 반환한다.
nextSibling: 현재 노드의 다음 노드를 반환한다.
previousSilbling: 현재 노드의 이전 형제 노드를 반환한다.
HTML 변경하기
자바스크립트를 이용하여 HTML 문서의 DOM을 변경하는 것도 다음의 3가지 경우로 나눌 수 있다.
HTML 문서가 직접 변경되는 것은 아니고 DOM만 변경된다는 것을 잊지 말자.
+ 요소의 내용 변경하기
+ 요소의 속성 변경하기
+ 요소의 스타일 변경하기
요소의 내용 변경하기
DOM을 사용하면 자바스크립트로 HTMl 요소의 내용을 쉽게 변경할 수 있다. HTML 요소의 내용을 변경하는 가장 쉬운
방법은 innerHTML 속성을 사용하는 것이다. innerHTML은 요소의 시작 태그와 종료 태그 사이에 놓여진 모든 HTML 코
드와 텍스트를 의미한다.
<div id = "main"> d이것이 div 요소입니다.<div>일반적으로 innerHTML 속성은 (텍스트)만 가지고 있을 수도 있고 (HTML+텍스트)일 수도 있다.
시작 태그와 종료 태그 사이의 내용을 변경하려면 innerHTML 속성에 원하는 내용을 대입해 주면 된다.
document.getElementById("main").innerHTML = "웹 페이지가 작성되었습니다.";요소의 속성 변경하기
요소가 가진 속성을 동적으로 변경하여 보자. HTML 요소의 속성을 본경하려면 다음과 같은 문법을 사용한다.
document.getElementById("image").src(속성이름) = "poodle.png(새로운 속성값)";HTML 문서는 id = "image"인 <img> 요소를 포함한다. DOM을 이용해 id = "image"인 요소를 얻는다.
버튼이 눌려지면 자바스크립트가 요소의 src 속성을 "pome.png"에서 poodle.png"로 변경된다.
요소의 스타일 변경하기
DOM과 자바스크립트를 사용하면 HTML 요소의 스타일도 얼마든지 동적으로 변경할 수 있다.
document.getElementById("p2").style.color = "blue";DOM노드 삭제와 추가
새로운 HTML 요소 생성
동적으로 웹 페이지에 새로운 요소를 만들어서 추가할 수 있을까? 자바스크립트를 사용하면 가능하다.
1. 추가하기를 원하는 노드를 생성한다.
2. 문서 내에서 추가할 위치를 찾는다.
3. 새로운 노드를 기존의 노드에 연결한다.
노드를 생성하는 것은 어렵지 않다. document객체의 createTextNode()메서드를 호출하면 된다.
document.createTextNode()는 텍스트 데이터를 가진 노드를 생성하여 반환한다.
var node = document.createTextNode("동적으로 추가된 노드");노드가 생성되면 문서 트리에서 노드를 추가할 위치를 찾아야 한다. 가장 많이 사용되는 방법이 id를 이용해서 탐색하
는 방법이다. id로 찾으려면 document.getElementById()를 호출한다.
이 메서드는 객체를 반환한다.
var parent = document.getElementById("terget");노드를 다른 노드에 자식 노드로 추가하려면 appendChild()를 사용한다.
parent.appendChild(node);만약 <div> 태그의 바로 뒤에 첫 번째 자식 노드를 추가하고 싶으면, 다음과 같은 문장을 사용한다.
inserBefore(node, document.getElementById('target').firstChild);기존 HTML 요소 삭제
HTML 요소를 삭제하려면 부모 노드를 알아야 한다. 부모 노드도 id를 알면 찾을 수 있다.
DOM의 구조상 반드시 삭제하고자 하는 요소와 그 부모 요소를 알아야 한다.
브라우저 객체 모델
브라우저 객체 모델
브라우저 객체 모델은 웹 브라우저가 가지고 있는 모든 객체를 의미한다. 최상위 객체는 window이고 그 아래로
navjgator, location, history, screen, document, frames[] 객체가 있다.
+ window - 메인 브라우저 윈도우
+ window.navjgator - 브라우저에 대한 정도(버전 번호와 같은 정보들)
+ window.screen - 사용자 화면
+ window.history - 사용자가 방문한 URL 저장
+ window.location - 현재 URL
+ window.frames - 브라우저 윈도우를 차지하고 있는 프레임들
+ window.document - 메인 브라우저에 표시된 HTML 문서
Window 객체
window 객체는 BOM에서 최상위 객체로서 웹 브라우저 윈도우를 나타내고 있다. 모든 전역 자바스크립트 객체, 함수,
변수는 자동적으로 window 객체의 멤버가 된다. 모든 전역 변수는 윈도우 객체의 속성이다. 모든 전역 함수는 윈도우
객체의 메서드 이다.
따라서 다음과 같은 문장은 동일하다.
alert("Hello World!"); == window.alert("Hello World!");window 객체는 어마어마한 속성과 메서드를 가지고 있다. 이 중에서 많이 사용되는 것만 살펴 보자.
open()과 close()
open() 메서드는 새로운 브라우저 윈도우를 오픈한다. 다음과 같은 매개 변수를 가진다.
window.open(URL, name, specs, replace);URL: 오픈할 페이지의 URL
name: 타켓을 지정하거나 윈도우의 이름
specs: 여러 가지 속성
replace: 히스토리 리스트에서 새로운 엔트리인지 아니면 현재 엔트리를 대체하는지 여부
setTimeout(), setInterval()
setTimeout() 메서드는 일정한 시간이 지난 후에, 인수로 전될된 함수를 한번만 호출한다. 시작의 단위는 밀리초이다.
setTimeout(code, millisec)code: 호출되는 함수으 이름. 호출되는 함수를 여기서 직접 정의할 수도 있다.
millisec: 1초는 3000millisec
setInterval() 메서드는 일정한 시간마다 주기적으로 함수를 호출한다. setInterval()은 반드시 개발자가 종료시켜야 한다.
시간의 단위는 밀리초이다.
주기적인 호출을 종료하려면 clearInterval()을 호출한다.
"중지" 버튼을 누를 때까지 글자를 깜빡이는 프로그램을 작성하여 보자.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
var id;
function changeColor() {
id = setInterval(flashText, 500);
}
function flashText() {
var elem = document.getElementById("target");
elem.style.color = (elem.style.color == "red") ? "blue" : "red";
elem.style.backgroundColor =
(elem.style.backgroundColor == "green") ? "yellow" : "green";
}
function stopTextColor() {
clearInterval(id);
}
</script>
</head>
<body onload="changeColor();">
<div id="target">
<p>This is a Text.</p>
</div>
<button onclick="stopTextColor();">중지</button>
</body>
</html>
moveTo(), moveBy()
자바스크립트를 이용하면 윈도우를 이동하는 것도 가능하다. 절대적인 위치로 이동하는 것은 moveTo()를 사용하고
상대적으로 이동하려면 moveBy()를 사용한다.
screen 객체
availHeight, availWidth 속성은 자바스크립트를 이용해 윈도우의 태스크 바를 가지리 않으면서 최대 크기로 윈도우를
오픈할 때 사용된다.
location객체
location 객체는 현재 URL에 대한 정보를 가지고 있다. location 객체는 window 객체의 일부로서 window.location을
통하여 접근된다.
이벤트 처리
onclick 이벤트
자바스크립트를 사용하면 사용자가 클립하는 것과 같은 이벤트가 발행하면 미리 정해놓은 코드가 실행되도록 할 수 있
다.
onload와 onunload 이벤트
사용자가 웹 페이지에 진입하거나 웹 페이지를 떠나면 각각 onload와 onunload 이벤트가 발생된다.
onload 이벤트를 이용하면 방문자의 브라우저 종류나 브라우저 버전을 알 수 있어서 적절한 버전의 웹 페이지를 로드
할 수 있다.
onchange 이벤트
onchange 이벤트는 입력 필드를 겁증할 때 종종 사용된다.
onmouseover 이벤트
onmouseover 와 onmouseout 이벤트는 사용자가 HTML 요소 위에 마우스를 올리거나 요소를 떠날 때 발생된다.
onmousedown, onmouseup, oncilck 이벤트
onmousedown, onmouseup, oncilck 이벤트는 모두 마우스 클릭과 관련된 이벤트 이다. 먼저 마우스 버튼이 클릭되면
onmousedown 이벤트가 발생된다. 이어서 마우스 버튼이 뗴어지면 onmouseup 이벤트가 발생하고 마지막으로 마우
스 클릭이 완료되면서 oncilck 이벤트가 발생한다.
폼의 유효성 검증
자바스크립트는 HTML 폼 안에 데이터를 서버로 보내기 전에 검증하는 데 많이 사용된다.
다음과 같은 사항을 검증할 수 있다.
+ 사용자가 필수적인 필드를 채웠는가?
+ 사용자가 유효한 길이의 텍스트를 입력하였는가?
+ 사용자가 유효한 이메일 주소를 입력하였는가?
+ 사용자가 유효한 날짜를 입력하였는가?
+ 사용자가 숫자 필드에 텍스트를 입려하지 않았는가?
폼 데이터 접근
사용자가 입력한 폼 데이터에 접근하기 위해서는 폼 안에 있는 필드의 id나 name 속성을 이용해야 한다.
<input type="text" id="add" name="addr">id 속성을 이용하려면 getElementById()를 사용해 요소를 찾으면 된다. 반면에 name속을 이용하려면 form 객체에서
name을 찾으면 된다. form 객체는 배열이고 각 배열 요소는 form["name"]과 같이 name속성으로 접근할 수 있다.
<input type="text" name="addr" onclick="display(this.form)"/>
function display(form) {
alert(form["addr"].value);
}공백 검증
가장 기초적인 데이터 검증은 필드가 비어 있는지를 체크하는 것이다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function checkNotEmpty(field) {
if (field.value.length == 0) {
alert("필드가 비어있네요!");
field.focus();
return false;
}
return true;
}
</script>
<form>
이름: <input type="text" id="user">
<input type="button"
onclick="checkNotEmpty(document.getElementById('user'))"
value="확인">
</form>
</body>
</html>
데이터 검증 길이
사용자가 정해진 개수의 문자만을 입력하도록 하는 경우도 있다.
아래 예제에서 checkLength() 함수는 텍스트 필드와 2개의 숫자를 인수로 받는다.
첫번째 숫자는 사용자가 입력해야 하는 최소 개수고 두번째 숫자는 최대 개수다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function checkLength(elem, min, max) {
var s = elem.value;
if (s.length >= min && s.length <= max) {
return true;
} else {
alert(min + "문자와" + max + "문자 사이로 입력해 주세요!")
elem.focus();
return false;
}
}
</script>
<form >
이름 (6~8 문자): <input type="text" id="name">
<input type="button"
onclick="checkLength(document.getElementById('name'), 6, 8)"
value="확인">
</form>
</body>
</html>
정규식
정규식이란 특정한 규칙을 가지고 있는 문자열을 표현하는 수식이다. 정규식은 많은 테스트 에디터와 프로그래밍 언어
에서 문자열의 검색과 치환을 위해 사용되고 있다. (특히 UNIX 계열의 운영체제에서 그렇다.)
^[0-9] + abc$^: 문자열의 시작
[0-9]: 0부터 9까지의 문자 중의 하나
+: 한번 이상의 반복
abc: 문자열 "abc"
$: 문자열의 끝
숫자나 문자 입력 검증
사용자가 번호와 같은 정보를 입력하면 웹 페이지는 이들이 모두 숫자로 되어 있다는 것을 검증해야 한다. 숫자로만
된 데이터를 검증하는 가장 좋은 방법은 정규 표현식을 사용하는 것이다. /^[0-9]+$/은 문자열이 모두 숫자로만 되어
있어야 일치한다.
선택 검증
HTML select 필드에서 사용자가 선택을 했는지 검증하려면 첫 번째 옵션을 도움말로 두고 만약 사용자가 선택을 하지
않았다면 문구가 반환되게 한다.
'Wep Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트를 이용한 미니 게임 만들기(골 넣기 게임) (1) | 2020.07.18 |
|---|---|
| 11. 자바스크립트와 캔버스로 게임 만들기 (0) | 2020.07.16 |
| 9. 자바스크립트 객체 (0) | 2020.06.24 |
| 8. 자바스크립트 기초 (0) | 2020.06.18 |