- [개발자의품격][부트캠프][1기][9차시] JavaScript 주요 포인트 #8 | 내장 객체 - JSON, Window 객체2022년 02월 04일 23시 13분 34초에 업로드 된 글입니다.작성자: DandyNow728x90반응형
JavaScript 주요 포인트 #8
내장 객체 - JSON 객체
JSON(JavaScript Object Notation)은 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다(출처: 위키백과). JSON 객체는 JSON 포맷을 자바스크립트에서 효율적으로 사용하기 위해 사용한다.
stringify, parse 함수
// JSON 객체 <script> // JSON 객체는 JSON 포맷을 자바스크립트에서 효율적으로 사용하기 위해 사용한다. JSON은 웹 개발시 가장 많이 사용하는 포맷이다. // 키는 문자열이어야 함. // JSON은 오브젝트와 거의 똑 같이 생겼다. // object // let person1 = { // name: "홍길동", // age: 22, // tel: "010-0000-0000", // isAdult: true, // school: {}, // siGunGu: "", // grade: [], // }; // JSON 포맷 // { // "name": "홍길동", // "age": 22, // "tel": "010-0000-0000", // "isAdult": true, // "school": {}, // "siGunGu": "", // "grade": [], // } let arr = [3, 4, 5, 6, 7]; console.log(arr); // (5) [3, 4, 5, 6, 7] console.log(typeof arr); // object // object를 문자열로 변환 console.log(JSON.stringify(arr)); // [3, 4, 5, 6, 7] console.log(typeof JSON.stringify(arr)); // string // 문자열 형태의 JSON을 object로 변환(서버로 부터 전달받은 JOSON 데이터를 자바스크립트에서 사용할 수 있게 object로 변환한다.) console.log(JSON.parse("[3, 4, 5, 6, 7]")); // (5) [3, 4, 5, 6, 7] console.log(typeof JSON.parse("[3, 4, 5, 6, 7]")); // object </script>
내장 객체 - Window 객체
JSON(JavaScript Object Notation)은 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다(출처: 위키백과). JSON 객체는 JSON 포맷을 자바스크립트에서 효율적으로 사용하기 위해 사용한다.
alert, prompt, confirm, open, setTimeout, clearTimeout, setInterval, clearInterval 함수
// Window 객체 <body> // [그림 1] 참조 <button onclick="doDelete();">삭제</button> <button onclick="stop();">중지</button> <table> <thead> <tr> <th>이름</th> <th>상세보기</th> </tr> </thead> <tbody> <tr> <td>홍길동</td> <td><button onclick="openUserDetail('00001');">상세보기</button></td> </tr> </tbody> </table> <script> // alert 경고 메시지를 띄운다. window.alert("이것은 경고창 1입니다."); // [그림 2] 참조 alert("이것은 경고창 2입니다."); // [그림 3] 참조(window 객체는 전역객체 이기 때문에 생략해도 된다.) function doDelete() { // prompt 문자열을 입력받는 함수이다. let pass = window.prompt("비밀번호를 입력하세요."); // 비밀번호 1234를 입력하면 삭제하는 예제 if (pass === "1234") { // confirm 진행 또는 종료 여부를 확인한다. if (confirm("정말 삭제하시겠습니까?")) { // [그림 4] 참조 console.log("삭제가 실행됩니다."); } } else { alert("비밀번호가 맞지 않습니다."); // [그림 5] 참조 } } function openUserDetail(userId) { // open 윈도우 새 창/새 탭으로 지정한 url을 오픈한다. window.open("https://naver.com"); // 최근에는 이 방식이 아닌 SPA로 모달창에 띄운다. } // setTimeout 두 번째 파라미터로 지정한 시간 간격 이후에 첫 번째 파라미터에 정의한 함수를 1회 실행한다. let myExec = setTimeout(function () { console.log("3초 후에 출력됩니다."); }, 3000); //밀리세컨드라서 3*1000 = 3초 function stop() { // clearTimeout setTimeout이 실행되지 않은 상태일때 중지할 수 있다. clearTimeout(myExec); clearTimeout(myExec2); // setInterval도 중지가 된다. // clearInterval setInterval을 중지한다. // clearInterval(myExec2); } // setInterval 두 번째 파라미터로 지정한 시간 간격마다 첫 번째 파라미터에 정의한 함수를 반복적으로 실행한다. let myExec2 = setInterval(function () { console.log("3초 마다 실행"); }, 3000); </script> </body>setInterval은 배너 광고 슬라이드 화면을 반복적으로 돌릴 때 사용 가능하다. 데이터를 일정 시간마다 갱신할 때도 사용할 수 있겠지만 이 경우에는 HTML5의 websocket을 사용하기 때문에 쓸 일이 없다. websocket을 사용하지 않았을 때는 서버에 request해야만 response 되었는데, 요청이 없더라도 서버에서 보내줄 수 있게 되었다. 예를 들어 1만 명의 클라이언트에게 주식창을 보여줄 때 websocket 통신이 아닌 경우에는 클라이언트 1만 명이 주가를 갱신할 때마다 매번 1만 번 서버에 API 호출을 하고, 서버는 1만 번 response 한다. websocket 통신에서는 1만 명이 단 한번 API 호출을 하면 서버는 1만 명에게 데이터가 갱신될 때마다 response 한다. websocket은 node.js에서 다룰 예정이다. 실무에서는 웹소켓을 실시간 채팅앱, 주문, 주문현황, 대시보드 등에서 사용한다.
[그림1] html 부분 
[그림 2] window.alert("이것은 경고창 1입니다."); 
[그림 3] alert("이것은 경고창 2입니다."); 
[그림 4] confirm("정말 삭제하시겠습니까?") 
[그림 5] alert("비밀번호가 맞지 않습니다.") 728x90반응형'영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글
이전글이 없습니다.댓글