[6월 20일]

정서이·2022년 6월 20일

1) 학습한 내용

1.개발환경 구성

JDK 설치/이클립스/Apache tomcat/웹 브라우저

2.프로젝트,파일 만들기

3.Javascript 이용

<!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(){
		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> 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>

4. jQuery 이용

훨씬 간결하게 코드를 작성해도 똑같이 실행된다.

<!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(){
		$("h1").text("jQuery로 문자열 변경")
	}
	function get_li(){
		$("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>