[새싹] 현대IT&E 231110 기록 -JS 15~17

최정윤·2023년 11월 10일
js
0

새싹

목록 보기
19/67
post-custom-banner

15. 함수와 이벤트

15.6 이벤트와 이벤트 처리기

이벤트 알아보기

마우스 이벤트

  • click: 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다.
  • dbclick: 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다.
  • mousedown: 사용자가 요소 우에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.
  • mousemove: 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다.
  • mouseover: 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다.
  • mouseout: 마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다.
  • mouseup: 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다.

키보드 이벤트

  • keydown: 사용자가 키를 누르는 동안 이벤트가 발생한다.
  • keypress: 사용자가 키를 눌렀을 때 이벤트가 발생한다.
  • keyup: 사용자가 키에서 손을 땔 때 이벤트가 발생한다.

문서 로딩 이벤트

  • abort: 문서가 완전히 로딩되기 전에 불어오기를 머췄을 때 이벤트가 발생한다.
  • error: 문서가 정확히 로딩되지 않았을 때 이벤트가 발생한다.
  • load: 문서 로딩이 끝나면 이벤트가 발생한다.
  • resize: 문서 화면 크기가 바뀌었을 때 이벤트가 발생한다.
  • scroll: 문서 화면이 스크롤되었을 때 이벤트가 발생한다.
  • unload: 문서에서 벗어날 때 이벤트가 발생한다.

폼 이벤트

  • blur: 폼 요소에 포커스를 잃었을 때 이벤트가 발생한다.
  • change: 목록이나 체크 상태 등이 변경되면 이벤트가 발생한다.
  • focus: 폼 요소에 포커스가 놓였을 때 이벤트가 발생한다.
  • reset: 폼이 리셋되었을 때 이벤트가 발생한다.
  • submit: submit 버튼을 클릭했을 때 이벤트가 발생한다.

이벤트 처리기 알아보기

버튼을 클릭하면 알림 창 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/function.css">
</head>
<body>
	<ul>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
	</ul>		
	<div id="result"></div>
</body>
</html>


버튼을 클릭하면 배경색 바꾸기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/function.css">
</head>
<body>
	<ul>
		<li><a href="#" onclick="changeBg('green')">Green</a></li>
		<li><a href="#" onclick="changeBg('orange')">Orange</a></li>
		<li><a href="#" onclick="changeBg('purple')">Purple</a></li>
	</ul>		
	<div id="result"></div>
	
	<script>
		function changeBg(color) {
			var result = document.querySelector('#result');
			result.style.backgroundColor = color;
		}
	</script>
</body>
</html>

[실습] 버튼을 클릭해서 상세 설명 표시하거나 닫기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/event.css">
</head>
<body>
	<div id="item">
		<img src="images/flower.jpg" alt="">
		<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
		<div id="desc" class="detail">
			<h4>등심붓꽃</h4>
			<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
			<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
		</div>
	</div>	

	<script>
    function showDetail() {
      document.querySelector('#desc').style.display = "block";	// 상세 설명 부분을 화면에 표시
      document.querySelector('#open').style.display = "none";   // '상세 설명 보기' 단추를 화면에서 감춤
    }

    function hideDetail() {
      document.querySelector('#desc').style.display = "none";	   // 상세 설명 부분을 화면에서 감춤
      document.querySelector('#open').style.display = "block";	 // '상세 설명 보기' 단추를 화면에 표시
    }
  </script>
</body>
</html>

15.7 DOM을 이용한 이벤트 처리기

버튼 클릭해서 글자색 바꾸기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/function.css">
</head>
<body>
	<button id="change">글자색 바꾸기</button>	
	<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris adipisicing est sint aliquip nulla pariatur velit irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur adipisicing laborum quis.</p>
	
	<script>
    // 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
    var changeBttn = document.querySelector("#change");
    changeBttn.onclick = changeColor;
    
		function changeColor() {
      document.querySelector("p").style.color = "#f00";
    }
   
    // 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
    // document.querySelector("#change").onclick = changeColor;

		// function changeColor() {
    //   document.querySelector("p").style.color = "#f00";
    // }
    
    // 방법 3 : 직접 함수를 선언
    // document.querySelector("#change").onclick = function() {
    //   document.querySelector("p").style.color = "#f00";
    // };

		

	</script>
