├── .gitignore
├── 06-02-2.html
├── 06-02-3.html
├── 06-02-4.html
├── 06-02-5.html
├── 10-01-1.html
├── 10-01-1_.html
├── 10-01-2.html
├── 10-01-2_.html
├── 10-4.html
├── 12-07-1.html
├── 5-11.html
├── 5-12.html
├── 5-13-2.html
├── 5-13-3.html
├── 5-13.html
├── README.md
├── chapter03
    ├── array.html
    ├── comment.html
    ├── console.html
    ├── const.html
    ├── datatype.html
    ├── floatnumber64.html
    ├── for-in.html
    ├── for-loop.html
    ├── for-of.html
    ├── func.html
    ├── if-else-if.html
    ├── if-only.html
    ├── if.html
    ├── js_location.html
    ├── js_location.js
    ├── let.html
    ├── object.html
    ├── operator.html
    ├── switch.html
    ├── typeof.html
    ├── var.html
    └── while.html
├── chapter04
    ├── array.html
    ├── array_filter.html
    ├── array_map.html
    ├── array_reduce.html
    ├── array_sort.html
    ├── date.html
    ├── interval_date.html
    ├── json.html
    ├── map.html
    ├── math.html
    ├── number.html
    ├── object.html
    ├── rsp_player.html
    ├── set.html
    ├── string.html
    ├── symbol.html
    └── window.html
├── chapter05
    ├── array_destruct.html
    ├── arrow_func.html
    ├── async_await.html
    ├── class.html
    ├── default_func_param.html
    ├── error.html
    ├── fetch.html
    ├── log.js
    ├── module.html
    ├── object_destruct.html
    ├── object_literal.html
    ├── promise.html
    ├── ref.js
    ├── regexp.html
    ├── rest_param.html
    ├── scope.html
    ├── spread_operator.html
    ├── strictmode.html
    ├── template_literals.html
    ├── this.html
    └── xmlhttprequest.html
├── chapter06
    ├── json_delete.html
    ├── json_get.html
    ├── json_post.html
    └── json_put.html
├── chapter08
    ├── dom_attribute.html
    ├── dom_change.html
    ├── dom_element.html
    ├── dom_event.html
    └── dom_style.html
├── chapter10
    ├── decode.html
    ├── encode.html
    ├── geolocation.html
    ├── localstorage.html
    ├── localstorage2.html
    ├── sessionstorage.html
    ├── sessionstorage2.html
    └── webspeech.html
├── chapter12
    ├── currencyformat.html
    ├── datagrid.html
    ├── datefomat.html
    ├── datepicker.html
    ├── float.html
    ├── i18n.html
    ├── i18n2.html
    ├── number.html
    └── setfield.html
├── chapter13
    ├── googlelogin.html
    ├── kakaologin.html
    └── naverlogin.html
├── chapter14
    ├── restaurant.html
    ├── subway.html
    └── vending.html
├── json-server
    └── db.json
├── samples
    └── user_data.js
└── test.html


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/06-02-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       fetch("http://localhost:3000/comments")
 9 |         .then((response) => response.json())
10 |         .then((json) => console.log(json)); //전체 데이터 조회
11 | 
12 |       fetch("http://localhost:3000/comments/1")
13 |         .then((response) => response.json())
14 |         .then((json) => console.log(json)); //id로 조회
15 | 
16 |       fetch("http://localhost:3000/comments?postId=1")
17 |         .then((response) => response.json())
18 |         .then((json) => console.log(json)); //query로 postId=1로 조회
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/06-02-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       fetch("http://localhost:3000/posts", {
 9 |         method: "POST", //HTTP 요청 방법
10 |         body: JSON.stringify({
11 |           //전송할 데이터
12 |           title: "The Great",
13 |           author: "Jeremy",
14 |         }),
15 |         headers: {
16 |           //헤더 값 정의
17 |           "content-type": "application/json; charset=UTF-8", //content-type 정의
18 |         },
19 |       })
20 |         .then((response) => response.json())
21 |         .then((json) => console.log(json));
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/06-02-4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       fetch("http://localhost:3000/posts/2", {
 9 |         method: "PUT", //HTTP 요청 방법
10 |         body: JSON.stringify({
11 |           //전송할 데이터
12 |           id: 2,
13 |           title: "The Great Jeremy",
14 |           author: "Jeremy",
15 |         }),
16 |         headers: {
17 |           //헤더 값 정의
18 |           "content-type": "application/json; charset=UTF-8", //content-type 정의
19 |         },
20 |       })
21 |         .then((response) => response.json())
22 |         .then((json) => console.log(json));
23 |     </script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/06-02-5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       fetch("http://localhost:3000/posts/2", { method: "DELETE" });
 9 |     </script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/10-01-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       if (typeof Storage !== "undefined") {
 9 |         //Storage를 사용할 수 있는지 체크
10 |         localStorage.setItem("title", "The Great"); //로컬스토리지에 title 키에 The Great 저장
11 | 
12 |         const users = [
13 |           { id: 1, name: "Hyeok" },
14 |           { id: 2, name: "Seo" },
15 |         ];
16 |         localStorage.setItem("users", JSON.stringify(users)); //로컬스토리지에 users 키에 users 배열을 문자열로 저장
17 |       }
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/10-01-1_.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       if (typeof Storage !== "undefined") {
 9 |         console.log(localStorage.getItem("title"));
10 |         console.log(JSON.parse(localStorage.getItem("users"))); //배열을 문자열로 변환해서 저장한 데이터는 읽어 올 때 다시 배열로 변환해줘야 합니다.
11 |       }
12 |     </script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/10-01-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       if (typeof Storage !== "undefined") {
 9 |         //Storage를 사용할 수 있는지 체크
10 |         sessionStorage.setItem("title", "The Great"); //로컬스토리지에 title 키에 The Great 저장
11 | 
12 |         const users = [
13 |           { id: 1, name: "Hyeok" },
14 |           { id: 2, name: "Seo" },
15 |         ];
16 |         sessionStorage.setItem("users", JSON.stringify(users)); //로컬스토리지에 users 키에 users 배열을 문자열로 저장
17 |       }
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/10-01-2_.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       if (typeof Storage !== "undefined") {
 9 |         console.log(sessionStorage.getItem("title"));
10 |         console.log(JSON.parse(sessionStorage.getItem("users"))); //배열을 문자열로 변환해서 저장한 데이터는 읽어 올 때 다시 배열로 변환해줘야 합니다.
11 |       }
12 |     </script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/10-4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       console.log(encodeURI("http://domain.com?x=A")); // http://domain.com?x=A
 9 |       console.log(encodeURI("http://domain.com?x=가")); // http://domain.com?x=%EA%B0%80
10 | 
11 |       const encoded = encodeURI("http://domain.com?x=가"); //http://domain.com?x=%EA%B0%80
12 |       console.log(decodeURI(encoded)); //http://domain.com?x=가
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/12-07-1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Document</title>
  5 |     <style>
  6 |       table {
  7 |         width: 100%;
  8 |       }
  9 | 
 10 |       table,
 11 |       th,
 12 |       td {
 13 |         border-collapse: collapse;
 14 |       }
 15 | 
 16 |       th,
 17 |       td {
 18 |         border: 1px solid #222;
 19 |         padding: 5px 10px;
 20 |       }
 21 | 
 22 |       th {
 23 |         cursor: pointer;
 24 |       }
 25 | 
 26 |       .pagination {
 27 |         display: inline-block;
 28 |         margin-top: 5px;
 29 |       }
 30 | 
 31 |       .pagination a {
 32 |         color: black;
 33 |         float: left;
 34 |         padding: 8px 16px;
 35 |         text-decoration: none;
 36 |         cursor: pointer;
 37 |       }
 38 | 
 39 |       .pagination a.active {
 40 |         background-color: deeppink;
 41 |         color: white;
 42 |       }
 43 |     </style>
 44 |   </head>
 45 |   <body>
 46 |     <input type="text" id="txt" /><button onclick="filter();">검색</button>
 47 |     <table>
 48 |       <thead>
 49 |         <tr>
 50 |           <th data-sort-key="name">Name</th>
 51 |           <th data-sort-key="company">Company</th>
 52 |           <th data-sort-key="email">Email</th>
 53 |           <th data-sort-key="phone">Phone</th>
 54 |           <th data-sort-key="address">Address</th>
 55 |         </tr>
 56 |       </thead>
 57 |       <tbody id="user_tb"></tbody>
 58 |     </table>
 59 |     <script src="/samples/user_data.js"></script>
 60 |     <script>
 61 |       /**
 62 |        * tbody에 tr,td 태그를 주어진 데이터 수 만큼 화면에 출력하는 함수
 63 |        * @param {String} id
 64 |        * @param {Array} data
 65 |        */
 66 |       function render(id, data) {
 67 |         const h = []; //tr,td 태그에 대한 html 문자열을 담을 배열
 68 |         for (const user of data) {
 69 |           h.push("<tr>");
 70 |           h.push(`<td>${user.name}</td>`);
 71 |           h.push(`<td>${user.company}</td>`);
 72 |           h.push(`<td>${user.email}</td>`);
 73 |           h.push(`<td>${user.phone}</td>`);
 74 |           h.push(`<td>${user.address}</td>`);
 75 |           h.push("</tr>");
 76 |         }
 77 | 
 78 |         document.getElementById(id).innerHTML = h.join(""); //배열 h에 담긴 html 문자열을 하나로 합쳐서 innerHTML에 할당
 79 |       }
 80 | 
 81 |       let lastSortKey = "";
 82 |       let bAsc = true;
 83 | 
 84 |       /**
 85 |        * 컬럼명(th)을 클릭하면, th의 속성 data-sort-key를 가져와서 해당 키로 배열 데이터를 정렬하는 함수
 86 |        * @param {String} columnKey
 87 |        * @param {Boolean} bAsc - true이면 오름차순, false이면 내림차순
 88 |        */
 89 |       function sort(columnKey) {
 90 |         if (columnKey == lastSortKey) bAsc = !bAsc; //마지막으로 정렬했던 key와 현재 key가 같으면 정렬 방식 변경
 91 | 
 92 |         let sortValue = bAsc ? 1 : -1;
 93 |         const sortData = currentData.sort(function (a, b) {
 94 |           //배열의 내장함수인 sort를 사용해서 배열 정렬
 95 |           return a[columnKey] > b[columnKey]
 96 |             ? sortValue
 97 |             : a[columnKey] < b[columnKey]
 98 |             ? sortValue * -1
 99 |             : 0;
100 |         });
101 | 
102 |         render("user_tb", sortData);
103 |         lastSortKey = columnKey;
104 |       }
105 | 
106 |       /**
107 |        * 사용자 입력한 검색(필터) 조건에 맞는 데이터를 출력
108 |        */
109 |       function filter() {
110 |         const txt = document.getElementById("txt").value; //검색 입력창에 입력한 문자열
111 |         if (txt == "") {
112 |           //필터 조건이 없으면 전체 데이터 출력
113 |           currentData = userList;
114 |           render("user_tb", currentData);
115 |         } else {
116 |           const regexp = new RegExp(txt, "i"); //대소문자 구분 없이 조회하기 위해서 입력된 텍스트를 소문자로 변경
117 |           currentData = userList.filter(
118 |             (user) =>
119 |               regexp.test(user.name) ||
120 |               regexp.test(user.email) ||
121 |               regexp.test(user.phone) ||
122 |               regexp.test(user.address)
123 |           );
124 | 
125 |           render("user_tb", currentData);
126 |         }
127 |       }
128 | 
129 |       let currentData = userList;
130 | 
131 |       window.addEventListener("load", function () {
132 |         document.querySelectorAll("th[data-sort-key]").forEach((th) => {
133 |           //컬럼명(th)을 클릭하면 정렬함수 실행
134 |           th.addEventListener("click", function () {
135 |             sort(th.getAttribute("data-sort-key"));
136 |           });
137 |         });
138 | 
139 |         render("user_tb", currentData); //render 함수를 호출해서 화면에 데이터를 테이블로 출력
140 |       });
141 |     </script>
142 |   </body>
143 | </html>
144 | 


--------------------------------------------------------------------------------
/5-11.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       // const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
 9 |       // xhr.open("POST", "/posts"); //HTTP Method, URL 정의
10 |       // xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
11 | 
12 |       // const data = {
13 |       //   id: 2,
14 |       //   title: "XHLHttpRequest",
15 |       //   author: "Jeremy",
16 |       // };
17 | 
18 |       // xhr.send(JSON.stringify(data)); //JSON.stringify를 통해 오브젝트 데이터를 문자열 형태로 변경해서 전송해야 함.
19 | 
20 |       // const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
21 |       // xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
22 |       // xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
23 |       // xhr.send(); // 요청 전송
24 | 
25 |       // xhr.onload = () => {
26 |       //   if (xhr.status === 200) {
27 |       //     // 정상적으로 응답이 되면 status가 200
28 |       //     const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
29 |       //     console.log(res); // 100개의 데이터를 받아 옴
30 |       //   } else {
31 |       //     // 에러 발생
32 |       //     console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
33 |       //   }
34 |       // };
35 | 
36 |       // const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
37 |       // xhr.open("POST", "https://jsonplaceholder.typicode.com/posts"); //HTTP Method, URL 정의
38 |       // xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); //헤더 값 중 content-type 정의
39 |       // xhr.send(JSON.stringify({ title: "foo", body: "bar", userId: 1 })); // 요청 전송
40 | 
41 |       // xhr.onload = () => {
42 |       //   if (xhr.status === 201) {
43 |       //     // POST 요청이 정상적으로 성공이 되면 201
44 |       //     const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
45 |       //     console.log(res); //
46 |       //   } else {
47 |       //     // 에러 발생
48 |       //     console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
49 |       //   }
50 |       // };
51 | 
52 |       // const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
53 |       // xhr.open("PUT", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
54 |       // xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); //헤더 값 중 content-type 정의
55 |       // xhr.send(JSON.stringify({ title: "foo", body: "bar", userId: 1 })); // 요청 전송
56 | 
57 |       // xhr.onload = () => {
58 |       //   if (xhr.status === 200) {
59 |       //     // PUT 요청이 정상적으로 성공이 되면 200
60 |       //     const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
61 |       //     console.log(res); //
62 |       //   } else {
63 |       //     // 에러 발생
64 |       //     console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
65 |       //   }
66 |       // };
67 | 
68 |       const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
69 |       xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
70 |       xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); //헤더 값 중 content-type 정의
71 |       xhr.send(); // 요청 전송
72 | 
73 |       xhr.onload = () => {
74 |         console.log(xhr);
75 |         if (xhr.status === 200) {
76 |           // DELETE 요청이 정상적으로 성공이 되면 200
77 |           const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
78 |           console.log(res); //
79 |         } else {
80 |           // 에러 발생
81 |           console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
82 |         }
83 |       };
84 |     </script>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/5-12.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       // GET - 데이터 조회
 9 |       function getData() {
10 |         return fetch("https://jsonplaceholder.typicode.com/posts")
11 |           .then((response) => response.json())
12 |           .then((json) => console.log(json));
13 |       }
14 | 
15 |       console.log(getData());
16 | 
17 |       console.log("aaaa");
18 | 
19 |       // //id가 1인 데이터 조회
20 |       // fetch("https://jsonplaceholder.typicode.com/posts/1")
21 |       //   .then((response) => response.json())
22 |       //   .then((json) => console.log(json));
23 | 
24 |       // //POST - 데이터 생성
25 |       // fetch("https://jsonplaceholder.typicode.com/posts", {
26 |       //   method: "POST", //HTTP 요청 방법
27 |       //   body: JSON.stringify({
28 |       //     //전송할 데이터
29 |       //     title: "foo",
30 |       //     body: "bar",
31 |       //     userId: 1,
32 |       //   }),
33 |       //   headers: {
34 |       //     //헤더 값 정의
35 |       //     "content-type": "application/json; charset=UTF-8", //content-type 정의
36 |       //   },
37 |       // })
38 |       //   .then((response) => response.json())
39 |       //   .then((json) => console.log(json));
40 | 
41 |       // //PUT - 데이터 수정
42 |       // fetch("https://jsonplaceholder.typicode.com/posts/1", {
43 |       //   method: "PUT",
44 |       //   body: JSON.stringify({
45 |       //     id: 1,
46 |       //     title: "foo",
47 |       //     body: "bar",
48 |       //     userId: 1,
49 |       //   }),
50 |       //   headers: {
51 |       //     "Content-type": "application/json; charset=UTF-8",
52 |       //   },
53 |       // })
54 |       //   .then((response) => response.json())
55 |       //   .then((json) => console.log(json));
56 | 
57 |       // //DELETE - 데이터 삭제
58 |       // fetch("https://jsonplaceholder.typicode.com/posts/1", {
59 |       //   method: "DELETE",
60 |       // });
61 |     </script>
62 |   </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/5-13-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getData() {
 9 |         const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
10 |         xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
11 |         xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
12 |         xhr.send(); // 요청 전송
13 | 
14 |         xhr.onload = () => {
15 |           if (xhr.status === 200) {
16 |             // 정상적으로 응답이 되면 status가 200
17 |             const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
18 |             console.log(res);
19 |             return res;
20 |           } else {
21 |             // 에러 발생
22 |             console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
23 |             return;
24 |           }
25 |         };
26 |       }
27 |     </script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/5-13-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       // function myFunction() {
 9 |       //   fetch("https://jsonplaceholder.typicode.com/posts/1")
10 |       //     .then((response) => response.json())
11 |       //     .then((json) => {
12 |       //       console.log(json);
13 |       //       //코드 구현
14 |       //     });
15 |       // }
16 | 
17 |       async function myFunction() {
18 |         const res1 = await fetch(
19 |           "https://jsonplaceholder.typicode.com/posts/1"
20 |         );
21 |         const res1Json = await res1.json();
22 |         console.log(res1Json);
23 | 
24 |         const res2 = await fetch(
25 |           "https://jsonplaceholder.typicode.com/posts/1",
26 |           {
27 |             method: "PUT",
28 |             body: JSON.stringify({
29 |               id: 1,
30 |               title: "foo",
31 |               body: "bar",
32 |               userId: 1,
33 |             }),
34 |             headers: {
35 |               "Content-type": "application/json; charset=UTF-8",
36 |             },
37 |           }
38 |         );
39 |         const res2Json = await res2.json();
40 |         console.log(res2Json);
41 |       }
42 | 
43 |       myFunction();
44 |     </script>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/5-13.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getData() {
 9 |         const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
10 |         xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
11 |         xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
12 |         xhr.send(); // 요청 전송
13 | 
14 |         xhr.onload = () => {
15 |           if (xhr.status === 200) {
16 |             // 정상적으로 응답이 되면 status가 200
17 |             const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
18 |             console.log(res);
19 |             return res;
20 |           } else {
21 |             // 에러 발생
22 |             console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
23 |             return;
24 |           }
25 |         };
26 |       }
27 | 
28 |       // const res = getData(); // 함수 호출
29 |       // console.log(res); // 코드가 바로 실행되고, 이 시점에는 서버로 부터 응답이 오지 않은 시점이기 때문에 undefined
30 |       // console.log("다음 코드를 실행합니다.");
31 | 
32 |       function getDataPromise() {
33 |         return new Promise((resolve, reject) => {
34 |           const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
35 |           xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
36 |           xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
37 |           xhr.send(); // 요청 전송
38 | 
39 |           xhr.onload = () => {
40 |             if (xhr.status === 200) {
41 |               // 정상적으로 응답이 되면 status가 200
42 |               const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
43 |               resolve(res);
44 |             } else {
45 |               // 에러 발생
46 |               console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
47 |               reject(new Error(xhr.status));
48 |             }
49 |           };
50 |         });
51 |       }
52 | 
53 |       const res2 = getDataPromise(); // 함수 호출
54 |       console.log(res2); // 서버 응답이 완료된 후 코드가 실행 됨
55 |       console.log("다음 코드를 실행합니다.");
56 |     </script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # javascript-project


--------------------------------------------------------------------------------
/chapter03/array.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       const cars = ["Saab", "Volvo", "BMW"];
 9 |       cars[0] = "Hyundai"; //배열의 첫번째 요소의 값이 Hyundai로 변경
10 |       cars[1] = "Kia"; //배열의 두번째 요소의 값이 Kia로 변경
11 |       console.log(cars[0]); //Hyundai
12 |       console.log(cars[1]); //Kia
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/chapter03/comment.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var x = 5; //x는 5입니다.
 9 |       /*
10 |       여러문장을 하나의 주석으로 묶습니다.
11 |       여러문장을 하나의 주석으로 묶습니다.
12 |       */
13 | 
14 |       //코드가 실행이 되지 않도록 막아두는 역할도 합니다.
15 |       //alert(x);
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/chapter03/console.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       console.log("콘솔창에 출력합니다.");
 9 |       document.write("정상적인 코드 이용");
10 |       document.wirte("잘못된 코드 이용");
11 |       console.log("콘솔창에 출력하기");
12 |     </script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/chapter03/const.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       const x = 5; //변수 x에 5을 저장
 9 |       const y = 6; //변수 y에 6을 저장
10 |       const z = x + y; //변수 z에 변수x와 변수y를 더한 값을 저장. z에는 11이 저장됨.
11 | 
12 |       x = 7; //값 재할당시 에러 발생
13 |       const x = 7; //동일한 변수명으로 선언시 에러 발생
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/chapter03/datatype.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       /* String */
 9 |       let name1 = "John Doe"; // 쌍따옴표를 사용해서 문자열 데이터를 저장
10 |       let name2 = "John Doe"; // 홑따옴표를 사용해서 문자열 데이터를 저장
11 |       let singleQuote = "He is called 'Johnny'"; // 문자열 안에 홑따옴표 사용
12 |       let doubleQuote = 'He is called "Johnny"'; // 문자열 안에 쌍따옴표 사용
13 | 
14 |       // let singleQuote2 = 'He is called 'Johnny'';    // 에러 발생
15 |       // let doubleQuote2 = "He is called "Johnny"";    // 에러 발생
16 | 
17 |       let singleQuote3 = "He is called 'Johnny'"; // He is called 'Johnny'
18 |       let doubleQuote2 = 'He is called "Johnny"'; // He is called "Johnny"
19 | 
20 |       /* Number */
21 |       let x1 = 34.13; // 소수점이 있는 소수
22 |       let x2 = 34; // 소수점이 없는 정수
23 | 
24 |       /* Boolean */
25 |       let x = 5;
26 |       let y = 5;
27 |       let z = 6;
28 |       (x == y)(
29 |         // true
30 |         x == z
31 |       ); // false
32 |       let isOk = true;
33 | 
34 |       /* undefined */
35 |       let car; // 변수를 선언하고 데이터를 할당하지 않으면, 변수의 값은 undefined
36 | 
37 |       /* null */
38 |       let truck = null;
39 |     </script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/chapter03/floatnumber64.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       let x = 0.1 + 0.2;
 9 |       console.log(x); //0.3
10 |       //0.30000000000000004
11 |       //64비트 부동소수점
12 | 
13 |       console.log((0.1).toString(2));
14 |       //0.0001100110011001100110011001100110011001100110011001101
15 | 
16 |       //64비트부동소수점
17 |       //1비트 - 양수 0, 음수 1
18 |       //11비트 - 지수부 - 2^(n-1)-1 + m
19 |       //52비트 - 가수부
20 |       //2^10 = 1024 - 1 - 4 = 1019
21 | 
22 |       console.log((1019).toString(2));
23 |       //01111111011
24 | 
25 |       console.log((0.2).toString(2));
26 |       //0.001100110011001100110011001100110011001100110011001101
27 |       //1비트 - 0
28 |       //11비트 -
29 |       //2^10 = 1024 - 1 - 3 = 1020
30 |       console.log((1020).toString(2)); //01111111100
31 | 
32 |       //0.1     ==> 0.0001100110011001100110011001100110011001100110011001101
33 |       //0.2     ==> 0.001100110011001100110011001100110011001100110011001101
34 |       //0.1+0.2 ==> 0.0100110011001100110011001100110011001100110011001100111
35 | 
36 |       console.log(
37 |         parseInt("0100110011001100110011001100110011001100110011001100111", 2) *
38 |           Math.pow(2, -55)
39 |       );
40 |       //BigNumber.js
41 |       //Big.js
42 |       //Decimal.js
43 | 
44 |       let x2 = 9999999999999999;
45 |       //       9007199254740991
46 |       console.log(x2);
47 |       console.log(Number.MAX_SAFE_INTEGER);
48 |     </script>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/chapter03/for-in.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var person = { fname: "John", lname: "Doe", age: 25 };
 9 | 
10 |       for (var key in person) {
11 |         console.log(person[key]); //오브젝트 key 출력
12 |       }
13 | 
14 |       var brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"];
15 |       for (var brand in brands) {
16 |         console.log(brand); //배열의 인덱스 번호 출력
17 |       }
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/chapter03/for-loop.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"];
 9 |       console.log(brands[0]); //애플
