06.20 월 JQuary

이재빈·2022년 6월 21일

AI스쿨_JS

목록 보기

10/18

배운 것

준비물

JDK
https://www.oracle.com/java/technologies/downloads/#jdk18-windows
eclipse
https://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/2022-06/R/eclipse-jee-2022-06-R-win32-x86_64.zip

한국선택
tomcat (서버)
https://tomcat.apache.org/download-10.cgi

JQuary

JQuary는 자바스크립트를 위한 라이브러리, 호환성이 굉장히 뛰어남
https://jquery.com/
CDN과 다운로드 방식 중 선택해서 사용
UI : 데스크탑용, Mobile : 모바일용

환경 설정 - 폰트

Window -> Preferences -> General -> Appearance -> Colors and Fonts -> Basic -> Text and Font

- 인코딩

Window -> Preferences -> General -> Content Types -> Text -> Default encording에 UTF-8 입력

- 브라우저 바꾸기, 크롬 추천

Window -> Preferences -> General -> Web Browser -> chrome 선택

- 서버 설정

Window -> Preferences -> Server -> Runtime Environment -> Add -> Appache - Tomcat v10(최신버젼) 클릭 -> next or finish -> 만약 next, 디렉토리를 Tomcat 폴더로 설정 -> finish

개발환경테스트

File - New - Dynamic web project -> Test로 이름 짓고 finish

https://code.jquery.com 들가기

3.x(고배율) 의 minified 선택

예시

<script>
<JS>
	function set_h1(){
		/*var h1 = document.getElementsByTagName("h1");
		var str = h1[0].firstChild;
		str.nodeValue = "JavaScript로 문자열 변경";*/
<JQ> $("h1").text("JQuery로 문자열 변경");
	}
	function get_li(){
<JS>
		/*
		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>";
		}
		*/
<JQ>		$("li").each(function(idx,obj){
			var str = $(obj).text();
			$("#result").append(str+"<br>");
		});
	}
</script>

<html>
<h1>JavaScript 실습</h1>
<button onClick="set_h1()">h1 태그문장 변경</button>

<ul>
	<li> 문자열1 </li>
	<li> 문자열2 </li>
	<li> 문자열3 </li>
</ul>
<button onClick="get_li()">li 태그 문자열 가져오기</button>
<div id="result"></div>