</body>
</html>

버튼 클릭해서 설명 글 열고 닫기 - DOM 이벤트 처리기 연결

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/event.css">
</head>
<body>
	<div id="item">
		<img src="images/flower.jpg" alt="">
		<button class="over" id="open">상세 설명 보기</button>
		<div id="desc" class="detail">
			<h4>등심붓꽃</h4>
			<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
			<button id="close">상세 설명 닫기</button>
		</div>
	</div>	

	<script>		
		document.querySelector('#open').onclick = function() {
			document.querySelector('#desc').style.display = "block";	// 상세 설명 부분을 화면에 표시
			document.querySelector('#open').style.display = "none";   // '상세 설명 보기' 단추를 화면에서 감춤
		}
		document.querySelector('#close').onclick = function() {
			document.querySelector('#desc').style.display = "none";	   // 상세 설명 부분을 화면에서 감춤
			document.querySelector('#open').style.display = "block";	 // '상세 설명 보기' 단추를 화면에 표시
		}				
	</script>
</body>
</html>

16. 자바스크립트와 객체

16.1 객체 알아보기

객체란?

  • 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다.
  • 문서 객체 모델
  • 브라우저 관련 객체
  • 내장 객체

객체의 인스턴스 만들기

Date 객체의 인스턴스 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>What time is it?</title>
	<style>
		body {
			font-size:2em;
			text-align: center;
		}
	</style>
</head>
<body>
	<script>
		var now = new Date();
		document.write("현재 시각은 " + now) ;	// 현재 날짜와 시간 표시하기
	</script>
</body>
</html>

마침표 표기법으로 프로퍼티와 메서드 작성하기

로컬 형식으로 현재 시각 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>What time is it?</title>
	<style>
		body {
			font-size:2em;
			text-align: center;
		}
	</style>
</head>
<body>
	<script>
		var now = new Date();
		document.write("현재 시각은 " + now.toLocaleString()) ;	// 로컬 형식으로 표시하기
	</script>
</body>
</html>

16.2 자바스크립트의 내장 객체

Array 객체

Array 객체의 length 프로퍼티 사용하기

배열을 만들고 요소 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Array</title>
	<style>
		body {
			text-align: center;
		}
	</style>
</head>
<body>
  <h1>배열의 각 요소 </h1>
	<script>
    var numbers = ["one", "two", "three", "four"];

    for(i = 0; i < numbers.length; i++) {
      document.write("<p>" + numbers[i] + "</p>");
    }
	</script>
</body>
</html>

배열끼리 합치는 concat()와 배열 안의 요소끼리 합치는 join() 메서드와 새로운 요소를 추가하는 push(), unshift() 메서드와 배열에서 요소를 꺼내는 pop(), shift() 메서드

배열 2개를 합쳐서 새로운 배열 만들기 / 배열 안의 요소 합치기 / 배열에 새로운 요소 추가하기 / 배열에서 요소 꺼내기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Array 객체의 메서드</title>
</head>
<body>
	<script>
		var nums = [1, 2, 3];
		var chars = ["a", "b", "c", "d"];

		// 두 개의 배열 합치기
		var numsChars = nums.concat(chars);
		var charsNums = chars.concat(nums);
		document.write("nums에 chars 합치면 : ", numsChars, "<br> chars에 nums 합치면 : ", charsNums);
		document.write("<hr>");

		// 배열 내의 요소 합치기
		var string1 = nums.join();
		document.write("구분자 없이 : ", string1);
		document.write("<br>");
		var string2 = chars.join('/');
		document.write("/ 구분자 지정 : ", string2);
		document.write("<hr>");

		// 요소 추가 - 새로운 length 값 반환
		var ret1 = nums.push(4, 5);  // 배열 끝에 추가
		document.write("length : ", ret1, " | 배열 : ", nums);  		
		document.write("<br>");
		var ret2 = nums.unshift(0);  // 배열 앞에 추가
		document.write("length : ", ret2, " | 배열 : ", nums);
		document.write("<hr>");

		// 요소 추출 - 꺼낸 요소 반환
		var popped1 = chars.pop(); // 마지막 요소 꺼냄
		document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars); 
		document.write("<br>");
		var popped2 = chars.shift(); // 첫번째 요소 꺼냄
		document.write("꺼낸 요소 : ", popped2, " | 배열 : ", chars);
		document.write("<hr>");
	</script>