10 |       console.log(brands[1]); //구글
11 |       console.log(brands[2]); //페이스북
12 |       console.log(brands[3]); //아마존
13 |       console.log(brands[4]); //삼성전자
14 | 
15 |       for (var i = 0; i < brands.length; i++) {
16 |         console.log(brands[i]);
17 |       }
18 | 
19 |       var productList = [
20 |         // 음료 리스트
21 |         {
22 |           name: "솔의눈",
23 |           price: 700,
24 |         },
25 |         {
26 |           name: "커피",
27 |           price: 700,
28 |         },
29 |         {
30 |           name: "파워레이드",
31 |           price: 1200,
32 |         },
33 |         {
34 |           name: "오렌지",
35 |           price: 1000,
36 |         },
37 |         {
38 |           name: "보리차",
39 |           price: 1200,
40 |         },
41 |         {
42 |           name: "밀키스",
43 |           price: 800,
44 |         },
45 |       ];
46 | 
47 |       let inputCoin = 800; //고객이 음료 구매를 위한 투입한 총 금액
48 |       let len = productList.length; //배열 productList에 담긴 요소의 길이
49 |       let outputList = []; //고객이 구매할 수 있는 음료 목록을 저장할 새로운 배열
50 |       for (var i = 0; i < len; i++) {
51 |         //productList의 모든 요소에 대한 접근
52 |         if (productList[i].price <= inputCoin) {
53 |           //음료 가격이 고객이 투입한 금액 보다 같거나 작으면
54 |           outputList.push(productList[i]); //outputList에 추가
55 |         }
56 |       }
57 |     </script>
58 |   </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/chapter03/for-of.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"];
 9 |       for (var brand of brands) {
10 |         console.log(brand); //배열의 각 요소 출력
11 |       }
12 | 
13 |       var language = "JavaScript";
14 |       for (var x of language) {
15 |         console.log(x); //문자열의 단일 문자 출력
16 |       }
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/chapter03/func.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function sum(p1, p2) {
 9 |         //함수 선언
10 |         let sum = p1 + p2;
11 |         return sum;
12 |       }
13 | 
14 |       let sum1 = sum(21, 24); //함수 호출
15 |       let sum2 = sum(7, 16); //함수 호출
16 | 
17 |       /**
18 |        * 덧셈 함수
19 |        * @param {number} n1
20 |        * @param {number} n2
21 |        * @returns n1 + n2
22 |        */
23 |       function add(n1, n2) {
24 |         return n1 + n2;
25 |       }
26 | 
27 |       /**
28 |        * 뺄셈 함수
29 |        * @param {number} n1
30 |        * @param {number} n2
31 |        * @returns n1 - n2
32 |        */
33 |       function minus(n1, n2) {
34 |         return n1 - n2;
35 |       }
36 | 
37 |       /**
38 |        * 곱셈 함수
39 |        * @param {number} n1
40 |        * @param {number} n2
41 |        * @returns n1 * n2
42 |        */
43 |       function multiple(n1, n2) {
44 |         return n1 * n2;
45 |       }
46 | 
47 |       /**
48 |        * 나눗셈 함수
49 |        * @param {number} n1
50 |        * @param {number} n2
51 |        * @returns n1 / n2
52 |        */
53 |       function divide(n1, n2) {
54 |         return n1 / n2;
55 |       }
56 | 
57 |       /**
58 |        * 사칙 연산 함수
59 |        * @param {number} n1
60 |        * @param {number} n2
61 |        * @param {string} operator
62 |        * @returns 사칙연산 결과
63 |        */
64 |       function calculator(n1, n2, operator) {
65 |         if (operator == "+") {
66 |           return add(n1, n2);
67 |         } else if (operator == "-") {
68 |           return minus(n1, n2);
69 |         } else if (operator == "*") {
70 |           return multiple(n1, n2);
71 |         } else if (operator == "/") {
72 |           return divide(n1, n2);
73 |         }
74 |       }
75 |     </script>
76 |   </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/chapter03/if-else-if.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       let age = 17; // 나이
 9 |       let busFare = 0; // 버스 기본 요금
10 | 
11 |       if (age <= 7) {
12 |         // age(나이)가 7세 이하 이면
13 |         busFare = 0; // 버스 기본 요금은 0원
14 |       } else if (age >= 8 && age <= 13) {
15 |         // age(나이)가 8세 이상 13세 이하 이면
16 |         busFare = 450; // 버스 기본 요금은 450원
17 |       } else if (age >= 14 && age <= 19) {
18 |         // age(나이)가 14세 이상 19세 이하 이면
19 |         busFare = 720; // 버스 기본 요금은 720원
20 |       } else if (age >= 20 && age < 70) {
21 |         // age(나이)가 20세 이상 70세 미만 이면
22 |         busFare = 1200; // 버스 기본 요금은 1200원
23 |       } else if (age >= 70) {
24 |         // age(나이)가 70세 이상 이면
25 |         busFare = 0; // 버스 기본 요금은 0원
26 |       }
27 |     </script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/chapter03/if-only.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       let age = 17; // 나이
 9 |       let busFare = 0; // 버스 기본 요금
10 | 
11 |       if (age <= 7) {
12 |         // age(나이)가 7세 이하 이면
13 |         busFare = 0; // 버스 기본 요금은 0원
14 |       }
15 | 
16 |       if (age >= 8 && age <= 13) {
17 |         // age(나이)가 8세 이상 13세 이하 이면
18 |         busFare = 450; // 버스 기본 요금은 450원
19 |       }
20 | 
21 |       if (age >= 14 && age <= 19) {
22 |         // age(나이)가 14세 이상 19세 이하 이면
23 |         busFare = 720; // 버스 기본 요금은 720원
24 |       }
25 | 
26 |       if (age >= 20 && age < 70) {
27 |         // age(나이)가 20세 이상 70세 미만 이면
28 |         busFare = 1200; // 버스 기본 요금은 1200원
29 |       }
30 | 
31 |       if (age >= 70) {
32 |         // age(나이)가 70세 이상 이면
33 |         busFare = 0; // 버스 기본 요금은 0원
34 |       }
35 |     </script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/chapter03/if.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Document</title>
  5 |   </head>
  6 |   <body>
  7 |     <script>
  8 |       let age = 17; // 나이
  9 |       let busFare = 0; // 버스 기본 요금
 10 | 
 11 |       if (age <= 7) {
 12 |         // age(나이)가 7세 이하 이면
 13 |         busFare = 0; // 버스 기본 요금은 0원
 14 |       }
 15 | 
 16 |       if (age >= 8 && age <= 13) {
 17 |         // age(나이)가 8세 이상 13세 이하 이면
 18 |         busFare = 450; // 버스 기본 요금은 450원
 19 |       }
 20 | 
 21 |       if (age >= 14 && age <= 19) {
 22 |         // age(나이)가 14세 이상 19세 이하 이면
 23 |         busFare = 720; // 버스 기본 요금은 720원
 24 |       }
 25 | 
 26 |       if (age >= 20 && age < 70) {
 27 |         // age(나이)가 20세 이상 70세 미만 이면
 28 |         busFare = 1200; // 버스 기본 요금은 1200원
 29 |       }
 30 | 
 31 |       if (age >= 70) {
 32 |         // age(나이)가 70세 이상 이면
 33 |         busFare = 0; // 버스 기본 요금은 0원
 34 |       }
 35 | 
 36 |       let isAdult = false;
 37 | 
 38 |       if (age > 18) {
 39 |         //age가 18보다 크면
 40 |         isAdult = true;
 41 |       }
 42 | 
 43 |       age = 19;
 44 |       if (age > 18) {
 45 |         //age가 18보다 크면
 46 |         isAdult = true;
 47 |       } else {
 48 |         //age가 18보다 같거나 작으면
 49 |         isAdult = false;
 50 |       }
 51 | 
 52 |       let hour = 22;
 53 |       if (hour < 10) {
 54 |         //hour가 10보다 작으면
 55 |         console.log("Good morning");
 56 |       } else if (hour < 18) {
 57 |         //hour가 18보다 작으면
 58 |         console.log("Good afternoon");
 59 |       } else if (hour < 21) {
 60 |         //hour가 21보다 작으면
 61 |         console.log("Good evening");
 62 |       } else {
 63 |         //hour가 21 이상이면
 64 |         console.log("Good night");
 65 |       }
 66 | 
 67 |       if (false) {
 68 |         console.log("if문 실행");
 69 |       } else {
 70 |         console.log("else문 실행");
 71 |       }
 72 | 
 73 |       if (undefined) {
 74 |         console.log("if문 실행");
 75 |       } else {
 76 |         console.log("else문 실행");
 77 |       }
 78 | 
 79 |       if (null) {
 80 |         console.log("if문 실행");
 81 |       } else {
 82 |         console.log("else문 실행");
 83 |       }
 84 | 
 85 |       if (0) {
 86 |         console.log("if문 실행");
 87 |       } else {
 88 |         console.log("else문 실행");
 89 |       }
 90 | 
 91 |       if (NaN) {
 92 |         console.log("if문 실행");
 93 |       } else {
 94 |         console.log("else문 실행");
 95 |       }
 96 | 
 97 |       if ("") {
 98 |         console.log("if문 실행");
 99 |       } else {
100 |         console.log("else문 실행");
101 |       }
102 |     </script>
103 |   </body>
104 | </html>
105 | 


--------------------------------------------------------------------------------
/chapter03/js_location.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |     <script>
 6 |       document.write("자바스크립트 head에 위치<br>"); //html 파일을 브라우저에서 열면, 브라우저 화면에 '자바스크립트 head에 위치'라는 문자열이 보이게 됩니다.
 7 |     </script>
 8 |     <script src="js_location.js"></script>
 9 |   </head>
10 |   <body>
11 |     <!-- HTML 코드가 작성 되는 곳 -->
12 |     <script>
13 |       document.write("자바스크립트 body에 위치<br>"); //html 파일을 브라우저에서 열면, 브라우저 화면에 '자바스크립트 body에 위치'라는 문자열이 보이게 됩니다.
14 |     </script>
15 |     <script src="js_location.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/chapter03/js_location.js:
--------------------------------------------------------------------------------
1 | document.write("자바스크립트 js파일에 위치<br>");


--------------------------------------------------------------------------------
/chapter03/let.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       let x = 5; //변수 x에 5을 저장
 9 |       let y = 6; //변수 y에 6을 저장
10 |       let z = x + y; //변수 z에 변수x와 변수y를 더한 값을 저장. z에는 11이 저장됨.
11 | 
12 |       x = 7; //변수 x에 7을 저장.
13 |       let x = 7; //에러 발생. 동일한 변수명인 x로 재선언 불가능.
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/chapter03/object.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       const person = {
 9 |         firstName: "John",
10 |         lastName: "Doe",
11 |         age: 50,
12 |         eyeColor: "blue",
13 |       };
14 | 
15 |       person["age"] = 51; //오브젝트명 + [ + "key" + ] 형태로 사용해서 데이터 변경
16 |       person.age = 51; //오브젝트명 + . + key 형태로 데이터에 접근해서 변경
17 | 
18 |       console.log(person["firstName"]); //오브젝트명 + [ + "key" + ]
19 |       console.log(person.firstName); //오브젝트명 + . + key
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/chapter03/operator.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var y = 1; // y에 1을 할당
 9 |       var x = y; // x에 y를 할당. x는 y 값인 1이 됨
10 |       x = x + y; // x에 x + y를 할당. x=1, y=1 이므로 x = 2가 됨
11 |       x = x - y; // x에 x -y를 할당. x=2, y=1 이므로 x = 1가 됨
12 |       x = 3; // x에 3를 할당
13 |       y = 2; // y에 2를 할당
14 |       x = x * y; // x에 x * y를 할당. x=3, y=2 이므로 x = 6이 됨
15 |       x = x / y; // x에 x / y를 할당. x=6, y=2 이므로 x = 3이 됨
16 |       x = x % y; // %(퍼센트)는 자바스크립트 연산에서 나머지를 뜻함. x에 x % y를 할당. x=3, y=2 이므로 3을 2로 나눈 나머지는 1, x = 1이 됨
17 |       x = 3; // x에 3를 할당
18 |       y = 2; // y에 2를 할당
19 |       x = x ** y; // **는 지수를 뜻함. x=3, y=2 이므로 32 = 9 가 됨. x = 9
20 | 
21 |       var x = 3;
22 |       var y = 4;
23 |       x == y; // x와 y값이 같은지를 비교하기 때문에 값이 다르므로 false를 반환
24 |       x != y; // x와 y값이 다른지를 비교하기 때문에 값이 다르므로 true를 반환
25 | 
26 |       var x = 3; // 숫자형
27 |       var y = "3"; // 문자형
28 |       x == y; // x와 y의 데이터 타입은 다르지만, 자바스크립트로 문자 3를 숫자로 타입 변환해서 비교 하게 되고, 같은지를 비교하기 때문에 값이 같으므로 true를 반환
29 | 
30 |       var x = 3; // 숫자형
31 |       var y = "3"; // 문자형
32 |       x === y; // x와 y의 데이터 타입까지 비교하기때문에, false를 반환
33 | 
34 |       var o1 = true && true; // true 반환, 둘다 true인 경우 true을 반환
35 |       var o2 = true && false; // false 반환, 둘 중 하나라도 false이면 false를 반환
36 |       var o3 = true || false; // true 반환, 둘 중 하나라도 true이면 true를 반환
37 |       var o4 = 3 == 3 && 4 == 4; // true 반환
38 | 
39 |       console.log("바닐라" + " " + "JS"); // 바닐라 JS 반환
40 |       var myString = "바닐라";
41 |       myString += " JS"; // 바닐라JS 반환
42 | 
43 |       // 조건 ? 값1 : 값2;
44 |       var age = 18;
45 |       var isAdult = age >= 18 ? true : false; // age가18이상이면 true, 그렇지 않으면 false를 반환.
46 | 
47 |       // 조건1 ? 값1 : 조건2 ? 값2 : 값3;
48 |       var point = 92;
49 |       var grade = point >= 90 ? "A" : point >= 80 ? "B" : "C"; // point가 90 이상이면 A, 80 이상이면 B, 80 보다 작으면 C
50 |     </script>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/chapter03/switch.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       //switch문은 상수값만 올수 있음. 비교 구문 안됨.
 9 |       //상수 - 숫자 혹은 특정 문자
10 | 
11 |       var d = new Date();
12 |       var day = d.getDay();
13 |       var dayName = "";
14 |       switch (day) {
15 |         case 0:
16 |           dayName = "일요일";
17 |           break;
18 |         case 1:
19 |           dayName = "월요일";
20 |           break;
21 |         case 2:
22 |           dayName = "화요일";
23 |           break;
24 |         case 3:
25 |           dayName = "수요일";
26 |           break;
27 |         case 4:
28 |           dayName = "목요일";
29 |           break;
30 |         case 5:
31 |           dayName = "금요일";
32 |           break;
33 |         case 6:
34 |           dayName = "토요일";
35 |           break;
36 |         default:
37 |           dayName = "";
38 |           break;
39 |       }
40 | 
41 |       var d = new Date();
42 |       var day = d.getDay();
43 |       console.log("day", day);
44 |       var dayName = "";
45 | 
46 |       var dayNames = [
47 |         "일요일",
48 |         "월요일",
49 |         "화요일",
50 |         "수요일",
51 |         "목요일",
52 |         "금요일",
53 |         "토요일",
54 |       ];
55 |       console.log(dayNames[day]);
56 |     </script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/chapter03/typeof.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       console.log(typeof "John"); // string
 9 |       console.log(typeof 3.14); // number
10 |       console.log(typeof true); // boolean
11 |       console.log(typeof { x: 1, y: 1 }); //object
12 |       console.log(typeof [1, 2, 3]); //object
13 |       console.log(typeof undefined); //undefined
14 |       console.log(typeof null); //object
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/chapter03/var.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var x = 5; //변수명 x에 5을 저장
 9 |       var y = 6; //변수명 y에 6을 저장
10 |       var z = x + y; //변수명 z에 변수x와 변수y를 더한 값을 저장. z에는 11이 저장됨.
11 | 
12 |       var x = 7; //변수를 새로 선언하고 변수명 x에 7을 저장
13 |       z = x + y; //변수 z에 변수x와 변수y를 더한 값을 저장. 기존에 저장되었던 값은 사라지고 새로운 값으로 바뀌게 됨. z에는 13이 저장됨.
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/chapter03/while.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var i = 1;
 9 |       while (i <= 10) {
10 |         console.log("The number is " + i);
11 |         i++;
12 |       }
13 | 
14 |       var i = 1;
15 |       do {
16 |         console.log("The number is " + i);
17 |         i++;
18 |       } while (i <= 10);
19 | 
20 |       var inputPrice = 7000; //사용자가 넣은 지폐 금액
21 |       var coinUnit = 500; //반환할 500원짜리 동전
22 |       var coinCount = 0; //반환될 500원짜리 총 개수를 담을 변수
23 |       while (inputPrice > 0) {
24 |         //사용자가 넣은 금액이 0이 될 때 까지
25 |         inputPrice = inputPrice - coinUnit; //inputPrice 금액이 500원씩 줄어 듬
26 |         coinCount++; //반복문이 한번 돌때 마다 반환되는 500원짜리 동전 수를 증가 시킴
27 |       }
28 | 
29 |       console.log(coinCount); //500원짜리 총 개수
30 |     </script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/chapter04/array.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <select>
 8 |       <option>지역을 선택하세요</option>
 9 |     </select>
10 |     <script>
11 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
12 |       fruits.toString(); // Banana,Orange,Apple,Mango
13 | 
14 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
15 |       fruits.join(" * "); // Banana * Orange * Apple * Mango
16 | 
17 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
18 |       var x = fruits.pop(); // x = "Mango"
19 | 
20 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
21 |       fruits.push("Kiwi"); // "Kiwi"가 fruits 배열에 추가 됩니다.
22 | 
23 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
24 |       fruits.shift(); // "Banana"를 fruits 배열에서 제거하고, 반환합니다.
25 | 
26 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
27 |       fruits.unshift("Lemon"); // "Lemon"을 fruits 배열 제일 앞에 추가하고 배열의 길이를 반환합니다.
28 | 
29 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
30 |       fruits[0] = "Kiwi"; // 배열에서 인덱스가 0인 요소인 "Banana"를 "Kiwi"로 변경합니다.
31 | 
32 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
33 |       fruits.splice(2, 0, "Lemon", "Kiwi"); // [Banana, Orange, Lemon, Kiwi, Apple, Mango]
34 | 
35 |       var arr1 = ["Cecilie", "Lone"];
36 |       var arr2 = ["Emil", "Tobias", "Linus"];
37 |       var arr3 = ["Robin", "Morgan"];
38 |       var myChildren = arr1.concat(arr2, arr3);
39 | 
40 |       var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
41 |       var citrus = fruits.slice(3); // [Apple, Mango]
42 |       var citrus2 = fruits.slice(1, 3); // [Orange, Lemon]
43 |     </script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/chapter04/array_filter.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var persons = [
 9 |         {
10 |           name: "유재석",
11 |           point: 78,
12 |           city: "서울",
13 |         },
14 |         {
15 |           name: "김종국",
16 |           point: 92,
17 |           city: "서울",
18 |         },
19 |         {
20 |           name: "양세찬",
21 |           point: 76,
22 |           city: "제주",
23 |         },
24 |         {
25 |           name: "하하",
26 |           point: 81,
27 |           city: "서울",
28 |         },
29 |       ];
30 | 
31 |       var pass = persons.filter(function (person) {
32 |         return person.point > 80;
33 |       });
34 |     </script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/chapter04/array_map.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var userList = [
 9 |         {
10 |           firstName: "재석",
11 |           lastName: "유",
12 |           email: "yu@gmail.com",
13 |         },
14 |         {
15 |           firstName: "종국",
16 |           lastName: "김",
17 |           email: "kim@gmail.com",
18 |         },
19 |         {
20 |           firstName: "세찬",
21 |           lastName: "양",
22 |           email: "yang@gmail.com",
23 |         },
24 |         {
25 |           firstName: "석진",
26 |           lastName: "지",
27 |           email: "ji@gmail.com",
28 |         },
29 |       ];
30 | 
31 |       var userList2 = userList.map(function (user) {
32 |         return {
33 |           fullName: user.lastName + user.firstName,
34 |           firstName: user.firstName,
35 |           lastName: user.lastName,
36 |           email: user.email,
37 |         };
38 |       });
39 |     </script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/chapter04/array_reduce.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var points = [40, 100, 1, 5, 25, 10];
 9 |       var sum = points.reduce(function (total, currentValue) {
10 |         return total + currentValue;
11 |       }, 0);
12 | 
13 |       console.log(sum);
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/chapter04/array_sort.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
 9 |       fruits.sort();
10 | 
11 |       var points = [40, 100, 1, 5, 25, 10];
12 |       points.sort(function (a, b) {
13 |         return a - b;
14 |       });
15 | 
16 |       var points = [40, 100, 1, 5, 25, 10];
17 |       points.sort(function (a, b) {
18 |         return b - a;
19 |       });
20 | 
21 |       var fruits = ["Banana", "Orange", "Apple", "Mango"];
22 |       fruits.sort();
23 |       fruits.reverse();
24 | 
25 |       var persons = [
26 |         {
27 |           name: "유재석",
28 |           point: 78,
29 |           city: "서울",
30 |         },
31 |         {
32 |           name: "김종국",
33 |           point: 92,
34 |           city: "서울",
35 |         },
36 |         {
37 |           name: "양세찬",
38 |           point: 76,
39 |           city: "제주",
40 |         },
41 |         {
42 |           name: "하하",
43 |           point: 81,
44 |           city: "서울",
45 |         },
46 |       ];
47 | 
48 |       persons.sort(function (a, b) {
49 |         return a.point > b.point ? -1 : a.point < b.point ? 1 : 0;
50 |       });
51 |     </script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/chapter04/date.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       // new Date()
 9 |       var now = new Date(); //사용자 브라우저의 시간을 가져옵니다.
10 |       console.log(now); //Fri Jun 25 2021 05:16:49 GMT+0900 (대한민국 표준시)
11 | 
12 |       // new Date(year, month, day, hours, minutes, seconds, milliseconds)
13 |       var d = new Date(2021, 6, 24, 10, 33, 30, 0); //특정 날짜,시간을 지정해서 Date 객체 생성
14 |       console.log(d); //Sat Jul 24 2021 10:33:30 GMT+0900 (대한민국 표준시)
15 | 
16 |       // new Date(milliseconds)
17 |       var d = new Date(0); //1970년1월1일
18 |       var d = new Date(100000000000); //1970년1월1일 + 100000000000 = 대략 1973년3월3일
19 | 
20 |       // new Date(date string)
21 |       var d2 = new Date("October 13, 2014 11:13:00"); //날짜 문자열로 Date 객체 생성
22 | 
23 |       console.log(Date.now());
24 | 
25 |       var d = new Date(); //현재 날짜/시간
26 |       var year = d.getFullYear();
27 |       console.log("year", year);
28 | 
29 |       var month = d.getMonth();
30 |       console.log("month", month);
31 | 
32 |       var date = d.getDate();
33 |       console.log("date", date);
34 | 
35 |       var day = d.getDay();
36 |       var hour = d.getHours();
37 |       var minute = d.getMinutes();
38 |       var second = d.getSeconds();
39 |     </script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/chapter04/interval_date.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getIntervalDate(day) {
 9 |         var now = new Date();
10 |         var dayMilliseconds = 60 * 60 * 24 * 1000;
11 | 
12 |         return new Date(now.getTime() + dayMilliseconds * day);
13 |       }
14 | 
15 |       console.log(getIntervalDate(-9));
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/chapter04/json.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var data = {
 9 |         employees: [
10 |           { firstName: "John", lastName: "Doe" },
11 |           { firstName: "Anna", lastName: "Smith" },
12 |           { firstName: "Peter", lastName: "Jones" },
13 |         ],
14 |       };
15 | 
16 |       var stringValue = JSON.stringify(data); //객체를 문자열로 전환
17 | 
18 |       var text =
19 |         '{ "employees" : [' +
20 |         '{ "firstName":"John" , "lastName":"Doe" },' +
21 |         '{ "firstName":"Anna" , "lastName":"Smith" },' +
22 |         '{ "firstName":"Peter" , "lastName":"Jones" } ]}';
23 | 
24 |       var obj = JSON.parse(text); //문자열 형태의 JSON을 Object 객체로 변환
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/chapter04/map.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       let userMap = new Map();
 9 |       userMap.set("name", "홍길동");
10 |       userMap.set("email", "abc@email.com");
11 |       userMap.set("phone", "000-0000-0000");
12 |       userMap.size; // 3
13 | 
14 |       userMap.get("name"); // 홍길동
15 | 
16 |       userMap.has("name"); //true
17 | 
18 |       userMap.delete("name"); //파라미터로 키 전달
19 | 
20 |       userMap.forEach(function (item) {
21 |         console.log(item);
22 |       });
23 | 
24 |       userMap.clear(); //저장되어 있는 모든 데이터가 삭제 됨.
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/chapter04/math.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       Math.round(4.9); // returns 5
 9 |       Math.round(4.7); // returns 5
10 |       Math.round(4.4); // returns 4
11 |       Math.round(4.2); // returns 4
12 |       Math.round(-4.2); // returns -4
13 | 
14 |       Math.ceil(4.9); // returns 5
15 |       Math.ceil(4.7); // returns 5
16 |       Math.ceil(4.4); // returns 5
17 |       Math.ceil(4.2); // returns 5
18 |       Math.ceil(-4.2); // returns -4
19 | 
20 |       Math.floor(4.9); // returns 4
21 |       Math.floor(4.7); // returns 4
22 |       Math.floor(4.4); // returns 4
23 |       Math.floor(4.2); // returns 4
24 |       Math.floor(-4.2); // returns -5
25 | 
26 |       Math.trunc(4.9); // returns 4
27 |       Math.trunc(4.7); // returns 4
28 |       Math.trunc(4.4); // returns 4
29 |       Math.trunc(4.2); // returns 4
30 |       Math.trunc(-4.2); // returns -4
31 | 
32 |       Math.sign(-4); // returns -1
33 |       Math.sign(0); // returns 0
34 |       Math.sign(4); // returns 1
35 | 
36 |       Math.pow(8, 2); // returns 64
37 | 
38 |       Math.sqrt(64); // returns 8
39 | 
40 |       Math.abs(-4.7); // returns 4.7
41 | 
42 |       Math.min(0, 150, 30, 20, -8, -200); // returns -200
43 |       Math.max(0, 150, 30, 20, -8, -200); // returns 150
44 | 
45 |       Math.random(); // returns a random number
46 | 
47 |       Math.floor(Math.random() * 10); // 0에서 9사이의 정수
48 | 
49 |       Math.floor(Math.random() * 101); // 0에서 100사이의 정수
50 | 
51 |       Math.floor(Math.random() * 10) + 1; // 1에서 10사이의 정수
52 | 
53 |       function getRndInteger(min, max) {
54 |         return Math.floor(Math.random() * (max - min + 1)) + min;
55 |       }
56 |     </script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/chapter04/number.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var x = 123;
 9 |       x.toString(); // 문자 타입 123
