고정 헤더 영역
상세 컨텐츠
본문
1. JQuery 얻기
먼저 JQuey를 다운받는다. JQuery 사이트에가서 JQuery를 다운받는다. 다운로드 페이지는 여기에 있다.
압축된 버전(Compressed)과, 압축되지 않은 버전(Uncompressed)이 있는데 특별한 이유가 없다면 압축된 버전을 받는다. (마우스오른쪽 클릭, 다른이름으로 저장).
2. 처음해보는 JQuery프로그래밍
_1 lecture1 폴더를 만든다
_2 폴더안에 다운받은 JQuery파일을 넣는다. (예_ jquery-1.1.2.pack.js)
_3 lecture1.html를 만들고 각각 다음 내용을 복사해 넣는다.
1) lecture1.html
<html>
<head>
<script src='./jquery-1.1.2.pack.js'></script>
<script>
$(document).ready(function(){
var data= $("#data").val();
var rows=data.split("\n");
var str="";
str+="<table border=1>";
for(var i=0;i<rows.length;i++)
{
var cel;
cel=rows[i].split("|");
str+="<tr><td>"+cel[0]+"</td><td>"+cel[1]+"</td><td>"+cel[2]+"</td></tr>";
}
str+="</table>";
$("#output").html(str);
});
</script>
</head>
<body>
<textarea id='data' style='display:none'>aaa1|bbb1|ccc1
aaa2|bbb2|ccc2
aaa3|bbb3|ccc3</textarea>
<div id='output'></div>
</body>
</html>
<head>
<script src='./jquery-1.1.2.pack.js'></script>
<script>
$(document).ready(function(){
var data= $("#data").val();
var rows=data.split("\n");
var str="";
str+="<table border=1>";
for(var i=0;i<rows.length;i++)
{
var cel;
cel=rows[i].split("|");
str+="<tr><td>"+cel[0]+"</td><td>"+cel[1]+"</td><td>"+cel[2]+"</td></tr>";
}
str+="</table>";
$("#output").html(str);
});
</script>
</head>
<body>
<textarea id='data' style='display:none'>aaa1|bbb1|ccc1
aaa2|bbb2|ccc2
aaa3|bbb3|ccc3</textarea>
<div id='output'></div>
</body>
</html>
4. lecture1.html을 브라우저에서 열어본다.
5. 설명
위 코드가 실행되는 과정을 전체적으로 살펴보면.
_1. 브라우저에서 lecture.html의 로딩이 끝나면
_2. $(document).ready()의 인수로 정의된 함수 function(){...}이 실행되면
_3. id가 data인 TEXTAREA에서 내용을 읽어서 data변수에 넣는다.
_4. data 내용을 쪼개서 배열로 만들고 for를돌면서 테이블로 만들어서 str변수에 넣고.
_5. 이것을 id가 output 인 DIV에 넣으면 테이블이 보여지게 된다.
정리해보면 TEXTAREA에서 데이터를 읽어 이것을 테이블로 변환하여 DIV 'output'에 넣은 것이다.
6. 아래 주석을 달아 두었다.
<html>
<head>
<script src='./jquery-1.1.2.pack.js'></script>
<script>
//1. 브라우저에서 lecture.html의 로딩이 끝나면 function(){...가실행
$(document).ready(function(){
//id가 data인 TEXTAREA에서 내용을 읽어서 data변수에 넣는다.
var data= $("#data").val();
//문자열을 처리하여 테이블을 만들어서 str변수에 넣는다.
var rows=data.split("\n");
var str="";
str+="<table border=1>";
for(var i=0;i<rows.length;i++)
{
var cel;
cel=rows[i].split("|");
str+="<tr><td>"+cel[0]+"</td><td>"+cel[1]+"</td><td>"+cel[2]+"</td></tr>";
}
str+="</table>";
//str의 내용을 id가 output인 DIV에 넣는다.
$("#output").html(str);
});
});
</script>
</head>
<body>
<textarea id='data' style='display:none'>aaa1|bbb1|ccc1
aaa2|bbb2|ccc2
aaa3|bbb3|ccc3</textarea>
<div id='output'></div>
</body>
</html>
<head>
<script src='./jquery-1.1.2.pack.js'></script>
<script>
//1. 브라우저에서 lecture.html의 로딩이 끝나면 function(){...가실행
$(document).ready(function(){
//id가 data인 TEXTAREA에서 내용을 읽어서 data변수에 넣는다.
var data= $("#data").val();
//문자열을 처리하여 테이블을 만들어서 str변수에 넣는다.
var rows=data.split("\n");
var str="";
str+="<table border=1>";
for(var i=0;i<rows.length;i++)
{
var cel;
cel=rows[i].split("|");
str+="<tr><td>"+cel[0]+"</td><td>"+cel[1]+"</td><td>"+cel[2]+"</td></tr>";
}
str+="</table>";
//str의 내용을 id가 output인 DIV에 넣는다.
$("#output").html(str);
});
});
</script>
</head>
<body>
<textarea id='data' style='display:none'>aaa1|bbb1|ccc1
aaa2|bbb2|ccc2
aaa3|bbb3|ccc3</textarea>
<div id='output'></div>
</body>
</html>
