StudyServer
web, server, java, spring 등.. 공부한 것을 기록하는 장소 입니다. 공부하면서 정리하였기 때문에 틀린 내용이 있을 수 있습니다. 이야기 해주시면 수정하겠습니다.
HOME /About /algorithmus /db /front /git /java /ml /search /server /spring

JavaScript jquery

2018-12-13 00:00:00 +0000

JQuery

  • DOM스크립팅과 Ajax 복잡성을 쉽게 다루기 위해 만듬
  • 소스의 단순화, 다양한 플러그인, 타 프레임웍보다 빠름
  • 웹표준을 지킴(따로 구버전,신버전 처리 따로 안해도 됨)
  • https://developers.google.com/speed/libraries/#jquery
  • 제일 간단하게 사용하는 법 : script에 jquery 사용 선언
< script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  • $function(){} : onload 와 같다. 리소스 로드 전 호출

선택자

  • 기본세렉터
  • $() : 팩토리함수. jquery 객체를 생성할 때 사용
  • 자식태그는 부모 태그 바로 아래에 있는 태그. 자손태그는 부모 태그 바로 아래모든 태그

Selector|설명 ——-|——- E|태그명이 E인 모든 엘리먼트 E F|E의 자손이면서 태그명이 F인 모든 엘리먼트 E > F|E의 바로 아래 자식이면서 바로 다음에 나오는 엘리먼트 E + F|E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트F E ~ F|E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F E . C 태그명이 E인 모든 엘리먼트 중 클래스명이 C인 엘리먼트

Selector 설명
E[A=V] 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E
E[A^=V] 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트
E[A$=V] 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트
E[A*=V] 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트
  • 고급 셀렉터
Selector 설명
:first 첫번째 엘리먼트
:last 마지막 엘리먼트
:first-child 첫번째 자식 엘리먼트
:last-child 마지막 자식 엘리먼트
:nth-child(n) n번째 자식 엘리먼트
:nth-child(even or odd) 짝수 또는 홀수 자식 엘리먼트
:even 짝수 엘리먼트
:odd 홀수 엘리먼트

jquery 예제

  • 클래스 selected-plays의 자손인데 엘리먼트가 li인 것만 ‘horizontal’ 스타일 적용
$('#selected-plays>li').addClass('horizontal');
  • horizontal class가 아닌 li엘레멘트에 ‘sub-level’ 스타일 적용
$('li:not(.horizontal)').addClass('sub-level');
  • 주소값(속성 href)이 pdf로 끝나는 a 엘레먼트에 ‘pdflink’ 스타일 적용
$('a[href $=pdf]').addClass('pdflink');
  • 주소값(속성 href)이 mailto로시작하는 a엘레먼트에 ‘mailto’ 스타일 적용
$('a[href ^=mailto]').addClass('mailto');
  • 주소값에 mailto를 포함하는 모든 a 엘레먼트에 ‘mailto’ 스타일 적용
$('a[href *= henry]:not(.mailto)').addClass('henrylink');
  • tr 엘레먼트에서 홀수번째에 있는 요소는 ‘alt’ 스타일 적용
  • odd는 홀수에 적용하지만 인덱스가 0부터 시작하므로 1번째 인덱스부터 홀수로 적용
$('tr:odd').addClass('alt');                    // 홀수지만 짝수번 부터 시작됨(인덱스 0부터이므로)
  • 첫번째 요소를 홀수로 치고 싶다면 nth-child(odd)를 사용한다
$('tr:nth-child(odd)').addClass('alt');     //nth는 홀수
  • 필터에 명시한 엘레먼트 적용 (‘tr:odd’와 같다)
$('tr').filter(':odd').addClass('alt');
  • 테이블에서 Henry값을 가진 엘레먼트를 찾고 ‘alt’ 스타일 적용
$('td:contains(Henry)').addClass('highlight');
  • ajax 예제 jquery로 수정
<!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" src="httpRequest.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
       
       function startSuggest(){
             var keyword = $('[name="keyword"]').val();          // name이  keyword인 태그의 값을 가져오기
             var params = "keyword=" + encodeURIComponent(keyword);
             sendRequest("suggest.jsp", params, displayResult, "POST");
       }
       
       function displayResult(){
             if(httpRequest.readyState == 4){
                    if(httpRequest.status == 200){
                          var html="";
                          var result = httpRequest.responseText;
                          var keywardList = result.split(',');
                          for(var i=0;i<keywardList.length;i++){
                                 var str = keywardList[i].trim();
                                 html += "<a href=javascript:select('"  + str  + "')>" + str + "</a>
";
                          }
                          
                          $('#suggestList').html(html);
                          show('suggest');
                    }
             }
       }
       
       function show(elementId){
             $('#'+elementId).css('display', '');
       }
       
       function select(selectKeyward){
             $('[name="keyword"]').val(selectKeyward);
             hide('suggest');
       }
       
       
       function hide(elementId){
             $('#'+elementId).css('display', '');
       }
       
