1. 학습내용
오늘은 제이쿼리를 배워보기로 했다.
- 모든 브라우저에서 실행되는 클라이언트 프로그래밍 언어
- 존 레식이 2006년도 뉴욕시 바 캠프에서 공식적으로 소개
- 간략, 강력하게 사용할 수 있도록 설계
- 가장 인기있는 JavaScript 라이브러리
주요 기능
- CSS 셀렉터를 활용한 태그 접근
- 이벤트 처리
- 특수 효과 및 애니메이션
- Ajax (일종의 통신을 위한 라이브러리)
- JSON 파싱
- 플러그인을 통한 확장성
- 멀티 브라우저 지원
jQuery로 간단하게 작성해 보고 실제 실행 되는지를 실습해 보았다.
(앞서서 eclipse와 tomcat, 그리고 JDK 파일을 설치 했다. 참고로 아래 html파일은 eclipse프로그램을 통해 작성했다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function set_h1(){
/*let h1 = document.getElementsByTagName("h1");
let str = h1[0].firstChild;
str.nodeValue = "JavaScript로 문자열 변경";*/
$("h1").text("jQuery로 문자를 변경");
}
function get_li(){
/*
let li = document.getElementsByTagName("li");
let result = document.getElementById("result");
for(let idx in li){
let str = li[idx].firstChild;
result.innerHTML += str.nodeValue + "<br/>";
}
*/
$("li").each(function(idx, obj){
let str = $(obj).text();
$("#result").append(str + "<br>");
})
}
</script>
</head>
<body>
<h1>JavaScript 실습</h1>
<button onClick="set_h1();">
h1 태그문자열 변경</button>
<br>
<ul>
<li>문자열1</li>
<li>문자열2</li>
<li>문자열3</li>
</ul>
<button onClick ="get_li();">li 태그문자열 가져오기</button>
<div id="result"></div>
</body>
</html>주석으로 표시된 것이 자바스크립트로 작성된 것, 아래 $로 시작하는 부분이 jQuery식으로 작성한 부분이다. 보다시피 같은 결과를 나타내 주는 식인데도 훨씬 간결하게 쓸 수 있다는 것을 알수 있다.
2. 어려웠던 점 및 해결 방안
-오늘은 프로그램 설치가 대부분이라 없음.
3. 학습소감
왜 JQuery를 많이 써왔는지 알 수 있었다. 바닐라 자바스크립트 말고 훨씬 더 간결하게 쓸 수 있다는 장점 때문인지. 요새는 많이 안쓴다고는 얼핏 들었는데 그래도 관공서나 기존에 아직 쓰고 있는 사람들도 많다고 하니 배울게 기대된다.
친숙한 개발자가 되고픈 사람