10 |       (123).toString(); // 문자 타입 123
11 | 
12 |       var x = 10.656;
13 |       x.toExponential(2); // 10.66e+0
14 |       x.toExponential(4); // 10.6560e+0
15 |       x.toExponential(6); // 10.656000e+0
16 | 
17 |       var x = 10.656;
18 |       x.toFixed(0); // 10
19 |       x.toFixed(2); // 10.66
20 |       x.toFixed(4); // 10.6560
21 | 
22 |       var x = 10.656;
23 |       x.toPrecision(); // 10.656
24 |       x.toPrecision(2); // 10.7
25 |       x.toPrecision(4); // 10.656
26 | 
27 |       parseInt("-10"); // -10
28 |       parseInt("-12.33"); // -10
29 |       parseInt("10"); // 10
30 |       parseInt("12.33"); // 10
31 |       parseInt("10 20 30"); // 10
32 |       parseInt("10 years"); // 10
33 |       parseInt("years 10"); // NaN
34 | 
35 |       parseFloat("10"); // 10
36 |       parseFloat("12.33"); // 12.33
37 |       parseFloat("10 20 30"); // 10
38 |       parseFloat("10 years"); // 10
39 |       parseFloat("years 10"); // NaN
40 |     </script>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/chapter04/object.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       //빈 객체 생성
 9 |       var person = new Object();
10 |       var person = Object();
11 | 
12 |       //멤버 설정
13 |       person.firstName = "John";
14 |       person.lastName = "Doe";
15 |       person.age = 1200;
16 |       person.getFullName = function () {
17 |         return this.firstName + " " + this.lastName;
18 |       };
19 |       console.log(person.getFullName());
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/chapter04/rsp_player.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getRandomInteger(min, max) {
 9 |         return Math.floor(Math.random() * (max - min + 1)) + min;
10 |       }
11 | 
12 |       function rspPlayer(userRsp) {
13 |         const rsp = ["가위", "바위", "보"];
14 |         const playerRsp = rsp[getRandomInteger(0, 2)];
15 | 
16 |         if (userRsp == playerRsp) {
17 |           return {
18 |             userRsp: userRsp,
19 |             playerRsp: playerRsp,
20 |             winner: 0,
21 |           };
22 |         } else if (userRsp == "가위") {
23 |           if (playerRsp == "보") {
24 |             return {
25 |               userRsp: userRsp,
26 |               playerRsp: playerRsp,
27 |               winner: 1,
28 |             };
29 |           } else {
30 |             return {
31 |               userRsp: userRsp,
32 |               playerRsp: playerRsp,
33 |               winner: -1,
34 |             };
35 |           }
36 |         } else if (userRsp == "바위") {
37 |           if (playerRsp == "가위") {
38 |             return {
39 |               userRsp: userRsp,
40 |               playerRsp: playerRsp,
41 |               winner: 1,
42 |             };
43 |           } else {
44 |             return {
45 |               userRsp: userRsp,
46 |               playerRsp: playerRsp,
47 |               winner: -1,
48 |             };
49 |           }
50 |         } else if (userRsp == "보") {
51 |           if (playerRsp == "바위") {
52 |             return {
53 |               userRsp: userRsp,
54 |               playerRsp: playerRsp,
55 |               winner: 1,
56 |             };
57 |           } else {
58 |             return {
59 |               userRsp: userRsp,
60 |               playerRsp: playerRsp,
61 |               winner: -1,
62 |             };
63 |           }
64 |         }
65 |       }
66 | 
67 |       function rspPlayer2(userRsp) {
68 |         const rsp = ["가위", "바위", "보"];
69 |         const playerRsp = rsp[getRandomInteger(0, 2)];
70 |         const winValue = {
71 |           가위: "보",
72 |           바위: "가위",
73 |           보: "바위",
74 |         };
75 | 
76 |         return {
77 |           userRsp: userRsp,
78 |           playerRsp: playerRsp,
79 |           winner:
80 |             userRsp == playerRsp ? 0 : winValue[userRsp] == playerRsp ? 1 : -1,
81 |         };
82 |       }
83 | 
84 |       console.log(rspPlayer("가위"));
85 |     </script>
86 |   </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/chapter04/set.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var mySet = new Set();
 9 |       mySet.add(1);
10 |       mySet.add(2);
11 |       mySet.add(3);
12 |       mySet.add(1); //이미 1이란 값이 저장되어 있기 때문에 추가되지 않음.
13 |       mySet.size; // 3
14 | 
15 |       mySet.has(1); //true
16 | 
17 |       mySet.delete(2);
18 | 
19 |       mySet.forEach(function (item) {
20 |         console.log(item);
21 |       });
22 | 
23 |       mySet.clear(); //저장되어 있는 모든 데이터가 삭제 됨.
24 |     </script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/chapter04/string.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Document</title>
  5 |   </head>
  6 |   <body>
  7 |     <script>
  8 |       var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  9 |       var sln = txt.length;
 10 | 
 11 |       var str = "Please locate where 'locate' occurs!";
 12 |       var pos = str.indexOf("locate"); //7
 13 | 
 14 |       var str = "Please locate where 'locate' occurs!";
 15 |       var pos = str.lastIndexOf("locate"); //21
 16 |       console.log(pos);
 17 | 
 18 |       var str = "Please locate where 'locate' occurs!";
 19 |       var pos = str.indexOf("locate", 15); //15번째 index 부터 찾기 시작
 20 | 
 21 |       var str = "Apple, Banana, Kiwi";
 22 |       var res = str.slice(7, 13); //Banana
 23 | 
 24 |       var str = "Apple, Banana, Kiwi";
 25 |       var res = str.slice(7); //Banana, Kiwi
 26 | 
 27 |       var str = "Apple, Banana, Kiwi";
 28 |       var res = str.slice(-12); //Banana, Kiwi
 29 | 
 30 |       var str = "Apple, Banana, Kiwi";
 31 |       var res = str.substring(7, 13); //Banana
 32 | 
 33 |       var str = "Apple, Banana, Kiwi";
 34 |       var res = str.substr(7, 6); //Banana
 35 | 
 36 |       var str = "Apple, Banana, Kiwi";
 37 |       var res = str.substr(7); //Banana, Kiwi
 38 | 
 39 |       var str = "Apple, Banana, Kiwi";
 40 |       var res = str.substr(-12); //Banana, Kiwi
 41 | 
 42 |       str = "Please visit Seoul and Seoul!";
 43 |       var n = str.replace("Seoul", "Jeju"); //Please visit Jeju and Seoul!
 44 | 
 45 |       str = "Please visit Seoul and Seoul!";
 46 |       var n = str.replace("SEOUL", "Jeju"); //Please visit Seoul and Seoul!
 47 | 
 48 |       str = "Please visit Seoul and Seoul!";
 49 |       var n = str.replace(/SEOUL/i, "Jeju"); //Please visit Jeju and Seoul!
 50 | 
 51 |       str = "Please visit Seoul and Seoul!";
 52 |       var n = str.replace(/Seoul/g, "Jeju"); //Please visit Jeju and Jeju!
 53 | 
 54 |       var text1 = "Hello World!";
 55 |       var text2 = text1.toUpperCase(); // HELLO WORLD!
 56 | 
 57 |       var text1 = "Hello World!";
 58 |       var text2 = text1.toLowerCase(); // hello world!
 59 | 
 60 |       var text1 = "Hello";
 61 |       var text2 = "World";
 62 |       var text3 = text1.concat(" ", text2);
 63 |       var text4 = "Hello" + " " + "World!";
 64 |       var text5 = "Hello".concat(" ", "World!");
 65 | 
 66 |       var str = "   	Hello World!    	";
 67 |       console.log(str.trim()); //Hello World!
 68 | 
 69 |       var str = "5";
 70 |       str = str.padStart(4, 0); // 0005
 71 | 
 72 |       var str = "5";
 73 |       str = str.padEnd(4, 0); // 5000
 74 | 
 75 |       var str = "HELLO WORLD";
 76 |       str.charAt(0); // H
 77 | 
 78 |       var str = "HELLO WORLD";
 79 |       str.charCodeAt(0); // 72
 80 | 
 81 |       var birthday = "1997-06-12";
 82 |       var arr2 = birthday.split("-"); //하이픈(-)을 기준으로 문자열을 분리해서 배열로 반환
 83 |       console.log(arr2); //["1997","06","02"]
 84 | 
 85 |       var url = "http://website.com";
 86 |       if (url.startsWith("http://") || url.startsWith("https://")) {
 87 |         // 올바른 형식의 웹사이트 url
 88 |       } else {
 89 |         // 잘못된 형식의 웹사이트 url
 90 |       }
 91 | 
 92 |       var file = "abc.pdf";
 93 |       if (file.endsWith(".pdf")) {
 94 |         //pdf 파일
 95 |       } else {
 96 |         //다른 형식의 파일
 97 |       }
 98 |     </script>
 99 |   </body>
100 | </html>
101 | 


--------------------------------------------------------------------------------
/chapter04/symbol.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       let person = {
 9 |         firstName: "Jeremy",
10 |         lastName: "Go",
11 |         getFullName: function () {
12 |           return this.firstName + " " + this.lastName;
13 |         },
14 |       };
15 | 
16 |       for (const key in person) {
17 |         console.log(key); //firstName, lastName, getFullName 출력
18 |       }
19 | 
20 |       console.log(person.getFullName());
21 | 
22 |       let person2 = {
23 |         firstName: "Jeremy",
24 |         lastName: "Go",
25 |       };
26 | 
27 |       var getFullName = Symbol("getFullName");
28 |       person2[getFullName] = function () {
29 |         return this.firstName + " " + this.lastName;
30 |       };
31 | 
32 |       for (const key in person2) {
33 |         console.log(key); //firstName, lastName 출력
34 |       }
35 | 
36 |       console.log(person2[getFullName]()); //Jeremy Go
37 |     </script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/chapter04/window.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       //Window 객체 - 전역객체, Global 객체
 9 |       alert("이것은 alert창입니다.");
10 | 
11 |       if (confirm("정말 삭제하시겠습니까?")) {
12 |         //삭제 로직
13 |       }
14 | 
15 |       var pass = prompt("비밀번호를 입력하세요.");
16 |       // console.log(pass);
17 |       if (pass == null) {
18 |         //취소 버튼 누른 경우
19 |       } else if (pass == "") {
20 |       } else if (pass != "") {
21 |         console.log(pass);
22 |       }
23 | 
24 |       window.open("https://naver.com");
25 | 
26 |       setTimeout(function () {
27 |         alert("프로그램 실행");
28 |       }, 1000);
29 | 
30 |       var count = 0;
31 | 
32 |       var fnc = setInterval(function () {
33 |         if (count < 5) {
34 |           console.log("프로그램 실행:" + count);
35 |           count++;
36 |         } else {
37 |           console.log("종료");
38 |           clearInterval(fnc);
39 |         }
40 |       }, 1000);
41 |     </script>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/chapter05/array_destruct.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getScores() {
 9 |         return [70, 80, 90];
10 |       }
11 | 
12 |       let scores = getScores();
13 | 
14 |       let x = scores[0], //배열의 인덱스 번호로 데이터에 접근
15 |         y = scores[1],
16 |         z = scores[2];
17 | 
18 |       //선언 변수가 배열 문법 처럼 보이지만, 배열이 아님. 배열 리턴값을 순서대로 받기 위한 용도임.
19 |       let [x, y, z] = getScores();
20 | 
21 |       console.log(x); // 70
22 |       console.log(y); // 80
23 |       console.log(z); // 90
24 | 
25 |       function getProfile() {
26 |         return ["John", "Doe", ["Red", "Green", "Blue"]];
27 |       }
28 | 
29 |       let [firstName, lastName, [color1, color2, color3]] = getProfile();
30 | 
31 |       console.log(color1, color2, color3); // Red Green Blue
32 |     </script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/chapter05/arrow_func.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 | 
 7 |   <body>
 8 |     <script>
 9 |       function hello(name) {
10 |         return "Hello" + name;
11 |       }
12 | 
13 |       const hello2 = function (name) {
14 |         return "Hello" + name;
15 |       };
16 | 
17 |       const hello3 = (name) => {
18 |         return "Hello" + name;
19 |       };
20 | 
21 |       const hello3 = (name) => {
22 |         return "Hello" + name;
23 |       };
24 | 
25 |       const hello4 = (name) => "Hello " + fullName;
26 |     </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/chapter05/async_await.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       async function myFunction() {
 9 |         const res1 = await fetch(
10 |           "https://jsonplaceholder.typicode.com/posts/1"
11 |         );
12 |         const res1Json = await res1.json();
13 |         console.log(res1Json);
14 | 
15 |         const res2 = await fetch(
16 |           "https://jsonplaceholder.typicode.com/posts/1",
17 |           {
18 |             method: "PUT",
19 |             body: JSON.stringify({
20 |               id: 1,
21 |               title: "foo",
22 |               body: "bar",
23 |               userId: 1,
24 |             }),
25 |             headers: {
26 |               "Content-type": "application/json; charset=UTF-8",
27 |             },
28 |           }
29 |         );
30 |         const res2Json = await res2.json();
31 |         console.log(res2Json);
32 |       }
33 | 
34 |       myFunction();
35 |     </script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/chapter05/class.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       class Car {
 9 |         constructor(modelName, modelYear, type, price) {
10 |           this.modelName = modelName;
11 |           this.modelYear = modelYear;
12 |           this.type = type;
13 |           this.price = price;
14 |         }
15 | 
16 |         getModelName() {
17 |           return this.modelName;
18 |         }
19 | 
20 |         getModelYear() {
21 |           return this.modelYear;
22 |         }
23 | 
24 |         getPrice() {
25 |           return this.price;
26 |         }
27 | 
28 |         setModelName(modelName) {
29 |           this.modelName = modelName;
30 |         }
31 | 
32 |         setModelYear(modelYear) {
33 |           this.modelYear = modelYear;
34 |         }
35 | 
36 |         setType(type) {
37 |           this.type = type;
38 |         }
39 | 
40 |         setPrice(price) {
41 |           this.price = price;
42 |         }
43 |       }
44 | 
45 |       let car = new Car("ionic", "2021", "e", 4000); //아이오닉 차량 생성
46 | 
47 |       let modelName = car.getModelName(); //차량 모델명 가져오기
48 |       car.setPrice(4300); //차량 가격 변경
49 |       console.log(car.getModelName());
50 |       console.log(car.getModelYear());
51 |       console.log(car.getPrice());
52 | 
53 |       car.setPrice(4100);
54 |       console.log(car.getPrice());
55 | 
56 |       let car2 = new Car("genesis", "2021", "g", 6500);
57 |       console.log(car2.getModelName());
58 |       console.log(car2.getModelYear());
59 |       console.log(car2.getPrice());
60 | 
61 |       class ElectricCar extends Car {
62 |         constructor(modelName, modelYear, price, chargeTime) {
63 |           super(modelName, modelYear, "e", price);
64 |           this.chargeTime = chargeTime;
65 |         }
66 | 
67 |         setChargeTime(time) {
68 |           this.chargeTime = time;
69 |         }
70 | 
71 |         getChargeTime() {
72 |           return this.chargeTime;
73 |         }
74 |       }
75 | 
76 |       let eleCar1 = new ElectricCar("ionic5", "2021", 4000, 60);
77 |       eleCar1.setChargeTime(60);
78 |       console.log(eleCar1.getModelName());
79 |       console.log(eleCar1.getChargeTime());
80 |     </script>
81 |   </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/chapter05/default_func_param.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function say(message) {
 9 |         if (message != undefined) {
10 |           console.log(message);
11 |         } else {
12 |           console.log("파라미터가 넘어오지 않았어요.");
13 |         }
14 |       }
15 | 
16 |       function say(message = "파라미터가 넘어오지 않았어요") {
17 |         console.log(message);
18 |       }
19 | 
20 |       function plus(x, y = 1) {
21 |         console.log(x + y);
22 |       }
23 | 
24 |       plus(4, 2);
25 | 
26 |       say("안녕하세요");
27 |       say();
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/chapter05/error.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       try {
 9 |         nonExistentFunction(); // 존재하지 않는 함수 호출
10 |       } catch (error) {
11 |         console.error(error); // ReferenceError: nonExistentFunction is not defined
12 |       } finally {
13 |         console.log(
14 |           "try 코드 블록이 정상적으로 수행이 되든, 오류를 발생하든 상관없이 무조건 실행해야 할 코드를 작성합니다."
15 |         );
16 |       }
17 | 
18 |       var x = 5;
19 | 
20 |       try {
21 |         if (x == "") throw "empty";
22 | 
23 |         var y = x + 3;
24 |         console.log(y);
25 |       } catch (err) {
26 |         console.log(`x is ${err}`);
27 |       } finally {
28 |         console.log("try/catch문 제일 마지막에 반드시 실행");
29 |       }
30 |     </script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/chapter05/fetch.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       //id가 1인 데이터 조회
 9 |       fetch("https://jsonplaceholder.typicode.com/posts/1")
10 |         .then((response) => response.json())
11 |         .then((json) => console.log(json));
12 | 
13 |       //POST - 데이터 생성
14 |       fetch("https://jsonplaceholder.typicode.com/posts", {
15 |         method: "POST", //HTTP 요청 방법
16 |         body: JSON.stringify({
17 |           //전송할 데이터
18 |           title: "foo",
19 |           body: "bar",
20 |           userId: 1,
21 |         }),
22 |         headers: {
23 |           //헤더 값 정의
24 |           "content-type": "application/json; charset=UTF-8", //content-type 정의
25 |         },
26 |       })
27 |         .then((response) => response.json())
28 |         .then((json) => console.log(json));
29 | 
30 |       //PUT - 데이터 수정
31 |       fetch("https://jsonplaceholder.typicode.com/posts/1", {
32 |         method: "PUT",
33 |         body: JSON.stringify({
34 |           id: 1,
35 |           title: "foo",
36 |           body: "bar",
37 |           userId: 1,
38 |         }),
39 |         headers: {
40 |           "Content-type": "application/json; charset=UTF-8",
41 |         },
42 |       })
43 |         .then((response) => response.json())
44 |         .then((json) => console.log(json));
45 | 
46 |       //DELETE - 데이터 삭제
47 |       fetch("https://jsonplaceholder.typicode.com/posts/1", {
48 |         method: "DELETE",
49 |       });
50 |     </script>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/chapter05/log.js:
--------------------------------------------------------------------------------
1 | export function log(message) {
2 |   console.log(message);
3 |  }
4 |   
5 |  export function error(message) {
6 |   console.error(message);
7 |  }
8 |  


--------------------------------------------------------------------------------
/chapter05/module.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script type="module">
 8 |       import { log } from "./log.js"; //log.js 파일에서 export로 지정된 함수 중 log 함수만 import함.
 9 |       log("log로 메시지 출력"); //log 함수 사용 가능
10 |     </script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/chapter05/object_destruct.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getPerson() {
 9 |         return {
10 |           firstName: "John",
11 |           lastName: "Doe",
12 |           age: 37,
13 |           email: "john@gmail.com",
14 |           city: "New York",
15 |           country: "USA",
16 |         };
17 |       }
18 | 
19 |       var { firstName, lastName } = getPerson();
20 |       console.log(firstName);
21 |       console.log(lastName);
22 | 
23 |       function displayFullName({ firstName, lastName }) {
24 |         //전달 받은 Object 데이터에서 필요한 데이터의 키만 정의해서 사용
25 |         console.log(`${firstName} ${lastName}`); //John Doe
26 |       }
27 | 
28 |       displayFullName(getPerson()); //함수 호출 시 Object를 파라미터 값으로 전달
29 |     </script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/chapter05/object_literal.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var firstName = "John";
 9 |       var lastName = "Doe";
10 | 
11 |       var person = {
12 |         firstName: firstName,
13 |         lastName: lastName,
14 |       };
15 | 
16 |       var type = "student";
17 | 
18 |       var score = {
19 |         [type]: "John",
20 |         score: 95,
21 |       };
22 | 
23 |       var type2 = "grade";
24 | 
25 |       score[type2] = 1;
26 |     </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/chapter05/promise.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getData() {
 9 |         const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
10 |         xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
11 |         xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
12 |         xhr.send(); // 요청 전송
13 | 
14 |         xhr.onload = () => {
15 |           if (xhr.status === 200) {
16 |             // 정상적으로 응답이 되면 status가 200
17 |             const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
18 |             console.log(res);
19 |             return res;
20 |           } else {
21 |             // 에러 발생
22 |             console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
23 |             return;
24 |           }
25 |         };
26 |       }
27 | 
28 |       // var res = getData(); // 함수 호출
29 |       // console.log(res); // 코드가 바로 실행되고, 이 시점에는 서버로 부터 응답이 오지 않은 시점이기 때문에 undefined
30 |       // console.log("다음 코드를 실행합니다.");
31 | 
32 |       function getDataPromise() {
33 |         return new Promise((resolve, reject) => {
34 |           const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
35 |           xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
36 |           xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
37 |           xhr.send(); // 요청 전송
38 | 
39 |           xhr.onload = () => {
40 |             if (xhr.status === 200) {
41 |               // 정상적으로 응답이 되면 status가 200
42 |               const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
43 |               resolve(res);
44 |             } else {
45 |               // 에러 발생
46 |               console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
47 |               reject(new Error(xhr.status));
48 |             }
49 |           };
50 |         });
51 |       }
52 | 
53 |       getDataPromise().then((res) => {
54 |         console.log(res); // 서버 응답이 완료된 후 코드가 실행 됨
55 |         console.log("다음 코드를 실행합니다.");
56 |       });
57 |     </script>
58 |   </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/chapter05/ref.js:
--------------------------------------------------------------------------------
1 | import {log} from "./log.js";
2 |  
3 | log("log로 메시지 출력");


--------------------------------------------------------------------------------
/chapter05/regexp.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var str = "Hello World! world!";
 9 |       const re = /World/; // 문자열에 World에 대응되는 문자열을 찾는 패턴 정의
10 |       console.log(re.test(str)); // true - test 함수를 통해 대응되는 문자열이 있으면 true, 없으면 false
11 |       console.log(str.search(re)); // 6 - String 객체의 내장함수인 search 함수에 정규식을 적용해서 대응되는 문자열이 발견되면 인덱스 번호 반환
12 | 
13 |       var patt = /World/i; //World - 패턴, i-modifier
14 | 
15 |       console.log(str.search("World"));
16 | 
17 |       console.log(str.search(/world/i));
18 | 
19 |       console.log(str.replace("world", "Jeremy"));
20 | 
21 |       console.log(str.replace(/world/gi, "Jeremy")); //g
22 | 
23 |       var str = "Is this all there is";
24 |       var patt1 = /[hat]/g; //[abc]
25 |       var result = str.match(patt1);
26 |       console.log(result);
27 | 
28 |       //[0-9] \d
29 |       var str = "123abc4523kkk";
30 |       var patt1 = /[0-9]/g;
31 |       var result = str.match(patt1);
32 |       console.log(result);
33 | 
34 |       //(red|green)
35 |       var str = "re, green, red, gree, gen, red,blue, yellow";
36 |       var patt1 = /(red|green)/g;
37 |       var result = str.match(patt1);
38 |       console.log(result);
39 | 
40 |       //\d 숫자 [0-9]
41 |       var str = "Give 100";
42 |       var patt1 = /\d/g;
43 |       var result = str.match(patt1);
44 |       console.log(result);
45 | 
46 |       //n+ 최소한 1개 이상
47 |       var str = "Hellooo";
48 |       var patt1 = /o+/g;
49 |       console.log(str.match(patt1));
50 | 
51 |       //n* 0 혹은 n개
52 |       var str = "Hellooo World";
53 |       var patt1 = /lo*/g;
54 |       console.log(str.match(patt1));
55 | 
56 |       //n? 0개 이거나 1개
57 |       var str = "1, 100 or 1000";
58 |       var patt1 = /10?/g;
59 |       console.log(str.match(patt1));
60 | 
61 |       //우편번호 5자리
62 |       //32543
63 |       var patt1 = /^\d{5}$/;
64 |       var postalcode = "23452";
65 |       console.log(patt1.test(postalcode));
66 | 
67 |       //전화번호
68 |       //010-2312-3354
69 |       var patt1 = /^(010)-\d{4}-\d{4}$/;
70 |       var tel = "010-2312-3354";
71 |       console.log(patt1.test(tel));
72 | 
73 |       //이메일 주소
74 |       // 알파벳 소문자로 시작하고 숫자는 0회 이상, 점(.)은 없거나 한개, 한개이상의 문자, @
75 |       var regexp_email = /^([a-z]+\d*)+(\.?\w+)+@\w+(\.\w{2,3})+$/;
76 |       console.log(regexp_email.test("jeremy2021.go@gmail.com"));
77 |     </script>
78 |   </body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/chapter05/rest_param.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function sum1(x1, x2) {
 9 |         var y = x1 + x2;
10 |         console.log(y);
11 | 
12 |         return y;
13 |       }
14 | 
15 |       sum1(5, 7);
16 | 
17 |       function sum2(x1, x2, x3, x4) {
18 |         var y = x1 + x2 + x3 + x4;
19 |         console.log(y);
20 | 
21 |         return y;
22 |       }
23 | 
24 |       sum2(5, 7, 3, 9);
25 | 
26 |       function sum(...args) {
27 |         var total = 0;
28 |         for (var x of args) {
29 |           total += x;
30 |         }
31 | 
32 |         console.log(total);
33 | 
34 |         return total;
35 |       }
36 | 
37 |       sum(3, 2, 5, 7, 4, 23);
38 |     </script>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/chapter05/scope.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       //local scope - 함수 내에 선언된 변수는 함수 안에서 참조가 되고, 함수 밖에서는 참조할 수 없습니다. 이런 변수에 대한 접근성을 local scope 이라고 합니다.
 9 |       function myFunction() {
10 |         let carName = "볼보";
11 |         console.log(carName);
12 |       }
13 | 
14 |       myFunction(); //함수 내에서는 carName에 접근이 가능하기 때문에, carName에 할당된 값을 콘솔에 출력합니다.
15 | 
16 |       console.log(carName); //함수 내에 선언된 carName에 함수 밖에서는 접근할 수 없으므로 에러가 납니다.
17 | 
18 |       //global scope
19 |       var carName2 = "기아"; //함수 밖에 선언된 변수는 함수 밖은 물론 함수 안에서도 참조할 수 있습니다. 이런 변수에 대한 접근성을 global scope 이라고 합니다.
20 | 
21 |       function myFunction2() {
22 |         console.log(carName2);
23 |       }
24 | 
25 |       myFunction2(); //carName2는 global scope으로 어디서든 접근이 가능하므로, carName2에 할당된 값을 콘솔에 출력합니다.
26 |     </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/chapter05/spread_operator.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       var arr1 = [4, 5, 6];
 9 |       var arr2 = [1, 2, 3];