</script>
</head>
<body>
       <form name="search" onkeyup="startSuggest()">
             <input type="text" name="keyword">
             <input type="button" value="전송">
       </form>
       
       <div id="suggest" style="position: absolute; left: 10px">
             <div id="suggestList"></div>
       </div>
</body>
</html>

JavaScript dom

2018-12-13 00:00:00 +0000

브라우저 관련 객체

  • 웹 브라우저와 관련된 객체 집합
  • Window 객체 : 인터넷창과 관련된 객체 정보
  • Screen 객체 : 운영체제 화면의 속성을 갖는 객체
  • Location 객체 : 웹브라우저의 주소 표시줄과 관려된 객체, 페이지 이동 시 많이 사용됨
  • Navigator 객체 : 웹 페이지를 실행하고 있는 브라우저에 대한 정보
  • window는 최상위 객체이므로 window 안붙이고 사용할 수 있다(ex. window.alert() 함수)
  • open(URL, 이 인터넷창의 이름(통신할 때 필요), 윈도우 옵션)
  • open : 새로운 window 객체를 생성. 새로운 인터넷 브라우저 창이 열린다
  • exam.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function winOpen(){
       window.open('address.html', '주소검색', 'width=200,height=200');  //  자식윈도우 생성
       
}
</script>
</head>
<body>
       <form name="fmt">
       주소:<input type='text' name='addr'>
       <input type="button" value="주소검색" onclick="winOpen()">
</form>
</body>
</html>
  • address.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){      // html을 다 읽고 난 후에
       var links = document.getElementsByTagName('a');     //  getElementsByTagName : 배열을 리턴함
       for(var i=0; i<links.length; ++i){
             links[i].onclick = function(){
                    window.opener.document.fmt.addr.value = this.innerHTML;
                    self.close();
             }
       }
}
</script>
</head>
<body>
<ul>
<li><a href="#">서울시 강남구 대치동</a></li>
<li><a href="#">서울시 금천구 가산동</a></li>
<li><a href="#">경기도 화성시 능동</a></li>
</ul>
</body>
</html>

onload이벤트 속성

  • window 객체 로드가 완료되는 때 : 모든 태그가 화면에 올라갔을 때(html 다 읽었을 때)
  • html 다 읽었을 때 window.onload 함수 호출
  • 아래 예제 실행 시 자바스크립트->body부분->onload 순으로 호출 되는 것을 알 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
       alert('Process-event');
}
alert('Process-0')
</script>
</head>
<body>
<h1>Process-1</h1>
<script>alert('process-2')</script>
<h2>Process-2</h2>
<script>alert('process-3')</script>
</body>
</html>

DOM

  • Document Object Model
  • 객체지향 모델로써 구조화된 문서를 표현하는 방식
  • set, getAttribute : 속성값으로 설정, 찾기
  • innerHTML : 노드의 body에 설정된 값(비표준)
  • 아래예제는 set,getAttribute로 object에 접근해서 값을 변경해준다
  • nodetype 1은 element 2는attribute 태그의 속성 3은 TEXT이다
  • gallary02.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>
<link rel="stylesheet" href="styles/layout.css" target="text/css">
<script type="text/javascript" src="scripts/showPic.js"></script>
</script>
</head>
<body>
       <h1>gallery</h1>
       <ul id="imagegallery">
             <li>
                    <a href="images/fireworks.jpg" title="A fireworks dispaly"  >
                    <img src="images/thumbnail_fireworks.jpg"  alt="Firewokrs"></img></a>
             </li>
             <li>
                    <a href="images/coffee.jpg" title="A cup of black coffee"  >
                    <img src="images/thumbnail_coffee.jpg"  alt="Coffee"></img></a>
             </li>
             <li>
                    <a href="images/rose.jpg" title="A red red rose">
                    <img src="images/thumbnail_rose.jpg" alt="Rose"></img></a>
             </li>
             <li>         
                    <a href="images/bigben.jpg" title="The famous clock">
                    <img src="images/thumbnail_bigben.jpg" alt="Big  Ben"></img></a>
             </li>
       </ul>
       <img id="placeholder" src="images/placeholder.gif" alt="myImage"/>
       <p id="description">Choose an image</p>
</body>
</html>
  • showPic.js