</body>
</html>

원하는 위치에 요소를 추가.삭제하는 splice() 메서드

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Array 객체의 메서드</title>
</head>
<body>
  <p>splice 메서드 사용하기</p>
	<script>
    // 인수가 1개일 경우
    var numbers = [1, 2, 3, 4, 5];
    var newNumbers = numbers.splice(2);
    document.write("반환된 배열 : " + newNumbers + "<br>" );
    document.write("변경된 배열 : " + numbers );
    document.write("<hr>");

    // 인수가 2개일 경우
    var study = ["html", "css", "web", "jquery"];
    var newStudy = study.splice(2,1);
    document.write("반환된 배열 : " + newStudy + "<br>");
    document.write("변경된 배열 : " + study);
    document.write("<hr>");

    // 인수가 3개 이상일 경우
    var newStudy2 = study.splice(2, 1, "js");
    document.write("반환된 배열 : " + newStudy2 + "<br>");
    document.write("변경된 배열 : " + study);
	</script>
</body>
</html>

기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Array 객체의 메서드</title>
</head>
<body>
  <p>slice 메서드 사용하기</p>
	<script>
		// 추출한 요소로 배열 만듦, 기존 배열 변경안됨
		var colors = ["red", "green", "blue", "white", "black"];
		var colors2 = colors.slice(2); //인덱스 2부터 끝까지
		document.write(colors2);
		document.write("<br>"); 
		var colors3 = colors.slice(2,4);  // 인덱스 2,3
		document.write(colors3);
	</script>
</body>
</html>

Date 객체

  • 날짜.시간 정보 가져오기
    • getFullYear
    • getMonth
    • getDate
    • getDay
    • getTime
    • getHours
    • getMinutes
    • getSeconds
    • getMilliseconds
  • 날짜.시간 설정하기
    • setFullYear
    • setMonth
    • setDate
    • setTime
    • setHours
    • setMinutes
    • setSeconds
    • setMilliseconds
  • 날짜.시간 형식 바꾸기
    • toLocaleString
    • toString

