텍스트박스(<input type="text"> 태그) 객체 다루기
1. value 속성.
//Script40.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var id = document.getElementById("id");
var pw = document.getElementById("pw");
var msg = document.getElementById("msg");
msg.style.display = "none";
var result = document.getElementById("result");
//공백 제거 기능 추가 필요.-> 사용자 함수 구현 -> trim()함수 (자바스크립트에는 이 함수가 없음.)
if (id.value == "" || pw.value == "") {
msg.style.display = "inline";
id.focus();
} else {
if(id.value=="admin" && pw.value =="1234") {
result.innerHTML = "회원으로 로그인 되었습니다.";
} else {
result.innerHTML = "아이디 또는 패스워드가 틀렸습니다.";
}
}
}
</script>
</head>
<body>
<div>
<h2>텍스트 박스 객체 다루기</h2>
<form>
아이디<input type="text" id="id">
패스워드<input type="password" id="pw">
<input type="button" value="로그인" onclick="myFunc()">
<span id="msg" style="color:red; display:none;">아이디 또는 패스워드를 채워야 합니다.</span>
</form>
<h3>출력----------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
2. readonly, disabled 속성
//Script41.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myCheck(obj) {
var id = document.getElementById("id");
var pw = document.getElementById("pw");
var btn = document.getElementById("btn");
if(obj.checked) {
//약관동의 선택한 경우
//아아디, 패스워드 입력가능상태로 변경
//회원가입버튼을 사용가능상태로 변경
id.readOnly = false;
pw.readOnly = false;
btn.disabled = false;
} else {
//약관동의 취소한 경우
//아이디, 패스워드에 입력된 데이터 삭제
//아아디, 패스워드 입력 불가 상태로 변경
//회원가입버튼을 사용 불가 상태로 변경
id.value = "";
pw.value = "";
id.readOnly = true;
pw.readOnly = true;
btn.disabled = true;
}
}
function myFunc() {
var id = document.getElementById("id");
var pw = document.getElementById("pw");
//공백 제거 기능 추가 필요.-> 사용자 함수 구현 -> trim()함수 (자바스크립트에는 이 함수가 없음.)
if (id.value == "" || pw.value == "") {
msg.style.display = "inline";
id.focus();
} else {
result.innerHTML = "회원으로 가입되었습니다.";
}
}
</script>
</head>
<body>
<div>
<h2>텍스트 박스 객체 다루기</h2>
<form>
<input type="checkbox" id="check" onclick="myCheck(this)"> 약관동의<br>
아이디<input type="text" id="id" readOnly="readOnly"><br>
패스워드<input type="password" id="pw" readOnly="readOnly"><br>
<input type="button" id="btn" value="회원가입" onclick="myFunc()" disabled="disabled">
<span id="msg" style="color:red; display:none;">아이디 또는 패스워드를 채워야 합니다.</span>
</form>
<h3>출력----------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
선택목록(<select> 태그) 객체 다루기
1. selected 속성, onchange 이벤트 지원
//Script42.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc(obj) {
var emailAddr = obj.options[obj.selectedIndex].value;
var email02 = document.getElementById("email02");
if (emailAddr == "2") {
//직접입력.
email02.value = "";
email02.readOnly = false; //Only 에서 O는 대문자 표기
email02.focus();
} else {
email02.readOnly = true;
email02.value = emailAddr;
}
}
</script>
</head>
<body>
<div>
<h2>선택목록 객체 다루기</h2>
<form>
이메일
<input type="text" id="email01">
@
<input type="text" id="email02" readOnly="readOnly">
<select id="emailAddr" onchange="myFunc(this)">
<option value="">선택</option>
<option value="naver.com" selected="selected">naver.com</option>
<option value="nate.com">nate.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="2">직접입력</option>
</select>
</form>
</div>
</body>
</html>
//Script43.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc(obj) {
var jikwi = obj.options[obj.selectedIndex].value;
var msg = document.getElementById("msg");
var basicpay = document.getElementById("basicpay");
msg.style.display = "none";
switch(jikwi) {
case "1":
msg.style.display = "inline";
msg.innerHTML = "100만원 이상";
break;
case "2":
msg.style.display = "inline";
msg.innerHTML = "120만원 이상";
break;
case "3":
msg.style.display = "inline";
msg.innerHTML = "200만원 이상";
break;
}
basicpay.focus();
}
</script>
</head>
<body>
<div>
<h2>선택목록 객체 다루기2</h2>
<form>
직위
<select id="jikwi" onchange="myFunc(this)">
<option value="1">사원</option>
<option value="2">대리</option>
<option value="3">과장</option>
</select><br>
기본급
<input type="text" id="basicpay" style="width:80px;">
<span id="msg" style="color:red;display:none;"></span>
<br>
<input type="button" value="직원등록">
</form>
</div>
</body>
</html>
윈도우(브라우저 자신) 객체 다루기
1. window 객체는 자바스크립트에서는 브라우저 자신을 의미.
2. 최상위 객체. 생략 가능.
3. 팝업창을 생성할 때 window.open(), window.close() 사용.
//Script44.html -> 부모창
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myPopup() {
window.open("Script44_1.html", "popup", "width=200, height=400");
//window.open("http://www.gmarket.co.kr/popup/indexPopunder.html", "popup", "width=400, height=450");
}
</script>
</head>
<body onload="myPopup()">
<div>
<h2>윈도우 객체 다루기</h2>
<p>
<a href="javascript:myPopup()" >로그인 전용 화면</a>
</p>
</div>
</body>
</html>
//Script44_1.html -> 자식창
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div>
<h3>광고 페이지</h3>
<a href ="javascript:window.close();">close</a>
</div>
</body>
</html>
DOM (Document Object Model)
1. HTML 태그를 객체로 받아들여서 객체를 다루는 명령.
2. 태그 수정, 삭제, 추가 등이 가능하다.
//DOM01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
//Node - 엘리먼트, 속성 등의 객체
//Element - 태그 객체
//Attribute - 속성 객체
var parent = document.getElementById("target");
var str = "";
/*
var nodeList = parent.childNodes;
str += "nodeList.length : " + nodeList.length + "<br>";
for (var a=0; a<nodeList.length; a++) {
str += "nodeList[" + a + "].nodeType : " + nodeList[a].nodeType + "<br>";
str += "nodeList[" + a + "].nodeValue : " + nodeList[a].nodeValue + "<br>";
}
//nodeType이 1이면 엘리먼트
//nodeType이 2이면 속성
//nodeType이 3이면 텍스트
var pnode = nodeList[0]; //첫 번째 <p> 엘리먼트
var textnode = pnode.childNodes[0]; // <p> 엘리먼트의 텍스트
str += "textnode.nodeValue : " + textnode.nodeValue; // <p> 엘리먼트의 텍스트 값
*/
//순차적으로 텍스트 노드를 접근해서 출력
var pNodes = parent.childNodes;
for (var a=0; a<pNodes.length; a++) {
str += pNodes[a].firstChild.nodeValue + "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>DOM</h2>
<form>
<input type="button" value="DOM테스트" onclick="myFunc()">
</form>
<div id="target"><p>첫번째 문장</p><p>두번째 문장</p><p>세번째 문장</p></div>
<h2>출력 --------------------------</h2>
<div id="result"></div>
</div>
</body>
</html>
//DOM02.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc(status) {
var ulNode = document.getElementById("subjectLists");
var liNodes = ulNode.childNodes;
for (var a=0; a<liNodes.length; a++) {
var inputNode = liNodes[a].firstChild;
if(inputNode.nodeType == 1) {
inputNode.checked = status;
}
}
}
</script>
</head>
<body>
<div>
<h2>DOM 테스트 2</h2>
<div>
<a href="javascript:myFunc(true)">전체선택</a> / <a href="javascript:myFunc(false)">전체해제</a>
</div>
<form>
<h3>강의 가능 과목</h3>
<!-- <ul> 태그에서 <li> 태그 입력시 줄바꿈 처리하지 말것-->
<ul id="subjectLists" style="list-style:none"><li><input type="checkbox">Java SE</li><li><input type="checkbox">Oracle</li><li><input type="checkbox">JSP & Servlet</li></ul>
</form>
</div>
</body>
</html>
//DOM03.html
문제) 자바스크립트의 DOM 기능을 이용해서 방명록을 작성할 것.
-> wedding.html 파일 및 img 폴더를 이클립스에 복사해서 사용할 것.
-> 번호 및 날짜는 자바스크립트에서 자동 입력되도록 할 것.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>홍길동, 박길순 결혼식 청접장</title>
<style type="text/css">
.style1 {color:red;}
a {
text-decoration: none;
color:gray;
}
a:hover {
text-decoration: underline;
color:red;
}
</style>
<script type="text/javascript">
function textCountCheck(obj, target) {
var len = obj.value.length;
var targetObj = document.getElementById(target);
targetObj.innerText = len;
}
//테이블 동적 생성
function guestFormSubmit() {
var count = 2;
var name = document.getElementById("uname");
var content = document.getElementById("content");
var trNode = document.createElement("tr");
var tdNode = createTdNode(count++);
tdNode.setAttribute("align", "center");
trNode.appendChild(tdNode);
tdNode = createTdNode(name.value);
tdNode.setAttribute("align", "center");
trNode.appendChild(tdNode);
trNode.appendChild(createTdNode(content.value));
tdNode = createTdNode(getSysTime());
tdNode.setAttribute("align", "center");
trNode.appendChild(tdNode);
tdNode = document.createElement("td");
tdNode.appendChild(createDelBtnNode());
tdNode.setAttribute("align", "center");
var tableNode = document.getElementById("result");
var tbodyNode = tableNode.firstChild;
tbodyNode.appendChild(trNode);
name.value = "";
content.value = "";
name.focus();
}
function createTdNode(val) {
//<td>val</td>
var txtNode = document.createTextNode(val);
var tdNode = document.createElement("td");
tdNode.appendChild(txtNode);
return tdNode;
}
//시스템 시간찍기
function getSysTime() {
var d = new Date();
var s =
leadingZeros(d.getHours(), 2) + ':' +
leadingZeros(d.getMinutes(), 2) + ':' +
leadingZeros(d.getSeconds(), 2);
return s;
}
//숫자의 자리수 를 0으로 채우기
function leadingZeros(n, digits) {
var zero = '';
n = n.toString();
if (n.length < digits) {
for (i = 0; i < digits - n.length; i++)
zero += '0';
}
return zero + n;
}
//테이블 삭제 전용 버튼 처리 함수
function createDelBtnNode() {
var btn = document.createElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("value", "삭제");
btn.onclick = function() {
deleteNode(this);
};
return btn;
}
function deleteNode(obj) {
if (confirm("삭제할까요?")) {
var tdNode = obj.parentNode;
var trNode = tdNode.parentNode;
var tbodyNode = trNode.parentNode;
tbodyNode.removeChild(trNode);
}
}
</script>
</head>
<body>
<div>
<div><a href="">[Admin Login]</a></div>
<img src="img/WeddingPhoto.jpg" width="400" height="300">
<div>
<h3>홍길동, 박길순의 결혼식 청첩장 사이트</h3>
일시 : 2013.01.23 <span class="style1">(D-48</span>)</span><br>
장소 : KH정보교육원<br>
찾아오시는 방법 : 지하철 2호선 당산역 3번 출구 동화빌딩 3층<br>
<br>
</div>
<div>방명록에 글을 남겨주세요~</div>
<form>
<table>
<tbody>
<tr>
<td>글쓴이</td>
<td>
<input type="text" id="uname" name="uname"
onkeyup="textCountCheck(this, 'nameLen')">
(<span id="nameLen" class="style1">0</span>/50)
</td>
</tr>
<tr>
<td>글내용</td>
<td>
<input type="text" size="80" id="content" name="content"
onkeyup="textCountCheck(this, 'contentLen')">
(<span id="contentLen" class="style1">0</span>/200)
<a href="javascript:guestFormSubmit()">[글쓰기]</a>
</td>
</tr>
</tbody>
</table>
</form>
<table cellpadding="3" border="1" id="result"><tbody><tr><th width="60">번호</th><th width="100">글쓴이</th><th width="400">글내용</th><th width="180">작성일</th></tr><tr><td align="center">1</td><td align="center">주인장</td><td>많은 참석 바랍니다.</td><td align="center"></td></tr></tbody></table>
</div>
</body>
</html>
사용자 정의 객체
1. 객체는 사용자 정의 객체와 내장 객체로 구분.
2. 객체의 멤버인 속성과 메소드는 .(dot) 연산자를 이용해서 접근.
3. 사용자 정의 객체 형식
//객체명은 첫 글자를 대문자로 표기
function 객체명(인자리스트) {
//속성 정의
this.멤버명 = 값;
//메소드 정의
this.메소드명 = function(인자리스트) {
//실행문;
};
}
//객체 생성
new 변수 = new 객체명();
//접근 방법
변수.멤버명
변수.메소드명();
변수.멤버명 = 값; -- setter의 역할과 비슷.
var 변수 = 변수.멤버명; -- getter의 역할과 비슷.
변수.메소드명(); -- 리턴값없을때 실행하고 끝
var 변수 = 변수.메소드명(); -- 리턴값있을때 실행과 동시에 리턴값 변수에 저장
//OOP01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
//사용자 객체 정의
function Blog(body, date) {
//속성 정의
this.body = body; //매개변수 body를 속성에 셋팅
this.date = date; //매개변수 date를 속성에 셋팅
}
//객체 생성 -> 배열에 저장
var blog = [new Blog("사용자 정의 객체 테스트", "2012-11-13") // 배열 선언과 동시에 값지정.
,new Blog("생성자 작성시 첫글자는 대문자", "2012-11-14")
,new Blog("new연산자를 이용해서 객체생성", "2012-11-15")];
var str = "";
//객체의 하위 멤버(속성) 접근
for (var a=0; a<blog.length; a++) {
str += blog[a].body + " / ";
str += blog[a].date + "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>사용자 정의 객체</h2>
<form>
<input type="button" value="사용자 정의 객체" onclick="myFunc()">
</form>
<h3>출력--------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
//OOP02.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
//객체 생성 - 현재 시스템 날짜 리턴
var date = new Date();
//Date 객체의 하위 멤버(메소드) 접근
var str = "";
str += date.getFullYear() + "<br>";
str += (date.getMonth()+1) + "<br>";
str += date.getDate() + "<br>";
str += date.getDay() + "<br>";
str += date.getTime() + "<br>";
str += date.toDateString() + "<br>";
str += date.toLocaleDateString() + "<br>";
str += date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
//YYYY-MM-DD 형식 문자열 -> 사용자 정의 형식 필요
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>내장 객체</h2>
<form>
<input type="button" value="내장 객체" onclick="myFunc()">
</form>
<h3>출력--------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
//OOP03.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
//사용자 객체 정의
function Blog(body, date) {
//속성 정의
this.body = body; //매개변수 body를 속성에 셋팅
this.date = date; //매개변수 date를 속성에 셋팅
/* //메소드 정의 -> 인스턴스 형식
//YYYY-MM-DD 형식의 날짜 문자열
this.toUserDateString = function(date) {
var result = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
return result;
}; */
//메소드 정의 -> 스태틱 형식 (prototype)
//YYYY-MM-DD 형식의 날짜 문자열
Blog.prototype.toUserDateString = function(date) {
var result = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
return result;
};
}
//객체 생성 -> 배열에 저장
var blog = [new Blog("사용자 정의 객체 테스트", new Date("2012-11-13")) // 배열 선언과 동시에 값지정.
,new Blog("생성자 작성시 첫글자는 대문자", new Date("2012-11-14"))
,new Blog("new연산자를 이용해서 객체생성", new Date("2012-11-15"))];
var str = "";
//객체의 하위 멤버인 날짜를 기준으로 정렬 추가
blog.sort(
function(obj1, obj2) {
//return obj1.date - obj2.date; //ACS
return obj2.date - obj1.date; //DESC
}
);
//객체의 하위 멤버(속성, 메소드) 접근
for (var a=0; a<blog.length; a++) {
str += blog[a].body + " / ";
str += blog[a].toUserDateString(blog[a].date) + "<br>";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>사용자 정의 객체</h2>
<form>
<input type="button" value="사용자 정의 객체" onclick="myFunc()">
</form>
<h3>출력--------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