function showPic(object){
       console.out('were');
       // 이미지 id가져오기
       var clickhref = object.getAttribute('href');
       var placeholder = document.getElementById('placeholder');
       placeholder.setAttribute('src', clickhref);
       
       // object의 title을 바꿔야 한다
       // obj 어트리뷰트 가져오기
       var title = object.getAttribute('title');
       // image의 정보 가져오기
       var image_info =  document.getElementById('description');
       // innerhtml바꾸기
       //image_info.innerHTML = title;
       if(image_info.firstChild.nodeType == 3){//TEXT는 NODETYPE이 3번
             image_info.firstChild.nodeValue = title;
       }
       return false;
}
function prepareGallery(){
       var imagegallery = document.getElementById("imagegallery");
       var atag = imagegallery.getElementsByTagName('a');
       for(var i = 0; i < atag.length; ++i){
             atag[i].onclick = function(){
                    return showPic(this);
             }
       }
}
window.onload = prepareGallery;

레벨로 객체찾기

  • nodeType1은 엘레먼트, nodeType2는 속성, nodeType3은 textnode이다
  • nodeType이 3이라면 innerHTML처럼 text를 가르키는 것이다
  • innerHTML은 표준이 아니므로 nodeType을 체크해서 text을 바꾸도록 한다
window.onload = function(){
       var id1 = document.getElementById('id1');
       var id2 = document.getElementById('id2');
       if(id1.firstChild.nodeType == 3)
             id1.firstChild.nodeValue = '안녕';
       if(id2.firstChild.nodeType == 3)
             id2.firstChild.nodeValue = '세상';
}

JavaScript ajax

2018-12-13 00:00:00 +0000

ajax

  • Asynchronous Javascript And XML
  • 페이지의 리로딩을 하지 않고 서버로부터 응답을 처리
  • 비동기식 프로그램
  • 동기식은 요청->응답->다음 요청->다음요청 응답 처럼 순서대로 처리되고 응답올 때까지 아무것도 못함
  • 비동기식은 요청을 보내고 바로 다른일을 할 수 있음
  • ex. 서울시에 있는 카테고리 누르면 바로 옆에 서울시 전체가 나옴
  • ex. 검색창에 글자 하나를 치면 연관검색어가 나옴, 댓글..

ajax 이벤트 순서

  • 이벤트 발생(콜백함수 지정)
  • 응답 객체 생성
  • 서버에서 데이터 처리
  • 받은 데이터를 화면에 출력해준다

Ajax-JSP 예제

  • 입력창에 이름을 입력하고 버튼을 누르면 ‘안녕하세요. <이름> 회원님!!!' 값으로 서버로 부터 받는다
  • 버튼을 누르면 hello() 함수를 호출한다. hello 함수에서 name입력창의 값을 서버로 전달한다
  • 결과값을 받으면 helloResult() 함수(callback)에서 처리한다
  • hello.jsp
<%@ page language="java" contentType="text/plain; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
       request.setCharacterEncoding("utf-8");
       String name = request.getParameter("name");
%>  
       안녕하세요. <%= name %>  회원님!!!
  • helloApp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="httpRequest.js"></script>
<script type="text/javascript">
function hello(){
       var params = "name=" +
             encodeURIComponent(document.fmt.name.value);  // 한글이면 인코딩이  깨지기 때문에 encoding 함수 호출
       sendRequest("hello.jsp", params, helloResult, "GET");
}
function helloResult(){
       // 데이터가 다 도착했다
       if(4 == httpRequest.readyState){
             //정상적인 값인지 체크
             if(200 == httpRequest.status){
                    alert('서버응답:'+httpRequest.responseText);   // XML일 때는  responseXML  
             }
       }
}
</script>
</head>
<body>
<form name="fmt">
       <input type="text" name="name"/>
       <input type="button" value="전송" onclick="hello()"/>
</form>
</body>
</html>

Ajax자동완성 예제

  • suggestclient.html
  • encodeURIComponent : 한글은 깨질 위험이 있다 그러므로 인코딩해줘야 한다. 기본은 utf-8 인코딩
  • 한글 => D%95%98%EC 이런식으로 바뀐다
  • 패킷은 한번에 올 수도 있지만 나눠서 올 수도 있다. httpRequest.readyState가 4라면 패킷을 모두 받은 것이다
  • httpRequest.status가 200이라면 패킷에 에러가 없이 성공적으로 받았다는 뜻이다