[실습] 날짜 계산하는 프로그램 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>독서 챌린지</title>
  <style>
    #container{
      margin:50px auto;
      width:300px;
      height:300px;
      border-radius:50%;
      border:2px double #222;
      background-color:#d8f0fc;
      text-align: center;
    }
    h1 {
      margin-top:80px;
    }
    .accent {
      font-size:1.8em;
      font-weight:bold;
      color:red;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>책 읽기</h1>
    <p><span class="accent" id="result"></span>일 연속으로 <br> 책 읽기를 달성했군요.</p>
    <p>축하합니다!</p>
  </div>  

  <script>
    var now = new Date("2020-10-15");       // 오늘 날짜를 객체로 지정
    var firstDay = new Date("2020-10-01");   // 시작 날짜를 객체로 지정

    var toNow = now.getTime();         // 오늘까지 지난 시간(밀리 초)
    var toFirst = firstDay.getTime();  // 첫날까지 지난 시간(밀리 초) 
    var passedTime = toNow - toFirst;  // 첫날부터 오늘까지 지난 시간(밀리 초)

    passedTime = Math.round(passedTime/(1000*60*60*24));  // 밀리 초를 일 수로 계산하고 반올림

    document.querySelector('#result').innerText = passedTime;
  </script>
</body>
</html>

Math 객체

Math 객체의 메서드

  • abs: 절댓값
  • acos: 아크 코사인
  • asin:아크 사인
  • atan: 아크 탄젠트
  • atan2: 아크 탄젠트
  • ceil: 소수점 이하 부분 올림
  • cos: 코사인
  • exp: 지수 함수
  • floor: 소수점 이하 부분 버림
  • log: 로그값
  • max: 최댓값
  • min: 최솟값
  • pow: 지숫값
  • random: 무작위 수
  • round: 소수점 이하 부분 반올림
  • sin: 사인
  • sqrt: 제곱근
  • tan: 탄젠트

16.3 브라우저와 관련된 객체

브라우저와 관련된 객체

  • window: 브라우저 창이 열릴 때마다 하나씩 만든다.
  • document: 웹 문서마다 하나씩
  • navigator
  • history
  • location
  • screen

window 객체의 프로퍼티

  • document: 브라우저 창에 표시된 웹 문서에 접근할 수 있다.
  • frameElement: 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환한다.
  • innerHeight: 내용 영역의 높이를 나타낸다.
  • innerWidth: 내용 영역의 너비를 나타낸다.
  • localStorage: 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환한다.
  • location: window 객체의 위치 또는 현재 URL을 나타낸다.
  • name
  • outerHeight
  • outerWidth
  • pageXoffset
  • pageyoffset
  • parent
  • screenX
  • screenY
  • scrollX
  • scrollY
  • sessionStorage

window 객체의 메서드

  • alert
  • blur
  • close
  • confirm
  • focus
  • moveBy
  • moveTo
  • open
  • postMessage
  • print
  • prompt
  • resizeBy
  • resizeTo
  • scroll
  • scrollBy
  • scrollTo
  • sizeToContent
  • stop

새 브라우저 창을 여는 open() 메서드

웹 브라우저에 팝업 창 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Window 객체</title>
</head>
<body>
    <p>문서를 열면 팝업 창이 표시됩니다</p>
    <script>
        window.open("notice.html","", "width=500, height=400");
    </script>
</body>
</html>

팝업 창을 한 번만 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Window 객체</title>
</head>
<body>
  <p>문서를 열면 팝업 창이 표시됩니다</p>
  <script>
    window.open("notice.html","pop", "width=500, height=400");
  </script>
</body>
</html>

팝업 창 위치 지정하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Window 객체</title>
</head>
<body>
  <p>왼쪽에서 100픽셀, 위에서 200픽셀 떨어진 위치에 <br> 팝업 창이 표시됩니다</p>
  <script>
    window.open("notice.html","pop", "width=500, height=400, left=100, top=200");
  </script>
</body>
</html>

팝업 차단 고려하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Window 객체</title>
</head>
<body onload="openPopup()">
	<p>문서를 열면 팝업 창이 표시됩니다</p>

	<script>
		var blocked = false;
		function openPopup() {			
			var newWin = window.open("notice.html", "pop", "width=500, height=400");
			if (newWin == null) {
				alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
			}
			newWin.moveBy(100,100);			
		}
	</script>
</body>
</html>

버튼을 사용해 팝업 창 닫기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>공지사항</title>   
  <style>
    #content {
      border : 2px double skyblue;
      border-radius:10px;
      padding:10px;
    }
    ul {
      margin-left:15px;
      list-style-type:none;
    }
    ul li {margin : 10px 5px;}
    button{ 
      position:absolute;
      bottom:20px;
      right:20px;
    }
  </style>     
</head>
<body>
  <div id="content">
  <h1>공지사항</h1>
    <ul>
      <li>항목 1</li>
      <li>항목 2</li>
      <li>항목 3</li>
      <li>항목 4</li>
      <li>항목 5</li>
    </ul>    
    <button onclick="javascript:window.close();">닫기</button>
  </div>
</body>
</html>

location 객체

  • 프로퍼티
    • hash
    • host
    • hostname
    • href
    • pathname
    • port
    • protocol
    • password
    • search
    • username
  • 메서드
    • assign
    • reload
    • replace
    • toString
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>location Object</title>
	<style>
		#container {
			width:500px;
			margin:10px auto;
		}
		#display {
			margin-top:10px;
			padding:10px;
			border:1px solid #222;
			box-shadow: 1px 0 1px #ccc;			
		}
		p {
			font-size:1em;
		}
		button {
			margin-top:20px;
			text-align:center;
		}
	</style>
