/*
객체 생성자 함수는 new 연산자로 메모리를 생성하여 활용한다.
또한 함수내에서 this 키워드도 활용이 가능하다.
****************중요****************
this 키워드로 속성 및 메서드 작업시 외부에서 접근이 가능하다
*/
//this 키워드 없이 함수 작업
var myFn1 = function(){
//함수 내부에 var 라는 키워드로 변수 선언시 외부에서 접근 불가
var name = '홍길동';
//this 키워드로 변수 선언시 외부에서 접근이 가능하다.
this.age = 20;
}
var my = new myFn1();
//new 연산자를 통하여 메모리 할당시 객체(object) 형태로 메모리 할당
console.log(my);
new 연산자를 통해 메모리 할당시 객체(object) 형태로 메모리 할당.
** var 키워드로 선언한 변수 name에는 접근이 불가능하다.
** this 키워드로 선언한 변수 age 에는 접근이 가능하다.
prototype
var MyFn1 = function(){
//함수 내부에 var 라는 키워드로 변수 선언시 외부에서 접근 불가
var name = '홍길동';
//this 키워드로 변수 선언시 외부에서 접근이 가능하다.
this.age = 20;
this.fn = function(){
console.log('메서드 호출');
}
this.setName = function(setName){
name = setName;
}
this.getName = function () {
return name;
}
}
//prototype으로 객체를 생성할 때 함수를 등록하는 기본형 (확장시킬 때 이용)
MyFn1.prototype.setAge = function(changeAge){
this.age = changeAge;
}
MyFn1.prototype.getAge = function(){
return this.age;
}
프로토타입을 사용하여 등록한 함수는 원형(객체 생성자함수)에서 생성된 객체를 공유할 수 있다.
/*
실습 3. fn함수와 obj객체가 있다. fn함수를 실행할 때 obj를 인수로 넘기고
fn함수 실행시 obj 내부에 있는 n1, n2 속성값을 합산시켜
결과값을 반환하여라.
*/
var obj = {n1 : 10, n2 : 20};
var fn = function (o) {
var result = o.n1 + o.n2;
return result;
}
var result = fn(obj);
console.log(result);
문서객체모델
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서객체모델</title>
<script type="text/javascript">
/*
dom -> 문서객체모델 : Document Object Model
문서의 정보가 담겨있다.
document 라는 변수명으로 문서에 접근할 수 있다.
*/
</script>
</head>
<body>
</body>
</html>
문서 객체 모델
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서객체모델</title>
<script type="text/javascript">
/*
dom -> 문서객체모델 : Document Object Model
문서의 정보가 담겨있다.
document 라는 변수명으로 문서에 접근할 수 있다.
<< 객체 검색 메서드 >>
- id 검색 : document.getElementById('아이디명');
- tag명 검색 : document.getElementsByTagName('태그명');
- class명 검색 : document.getElementsByClassName ('클래스명');
- 속성 name 값 검색 : document.네임명 (**name이라는 속성은 form객체에만 적용**)
//폼 하위 접근
ex) document.myForm.myName;
document.getElementById('myForm').myName;
//폼 객체에 접근시 폼 객체의 속성에 접근할 수 있다.
ex) var myName = document.myForm.myName;
console.log(myName.value);
//태그 검색과 삽입
innerHTML, innerText의 속성으로 접근 및 요소값 변경 가능
ex) var myTag = document.getElementById('myTag');
myTag.innerHTML = '<h2>한국스마트정보교육원</h2>';
//다중 객체 접근하여 반복문 풀기
var checkArray = document.getElementsByClassName('myCheck');
for(var i = 0; i <checkArray.length ; i++){
checkArray[i].checked = true;
}
//체크된 체크박스의 value만 콘솔에 출력하기
for(var i = 0; i <checkArray.length ; i++){
if(checkArray[i].checked){
console.log(checkArray[i].value);
}
}
//form 태그에 포커스 잡기
//마지막에 선택된 객체에 속성 focus()로 접근 가능
객체.focus() : 해당 객체에 커서 이동하기
//form 객체 속성 변경 및 submit 하기
var myForm = document.getElementById('myForm');
myForm.action = './';
myForm.method = 'post';
myForm.submit(); // action속성으로 전송
*/
console.log('상위에서 객체 검색', document.getElementById('myForm'));
</script>
</head>
<body>
<form id="myForm" name = "myForm">
<input type = "text" name = "myName">
<input type = "text" name = "myAge">
<input type = "checkbox" name = "add" value = "전주" class = "myCheck" checked= "checked">
<input type = "checkbox" name = "add" value = "군산" class = "myCheck">
<input type = "checkbox" name = "add" value = "익산" class = "myCheck">
<button type = "button" id="myBtn">버튼</button>
</form>
<div id = "myTag">
<h1>안녕하세요.</h1>
</div>
<script type="text/javascript">
console.log('하위에서 객체 검색', document.getElementById('myForm'));
</script>
</body>
</html>
문서를 읽는 순서는 위에서 아래 방향이기 때문에 script의 위치는 html의 하단에 위치해야 한다.
객체 검색 메서드
document.getElementById();를 통해 form에 접근하여 value를 변경할 수 있다.
document.getElementById();를 통해 <div> 태그에 접근하여
innerHTML을 사용해 html을 변경할 수 있다.
document.getElementByClassName();를 통해 객체에 접근하여 객체 내부의 값을 array로 get 가능. array를 for 반복문으로 값을 추출, 변경할 수 있다.
버튼 클릭시 함수를 호출하는 이벤트 발생
var myFunction = function() {
console.log('함수호출')
}
<html>
<body>
<form id="myForm" name = "myForm">
<input type = "text" name = "myName">
<input type = "text" name = "myAge">
<input type = "checkbox" name = "add" value = "전주" class = "myCheck" checked= "checked">
<input type = "checkbox" name = "add" value = "군산" class = "myCheck">
<input type = "checkbox" name = "add" value = "익산" class = "myCheck">
<button type = "button" id="myBtn" onclick="myFunction();">버튼</button>
</form>
<div id = "myTag">
<h1>안녕하세요.</h1>
</div>
</body>
<script type="text/javascript">
console.log('하위에서 객체 검색', document.getElementById('myForm'));
var myFunction = function() {
console.log('함수호출')
var myForm = document.getElementById('myForm');
console.log('myName : ', myForm.myName.value);
console.log('myAge : ', myForm.myAge.value);
var checkArray = document.getElementsByClassName('myCheck');
for(var i = 0; i <checkArray.length ; i++){
if(checkArray[i].checked){
console.log(checkArray[i].value);
}
}
}
</script>
</html>
문서 객체 모델 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 모델</title>
</head>
<body>
<form action="./domEx01.html" method="get" id = "mF">
<input type = "text" name="memberName">
<input type = "number" name="memberAge">
<button type = "button" onclick="v();" >전송하기</button>
</form>
<script type="text/javascript">
/*
실습 4.위의 전송하기 버튼 클릭시 input 태그의 값을 콘솔창에 출력시키고 submit 시키시오.
*/
var mF = document.getElementById('mF');
var v = function() {
console.log(mF.memberName.value);
console.log(mF.memberAge.value);
mF.submit();
}
</script>
</body>
</html>
/*
실습 1. 아래와 같이 선언된 객체가있다. 해당 객체에는
name, memberArray, filter 라는 속성이 있으며
name 은 문자열 memberArray는 배열, filter는 함수값을 가지고 있다.
filter 함수(메서드)를 실행시키고 인수값에 들어간 사람의 정보와
memberArray의 정보에 일치하는 사람의 명을 name이라는 속성에 대입시키고 obj 라는 객체를 출력시켜라
*/
var obj = {
name : '',
memberArray : ['홍길동','홍길순','이순신'],
filter : function(name){
for(var i = 0 ; i< this.memberArray.length ; i++){
if (this.memberArray[i] == name){
this.name = name;
}
}
}
};
obj.filter('입력명');
console.log(obj);
memberArray 배열에 없는 이름을 입력했을 경우 :: obj.name에 대입되지 않음
memberArray배열에 존재하는 값을 입력했을 경우 :: obj.name에 대입됨.
/*
실습 2. myArray라는 배열이 있다. myFn함수를 실행시켜 myArray 배열의 값을 합산하여 총 합산값을 리턴하여 결과값을 출력시켜라.
*/
var myArray = [10,20,30,40,50];
var myFn = function(){
var result = 0;
for(var i = 0 ; i < myArray.length ; i++){
result += myArray[i];
}
return result;
}
console.log(myFn());
<%@ include file="/module/top.jsp" %> <%@ include file="/module/left.jsp" %>
JSP 문법 구조
<% %> : 자바코드 : scriptlet(스크립트릿)
<%@ %> : 하나의 jsp 설정 : Directive(디렉티브)
<%= %> : 변수에 담겨있는 값을 출력하는 방법 중 하나 : 표현식
<%! %> : 메서드 선언부 -> 향후 자바코드로 빠지면 안쓴다
<%-- --%> : 주석 ( Ctrl + Shift + / )
index 레이아웃 전체
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
상단 메뉴 <br/><br/>
<a href="<%= request.getContextPath() %>/user/user_insert_form.jsp">01회원가입</a>
<a href="<%= request.getContextPath() %>/user/user_list.jsp">02회원리스트</a>
<a href="#">03상품등록</a>
<a href="#">04상품리스트</a><br/>
<form action="<%=request.getContextPath()%>/login/login_pro.jsp" method="post">
아이디 : <input type = "text" name = "id">
비 번 : <input type = "text" name = "pw">
<input type ="submit" value = "로그인">
</form>
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn">
왼쪽 메뉴 <br/>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<a href="#">Download this CSS Layout</a>
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer">
하단 메뉴 <br/>
한국스마트정보교육원 063-717-1008 ksmart.or.kr
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
top
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
/module/top.jsp<br/>
상단 메뉴 <br/><br/>
<a href="<%= request.getContextPath() %>/user/user_insert_form.jsp">01회원가입</a>
<a href="<%= request.getContextPath() %>/user/user_list.jsp">02회원리스트</a>
<a href="#">03상품등록</a>
<a href="#">04상품리스트</a><br/>
<form action="<%=request.getContextPath()%>/login/login_pro.jsp" method="post">
아이디 : <input type = "text" name = "id">
비 번 : <input type = "text" name = "pw">
<input type ="submit" value = "로그인">
</form>
</div>
<!-- End Header -->
left
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Begin Left Column -->
<div id="leftcolumn">
/module/left.jsp <br/>
왼쪽 메뉴 <br/>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
hadan
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer">
/module/hadan.jsp <br/>
하단 메뉴 <br/>
한국스마트정보교육원 063-717-1008 ksmart.or.kr
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
index에 include
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/main.css" />
</head>
<body>
<%@ include file="/module/top.jsp" %>
<%@ include file="/module/left.jsp" %>
<a href="#">Download this CSS Layout</a>
<%@ include file="/module/hadan.jsp" %>
</body>
</html>