<!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" src="httpRequest.js"></script>
<script type="text/javascript">
       
       function startSuggest(){
             var keyword = document.search.keyword.value;
             var params = "keyword=" + encodeURIComponent(keyword);
             sendRequest("suggest.jsp", params, displayResult, "POST");
       }
       
       function displayResult(){
             if(httpRequest.readyState == 4){
                    if(httpRequest.status == 200){
                          var html="";
                          var result = httpRequest.responseText;
                          var keywardList = result.split(',');
                          for(var i=0;i<keywardList.length;i++){
                                 var str = keywardList[i].trim();
                                 html += "<a href=javascript:select('"  + str  + "')>" + str + "</a>
";
                          }
                          
                          var suggestList =  document.getElementById("suggestList");
                          suggestList.innerHTML = html;
                          show('suggest');
                    }
             }
       }
       
       function show(elementId){
             var element = document.getElementById(elementId);
             if(element){
                    element.style.display="";
             }
       }
       
       function select(selectKeyward){
             document.search.keyword.value = selectKeyward;
             hide('suggest');
       }
       
       
       function hide(elementId){
             var element = document.getElementById(elementId);
             if(element){
                    element.style.display="none";
             }
       }
       
</script>
</head>
<body>
       <form name="search" onkeyup="startSuggest()">
             <input type="text" name="keyword">
             <input type="button" value="전송">
       </form>
       
       <div id="suggest" style="position: absolute; left: 10px">
             <div id="suggestList"></div>
       </div>
</body>
</html>
  • suggest.jsp
<%@page import="net.sf.json.JSONArray"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Collections"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%!
       String[] keywords ={
             "Ajax", "Ajax마스터", "Ajax교재",
             "자바", "자바박사", "자바강사", "자바서버페이지"
       };
       public List search(String keyword){
             if(keyword == null || keyword.equals("")){
                    return Collections.EMPTY_LIST;
             }
             List result = new ArrayList();
             for(int i=0;i<keywords.length;i++){
                    if(keywords[i].startsWith(keyword)){//첫글자가 문자안에  있는지 체크하고 array안에 넣는다
                          result.add(keywords[i].trim());
                    }
             }
             return result;
       }
%>    
<%
       request.setCharacterEncoding("utf-8");
       String keyword = request.getParameter("keyword");
       
       List keywordList = search(keyword);
       
//     for(int i=0;i<keywordList.size();i++){
//           out.print((String)keywordList.get(i));
//           if(i<keywordList.size()-1){
//                  out.print(",");
//           }
//     }
       
       /* List list = new ArrayList();
       list.add(new Member("홍길동", "서울"));
       list.add(new Member("박길동", "부산"));
       list.add(new Member("조길동", "대구"));
*/
       String json = JSONArray.fromObject(keywordList).toString();
       out.print(json);
%>

JavaScript 이벤트2

2018-12-12 00:00:00 +0000

이벤트

  • 키보드, 마우스를 이용해서 입력을 받으면 어떤 이벤트가 발생하는 것을 의미
  • 아래 예제는 window 객체에 onload속성에 함수를 할당하고 있다(=이벤트 연결)
<script type="text/javascript">
window.onload = function(){
       console.log('window onload');
};
</script>

인라인 이벤트

  • html 소스코드 안에 이벤트를 정의하는 것
  • html와 javascript는 따로 있어야함. 인라인 이벤트는 사용x
function doProcess(){
       var result = document.getElementById("result");
       result.innerHTML = "<span>이벤트 결과</span>";
}
</script>
</head>
<body>
<input type="button" value="버튼1" onclick="doProcess()">
<input type="button" value="버튼2">
<div id="result"></div>

고전 이벤트

  • javascript에서 이벤트를 추가하는 방식
  • onload 함수는 dom이 완성된 후 호출됨(html을 다 읽고나서)
  • 보통 javascript 파일을 만들고 안에서 처리한다
  • javascript 링크를 잘 걸었는지 확인하는 법 ctrl+위에 마우스 대면 손가락 모양으로 바뀜. 잘못하면 안바뀜
  • this를 사용하면 이벤트를 호출한 객체를 알 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type='text/javascript'>
window.onload = function(){
  //변수 선언
  var event = document.getElementById('clickButton');
  // 이벤트 연결
  event.onclick = function(){
    alert('클릭');
  };
};
</script>
</head>
<body>
<input type ="button" id="clickButton" value = "버튼">
</body>
</html>

이벤트 리스너

  • 이벤트 리스너는 하나의 행동에 여러 이벤트가 일어나게 할 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script>

window.onload = function(){
function clickEvent(){
  alert("클릭!");
}

function updateValue(event){
  this.value = '눌렀다';
}

var btn = document.getElementById("btn");
btn.addEventListener("click", clickEvent);
btn.addEventListener("click", updateValue);
}

