*JSONArray
- JSONObject์ ๋ฐฐ์ด๋ก ์ฌ์ฉ
๋ฌธ๋ฒ)
[ {์ด๋ฆ:๊ฐ,,,}, {์ด๋ฆ:๊ฐ,,,}, {์ด๋ฆ:๊ฐ,,,} ,,,]
//๋ฐฐ์ด ์์ JSONObject ๊ฐ์ฒด๊ฐ ์ฌ๋ฌ ๊ฐ ์ ์๋จ
์ฌ์ฉ)
1. JSONArray ์์ฑ
var jsonArr
=[ { name:”์ฐจoo”,age:24}, { name:”์ oo”,age:25}, { name:”์กoo”,age:26} ];
2. ๋ฐ๋ณตํ์ฌ ๊ฐ ์ป๊ธฐ
var jsonObj; //json๊ฐ์ฒด
for( var i =0 ; i < jsonArr.length ; i++ ){
//3. ๋ฐ๋ณต ์ค์ธ ๋ฐฉ์ ๊ฐ์ ๋ณ์์ ์ ์ฅ
jsonObj=jsonArr[i];
//4. ๊ฐ ์ป๊ธฐ, ์ฌ์ฉ
jsonObj.์ด๋ฆ //jsonArr[i].์ด๋ฆ
}//end for
*๋ณตํฉ ํํ
- JSONObject์์ ๊ฐ์ผ๋ก JSONArray๊ฐ ๋ค์ด์๋ ๊ฒฝ์ฐ
ํ์)
{
์ด๋ฆ : ๊ฐ,,,, //๋จ์ผ ๊ฐ์ ๋ํ ์ ์ฅ (๊ฒ์ ๊ฒฐ๊ณผ์ ๋ํ ๋ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ์ ์ฅ)
์ด๋ฆ : [ {์ด๋ฆ:๊ฐ,,}, {์ด๋ฆ:๊ฐ,,}, {์ด๋ฆ:๊ฐ,,} ,,,, ]
//์ค๋ณต ๊ฐ์ ๋ํ ์ ์ฅ ( ๊ฒ์๊ฒฐ๊ณผ์ ๋ํ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅ )
}
// ๊ฐ์ json ๊ฐ์ฒด ๋ฐฐ์ด๋ก json๊ฐ์ฒด๋ค์ด ๋ค์ด๊ฐ์์
*closure
- ํจ์ ์ธ๋ถ์์ ์ฌ์ฉํ ์ด๋ฆ๊ณผ ๋ด๋ถ์์ ์ฌ์ฉํ๋ ์ด๋ฆ์ ๋ฌถ์ด์ฃผ๋ JSONObject
- ์ ๊ทผ์ ํ์ ๋ณ๊ฒฝํ ๋ ์ฌ์ฉ
: ํจ์ ์์์ ์ ์ธ๋ ๋ณ์๋ ํจ์๋ฅผ ํจ์ ์ธ๋ถ์์ ์ ๊ทผ/์ฌ์ฉํ๊ธฐ ์ํด ์ฌ์ฉํจ
- ()์ฌ์ฉ, {} ์ฌ์ฉ ๋ ๊ฐ์ง ํํ๋ก ์ฌ์ฉํ ์ ์์
-( )๋ฅผ ์ด์ฉํ closure
์ ์ธ)
var ๋ณ์๋ช
=( { ์ด๋ฆ:๊ฐ:,,, ์ด๋ฆ :function(){ ์ฝ๋,,,,} ,,, } );
์ฌ์ฉ)
๋ณ์๋ช
.์ด๋ฆ
๋ณ์๋ช
.ํจ์๋ช
();
-{ } ์ฌ์ฉํ closure
function(๋งค๊ฐ๋ณ์,,,,) {
var ๋ณ์๋ช
=๊ฐ;
function ํจ์๋ช
(๋งค๊ฐ๋ณ์,,, ){
}//function
}//function
ํจ์ ์์ ์ ์๋ ๋งค๊ฐ๋ณ์๋ ํจ์๋ ์ ์๋ ํจ์ ์ธ๋ถ์์ ์ฌ์ฉํ ์ ์์
=> ์ฌ์ฉํ๋ ค๋ฉด ํจ์ ์์ ์๋ ๋ณ์์ ํจ์๋ฅผ closure๋ก ์ฐ๊ฒฐํ๊ณ closure๋ฅผ ๋ฐํํ์
ํจ์๋ฅผ ๋ถ๋ฅด๋ฉด json์ ๋ฐํํ๋๋ก
> ํจ์ ์ธ๋ถ์์ ์ฌ์ฉํ ์ด๋ฆ๊ณผ ๋ด๋ถ์์ ์ฌ์ฉํ๋ ์ด๋ฆ์ ๋ฌถ์ด์ฃผ๋ JSONObject์ closure๋ผ๊ณ ํจ
var ๋ณ์๋ช
= function(๋งค๊ฐ๋ณ์,,,,){
var ๋ณ์๋ช
=๊ฐ;
function ํจ์๋ช
(๋งค๊ฐ๋ณ์,,, ){
}
return {์ด๋ฆ:๋ณ์๋ช
, ์ด๋ฆ: ํจ์๋ช
,,,,, }; // closure๋ json๊ฐ์ฒด
};
- ํ๋ฆ
var closure=function(){
var name=“ํ๊ธธ๋”;
function test( msg ){
return “๋ฉ์์ง : ”+msg;
}
return { na : name, fun : test}; // closure: ํจ์์ธ๋ถ์์ ์ฌ์ฉํ ์ด๋ฆ๊ณผ ๋ด๋ถ์ ์ด๋ฆ ๋ฌถ์ด์ฃผ๋ JSONObject(closure)
};
-์ฌ์ฉ
var name=closure().na;
//๋ฌด๊ธฐ๋ช
ํจ์๋ฅผ ํธ์ถํ์ฌ closure๋ฅผ ์ป๊ณ , ํจ์ ์์ ๋ณ์๋ ํจ์๋ฅผ ์ฌ์ฉ
var msg=closure().fun(“ํฌ๋ก”);
* ํจ์ ๊ธฐํธ ()๋ฅผ ๋ถ์ฌ ๋ฐ๋ก closure ๊ฐ์ฒด๊ฐ ๋ฐํ๋๊ฒ ํจ > ์ฌ์ฉ ์ () ์์ด ๋ฐ๋ก ์ฌ์ฉ ๊ฐ๋ฅ
function testClo(){
//๋ณ์์ ํจ์๋ฅผ ๊ฐ์ง ํจ์ testClo - ๋ฐ๊นฅ์์๋ ์ด ์์ ๋ณ์,ํจ์ ์ธ ์ ์์ > closure ์ฌ์ฉ
var name="์คoo";
var addr = function(){
return "์์ธ์ ๊ฐ๋จ๊ตฌ ์ญ์ผ๋";
}
//jsonObj์ ์ฌ์ฉํ์ฌ ์ธ๋ถ์์ ์ฌ์ฉํ ์ด๋ฆ๊ณผ ๋ด๋ถ์ ์ด๋ฆ์ ์ฐ๊ฒฐํ ํ jsonObj์ ๋ฆฌํดํจ
return {na: name, ad: addr} ;
}//testClo
function clo(){
//()๋ฅผ ๋ถ์ด์ง ์๊ณ closure๋ฅผ ์ฌ์ฉํ๋ฉด ํธ์ถํ๋ ๊ณณ์์ ()๋ฅผ ์ธ ๋๋ง๋ค ๋ถ์ฌ์ค์ผํจ
var closure = testClo;
//closure๋ฅผ ์ฌ์ฉํ ๋ ()๋ฅผ ๋ถ์ฌ์ JsonObject์ผ๋ก ๋ง๋ค์ด์ ์ฌ์ฉํ๊ฒ ๋จ
alert ( closure().na ); //()๋ฅผ ๋ถ์ฌ์ผ ๊ฐ์ฒด๊ฐ ๋์ด ๋ฐ๊นฅ์์ ์ฌ์ฉ ๊ฐ๋ฅ
alert ( closure().ad() ); //()๋ฅผ ๋ถ์ฌ์ผ ๋ฐ๊นฅ์์ ์ฌ์ฉ ๊ฐ๋ฅ
//๋งค๋ฒ () ๋ถ์ฌ์ ์ฌ์ฉํ๋ฉด ๋ฒ๊ฑฐ๋ก์
}//clo
function clo2(){
//()๋ฅผ ๋ถ์ฌ์ closure๋ฅผ ์ฌ์ฉํ๋ฉด ํธ์ถํ๋ ๊ณณ์์ () ์์ด ๋ฐ๋ก ์ฌ์ฉ ๊ฐ๋ฅ
var closure = testClo();
alert ( closure.na );
alert ( closure.ad() );
}//clo2
*jQuery
- 2006๋
John Resig๊ฐ ์ ์ํ์ฌ ๋ฐํ
- write less, do more – ์ ๊ฒ ์ฐ๊ณ ๋ง์ ์ผ์ ํ๊ธฐ ์ํด ๊ฐ๋ฐ๋ JavaScript Library
- ๋จ์ํ > ๊ฐ๋
์ฑ ํฅ์, ๊ฐ๋ฐ ํจ์จ์ฑ์ด ํฅ์๋จ
- ์น ํ์ค์ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ๋ฐ๋์์ (๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์์ ๋์- cross browsing)
- CSS์ selector๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ ์ ์์
- AJAX๋ฅผ ๋จ์ํ
- jquery.com์์ ๋ฐฐํฌ.(compressed version, uncompressed version)
- compressed
- ์์ถ๋ฒ์ - ๊ธฐ๊ณ์ค์ฌ
- ํ๋ก๊ทธ๋จ์ ๋ฐ๋์ ํ์ํ ๊ณต๋ฐฑ๋ง ๋จ๊ธฐ๊ณ , ํ์์๋ ์ฃผ์, ์ํฐ, ํญ์ ์ญ์ ํ ์์คํ์ผ => ํ์ผ์ ํฌ๊ธฐ๊ฐ ์ถ์
- ๋จ : ์ฝ๋์ฝ๊ธฐ๊ฐ ์ด๋ ค์ (๊ฐ๋ฐ์๊ฐ ๋ณด๋ ๊ฒ์ด ์๋๋ผ ๊ด์ฐฎ์)
- ์ฅ : ํ์ผ์ด ๊ฐ๋ฒผ์ ( ๋ค์ด๋ก๋๋ฅผ ๋น ๋ฅด๊ฒ ์ํ )
- ํ์ผ๋ช
์ min์ด ๋ค์ด๊ฐ
- uncompressed
- ๋น์์ถ๋ฒ์ –์ฌ๋์ค์ฌ
- -์ฃผ์, ์ํฐ, ํญ์ ๊ฐ์ง๊ณ ์๋ ์์คํ์ผ
- -์ฅ : ์ฝ๋๋ฅผ ์ฝ๊ธฐ๊ฐ ํธํจ (์์ ํธํจ)
- -๋จ : ํ์ผ์ด ์ฉ๋ ํผ
-๋ค์ํ CDN(Content Delivery Network)์ ํตํด ๋ฐฐํฌ
// CDN: ์ฌ์ฉ์๊ฐ ์๋ ์์น์ ์ง๋ฆฌ์ ์ผ๋ก ๊ฐ์ฅ ๊ฐ๊น์ด ๋ณต์ ์๋ฒ์์ ํ์ผ์ ๋ค์ด๋ก๋ํ๋ ๊ธฐ์
- ajax, event, effect, DOM, plug in ์ ๊ณต
// plug in: ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์๊ฐ ์์ฃผ ์ฌ์ฉ๋๋ ๊ธฐ์ ๋ค์ ๋ฏธ๋ฆฌ ๊ตฌํํด ๋์ ๊ฒ
์ฌ์ฉ๋ฒ)
1. ๋ฐฐํฌ๋ .js ๋ฅผ HTML ์ ์ธ๋ถํ์ผ๋ฐฉ์์ผ๋ก ๋ก๋ฉ (๋๋ CDN ์ฌ์ฉ )
<script type=“text/javascript” src=“URL”> ์ฌ๊ธฐ์ ์ฝ๋ฉX </script>
2. <script>์๋ก ์ด์ด ์ฝ๋ ์์ฑ
<script type=“text/javascript”>
//์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ ์ฌ์ฉ
//์ธ๋ถํ์ผ ๋ฐฉ์์ผ๋ก ์ฐ๊ฒฐ๋ .js ์์ ์ ๊ณตํ๋ ๊ธฐ๋ฅ => jQuery์ฝ๋
</script>
๋ฌธ๋ฒ)
$ : jQueryObject
$(“selector”).jqueryํจ์( function (){
// ์ฝ๋ฉ…; } // first class function : ํจ์๊ฐ ๋ฐ์ดํฐ ํ์ผ๋ก ์ฌ์ฉ๋๊ธฐ ๋๋ฌธ์
);
- $: jQuery Object๊ฐ
- “selector” : selector์ ํด๋นํ๋ ํ๊ทธ๋ฅผ ์ฐพ๊ณ (css์ ๋ ํฐ)
- jquery์์ ์ ๊ณตํ๋ ํจ์๋ช : ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ ์ฉ
- ๋ฌด๊ธฐ๋ช ํจ์: ๊ฐ๋ฐ์๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ผ๋ก ์ผ ์ฒ๋ฆฌ
*jQuery ๋ก๋ฉ
-document ๋ก๋ฉ : HTML <body>ํ๊ทธ์ ํ๊ทธ ์ ๋ณด๊ฐ ๋ก๋ฉ๋๋ฉด jQuery ์คํ
$(document).ready(function(){ //(document).ready๋ ์๋ต ๊ฐ๋ฅ
});
$(function(){
});
-window๋ก๋ฉ : HTML๋ฌธ์์ <body>ํ๊ทธ์์ ์ฌ์ฉ๋๋ ๋ชจ๋ ๊ฐ์ฒด๊ฐ ๋ก๋ฉ๋๋ฉด ์คํ
load๋ ready๋ณด๋ค ๋ก๋ฉ์๋๊ฐ ๋๋ฆผ
$(window).load(function(){
});
*jQuery Selector
- CSS์ selector์ ๊ฐ์
- ์
๋ ํฐ๋ก ๋์์ ์ฐพ๊ณ , ๊ทธ์ ๋ํด ๊ตฌํํ ๊ธฐ๋ฅ์ ๋ถ์ฌํจ
-id selector์ฌ์ฉ ("#id๋ช ")
$(“#id๋ช
”).๊ธฐ๋ฅ( function (){
๊ตฌํํ ๊ธฐ๋ฅ
} );
-class select์ฌ์ฉ (".class๋ช ")
$(“.class๋ช
”).๊ธฐ๋ฅ( .. );
- tag selector ("ํ๊ทธ๋ช ")
$(“ํ๊ทธ๋ช
”).ํจ์๋ช
( .. );
-multiple selector
$(“ํ๊ทธ๋ช
,,,” ).ํจ์๋ช
( .. );
- attribute selector
$(“[์์ฑ๋ช
=‘๊ฐ’]”).ํจ์๋ช
( .. );
-sub selector
$(“๋ถ๋ชจํ๊ทธ๋ช
> ์์ํ๊ทธ๋ช
“).ํจ์๋ช
( .. );
-behavior selector๋ ์ง์ํ์ง ์๊ณ , hover() ํจ์๋ก ๋์ฒดํจ
$(“๋์:hover”).ํจ์๋ช
( .. ); => $(“selector”).hover( .. );
:odd – ํ์ ๋ฒ์งธ์ ์ ์ฉ
:even – ์ง์ ๋ฒ์งธ์ ์ ์ฉ
$(“๋์:odd”).ํจ์๋ช
( .. );
$(“๋์:even”).ํจ์๋ช
( .. );
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//document ready๋ body์ ๊ฐ์ด ๋์ํจ (body์ ์ด๋ค ๋
ธ๋/ํ๊ทธ๊ฐ ์๋์ง ๋ก๋ฉ/์ฝ์ด๋ค์ธ ํ ๋์ํจ/์ฝ๋์คํ)
//id selector
$("#div").css("background-color","#FF0000");
//class selector
$(".p").css("font-size","25px");
//tag selector
$("td").css("border","2px dotted #FF0000");
//multiple selector - ๊ฐ์ ํ๊ทธ๊ฐ ์ฌ๋ฌ๊ฐ ๋ค์ด๊ฐ๋ ๊ฒ
$("span,strong,b").css("color","#0000FF");
//name selector (attribute selector)
$("[type='text']").css("font-size","20px");
$("[type='password']").css("font-size","50px");
//behavior selector
$("li:odd").css("background-color","#00FF00");
$("li:even").css("background-color","#FF0000");
$("tr:odd").css("background-color","#333") ;
});
</script>
</head>
<body>
<div id="div">div</div>
<p>jQuery</p>
<p class="p">selector</p>
<p>์ ์ด์ฟผ๋ฆฌ</p>
<p class="p">์ ํ์</p>
<table border="1">
<tr>
<th style="width:80px">์ด๋ฆ</th>
<th style="width:60px">๋์ด</th>
<th style="width:300px">์ฃผ์</th>
</tr>
<tr>
<td>์ค์ค</td>
<td>20</td>
<td>์์ธ์ ๊ฐ๋จ๊ตฌ ์ญ์ผ๋</td>
</tr>
<tr>
<td>๊นoo</td>
<td>25</td>
<td>๊ฒฝ๊ธฐ๋ ์์์ ํ๋ฌ๊ตฌ</td>
</tr>
<tr>
<td>์ดoo</td>
<td>23</td>
<td>์ธ์ฒ์ ๋ถํ๊ตฌ ๋ถํ๋</td>
</tr>
</table><br>
<div>
<span>์ค๋์</span> ๋ชฉ์์ผ์
๋๋ค<br>
๋ด์ผ์ <strong>๊ธ์์ผ</strong>์
๋๋ค<br>
๋ชจ๋ ๋ <b>ํผ</b>์
๋๋ค
</div>
<div>
<input type="text" name="name" class="inputBox" value="์ด๋ฆ"/><br>
<input type="password" name="pass" class="inputBox" value="๋น๋ฒ"/><br>
<input type="text" name="tel" value="์ ํ๋ฒํธ" class="inputBox"/><br>
</div>
<ol>
<li>์ฌ๊ณผ</li>
<li>๋ฐฐ</li>
<li>๋ธ๊ธฐ</li>
<li>ํฌ๋</li>
<li>๊ทค</li>
<li>๊ฐ</li>
</ol>
</body>
</html>