</head>
<body>	
	<div id="container">
		<h2>location 객체 </h2>
		<div id="display">
			<script>
				document.write("<p><b>location.href : </b>" + location.href + "</p>");
				document.write("<p><b>location.host : </b>" + location.host + "</p>");
				document.write("<p><b>location.protocol : </b>" + location.protocol + "</p>");
			</script>		
		</div>
		<button onclick="location.replace('http://www.easyspub.com')">이지스퍼블리싱 홈페이지로 이동하기</button>
</div>		
</body>
</html>

screen 객체

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>location Object</title>
	<style>
		#container {
			width:400px;
			margin:10px auto;
		}
		.display {
			margin-top:10px;
			padding:10px;
			border:1px solid #222;
			box-shadow: 1px 0 1px #ccc;			
		}
		p {
			font-size:1em;
		}
	</style>
</head>
<body>	
	<div id="container">
		<h2>screen 객체 </h2>
		<div class="display">
			<script>
				document.write("<p><b>screen.availWidth : </b>" + screen.availWidth + "</p>");
				document.write("<p><b>screen.availHeight : </b>" + screen.availHeight + "</p>");
				document.write("<p><b>screen.width : </b>" + screen.width + "</p>");
				document.write("<p><b>screen.height : </b>" + screen.height + "</p>");
			</script>		
		</div>
</div>		
</body>
</html>

업로드중..

[실습] 팝업 창을 화면 가운데에 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Window 객체</title>
</head>
<body>
    <p>문서를 열면 팝업 창이 표시됩니다</p>
    <script>
      function openCenter(doc, win, w, h){        
        var left = (screen.availWidth-w) / 2;  // 팝업 창의 왼쪽 좌표
        var top = (screen.availHeight-h) / 2;   // 팝업 창의 위쪽 좌표 
        var opt = "left=" + left + ",top=" + top + ",width=" + w + ",height=" + h;
        window.open(doc, win, opt);
      }
      openCenter("notice.html","pop", 500, 400)        
    </script>
</body>
</html>

17. 문서 객체 모델(DOM)

17.1 문서 객체 모델 알아보기

DOM 트리

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>DOM Tree 알아보기</title>
</head>
<body>
  <h1>Do it!</h1>
  <img src="images/doit.jpg" alt="공부하는 이미지">
</body>
</html>

17.2 DOM 요소에 접근하고 속성 가져오기

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

innerText, innerHTML 프로퍼티 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<button onclick="inntext()">innerText로 표시하기</button>
	<button onclick="innhtml()">innerHTML로 표시하기</button>
	<h1>현재 시각: </h1>
	<div id="current"></div>
	
	<script>
		var now = new Date();

		function inntext(){
			document.getElementById("current").innerText = now;
		}
		function innhtml() {
			document.getElementById("current").innerHTML = "<em>" + now + "</em>";
		}
	</script>
</body>
</html>

속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOM</title>
	<link rel="stylesheet" href="css/product.css">
</head>
<body>
	<div id="container">
		<h1 id="heading">에디오피아 게뎁</h1>
		<div id="prod-pic">
			<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200" onclick="displaySrc()">
				<div id="small-pic"> 
					<img src="images/coffee-pink.jpg" class="small">
					<img src="images/coffee-blue.jpg" class="small">
					<img src="images/coffee-gray.jpg" class="small">
				</div>
		</div>			
		<div id="desc">
			<ul>
				<li>상품명 : 에디오피아 게뎁</li>
				<li class="bluetext">판매가 : 9,000원</li>
				<li>배송비 : 3,000원<br>(50,000원 이상 구매시 무료)</li>
				<li>적립금 : 180원(2%)</li>
				<li>로스팅 : 2019.06.17</li>
				<button>장바구니 담기</button>
			</ul>				
			<a href="#" id="view">상세 설명 보기</a>				
		</div>
			
		<div id="detail">									
			<hr>
			<h2>상품 상세 정보</h2>
			<ul>
				<li>원산지 : 에디오피아</li>
				<li>지 역 : 이르가체프 코체레</li>
				<li>농 장 : 게뎁</li>
				<li>고 도 : 1,950 ~ 2,000 m</li>
				<li>품 종 : 지역 토착종</li>
				<li>가공법 : 워시드</li>
			</ul>
			<h3>Information</h3>
			<p>2차 세계대전 이후 설립된 게뎁농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
			<h3>Flavor Note</h3>
			<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
		</div>
	</div>

	<script>
		function displaySrc() {
			var cup = document.querySelector("#cup");
			alert("이미지 소스 : " + cup.getAttribute("src"));
		}	
	</script>