</script>
</head>
<body>
  <input type="button" id="btn" value="button"/>
</body>
</html>

디폴트 이벤트 제거

  • 일부 HTML 태그는 이미 이벤트 리스너 존재
  • 기본 이벤트 방식이 마음에 안들어 제거하고 싶을 때 사용
  • 이벤트 리스너에서 false 리턴 시 제거

이벤트 버블링

  • 이벤트 버블링은 자식->부모로 이벤트가 흘러감
  • 캡쳐링은 반대로 부모->자식 순으로 이벤트가 실행됨(익스플로, jquery 캡쳐링 지원x)
  • 아래 예제 실행 시 Paragraph 만 클릭해도 모든 이벤트가 실행됨
  • 이벤트 버블링을 막는 방법은 event인자의 cancelBubble을 true로 주고 event의 stopPropagation()함수를 호출하는 것
  • 이벤트 버블링 수정 전(부모 이벤트까지 호출)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{border:3px solid black;}
</style>
<script>
</script>
</head>
<body>
  <div onClick="alert('outer-div')">
    <h1 onclick="alert('header')">
      <p onclick="alert('paragraph')">Paragraph</p>
    </h1>
  </div>
</body>
</html>
  • 이벤트 버블링 수정 후(자신의 이벤트만 호출)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{border:3px solid black;}
</style>
<script>

var paragraph_func = function paragraphfunc(e){
  var event = e || window.event;

  // 이벤트 발생을 알립니다
  alert('paragraph');
  // 이벤트 전달을 제거합니다
  event.cancelBubble = true;
  if(event.stopPropagation){
    event.stopPropagation();
  }
}

var header_func = function headerfunc(e){
  var event = e || window.event;

  // 이벤트 발생을 알립니다
  alert('header');
  // 이벤트 전달을 제거합니다
  event.cancelBubble = true;
  if(event.stopPropagation){
    event.stopPropagation();
  }
}

</script>
</head>
<body>
<div onClick="alert('outer-div')">
  <h1 onclick='header_func(event);'>
    <p onclick='paragraph_func(event);'>Paragraph</p>
  </h1>
</div>
</body>
</html>

표준 이벤트 모델

  • 구형 웹브라우저에서는 이벤트 리스너가 동작하지 않는다
  • 어느 웹브라우저라도 동일한 동작을 하게 만들어줘야 한다
  • 최신 웹브라우저는 그냥 event를 사용하고 구형 웹브라우저는 window.event를 사용한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script>
window.onload = function(){
    var header = document.getElementById('my-header');
    if(header.attachEvent){ // 구형 버전은 attach. 존재한다면 구형이란 뜻. 신형은 eventListener
      // 인터넷 익스플로러의 경우 실행
      var hanndler = function(){
        window.event.srcElement.style.color = 'red';
        window.event.srcElement.detachEvent('onClick', handler);
      };
      header.attachEvent('onClick', handler);
    }else {
      // 그 이외의 브라우저에 실행합니다
      var handler = function(){
        this.style.color = 'red';
        this.removeEventListener('click', handler);
      };
      header.addEventListener('click', handler);
    }
}
</script>
</head>
<body>
  <h1 id = "my-header">Click</h1>
</body>
</html>

JavaScript 캡슐화

2018-12-12 00:00:00 +0000

캡슐화

  • function 밖에서 일반 인자에 직접 접근이 가능하다
  • 인자에 직접 접근하지 못하게 만들려면 this를 뺀다
  • 멤버변수에는 this를 빼고, 함수에서 this를 붙여준다
  • 캡슐화 후 멤버변수 값을 가져오지 못하는 것을 확인할 수 있다
// 생성자 함수
function Student(n){
       this.stname = n;
       this.getstName = function(){return this.stname;}
       this.setstName = function(n){    this.stname = n;};  
}
var st = new Student("강하나");
alert(st.getstName());
alert(st.stname);
  • 캡슐화 후
// 생성자 함수
function Student(n){
       var stname;
       
	   // getstName, setstName함수에서
	   // this.stname를 쓰면 stname을 찾을 수 없다
	   // 왜냐하면 생성자는 객체가 아니기 때문에
	   // this.stname을하면 window의 멤버변수(전역변수) stname을 찾는 것이다
	   // 결론 : stname은 생성자의 지역변수이므로 this를 뺀다
       this.getstName = function(){return name;}
       this.setstName = function(n){    name = n;};    
}
var st = new Student("강하나");
alert(Student.getstName());
alert(Student.stname);

Posts

subscribe via RSS