10 |       var arr3 = [...arr2, ...arr1];
11 |       console.log(arr3);
12 | 
13 |       var cd = "CD";
14 |       var alphabet = ["A", "B", ...cd];
15 |       console.log(alphabet);
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/chapter05/strictmode.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       //strict mode
 9 |       //
10 |       // "use strict";
11 |       x = 3.14;
12 | 
13 |       function myFunction() {
14 |         "use strict";
15 | 
16 |         y = 2;
17 |       }
18 | 
19 |       myFunction();
20 | 
21 |       // console.log(x);
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/chapter05/template_literals.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function hello(name) {
 9 |         console.log("Hello " + name + ". Welcome!");
10 |       }
11 | 
12 |       function hello2(name) {
13 |         var name2 = "John";
14 |         console.log(`Hello ${name2}. Welcome! ${name}`);
15 |       }
16 | 
17 |       hello2("Jeremy");
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/chapter05/this.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 | 
 7 |   <body>
 8 |     <button type="button" onclick="doSearch(this);">조회</button>
 9 |     <select name="" id="" onchange="doChange(this);">
10 |       <option value="1">A</option>
11 |       <option value="2">B</option>
12 |       <option value="3">C</option>
13 |       <option value="4">D</option>
14 |     </select>
15 |     <script>
16 |       //this 키워드 의미하는 것.  첫번째. this = Window 객체
17 |       console.log(this);
18 | 
19 |       function myFunction() {
20 |         console.log(this);
21 |       }
22 | 
23 |       myFunction();
24 | 
25 |       //HTML DOM요소에서 이벤트가 수행이 될때 호출하는 함수에 this를 파라미터 값으로
26 |       //전달하면, 이때 this는 이벤트가 일어나는 HTML DOM 요소 그 자체를 의미
27 | 
28 |       function doSearch(obj) {
29 |         console.log(obj);
30 |       }
31 | 
32 |       function doChange(obj) {
33 |         console.log(obj);
34 |         console.log(obj.value);
35 |       }
36 | 
37 |       //오브젝트 내의 함수에서 this는 오브젝트 자체
38 |       let person = {
39 |         firstName: "John",
40 |         lastName: "Doe",
41 |         getFullName: function () {
42 |           return this.firstName + " " + this.lastName;
43 |         },
44 |       };
45 |     </script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/chapter05/xmlhttprequest.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       // const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
 9 |       // xhr.open("POST", "/posts"); //HTTP Method, URL 정의
10 |       // xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
11 | 
12 |       // const data = {
13 |       //   id: 2,
14 |       //   title: "XHLHttpRequest",
15 |       //   author: "Jeremy",
16 |       // };
17 | 
18 |       // xhr.send(JSON.stringify(data)); //JSON.stringify를 통해 오브젝트 데이터를 문자열 형태로 변경해서 전송해야 함.
19 | 
20 |       // const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
21 |       // xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
22 |       // xhr.setRequestHeader("content-type", "application/json"); //헤더 값 중 content-type 정의
23 |       // xhr.send(); // 요청 전송
24 | 
25 |       // xhr.onload = () => {
26 |       //   if (xhr.status === 200) {
27 |       //     // 정상적으로 응답이 되면 status가 200
28 |       //     const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
29 |       //     console.log(res); // 100개의 데이터를 받아 옴
30 |       //   } else {
31 |       //     // 에러 발생
32 |       //     console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
33 |       //   }
34 |       // };
35 | 
36 |       // const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
37 |       // xhr.open("POST", "https://jsonplaceholder.typicode.com/posts"); //HTTP Method, URL 정의
38 |       // xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); //헤더 값 중 content-type 정의
39 |       // xhr.send(JSON.stringify({ title: "foo", body: "bar", userId: 1 })); // 요청 전송
40 | 
41 |       // xhr.onload = () => {
42 |       //   if (xhr.status === 201) {
43 |       //     // POST 요청이 정상적으로 성공이 되면 201
44 |       //     const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
45 |       //     console.log(res); //
46 |       //   } else {
47 |       //     // 에러 발생
48 |       //     console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
49 |       //   }
50 |       // };
51 | 
52 |       // const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
53 |       // xhr.open("PUT", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
54 |       // xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); //헤더 값 중 content-type 정의
55 |       // xhr.send(JSON.stringify({ title: "foo", body: "bar", userId: 1 })); // 요청 전송
56 | 
57 |       // xhr.onload = () => {
58 |       //   if (xhr.status === 200) {
59 |       //     // PUT 요청이 정상적으로 성공이 되면 200
60 |       //     const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
61 |       //     console.log(res); //
62 |       //   } else {
63 |       //     // 에러 발생
64 |       //     console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
65 |       //   }
66 |       // };
67 | 
68 |       const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
69 |       xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
70 |       xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); //헤더 값 중 content-type 정의
71 |       xhr.send(); // 요청 전송
72 | 
73 |       xhr.onload = () => {
74 |         console.log(xhr);
75 |         if (xhr.status === 200) {
76 |           // DELETE 요청이 정상적으로 성공이 되면 200
77 |           const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
78 |           console.log(res); //
79 |         } else {
80 |           // 에러 발생
81 |           console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
82 |         }
83 |       };
84 |     </script>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/chapter06/json_delete.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       fetch("http://localhost:3000/posts/2", { method: "DELETE" });
 9 |     </script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/chapter06/json_get.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       fetch("http://localhost:3000/comments")
 9 |         .then((response) => response.json())
10 |         .then((json) => console.log(json)); //전체 데이터 조회
11 | 
12 |       fetch("http://localhost:3000/comments/1")
13 |         .then((response) => response.json())
14 |         .then((json) => console.log(json)); //id로 조회
15 | 
16 |       fetch("http://localhost:3000/comments?postId=1")
17 |         .then((response) => response.json())
18 |         .then((json) => console.log(json)); //query로 postId=1로 조회
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/chapter06/json_post.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       fetch("http://localhost:3000/posts", {
 9 |         method: "POST", //HTTP 요청 방법
10 |         body: JSON.stringify({
11 |           //전송할 데이터
12 |           title: "The Great",
13 |           author: "Jeremy",
14 |         }),
15 |         headers: {
16 |           //헤더 값 정의
17 |           "content-type": "application/json; charset=UTF-8", //content-type 정의
18 |         },
19 |       })
20 |         .then((response) => response.json())
21 |         .then((json) => console.log(json));
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/chapter06/json_put.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       fetch("http://localhost:3000/posts/2", {
 9 |         method: "PUT", //HTTP 요청 방법
10 |         body: JSON.stringify({
11 |           //전송할 데이터
12 |           id: 2,
13 |           title: "The Great Jeremy",
14 |           author: "Jeremy",
15 |         }),
16 |         headers: {
17 |           //헤더 값 정의
18 |           "content-type": "application/json; charset=UTF-8", //content-type 정의
19 |         },
20 |       })
21 |         .then((response) => response.json())
22 |         .then((json) => console.log(json));
23 |     </script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/chapter08/dom_attribute.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <input type="text" id="text1" value="ABC" data-role="name" />
 8 |     <br />
 9 |     <button onclick="doSave(event);">저장</button>
10 |     <script>
11 |       var oText1 = document.getElementById("text1");
12 |       var textValue = oText1.value;
13 |       console.log(textValue);
14 |       console.log(document.getElementById("text1").getAttribute("value"));
15 | 
16 |       console.log(oText1.hasAttribute("value"));
17 |       console.log(oText1.hasAttribute("data-role"));
18 |       oText1.removeAttribute("data-role");
19 |       console.log(oText1.hasAttribute("data-role"));
20 | 
21 |       function doSave(e) {
22 |         var obj = e.target;
23 |         obj.disabled = true; //사용자가 중복해서 버튼을 또 클릭하지 못하도록 버튼을 disabled 시킴
24 | 
25 |         // 저장을 실행하는 코드 작성
26 |         setTimeout(function () {
27 |           // 저장완료까지 2초가 소용된 것으로 가정. 2초 후 버튼을 다시 enabled
28 |           obj.disabled = false;
29 |         }, 2000);
30 |       }
31 |     </script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/chapter08/dom_change.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1 id="title"></h1>
 8 |     <select id="sel"></select>
 9 |     <script>
10 |       document.getElementById("title").innerText = "제목 입니다.";
11 |       var sel = document.getElementById("sel");
12 |       sel.innerHTML = '<option value="">선택하세요</option>';
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/chapter08/dom_element.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <input type="text" id="userid" />
 5 |     <p>HTML요소에 대한 접근</p>
 6 |     <p>태그명을 사용해서 HTML 요소를 찾습니다. document.getElementById</p>
 7 |     <p class="para">HTML요소에 대한 접근</p>
 8 |     <p class="para">
 9 |       클래스명을 사용해서 HTML 요소를 찾습니다. document.getElementsByClassName
10 |     </p>
11 |     <script>
12 |       var element = document.getElementById("userid");
13 |       var elements = document.getElementsByTagName("p");
14 |       var elements = document.getElementsByClassName("para");
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/chapter08/dom_event.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 | 
 7 |   <body>
 8 |     <button onclick="myFunction();">클릭</button>
 9 |     <button id="btn">클릭</button>
10 |     <button id="btn2">클릭</button>
11 |     <script>
12 |       function myFunction() {
13 |         console.log("onclick 이벤트 설정");
14 |       }
15 | 
16 |       function myFunction2() {
17 |         console.log("이벤트 리스너 사용");
18 |       }
19 | 
20 |       document.getElementById("btn").addEventListener("click", myFunction);
21 |       document.getElementById("btn2").addEventListener("click", function () {
22 |         console.log("이벤트 함수 실행");
23 |       });
24 |     </script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/chapter08/dom_style.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <title></title>
  6 |     <style>
  7 |       .border-red {
  8 |         border: 2px dashed red;
  9 |       }
 10 | 
 11 |       .border-green {
 12 |         border: 2px solid green;
 13 |       }
 14 | 
 15 |       .border-default {
 16 |         border-width: 1px;
 17 |         border-color: blue;
 18 |         border-style: solid;
 19 |       }
 20 |     </style>
 21 |   </head>
 22 | 
 23 |   <body>
 24 |     Text:
 25 |     <br />
 26 |     <input type="text" id="text1" onblur="changeBorder();" />
 27 | 
 28 |     <br />
 29 |     Radio(이메일 수신):
 30 |     <br />
 31 |     <label>
 32 |       <input
 33 |         type="radio"
 34 |         name="radio_email_yn"
 35 |         value="Y"
 36 |         onclick="showEmail();"
 37 |       />
 38 |       동의</label
 39 |     >
 40 |     <label>
 41 |       <input
 42 |         type="radio"
 43 |         name="radio_email_yn"
 44 |         value="N"
 45 |         onclick="hideEmail();"
 46 |         checked
 47 |       />
 48 |       거부</label
 49 |     >
 50 |     <div id="divEmail" style="display: none">
 51 |       이메일 <input type="text" id="email" />
 52 |     </div>
 53 |     <br />
 54 |     Select:
 55 |     <br />
 56 |     <select id="select1" onchange="doChange(this);">
 57 |       <option value=""></option>
 58 |       <option value="KO">Korea</option>
 59 |       <option value="CN">China</option>
 60 |       <option value="JP">Japan</option>
 61 |     </select>
 62 |     <select id="select2" style="display: none">
 63 |       <option value="">서울</option>
 64 |       <option value="">부산</option>
 65 |       <option value="">대전</option>
 66 |       <option value="">제주</option>
 67 |     </select>
 68 |     <button type="button" onclick="doSave();">Save</button>
 69 |     <br />
 70 |     <script>
 71 |       function changeBorder() {
 72 |         var text1 = document.getElementById("text1");
 73 |         if (text1.value != "") {
 74 |           text1.className = "border-green";
 75 |         }
 76 |       }
 77 | 
 78 |       function showEmail() {
 79 |         document.getElementById("divEmail").style.display = "";
 80 |       }
 81 | 
 82 |       function hideEmail() {
 83 |         document.getElementById("divEmail").style.display = "none";
 84 |       }
 85 | 
 86 |       function doSave() {
 87 |         var text1 = document.getElementById("text1");
 88 |         if (text1.value == "") {
 89 |           text1.className = "border-red";
 90 |           return alert("필수값들을 입력하세요.");
 91 |         }
 92 | 
 93 |         console.log("doSave 실행합니다.");
 94 |       }
 95 | 
 96 |       function doChange(obj) {
 97 |         if (obj.value == "KO") {
 98 |           document.getElementById("select2").style.display = "";
 99 |         } else {
100 |           document.getElementById("select2").style.display = "none";
101 |         }
102 |       }
103 |     </script>
104 |   </body>
105 | </html>
106 | 


--------------------------------------------------------------------------------
/chapter10/decode.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       const encoded = encodeURI("http://domain.com?x=가"); //http://domain.com?x=%EA%B0%80
 9 |       console.log(decodeURI(encoded)); //http://domain.com?x=가
10 |     </script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/chapter10/encode.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       console.log(encodeURI("http://domain.com?x=A")); //http://domain.com?x=A
 9 |       console.log(encodeURI("http://domain.com?x=가")); //http://domain.com?x=%EA%B0%80
10 |     </script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/chapter10/geolocation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       let tourlist = [
 9 |         {
10 |           name: "오설록",
11 |           addr: "제주특별자치도 서귀포시 안덕면 신화역사로 15",
12 |           latitude: 33.3046315,
13 |           longitude: 126.2888373,
14 |         },
15 |         {
16 |           name: "섭지코지",
17 |           addr: "제주특별자치도 서귀포시 성산읍 섭지코지로",
18 |           latitude: 33.424214,
19 |           longitude: 126.9289223,
20 |         },
21 |         {
22 |           name: "성산일출봉",
23 |           addr: "서귀포시 성산읍",
24 |           latitude: 33.4580731,
25 |           longitude: 126.9337452,
26 |         },
27 |         {
28 |           name: "함덕해수욕장",
29 |           addr: "제주특별자치도 제주시 조천읍 신북로",
30 |           latitude: 33.5434402,
31 |           longitude: 126.6610204,
32 |         },
33 |       ];
34 | 
35 |       function getDistance(lat1, lon1, lat2, lon2, unit) {
36 |         var radlat1 = (Math.PI * lat1) / 180;
37 |         var radlat2 = (Math.PI * lat2) / 180;
38 |         var radlon1 = (Math.PI * lon1) / 180;
39 |         var radlon2 = (Math.PI * lon2) / 180;
40 |         var theta = lon1 - lon2;
41 |         var radtheta = (Math.PI * theta) / 180;
42 |         var dist =
43 |           Math.sin(radlat1) * Math.sin(radlat2) +
44 |           Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
45 |         dist = Math.acos(dist);
46 |         dist = (dist * 180) / Math.PI;
47 |         dist = dist * 60 * 1.1515;
48 |         if (unit == "K") {
49 |           dist = dist * 1.609344;
50 |         }
51 |         if (unit == "N") {
52 |           dist = dist * 0.8684;
53 |         }
54 |         return dist;
55 |       }
56 | 
57 |       navigator.geolocation.getCurrentPosition(
58 |         (position) => {
59 |           let latitude = position.coords.latitude;
60 |           let longitude = position.coords.longitude;
61 | 
62 |           console.log("latitude", latitude);
63 |           console.log("longitude", longitude);
64 | 
65 |           for (let i = 0; i < tourlist.length; i++) {
66 |             let distance = getDistance(
67 |               latitude,
68 |               longitude,
69 |               tourlist[i].latitude,
70 |               tourlist[i].longitude,
71 |               "K"
72 |             );
73 |             tourlist[i].distance = distance;
74 |           }
75 | 
76 |           let newTourList = tourlist.sort(function (a, b) {
77 |             if (a.distance > b.distance) {
78 |               return 1;
79 |             }
80 |             if (a.distance < b.distance) {
81 |               return -1;
82 |             }
83 |             return 0;
84 |           });
85 | 
86 |           console.log(newTourList);
87 |         },
88 |         (err) => {}
89 |       );
90 |     </script>
91 |   </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/chapter10/localstorage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       if (typeof Storage !== "undefined") {
 9 |         //Storage를 사용할 수 있는지 체크
10 |         localStorage.setItem("title", "The Great"); //로컬스토리지에 title 키에 The Great 저장
11 | 
12 |         const users = [
13 |           { id: 1, name: "Hyeok" },
14 |           { id: 2, name: "Seo" },
15 |         ];
16 |         localStorage.setItem("users", JSON.stringify(users)); //로컬스토리지에 users 키에 users 배열을 문자열로 저장
17 |       }
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/chapter10/localstorage2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       if (typeof Storage !== "undefined") {
 9 |         console.log(localStorage.getItem("title"));
10 |         console.log(JSON.parse(localStorage.getItem("users"))); //배열을 문자열로 변환해서 저장한 데이터는 읽어 올 때 다시 배열로 변환해줘야 합니다.
11 |       }
12 |     </script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/chapter10/sessionstorage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       if (typeof Storage !== "undefined") {
 9 |         //Storage를 사용할 수 있는지 체크
10 |         sessionStorage.setItem("title", "The Great"); //세션스토리지에 title 키에 The Great 저장
11 | 
12 |         const users = [
13 |           { id: 1, name: "Hyeok" },
14 |           { id: 2, name: "Seo" },
15 |         ];
16 |         sessionStorage.setItem("users", JSON.stringify(users)); //세션스토리지에 users 키에 users 배열을 문자열로 저장
17 |       }
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/chapter10/sessionstorage2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       if (typeof Storage !== "undefined") {
 9 |         console.log(sessionStorage.getItem("title"));
10 |         console.log(JSON.parse(sessionStorage.getItem("users"))); //배열을 문자열로 변환해서 저장한 데이터는 읽어 올 때 다시 배열로 변환해줘야 합니다.
11 |       }
12 |     </script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/chapter10/webspeech.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Document</title>
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <input type="text" id="speech_result" />
11 |     <button type="button" onclick="startSpeechRecognition();">
12 |       Start Record
13 |     </button>
14 |     <button type="button" onclick="endSpeechRecognition();">Stop Record</button>
15 |     <script>
16 |       let recognition = null;
17 | 
18 |       function checkCompatibility() {
19 |         recognition = new SpeechRecognition();
20 | 
21 |         if (!recognition) {
22 |           //Web Speech API를 사용할 수 없음
23 |           alert("You cannot use speech api.");
24 |         }
25 | 
26 |         recognition.lang = "en"; //사용할 언어 코드 지정
27 |         recognition.maxAlternatives = 3; //음성에 대한 텍스트 전환시 음성에 가장 가까운 텍스트 3개까지 결과를 받게 됨.
28 |       }
29 | 
30 |       /* 음성 인식 시작 함수 */
31 |       function startSpeechRecognition() {
32 |         recognition.addEventListener("speechstart", () => {
33 |           //음성 시작
34 |           console.log("Speech Start");
35 |         });
36 | 
37 |         recognition.addEventListener("speechend", () => {
38 |           //음성 종료
39 |           console.log("Speech End");
40 |         });
41 | 
42 |         recognition.addEventListener("result", (event) => {
43 |           //음성 결과 가져오기
44 |           console.log("Speech Result", event.results);
45 |           const text = event.results[0][0].transcript;
46 |           document.getElementById("speech_result").value = text; //음성을 텍스트로 전환한 결과를 보여 줌
47 |         });
48 | 
49 |         recognition.start(); //음성 인식 시작
50 |       }
51 | 
52 |       /* 음성 인식 종료 함수 */
53 |       function endSpeechRecognition() {
54 |         recognition.stop(); //음성 인식 종료
55 |       }
56 | 
57 |       window.addEventListener("load", checkCompatibility);
58 |     </script>
59 |   </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/chapter12/currencyformat.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function convertCurrencyFormat(amount, format) {
 9 |         let currencyUnit = ""; //화폐 단위 표기
10 | 
11 |         //포맷에 제일 첫 문자가 #이 아닌경우 원(₩) 혹은 달러($) 같은 화폐 단위로 인식하고 해당 단위를 currencyUnit에 저장하기 위한 조건문
12 |         if (format.substring(0, 1) != "#") {
13 |           currencyUnit = format.substring(0, 1); //첫 문자 가져오기
14 |         }
15 | 
16 |         let groupingSeparator = ""; //금액 3자리마다 구분자 기본 값은 콤마(,)로 설정
17 |         let maxFractionDigits = 0; //소수점 이하 자릿수 기본 값은 0
18 |         let decimalSeparator = ""; //소수점 이하 구분자 기본 값은 점(.)으로 설정
19 | 
20 |         //포맷에 있는 콤마(,)의 인덱스 번호가 점(.) 인덱스 번호 보다 작으면 #,###.## 과 같이 3자리 마다 구분자는 콤마임을 알 수 있음.
21 |         if (format.indexOf(".") == -1) {
22 |           //점(.)이 없는 경우는 소수점 이하는 없고 3자리마다 콤마 구분자를 사용하는 것을 의미함.
23 |           groupingSeparator = ",";
24 |         } else if (format.indexOf(",") == -1) {
25 |           //콤마(,)가 없는 경우는 소수점 이하는 없고 3자리마다 점(.)을 구분자를 사용하는 것을 의미함.
26 |           groupingSeparator = ".";
27 |         } else if (format.indexOf(",") < format.indexOf(".")) {
28 |           //소수점 이하 몇자리까지 표기해야하는지를 알기 위해서 포맷의 전체 길이와 점(.) 인덱스번호를 이용
29 |           //#,###.##인 경우 format.length는 8, format.indexOf(".")는 5
30 |           //소수점 자리수는 8 - 5 - 1 = 2
31 |           groupingSeparator = ",";
32 |           decimalSeparator = ".";
33 |           maxFractionDigits = format.length - format.indexOf(".") - 1;
34 |         } else {
35 |           //3자리마다 구분자를 점(.)을 사용하고 소수점 이하는 콤마(,)
36 |           groupingSeparator = ".";
37 |           decimalSeparator = ",";
38 |           maxFractionDigits = format.length - format.indexOf(",") - 1;
39 |         }
40 | 
41 |         let sign = ""; //음수라면 마이너스(-) 부호를 저장하기 위한 변수
42 |         let dec = 1;
43 |         //소수점 1자리면 10, 소수점 2자리면 100, 소수점 3자리면 1000
44 |         for (let i = 0; i < maxFractionDigits; i++) {
45 |           dec = dec * 10;
46 |         }
47 | 
48 |         //포맷에서 지정한 소수점 자리를 기준으로 반올림 적용한 값을 구함.
49 |         let v = String(Math.round(parseFloat(amount) * dec) / dec);
50 | 
51 |         //amount 값이 음수이면 음수 부호 마이너스(-)을 변수 sign에 저장하고, 부호를 제외한 값을 변수 v에 저장
52 |         if (v.startsWith("-")) {
53 |           sign = "-";
54 |           v = v.substring(1);
55 |         }
56 | 
57 |         //포맷의 제일 마지막 자리 문자가 0이면, 소수점이 없는 금액 값도 해당 소수점 자리수 만큼 보이도록 하기 위해서 임.
58 |         if (
59 |           maxFractionDigits > 0 &&
60 |           format.substring(format.length - 1) == "0"
61 |         ) {
62 |           v = String(parseFloat(v).toFixed(maxFractionDigits)); //toFixed 함수를 이용해서 강제로 해당 소수점 자리수 까지 표기
63 |         }
64 | 
65 |         //파라미터로 전달된 금액(amount)가 소수점 이하 값을 포함하고 있는 경우
66 |         let d = ""; //소수점 이하 값을 저장하기 위한 변수
67 | 
68 |         if (maxFractionDigits > 0 && v.indexOf(".") > -1) {
69 |           d = v.substring(v.indexOf(".")); //amount가 5421339.12이면, 변수 d에는 .12가 저장
70 |           d = d.replace(".", decimalSeparator); //소수점 구분자인 점(.)을 포맷에서 지정한 소수점 구분자인 decimalSeparator로 변경
71 |           v = v.substring(0, v.indexOf(".")); //amount가 5421339.12이면, 변수 v에는 5421338가 저장
72 |         }
73 | 
74 |         let r = /(\d+)(\d{3})/; //정규식 (\d+) - 숫자 1자리 이상, (\d{3}) - 숫자 3자리
75 | 
76 |         //파라미티로 전달된 amount의 정수값을 정규식으로 통해서 숫자 1자리 이상과 숫자 3자리 패턴이 발견이 되는 동안 반복문 수행
77 |         while (r.test(v)) {
78 |           //amount의 정수값이 5421338이면
79 |           //첫번째 while문에서는 $1에는 5421, $2에는 338
80 |           //v는 5421,338
81 | 
82 |           //두번째 while문에서는 $1에는 5, $2에는 421
83 |           //v는 5,421,338
84 |           v = v.replace(r, "$1" + groupingSeparator + "$2"); //$1=5421, $2=338 =>5421,338, $1=5. $2=421
85 |         }
86 |         return sign + currencyUnit + String(v) + String(d);
87 |       }
88 | 
89 |       console.log(convertCurrencyFormat(5421338, "#,###"));
90 |     </script>
91 |   </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/chapter12/datagrid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Document</title>
  5 |     <style>
  6 |       table {
  7 |         width: 100%;
  8 |       }
  9 | 
 10 |       table,
 11 |       th,
 12 |       td {
 13 |         border-collapse: collapse;
 14 |       }
 15 | 
 16 |       th,
 17 |       td {
 18 |         border: 1px solid #222;
 19 |         padding: 5px 10px;
 20 |       }
 21 | 
 22 |       th {
 23 |         cursor: pointer;
 24 |       }
 25 | 
 26 |       .pagination {
 27 |         display: inline-block;
 28 |         margin-top: 10px;
 29 |       }
 30 | 
 31 |       .pagination a {
 32 |         color: black;
 33 |         float: left;
 34 |         padding: 8px 16px;
 35 |         text-decoration: none;
 36 |         cursor: pointer;
 37 |       }
 38 | 
 39 |       .pagination a.active {
 40 |         background-color: deeppink;
 41 |         color: white;
 42 |       }
 43 |     </style>
 44 |   </head>
 45 |   <body>
 46 |     <input type="text" id="txt" /><button onclick="filter();">검색</button>
 47 |     <table>
 48 |       <thead>
 49 |         <tr>
 50 |           <th data-sort-key="name">Name</th>
 51 |           <th data-sort-key="company">Company</th>
 52 |           <th data-sort-key="email">Email</th>
 53 |           <th data-sort-key="phone">Phone</th>
 54 |           <th data-sort-key="address">Address</th>
 55 |         </tr>
 56 |       </thead>
 57 |       <tbody id="user_tb"></tbody>
 58 |     </table>
 59 |     <div class="pagination"></div>
 60 |     <script src="/samples/user_data.js"></script>
 61 |     <script>
 62 |       /**
 63 |        * tbody에 tr,td 태그를 주어진 데이터 수 만큼 화면에 출력하는 함수
 64 |        * @param {String} id
 65 |        * @param {Array} data
 66 |        */
 67 |       function render(id, data) {
 68 |         const h = []; //tr,td 태그에 대한 html 문자열을 담을 배열
 69 |         for (const user of data) {
 70 |           h.push("<tr>");
 71 |           h.push(`<td>${user.name}</td>`);
 72 |           h.push(`<td>${user.company}</td>`);
 73 |           h.push(`<td>${user.email}</td>`);
 74 |           h.push(`<td>${user.phone}</td>`);
 75 |           h.push(`<td>${user.address}</td>`);
 76 |           h.push("</tr>");
 77 |         }
 78 | 
 79 |         document.getElementById(id).innerHTML = h.join(""); //배열 h에 담긴 html 문자열을 하나로 합쳐서 innerHTML에 할당
 80 |       }
 81 | 
 82 |       let lastSortKey = "";
 83 |       let bAsc = true;
 84 | 
 85 |       /**
 86 |        * 컬럼명(th)을 클릭하면, th의 속성 data-sort-key를 가져와서 해당 키로 배열 데이터를 정렬하는 함수
 87 |        * @param {String} columnKey
 88 |        * @param {Boolean} bAsc - true이면 오름차순, false이면 내림차순
 89 |        */
 90 |       function sort(columnKey) {
 91 |         if (columnKey == lastSortKey) bAsc = !bAsc; //마지막으로 정렬했던 key와 현재 key가 같으면 정렬 방식 변경
 92 | 
 93 |         let sortValue = bAsc ? 1 : -1;
 94 |         const sortData = currentData.sort(function (a, b) {
 95 |           //배열의 내장함수인 sort를 사용해서 배열 정렬
 96 |           return a[columnKey] > b[columnKey]
 97 |             ? sortValue
 98 |             : a[columnKey] < b[columnKey]
 99 |             ? sortValue * -1
100 |             : 0;
101 |         });
102 | 
103 |         // render("user_tb", sortData);
104 |         changePage(currentPage);
105 |         lastSortKey = columnKey;
106 |       }
107 | 
108 |       /**
109 |        * 사용자 입력한 검색(필터) 조건에 맞는 데이터를 출력
110 |        */
111 |       function filter() {
112 |         const txt = document.getElementById("txt").value; //검색 입력창에 입력한 문자열
113 |         if (txt == "") {
114 |           //필터 조건이 없으면 전체 데이터 출력
115 |           currentData = userList;
116 |           changePage(1);
117 |         } else {
118 |           const regexp = new RegExp(txt, "i"); //대소문자 구분 없이 조회하기 위해서 입력된 텍스트를 소문자로 변경
119 |           currentData = userList.filter(
120 |             (user) =>
121 |               regexp.test(user.name) ||
122 |               regexp.test(user.email) ||
123 |               regexp.test(user.phone) ||
124 |               regexp.test(user.address)
125 |           );
126 | 
127 |           // render("user_tb", currentData);
128 |           changePage(1);
129 |         }
130 |       }
131 | 
132 |       let totalPage = 0;
133 |       const pagecnt = 10;
134 |       let pageRange = [];
135 |       let currentPage = 1;
136 |       let showList = [];
137 | 
138 |       function paging() {
139 |         totalPage = Math.ceil(currentData.length / pagecnt);
140 |         if (totalPage > 5) {
141 |           pageRange = [1, 2, 3, 4, 5];
142 |         } else {
143 |           pageRange = [];
144 |           for (var i = 1; i <= totalPage; i++) {
145 |             pageRange.push(i);
146 |           }
147 |         }
148 | 
149 |         renderPagination();
150 |       }
151 | 
152 |       function changePage(pageNo) {
153 |         currentPage = pageNo;
154 |         showList = [];
155 |         const startIdx = (pageNo - 1) * pagecnt;
156 |         let endIdx = pageNo * pagecnt;
157 |         if (endIdx > currentData.length) {
158 |           endIdx = currentData.length;
159 |         }
160 | 
161 |         for (let i = startIdx; i < endIdx; i++) {
162 |           showList.push(currentData[i]);
163 |         }
164 | 
165 |         render("user_tb", showList); //render 함수를 호출해서 화면에 데이터를 테이블로 출력
166 |         paging();
167 |       }
168 | 
169 |       function prevPage() {
170 |         const pageNo = pageRange[0];
171 |         currentPage = pageNo;
172 |         pageRange = [
173 |           pageNo - 5,
174 |           pageNo - 4,
175 |           pageNo - 3,
176 |           pageNo - 2,
177 |           pageNo - 1,
178 |         ];
179 | 
180 |         changePage(pageNo - 1);
181 |       }
182 | 
183 |       function nextPage() {
184 |         const pageNo = pageRange[pageRange.length - 1];
185 |         const startIdx = pageNo + 1;
186 |         let endIdx = pageNo + 5;
187 |         if (endIdx > totalPage) {
188 |           endIdx = totalPage;
189 |         }
190 | 
191 |         pageRange = [];
192 |         for (let i = startIdx; i <= endIdx; i++) {
193 |           pageRange.push(i);
194 |         }
195 |         changePage(pageNo + 1);
196 |       }
197 | 
198 |       function renderPagination() {
199 |         const h = [];
200 |         if (pageRange[0] > 1) {
201 |           h.push(`<a href="javascript:prevPage();">&laquo;</a>`);
202 |         }
203 |         for (const no of pageRange) {
204 |           h.push(
205 |             `<a href="javascript:changePage(${no});" class="${
206 |               no == currentPage ? "active" : ""
207 |             }">${no}</a>`
208 |           );
209 |         }
210 | 
211 |         if (pageRange[pageRange.length - 1] < totalPage) {
212 |           h.push(`<a href="javascript:nextPage();">&raquo;</a>`);
213 |         }
214 | 
215 |         document.querySelector(".pagination").innerHTML = h.join("");
216 |       }
217 | 
218 |       let currentData = userList;
219 | 
220 |       window.addEventListener("load", function () {
221 |         document.querySelectorAll("th[data-sort-key]").forEach((th) => {
222 |           th.addEventListener("click", function () {
223 |             sort(th.getAttribute("data-sort-key"));
224 |           });
225 |         });
226 |         paging();
227 |         changePage(1);
228 |       });
229 |     </script>
230 |   </body>
231 | </html>
232 | 


