-
문서 객체 모델, 사용자 정의 객체, 이벤트 처리, JSON 변환프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 22:52
문서 객체 모델 (Document Object Model)
- 객체 지향 모델로서 구조화된 문서를 표현하는 형식
- HTML 문서에 접근하기 위한 표준 모델
- 표준은 대부분의 브라우저에서 DOM을 구현하는 기준
- 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공
- 웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공
- document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어
DOM 사용 시기
- HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성
- DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 때임
문서 내의 요소 (태그) 제어 메소드
문서 내의 요소(태그) 제어 메소드를 사용하여 요소를 선택할 때 자바스크립트 위치 주의
- 문서 내에서 요소(객체)들이 생성되기전에
- 자바스크립트를 선언하게 되면
- 요소를 선택할 수 없음
- 변경되지 않았음
문서 내에서 요소(객체)들이 생성되기 전에
자바스크립트를 사용하게 되면
요소를 선택할 수 없음
- 변경되었음
요소(태그) 다음에
자바스크립트를 사용했기 때문에
요소 선택 가능
- 변경 되었음
윈도우 로드 완료 후 자바스크립트 실행
- 윈도우 로드 이벤트 확인 후에 자바스크립트 코드로 처리
문서 내의 요소 (태그) 제어 메소드
createElement(‘태그명’) : 요소(태그) 생성
createTextNode(“출력할 문자열”) : 문자열 생성
appendChild(노드) : 노드 연결 (부착)
요소 (태그) 제어 메소드 예제1 : createElement.html
- <h3> 태그 생성
- 문자열 (text) 생
- text를 h3에 연결
- h3를 body에 연결 (문서에 출력)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 DOM : createElement</title> <script type="text/javascript"> window.onload = function(){ // 1. 요소 생성 // <h3>태그 생성하고 객체 참조 변수에 저장 var h3 = document.createElement('h3'); // 텍스트 노드 생성 var text = document.createTextNode("출력할 텍스트 : 홍길동"); // 2. 문서에 출력 // 텍스트를 h3에 연결 h3.appendChild(text); // h3를 body에 연결(부착) document.body.appendChild(h3); }; </script> </head> <body> </body> </html>요소 (태그) 제어 메소드 예제2 : createElement2.html
- <img> 생성
- 속성 설정
- 문서에 출력 (body에 연결)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 DOM : createElement</title> <script type="text/javascript"> window.onload = function() { // 1. 요소 노드 생성 // <img> 태그 생성 var img = document.createElement('img'); // 속성 설정 img.src = "image/bird.jpg"; img.width = 250; img.height = 180; img.title = "예쁜새 "; // 2. 문서에 출력 document.body.appendChild(img); }; </script> </head> <body> </body> </html>getElementById()
- id를 통해 문서 내에서 요소(태그)를 참조하는 메소드
- 지정한 id 속성값을 갖는 개체 중 첫 번째 개체 참조
- 사용
- var 참조변수 = document.getElementById(‘id’);
- <input id=”id”>
getElementById() 예제1 : getElementById1.html
- id가 ‘header’인 태그를 찾아서 텍스트 변경
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 getElementById()</title> <script type="text/javascript"> function change() { // 태그의 id 속성의 값이 'header'인 문서 객체 반환 var header = document.getElementById('header'); // 요소의 텍스트 내용 변경 header.innerHTML = "변경된 제목"; } </script> </head> <body> <h1 id="header">제목</h1> <button id="btn" onClick="change()">제목 변경</button> </body> </html>getElementById() 예제2 : getElementById2.html
- [변경] 버튼 누르면 다음과 같이 변경
- 이미지 : B.png
- 텍스트 : 새로운 이미지로 변경되었습니다
- 버튼 텍스트 : 완료
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 getElementById()</title> <style type="text/css"> div { margin:0 auto; width:60%; text-align:center; } </style> <script type="text/javascript"> function change() { var imageA = document.getElementById('imageA'); var hint = document.getElementById('hint'); var changeButton=document.getElementById('changeButton'); // 속성 변경 imageA.src="image/B.png"; hint.innerHTML="새로운 이미지로 변경되었습니다"; hint.style.background = "yellow"; changeButton.innerHTML="완료"; } </script> </head> <body> <div> <img id="imageA" src="image/A.png"> <div id="hint">[변경] 버튼을 누르면 이미지가 바뀝니다.</div> <br><br> <button id="changeButton" onClick="change()">변경</button> </div> </body> </html>querySelector()
- 1개의 선택자 선택
- 동일한 요소가 여러 개인 경우 첫 번째 요소만 선택
- 예제 : querySelector.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 querySelector()</title> <script type="text/javascript"> window.onload = function() { var header = document.querySelector('h1'); header.style.color = 'orange'; header.style.background = 'skyblue'; header.innerHTML = 'JavaScript'; }; </script> </head> <body> <h1>Header</h1> <h1>Header</h1> <h1>Header</h1> </body> </html>querySelectorAll()
- 동일한 요소가 여러 개인 경우 모든 요소 선택
- 예제 : querySelectorAll.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 querySeletor()</title> <script type="text/javascript"> window.onload = function(){ // 배열로 만들어짐 var headers = document.querySelectorAll('h1'); for(var i=0; i<headers.length; i++){ var header = headers[i]; header.style.color = 'orange'; // headers[i].style.color='orange'; header.style.background = 'skyblue'; header.innerHTML='JavaScript'; } }; </script> </head> <body> <h1>Header</h1> <h1>Header</h1> <h1>Header</h1> </body> </html>getElementsByTagName(태그명)
- 문서 내의 모든 요소를 배열 컬렉션으로 전달받아서 참조할 수 있게 해주는 메소드
- 참조 값들을 배열로 만들어서 전달
- var tdArr = document.getElementsByTagName(‘td’);
- 문서 내의 모든 <td> 태그 가져옴
- <td> 태그 수가 배열 크기가 됨
- for문 사용
- 예제 : getElementsByTagName.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 getElementsByTagName()</title> <style type="text/css"> div { margin:0 auto; width:600px; text-align:center;} table {margin:0 auto; width:100%;} td {width:50px; height:30px;} </style> <script type="text/javascript"> window.onload = function(){ // 모든 <td> 요소 다 가져오기 var tdArr = document.getElementsByTagName('td'); var setNumberBtn = document.getElementById('setNumberBtn'); var setColorBtn = document.getElementById('setColorBtn'); var clearNumberBtn = document.getElementById('clearNumberBtn'); var clearColorBtn = document.getElementById('clearColorBtn'); // 셀에 번호 채우기 : 버튼 클릭 시 <td>에 i 값 출력 setNumberBtn.onclick = function (){ for(var i=0; i<tdArr.length; i++) tdArr[i].innerHTML = i; } // 셀에 색상 채우기 : 버튼 클릭 시 <td> 색상 표시 : 7가지 색상 출력 // red orange yellow green blue navy violet gold pink skyblue // 색상을 배열로 생성 setColorBtn.onclick = function() { var colors =["red", "orange", "yellow", "violet", "pink", "green", "gold"]; for(var i = 0; i < tdArr.length; i++){ tdArr[i].style.background = colors[i]; } } // 셀의 번호 지우기 : 버튼 클릭 시 <td>의 숫자 삭제 clearNumberBtn.onclick = function() { for(var i = 0; i < tdArr.length; i++){ tdArr[i].innerHTML = ""; } } // 셀의 색상 지우기 : 버튼 클릭 시 <td> 색상 제거 clearColorBtn.onclick = function() { for(var i = 0; i < tdArr.length; i++){ tdArr[i].style.background = ""; // "none" } } }; </script> </head> <body> <div> <table border="1"> <tr> <td></td><td></td><td></td><td></td> <td></td><td></td><td></td> </tr> </table> <br><br> <button id="setNumberBtn">셀에 번호 채우기</button> <button id="setColorBtn">셀에 색상 채우기</button> <br><br> <button id="clearNumberBtn">셀의 번호 지우기</button> <button id="clearColorBtn">셀의 색상 지우기</button> </div> </body> </html>
이벤트 핸들러와 이벤트 처리
- 사용자로부터 발생되는 여러 가지 이벤트 처리
자주 사용되는 이벤트 핸들러
인라인 방식 예제 : event1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이벤트 처리</title> <script type="text/javascript"> function show(){ alert("클릭2"); } </script> </head> <body> <div onClick="alert('클릭1')">클릭1</div> <div onClick="show()">클릭2</div> </body> </html>고전 방식 예제 : mouseEvent.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src= "jquery-3.6.0.min.js"></script> <title>jQuery 마우스 이벤트</title> <script type="text/javascript"> $(document).ready(function(){ // 버튼 클릭했을 때 $('#btn').on('click', function(){ alert("클릭했습니다."); }); // 2개의 이벤트 처리 // 방법1 : .on(이벤트1).on(이벤트2) /* $('#btn') .on('mouseover', function(){ $(this).css('background-color', 'yellow'); }) .on('mouseout', function(){ $(this).css('background-color', ''); }); */ // on() 종료 // 방법2 : .on({이벤트1, 이벤트2}) $('#btn').on({ mouseover: function(){ $(this).css('background-color', 'pink'); }, mouseout:function(){ $(this).css('background-color', 'skyblue'); } }); }); </script> </head> <body> <input type="button" id="btn" value="클릭하세요"> </body> </html>인라인 방식과 고전 방식의 이벤트 처리 방식의 경우
- 동일한 객체에 대해 동일한 이벤트를 여러 번 사용 불가
- 마지막 이벤트 하나만 적용
- 예제 : sameEvent.html
DOM 이벤트 리스너 등록
- addEventListner() 메소드 사용해서 이벤트 리스너 등록
- 객체.addEventListner(‘이벤트명’, function(){ // 콜백 함수로 전달
});
- 콜백 함수로 화살표 함수 사용할 경우
- 객체.addEventListner(‘이벤트명’, () => {
});
- 예제 : addEventListner.html
- addEventListner는 동일 이벤트 여러 번 적용 가능
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 addEventListner() </title> <script type="text/javascript"> window.onload = function(){ var greenBtn = document.getElementById('greenBtn'); var redBtn = document.getElementById('redBtn'); var h2 = document.getElementById('h2'); // 개체에 이벤트 리스너 등록 : mouseover 이벤트 greenBtn.addEventListener("mouseover", function(){ h2.style.color = "green"; }); // 개체에 이벤트 리스너 등록 : click 이벤트 redBtn.addEventListener("click", function(){ h2.style.color = "red"; }); }; </script> </head> <body> <h2 id="h2"> 제목 색상 변경</h2> <button id="greenBtn">green</button> <button id="redBtn">red</button> </body> </html>- 예제 : addEventListner2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>addEventListner 동일 이벤트 처리</title> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementById('btn'); // 동일 이벤트 여러 번 적용 가능 : show1()과 show2() 둘 다 실행됨 btn.addEventListener("click", show1); btn.addEventListener("click", show2); }; function show1(){ alert("실행1"); } function show2(){ alert("실행2"); } </script> </head> <body> <button id = "btn">클릭</button> </body> </html>- 예제 : 화살표 함수 사용 : addEventListner3.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>addEventListner + 화살표 함수</title> <script type="text/javascript"> window.onload = function(){ // function대신 ()=>도 가능 let box = document.getElementById("box"); box.addEventListener('mousedown', event => { event.currentTarget.style.background='green'; }); box.addEventListener('mouseup', event => { event.currentTarget.style.background='white'; }); }; </script> </head> <body> <div id = "box">클릭</div> </body> </html>
폼 유효성 확인
form 객체
- document 객체의 하위 객체
- form 태그 내에 들어 있는 여러 입력 양식을 제어
- form의 하위 객체들
폼 객체 사용 방법
- (1) 태그의 name 속성을 객체로 사용하는 경우
- <form name=”newMemberForm”>
- <input type=”text” name=”id”>
- <input type=”password” name=”passwd”>
- newMemberForm.id.focus();
- newMemberForm.id.value = “”;
- newMemberForm.passwd.focus();
- (2) 문서 객체 모델 (DOM) 방식을 사용하는 경우
- <input type=”text” id=”name”>
- var name = document.getElementById(‘name’);
- name.focus();
- name.value = “”;
폼 유효성 확인 예제
- join.html
- 별도의 checkForm.js 파일 생성 (External 방식)
- <script src="checkForm.js"></script>
- 입력 값 확인
- <input> 성명 입력하지 않은 경우
- <input> ID 입력하지 않은 경우
- <input> ID 입력 값의 길이가 6~10가 아닌 경우
- <input> [비밀번호]와 [비밀번호 확인]이 일치하지 않은 경우
- <select>에서 선택하지 않은 경우
- 라디오 버튼 하나도 체크하지 않은 경우
- 체크박스에서 하나도 선택하지 않은 경우
<!doctype html> <html> <head> <meta charset="utf-8"> <title>회원 가입 폼</title> <script src="checkForm.js"></script> </head> <body> <div id="wrap"> <div id="joinBox"> <h2 align="center">회원가입</h2> <hr> <form name="joinForm" id="joinForm" method="post" action="joinMemberOk.jsp"> <table align="center"> <tr> <td>성명</td> <td><input type="text" name="name" id="name"></td> </tr> <tr> <td>아이디</td> <td><input type="text" name="id" id="id" border=0> <input type="button" value="ID중복체크"> (영문자+특수문자: 6~10자)</td> </tr> <tr> <td>비밀번호</td> <td><input type="password" name="password" id="password" size="21"> (영문자+숫자+특수문자: 10~20자)</td> </tr> <tr> <td>비밀번호 확인</td> <td><input type="password" name="passwordCheck" id="passwordCheck" size="21"></td> </tr> <tr> <td>생년월일 </td> <td> <input type="text" name="birthYear" id="birthYear" size="4">년 <select name="birthMonth"> <option value="1">1 <option value="2">2 <option value="4">3 <option value="4">4 <option value="5">5 <option value="6">6 <option value="7">7 <option value="8">8 <option value="9">0 <option value="10">10 <option value="11">11 <option value="12">12 </select> 월 <select name="birthDay"> <option value="1">1 <option value="2">2 <option value="4">3 <option value="4">4 <option value="5">5 <option value="6">6 <option value="7">7 <option value="8">8 <option value="9">0 <option value="10">10 <option value="11">11 <option value="12">12 <option value="13">13 <option value="14">14 <option value="15">15 <option value="16">16 <option value="17">17 <option value="18">18 <option value="19">19 <option value="20">20 <option value="21">21 <option value="22">22 <option value="23">23 <option value="24">24 <option value="25">25 <option value="26">26 <option value="27">27 <option value="28">28 <option value="29">29 <option value="30">30 <option value="31">31 </select> 일 <input type="radio" name="solar" value="양력" checked>양력 <input type="radio" name="solar" value="음력">음력 </td> </tr> <tr> <td>전화번호 </td> <td><select name="tel1"> <option value="02" selected>02 <option value="031">031 <option value="043">043 </select> - <input type="text" name="tel2" id="tel2" size="4"> - <input type="text" name="tel3" id="tel3"size="4"> </td> </tr> <tr> <td>휴대폰번호 </td> <td><select name="hp1"> <option value="000">000 <option value="010" selected>010 </select> - <input type="text" name="hp2" id="hp2"size="4"> - <input type="text" name="hp3" id="hp3"size="4"> </td> </tr> <tr> <td>주소 </td> <td><input type="text" name="zipcode" id="zipcode" readonly> <input type="button" value="우편번호찾기"><br> <input type="text" name="address1" id="address1" size="40" readonly><br> <input type="text" name="address2" id="address2" size="40">상세 주소 입력 </td> </tr> <tr> <td>성별</td> <td> <input type="radio" name="sex" value="남" checked>남 <input type="radio" name="sex" value="여">여 </td> </tr> <tr> <td valign="top">직업</td> <td> <select id ="job"> <option value="">직업선택 <option value="웹디자이너">웹디자이너 <option value="프로그래머">프로그래머 <option value="회사원">회사원 <option value="학생">학생 <option value="영화감독">영화감독 <option value="웹마스터">웹마스터 </select> </td> </tr> <tr> <td valign="top">이메일</td> <td> <input type="text" name="email1" id="email1" size="6">@<select name="email"> <option value="naver" selected>naver.com <option value="gmail">gmail.com <option value="nate">nate.com <option value="hanmail">hanmail.net </select> </td> </tr> <tr> <td>이메일 수신 여부</td> <td> <input type="radio" name="emailRcv" value="yes">예 <input type="radio" name="emailRcv" value="no">아니오 </td> </tr> <tr> <td>동의</td> <td> <label><input type="checkbox" id="agreement1" value="모든약관">모든 약관에 동의</label> <label><input type="checkbox" id="agreement2" value="개인정보">개인 정보 이용 동의</label> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="회원가입"> <input type="reset" value="취 소"> </td> </tr> </table> </form> </div> </div> </body> </html><select> 태그
- 목록에 있는 여러 항목 중 선택
- (1) 항목 선택하면 selectedIndex 속성에 선택된 항목의 인덱스 값 저장 (0부터 시작)
- 하나도 선택하지 않으면 selectedIndex 값은 -1
- 첫 번째 <option> 태그를 빈값으로 하고,
- if(job.selectedIndex == 0) { }
- (2) 또는 <option> 태그 중 하나를 빈 값으로 지정하고, 값이 없으면 선택하지 않은 것으로 처리해도 됨
- <option value=”” selected>직업선택
- if(job.value == “”) { }
- (3) 또는 <option> 태그 하나를 미리 선택해 놓으면 유효성 확인 필요 없음
- <option value="프로그래머" selected>프로그래머
라디오 버튼
- <input type=”radio”>
- 그룹에서 여러 개 중 1개만 선택 가능
- 그룹에 속한 여러 개의 라디오 버튼의 그룹 이름(name 속성)이 동일하므로 라디오 버튼 (객체)는 배열 형태로 사용
- 배열의 각 원소를 하나씩 확인
- checked 속성이 true면 체크된 상태
- false면 체크되지 않은 상태
- for 문 사용 사용 / if 문 사용
- 미리 체크되어 있게 하면 유효성 확인 필요 없음
체크 박스
- <input type=”checkbox”>
- 여러 개 선택 가능
- checked 속성이 true이면 체크된 상태
- false명 체크되지 않은 상태
- 모든 체크박스 확인해야 함
getElementById() 사용
- DOM 요소가 로드된 상태라면
- getElementById() 사용하지 않고 id속성만으로 요소 사용 가능
- 주의점!
- 동일한 이름의 전역 변수 존재한다면 작동안 됨
- 예제 : use_GetElementById.html
사용자 정의 객체
- 사용자가 직접 필요한 객체를 생성해서 사용
사용자 정의 객체 생성 방법
- (1) 리터럴 이용
- (2) 생성자 함수 (function()) 이용
- (3) new Object() 이용 (ES5에 추가)
- (4) class 정의하고 객체 생성 (ES6에 추가)
(1) 리터럴 이용
- 객체 선언 : 멤버 추가
- 프로퍼티(속성) : 속성값
- 멤버 메소드 추가
- 형식
- var 객체 = {
// 변수 : 프로퍼티(속성)
프로퍼티명(속성명)1 : 값1,
프로퍼티명(속성명)2 : 값2
// 멤버 메소드
메소드명 : function() {
수행 코드;
}
};
// 객체 사용
객체.프로퍼티;
객체.메소드();
var person = {
name : “홍길동”,
age : 20,
getName : function() {
return this.name;
}
};
//객체 사용
person.getName(); //객체의 멤버 메소드 사용 (호출)
예제 : object1-literal.html
(2) 생성자 함수 (function()) 이용
- 함수 선언과 같은 방식으로 function 키워드 사용하여 선언(정의)
- 함수를 클래스처럼 사용
- function 함수명() : 생성자 기능
- 프로퍼티 설정 : this.프로퍼티
- new 연산자를 사용해서 객체 생성
- 형식
- function 함수명() { //함수(클래스로 이용) 선언 (생성자 기능)
//프로퍼티 추가
this.프로퍼티1 = 값1;
this.프로퍼티2 = 값2;
// 메서드 추가
this. 메서드 = function() {
수행 코드;
}
}
// 객체 생성
var 객체(인스턴스) = new 함수명(); 객체.메소드();
객체.프로퍼티1;
—------------------------------------------
//함수(클래스로 이용) 선언 (생성자 기능)
function People() {
// 프로퍼티 추가
this.name = “홍길동”;
this.age = 20;
// 메서드 추가
this.getName = function() {
return this.name;
}
}
// 객체 생성
var person = new People(); // 생성자 처럼 사용
person.getName();// 메서드 호출
예제 : object2-function.html
함수이므로 호이스팅 가능
예제2 : object3-function2.html
- <ul> 태그 객체 생성
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 객체 생성 : 생성자 함수 이용</title> <script type="text/javascript"> // 생성자 함수를 이용해서 객체 정의(선언) function ListTag() { //프로퍼티 지정 this.ulTag = document.createElement("ul"); this.ulTag.type = "square"; // <li> 태그 생성해서 <ul>태그에 추가 for(var i=1; i<=5; i++){ var listItem = document.createElement("li"); var itemInput = prompt("꽃" + i + " 입력"); listItem.innerHTML = itemInput; //<ul> 태그에 <li> 태그 추가 this.ulTag.appendChild(listItem); } //멤버 메서드 this.getListItem = function() { return this.ulTag; } } // 객체 생성 window.onload = function() { var list = new ListTag(); // 객체 생성 // box <div> 태그에 <ul> 태그(객체) 추가 var box = document.getElementById("box"); box.appendChild(list.getListItem()); } </script> </head> <body> <div id="box"></div> </body> </html>prototype : 프로토타입
- 객체를 만드는 원형
- 함수도 객체이고, 객체인 함수가 기본으로 갖고 있는 프로퍼티
- 함수의 객체가 생성될 때 모든 객체가 공유하는 공간
- 자바의 static 개념
prototype에 멤버 정의
- 멤버를 함수 외부에 선언
- 여러 객체가 공유하게 하는 방법
예제 : object4-prototype.html
prototype 사용 시 이점
- 생성자 함수 이용해서 객체 생성할 때
- 프로퍼티와 메서드는 객체마다 생성됨
- 사용하지 않을 경우에도 생성되기 때문에 메모리 낭비
- 프로퍼티와 메서드를 미리 만들어 놓지 않고
- 필요 시 추가한 후 모든 객체에서 공유함으로써
- 메모리 낭비를 줄일 수 있음
(3) new Object() 이용 (ES5에 추가)
- new Object()로 빈 객체 생성한 후
- 프로퍼티 추가
- 멤버 메서드 추가
- 객체.메서드() // 객체의 멤버 메서드 사용
- 형식
- var 객체 = new Object(); // 빈 객체 생성 (new 생략 가능)
// 프로퍼티 추가
객체.프로퍼티 = 값;
// 멤버 메서드 추가
객체.메서드명 = function(){
수행 코드;
}
// 객체의 멤버 메서드 호출 (사용)
객체.메서드();
예제 : object5-Object.html
(4) class 정의하고 객체 생성 (ES6에 추가)
- class 키워드 사용
- 생성자 / Getters / Setters 가능
- Getters : 메서드 앞에 get 붙임
- 주의! 프로퍼티 사용 시 앞에 밑줄문자(_) 붙여서 사용
- Setters : 메서드 앞에 set 붙임
- 주의! 프로퍼티 사용 시 앞에 밑줄문자(_) 붙여서 사용
- getter / setter 호출 시 괄호() 안 붙임
- 객체.메서드
- 호이스팅 불가
- 형식
- class 클래스명 {
생성자() { }
Getters
Settters
메서드();
}
// 객체 생성
let 객체 = new 클래스();
객체.메서드();
예제 : object6-class.html
클래스 생성 연습문제 : object7-classEx.html
클래스 : Rectangle
- 프로퍼티 : width, height
- 생성자 / getter / setter
- 메서드 : getArea() : 넓이를 구해서 반환
- 출력
- getter 호출해서 가로 길이, 세로 길이 출력
- 사각형의 넓이 출력
- setter 호출해서 가로 길이, 새로 길이 변경
- 변경된 사각형의 넓이 출력
- 출력 내용
- 가로 길이 : 30, 세로 길이 10
- 사각형의 넓이 : 300
- (출력 안 됨 : 가로 길이를 20, 세로 길이를 30으로 변경)
- 사각형의 넓이 : 600
자바스크립트 객체 JSON 변환
JSON(JavaScript Object Notation)
- 자바스크립트 객체 표기법
- key와 value 값이 쌍으로 구성된 형태의 객체 표기법
- 클라이언트와 서버 사이에서 데이터 교환 목적으로 사용
- 웹 서버에서 수신하는 데이터는 문자열인데, 문자열 데이터를 JSON 파싱 함수를 사용해서 자바스크립트 객체로 변환 가능
- 최근의 브라우저들은 전부 내장 객체로 JSON 변환 기능 지원
- JSON 데이터 형식
- {key:value}
- {“name” : “홍길동”}
자바스크립트 객체 JSON 변환
- 자바스크립트 객체 → JSON data로 변환
- stringify() : 메서드 사용
- 결과 : 제이슨 형태의 문자열
- JSON data를 자바스크립트 객체로 변환
- parse() 메서드
- 결과 : object
예제 : json_parsing.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 </title> <script type="text/javascript"> // 자바스크립트 객체 생성 let car = { no:'11가1111', name:'소나타', maker:'현대', cc:2000, year:2021, accident:null }; // 자바스크립트 객체를 JSON 데이터로 변환 var json = JSON.stringify(car); console.log(json); // {"no":"11가1111","name":"소나타","maker":"현대","cc":2000,"year":2021,"accident":null} // JSON 데이터를 자바스크립트 객체로 변환 var obj = JSON.parse(json); console.log(obj); console.log(obj.no); console.log(obj.name); // 전체 값 출력 for(var i in obj){ console.log(obj[i]); } </script> </head> <body> </body> </html>연습문제 : jsonEx.html
Description : “저는 독서 지도사입니다” 추출해서 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 JSON 데이터 파싱 </title> <script type="text/javascript"> var result = {"version":"v2","userId":"U47b00b58c90f8e47428af8b7bddc1231heo2","timestamp":1621444015108,"bubbles":[{"type":"text","data":{"description":"저는 독서 지도사입니다"},"information":[{"key":"chatType","value":"TEXT"},{"key":"chatType","value":"TEXT"},{"key":"score","value":"1.0"},{"key":"scenarioName","value":"자기 소개"},{"key":"conversationTypes","value":"소개␞직업␞일␞역할␞담당␞누구"},{"key":"matchingType","value":"exactMatch"},{"key":"domainCode","value":"ai_chatbot_ex"}],"context":[]}],"scenario":{"name":"자기 소개","chatUtteranceSetId":3305931,"intent":["소개","직업","일","역할","담당","누구"]},"entities":[],"keywords":[],"event":"send"}; console.log(result); // Object var bubbles = result.bubbles; for(var i in bubbles){ console.log(bubbles[i].data.description); } // scenario name "자기 소개" 추출 console.log(result.scenario.name); // intent 추출 : 소개, 직업, 일, ...., 누구 var intent = result.scenario.intent; for(var i in intent){ console.log(intent[i]); } // imageUrl 값 추출 var result2 = {"version":"v2","userId":"U47b00b58c90f8e47428af8b7bddc1231heo2","timestamp":1621393563377,"bubbles":[{"type":"template","data":{"cover":{"type":"image","data":{"imageUrl":"https://clovachatbot.ncloud.com/ib496e504bl244-0639-439d-93b0-ec4d72655cf8","imagePosition":"top","action":{"type":"link","data":{"url":"https://www.multicampus.com/cs/map/mapMain?p_menu=MTA1I01BSU4=&p_gubun=Qw==&req=0"}}}}}}],"scenario":{"name":"독서 모임 장소 약도 문의","chatUtteranceSetId":3306432,"intent":["장소","위치","지도","약도"]},"entities":[],"keywords":[],"event":"send"}; console.log(result2.bubbles[0].data.cover.data.imageUrl); // 또는 var bubbles = result2.bubbles; for(var i in bubbles) console.log(result2.bubbles[i].data.cover.data.imageUrl); </script> </head> <body> </body> </html>'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글
브라우저 객체 모델 (window, history, location, navigator) (0) 2022.01.27 자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String) (0) 2022.01.27 제어문 (if, switch, for, while...) (0) 2022.01.27 변수 (var, let, const) + 연산자 + 데이터 타입 (0) 2022.01.27 데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt) (0) 2022.01.26