교육 65일차 강의

구성본·2022년 6월 20일

1. 학습한 내용

1. jQuery

가장 인기있는 자바스크립트 라이브러리
CSS셀렉터를 활용한 태그 접근
이벤트 처리, 특수효과 및 애니메이션
플러그인을 통한 확장성, 멀티 브라우저 지원
jQuery는 자바스크립트를 보다 편리하고 강려하게 사용하도록 만든 자바스크립트 라이브러리
모든 브라우저에서 동일하게 동작, 다양한 기능을 제공

2. 개발환경 구성

JDK설치
http://java.sun.com
Apache tomcat 설치
http://tomcat.apache.org
이클립스 설치
https://www.eclipse.org/
이클립스 환경 설정(폰트)
Window -> Preferences -> General -> Appearance -> Colors
and Fonts
이클립스 환경 설정(인코딩)
Window -> Preferences -> General -> Content Types
이클립스 환경 설정(웹브라우저 설정)
Window -> Preferences -> General -> Web Browser
이클립스 환경 설정(서버 설정)
Window -> Preferences -> Server -> Runtime Environment
프로젝트 만들기
File -> New -> Dynamic Web Project
jQuery 라이브러리 다운로드
https://jquery.com/
jQuery를 통해 코드 간편화

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<script>
	function set_h1(){
		/* 
		var h1 = document.getElementsByTagName("h1");
		var str = h1[0].firstChild;
		str.nodeValue = "Javescript로 문자열 변경"; 
		*/
		$("h1").text("jQuery로 문자열 변경");
	}
	
	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/>";
		*/
		$("li").each(function(idx, obj){
			var 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>