</body>
</html>

17.3 DOM에서 이벤트 처리하기

DOM 요소에 함수 직접 연결하기

이미지를 클릭하면 알림 창 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <img src="images/cup-1.png" id="cup">		
  </div>

	<script>
		var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
    cup.onclick = function(){
      alert("이미지를 클릭했습니다");
    }
	</script>
</body>
</html>

함수 이름을 사용해 연결하기

이미지를 클릭하면 함수 실행하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <img src="images/cup-1.png" id="cup">		
  </div>

	<script>
		var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
    cup.onclick = changePic;  // cup을 클릭하면 changePic 함수 실행

    function changePic() {
      // cup.src = "images/cup-2.png";
      if (cup.src.includes("cup-1.png")) {
        cup.src = cup.src.replace("cup-1.png", "cup-2.png");
      } else {
        cup.src = cup.src.replace("cup-2.png", "cup-1.png");
      }
		}
	</script>
</body>
</html>

DOM의 event 객체 알아보기

이미지에서 클릭한 위치 알아내기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
	<style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
	<div id="container">
    <img src="images/cup-1.png" id="cup">		
  </div>	

	<script>
		var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
		cup.onclick = function(event) {
			alert("이벤트 유형: " + event.type + ", 이벤트 발생 위치 : " + event.pageX + "," + event.pageY);	
		}
	</script>
</body>
</html>

this 예약어 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
	<div id="container">
		<img src="images/cup-1.png" id="cup">	
	</div>
  
	<script>
		var cup = document.getElementById("cup");
		cup.onclick = function(event) {
			alert("클릭한 이미지 파일 : " + this.src);
		}
	</script>
</body>
</html>

addEventListener() 메서드 사용하기

마우스 포인터를 올리면 이미지 바꾸기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
	<div id="container">
		<img src="images/easys-1.jpg" id="cover">	
  </div>
  
	<script>
		var cover = document.getElementById("cover");
		cover.addEventListener("mouseover",changePic, false);
    cover.addEventListener("mouseout",originPic, false);
    
    function changePic() {
      cover.src = "images/easys-2.jpg";
    }
    function originPic() {
      cover.src = "images/easys-1.jpg";
    }
	</script>
</body>
</html>

메서드 안에서 함수 선언하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
	<div id="container">
		<img src="images/easys-1.jpg" id="cover">	
  </div>
  
	<script>
		var cover = document.getElementById("cover");
		cover.addEventListener("mouseover",function() {
      cover.src = "images/easys-2.jpg";
    });

    cover.addEventListener("mouseout", function() {
      cover.src = "images/easys-1.jpg";
    });  
	</script>
</body>
</html>

CSS 속성에 접근하기

도형의 테두리와 배경색 바꾸기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOM CSS</title>
	<style>
		#container {
			width:400px;
			margin:50px auto;
			text-align: center;
		}
		#rect {
			width:100px;
			height:100px;			
			border:1px solid #222;
			margin:30px auto;
			transition: 1s;
		}
	</style>
</head>
<body>
	<div id="container">
		<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
		<div id="rect"></div>
	</div>	
	
	<script>
		var myRect = document.querySelector("#rect");
		myRect.addEventListener("mouseover", function() {  // mouseover 이벤트 처리
			myRect.style.backgroundColor = "green";  // myRect 요소의 배경색 
			myRect.style.borderRadius = "50%";  // myRect 요소의 테두리 둥글게 처리
		});
		myRect.addEventListener("mouseout", function() {  // mouseout 이벤트 처리
			myRect.style.backgroundColor = "";  // myRect 요소의 배경색 지우기 
			myRect.style.borderRadius = "";  // myRect 요소의 테두리 둥글게 처리 안 함
		});
	</script>