--------------------------------------------------------------------------------
/chapter12/datefomat.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getCurrentDate(format) {
 9 |         var d = new Date();
10 |         var year = d.getFullYear(); //년도
11 |         var month = d.getMonth() + 1; //월
12 |         month = month.toString().padStart(2, 0); //월이 10보다 작을 때는 앞에 0을 추가
13 |         var day = d.getDate(); //일
14 |         format = format.replace("YYYY", year); //년도 부분을 실제 년도 값으로 변경
15 |         format = format.replace("MM", month); //월 부분을 실제 월 값으로 변경
16 |         format = format.replace("DD", day); //일자 부분을 실제 일자 값으로 변경
17 | 
18 |         return format;
19 |       }
20 | 
21 |       getCurrentDate("YYYY-MM-DD"); //2021-07-21
22 |       getCurrentDate("MM.DD.YYYY"); //07.21.2021
23 | 
24 |       function convertDateFormat(yyyymmdd, format) {
25 |         var year = yyyymmdd.substr(0, 4); //년도
26 |         var month = yyyymmdd.substr(4, 2); //월
27 |         var day = yyyymmdd.substr(6, 2); //일
28 |         format = format.replace("YYYY", year); //년도 부분을 실제 년도 값으로 변경
29 |         format = format.replace("MM", month); //월 부분을 실제 월 값으로 변경
30 |         format = format.replace("DD", day); //일자 부분을 실제 일자 값으로 변경
31 | 
32 |         return format;
33 |       }
34 | 
35 |       convertDateFormat("20210721", "YYYY.MM.YY"); //2021.07.21
36 | 
37 |       function getIntervalDate(intervalDay, format) {
38 |         var now = new Date();
39 |         var millisecondsOneDay = 60 * 60 * 24 * 1000;
40 |         var d = new Date(now.getTime() + millisecondsOneDay * intervalDay); //날짜 간격만큼 milliseconds 형태로 계산
41 |         var year = d.getFullYear(); //년도
42 |         var month = d.getMonth() + 1; //월
43 |         month = month.toString().padStart(2, 0); //월이 10보다 작을 때는 앞에 0을 추가
44 |         var day = d.getDate(); //일
45 |         format = format.replace("YYYY", year); //년도 부분을 실제 년도 값으로 변경
46 |         format = format.replace("MM", month); //월 부분을 실제 월 값으로 변경
47 |         format = format.replace("DD", day); //일자 부분을 실제 일자 값으로 변경
48 | 
49 |         return format;
50 |       }
51 | 
52 |       getIntervalDate(5, "YYYY-MM-DD"); // 현재날짜가 2021년7월21일이면, 5일 후인 2021-07-26
53 |       getIntervalDate(-5, "YYYY-MM-DD"); // 현재날짜가 2021년7월21일이면, 5일 전인 2021-07-16
54 |     </script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/chapter12/datepicker.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Document</title>
  5 |     <style>
  6 |       * {
  7 |         box-sizing: border-box;
  8 |       }
  9 | 
 10 |       table {
 11 |         width: 100%;
 12 |       }
 13 | 
 14 |       table,
 15 |       th,
 16 |       td {
 17 |         border-collapse: collapse;
 18 |       }
 19 | 
 20 |       th,
 21 |       td {
 22 |         border: 1px solid #222;
 23 |         padding: 5px 10px;
 24 |       }
 25 | 
 26 |       th {
 27 |         cursor: pointer;
 28 |       }
 29 |     </style>
 30 |   </head>
 31 |   <body>
 32 |     <div class="container">
 33 |       <input type="text" id="input_date" />
 34 |       <div id="div_calendar" style="width: 300px; display: none">
 35 |         <div>
 36 |           <button type="button" onclick="changeMonth(-1);">&#60;</button>
 37 |           <input
 38 |             type="number"
 39 |             id="year"
 40 |             value="2020"
 41 |             style="width: 80px; display: initial"
 42 |             onchange="changeYear();"
 43 |           />
 44 |           <select
 45 |             id="month"
 46 |             style="width: 80px; display: initial"
 47 |             onchange="changeMonth();"
 48 |           >
 49 |             <option value="1">1월</option>
 50 |             <option value="2">2월</option>
 51 |             <option value="3">3월</option>
 52 |             <option value="4">4월</option>
 53 |             <option value="5">5월</option>
 54 |             <option value="6">6월</option>
 55 |             <option value="7">7월</option>
 56 |             <option value="8">8월</option>
 57 |             <option value="9">9월</option>
 58 |             <option value="10">10월</option>
 59 |             <option value="11">11월</option>
 60 |             <option value="12">12월</option>
 61 |           </select>
 62 |           <button type="button" onclick="changeMonth(1);">&#62;</button>
 63 |         </div>
 64 |         <table class="table table-bordered">
 65 |           <thead>
 66 |             <tr>
 67 |               <th>일</th>
 68 |               <th>월</th>
 69 |               <th>화</th>
 70 |               <th>수</th>
 71 |               <th>목</th>
 72 |               <th>금</th>
 73 |               <th>토</th>
 74 |             </tr>
 75 |           </thead>
 76 |           <tbody id="tb_body"></tbody>
 77 |         </table>
 78 |       </div>
 79 |     </div>
 80 |     <script>
 81 |       function checkLeapYear(year) {
 82 |         //윤년인지 체크
 83 |         if (year % 400 == 0) {
 84 |           // 400으로 나누어지면, 100, 4로도 나누어지기 때문에 윤년
 85 |           return true;
 86 |         } else if (year % 100 == 0) {
 87 |           // 위의 if문을 통해 400으로 나누어지지 않는다는 것을 확인한 후, 100으로 나누어지면 평년
 88 |           return false;
 89 |         } else if (year % 4 == 0) {
 90 |           // 위의 모든 조건을 만족하지 않은 후 4로 나누어지면 윤년
 91 |           return true;
 92 |         } else {
 93 |           return false; // 위의 모든 조건을 만족하지 않으면 평년
 94 |         }
 95 |       }
 96 | 
 97 |       function getFirstDayOfWeek(year, month) {
 98 |         if (month < 10) month = "0" + month;
 99 | 
100 |         return new Date(year + "-" + month + "-01").getDay();
101 |       }
102 | 
103 |       function changeYear() {
104 |         current_year = document.getElementById("year").value;
105 |         changeYearMonth(current_year, current_month);
106 |       }
107 | 
108 |       function changeYearMonth(year, month) {
109 |         let month_day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
110 | 
111 |         if (month == 2) {
112 |           if (checkLeapYear(year)) month_day[1] = 29;
113 |         }
114 | 
115 |         let first_day_of_week = getFirstDayOfWeek(year, month);
116 |         let arr_calendar = [];
117 |         for (let i = 0; i < first_day_of_week; i++) {
118 |           arr_calendar.push("");
119 |         }
120 | 
121 |         for (let i = 1; i <= month_day[month - 1]; i++) {
122 |           arr_calendar.push(String(i));
123 |         }
124 | 
125 |         let remain_day = 7 - (arr_calendar.length % 7);
126 |         if (remain_day < 7) {
127 |           for (let i = 0; i < remain_day; i++) {
128 |             arr_calendar.push("");
129 |           }
130 |         }
131 | 
132 |         renderCalendar(arr_calendar);
133 |       }
134 | 
135 |       function renderCalendar(data) {
136 |         let h = [];
137 |         for (let i = 0; i < data.length; i++) {
138 |           if (i == 0) {
139 |             h.push("<tr>");
140 |           } else if (i % 7 == 0) {
141 |             h.push("</tr>");
142 |             h.push("<tr>");
143 |           }
144 | 
145 |           h.push(
146 |             '<td onclick="setDate(' +
147 |               data[i] +
148 |               ');" style="cursor:pointer;">' +
149 |               data[i] +
150 |               "</td>"
151 |           );
152 |         }
153 | 
154 |         h.push("</tr>");
155 | 
156 |         document.getElementById("tb_body").innerHTML = h.join("");
157 |       }
158 | 
159 |       function setDate(day) {
160 |         if (day < 10) day = "0" + day;
161 |         document.getElementById("input_date").value =
162 |           current_year + "-" + current_month + "-" + day;
163 |         document.getElementById("div_calendar").style.display = "none";
164 |       }
165 | 
166 |       function changeMonth(diff) {
167 |         if (diff == undefined) {
168 |           current_month = parseInt(document.getElementById("month").value);
169 |         } else {
170 |           current_month = current_month + diff;
171 | 
172 |           if (current_month == 0) {
173 |             current_year = current_year - 1;
174 |             current_month = 12;
175 |           } else if (current_month == 13) {
176 |             current_year = current_year + 1;
177 |             current_month = 1;
178 |           }
179 |         }
180 | 
181 |         loadCalendar();
182 |       }
183 | 
184 |       function loadCalendar() {
185 |         document.getElementById("year").value = current_year;
186 |         document.getElementById("month").value = current_month;
187 |         changeYearMonth(current_year, current_month);
188 |       }
189 | 
190 |       let current_year = new Date().getFullYear();
191 |       let current_month = new Date().getMonth() + 1;
192 | 
193 |       document.getElementById("year").value = current_year;
194 |       document.getElementById("month").value = current_month;
195 | 
196 |       changeYearMonth(current_year, current_month);
197 | 
198 |       document
199 |         .getElementById("input_date")
200 |         .addEventListener("click", function () {
201 |           var obj = document.getElementById("div_calendar");
202 |           if (obj.style.display == "") {
203 |             obj.style.display = "none";
204 |           } else {
205 |             obj.style.display = "";
206 |           }
207 |         });
208 |     </script>
209 |   </body>
210 | </html>
211 | 


--------------------------------------------------------------------------------
/chapter12/float.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <input
 8 |       type="text"
 9 |       onkeydown="checkFloat(event);"
10 |       onkeyup="checkFloatKr(event);"
11 |     />
12 |     <script>
13 |       /**
14 |        * 사용자가 입력하는 키보드 이벤트를 감지하고, 0~9까지 숫자, 소수점(.), 백스페이스, delete 키, 좌우 방향키만 입력 받도록 하는 함수
15 |        * @param {event} e
16 |        * @returns
17 |        */
18 |       function checkFloat(e) {
19 |         if (
20 |           !(
21 |             (e.keyCode >= 48 && e.keyCode <= 57) ||
22 |             e.keyCode == 190 ||
23 |             e.keyCode == 8 ||
24 |             e.keyCode == 46 ||
25 |             e.keyCode == 37 ||
26 |             e.keyCode == 39
27 |           )
28 |         ) {
29 |           e.preventDefault(); //이벤트가 keyup까지 진행이 되어야 input 필드에 값이 입력이 되는데, 여기서 이벤트를 중단 시켜서 값이 입력되지 않도록 중단시킴.
30 |         }
31 |       }
32 | 
33 |       /**
34 |        * 사용자가 입력하는 키보드 이벤트를 감지하고, 한글이 입력되면 한글을 삭제하는 함수
35 |        * @param {event} e
36 |        * @returns
37 |        */
38 |       function checkFloatKr(e) {
39 |         e.target.value = e.target.value.replace(/[^0-9]\./gi, "");
40 |       }
41 |     </script>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/chapter12/i18n.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1 data-i18n="Order List"></h1>
 8 |     <button data-i18n="Search"></button>
 9 |     <script>
10 |       const i18n = {
11 |         en: {
12 |           "Order List": "Order List",
13 |           Search: "Search",
14 |         },
15 |         ko: {
16 |           "Order List": "주문 목록",
17 |           Search: "조회",
18 |         },
19 |       };
20 | 
21 |       const userLanguage = "ko"; // 사용자 언어는 한국어
22 | 
23 |       /**
24 |        * HTML 요소중 data-i18n 속성을 가지는 모든 HTML 요소를 찾아서 현재 사용자의 언어에 맞는 텍스트 값으로 변경하는 함수
25 |        * data-i18n 속성에 정의된 값은 변수 i18n의 각 언어 코드 별로 정의된 오브젝트이 키와 일치해야 함
26 |        */
27 |       function loadTranslation() {
28 |         var i18ns = document.querySelectorAll("[data-i18n]"); // data-i18n 속성을 가지고 있는 모든 HTML 요소 가져오기
29 |         for (const item of i18ns) {
30 |           item.innerText = i18n[userLanguage][item.getAttribute("data-i18n")]; // HTML 요소의 텍스트를 변수 i18n의 사용자 언어 코드에 정의된 값으로 할당
31 |         }
32 |       }
33 | 
34 |       // load 이벤트가 발생하면 loadTranslation 함수를 호출해서 화면에 다국어 적용이 필요한 모든 HTML 요소를 찾아서 다국어를 적용 함
35 |       window.addEventListener("load", loadTranslation);
36 |     </script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/chapter12/i18n2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       const i18n = {
 9 |         en: {
10 |           "My name is {fullName}. I am from {city}.":
11 |             "My name is {fullName}. I am from {city}.",
12 |         },
13 |         ko: {
14 |           "My name is {fullName}. I am from {city}.":
15 |             "제 이름은 {fullName} 입니다. 저는 {city} 출신입니다.",
16 |         },
17 |       };
18 | 
19 |       /**
20 |        * 다국어 번역 문자열 내용 중 중괄호{} 안의 key와 동일한 오브젝트 데이터의 key를 찾아서 그 값으로 치환하는 함수
21 |        * @param {String} form - 다국어 번역 내용
22 |        * @param {Object} params - 다국어 번역 내용 중 특정 내용을 치환하기 위한 오브젝트 데이터
23 |        * @returns 다국어 적용 문자열
24 |        */
25 |       function t(form, params = {}) {
26 |         return form.replace(/{[^}]*}/g, (match) => {
27 |           return params[match.slice(1, -1)];
28 |         });
29 |       }
30 | 
31 |       var data = {
32 |         id: "1",
33 |         fullName: "Seungwon Go",
34 |         city: "Jeju",
35 |         company: "ReturnValues",
36 |       };
37 | 
38 |       const enText = t(
39 |         i18n["en"]["My name is {fullName}. I am from {city}."],
40 |         data
41 |       );
42 |       console.log(enText); // My name is Seungwon Go. I am from Jeju.
43 | 
44 |       const koText = t(
45 |         i18n["ko"]["My name is {fullName}. I am from {city}."],
46 |         data
47 |       );
48 |       console.log(koText); // 제 이름은 Seungwon Go 입니다. 저는 Jeju 출신입니다.
49 |     </script>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/chapter12/number.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <input type="text" onkeydown="checkInt(event);" onkeyup="checkKr(event);" />
 8 |     <script>
 9 |       /**
10 |        * 사용자가 입력하는 키보드 이벤트를 감지하고, 0~9까지 숫자, 백스페이스, delete 키, 좌우 방향키만 입력 받도록 하는 함수
11 |        * @param {event} e
12 |        * @returns
13 |        */
14 |       function checkInt(e) {
15 |         if (
16 |           !(
17 |             (e.keyCode >= 48 && e.keyCode <= 57) ||
18 |             e.keyCode == 8 ||
19 |             e.keyCode == 46 ||
20 |             e.keyCode == 37 ||
21 |             e.keyCode == 39
22 |           )
23 |         ) {
24 |           e.preventDefault(); //이벤트가 keyup까지 진행이 되어야 input 필드에 값이 입력이 되는데, 여기서 이벤트를 중단 시켜서 값이 입력되지 않도록 중단시킴.
25 |         }
26 |       }
27 | 
28 |       /**
29 |        * 사용자가 입력하는 키보드 이벤트를 감지하고, 한글이 입력되면 한글을 삭제하는 함수
30 |        * @param {event} e
31 |        * @returns
32 |        */
33 |       function checkKr(e) {
34 |         e.target.value = e.target.value.replace(/[^0-9]/gi, "");
35 |       }
36 |     </script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/chapter12/setfield.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |   </head>
 6 |   <body>
 7 |     <input type="text" id="num1" />
 8 |     <input type="text" id="num2" />
 9 | 
