학습한 내용
jQuery 익히기 - 제이쿼리 기초, 제이쿼리 선택자, 이벤트
jQuery 주요 기능
1) css 셀렉터를 활용한 태그 접근
2) 이벤트 처리
3) 특수 효과 및 애니메이션
4) Ajax
5) JSON 파싱
6) 플러그인을 통한 확장성
7) 멀티 브라우저 지원
설치하기
1) JDK 설치
- https://www.oracle.com/java/technologies/
경로 : Java SE - Java 18 - windows용 - x64 Installer
2) apache tomcat 설치
- https://tomcat.apache.org/
경로 : tomcat 10 - 64-bit Windows zip (pgp, sha512)
3) eclipse 설치
- https://www.eclipse.org/
- Eclipse IDE 2022‑06 다운로드 말고 밑에 Download Packages 선택
-> Eclipse IDE for Enterprise Java and Web Developers 다운 클릭
-> 하단 Select Another Mirror - Korea, Republic Of - Kakao Corp 클릭
실습1. eclipse 설정
1) 폰트 설정
- Window -> Preferences -> General -> Appearance -> Colors and Fonts
- Text Font 더블 클릭하여 폰트 사이즈 및 스타일 변경
2) 인코딩 설정
- Window -> Preferences -> General -> Content Types - UTF-8 적용
3) 웹 브라우저 설정
- Window -> Preferences -> General -> Web Browser - 크롬 선택
4) 서버 설정
- Window -> Preferences -> Server -> Runtime Environment - add 하여 서버를 다음과 같이 추가해 준다.
추가를 하고 난 뒤 eclipse하단부에 다음과 같이 나타나는 것을 확인 가능하다.
실습2. 웹 브라우저 test해보기
file - new - Dynamic web project - test서버 만들기
따로 수정할 것 없이 name만 설정해 주면 된다.
서버가 만들어지면 우리가 만든 workspace의 test폴더가 생긴 것을 확인 가능하다
test서버 하위 폴더 - src- main - webapp 오른쪽 클릭하여 html파일을 추가한다.
오른쪽 부분 html파일을 간단하게 작성 후 실행시켜 본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1> 개발환경 테스트</h1>
</body>
</html>tomcat으로 서버를 연결해주고 실행시키면 다음과 같다.
실습3. javascript
1) 새로운 서버와 html파일을 만들어 다음과 같이 코드를 작성해 준다.
<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>
<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>
</body>
버튼을 활성화 하면 다음과 같이 나온다.
2) 위 javascript를 jQuery로 바꾸어 실습
JQuery를 사용하기 위해 CjQuery 라이브러리 다운로드와 CDN 방법 중 CDN 방법을 선택
- https://jquery.com/
클릭 후 중간 부분에서 아래 사이트 주소를 클릭
cdn방식 https://code.jquery.com
jQuery 3.x - minified 클릭 - 주소 복사
html 파일에 링크를 복사해 주고
스크립트 부분에서 javascript가 아닌 jQuery로 바꿔준다.
<script>
function set_h1(){
// jQuery 변환
$("h1").text("jQuery로 문자열 변경")
}
function get_li(){
$("li").each(function(idx,obj){
var str = $(obj).text();
$("#result").append(str + "<br>");
});
}
</script>결과
학습한 내용 중 어려웠던 점 또는 해결못한 것들
명령어 틀리는 문제(오타)
해결방법 작성
많은 코딩해보기
학습 소감
비쥬얼 스튜디오 코드에서는 자동 완성 기능이 있어 코드를 작성하는 데에 편리함이 있었지만, 오늘 처음 접한 이클립스에서는 자동 완성이 안되어 조금 불편했다. 하지만, 자동 완성 기능에 의존하는 것이 아닌 문법 전체를 알고 있는 것이 더 중요한 것 같다. 그리고 아직 배울 내용이 많겠지만, 오늘 배운 자바스크립트와 제이쿼리를 비교했을 때는 엄청 간단하게 코드를 작성할 수 있다는 것을 깨달았다. 조금 더 배운다면 자바스크립트보다 더 편리하고 강력하게 이용할 수 있을 것 같다.