</body>
</html>

[실습] 라이트 박스 효과 만들기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>라이트박스</title>
    <link rel="stylesheet" href="css/lightbox.css">
  </head>
  <body>
    <div class="row">
      <ul>
        <li><img src="images/tree-1-thumb.jpg" data-src="images/tree-1.jpg" class="pic"></li>
        <li><img src="images/tree-2-thumb.jpg" data-src="images/tree-2.jpg" class="pic"></li>
        <li><img src="images/tree-3-thumb.jpg" data-src="images/tree-3.jpg" class="pic"></li> 
        <li><img src="images/tree-4-thumb.jpg" data-src="images/tree-4.jpg" class="pic"></li>
        <li><img src="images/tree-5-thumb.jpg" data-src="images/tree-5.jpg" class="pic"></li>
        <li><img src="images/tree-6-thumb.jpg" data-src="images/tree-6.jpg" class="pic"></li>          
      </ul>    
    </div>

    <div id="lightbox">
			<img src="images/tree-1.jpg" alt="" id="lightboxImage">			
    </div>

    <script>
      var pics = document.getElementsByClassName("pic"); // .pic인 요소들을 가져와 pics 라는 변수에 저장. querySelectorAll(".pic")도 가능
      var lightbox = document.getElementById("lightbox");  // 라이트 박스. querySelector("#lightbox")도 가능
      var lightboxImage = document.getElementById("lightboxImage");  // 라이트 박스 안의 이미지. querySelector("#lightboxImage")도 가능

      for (i=0; i<pics.length; i++) {
        pics[i].addEventListener("click", showLightbox);
      }

      function showLightbox() {
				var bigLocation = this.getAttribute("data-src"); // bigLocation = this.data-src; 도 가능.
				lightboxImage.setAttribute("src", bigLocation);  // lightboxImage.src = bigLocation; 도 가능.
				lightbox.style.display = "block";  // 라이트박스 이미지를 화면에 표시
      }
      
      lightbox.onclick = function() {  //click 이벤트가 발생했을 때 실행할 함수 선언
				lightbox.style.display = "none";  // lightbox 요소를 화면에서 감춤
      }
    </script>
  </body>
</html>

17.4 DOM에서 노드 추가.삭제하기

노드 리스트란

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web Programming</title>
	<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
	<h1>Web Programming</h1>
	<ul id="itemList">
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
	</ul>
</body>
</html>

텍스트 노드를 사용하는 새로운 요소 추가하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>DOM</title>
  <style>
    #container{
      width:500px;
      margin:10px auto;
      padding:20px;
    }
    #info {
      margin-top:20px;
    }
  </style>
</head>
<body>
  <div id="container">    
    <h1>DOM을 공부합시다</h1>
    <a href="#" onclick="addP(); this.onclick='';">더 보기</a>    
    <div id="info"></div>
  </div>
  <script>
    function addP() {
      var newP = document.createElement("p");
      var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
      newP.appendChild(txtNode);
      document.getElementById("info").appendChild(newP);
    }
  </script>
</body>
</html>

속성값이 있는 새로운 요소 추가하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>DOM</title>
  <style>
    #container{
      width:500px;
      margin:10px auto;
      padding:20px;
    }
    #info {
      margin-top:20px;
    }
  </style>
</head>
<body>
  <div id="container">    
    <h1>DOM을 공부합시다</h1>
    <a href="#" onclick="addContents(); this.onclick='';">더 보기</a>    
    <div id="info"></div>
  </div>
  <script>
    function addContents() {
      var newP = document.createElement("p");
      var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
      newP.appendChild(txtNode);
      
      var newImg = document.createElement("img");
      var srcNode = document.createAttribute("src");
      var altNode = document.createAttribute("alt");
      srcNode.value = "images/dom.jpg";
      altNode.value = "돔 트리 예제 이미지";
      newImg.setAttributeNode(srcNode);
      newImg.setAttributeNode(altNode);

      document.getElementById("info").appendChild(newP);
      document.getElementById("info").appendChild(newImg);
    }
  </script>