10 |     <script>
11 |       /**
12 |        * 사용자가 입력하는 키보드 이벤트를 감지하고, 0~9까지 숫자, 백스페이스, delete 키, 좌우 방향키만 입력 받도록 하는 함수
13 |        * @param {event} e
14 |        * @returns
15 |        */
16 |       function checkInt(e) {
17 |         if (
18 |           !(
19 |             (e.keyCode >= 48 && e.keyCode <= 57) ||
20 |             e.keyCode == 8 ||
21 |             e.keyCode == 46 ||
22 |             e.keyCode == 37 ||
23 |             e.keyCode == 39
24 |           )
25 |         ) {
26 |           e.preventDefault(); //이벤트가 keyup까지 진행이 되어야 input 필드에 값이 입력이 되는데, 여기서 이벤트를 중단 시켜서 값이 입력되지 않도록 중단시킴.
27 |         }
28 |       }
29 | 
30 |       /**
31 |        * 사용자가 입력하는 키보드 이벤트를 감지하고, 0~9까지 숫자, 소수점(.), 백스페이스, delete 키, 좌우 방향키만 입력 받도록 하는 함수
32 |        * @param {event} e
33 |        * @returns
34 |        */
35 |       function checkFloat(e) {
36 |         if (
37 |           !(
38 |             (e.keyCode >= 48 && e.keyCode <= 57) ||
39 |             e.keyCode == 190 ||
40 |             e.keyCode == 8 ||
41 |             e.keyCode == 46 ||
42 |             e.keyCode == 37 ||
43 |             e.keyCode == 39
44 |           )
45 |         ) {
46 |           e.preventDefault(); //이벤트가 keyup까지 진행이 되어야 input 필드에 값이 입력이 되는데, 여기서 이벤트를 중단 시켜서 값이 입력되지 않도록 중단시킴.
47 |         }
48 |       }
49 | 
50 |       /**
51 |        * 사용자가 입력하는 키보드 이벤트를 감지하고, 한글이 입력되면 한글을 삭제하는 함수
52 |        * @param {event} e
53 |        * @returns
54 |        */
55 |       function checkKr(e) {
56 |         e.target.value = e.target.value.replace(/[^0-9]/gi, "");
57 |       }
58 | 
59 |       function checkFloatKr(e) {
60 |         e.target.value = e.target.value.replace(/[^0-9]\./gi, "");
61 |       }
62 | 
63 |       /**
64 |        *
65 |        * @param {String} eleId - input 요소의 아이디
66 |        * @param {String} type - int이면 정수형숫자, float이면 소수점포한숫자를 입력할수 있는 필드
67 |        */
68 |       function setField(eleId, type) {
69 |         if (type == "int") {
70 |           document.getElementById(eleId).addEventListener("keydown", checkInt);
71 |           document.getElementById(eleId).addEventListener("keyup", checkKr);
72 |         } else if (type == "float") {
73 |           document
74 |             .getElementById(eleId)
75 |             .addEventListener("keydown", checkFloat);
76 |           document
77 |             .getElementById(eleId)
78 |             .addEventListener("keyup", checkFloatKr);
79 |         }
80 |       }
81 | 
82 |       setField("num1", "int");
83 |       setField("num2", "float");
84 |     </script>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/chapter13/googlelogin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |     <meta name="google-signin-scope" content="profile email" />
 6 |     <meta
 7 |       name="google-signin-client_id"
 8 |       content="60044314381-f8u1tj0a3gvq3o01p51tot1h962ji1o8.apps.googleusercontent.com"
 9 |     />
10 |     <script src="https://apis.google.com/js/platform.js"></script>
11 |   </head>
12 |   <body>
13 |     <div id="google-signin-btn"></div>
14 |     <button
15 |       id="google-signout-btn"
16 |       style="display: none"
17 |       onclick="onSignOut();"
18 |     >
19 |       로그아웃
20 |     </button>
21 |     <script>
22 |       gapi.signin2.render("google-signin-btn", { onsuccess: onSignIn }); // 구글 로그인 버튼이 생성되고, 로그은 성공시 호출할 콜백 함수를 지정합니다.
23 | 
24 |       function onSignIn(googleUser) {
25 |         const profile = googleUser.getBasicProfile(); //사용자 정보 가져오기
26 |         console.log("ID: " + profile.getId());
27 |         console.log("Full Name: " + profile.getName());
28 |         console.log("Given Name: " + profile.getGivenName());
29 |         console.log("Family Name: " + profile.getFamilyName());
30 |         console.log("Image URL: " + profile.getImageUrl());
31 |         console.log("Email: " + profile.getEmail());
32 | 
33 |         const id_token = googleUser.getAuthResponse().id_token;
34 |         console.log("ID Token: " + id_token);
35 | 
36 |         document.getElementById("google-signin-btn").style.display = "none"; //로그인 버튼 숨기기
37 |         document.getElementById("google-signout-btn").style.display = ""; //로그아웃 버튼 보이기
38 |       }
39 | 
40 |       function onSignOut() {
41 |         gapi.auth2.getAuthInstance().disconnect();
42 |         document.getElementById("google-signin-btn").style.display = ""; //로그인 버튼 보이기
43 |         document.getElementById("google-signout-btn").style.display = "none"; //로그아웃 버튼 숨기기
44 |       }
45 |     </script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/chapter13/kakaologin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |     <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <a id="custom-login-btn" href="javascript:kakaoLogin()">
 9 |       <img
10 |         src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
11 |         width="222"
12 |       />
13 |     </a>
14 |     <button id="logout-btn" style="display: none" onclick="kakaoLogout();">
15 |       로그아웃
16 |     </button>
17 |     <script>
18 |       Kakao.init("5e953dddfcae9a00c14179f3e355c90b"); //발급 받은 앱키
19 | 
20 |       function kakaoLogin() {
21 |         Kakao.Auth.login({
22 |           scope: "profile_nickname,account_email", //동의항목에서 설정한 ID와 반드시 일치해야 함
23 |           success: function () {
24 |             //로그인 성공
25 |             Kakao.API.request({
26 |               //사용자 정보를 가져오기 위한 API
27 |               url: "/v2/user/me",
28 |               success: (res) => {
29 |                 //사용자 정보를 가져오는데 성공
30 |                 const kakaoAccount = res.kakao_account; //사용자 계정 정보
31 |                 console.log(kakaoAccount);
32 |                 document.getElementById("custom-login-btn").style.display =
33 |                   "none"; //로그인 버튼 숨기기
34 |                 document.getElementById("logout-btn").style.display = ""; //로그아웃 버튼 보이기
35 |               },
36 |             });
37 |           },
38 |           fail: function (error) {
39 |             //로그인 실패
40 |             console.log(error);
41 |           },
42 |         });
43 |       }
44 | 
45 |       function kakaoLogout() {
46 |         if (!Kakao.Auth.getAccessToken()) {
47 |           //로그인을 했으면 Access Token 이 발급되어져 있음. 없으면 아직 로그인을 안한 것임.
48 |           console.log("Not logged in.");
49 |           return;
50 |         }
51 | 
52 |         Kakao.Auth.logout((res) => {
53 |           //로그아웃 함수 호출
54 |           console.log(window.Kakao.Auth.getAccessToken());
55 |           console.log(res);
56 |           document.getElementById("custom-login-btn").style.display = ""; //로그인 버튼 보이기
57 |           document.getElementById("logout-btn").style.display = "none"; //로그아웃 버튼 숨기기
58 |         });
59 |       }
60 |     </script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/chapter13/naverlogin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Document</title>
 5 |     <script
 6 |       src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js"
 7 |       charset="utf-8"
 8 |     ></script>
 9 |   </head>
10 |   <body>
11 |     <div id="naverIdLogin"></div>
12 |     <script>
13 |       const naverLogin = new naver.LoginWithNaverId({
14 |         clientId: "5NfCU21kja9C62Q8vbmO", //개발자센터에 등록한 ClientID
15 |         callbackUrl: "http://localhost:5500/naverlogin.html", //개발자센터에 등록한 callback Url
16 |         isPopup: false, //팝업을 통한 연동처리 여부
17 |         loginButton: { color: "green", type: 3, height: 60 }, //로그인 버튼의 타입을 지정
18 |       });
19 | 
20 |       //설정정보를 초기화하고 연동을 준비
21 |       naverLogin.init();
22 | 
23 |       function getLoginStatus() {
24 |         naverLogin.getLoginStatus((status) => {
25 |           if (status) {
26 |             //status가 true 이면 로그인 된 상태임.
27 |             console.log(status);
28 |             console.log(naverLogin.user);
29 | 
30 |             //필수적으로 받아야하는 프로필 정보가 있다면 callback처리 시점에 체크
31 |             var email = naverLogin.user.getEmail();
32 |             if (email == undefined || email == null) {
33 |               alert("이메일은 필수정보입니다. 정보제공을 동의해주세요.");
34 |               //사용자 정보 재동의를 위하여 다시 네아로 동의페이지로 이동함
35 |               naverLogin.reprompt();
36 |               return;
37 |             }
38 |           } else {
39 |             console.log("callback 처리에 실패하였습니다.");
40 |           }
41 |         });
42 |       }
43 | 
44 |       getLoginStatus(); //네이버아이디로그인 성공 후 콜백 URL인 현재 페이지가 다시 열리게 되고, 이때 로그인 정보를 가져옴.
45 |     </script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/chapter14/restaurant.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Document</title>
  5 |     <style>
  6 |       * {
  7 |         box-sizing: border-box;
  8 |       }
  9 | 
 10 |       button.menu {
 11 |         padding: 5px;
 12 |         margin: 5px;
 13 |         background-color: aquamarine;
 14 |         border-radius: 10px;
 15 |         font-size: large;
 16 |       }
 17 | 
 18 |       .container {
 19 |         border: 1px solid #222;
 20 |         background-color: aliceblue;
 21 |         padding: 20px;
 22 |         margin-bottom: 10px;
 23 |       }
 24 | 
 25 |       .bg-primary {
 26 |         background-color: beige !important;
 27 |       }
 28 | 
 29 |       .bg-secondary {
 30 |         background-color: bisque !important;
 31 |       }
 32 | 
 33 |       table,
 34 |       th,
 35 |       td {
 36 |         border-collapse: collapse;
 37 |       }
 38 | 
 39 |       th,
 40 |       td {
 41 |         border: 1px solid #222;
 42 |         padding: 10px;
 43 |       }
 44 | 
 45 |       select {
 46 |         font-size: large;
 47 |         width: 100%;
 48 |         padding: 5px;
 49 |         margin-bottom: 5px;
 50 |       }
 51 | 
 52 |       .btn-cal {
 53 |         font-size: large;
 54 |         padding: 15px;
 55 |         background-color: blueviolet;
 56 |         color: white;
 57 |         border-radius: 10px;
 58 |       }
 59 |     </style>
 60 |   </head>
 61 | 
 62 |   <body>
 63 |     <h2>메뉴</h2>
 64 |     <div id="divMenus" class="container"></div>
 65 |     <h2>선택한 메뉴</h2>
 66 |     <div id="divSelectedMenus" class="container bg-primary">
 67 |       <table style="width: 100%">
 68 |         <thead>
 69 |           <tr>
 70 |             <th>메뉴명</th>
 71 |             <th>가격</th>
 72 |             <th>수량</th>
 73 |             <th>합계</th>
 74 |           </tr>
 75 |         </thead>
 76 |         <tbody id="selectedMenusTb"></tbody>
 77 |         <tfoot id="selectedMenuTotal">
 78 |           <tr>
 79 |             <td colspan="3" style="text-align: right">합계</td>
 80 |             <td><strong id="total"></strong></td>
 81 |           </tr>
 82 |         </tfoot>
 83 |       </table>
 84 |     </div>
 85 |     <h2>제휴/할인카드/쿠폰</h2>
 86 |     <div id="divDiscount" class="container">
 87 |       <div>
 88 |         <select name="" id="selCREDIT"></select>
 89 |       </div>
 90 |       <div>
 91 |         <select name="" id="selTELECOM"></select>
 92 |       </div>
 93 |       <div>
 94 |         <select name="" id="selPOINT"></select>
 95 |       </div>
 96 |       <div>
 97 |         <select name="" id="selOKCASHBAG"></select>
 98 |       </div>
 99 |       <div>
100 |         <select name="" id="selCoupons"></select>
101 |       </div>
102 |     </div>
103 |     <div style="padding: 10px; text-align: center">
104 |       <button class="btn-cal" onclick="calculateAmount();">
105 |         결제 금액 계산
106 |       </button>
107 |     </div>
108 |     <div id="divRealTotal" style="display: none">
109 |       <h2>최종 결제 금액: <strong id="realTotal"></strong></h2>
110 |     </div>
111 |     <script>
112 |       //메뉴목록
113 |       const menus = [
114 |         {
115 |           menuId: 1,
116 |           menuName: "무제한 샐러드바",
117 |           price: 25000,
118 |         },
119 |         {
120 |           menuId: 2,
121 |           menuName: "안심 스테이크(150g)",
122 |           price: 35500,
123 |         },
124 |         {
125 |           menuId: 3,
126 |           menuName: "립아이 스테이크(220g)",
127 |           price: 22500,
128 |         },
129 |         {
130 |           menuId: 4,
131 |           menuName: "채끝 등심 스테이크(210g)",
132 |           price: 30500,
133 |         },
134 |         {
135 |           menuId: 5,
136 |           menuName: "자몽에이드",
137 |           price: 6500,
138 |         },
139 |         {
140 |           menuId: 6,
141 |           menuName: "애플망고에이드",
142 |           price: 6500,
143 |         },
144 |         {
145 |           menuId: 7,
146 |           menuName: "생맥주",
147 |           price: 4000,
148 |         },
149 |       ];
150 | 
151 |       //할인종류
152 |       const cardTypes = [
153 |         {
154 |           cardType: "CREDIT",
155 |           title: "신용카드",
156 |         },
157 |         {
158 |           cardType: "TELECOM",
159 |           title: "통신사",
160 |         },
161 |         {
162 |           cardType: "OKCASHBAG",
163 |           title: "OK캐시백",
164 |         },
165 |         {
166 |           cardType: "POINT",
167 |           title: "포인트결제",
168 |         },
169 |       ];
170 | 
171 |       //할인카드/통신사/포인트/OK캐시백
172 |       const creditCards = [
173 |         {
174 |           cardId: 1,
175 |           cardType: "CREDIT",
176 |           cardName: "CJ ONE 삼성카드",
177 |           discount: 30,
178 |           discountType: "%",
179 |         },
180 |         {
181 |           cardId: 2,
182 |           cardType: "CREDIT",
183 |           cardName: "CJ ONE 신한카드",
184 |           discount: 30,
185 |           discountType: "%",
186 |         },
187 |         {
188 |           cardId: 3,
189 |           cardType: "CREDIT",
190 |           cardName: "The CJ 카드",
191 |           discount: 20,
192 |           discountType: "%",
193 |         },
194 |         {
195 |           cardId: 4,
196 |           cardType: "CREDIT",
197 |           cardName: "삼성 6 V4카드",
198 |           discount: 20,
199 |           discountType: "%",
200 |         },
201 |         {
202 |           cardId: 5,
203 |           cardType: "CREDIT",
204 |           cardName: "신한 Lady카드",
205 |           discount: 20,
206 |           discountType: "%",
207 |         },
208 |         {
209 |           cardId: 6,
210 |           cardType: "CREDIT",
211 |           cardName: "삼성 SFC",
212 |           discount: 20,
213 |           discountType: "%",
214 |         },
215 |         {
216 |           cardId: 7,
217 |           cardType: "CREDIT",
218 |           cardName: "삼성 S클라스",
219 |           discount: 20,
220 |           discountType: "%",
221 |         },
222 |         {
223 |           cardId: 8,
224 |           cardType: "CREDIT",
225 |           cardName: "하나 Yes OK Saver",
226 |           discount: 20,
227 |           discountType: "%",
228 |         },
229 |         {
230 |           cardId: 9,
231 |           cardType: "CREDIT",
232 |           cardName: "홈플러스 하나줄리엣카드",
233 |           discount: 20,
234 |           discountType: "%",
235 |         },
236 |         {
237 |           cardId: 10,
238 |           cardType: "CREDIT",
239 |           cardName: "하나 줄리엣카드 & Yes 4u shopping",
240 |           discount: 20,
241 |           discountType: "%",
242 |         },
243 |         {
244 |           cardId: 11,
245 |           cardType: "CREDIT",
246 |           cardName: "KB Star",
247 |           discount: 20,
248 |           discountType: "%",
249 |         },
250 |         {
251 |           cardId: 12,
252 |           cardType: "CREDIT",
253 |           cardName: "이마트 KB카드",
254 |           discount: 15,
255 |           discountType: "%",
256 |         },
257 |         {
258 |           cardId: 13,
259 |           cardType: "TELECOM",
260 |           cardName: "KT 멤버십 일반 할인",
261 |           discount: 5,
262 |           discountType: "%",
263 |         },
264 |         {
265 |           cardId: 14,
266 |           cardType: "TELECOM",
267 |           cardName: "KT 멤버십 VIP 할인",
268 |           discount: 15,
269 |           discountType: "%",
270 |         },
271 |         {
272 |           cardId: 15,
273 |           cardType: "TELECOM",
274 |           cardName: "T 멤버십 실버 할인",
275 |           discount: 5,
276 |           discountType: "%",
277 |         },
278 |         {
279 |           cardId: 16,
280 |           cardType: "TELECOM",
281 |           cardName: "T 멤버십 VIP/골드 할인",
282 |           discount: 15,
283 |           discountType: "%",
284 |         },
285 |         {
286 |           cardId: 17,
287 |           cardType: "OKCASHBAG",
288 |           cardName: "OK캐시백",
289 |           discount: 30,
290 |           discountType: "%",
291 |         },
292 |         {
293 |           cardId: 18,
294 |           cardType: "POINT",
295 |           cardName: "BC Top 포인트",
296 |           discount: 100,
297 |           discountType: "%",
298 |         },
299 |         {
300 |           cardId: 19,
301 |           cardType: "POINT",
302 |           cardName: "기아멤버스 카드",
303 |           discount: 20,
304 |           discountType: "%",
305 |         },
306 |         {
307 |           cardId: 20,
308 |           cardType: "POINT",
309 |           cardName: "삼성카드 포인트",
310 |           discount: 100,
311 |           discountType: "%",
312 |         },
313 |         {
314 |           cardId: 21,
315 |           cardType: "POINT",
316 |           cardName: "현대카드 M",
317 |           discount: 20,
318 |           discountType: "%",
319 |         },
320 |         {
321 |           cardId: 22,
322 |           cardType: "POINT",
323 |           cardName: "신한 Hi-Point 카드",
324 |           discount: 20,
325 |           discountType: "%",
326 |         },
327 |         {
328 |           cardId: 23,
329 |           cardType: "POINT",
330 |           cardName: "블루멤버스 카드",
331 |           discount: 20,
332 |           discountType: "%",
333 |         },
334 |       ];
335 | 
336 |       //할인쿠폰
337 |       const coupons = [
338 |         {
339 |           couponId: 1,
340 |           title: "5% 할인쿠폰(중복할인 가능)",
341 |           discount: 5,
342 |           doubleDiscount: true,
343 |           discountType: "%",
344 |         },
345 |         {
346 |           couponId: 2,
347 |           title: "10% 할인쿠폰(중복할인 가능)",
348 |           discount: 10,
349 |           doubleDiscount: true,
350 |           discountType: "%",
351 |         },
352 |         {
353 |           couponId: 3,
354 |           title: "15% 할인쿠폰(중복할인 가능)",
355 |           discount: 15,
356 |           doubleDiscount: true,
357 |           discountType: "%",
358 |         },
359 |         {
360 |           couponId: 4,
361 |           title: "5000 할인쿠폰(중복할인 가능)",
362 |           discount: 5000,
363 |           doubleDiscount: true,
364 |           discountType: "",
365 |         },
366 |         {
367 |           couponId: 5,
368 |           title: "10,000 할인쿠폰(중복할인 가능)",
369 |           discount: 10000,
370 |           doubleDiscount: true,
371 |           discountType: "",
372 |         },
373 |         {
374 |           couponId: 6,
375 |           title: "20,000 할인쿠폰(중복할인 가능)",
376 |           discount: 20000,
377 |           doubleDiscount: true,
378 |           discountType: "",
379 |         },
380 |         {
381 |           couponId: 7,
382 |           title: "5% 할인쿠폰(중복할인 불가능)",
383 |           discount: 5,
384 |           doubleDiscount: false,
385 |           discountType: "%",
386 |         },
387 |         {
388 |           couponId: 8,
389 |           title: "10% 할인쿠폰(중복할인 불가능)",
390 |           discount: 10,
391 |           doubleDiscount: false,
392 |           discountType: "%",
393 |         },
394 |         {
395 |           couponId: 9,
396 |           title: "15% 할인쿠폰(중복할인 불가능)",
397 |           discount: 15,
398 |           doubleDiscount: false,
399 |           discountType: "%",
400 |         },
401 |         {
402 |           couponId: 10,
403 |           title: "5000 할인쿠폰(중복할인 불가능)",
404 |           discount: 5000,
405 |           doubleDiscount: false,
406 |           discountType: "",
407 |         },
408 |         {
409 |           couponId: 11,
410 |           title: "10,000 할인쿠폰(중복할인 불가능)",
411 |           discount: 10000,
412 |           doubleDiscount: false,
413 |           discountType: "",
414 |         },
415 |         {
416 |           couponId: 12,
417 |           title: "20,000 할인쿠폰(중복할인 불가능)",
418 |           discount: 20000,
419 |           doubleDiscount: false,
420 |           discountType: "",
421 |         },
422 |       ];
423 | 
424 |       let total = 0;
425 | 
426 |       /**
427 |        * 선택한 모든 메뉴에 대한 합계를 계산하는 함수
428 |        */
429 |       function calculateTotalAmount() {
430 |         let lineSum = document.getElementsByClassName("line-sum");
431 |         total = 0;
432 |         for (let l of lineSum) {
433 |           total += parseInt(l.value);
434 |         }
435 | 
436 |         document.getElementById("total").innerText = total;
437 |       }
438 | 
439 |       /**
440 |        * 선택한 메뉴에서 수량을 변경하면 합계를 계산하는 함수
441 |        * @param {Event} e
442 |        * @param {Number} price
443 |        */
444 |       function changeLineSum(e, price) {
445 |         let qty = e.target.value;
446 |         let lineSum =
447 |           e.target.parentNode.parentNode.getElementsByClassName("line-sum")[0];
448 |         lineSum.value = price * parseInt(qty);
449 | 
450 |         calculateTotalAmount();
451 |       }
452 | 
453 |       let oSelectFood = {};
454 | 
455 |       /**
456 |        * 메뉴를 선택하면 선택한 메뉴 테이블에 추가하는 함수
457 |        * @param {Number} menuId
458 |        */
459 |       function selectFood(menuId) {
460 |         const menu = menus.filter((m) => m.menuId == menuId)[0];
461 |         if (oSelectFood[menu.menuId]) {
462 |           return alert("이미 추가된 메뉴입니다.");
463 |         }
464 | 
465 |         oSelectFood[menu.menuId] = menu;
466 | 
467 |         let tr = [];
468 |         tr.push("<tr>");
469 |         tr.push(`<td>${menu.menuName}</td>`);
470 |         tr.push(`<td>${menu.price}</td>`);
471 |         tr.push(
472 |           `<td><input type="number" value="1" step="1" min="1" style="width:100%;" onchange="changeLineSum(event, ${menu.price});"></td>`
473 |         );
474 |         tr.push(
475 |           `<td><input type="text" value="${
476 |             menu.price * 1
477 |           }" style="width:100%;" class="line-sum" readonly></td>`
478 |         );
479 |         tr.push("</tr>");
480 |         document
481 |           .getElementById("selectedMenusTb")
482 |           .insertAdjacentHTML("beforeend", tr.join(""));
483 | 
484 |         calculateTotalAmount();
485 |       }
486 | 
487 |       /**
488 |        * 메뉴 버튼을 만드는 함수
489 |        */
490 |       function loadMenus() {
491 |         let h = [];
492 |         for (let menu of menus) {
493 |           h.push(
494 |             `<button class="menu" onclick="selectFood(${menu.menuId});">${menu.menuName}(${menu.price}원)</button>`
495 |           );
496 |         }
497 | 
498 |         document.getElementById("divMenus").innerHTML = h.join("");
499 |       }
500 | 
501 |       /**
502 |        * 신용카드/통신사/OK캐쉬백/포인트를 선택할 수 있는 select 박스를 구성하는 함수
503 |        */
504 |       function loadCards() {
505 |         let oCards = {};
506 | 
507 |         for (let card of creditCards) {
508 |           if (!oCards[card.cardType]) {
509 |             oCards[card.cardType] = [];
510 |           }
511 | 
512 |           oCards[card.cardType].push(card);
513 |         }
514 | 
515 |         for (let key in oCards) {
516 |           let h = [];
517 |           h.push(
518 |             `<option value="">${
519 |               cardTypes.filter((c) => c.cardType == key)[0].title
520 |             } 선택하세요.</option>`
521 |           );
522 |           for (card of oCards[key]) {
523 |             h.push(
524 |               `<option value="${card.discount}">${card.cardName}</option>`
525 |             );
526 |           }
527 | 
528 |           document.getElementById("sel" + key).innerHTML = h.join("");
529 |         }
530 | 
531 |         let h = [];
532 |         h.push('<option value="">할인쿠폰을 선택하세요.</option>');
533 |         for (let coupon of coupons) {
534 |           h.push(`<option value="${coupon.couponId}">${coupon.title}</option>`);
535 |         }
536 | 
537 |         document.getElementById("selCoupons").innerHTML = h.join("");
538 |       }
539 | 
540 |       /**
541 |        * 선택한 메뉴와 할인종류에 따른 총 결제 금액을 계산하는 함수
542 |        */
543 |       function calculateAmount() {
544 |         let realTotal = 0;
545 | 
546 |         if (total == 0) {
547 |           return alert("메뉴를 먼저 선택하세요.");
548 |         }
549 | 
550 |         let discount = 0;
551 |         for (let type of cardTypes) {
552 |           if (document.getElementById("sel" + type.cardType).value != "") {
553 |             let cardDiscount = parseInt(
554 |               document.getElementById("sel" + type.cardType).value
555 |             );
556 |             if (cardDiscount > discount) {
557 |               discount = cardDiscount;
558 |             }
559 |           }
560 |         }
561 | 
562 |         let couponId = document.getElementById("selCoupons").value;
563 |         let coupon = null;
564 |         if (couponId != "") {
565 |           coupon = coupons.filter((c) => c.couponId == couponId)[0];
566 |         }
567 | 
568 |         realTotal = total;
569 | 
570 |         if (coupon != null && coupon.doubleDiscount) {
571 |           let discountAmount = 0;
572 |           if (coupon.discountType == "%") {
573 |             discountAmount = Math.round(total * (coupon.discount / 100));
574 |           } else {
575 |             discountAmount = coupon.discount;
576 |           }
577 | 
578 |           console.log(discountAmount);
579 | 
580 |           realTotal = realTotal - discountAmount;
581 |           console.log(realTotal);
582 |           if (discount > 0) {
583 |             realTotal = realTotal - Math.round(realTotal * (discount / 100));
584 |           }
585 |         } else {
586 |           if (discount > 0) {
587 |             const discountAmount = Math.round(realTotal * (discount / 100));
588 |             console.log(discountAmount);
589 |             if (coupon != null) {
590 |               if (discountAmount > coupon.discount) {
591 |                 realTotal = realTotal - discountAmount;
592 |               } else {
593 |                 realTotal = realTotal - coupon.discount;
594 |               }
595 |             } else {
596 |               realTotal = realTotal - discountAmount;
597 |             }
598 |           }
599 |         }
600 | 
601 |         document.getElementById("realTotal").innerText = realTotal + "원";
602 |         document.getElementById("divRealTotal").style.display = "";
603 |       }
604 | 
605 |       window.addEventListener("load", function () {
606 |         loadMenus();
607 |         loadCards();
608 |       });
609 |     </script>
610 |   </body>
611 | </html>
612 | 


