반응형
*JSON
-
데이터를 전달하기 위해 만들어진 객체
-
JSONObject : {이름:값,,,,,}
-
JSONArray : JSONObject이 배열형태로 사용되는 것
-
단독사용, JSONObject에 값으로 사용될 수 있다.
-
단독)
-
//1.데이터 생성
-
var data="[{이름:값,,,},{이름:값,,,},{이름:값,,,},,,]";
-
//2.JSONArray생성
-
var ja=eval("("+data+")");//반복문을 돌려 사용
-
//3.사용
-
for(var i=0; i<ja.length; i++){
-
ja[i].이름
-
=>JSONObject
-
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#output{border:1px solid #333; width: 600px; height: 200px; overflow: auto;}
</style>
<!-- JSONArray를 변수에 저장하여 가지고 있는 js를 외부파일 방식으로 연결 -->
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").addEventListener("click",useJsonArray);
document.getElementById("selGroup").addEventListener("change",useJson);
}//function
function useJsonArray(){
//1.data생성
var data="[{'name':'박','age':7,'role':'예매'}, {'name':'김','age':1,'role':'조원'},{'name':'최','age':6,'role':'조원'},{'name':'노','age':2,'role':'조원'},{'name':'김','age':6,'role':'조원'},{'name':'박영','age':5,'role':'조원'},{'name':'이','age':0,'role':'조원'}]";
//2.JSONArray생성
var json_array=eval("("+data+")");//문자열->객체가 됨
//alert(json_array);//[object Object],,,,으로 출력됨
//3.json_array 사용
var output="<table border='1'>";
output+="<tr><th width='80'>이름</th><th width='40'>나이</th><th width='300'>역할</th></tr>";
for(var i=0; i<json_array.length; i++){
output+="<tr><td>"+json_array[i].name+"</td><td>"+json_array[i].age+"</td><td>"+json_array[i].role+"</td></tr>";
}//end for
output+="</table>";
var divNode=document.getElementById("output");
divNode.innerHTML=output;
}//useJsonArray
function useJson(){
//외부파일 방식으로 연결한 js에서 제공하는 JSONObject 사용
var sel=document.getElementById("selGroup");
if(sel.selectedIndex !=0){//조선택이 선택되지 않았을때
if(confirm(sel.value+"조를 조회하시겠습니까?")){
//alert(json_arr);
var divNode=document.getElementById("output");
var output="<table border='1'>";
output+="<tr><th colspan='2'>"+sel.value+"조 조회 결과</th></tr>";
output+="<tr><th width='100'>이름</th><th width='300'>역할</th></tr>";
var group_data=json_obj.data;
var cnt=0;
//JSONObject에서 JSONArray얻기
for(var i=0; i<group_data.length; i++){
if(group_data[i].group==sel.value){
output+="<tr><td>"+group_data[i].name+"</td><td>"+group_data[i].role+"</td></tr>"
cnt++;
}//end if
}//end for
output+="<tr><td colspan='2'>전체 ["+group_data.length+"]건] 중 조회 결과["+cnt+"건] 이 조회되었습니다.</td></tr>";
output+="<tr><td colspan='2'>데이터 생성일자:"+json_obj.pubDate+"</td></tr>";
output+="</table>";
divNode.innerHTML=output;
}//end if
}//end if
}//useJson
</script>
</head>
<body>
<div id="output"></div>
<input type="button" value="클릭" class="inputBox" id="btn"/>
<select id="selGroup">
<option>---조선택---</option>
<option value="1">1조</option>
<option value="2">2조</option>
<option value="3">3조</option>
</select>
</body>
</html>
var data="{'class':4,'pubDate':'2019-02-20','data':[";
data+="{'name':'박','group':2,'role':'영화예매},";
data+="{'name':'김','group':2,'role':'UI'},";
data+="{'name':'이','group':1,'role':'PC방'},";
data+="{'name':'정','group':1,'role':'메세지'},";
data+="{'name':'김','group':1,'role':'회원'},";
data+="{'name':'공','group':3,'role':'구인'},";
data+="{'name':'이','group':3,'role':'지원'}";
data+="],'result':true}";
var json_obj=eval("("+data+")");
*closure
-
javascript의 고급 기술
-
함수 내에 선언된 함수나 변수를 함수외부에서 사용할 수 있도록 접근지정을 해제해 주는 것
-
JSONObject과 동일한 문법을 가진다. (중괄호에 이름에 콜론에 값)
-
함수의 마지막줄에서 return을 하여 사용한다.
-
무기명함수를 만들어 업무를 구분지어 사용할 수 있다.
-
<script>
-
function a(){
-
}
-
function b(){
-
}
-
//원래 a와b는 다른 일을 하는 함수지만 비슷한 업무인 a와 b를 그룹으로 묶어 볼 수 있다 =>클래스의 시초
-
일반 자바개발자는 잘 사용하지 않고 library(JQuery?)를 제작하는 개발자가 주로 사용한다.
-
옥션의 로그인->소스보기가 개꿀->다 함수 기반
-
문법)
-
{외부에서 사용할 이름 : 변수명,,,외부에서 사용할이름 : 함수명,}
-
//무기명 함수로 쓰는 이유는?=>클래스가 아니다보니 new로 생성하여 사용하지 않고, 작업별 업무를 묶어서 개발할 수 있기 때문에 주로 사용
-
var 변수명=function(매개변수,,,){
-
변수명
-
function 함수명(){
-
}//밖에서 호출해서 사용할 수 없다. 기본이 private이기 때문!
-
...
-
//closure가 들어가면 호출해 사용가능
-
return{이름: 변수명,,,이름 : 함수명,,};
-
}(값,,,);
-
-
외부에서 사용)
-
변수명.이름 //이름은 변수명이기도 함수명이기도
-
//변수사용
-
무기명함수를저장한 변수명. 변수명=값;
-
//함수 사용
-
무기명함수를저장한변수명.함수명(값,,,);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#output{width:500px; height: 300px; border: 1px solid #dfdfdf;}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn1").addEventListener("click",useNonParam);
document.getElementById("btn2").addEventListener("click",useParam);
}//function
//매개변수 없는 무기명 함수
function useNonParam(){
var val=function(){
//alert("aaaaa");//잘나온다
var name="김";
function getAddr(){
return "서울시";
}//getAddr
//closuer : 함수내의 변수나, 함수를 외부에서 사용할 수 있도록 접근권한을 변경해 준다.
//{외부명:내부명}
//return{na:name}
return{na:name, addr:getAddr}
}();//아래의 두줄이 합쳐진것 => 함수가 만들면서 호출된다!
/* };
val(); */
//자바의 문법으로 안에있는 name을 부르려면
//alert(val.name+"/"+val.addr());//Error private변수인 것으로 밖에서 사용하지 못한다.
//무기명 함수 안에 있는 변수는 외부에서 사용할 수 없다. (자바로 치면 private)
//이때 밖에서 사용하고 싶으면 return{};
//getAddr()=>안에서 쓰인 함수도 밖에선 부를수 없다.
//alert(val.na+"/"+val.addr());
var divNode=document.getElementById("output");
divNode.innerHTML="이름: "+val.na+", 주소: "+val.addr();
}//useNonParam
//매개변수 있는 무기명 함수
function useParam(){
var name=document.getElementById("name").value;
var addr=document.getElementById("addr").value;
var age=document.getElementById("age").value;
var personData=function(i_name,i_addr,i_age){//변수와 같게 주어도 상관없음!
function getName(){
return i_name+"님";
}//getName
function getAddr(){
return "거주지 : "+i_addr;
}//getName
function birth(){
var date=new Date();
return date.getFullYear()-i_age+1;
}//birth
//closure
return{name:getName,addr: getAddr, bir:birth}
}(name,addr,age);
//alert(personData.name());
document.getElementById("output").innerHTML="이름 : "+personData.name()+", 주소 : "+personData.addr()+", 태어난 해 : "+personData.bir();
}//useParam
</script>
</head>
<body>
<div id="output"></div>
<div>
이름 : <input type="text"name="name"id="name"></br>
주소 : <input type="text"name="addr"id="addr"></br>
나이 : <input type="text"name="age"id="age"></br>
</div>
<input type="button" value="매개변수 없는 무기명 함수" id="btn1" class="btn"/>
<input type="button" value="매개변수 있는 무기명 함수" id="btn2" class="btn"/>
</body>
</html>
*class(클래스는 아니지만 클래스처럼 만들어 사용)
-
자바스크립트는 클래스를 만들수 없다. 흉내를 낼뿐(클래스와 비슷한 형태)
-
//오버로딩이 됨! 매개변수의 갯수가 다른것으로만!
-
new 로 객체를 생성하여 사용한다.
-
//만드는 이유는 업무를 구분하여(묶어) 만들기 위해서
-
업무를 처리하는 함수를 묶어서 관리하기 위함
-
내부에 정의되는 변수나 함수는 closure를 사용하여 외부에서 사용가능하다.
-
prototype을 사용하면 상속의 기능을 사용할 수 있다.
-
작성법)
-
//1.클래스의 선언
-
function 클래스명(매개변수,,,){ //이때의 클래스명은 클래스명이자 생성자명이다.
-
var 변수명;
-
-
function 함수명(매개변수,,,){
-
-
}//도 가능!
-
return closure;
-
}
-
//2.객체화
-
var 객체명=new 생성자(값,,,);
-
//3.사용
-
객체명.변수명;
-
객체명.함수명(값,,,);
-
//클래스로 만들어진건 외부에서 객체로 만들어 얼마든지 사용가능하다.
*prototype
-
상속을 할때 부모클래스의 자원을 등록시키기 위해 사용.
-
작성법)
-
1.부모클래스를 선언
-
function Parent(){
-
-
-
}
-
2.자식클래스 선언 : 내용을 기술하지는 않는다!
-
function Child(){ }
-
3.자식클래스의 부모를 등록 : 자식클래스명.prototype=new 부모클래스명();
-
Child.prototype=new parent();
-
4.자식 클래스의 요소를 등록 :
-
(변수등록)자식클래스명.prototype.변수명[=값];
-
(함수등록-무기명함수형식만 가능)자식클래스명.prototype.변수명=function(매개변수,,){ ....... }
-
5.사용
-
자식클래스 생성
-
var 객체명=new 자식클래스명();
-
함수) 객체명.함수명();
-
변수) 객체명.변수명;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("class1").addEventListener("click",useClass1);
document.getElementById("class2").addEventListener("click",useClass2);
document.getElementById("class3").addEventListener("click",useInheritance);
}//function
function useClass1(){
//기본 생성자를 사용하는 클래스
//1.선언
function DataVO(){//클래스 명이자 동시에 생성자 명이 됨.
var name;
function setName(i_name){
name=i_name;
}//setName
function getName(){
return name;
}//getName
//closure
return{setName:setName, getName:getName};
}//class
//불렸다고 만들어지는게 아님
//함수와다르게 객체를 생성하여 사용
var vo=new DataVO();
vo.setName("김희철");
//alert(vo);//[object Object]//객체라고 나온다
//alert(vo.getName());//closure를 만들어주기 전에는 사용할 수 없다.Error
alert(vo.getName());
}//useClass1
function useClass2(){
//매개변수 있는 생성자를 사용하는 클래스
//1.선언
function DataVO(i_name){
var name=i_name;
function setName(i_name){
name=i_name;
}//setName
function getName(){
return name;
}//getName
return{setName:setName, getName:getName};
}//class
//2.객체 생성
var data=new DataVO("김정윤");
var data1=new DataVO("김정운");
//3.사용
alert(data.getName());
data1.setName("백인재");
alert(data1.getName());
}//useClass2
function useInheritance(){
//1.부모클래스 생성
function Parent(){
var name;
function printName(){
//상속관계에서 클래스에 변수를 사용할 때에는 this.을 붙여서 객체에 생성된 변수임을 명시하여 사용한다.
alert("부모의 함수 : "+this.name);//상속관계에 있을때, 인스턴스 변수를 사용할 때에는 this사용
}//printName
return {name:name,printName:printName};
}//class
//2.자식클래스 생성
function Child(){}//class
//3.상속 처리
Child.prototype=new Parent();
//4.자식클래스에 변수, 함수 등록
//변수 등록=>closure가 없어도 사용 가능 해진다.
Child.prototype.age;//프로토 타입으로 빼서 함수나 변수 정의해 사용하게 된다.
//함수 등록: 함수는 무기명함수의 형태로만 등록된다.
Child.prototype.printAge=function(){
alert(this.age+"살");//등록된 변수는 this.변수명 으로 사용가능
//등록된 변수는 클래스 안으로 등록되므로 this를 사용하여 접근한다.
}//printAge
Child.prototype.birthYear=function(age){
var date=new Date();
alert((date.getFullYear()-age+1)+"년 생");
}//birthYear
//5.사용
var c_obj=new Child();
c_obj.name="김정윤";
c_obj.printName();
//등록된 변수의 사용
c_obj.age=20;
//alert(c_obj.age);
c_obj.printAge();
c_obj.birthYear(32);
//=>>>재사용성 증가
}//useInheritance
</script>
</head>
<body>
<input type="button" value="클래스1" id="class1" class="btn"/>
<input type="button" value="클래스2" id="class2" class="btn"/>
<input type="button" value="상속" id="class3" class="btn"/>
</body>
</html>
-끗-
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 84일차-jQuery_태그의 값 설정/값 얻기 (0) | 2019.03.05 |
|---|---|
| 83일차-jQuery_selector/Event Handling/DOM (0) | 2019.03.03 |
| 81일차-JavaScript_회원가입 추가/canvas,storage,JSON (0) | 2019.02.28 |
| 80일차-javaScript_회원가입 유효성 검증(더해야 함) (0) | 2019.02.20 |
| 79일차-javaScript_페이지 이동 방법과 popup창 (0) | 2019.02.19 |