</body>
</html>

[실습] 텍스트 필드에 입력하 값을 화면에 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web Programming</title>
	<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
  <div id="container">
    <h1>Web Programming</h1>
    <p>공부할 주제를 기록해 보세요</p>
    <form action="">
      <input type="text" id="subject" autofocus>
      <button onclick="newRegister(); return false;">추가</button>
    </form>
    <hr>  
    <ul id="itemList"></ul>  
  </div>

  <script>
    function newRegister() {
      var newItem = document.createElement("li");  // 요소 노드 추가
      var subject = document.querySelector("#subject");  // 폼의 텍스트 필드
      var newText = document.createTextNode(subject.value);  // 텍스트 필드의 값을 텍스트 노드로 만들기
      newItem.appendChild(newText);   // 텍스트 노드를 요소 노드의 자식 노드로 추가

      var itemList = document.querySelector("#itemList");  // 웹 문서에서 부모 노드 가져오기 
      itemList.appendChild(newItem);  // 새로 만든 요소 노드를 부모 노드에 추가

      subject.value="";
    }
  </script>
</body>
</html>

노드 삭제하기

[실습] 입력한 항목을 클릭하여 삭제하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web Programming</title>
	<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
  <div id="container">
    <h1>Web Programming</h1>
    <p>공부할 주제를 기록해 보세요</p>
    <p>공부가 끝난 것은 클릭해서 삭제할 수 있습니다.</p>
    <form action="">
      <input type="text" id="subject" autofocus>
      <button onclick="newRegister(); return false;">추가</button>
    </form>
    <hr>  
    <ul id="itemList"> </ul>  
  </div>

	<script>
    function newRegister() {
      var newItem = document.createElement("li");  // 요소 노드 추가 
      var subject = document.querySelector("#subject");  // 폼의 텍스트 필드
      var newText = document.createTextNode(subject.value);  // 텍스트 필드의 값을 텍스트 노드로 만들기
      newItem.appendChild(newText);  // 텍스트 노드를 요소 노드의 자식 노드로 추가

      var itemList = document.querySelector("#itemList");  // 웹 문서에서 부모 노드 가져오기 
      itemList.insertBefore(newItem, itemList.childNodes[0]);  // 자식 노드중 첫번째 노드 앞에 추가

      subject.value="";

      var items = document.querySelectorAll("li");  // 모든 항목 가져오기
      for(i=0; i<items.length; i++) {
        items[i].addEventListener("click", function() {  // 항목 클릭했을 때 실행할 함수
          if(this.parentNode)    // 부모 노드가 있다면 
            this.parentNode.removeChild(this);  // 부모 노드에서 삭제
        });
      }
    }
	</script>
</body>
</html>

AJAX란?

  • AJAX란 JS의 라이브러리중 하나이며 비동기식 JS와 xml의 약자이다.
  • 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고 페이지의 일부만을 위한 데이터를 로드하는 기법이다.
  • JS를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
  • 즉 JS를 통해 서버에 데이터를 요청하는 것이다.

[참고링크]

시맨틱 웹이란?

  • W3C에 의해 세워진 기준으로 WWW의 확장판이다.
  • 시멘틱 웹의 목표는 인터넷 데이터를 기계가 읽을 수 있게 만드는 것이다.
  • 데이터를 언어학적으로 해석이 가능하게 만들기 위해 RDF나 OWL 같은 기술이 사용된다.

W3C은 시멘틱 웹을 다음과 같이 정의한다.
"시멘틱 웹은 어플리케이션/기업/커뮤니티 등 간의 공유 가능하고, 재사용 가능한 공통적인 프레임워크를 제공한다."

profile
최정윤
개발 기록장
이전 포스트

[새싹] 현대IT&E 231109 기록 -JS 13~15

다음 포스트

[새싹] 현대IT&E 231113 기록 -JSP / Servlet

post-custom-banner

0개의 댓글