--------------------------------------------------------------------------------
/chapter14/subway.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Document</title>
  5 |   </head>
  6 | 
  7 |   <body>
  8 |     <label>출발역</label>
  9 |     <select id="start"></select>
 10 |     <label>도착역</label>
 11 |     <select id="end"></select>
 12 |     <label
 13 |       ><input type="radio" name="group" value="ADULT" checked /> 성인일반</label
 14 |     >
 15 |     <label><input type="radio" name="group" value="YOUNG" /> 청소년</label>
 16 |     <label><input type="radio" name="group" value="CHILD" /> 어린이</label>
 17 |     <div>
 18 |       <button onclick="calculate();">요금계산</button>
 19 |     </div>
 20 |     <div
 21 |       id="output"
 22 |       style="
 23 |         width: 100%;
 24 |         height: 150px;
 25 |         overflow-y: auto;
 26 |         border: 2px solid #222;
 27 |       "
 28 |     ></div>
 29 |     <script>
 30 |       const subwayList = [
 31 |         "영등포구청역",
 32 |         "당산역",
 33 |         "합정역",
 34 |         "홍대입구역",
 35 |         "신촌역",
 36 |         "이대역",
 37 |         "아현역",
 38 |         "충정로역",
 39 |         "시청역",
 40 |         "을지로3가역",
 41 |         "을지로4가역",
 42 |         "동대문역사문화공원역",
 43 |         "신당역",
 44 |         "상왕십리역",
 45 |         "왕십리역",
 46 |         "한양대역",
 47 |         "뚝섬역",
 48 |         "성수역",
 49 |         "건대입구역",
 50 |         "구의역",
 51 |         "강변역",
 52 |         "잠실나루역",
 53 |         "잠실역",
 54 |         "종합운동장역",
 55 |         "삼성역",
 56 |         "선릉역",
 57 |         "역삼역",
 58 |         "강남역",
 59 |         "서초역",
 60 |         "방배역",
 61 |         "사당역",
 62 |         "낙성대역",
 63 |         "서울대입구역",
 64 |         "봉천역",
 65 |         "신림역",
 66 |         "신대방역",
 67 |         "구로디지털단지역",
 68 |         "대림역",
 69 |         "신도림역",
 70 |         "문래역",
 71 |       ];
 72 | 
 73 |       const intervalDistance = 3170; //역간 거리(고정)
 74 | 
 75 |       /**
 76 |        * 선택된 출발역과 도착역 사이의 총 역수를 구하고, 총 이동 거리르를 구하는 함수
 77 |        */
 78 |       function calculate() {
 79 |         const start = document.getElementById("start").value;
 80 |         const end = document.getElementById("end").value;
 81 |         const type = document.querySelector("[name=group]:checked").value;
 82 |         var output = document.getElementById("output");
 83 | 
 84 |         if (start == end) {
 85 |           return output.insertAdjacentHTML(
 86 |             "beforeend",
 87 |             `<p>출발역은 ${subwayList[start]}, 도착역은 ${subwayList[end]}입니다. 출발역과 도착역이 같습니다.</p>`
 88 |           );
 89 |         }
 90 | 
 91 |         var stationCount = 0;
 92 | 
 93 |         if (parseInt(start) > parseInt(end)) {
 94 |           stationCount = subwayList.length - parseInt(start) + parseInt(end);
 95 |         } else {
 96 |           stationCount = parseInt(end) - parseInt(start);
 97 |         }
 98 | 
 99 |         const distance = stationCount * intervalDistance;
100 | 
101 |         const cost = calSubwayCost(distance, type);
102 | 
103 |         output.insertAdjacentHTML(
104 |           "beforeend",
105 |           `<p>출발역은 ${subwayList[start]}, 도착역은 ${subwayList[end]}입니다.</p>`
106 |         );
107 |         output.insertAdjacentHTML(
108 |           "beforeend",
109 |           `<p>총 ${stationCount}개의 역을 승차했고, 총거리는 ${distance}m입니다.</p>`
110 |         );
111 |         output.insertAdjacentHTML(
112 |           "beforeend",
113 |           `<p>총 요금은 ₩${cost}입니다.</p>`
114 |         );
115 |         output.scrollTop = output.scrollHeight;
116 |       }
117 | 
118 |       /**
119 |        * 총 이동 거리와 성인/청소년/일반 구분 코드를 통해 총 요금을 계산하는 함수
120 |        * @param {Number} distance
121 |        * @param {String} type
122 |        */
123 |       function calSubwayCost(distance, type) {
124 |         const baseAmount =
125 |           type == "ADULT"
126 |             ? 1250
127 |             : type == "YOUNG"
128 |             ? 720
129 |             : type == "CHILD"
130 |             ? 450
131 |             : 0;
132 |         if (distance <= 10000) {
133 |           return baseAmount;
134 |         } else if (distance <= 50000) {
135 |           return baseAmount + Math.ceil((distance - 10000) / 5000) * 100;
136 |         } else {
137 |           return (
138 |             baseAmount +
139 |             (40000 / 5000) * 100 +
140 |             Math.ceil((distance - 50000) / 8000) * 100
141 |           );
142 |         }
143 |       }
144 | 
145 |       /**
146 |        * 지하철 목록을 출발역과 도착역 select 태그에 추가합니다.
147 |        */
148 |       function loadSubways() {
149 |         var h = [];
150 |         for (var idx in subwayList) {
151 |           h.push(`<option value="${idx}">${subwayList[idx]}</option>`);
152 |         }
153 | 
154 |         document.getElementById("start").innerHTML = h.join("");
155 |         document.getElementById("end").innerHTML = h.join("");
156 |       }
157 | 
158 |       window.addEventListener("load", function () {
159 |         loadSubways();
160 |       });
161 |     </script>
162 |   </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/chapter14/vending.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Document</title>
  5 |     <style>
  6 |       .coin {
  7 |         padding: 5px;
  8 |         margin-right: 5px;
  9 |       }
 10 | 
 11 |       .drink {
 12 |         padding: 5px;
 13 |         margin-right: 5px;
 14 |       }
 15 | 
 16 |       .active {
 17 |         background-color: yellow;
 18 |       }
 19 |     </style>
 20 |   </head>
 21 | 
 22 |   <body>
 23 |     <div id="divCoins"></div>
 24 |     <br />
 25 |     <div>
 26 |       <label>음료자판기 저장된 총 금액</label
 27 |       ><input
 28 |         type="text"
 29 |         name=""
 30 |         id="total_vending_amount"
 31 |         value="1000"
 32 |         readonly
 33 |       />
 34 |       <label>투입금액</label
 35 |       ><input type="text" name="" id="total_input_amount" value="0" readonly />
 36 |       <label>내지갑</label
 37 |       ><input
 38 |         type="text"
 39 |         name=""
 40 |         id="total_customer_amount"
 41 |         value="10000"
 42 |         readonly
 43 |       />
 44 |     </div>
 45 |     <br />
 46 |     <div id="divDrinks"></div>
 47 |     <br />
 48 |     <div
 49 |       id="output"
 50 |       style="
 51 |         width: 100%;
 52 |         height: 150px;
 53 |         overflow-y: auto;
 54 |         border: 2px solid #222;
 55 |       "
 56 |     ></div>
 57 |     <script>
 58 |       let total_vending_amount = 1000;
 59 |       let total_customer_amount = 10000;
 60 |       let total_input_amount = 0;
 61 | 
 62 |       const drinks = [
 63 |         {
 64 |           drinkId: "1",
 65 |           drinkName: "코카콜라",
 66 |           price: 700,
 67 |           stock: 5,
 68 |         },
 69 |         {
 70 |           drinkId: "2",
 71 |           drinkName: "오렌지주스",
 72 |           price: 1200,
 73 |           stock: 5,
 74 |         },
 75 |         {
 76 |           drinkId: "3",
 77 |           drinkName: "커피",
 78 |           price: 500,
 79 |           stock: 5,
 80 |         },
 81 |         {
 82 |           drinkId: "4",
 83 |           drinkName: "물",
 84 |           price: 700,
 85 |           stock: 5,
 86 |         },
 87 |         {
 88 |           drinkId: "5",
 89 |           drinkName: "옥수수수염차",
 90 |           price: 1200,
 91 |           stock: 5,
 92 |         },
 93 |         {
 94 |           drinkId: "6",
 95 |           drinkName: "밀키스",
 96 |           price: 700,
 97 |           stock: 5,
 98 |         },
 99 |         {
100 |           drinkId: "7",
101 |           drinkName: "트래비",
102 |           price: 1000,
103 |           stock: 5,
104 |         },
105 |       ];
106 | 
107 |       /**
108 |        * 동전 버튼을 클릭할 때 마다 투입한 금액 처리 함수
109 |        * @param {Number} amount
110 |        */
111 |       function inputAmount(amount) {
112 |         var output = document.getElementById("output");
113 |         if (amount <= total_customer_amount) {
114 |           //고객 지갑에 투입하려는 금액만큼 있는지 체크
115 |           total_input_amount += amount;
116 |           total_customer_amount -= amount;
117 |           total_vending_amount += amount;
118 | 
119 |           for (var drink of drinks) {
120 |             if (drink.price <= total_input_amount) {
121 |               document.getElementById("btnDrink" + drink.drinkId).className =
122 |                 "drink active";
123 |             }
124 |           }
125 | 
126 |           document.getElementById("total_input_amount").value =
127 |             total_input_amount;
128 |           document.getElementById("total_customer_amount").value =
129 |             total_customer_amount;
130 |           document.getElementById("total_vending_amount").value =
131 |             total_vending_amount;
132 | 
133 |           output.insertAdjacentHTML(
134 |             "beforeend",
135 |             `<p>${amount}이 투입되었습니다.</p>`
136 |           );
137 |           output.insertAdjacentHTML(
138 |             "beforeend",
139 |             `<p>총 투입 금액은 ${total_input_amount}입니다.</p>`
140 |           );
141 |           output.insertAdjacentHTML(
142 |             "beforeend",
143 |             `<p>당신의 지갑에는 ${total_customer_amount}이 남아 있습니다.</p>`
144 |           );
145 |         } else {
146 |           output.insertAdjacentHTML(
147 |             "beforeend",
148 |             `<p>내 지갑에 남아 있는 돈이 ${total_customer_amount} 입니다.</p>`
149 |           );
150 |           output.insertAdjacentHTML(
151 |             "beforeend",
152 |             `<p>${amount}를 투입할 수 없습니다.</p>`
153 |           );
154 |         }
155 |         output.scrollTop = output.scrollHeight;
156 |       }
157 | 
158 |       /**
159 |        * 음료 버튼을 클릭하면, 음료 구매가 가능한지 확인하는 함수
160 |        * @param {Number} drinkId
161 |        */
162 |       function requestDrink(drinkId) {
163 |         var output = document.getElementById("output");
164 |         let drink = drinks.filter((d) => d.drinkId == drinkId)[0];
165 |         if (drink.stock > 0) {
166 |           if (total_input_amount >= drink.price) {
167 |             let changes = total_input_amount - drink.price;
168 |             if (total_vending_amount >= changes) {
169 |               output.insertAdjacentHTML(
170 |                 "beforeend",
171 |                 `<p>${drink.drinkName} 음료가 나왔습니다. 잔돈 ${changes}이 나옵니다.</p>`
172 |               );
173 |               total_customer_amount += changes;
174 |               drink.stock -= 1;
175 |               total_input_amount = 0;
176 |               total_vending_amount -= changes;
177 | 
178 |               document.getElementById("total_input_amount").value =
179 |                 total_input_amount;
180 |               document.getElementById("total_customer_amount").value =
181 |                 total_customer_amount;
182 |               document.getElementById("total_vending_amount").value =
183 |                 total_vending_amount;
184 | 
185 |               document.getElementById("drink_stock" + drinkId).innerText =
186 |                 drink.stock;
187 | 
188 |               output.insertAdjacentHTML(
189 |                 "beforeend",
190 |                 `<p>이제 당신 지갑에는 총 ${total_customer_amount} 있습니다.</p>`
191 |               );
192 | 
193 |               for (var item of drinks) {
194 |                 document.getElementById("btnDrink" + item.drinkId).className =
195 |                   "drink";
196 |               }
197 |             } else {
198 |               output.insertAdjacentHTML(
199 |                 "beforeend",
200 |                 `<p>음료자판기에 잔돈이 없어서 ${drink.drinkName} 음료를 구매할 수 없습니다.</p>`
201 |               );
202 |             }
203 |           } else {
204 |             output.insertAdjacentHTML(
205 |               "beforeend",
206 |               `<p>투입하신 금액은 총 ${total_input_amount}인데, 음료 가격은 ${drink.price}여서 구매할 수 없습니다.</p>`
207 |             );
208 |           }
209 |         } else {
210 |           output.insertAdjacentHTML(
211 |             "beforeend",
212 |             `<p>선택하신 음료 ${drink.drinkName}이 재고가 없습니다.</p>`
213 |           );
214 |         }
215 |         output.scrollTop = output.scrollHeight;
216 |       }
217 | 
218 |       /**
219 |        * 동전 버튼을 화면에 출력하는 함수
220 |        */
221 |       function renderCoins() {
222 |         const coins = [100, 500, 1000];
223 |         const h = [];
224 |         for (const coin of coins) {
225 |           h.push(
226 |             `<button onclick="inputAmount(${coin});" class="coin">${coin}원 투입</button>`
227 |           );
228 |         }
229 | 
230 |         document.getElementById("divCoins").innerHTML = h.join("");
231 |       }
232 | 
233 |       /**
234 |        * 음료 버튼을 화면에 출력하는 함수
235 |        */
236 |       function renderDrinks() {
237 |         const h = [];
238 |         for (const drink of drinks) {
239 |           h.push(
240 |             `<button onclick="requestDrink(${drink.drinkId});" id="btnDrink${drink.drinkId}" class="drink">${drink.drinkName}(${drink.price}원, 재고수<span id="drink_stock${drink.drinkId}">${drink.stock}</span>)</button>`
241 |           );
242 |         }
243 | 
244 |         document.getElementById("divDrinks").innerHTML = h.join("");
245 |       }
246 | 
247 |       window.addEventListener("load", function () {
248 |         renderCoins();
249 |         renderDrinks();
250 |       });
251 |     </script>
252 |   </body>
253 | </html>
254 | 


--------------------------------------------------------------------------------
/json-server/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "posts": [
 3 |     {
 4 |       "id": 1,
 5 |       "title": "json-server",
 6 |       "author": "typicode"
 7 |     }
 8 |   ],
 9 |   "comments": [
10 |     {
11 |       "id": 1,
12 |       "body": "some comment",
13 |       "postId": 1
14 |     }
15 |   ],
16 |   "profile": {
17 |     "name": "typicode"
18 |   }
19 | }


