학습한 내용
jQuery
-
소개
• 모든 브라우저에서 실행되는 클라이언트 프로그래밍 언어
• 2006년 존 레식이 뉴욕 시 바 캠프에서 공식적으로 소개
• 간략, 강력하게 사용할 수 있도록 설계
• 가장 인기있는 JavaScript 라이브러리 -
주요기능
• css 설렉터를 활용한 태그 접근
• 이벤트 처리
• 특수 효과 및 애니메이션
• Ajax
• JSON 파싱
• 플러그인을 통한 확장성
• 멀티 브라우저 지원 -
jQuery 종류
•jQuery
•jQuery Ul
•jQuery Mobile -
jQuery 사이트 - http://jquery.com
개발환경 구성
• JDK 설치 http://java.sun.com
• 이클립스 https://www.eclipse.org/
• Apache tomcat http://tomcat.apache.org
• 웹 브라우저
• c드라이브-jQuery 작업폴더 만들기 (만들고 설치한 파일 옮김)
이클립스 실행
-
이클립스 작업폴더 선택
c드라이브-jQuery -
이클립스 폰트 변경
Window -> Preferences -> General -> Appearance -> Colors and Fonts -
인코딩 설정
Window -> Preferences -> General -> Content Types
utf-8 입력 -
웹브라우저 설정
Window -> Preferences -> General -> Web Browser -
서버설정
Window -> Preferences -> Server -> Runtime Environment -
프로젝트 만들기
File -> New -> Dynamic Project
실습1 - 개발환경테스트
실습2-1 - 자바스크립트 작성
실습2 내용 : h1 제목 문자 변경하는 버튼1, 버튼2 누르면 li 내용 나오게하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script>
function set_h1(){
var h1 = document.getElementsByTagName("h1");
var str = h1[0].firstChild;
str.nodeValue = "JavaScript로 문자열 변경";
}
function get_li(){
var li = document.getElementsByTagName("li");
var result = document.getElementById("result");
for(var idx in li){
var str = li[idx].firstChild;
result.innerHTML += str.nodeValue + "<br/>";
}
}
</script>
</head>
<body>
<h1>자바스크립트 실습</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>실습2-2 - 제이쿼리로 작성
<!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" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
function set_h1(){
$("h1").text("jQuery로 문자열 변경");
}
function get_li(){
$("li").each(function(idx, obj){
var str = $(obj).text();
$("#result").append(str + "<br/>");
});
}
</script>
</head>
<body>
<h1>자바스크립트 실습</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>어려웠던점
vsc로 계속 작성하다가 이클립스로 작성하니까 에밋이나 자동완성이 없어서 글씨를 하나하나 다 써야해서 작성하는 시간이 늘었다..
그러다보니 정말 사소한 오타가 나서 그거 찾느라고 오래 걸렸다...
다 하고 vsc로 붙여넣어보니까 실행도 잘 되는데 왜 쓰는건지 잘 모르겠다
학습소감
오늘은 제이쿼리 첫 시간이라 개발환경 구성에 시간을 많이 들였다. 시스템상 오류가 있어서 지연되기도 해서 조금은 어수선했던거같다. 수업 내용으로는 프로그램 설치랑 세팅이 간단해서 조금은 편하게 진행할 수 있었다. 그리고 제이쿼리는 미디어쿼리를 가져와서 쓰니까 코드가 간결해서 자바스크립트보다 보기가 좋은거같다.