--------------------------------------------------------------------------------
/samples/user_data.js:
--------------------------------------------------------------------------------
  1 | let userList = [
  2 |   {
  3 |     "_id": "60fa9c2da20f1aaf7b65f5ed",
  4 |     "age": 23,
  5 |     "name": "Stefanie Chan",
  6 |     "gender": "female",
  7 |     "company": "FORTEAN",
  8 |     "email": "stefaniechan@fortean.com",
  9 |     "phone": "+1 (886) 540-2996",
 10 |     "address": "632 Monroe Street, Munjor, New Hampshire, 9595"
 11 |   },
 12 |   {
 13 |     "_id": "60fa9c2d79fa0ece941e1253",
 14 |     "age": 33,
 15 |     "name": "Vinson Mayer",
 16 |     "gender": "male",
 17 |     "company": "BRAINQUIL",
 18 |     "email": "vinsonmayer@brainquil.com",
 19 |     "phone": "+1 (877) 502-3351",
 20 |     "address": "188 Gold Street, Dotsero, Wyoming, 904"
 21 |   },
 22 |   {
 23 |     "_id": "60fa9c2dc15d9ff32af12246",
 24 |     "age": 40,
 25 |     "name": "Cabrera Singleton",
 26 |     "gender": "male",
 27 |     "company": "COMSTAR",
 28 |     "email": "cabrerasingleton@comstar.com",
 29 |     "phone": "+1 (962) 547-2840",
 30 |     "address": "865 Amherst Street, Rehrersburg, South Dakota, 3120"
 31 |   },
 32 |   {
 33 |     "_id": "60fa9c2d0a1e479d02f7f89c",
 34 |     "age": 20,
 35 |     "name": "Velma Conway",
 36 |     "gender": "female",
 37 |     "company": "COMSTRUCT",
 38 |     "email": "velmaconway@comstruct.com",
 39 |     "phone": "+1 (882) 545-3377",
 40 |     "address": "452 Ira Court, Sussex, Ohio, 7805"
 41 |   },
 42 |   {
 43 |     "_id": "60fa9c2d9e41d35a31f4aafa",
 44 |     "age": 37,
 45 |     "name": "Beryl Ford",
 46 |     "gender": "female",
 47 |     "company": "EMERGENT",
 48 |     "email": "berylford@emergent.com",
 49 |     "phone": "+1 (830) 503-2780",
 50 |     "address": "363 Garfield Place, Lindcove, North Carolina, 5142"
 51 |   },
 52 |   {
 53 |     "_id": "60fa9c2d0b589b159813e3f8",
 54 |     "age": 35,
 55 |     "name": "Pope Greer",
 56 |     "gender": "male",
 57 |     "company": "VANTAGE",
 58 |     "email": "popegreer@vantage.com",
 59 |     "phone": "+1 (994) 504-3201",
 60 |     "address": "918 Court Street, Snelling, California, 7557"
 61 |   },
 62 |   {
 63 |     "_id": "60fa9c2d970018d9a612ec5f",
 64 |     "age": 24,
 65 |     "name": "Kathy May",
 66 |     "gender": "female",
 67 |     "company": "GOKO",
 68 |     "email": "kathymay@goko.com",
 69 |     "phone": "+1 (853) 562-3394",
 70 |     "address": "861 Will Place, Ilchester, Maine, 5424"
 71 |   },
 72 |   {
 73 |     "_id": "60fa9c2d9b4cd02f0551b204",
 74 |     "age": 24,
 75 |     "name": "Villarreal Hart",
 76 |     "gender": "male",
 77 |     "company": "BUZZNESS",
 78 |     "email": "villarrealhart@buzzness.com",
 79 |     "phone": "+1 (919) 551-3057",
 80 |     "address": "657 Veterans Avenue, Southmont, Minnesota, 7137"
 81 |   },
 82 |   {
 83 |     "_id": "60fa9c2d60eb4440b42da54f",
 84 |     "age": 25,
 85 |     "name": "Jackie Mckay",
 86 |     "gender": "female",
 87 |     "company": "FIREWAX",
 88 |     "email": "jackiemckay@firewax.com",
 89 |     "phone": "+1 (971) 594-3356",
 90 |     "address": "237 Polhemus Place, Talpa, Virginia, 4527"
 91 |   },
 92 |   {
 93 |     "_id": "60fa9c2dfc4925cb819d81da",
 94 |     "age": 21,
 95 |     "name": "Jeannine Hewitt",
 96 |     "gender": "female",
 97 |     "company": "OPTICOM",
 98 |     "email": "jeanninehewitt@opticom.com",
 99 |     "phone": "+1 (892) 477-2108",
100 |     "address": "188 Tennis Court, Lindisfarne, Federated States Of Micronesia, 9821"
101 |   },
102 |   {
103 |     "_id": "60fa9c2d7d40df0ec6515b45",
104 |     "age": 22,
105 |     "name": "Cross Nelson",
106 |     "gender": "male",
107 |     "company": "ZERBINA",
108 |     "email": "crossnelson@zerbina.com",
109 |     "phone": "+1 (856) 470-2868",
110 |     "address": "496 Thomas Street, Kersey, Virgin Islands, 9048"
111 |   },
112 |   {
113 |     "_id": "60fa9c2d9bc5bf4479b00cfb",
114 |     "age": 40,
115 |     "name": "Key Spencer",
116 |     "gender": "male",
117 |     "company": "BRAINCLIP",
118 |     "email": "keyspencer@brainclip.com",
119 |     "phone": "+1 (810) 481-2777",
120 |     "address": "437 Ocean Court, Fillmore, Massachusetts, 6399"
121 |   },
122 |   {
123 |     "_id": "60fa9c2dbfd5f6100e9a23d0",
124 |     "age": 20,
125 |     "name": "Elliott Burnett",
126 |     "gender": "male",
127 |     "company": "GINK",
128 |     "email": "elliottburnett@gink.com",
129 |     "phone": "+1 (985) 410-3251",
130 |     "address": "212 Eagle Street, Kula, West Virginia, 4957"
131 |   },
132 |   {
133 |     "_id": "60fa9c2de40708b15dc7d568",
134 |     "age": 21,
135 |     "name": "Ruby Murphy",
136 |     "gender": "female",
137 |     "company": "UTARA",
138 |     "email": "rubymurphy@utara.com",
139 |     "phone": "+1 (844) 529-2154",
140 |     "address": "704 Judge Street, Defiance, Alaska, 8846"
141 |   },
142 |   {
143 |     "_id": "60fa9c2dd81a51220f4215bb",
144 |     "age": 37,
145 |     "name": "Sofia Wheeler",
146 |     "gender": "female",
147 |     "company": "EDECINE",
148 |     "email": "sofiawheeler@edecine.com",
149 |     "phone": "+1 (837) 438-3056",
150 |     "address": "975 Canal Avenue, Foscoe, Guam, 5750"
151 |   },
152 |   {
153 |     "_id": "60fa9c2d587a480caf2faa08",
154 |     "age": 36,
155 |     "name": "Lois Pruitt",
156 |     "gender": "female",
157 |     "company": "ORBIFLEX",
158 |     "email": "loispruitt@orbiflex.com",
159 |     "phone": "+1 (984) 580-3214",
160 |     "address": "460 Erskine Loop, Macdona, Marshall Islands, 7191"
161 |   },
162 |   {
163 |     "_id": "60fa9c2d00c8d732dc7e2f09",
164 |     "age": 25,
165 |     "name": "Webb Mclean",
166 |     "gender": "male",
167 |     "company": "HOPELI",
168 |     "email": "webbmclean@hopeli.com",
169 |     "phone": "+1 (918) 562-2572",
170 |     "address": "169 Irwin Street, Catherine, Utah, 9758"
171 |   },
172 |   {
173 |     "_id": "60fa9c2d6796565dcb9e2992",
174 |     "age": 40,
175 |     "name": "Janell Fox",
176 |     "gender": "female",
177 |     "company": "SNOWPOKE",
178 |     "email": "janellfox@snowpoke.com",
179 |     "phone": "+1 (926) 435-2453",
180 |     "address": "729 Bragg Street, Stouchsburg, Delaware, 3375"
181 |   },
182 |   {
183 |     "_id": "60fa9c2dad8195d0b73aab80",
184 |     "age": 20,
185 |     "name": "Dodson Nguyen",
186 |     "gender": "male",
187 |     "company": "GOLOGY",
188 |     "email": "dodsonnguyen@gology.com",
189 |     "phone": "+1 (821) 575-3298",
190 |     "address": "250 Dearborn Court, Rodanthe, South Carolina, 8481"
191 |   },
192 |   {
193 |     "_id": "60fa9c2dd2c5fcae8d045010",
194 |     "age": 33,
195 |     "name": "Dejesus Burch",
196 |     "gender": "male",
197 |     "company": "TROLLERY",
198 |     "email": "dejesusburch@trollery.com",
199 |     "phone": "+1 (965) 431-2180",
200 |     "address": "491 Lefferts Place, Odessa, Connecticut, 3610"
201 |   },
202 |   {
203 |     "_id": "60fa9c2d1a801a1e9f44512b",
204 |     "age": 28,
205 |     "name": "Annabelle Jones",
206 |     "gender": "female",
207 |     "company": "MAXEMIA",
208 |     "email": "annabellejones@maxemia.com",
209 |     "phone": "+1 (862) 456-3926",
210 |     "address": "576 Hanson Place, Sylvanite, Wisconsin, 3280"
211 |   },
212 |   {
213 |     "_id": "60fa9c2db09699cd5bb47898",
214 |     "age": 32,
215 |     "name": "Pearl Kelley",
216 |     "gender": "female",
217 |     "company": "ONTAGENE",
218 |     "email": "pearlkelley@ontagene.com",
219 |     "phone": "+1 (958) 504-3524",
220 |     "address": "154 Chester Court, Lynn, Iowa, 6339"
221 |   },
222 |   {
223 |     "_id": "60fa9c2d17573c2a6d5d1614",
224 |     "age": 32,
225 |     "name": "Karen Morales",
226 |     "gender": "female",
227 |     "company": "ILLUMITY",
228 |     "email": "karenmorales@illumity.com",
229 |     "phone": "+1 (930) 415-2573",
230 |     "address": "430 Glenmore Avenue, Dyckesville, Indiana, 9278"
231 |   },
232 |   {
233 |     "_id": "60fa9c2d69d4a56b8030a79a",
234 |     "age": 23,
235 |     "name": "Sharlene Gould",
236 |     "gender": "female",
237 |     "company": "EXOSWITCH",
238 |     "email": "sharlenegould@exoswitch.com",
239 |     "phone": "+1 (812) 495-2517",
240 |     "address": "966 Montieth Street, Cartwright, Montana, 6744"
241 |   },
242 |   {
243 |     "_id": "60fa9c2d5b9848544a224450",
244 |     "age": 20,
245 |     "name": "Jo Conrad",
246 |     "gender": "female",
247 |     "company": "LOVEPAD",
248 |     "email": "joconrad@lovepad.com",
249 |     "phone": "+1 (917) 487-3440",
250 |     "address": "297 Gallatin Place, Alleghenyville, New Jersey, 4740"
251 |   },
252 |   {
253 |     "_id": "60fa9c2d79a5a2ca25fe93da",
254 |     "age": 32,
255 |     "name": "Gilliam Preston",
256 |     "gender": "male",
257 |     "company": "MARQET",
258 |     "email": "gilliampreston@marqet.com",
259 |     "phone": "+1 (917) 517-2333",
260 |     "address": "745 Hazel Court, Hondah, New York, 8649"
261 |   },
262 |   {
263 |     "_id": "60fa9c2d8ab3326e41940004",
264 |     "age": 24,
265 |     "name": "Zimmerman Robinson",
266 |     "gender": "male",
267 |     "company": "BALOOBA",
268 |     "email": "zimmermanrobinson@balooba.com",
269 |     "phone": "+1 (825) 527-3703",
270 |     "address": "558 Cortelyou Road, Cliff, Colorado, 7560"
271 |   },
272 |   {
273 |     "_id": "60fa9c2d700f8fd8427d94ea",
274 |     "age": 25,
275 |     "name": "Violet Merrill",
276 |     "gender": "female",
277 |     "company": "REMOTION",
278 |     "email": "violetmerrill@remotion.com",
279 |     "phone": "+1 (982) 425-2428",
280 |     "address": "471 Mersereau Court, Darrtown, Pennsylvania, 8329"
281 |   },
282 |   {
283 |     "_id": "60fa9c2d79be89bf106c47e7",
284 |     "age": 31,
285 |     "name": "Vicky Mccall",
286 |     "gender": "female",
287 |     "company": "MANTRIX",
288 |     "email": "vickymccall@mantrix.com",
289 |     "phone": "+1 (949) 584-3564",
290 |     "address": "630 Remsen Street, Tivoli, Texas, 1466"
291 |   },
292 |   {
293 |     "_id": "60fa9c2d27fca967d95a0060",
294 |     "age": 36,
295 |     "name": "Sargent Erickson",
296 |     "gender": "male",
297 |     "company": "PREMIANT",
298 |     "email": "sargenterickson@premiant.com",
299 |     "phone": "+1 (936) 525-3762",
300 |     "address": "281 Garland Court, Camas, Alabama, 3811"
301 |   },
302 |   {
303 |     "_id": "60fa9c2d3947584dc0773b15",
304 |     "age": 35,
305 |     "name": "Cherry Moran",
306 |     "gender": "female",
307 |     "company": "LIMOZEN",
308 |     "email": "cherrymoran@limozen.com",
309 |     "phone": "+1 (895) 492-2147",
310 |     "address": "987 Montgomery Place, Jugtown, Maryland, 4267"
311 |   },
312 |   {
313 |     "_id": "60fa9c2d65fe8921e4faa6c9",
314 |     "age": 22,
315 |     "name": "Holly Prince",
316 |     "gender": "female",
317 |     "company": "BOILICON",
318 |     "email": "hollyprince@boilicon.com",
319 |     "phone": "+1 (858) 445-3634",
320 |     "address": "774 Dinsmore Place, Valmy, Oregon, 3091"
321 |   },
322 |   {
323 |     "_id": "60fa9c2d4efe4a6671bba79f",
324 |     "age": 39,
325 |     "name": "Blanche Kidd",
326 |     "gender": "female",
327 |     "company": "TELEPARK",
328 |     "email": "blanchekidd@telepark.com",
329 |     "phone": "+1 (810) 445-2372",
330 |     "address": "327 Little Street, Motley, American Samoa, 9130"
331 |   },
332 |   {
333 |     "_id": "60fa9c2d4d113384a84e8de1",
334 |     "age": 34,
335 |     "name": "Griffin Cervantes",
336 |     "gender": "male",
337 |     "company": "OTHERWAY",
338 |     "email": "griffincervantes@otherway.com",
339 |     "phone": "+1 (996) 598-2912",
340 |     "address": "554 Cobek Court, Needmore, Mississippi, 7237"
341 |   },
342 |   {
343 |     "_id": "60fa9c2d800b4e13b7ee3db9",
344 |     "age": 39,
345 |     "name": "Miller Todd",
346 |     "gender": "male",
347 |     "company": "QUIZMO",
348 |     "email": "millertodd@quizmo.com",
349 |     "phone": "+1 (825) 569-2315",
350 |     "address": "255 Llama Court, Falconaire, Northern Mariana Islands, 1263"
351 |   },
352 |   {
353 |     "_id": "60fa9c2de83687d705056f1b",
354 |     "age": 35,
355 |     "name": "Casey Bray",
356 |     "gender": "male",
357 |     "company": "KIOSK",
358 |     "email": "caseybray@kiosk.com",
359 |     "phone": "+1 (873) 401-2784",
360 |     "address": "141 Aviation Road, Martinsville, Arizona, 2710"
361 |   },
362 |   {
363 |     "_id": "60fa9c2d87b14c0869bddc87",
364 |     "age": 38,
365 |     "name": "Becky Puckett",
366 |     "gender": "female",
367 |     "company": "HOTCAKES",
368 |     "email": "beckypuckett@hotcakes.com",
369 |     "phone": "+1 (870) 461-2906",
370 |     "address": "636 Paerdegat Avenue, Brandywine, North Dakota, 2357"
371 |   },
372 |   {
373 |     "_id": "60fa9c2d917a794e464bf42d",
374 |     "age": 21,
375 |     "name": "Alexandria Blake",
376 |     "gender": "female",
377 |     "company": "IMKAN",
378 |     "email": "alexandriablake@imkan.com",
379 |     "phone": "+1 (844) 406-2570",
380 |     "address": "539 Irving Place, Tedrow, Georgia, 4829"
381 |   },
382 |   {
383 |     "_id": "60fa9c2d1af28effc8a3f271",
384 |     "age": 28,
385 |     "name": "Romero Oneal",
386 |     "gender": "male",
387 |     "company": "ACCRUEX",
388 |     "email": "romerooneal@accruex.com",
389 |     "phone": "+1 (998) 423-3580",
390 |     "address": "562 Reed Street, Bagtown, New Mexico, 5337"
391 |   },
392 |   {
393 |     "_id": "60fa9c2d300bf3ae567ff81f",
394 |     "age": 31,
395 |     "name": "Fischer Powers",
396 |     "gender": "male",
397 |     "company": "COMCUBINE",
398 |     "email": "fischerpowers@comcubine.com",
399 |     "phone": "+1 (980) 448-2034",
400 |     "address": "342 Beacon Court, Ivanhoe, District Of Columbia, 1673"
401 |   },
402 |   {
403 |     "_id": "60fa9c2d618d1d7f8d65a974",
404 |     "age": 31,
405 |     "name": "Robertson Parrish",
406 |     "gender": "male",
407 |     "company": "URBANSHEE",
408 |     "email": "robertsonparrish@urbanshee.com",
409 |     "phone": "+1 (815) 486-3007",
410 |     "address": "301 Humboldt Street, Genoa, Louisiana, 514"
411 |   },
412 |   {
413 |     "_id": "60fa9c2df95d2cace25a4a4e",
414 |     "age": 20,
415 |     "name": "Conley Boyer",
416 |     "gender": "male",
417 |     "company": "AMTAS",
418 |     "email": "conleyboyer@amtas.com",
419 |     "phone": "+1 (907) 566-3570",
420 |     "address": "884 Brooklyn Avenue, Fruitdale, Michigan, 8196"
421 |   },
422 |   {
423 |     "_id": "60fa9c2d3ad84a8d50b45eab",
424 |     "age": 21,
425 |     "name": "Janette Kline",
426 |     "gender": "female",
427 |     "company": "GEEKY",
428 |     "email": "janettekline@geeky.com",
429 |     "phone": "+1 (995) 511-3205",
430 |     "address": "389 Engert Avenue, National, Rhode Island, 3478"
431 |   },
432 |   {
433 |     "_id": "60fa9c2d544b840f49229106",
434 |     "age": 36,
435 |     "name": "Green Whitney",
436 |     "gender": "male",
437 |     "company": "INEAR",
438 |     "email": "greenwhitney@inear.com",
439 |     "phone": "+1 (871) 591-3914",
440 |     "address": "413 Hubbard Street, Wolcott, Oklahoma, 6661"
441 |   },
442 |   {
443 |     "_id": "60fa9c2dbcbe8b4ca3e19a32",
444 |     "age": 25,
445 |     "name": "Chelsea Mcmillan",
446 |     "gender": "female",
447 |     "company": "ZENTRY",
448 |     "email": "chelseamcmillan@zentry.com",
449 |     "phone": "+1 (855) 586-2835",
450 |     "address": "675 Myrtle Avenue, Lisco, Missouri, 898"
451 |   },
452 |   {
453 |     "_id": "60fa9c2d352a301c8c2b8c80",
454 |     "age": 21,
455 |     "name": "Desiree Dodson",
456 |     "gender": "female",
457 |     "company": "EZENTIA",
458 |     "email": "desireedodson@ezentia.com",
459 |     "phone": "+1 (804) 481-3855",
460 |     "address": "939 Monroe Place, Elizaville, Idaho, 7391"
461 |   },
462 |   {
463 |     "_id": "60fa9c2d577d30c9d49911b7",
464 |     "age": 38,
465 |     "name": "Sybil Romero",
466 |     "gender": "female",
467 |     "company": "GRAINSPOT",
468 |     "email": "sybilromero@grainspot.com",
469 |     "phone": "+1 (841) 483-2530",
470 |     "address": "262 Beard Street, Dubois, Palau, 8710"
471 |   },
472 |   {
473 |     "_id": "60fa9c2d022add305a990af2",
474 |     "age": 39,
475 |     "name": "Kristy Ewing",
476 |     "gender": "female",
477 |     "company": "SOFTMICRO",
478 |     "email": "kristyewing@softmicro.com",
479 |     "phone": "+1 (870) 529-2318",
480 |     "address": "599 Lott Avenue, Temperanceville, Vermont, 9394"
481 |   },
482 |   {
483 |     "_id": "60fa9c2d02dd7b640a1044b9",
484 |     "age": 22,
485 |     "name": "Pamela Suarez",
486 |     "gender": "female",
487 |     "company": "PEARLESEX",
488 |     "email": "pamelasuarez@pearlesex.com",
489 |     "phone": "+1 (829) 464-3769",
490 |     "address": "336 Ashford Street, Somerset, Nevada, 4982"
491 |   },
492 |   {
493 |     "_id": "60fa9c2d1326b0ebcfd25b8b",
494 |     "age": 40,
495 |     "name": "Ellis Strickland",
496 |     "gender": "male",
497 |     "company": "EXOTECHNO",
498 |     "email": "ellisstrickland@exotechno.com",
499 |     "phone": "+1 (950) 594-3385",
500 |     "address": "135 Stuart Street, Gouglersville, Nebraska, 2038"
501 |   },
502 |   {
503 |     "_id": "60fa9c2d074369c9cdea6cd4",
504 |     "age": 36,
505 |     "name": "Jeannie Holmes",
506 |     "gender": "female",
507 |     "company": "POOCHIES",
508 |     "email": "jeannieholmes@poochies.com",
509 |     "phone": "+1 (926) 464-2190",
510 |     "address": "172 Tiffany Place, Thornport, Florida, 982"
511 |   },
512 |   {
513 |     "_id": "60fa9c2d6f5b2428325bdd8e",
514 |     "age": 26,
515 |     "name": "Gale Snow",
516 |     "gender": "female",
517 |     "company": "DIGIGEN",
518 |     "email": "galesnow@digigen.com",
519 |     "phone": "+1 (911) 419-3916",
520 |     "address": "146 Whitty Lane, Cawood, Washington, 7929"
521 |   },
522 |   {
523 |     "_id": "60fa9c2d099f3d1a0e4638b3",
524 |     "age": 36,
525 |     "name": "Delaney Horn",
526 |     "gender": "male",
527 |     "company": "MIXERS",
528 |     "email": "delaneyhorn@mixers.com",
529 |     "phone": "+1 (900) 530-2358",
530 |     "address": "579 Melrose Street, Grazierville, Hawaii, 2247"
531 |   },
532 |   {
533 |     "_id": "60fa9c2d6611dedc0d4645eb",
534 |     "age": 32,
535 |     "name": "Booker Noel",
536 |     "gender": "male",
537 |     "company": "BLEEKO",
538 |     "email": "bookernoel@bleeko.com",
539 |     "phone": "+1 (887) 596-3044",
540 |     "address": "677 Garden Street, Franklin, Kansas, 7671"
541 |   },
542 |   {
543 |     "_id": "60fa9c2d8750ad1483bd9067",
544 |     "age": 25,
545 |     "name": "Lorrie Foreman",
546 |     "gender": "female",
547 |     "company": "PAWNAGRA",
548 |     "email": "lorrieforeman@pawnagra.com",
549 |     "phone": "+1 (821) 519-3810",
550 |     "address": "903 Colby Court, Enetai, Illinois, 3421"
551 |   },
552 |   {
553 |     "_id": "60fa9c2d677084192e6d08b9",
554 |     "age": 33,
555 |     "name": "Thomas Osborn",
556 |     "gender": "male",
557 |     "company": "KYAGURU",
558 |     "email": "thomasosborn@kyaguru.com",
559 |     "phone": "+1 (880) 446-3830",
560 |     "address": "109 Vermont Street, Joes, Puerto Rico, 2896"
561 |   },
562 |   {
563 |     "_id": "60fa9c2d7e517176cd77a233",
564 |     "age": 37,
565 |     "name": "Clements Bean",
566 |     "gender": "male",
567 |     "company": "GAZAK",
568 |     "email": "clementsbean@gazak.com",
569 |     "phone": "+1 (974) 564-2733",
570 |     "address": "653 Dewey Place, Kempton, Tennessee, 4506"
571 |   },
572 |   {
573 |     "_id": "60fa9c2da6d289c8dcb2b996",
574 |     "age": 23,
575 |     "name": "Pickett Clarke",
576 |     "gender": "male",
577 |     "company": "KYAGORO",
578 |     "email": "pickettclarke@kyagoro.com",
579 |     "phone": "+1 (907) 494-3423",
580 |     "address": "794 Bennet Court, Weeksville, Arkansas, 115"
581 |   },
582 |   {
583 |     "_id": "60fa9c2d7c498eb73b1d8468",
584 |     "age": 33,
585 |     "name": "Emerson Padilla",
586 |     "gender": "male",
587 |     "company": "INTERGEEK",
588 |     "email": "emersonpadilla@intergeek.com",
589 |     "phone": "+1 (992) 571-3768",
590 |     "address": "379 Albemarle Terrace, Florence, New Hampshire, 6782"
591 |   },
592 |   {
593 |     "_id": "60fa9c2d6e1239b883e88d5c",
594 |     "age": 28,
595 |     "name": "Lindsay Bird",
596 |     "gender": "female",
597 |     "company": "ESCENTA",
598 |     "email": "lindsaybird@escenta.com",
599 |     "phone": "+1 (936) 479-3892",
600 |     "address": "618 Wilson Street, Northridge, Wyoming, 4612"
601 |   },
602 |   {
603 |     "_id": "60fa9c2dcf9a63ec66c6db64",
604 |     "age": 25,
605 |     "name": "Cora Jackson",
606 |     "gender": "female",
607 |     "company": "CAPSCREEN",
608 |     "email": "corajackson@capscreen.com",
609 |     "phone": "+1 (838) 410-2889",
610 |     "address": "940 Downing Street, Belva, South Dakota, 2155"
611 |   },
612 |   {
613 |     "_id": "60fa9c2d02fb72908410c7ec",
614 |     "age": 31,
615 |     "name": "Darla Leon",
616 |     "gender": "female",
617 |     "company": "RAMJOB",
618 |     "email": "darlaleon@ramjob.com",
619 |     "phone": "+1 (859) 505-3915",
620 |     "address": "356 School Lane, Edgewater, Ohio, 329"
621 |   },
622 |   {
623 |     "_id": "60fa9c2d34dcc4f641717e43",
624 |     "age": 23,
625 |     "name": "Townsend Levy",
626 |     "gender": "male",
627 |     "company": "ZAGGLE",
628 |     "email": "townsendlevy@zaggle.com",
629 |     "phone": "+1 (865) 499-2138",
630 |     "address": "295 Pioneer Street, Nutrioso, North Carolina, 5631"
631 |   },
632 |   {
633 |     "_id": "60fa9c2d2caecd2c67d22c5b",
634 |     "age": 24,
635 |     "name": "Mcneil Morgan",
636 |     "gender": "male",
637 |     "company": "ACIUM",
638 |     "email": "mcneilmorgan@acium.com",
639 |     "phone": "+1 (810) 583-3566",
640 |     "address": "164 Throop Avenue, Chesapeake, California, 1867"
641 |   },
642 |   {
643 |     "_id": "60fa9c2d9af6c1d2784507f7",
644 |     "age": 22,
645 |     "name": "Acevedo Ramos",
646 |     "gender": "male",
647 |     "company": "GENMOM",
648 |     "email": "acevedoramos@genmom.com",
649 |     "phone": "+1 (814) 565-3450",
650 |     "address": "839 Ovington Court, Greenbush, Maine, 8734"
651 |   },
652 |   {
653 |     "_id": "60fa9c2d0bfbe68e70460613",
654 |     "age": 24,
655 |     "name": "Parsons Stout",
656 |     "gender": "male",
657 |     "company": "ASIMILINE",
658 |     "email": "parsonsstout@asimiline.com",
659 |     "phone": "+1 (872) 541-3287",
660 |     "address": "595 Franklin Avenue, Gorham, Minnesota, 4899"
661 |   },
662 |   {
663 |     "_id": "60fa9c2deea4d7ec47d984d8",
664 |     "age": 31,
665 |     "name": "Patton Madden",
666 |     "gender": "male",
667 |     "company": "MEDIOT",
668 |     "email": "pattonmadden@mediot.com",
669 |     "phone": "+1 (854) 422-3523",
670 |     "address": "928 Henry Street, Brantleyville, Virginia, 2981"
671 |   },
672 |   {
673 |     "_id": "60fa9c2dc074e9bb667d8fcb",
674 |     "age": 25,
675 |     "name": "Shannon Jacobs",
676 |     "gender": "female",
677 |     "company": "LUNCHPOD",
678 |     "email": "shannonjacobs@lunchpod.com",
679 |     "phone": "+1 (862) 592-2273",
680 |     "address": "525 Veronica Place, Siglerville, Federated States Of Micronesia, 5818"
681 |   },
682 |   {
683 |     "_id": "60fa9c2d05f9f1c33d58f67e",
684 |     "age": 21,
685 |     "name": "Dickerson Dawson",
686 |     "gender": "male",
687 |     "company": "ZOLAREX",
688 |     "email": "dickersondawson@zolarex.com",
689 |     "phone": "+1 (876) 449-3168",
690 |     "address": "105 Montgomery Street, Crucible, Virgin Islands, 7095"
691 |   },
692 |   {
693 |     "_id": "60fa9c2ddf86e22dad1b3d0c",
694 |     "age": 33,
695 |     "name": "Clara Vang",
696 |     "gender": "female",
697 |     "company": "ENTROPIX",
698 |     "email": "claravang@entropix.com",
699 |     "phone": "+1 (899) 485-2958",
700 |     "address": "654 Hicks Street, Stollings, Massachusetts, 6477"
701 |   },
702 |   {
703 |     "_id": "60fa9c2dfdec7feb7ca36d43",
704 |     "age": 26,
705 |     "name": "Serrano Thompson",
706 |     "gender": "male",
707 |     "company": "ADORNICA",
708 |     "email": "serranothompson@adornica.com",
709 |     "phone": "+1 (960) 456-3232",
710 |     "address": "853 Tapscott Street, Hachita, West Virginia, 5099"
711 |   },
712 |   {
713 |     "_id": "60fa9c2d522dc415435f8d8b",
714 |     "age": 35,
715 |     "name": "Bond Craft",
716 |     "gender": "male",
717 |     "company": "ATGEN",
718 |     "email": "bondcraft@atgen.com",
719 |     "phone": "+1 (895) 406-3685",
720 |     "address": "737 Story Street, Canby, Alaska, 1863"
721 |   },
722 |   {
723 |     "_id": "60fa9c2d6517a1840b3b5f06",
724 |     "age": 38,
725 |     "name": "Patsy Leblanc",
726 |     "gender": "female",
727 |     "company": "OLYMPIX",
728 |     "email": "patsyleblanc@olympix.com",
729 |     "phone": "+1 (907) 462-3169",
730 |     "address": "334 Hope Street, Beyerville, Guam, 5171"
731 |   },
732 |   {
733 |     "_id": "60fa9c2d78f64b5f33edc684",
734 |     "age": 25,
735 |     "name": "Kennedy Hull",
736 |     "gender": "male",
737 |     "company": "ENTOGROK",
738 |     "email": "kennedyhull@entogrok.com",
739 |     "phone": "+1 (927) 404-2575",
740 |     "address": "471 Cedar Street, Barstow, Marshall Islands, 3523"
741 |   },
742 |   {
743 |     "_id": "60fa9c2dcd446fb2dcc1466a",
744 |     "age": 26,
745 |     "name": "Wise Cash",
746 |     "gender": "male",
747 |     "company": "HOMETOWN",
748 |     "email": "wisecash@hometown.com",
749 |     "phone": "+1 (967) 423-2303",
750 |     "address": "690 Hamilton Walk, Dunnavant, Utah, 4907"
751 |   }
752 | ];


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <title></title>
  6 |     <style>
  7 |       .border-red {
  8 |         border: 2px dashed red;
  9 |       }
 10 | 
 11 |       .border-green {
 12 |         border: 2px solid green;
 13 |       }
 14 | 
 15 |       .border-default {
 16 |         border-width: 1px;
 17 |         border-color: blue;
 18 |         border-style: solid;
 19 |       }
 20 |     </style>
 21 |   </head>
 22 | 
 23 |   <body>
 24 |     Text:
 25 |     <br />
 26 |     <input type="text" id="text1" onblur="changeBorder();" />
 27 | 
 28 |     <br />
 29 |     Radio(이메일 수신):
 30 |     <br />
 31 |     <label>
 32 |       <input
 33 |         type="radio"
 34 |         name="radio_email_yn"
 35 |         value="Y"
 36 |         onclick="showEmail();"
 37 |       />
 38 |       동의</label
 39 |     >
 40 |     <label>
 41 |       <input
 42 |         type="radio"
 43 |         name="radio_email_yn"
 44 |         value="N"
 45 |         onclick="hideEmail();"
 46 |         checked
 47 |       />
 48 |       거부</label
 49 |     >
 50 |     <div id="divEmail" style="display: none">
 51 |       이메일 <input type="text" id="email" />
 52 |     </div>
 53 |     <br />
 54 |     Select:
 55 |     <br />
 56 |     <select id="select1" onchange="doChange(this);">
 57 |       <option value=""></option>
 58 |       <option value="KO">Korea</option>
 59 |       <option value="CN">China</option>
 60 |       <option value="JP">Japan</option>
 61 |     </select>
 62 |     <select id="select2" style="display: none">
 63 |       <option value="">서울</option>
 64 |       <option value="">부산</option>
 65 |       <option value="">대전</option>
 66 |       <option value="">제주</option>
 67 |     </select>
 68 |     <button type="button" onclick="doSave();">Save</button>
 69 |     <br />
 70 |     <script>
 71 |       function changeBorder() {
 72 |         var text1 = document.getElementById("text1");
 73 |         if (text1.value != "") {
 74 |           text1.className = "border-green";
 75 |         }
 76 |       }
 77 | 
 78 |       function showEmail() {
 79 |         document.getElementById("divEmail").style.display = "";
 80 |       }
 81 | 
 82 |       function hideEmail() {
 83 |         document.getElementById("divEmail").style.display = "none";
 84 |       }
 85 | 
 86 |       function doSave() {
 87 |         var text1 = document.getElementById("text1");
 88 |         if (text1.value == "") {
 89 |           text1.className = "border-red";
 90 |           return alert("필수값들을 입력하세요.");
 91 |         }
 92 | 
 93 |         console.log("doSave 실행합니다.");
 94 |       }
 95 | 
 96 |       function doChange(obj) {
 97 |         if (obj.value == "KO") {
 98 |           document.getElementById("select2").style.display = "";
 99 |         } else {
100 |           document.getElementById("select2").style.display = "none";
101 |         }
102 |       }
103 |     </script>
104 |   </body>
105 | </html>
106 | 


--------------------------------------------------------------------------------