kimbyunsoo
2022.02.23
@kimbyunsoo님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트를 좋아합니다.
ohje7530
2022.02.04
@ohje7530님이
모각코 플러스 자바스크립트, CHAPTER 01
포스트를 좋아합니다.
Codings
2022.02.04
@Codings님이
모각코 플러스 자바스크립트, CHAPTER 01
포스트를 좋아합니다.
jgh0711
2022.01.28
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 15
포스트를 좋아합니다.
klmhyeonwooo
2022.01.28
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 15
포스트를 좋아합니다.
klmhyeonwooo
2022.01.28
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 15
- "챗봇, 최종편" - - 프로그램 결과 출력 화면 - 메인 HTML 코드 <!DOCTYPE html> <html>   <head>     <title> CHAPTER 14 </title>     <link rel="stylesheet" href="./Chap15.css">     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>     <!-- CDN 코드 첨가 -->     <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>   </head>   <body>       <div class = "section1">       <p class="result">챗봇이 이곳으로 대답을 할거예요 ;-)</p>       </div>       <div class= "section2">         <img src="./mImg.jpeg" alt="메인 이미지 확인"                 width="auto" height="300dp">         <p class="check">"h4vebeauty chatbot version -0"</p>       </div>       <div class = "section3">           <input type="text" class="input" name="" value="" placeholder="메세지를 입력해주세요 ;-)">       </div>       <div class = "section4">           <button name="submit" class="btn" type="submit" onclick='submit()'>SUBMIT</button>       </div>       <script src="./Chap15.js"></script>   </body> </html> - 메인 CSS 코드 body {   text-align: center; } .section1 {   width : 300px;   height: 35px;   border-style: solid;   font-size : 11px;   color : #1257BC;   border-radius: 50px;   margin-bottom: 20px;   left : 50%;   margin : 0 auto;   margin-bottom: 20px;   margin-top : 90px; } .section2 {   margin-bottom: -40px; } .section3 {   margin-top: 60px; } .check {   font-size : 11px;   color : #1257BC;   margin-top: 15px; } .input {   width: 400px;   height: 38px;   text-align: center;   border-radius: 50px;   border-style: solid;   font-size : 12px;   border-color : #1257BC;   background-color : transparent: ; } .input:focus {   outline : transparent; } .btn:hover {   background-color : #0F5AC7; } .section4 {   margin-top: 20px; } .btn {   width: 400px;   height: 40px;   border-radius: 50px;   border-style: none;   background-color: #1257BC;   color : white;   font-size : 12px; } - 메인 JAVA SCRIPT 코드 var input = document.getElementsByClassName("input")[0]; var check = document.getElementsByClassName("check")[0]; const statement = document.getElementsByClassName("result")[0]; var check_box = document.getElementsByClassName("section1")[0]; var city_name; let count = 0; // 다크모드, 화이토모드 카운트 값 let weather = 0; // 날씨 API 카운트 값 let key = 0; // 챗봇 말 배우기 카운트 값 let city_value; let weather_value; // json에 필요한 변수 var answer = ""; var question = ""; // CDN 코드 Typewriter 코드 var typewriter = new Typewriter(statement, {     loop: false }); var working = [   {     "question" : "도움말",     "answer" : "도움말을 띄어드릴게요 ;-)"   } ] // 인사말 리스트 var hello = ["안녕하세요! 반가워요 ;-)", "오늘도 좋은 하루예요! 반가워요 ;-)", "안녕하세요! 무엇을 드와드릴까요? ;-)"]; // 초기 상단 메세지 typewriter.typeString('챗봇이 이곳으로 대답을 할거예요 ;-)')     .pauseFor(500)     .start(); // 날씨 코드 값 한글화 코드 function wDescEngToKor(w_id) {   var w_id_arr = [201,200,202,210,211,212,221,230,231,232,   30,301,302,310,311,312,313,314,321,500,   501,502,503,504,511,520,521,522,531,600,   601,602,611,612,615,616,620,621,622,701,   711,721,731,741,751,761,762,771,781,800,   801,802,803,804,900,901,902,903,904,905,   906,951,952,953,954,955,956,957,958,959,   960,961,962];   var w_kor_arr = ["가벼운 비를 동반한 천둥구름","비를 동반한 천둥구름","폭우를 동반한 천둥구름","약한 천둥구름",   "천둥구름","강한 천둥구름","불규칙적 천둥구름","약한 연무를 동반한 천둥구름","연무를 동반한 천둥구름",   "강한 안개비를 동반한 천둥구름","가벼운 안개비","안개비","강한 안개비","가벼운 적은비","적은비",   "강한 적은비","소나기와 안개비","강한 소나기와 안개비","소나기","악한 비","중간 비","강한 비",   "매우 강한 비","극심한 비","우박","약한 소나기 비","소나기 비","강한 소나기 비","불규칙적 소나기 비",   "가벼운 눈","눈","강한 눈","진눈깨비","소나기 진눈깨비","약한 비와 눈","비와 눈","약한 소나기 눈",   "소나기 눈","강한 소나기 눈","박무","연기","연무","모래 먼지","안개","모래","먼지","화산재","돌풍",   "토네이도","구름 한 점 없는 맑은 하늘","약간의 구름이 낀 하늘","드문드문 구름이 낀 하늘","구름이 거의 없는 하늘",   "구름으로 뒤덮인 흐린 하늘","토네이도","태풍","허리케인","한랭","고온","바람부는","우박","바람이 거의 없는",   "약한 바람","부드러운 바람","중간 세기 바람","신선한 바람","센 바람","돌풍에 가까운 센 바람","돌풍",   "심각한 돌풍","폭풍","강한 폭풍","허리케인"];     for(var i=0; i<w_id_arr.length; i++) {       if(w_id_arr[i] == w_id) {           return w_kor_arr[i];         break;       }     }     return "none";   } // 날씨 코드 값 한글화 코드 종료 // 날씨 API 연결 내부 함수 구현 function city(city_value) {   var apiURI = "http://api.openweathermap.org/data/2.5/weather?q="+city_value+"&appid="+"9c1f751188f8e6b495ec3ec109d1c600";           $.ajax({               url: apiURI,               dataType: "json",               type: "GET",               async: "false",               success: function(resp) {                   //console.log("금일 " + city_name + " 날씨는 " + wDescEngToKor(resp.weather[0].id) + "입니다 ;-)");                   //statement.innerHTML = "금일 &quot" + city_name + "&quot 날씨는 " + wDescEngToKor(resp.weather[0].id) + "입니다 ;-)";                   typewriter                       .deleteAll()                       .typeString(wDescEngToKor(resp.weather[0].id))                       .pauseFor(30)                       .start();               }           })         } // 날씨 API 연결 내부 함수 종료 // 버튼 이벤트 함수 시작 function submit() {     if (input.value == "") {       check.style.visibility = "visible";       check.innerHTML = "메세지를 먼저 입력해주세요!";       input.value = "";     }     // value 값이 비어있지 않을 경우, 사용자의 검색 내부 과정     else if (input.value != "") {       // 기본적으로 값을 입력하면 visibility 활성화       // check.style.visibility = "visible";       check.innerHTML = "&quot" + input.value + "&quot" + " 키워드로 검색하신 결과예요 ;-)";       // 홈페이지 입력 시, 결과 값 출력       if (input.value == "홈페이지") {         typewriter             .deleteAll()             .typeString('www.h4vebeauty.com')             .pauseFor(500)             .start();             input.value = "";       }       else if (input.value.replace(/(\s*)/g,"") == "안녕" || input.value.replace(/(\s*)/g,"") == "안녕하세요") {         check.innerHTML = "반가워요, 저는 현우님의 챗봇이에요 ;-)";         typewriter             .deleteAll()             .typeString(hello[Math.floor(Math.random() * hello.length)])             .pauseFor(500)             .start();             input.value = "";       }       // 날씨 관련 입력 시, 결과 값 출력       else if (input.value.replace(/(\s*)/g,"") == "오늘의날씨" || input.value.replace(/(\s*)/g,"") == "날씨") {         check.innerHTML = "오늘의 날씨를 챗봇으로 알려드릴게요, &quot서울 날씨, 용인의 날씨&quot 와 같이 원하는 지역을 검색해주세요!";         weather = 1;         input.value = "";       }       // weater 값이 1로 활성화 되어있을 때, 날씨 정보 제공 조건문                 else if (input.value.replace(/(\s*)/g,"") == "용인의날씨" || input.value.replace(/(\s*)/g,"") == "용인날씨")  {                       if (weather == 1) {                       city_value = 'Yongin';                       city_name = input.value;                       city(city_value);                       input.value = "";                     }                     else {                       check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                       input.value = "";                     }                   }                 //서울특별시                 else if (input.value.replace(/(\s*)/g,"") == "서울의날씨" || input.value.replace(/(\s*)/g,"") == "서울날씨") {                     if (weather == 1) {                       city_value = 'Seoul';                       city_name = input.value;                       city(city_value);                       input.value = "";                     }                     else {                       check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                       input.value = "";                     }                   }                 //인천특별시                 else if (input.value.replace(/(\s*)/g,"") == "인천의날씨" || input.value.replace(/(\s*)/g,"") == "인천날씨") {                     if (weather == 1) {                       city_value = 'Incheon';                       city_name = input.value;                       city(city_value);                       input.value = "";                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                         input.value = "";                       }                   }                   //대전특별시                   else if (input.value.replace(/(\s*)/g,"") == "대전의날씨" || input.value.replace(/(\s*)/g,"") == "대전날씨") {                     if (weather == 1) {                       city_value = 'Daejeon';                       city_name = input.value;                       city(city_value);                       input.value = "";                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                         input.value = "";                       }                     }                   // 대구광역시                   else if (input.value.replace(/(\s*)/g,"") == "대구의날씨" || input.value.replace(/(\s*)/g,"") == "대구날씨") {                     if (weather == 1) {                       city_value = 'Daegu';                       city_name = input.value;                       city(city_value);                       input.value = "";                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                         input.value = "";                       }                     }                     // 울산광역시                     else if (input.value.replace(/(\s*)/g,"") == "울산의날씨" || input.value.replace(/(\s*)/g,"") == "울산날씨") {                       if (weather == 1) {                         city_value = 'Ulsan';                         city_name = input.value;                         city(city_value);                         input.value = "";                         }                         else {                           check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                           input.value = "";                         }                       }                       // 부산광역시                       else if (input.value.replace(/(\s*)/g,"") == "부산의날씨" || input.value.replace(/(\s*)/g,"") == "부산날씨") {                         if (weather == 1) {                           city_value = 'Busan';                           city_name = input.value;                           city(city_value);                           input.value = "";                           }                           else {                             check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                             input.value = "";                           }                         }                         // 광주광역시                         else if (input.value.replace(/(\s*)/g,"") == "광주의날씨" || input.value.replace(/(\s*)/g,"") == "광주날씨") {                           if (weather == 1) {                             city_value = 'Gwangju';                             city_name = input.value;                             city(city_value);                             input.value = "";                             }                             else {                               check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                               input.value = "";                             }                           }                           // 세종자치특별시                           else if (input.value.replace(/(\s*)/g,"") == "세종의날씨" || input.value.replace(/(\s*)/g,"") == "세종날씨") {                             if (weather == 1) {                               city_value = 'Sejong';                               city_name = input.value;                               city(city_value);                               input.value = "";                               }                               else {                                 check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                                 input.value = "";                               }                             }                             // 제주특별자치도                             else if (input.value.replace(/(\s*)/g,"") == "제주의날씨" || input.value.replace(/(\s*)/g,"") == "제주날씨") {                               if (weather == 1) {                                 city_value = 'Jeju';                                 city_name = input.value;                                 city(city_value);                                 input.value = "";                                 }                                 else {                                   check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                                   input.value = "";                                 }                               }             // 블랙모드             else if (input.value.replace(/(\s*)/g,"") == "다크모드" || input.value == "눈이 너무 아픈데?") {               if (count == 0) {                 check.innerHTML = "다크모드로 전환을 해드렸어요 ;-)";                 document.body.style.backgroundColor = "#212121";                 check.style.color = "white";                 check_box.style.borderColor = "white";                 statement.style.color = "white";                 input.style.color = "white";                 input.style.background = "transparent";                 input.style.borderColor = "white";                 input.style.transition = "all 0.4s";                 check.style.transition = "all 0.4s";                 check_box.style.transition = "all 0.4s";                 document.body.style.transition = "all 0.4s";                 count = 1;                 input.value = "";               }               else if (count == 1) {                 check.innerHTML = "현재 상태가 다크모드예요 ;-)";                 input.value = "";               }             }             // 블랙모드 종료             // 화이트모드             else if (input.value.replace(/(\s*)/g,"") == "화이트모드") {               if (count == 1) {                 check.innerHTML = "화이트모드로 전환을 해드렸어요 ;-)";                 document.body.style.backgroundColor = "white";                 check.style.color = "#1257BC";                 check_box.style.borderColor = "#1257BC";                 statement.style.color = "#1257BC";                 input.style.color = "#1257BC";                 input.style.background = "transparent";                 input.style.borderColor = "#1257BC";                 input.style.transition = "all 0.4s";                 check.style.transition = "all 0.4s";                 check_box.style.transition = "all 0.4s";                 document.body.style.transition = "all 0.4s";                 count = 0;                 input.value = "";               }               else if (count == 0) {                 check.innerHTML = "현재 상태가 화이트모드예요 ;-)";                 input.value = "";               }             }             // 화이트모드 종료             // 챗봇이 알아듣지 못 할 경우             else {               // json 데이터와 사용자가 입력 값이 일치하는지 확인               for (let i=0; i<working.length; i++) {                 if (input.value.replace(/(\s*)/g,"") == working[i].question) {                   if (input.value.replace(/(\s*)/g,"") == "도움말") {                     check.innerHTML = "현재 서비스 되고있는 기능은 날씨 기능이예요, 현재 챗봇은 말을 계속해서 배우고 있답니다 ;-)";                   }                   typewriter                       .deleteAll()                       .typeString(working[i].answer)                       .pauseFor(30)                       .start();                   return;                 }               }               // key값 1일 경우에 조건문 실행               if (key == 1) {                     if (input.value.replace(/(\s*)/g,"") == "YES" || input.value.replace(/(\s*)/g,"") == "yes") {                       typewriter                           .deleteAll(30)                           .start();                       check.innerHTML = "&quot" + question + "&quot 키워드에 대한 대답을 입력해주세요, 다음부터 알려드릴게요 ;-)";                       input.value = "";                       key = 2;                       input.value = "";                     }                     // key 값이 1일때, 부정의 답을 들으면 초기화면으로                     else if (input.value.replace(/(\s*)/g,"") == "NO" || input.value.replace(/(\s*)/g,"") == "no") {                       answer = "";                       typewriter                           .deleteAll(30)                           .typeString('챗봇이 이곳으로 대답을 할거예요 ;-)')                           .pauseFor(500)                           .start();                       check.innerHTML = "초기화면으로 돌아왔어요 ;-)";                       key = 0;                       input.value = "";                     }                     else {                       check.innerHTML = "잘못 입력을 하셨어요, 초기화면으로 돌아왔어요 :-)";                       key = 0;                       typewriter                           .deleteAll(30)                           .typeString("챗봇이 이곳으로 대답을 할거예요 ;-)")                           .pauseFor(30)                           .start();                       input.value = "";                     }               }               else if (key == 2) {                 answer = input.value;                 working.push({question: question, answer: answer});                 check.innerHTML = "챗봇이 새로운 말을 터득하였습니다 ;-)";                 key = 0;                 typewriter                     .deleteAll(30)                     .typeString("챗봇이 이곳으로 대답을 할거예요 ;-)")                     .pauseFor(30)                     .start();                     input.value = "";               }               // key값 0일 경우에 조건문 실행, default 값               else if (key == 0) {               // json 데이터 및 기존 데이터에 일치하는 값이 없는 경우 실행하는 코드               check.innerHTML = "챗봇이 아직 &quot" + input.value + "&quot 키워드에 대한 대답을 몰라요, 알려주시겠어요?";               question = input.value.replace(/(\s*)/g,"");               key = 1;               typewriter                   .deleteAll(30)                   .typeString("YES 또는 NO로 대답을 할 수 있어요!")                   .pauseFor(30)                   .start();               input.value = "";               }             }       }       // value 값이 비어있지 않을 경우, 사용자의 검색 내부 과정 종료   }   // 버튼 이벤트 함수 종료 - 코드 리뷰 : 짧지도 길지도 않는 15일의 여정 동안 참 많은 것들을 배웠습니다. 앗, 구글링하면서도 많이 배웠네요 ;-) 다음 모각코 과정에서는 어떤 것을 도전할 지는 잘 모르겠지만, 너무너무 의미있는 시간이었습니다! 모두들 이번 모각코 과정 잘 수료하셨으면 좋겠고, 오늘도 너무 수고하셨고 행복한 하루 되세요 😘
jgh0711
2022.01.27
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 14
포스트를 좋아합니다.
klmhyeonwooo
2022.01.27
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 14
포스트를 좋아합니다.
klmhyeonwooo
2022.01.27
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 14
챗봇이 예뻐졌습니다 ;-) - CDN을 이 맛에 쓰는거군요,, 단조롭던 챗봇이 예뻐진 느낌이 물씬 풍깁니다! 저번 챗봇과 비교하여 업데이트 된 부분은 다음과 같습니다. CDN 애니메이션 동작 추가 및 사용자 접근성 향상 조건문으로 설계된 부분에 사용자의 정상적인 동작을 위해 공백은 다 제거 - - 프로그램 결과 출력 화면 - 메인 HTML 코드 <!DOCTYPE html> <html>   <head>     <title> CHAPTER 14 </title>     <link rel="stylesheet" href="./Chap14.css">     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>     <!-- CDN 코드 첨가 -->     <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>   </head>   <body>       <div class = "section1">       <p class="result">챗봇이 이곳으로 대답을 할거예요 ;-)</p>       </div>       <div class= "section2">         <img src="./mImg.jpeg" alt="메인 이미지 확인"                 width="auto" height="300dp">         <p class="check">"h4vebeauty version -0"</p>       </div>       <div class = "section3">           <input type="text" class="input" name="" value="" placeholder="메세지를 입력해주세요 ;-)">       </div>       <div class = "section4">           <button name="submit" class="btn" type="submit" onclick='submit()'>SUBMIT</button>       </div>       <script src="./Chap14.js"></script>   </body> </html> - 메인 CSS 코드 body {   text-align: center; } .section1 {   width : 300px;   height: 35px;   border-style: solid;   font-size : 11px;   color : #1257BC;   border-radius: 50px;   margin-bottom: 20px;   left : 50%;   margin : 0 auto;   margin-bottom: 20px;   margin-top : 20px; } .section2 {   margin-bottom: -40px; } .section3 {   margin-top: 60px; } .check {   font-size : 11px;   color : #1257BC;   visibility : hidden;   margin-top: 15px; } .input {   width: 400px;   height: 40px;   text-align: center;   border-radius: 50px;   border-style: solid;   font-size : 12px;   border-color : #1257BC;   background-color : transparent: ; } .input:focus {   outline : transparent; } .btn:hover {   background-color : #0F5AC7; } .section4 {   margin-top: 20px; } .btn {   width: 400px;   height: 40px;   border-radius: 50px;   border-style: none;   background-color: #1257BC;   color : white;   font-size : 12px; } - 메인 JAVA SCRIPT 코드 var input = document.getElementsByClassName("input")[0]; var check = document.getElementsByClassName("check")[0]; const statement = document.getElementsByClassName("result")[0]; var check_box = document.getElementsByClassName("section1")[0]; var city_name; let count = 0; let weather = 0; let city_value; let weather_value; // CDN 코드 Typewriter 코드 var typewriter = new Typewriter(statement, {     loop: false }); var hello = ["안녕하세요! 반가워요 ;-)", "오늘도 좋은 하루예요! 반가워요 ;-)", "안녕하세요! 무엇을 드와드릴까요? ;-)"]; // 날씨 데이터 정렬 코드 //var w_id_arr = [201,200,202,210,211,212,221,230,231,232, //300,301,302,310,311,312,313,314,321,500, //501,502,503,504,511,520,521,522,531,600, //601,602,611,612,615,616,620,621,622,701, //711,721,731,741,751,761,762,771,781,800, //801,802,803,804,900,901,902,903,904,905, //906,951,952,953,954,955,956,957,958,959, //960,961,962]; //var w_kor_arr = ["가벼운 비를 동반한 천둥구름","비를 동반한 천둥구름","폭우를 동반한 천둥구름","약한 천둥구름", //"천둥구름","강한 천둥구름","불규칙적 천둥구름","약한 연무를 동반한 천둥구름","연무를 동반한 천둥구름", //"강한 안개비를 동반한 천둥구름","가벼운 안개비","안개비","강한 안개비","가벼운 적은비","적은비", //"강한 적은비","소나기와 안개비","강한 소나기와 안개비","소나기","악한 비","중간 비","강한 비", //"매우 강한 비","극심한 비","우박","약한 소나기 비","소나기 비","강한 소나기 비","불규칙적 소나기 비", //"가벼운 눈","눈","강한 눈","진눈깨비","소나기 진눈깨비","약한 비와 눈","비와 눈","약한 소나기 눈", //"소나기 눈","강한 소나기 눈","박무","연기","연무","모래 먼지","안개","모래","먼지","화산재","돌풍", //"토네이도","구름 한 점 없는 맑은 하늘","약간의 구름이 낀 하늘","드문드문 구름이 낀 하늘","구름이 거의 없는 하늘", //"구름으로 뒤덮인 흐린 하늘","토네이도","태풍","허리케인","한랭","고온","바람부는","우박","바람이 거의 없는", //"약한 바람","부드러운 바람","중간 세기 바람","신선한 바람","센 바람","돌풍에 가까운 센 바람","돌풍", //"심각한 돌풍","폭풍","강한 폭풍","허리케인"]; //var apiURI = "http://api.openweathermap.org/data/2.5/weather?q="+"jeju"+"&appid="+"9c1f751188f8e6b495ec3ec109d1c600"; //        $.ajax({ //            url: apiURI, //            dataType: "json", //            type: "GET", //            async: "false", //            success: function(resp) { //                console.log(resp);                 // console.log("현재온도 : "+ (resp.main.temp- 273.15) );                 // console.log("현재습도 : "+ resp.main.humidity); //                console.log("날씨 : "+ resp.weather[0].main ); //                console.log("상세날씨설명 : "+ resp.weather[0].id); //                resp.weather[0].description                 // console.log("바람   : "+ resp.wind.speed );                 // console.log("나라   : "+ resp.sys.country ); //                console.log("도시이름  : "+ resp.name );                 // console.log("구름  : "+ (resp.clouds.all) +"%" ); //            } //        }) // 초기 상단 메세지 typewriter.typeString('챗봇이 이곳으로 대답을 할거예요 ;-)')     .pauseFor(500)     .start(); // 날씨 코드 값 한글화 코드 function wDescEngToKor(w_id) {   var w_id_arr = [201,200,202,210,211,212,221,230,231,232,   300,301,302,310,311,312,313,314,321,500,   501,502,503,504,511,520,521,522,531,600,   601,602,611,612,615,616,620,621,622,701,   711,721,731,741,751,761,762,771,781,800,   801,802,803,804,900,901,902,903,904,905,   906,951,952,953,954,955,956,957,958,959,   960,961,962];   var w_kor_arr = ["가벼운 비를 동반한 천둥구름","비를 동반한 천둥구름","폭우를 동반한 천둥구름","약한 천둥구름",   "천둥구름","강한 천둥구름","불규칙적 천둥구름","약한 연무를 동반한 천둥구름","연무를 동반한 천둥구름",   "강한 안개비를 동반한 천둥구름","가벼운 안개비","안개비","강한 안개비","가벼운 적은비","적은비",   "강한 적은비","소나기와 안개비","강한 소나기와 안개비","소나기","악한 비","중간 비","강한 비",   "매우 강한 비","극심한 비","우박","약한 소나기 비","소나기 비","강한 소나기 비","불규칙적 소나기 비",   "가벼운 눈","눈","강한 눈","진눈깨비","소나기 진눈깨비","약한 비와 눈","비와 눈","약한 소나기 눈",   "소나기 눈","강한 소나기 눈","박무","연기","연무","모래 먼지","안개","모래","먼지","화산재","돌풍",   "토네이도","구름 한 점 없는 맑은 하늘","약간의 구름이 낀 하늘","드문드문 구름이 낀 하늘","구름이 거의 없는 하늘",   "구름으로 뒤덮인 흐린 하늘","토네이도","태풍","허리케인","한랭","고온","바람부는","우박","바람이 거의 없는",   "약한 바람","부드러운 바람","중간 세기 바람","신선한 바람","센 바람","돌풍에 가까운 센 바람","돌풍",   "심각한 돌풍","폭풍","강한 폭풍","허리케인"];     for(var i=0; i<w_id_arr.length; i++) {       if(w_id_arr[i] == w_id) {           return w_kor_arr[i];         break;       }     }     return "none";   } // 날씨 코드 값 한글화 코드 종료 // 날씨 API 연결 내부 함수 구현 function city(city_value) {   var apiURI = "http://api.openweathermap.org/data/2.5/weather?q="+city_value+"&appid="+"9c1f751188f8e6b495ec3ec109d1c600";           $.ajax({               url: apiURI,               dataType: "json",               type: "GET",               async: "false",               success: function(resp) {                   //console.log("금일 " + city_name + " 날씨는 " + wDescEngToKor(resp.weather[0].id) + "입니다 ;-)");                   //statement.innerHTML = "금일 &quot" + city_name + "&quot 날씨는 " + wDescEngToKor(resp.weather[0].id) + "입니다 ;-)";                   typewriter                       .deleteAll()                       .typeString(wDescEngToKor(resp.weather[0].id))                       .pauseFor(300)                       .start();               }           })         } // 날씨 API 연결 내부 함수 종료 // 버튼 이벤트 함수 시작 function submit() {     if (input.value == "") {       check.style.visibility = "visible";       check.innerHTML = "메세지를 먼저 입력해주세요!";       input.value = "";     }     // value 값이 비어있지 않을 경우, 사용자의 검색 내부 과정     else if (input.value != "") {       // 기본적으로 값을 입력하면 visibility 활성화       check.style.visibility = "visible";       check.innerHTML = "&quot" + input.value + "&quot" + " 키워드로 검색하신 결과예요 ;-)";       // 홈페이지 입력 시, 결과 값 출력       if (input.value == "홈페이지") {         typewriter             .deleteAll()             .typeString('www.h4vebeauty.com')             .pauseFor(500)             .start();             input.value = "";       }       else if (input.value.replace(/(\s*)/g,"") == "안녕" || input.value.replace(/(\s*)/g,"") == "안녕하세요") {         check.innerHTML = "반가워요, 저는 현우님의 챗봇이에요 ;-)";         typewriter             .deleteAll()             .typeString(hello[Math.floor(Math.random() * hello.length)])             .pauseFor(500)             .start();             input.value = "";       }       // 날씨 관련 입력 시, 결과 값 출력       else if (input.value.replace(/(\s*)/g,"") == "오늘의날씨" || input.value.replace(/(\s*)/g,"") == "날씨") {         check.innerHTML = "오늘의 날씨를 챗봇으로 알려드릴게요, &quot서울 날씨, 용인의 날씨&quot 와 같이 원하는 지역을 검색해주세요!";         weather = 1;         input.value = "";       }       // weater 값이 1로 활성화 되어있을 때, 날씨 정보 제공 조건문                 else if (input.value.replace(/(\s*)/g,"") == "용인의날씨" || input.value.replace(/(\s*)/g,"") == "용인날씨")  {                       if (weather == 1) {                       city_value = 'Yongin';                       city_name = input.value;                       city(city_value);                       input.value = "";                     }                     else {                       check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                       input.value = "";                     }                   }                 //서울특별시                 else if (input.value.replace(/(\s*)/g,"") == "서울의날씨" || input.value.replace(/(\s*)/g,"") == "서울날씨") {                     if (weather == 1) {                       city_value = 'Seoul';                       city_name = input.value;                       city(city_value);                       input.value = "";                     }                     else {                       check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                       input.value = "";                     }                   }                 //인천특별시                 else if (input.value.replace(/(\s*)/g,"") == "인천의날씨" || input.value.replace(/(\s*)/g,"") == "인천날씨") {                     if (weather == 1) {                       city_value = 'Incheon';                       city_name = input.value;                       city(city_value);                       input.value = "";                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                         input.value = "";                       }                   }                   //대전특별시                   else if (input.value.replace(/(\s*)/g,"") == "대전의날씨" || input.value.replace(/(\s*)/g,"") == "대전날씨") {                     if (weather == 1) {                       city_value = 'Daejeon';                       city_name = input.value;                       city(city_value);                       input.value = "";                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                         input.value = "";                       }                     }                   // 대구광역시                   else if (input.value.replace(/(\s*)/g,"") == "대구의날씨" || input.value.replace(/(\s*)/g,"") == "대구날씨") {                     if (weather == 1) {                       city_value = 'Daegu';                       city_name = input.value;                       city(city_value);                       input.value = "";                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                         input.value = "";                       }                     }                     // 울산광역시                     else if (input.value.replace(/(\s*)/g,"") == "울산의날씨" || input.value.replace(/(\s*)/g,"") == "울산날씨") {                       if (weather == 1) {                         city_value = 'Ulsan';                         city_name = input.value;                         city(city_value);                         input.value = "";                         }                         else {                           check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                           input.value = "";                         }                       }                       // 부산광역시                       else if (input.value.replace(/(\s*)/g,"") == "부산의날씨" || input.value.replace(/(\s*)/g,"") == "부산날씨") {                         if (weather == 1) {                           city_value = 'Busan';                           city_name = input.value;                           city(city_value);                           input.value = "";                           }                           else {                             check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                             input.value = "";                           }                         }                         // 광주광역시                         else if (input.value.replace(/(\s*)/g,"") == "광주의날씨" || input.value.replace(/(\s*)/g,"") == "광주날씨") {                           if (weather == 1) {                             city_value = 'Gwangju';                             city_name = input.value;                             city(city_value);                             input.value = "";                             }                             else {                               check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                               input.value = "";                             }                           }                           // 세종자치특별시                           else if (input.value.replace(/(\s*)/g,"") == "세종의날씨" || input.value.replace(/(\s*)/g,"") == "세종날씨") {                             if (weather == 1) {                               city_value = 'Sejong';                               city_name = input.value;                               city(city_value);                               input.value = "";                               }                               else {                                 check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                                 input.value = "";                               }                             }                             // 제주특별자치도                             else if (input.value.replace(/(\s*)/g,"") == "제주의날씨" || input.value.replace(/(\s*)/g,"") == "제주날씨") {                               if (weather == 1) {                                 city_value = 'Jeju';                                 city_name = input.value;                                 city(city_value);                                 input.value = "";                                 }                                 else {                                   check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                                   input.value = "";                                 }                               }             // 블랙모드             else if (input.value.replace(/(\s*)/g,"") == "다크모드" || input.value == "눈이 너무 아픈데?") {               if (count == 0) {                 check.innerHTML = "다크모드로 전환을 해드렸어요 ;-)";                 document.body.style.backgroundColor = "#212121";                 check.style.color = "white";                 check_box.style.borderColor = "white";                 statement.style.color = "white";                 input.style.color = "white";                 input.style.background = "transparent";                 input.style.borderColor = "white";                 input.style.transition = "all 0.4s";                 check.style.transition = "all 0.4s";                 check_box.style.transition = "all 0.4s";                 document.body.style.transition = "all 0.4s";                 count = 1;                 input.value = "";               }               else if (count == 1) {                 check.innerHTML = "현재 상태가 다크모드예요 ;-)";                 input.value = "";               }             }             // 블랙모드 종료             // 화이트모드             else if (input.value.replace(/(\s*)/g,"") == "화이트모드") {               if (count == 1) {                 check.innerHTML = "화이트모드로 전환을 해드렸어요 ;-)";                 document.body.style.backgroundColor = "white";                 check.style.color = "#1257BC";                 check_box.style.borderColor = "#1257BC";                 statement.style.color = "#1257BC";                 input.style.color = "#1257BC";                 input.style.background = "transparent";                 input.style.borderColor = "#1257BC";                 input.style.transition = "all 0.4s";                 check.style.transition = "all 0.4s";                 check_box.style.transition = "all 0.4s";                 document.body.style.transition = "all 0.4s";                 count = 0;                 input.value = "";               }               else if (count == 0) {                 check.innerHTML = "현재 상태가 화이트모드예요 ;-)";                 input.value = "";               }             }             // 화이트모드 종료             else {               check.innerHTML = "해당 서비스는 준비중이예요!";               input.value = "";             }       }       // value 값이 비어있지 않을 경우, 사용자의 검색 내부 과정 종료   }   // 버튼 이벤트 함수 종료
klmhyeonwooo
2022.01.27
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 13
포스트에 댓글을 남겼습니다.
heimish
2022.01.27
@heimish님이
모각코 플러스 자바스크립트, CHAPTER 13
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.26
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 13
포스트를 좋아합니다.
klmhyeonwooo
2022.01.26
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 13
현재까지 제작한 기본적인 기능의 챗봇 + 날씨 API 탑재 - 오늘은 챕터 12에서 다룬 챗봇을 조금 더 다듬어 보았습니다. 날씨 API를 첨가하여, 사용자가 날씨정보를 물어보았을 때 해당 지역 예보를 출력해주고, 조금 더 부드럽게 사용자가 접근할 수 있도록 UX 측면도 고려해보았습니다. 아직은 배움이 있는 챗봇이 아니라서, 인위적인 면이 있지만 나름 자연스럽ㄷ,, 도록,, - - 프로그램 결과 출력 화면 - 메인 HTML 코드 <!DOCTYPE html> <html>   <head>     <title> CHAPTER 13 </title>     <link rel="stylesheet" href="./Chap13.css">     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>   </head>   <body>       <div class = "section1">       <p class="result">메세지가 여기에 출력됩니다!</p>       </div>       <div class= "section2">         <img src="./mImg.jpeg" alt="메인 이미지 확인"                 width="auto" height="300dp">         <p class="check">TEST</p>       </div>       <div class = "section3">           <input type="text" class="input" name="" value="" placeholder="메세지를 입력해주세요 ;-)">       </div>       <div class = "section4">           <button name="submit" class="btn" type="submit" onclick='submit()'>SUBMIT</button>       </div>       <script src="./Chap13.js"></script>   </body> </html> - 메인 CSS 코드 body {   text-align: center; } .section1 {   width : 300px;   height: 35px;   border-style: solid;   font-size : 11px;   color : #1257BC;   border-radius: 50px;   margin-bottom: 20px;   left : 50%;   margin : 0 auto;   margin-bottom: 20px;   margin-top : 20px; } .section2 {   margin-bottom: -40px; } .section3 {   margin-top: 60px; } .check {   font-size : 11px;   color : #1257BC;   visibility : hidden;   margin-top: 15px; } .input {   width: 400px;   height: 40px;   text-align: center;   border-radius: 50px;   border-style: solid;   font-size : 12px;   border-color : #1257BC;   background-color : transparent: ; } .input:focus {   outline : transparent; } .btn:hover {   background-color : #0F5AC7; } .section4 {   margin-top: 20px; } .btn {   width: 400px;   height: 40px;   border-radius: 50px;   border-style: none;   background-color: #1257BC;   color : white;   font-size : 12px; } - 메인 JAVA SCRIPT 코드 var input = document.getElementsByClassName("input")[0]; var check = document.getElementsByClassName("check")[0]; const statement = document.getElementsByClassName("result")[0]; var check_box = document.getElementsByClassName("section1")[0]; var city_name; let count = 0; let weather = 0; let city_value; let weather_value; // 날씨 데이터 정렬 코드 //var w_id_arr = [201,200,202,210,211,212,221,230,231,232, //300,301,302,310,311,312,313,314,321,500, //501,502,503,504,511,520,521,522,531,600, //601,602,611,612,615,616,620,621,622,701, //711,721,731,741,751,761,762,771,781,800, //801,802,803,804,900,901,902,903,904,905, //906,951,952,953,954,955,956,957,958,959, //960,961,962]; //var w_kor_arr = ["가벼운 비를 동반한 천둥구름","비를 동반한 천둥구름","폭우를 동반한 천둥구름","약한 천둥구름", //"천둥구름","강한 천둥구름","불규칙적 천둥구름","약한 연무를 동반한 천둥구름","연무를 동반한 천둥구름", //"강한 안개비를 동반한 천둥구름","가벼운 안개비","안개비","강한 안개비","가벼운 적은비","적은비", //"강한 적은비","소나기와 안개비","강한 소나기와 안개비","소나기","악한 비","중간 비","강한 비", //"매우 강한 비","극심한 비","우박","약한 소나기 비","소나기 비","강한 소나기 비","불규칙적 소나기 비", //"가벼운 눈","눈","강한 눈","진눈깨비","소나기 진눈깨비","약한 비와 눈","비와 눈","약한 소나기 눈", //"소나기 눈","강한 소나기 눈","박무","연기","연무","모래 먼지","안개","모래","먼지","화산재","돌풍", //"토네이도","구름 한 점 없는 맑은 하늘","약간의 구름이 낀 하늘","드문드문 구름이 낀 하늘","구름이 거의 없는 하늘", //"구름으로 뒤덮인 흐린 하늘","토네이도","태풍","허리케인","한랭","고온","바람부는","우박","바람이 거의 없는", //"약한 바람","부드러운 바람","중간 세기 바람","신선한 바람","센 바람","돌풍에 가까운 센 바람","돌풍", //"심각한 돌풍","폭풍","강한 폭풍","허리케인"]; //var apiURI = "http://api.openweathermap.org/data/2.5/weather?q="+"jeju"+"&appid="+"9c1f751188f8e6b495ec3ec109d1c600"; //        $.ajax({ //            url: apiURI, //            dataType: "json", //            type: "GET", //            async: "false", //            success: function(resp) { //                console.log(resp);                 // console.log("현재온도 : "+ (resp.main.temp- 273.15) );                 // console.log("현재습도 : "+ resp.main.humidity); //                console.log("날씨 : "+ resp.weather[0].main ); //                console.log("상세날씨설명 : "+ resp.weather[0].id); //                resp.weather[0].description                 // console.log("바람   : "+ resp.wind.speed );                 // console.log("나라   : "+ resp.sys.country ); //                console.log("도시이름  : "+ resp.name );                 // console.log("구름  : "+ (resp.clouds.all) +"%" ); //            } //        }) // 날씨 코드 값 한글화 코드 function wDescEngToKor(w_id) {   var w_id_arr = [201,200,202,210,211,212,221,230,231,232,   300,301,302,310,311,312,313,314,321,500,   501,502,503,504,511,520,521,522,531,600,   601,602,611,612,615,616,620,621,622,701,   711,721,731,741,751,761,762,771,781,800,   801,802,803,804,900,901,902,903,904,905,   906,951,952,953,954,955,956,957,958,959,   960,961,962];   var w_kor_arr = ["가벼운 비를 동반한 천둥구름","비를 동반한 천둥구름","폭우를 동반한 천둥구름","약한 천둥구름",   "천둥구름","강한 천둥구름","불규칙적 천둥구름","약한 연무를 동반한 천둥구름","연무를 동반한 천둥구름",   "강한 안개비를 동반한 천둥구름","가벼운 안개비","안개비","강한 안개비","가벼운 적은비","적은비",   "강한 적은비","소나기와 안개비","강한 소나기와 안개비","소나기","악한 비","중간 비","강한 비",   "매우 강한 비","극심한 비","우박","약한 소나기 비","소나기 비","강한 소나기 비","불규칙적 소나기 비",   "가벼운 눈","눈","강한 눈","진눈깨비","소나기 진눈깨비","약한 비와 눈","비와 눈","약한 소나기 눈",   "소나기 눈","강한 소나기 눈","박무","연기","연무","모래 먼지","안개","모래","먼지","화산재","돌풍",   "토네이도","구름 한 점 없는 맑은 하늘","약간의 구름이 낀 하늘","드문드문 구름이 낀 하늘","구름이 거의 없는 하늘",   "구름으로 뒤덮인 흐린 하늘","토네이도","태풍","허리케인","한랭","고온","바람부는","우박","바람이 거의 없는",   "약한 바람","부드러운 바람","중간 세기 바람","신선한 바람","센 바람","돌풍에 가까운 센 바람","돌풍",   "심각한 돌풍","폭풍","강한 폭풍","허리케인"];     for(var i=0; i<w_id_arr.length; i++) {       if(w_id_arr[i] == w_id) {           return w_kor_arr[i];         break;       }     }     return "none";   } // 날씨 코드 값 한글화 코드 종료 // 날씨 API 연결 내부 함수 구현 function city(city_value) {   var apiURI = "http://api.openweathermap.org/data/2.5/weather?q="+city_value+"&appid="+"9c1f751188f8e6b495ec3ec109d1c600";           $.ajax({               url: apiURI,               dataType: "json",               type: "GET",               async: "false",               success: function(resp) {                   //console.log("금일 " + city_name + " 날씨는 " + wDescEngToKor(resp.weather[0].id) + "입니다 ;-)");                   statement.innerHTML = "금일 &quot" + city_name + "&quot 날씨는 " + wDescEngToKor(resp.weather[0].id) + "입니다 ;-)";               }           })         } // 날씨 API 연결 내부 함수 종료 // 버튼 이벤트 함수 시작 function submit() {     if (input.value == "") {       check.style.visibility = "visible";       check.innerHTML = "메세지를 먼저 입력해주세요!";       statement.innerHTML = "메세지가 여기에 출력됩니다!";     }     // value 값이 비어있지 않을 경우, 사용자의 검색 내부 과정     else if (input.value != "") {       // 기본적으로 값을 입력하면 visibility 활성화       check.style.visibility = "visible";       check.innerHTML = "&quot" + input.value + "&quot" + " 키워드로 검색하신 결과예요 ;-)";       // 홈페이지 입력 시, 결과 값 출력       if (input.value == "홈페이지") {         statement.innerHTML = "www.h4vebeauty.com";       }       // 날씨 관련 입력 시, 결과 값 출력       else if (input.value == "오늘의 날씨" || input.value == "날씨") {         check.innerHTML = "오늘의 날씨를 챗봇으로 알려드릴게요, 원하는 지역을 검색해주세요! <br> 챗봇에서는 &quot서울의 날씨, 용인의 날씨&quot와 같이 검색할 수 있어요!";         weather = 1;       }       // weater 값이 1로 활성화 되어있을 때, 날씨 정보 제공 조건문                 else if (input.value == "용인의 날씨")  {                       if (weather == 1) {                       city_value = 'Yongin';                       city_name = input.value;                       city(city_value);                     }                     else {                       check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                     }                   }                 //서울특별시                 else if (input.value == "서울의 날씨") {                     if (weather == 1) {                       city_value = 'Seoul';                       city_name = input.value;                       city(city_value);                     }                     else {                       check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                     }                   }                 //인천특별시                 else if (input.value == "인천의 날씨") {                     if (weather == 1) {                       city_value = 'Incheon';                       city_name = input.value;                       city(city_value);                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                       }                   }                   //대전특별시                   else if (input.value == "대전의 날씨") {                     if (weather == 1) {                       city_value = 'Daejeon';                       city_name = input.value;                       city(city_value);                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                       }                     }                   // 대구광역시                   else if (input.value == "대구의 날씨") {                     if (weather == 1) {                       city_value = 'Daegu';                       city_name = input.value;                       city(city_value);                       }                       else {                         check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                       }                     }                     // 울산광역시                     else if (input.value == "울산의 날씨") {                       if (weather == 1) {                         city_value = 'Ulsan';                         city_name = input.value;                         city(city_value);                         }                         else {                           check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                         }                       }                       // 부산광역시                       else if (input.value == "부산의 날씨") {                         if (weather == 1) {                           city_value = 'Busan';                           city_name = input.value;                           city(city_value);                           }                           else {                             check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                           }                         }                         // 광주광역시                         else if (input.value == "광주의 날씨") {                           if (weather == 1) {                             city_value = 'Gwangju';                             city_name = input.value;                             city(city_value);                             }                             else {                               check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                             }                           }                           // 세종자치특별시                           else if (input.value == "세종의 날씨") {                             if (weather == 1) {                               city_value = 'Sejong';                               city_name = input.value;                               city(city_value);                               }                               else {                                 check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                               }                             }                             // 제주특별자치도                             else if (input.value == "제주의 날씨") {                               if (weather == 1) {                                 city_value = 'Jeju';                                 city_name = input.value;                                 city(city_value);                                 }                                 else {                                   check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 &quot오늘의 날씨&quot 라고 입력해보세요 ;-)";                                 }                               }             // 블랙모드             else if (input.value == "다크모드" || input.value == "눈이 너무 아픈데?") {               if (count == 0) {               statement.innerHTML = "메세지가 여기에 출력됩니다!";                 check.innerHTML = "다크모드로 전환을 해드렸어요 ;-)";                 document.body.style.backgroundColor = "#212121";                 check.style.color = "white";                 check_box.style.borderColor = "white";                 statement.style.color = "white";                 input.style.color = "white";                 input.style.background = "transparent";                 input.style.borderColor = "white";                 input.style.transition = "all 0.4s";                 check.style.transition = "all 0.4s";                 check_box.style.transition = "all 0.4s";                 document.body.style.transition = "all 0.4s";                 count = 1;               }               else if (count == 1) {                 check.innerHTML = "현재 상태가 다크모드예요 ;-)";               }             }             // 블랙모드 종료             // 화이트모드             else if (input.value == "화이트모드") {               if (count == 1) {                 statement.innerHTML = "메세지가 여기에 출력됩니다!";                 check.innerHTML = "화이트모드로 전환을 해드렸어요 ;-)";                 document.body.style.backgroundColor = "white";                 check.style.color = "#1257BC";                 check_box.style.borderColor = "#1257BC";                 statement.style.color = "#1257BC";                 input.style.color = "#1257BC";                 input.style.background = "transparent";                 input.style.borderColor = "#1257BC";                 input.style.transition = "all 0.4s";                 check.style.transition = "all 0.4s";                 check_box.style.transition = "all 0.4s";                 document.body.style.transition = "all 0.4s";                 count = 0;               }               else if (count == 0) {                 check.innerHTML = "현재 상태가 화이트모드예요 ;-)";               }             }             // 화이트모드 종료             else {               statement.innerHTML = "😭😭😭";               check.innerHTML = "해당 서비스는 준비중이예요!";             }       }       // value 값이 비어있지 않을 경우, 사용자의 검색 내부 과정 종료   }   // 버튼 이벤트 함수 종료 코드 리뷰 : 아직은 고쳐할 코드가 많습니다, 날씨 API를 외국 자료에서 가져오다보니 영문을 번역하는 작업도 해야하고, 챕터 한 부분 한 부분 나갈수록 대량의 코드를 함축화시켜서 가독성을 높이고, 보다 효율적으로 코드를 구성하려고 합니다. 코드가 길어지다보니 저 또한 봤던 코드를 계속 돌려보는 현상이 일어나서, 보기 쉽도록 JS 코드에 주석을 달아놓았습니다. 부디 코드가 보기 쉽게 읽히셨으면 좋겠습니다 (__)
klmhyeonwooo
2022.01.25
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 12
포스트를 좋아합니다.
klmhyeonwooo
2022.01.25
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 12
오늘은 다크모드 및 화이트 전환 애니메이션에 대해 구현을 해보았습니다 ;-) - 프로그램 결과 출력 화면 - 메인 HTML 코드 <!DOCTYPE html> <html>   <head>     <title> CHAPTER 11 </title>     <link rel="stylesheet" href="./Chap12.css">   </head>   <body>       <div class = "section1">       <p class="result">메세지가 여기에 출력됩니다!</p>       </div>       <div class= "section2">         <img src="./mImg.jpeg" alt="메인 이미지 확인"                 width="auto" height="300dp">         <p class="check">TEST</p>       </div>       <div class = "section3">           <input type="text" class="input" name="" value="" placeholder="메세지를 입력해주세요 ;-)">       </div>       <div class = "section4">           <button name="submit" class="btn" type="submit" onclick='submit()'>SUBMIT</button>       </div>       <script src="./Chap12.js"></script>   </body> </html> - 메인 CSS 코드 body {   text-align: center; } .section1 {   width : 300px;   height: 35px;   border-style: solid;   font-size : 11px;   color : #1257BC;   border-radius: 50px;   margin-bottom: 20px;   left : 50%;   margin : 0 auto;   margin-bottom: 20px;   margin-top : 20px; } .section2 {   margin-bottom: -40px; } .section3 {   margin-top: 60px; } .check {   font-size : 11px;   color : #1257BC;   visibility : hidden;   margin-top: 15px; } .input {   width: 400px;   height: 40px;   text-align: center;   border-radius: 50px;   border-style: solid;   font-size : 12px;   border-color : #1257BC;   background-color : transparent: ; } .input:focus {   outline : transparent; } .btn:hover {   background-color : #0F5AC7; } .section4 {   margin-top: 20px; } .btn {   width: 400px;   height: 40px;   border-radius: 50px;   border-style: none;   background-color: #1257BC;   color : white;   font-size : 12px; } - 메인 JAVA SCRIPT 코드 var input = document.getElementsByClassName("input")[0]; var check = document.getElementsByClassName("check")[0]; const statement = document.getElementsByClassName("result")[0]; var check_box = document.getElementsByClassName("section1")[0]; let count = 0; function submit() {     if (input.value == "") {       check.style.visibility = "visible";       check.innerHTML = "메세지를 먼저 입력해주세요!";       statement.innerHTML = "메세지가 여기에 출력됩니다!";     }     else if (input.value != "") {       check.style.visibility = "visible";       check.innerHTML = "&quot" + input.value + "&quot" + " 키워드로 검색하신 결과예요 ;-)";       if (input.value == "홈페이지") {         statement.innerHTML = "www.h4vebeauty.com";       }       else if (input.value == "다크모드" || input.value == "블랙모드") {         if (count == 0) {         statement.innerHTML = "메세지가 여기에 출력됩니다!";           check.innerHTML = "다크모드로 전환을 해드렸어요 ;-)";           document.body.style.backgroundColor = "#212121";           check.style.color = "white";           check_box.style.borderColor = "white";           statement.style.color = "white";           input.style.color = "white";           input.style.background = "transparent";           input.style.borderColor = "white";           input.style.transition = "all 0.4s";           check.style.transition = "all 0.4s";           check_box.style.transition = "all 0.4s";           document.body.style.transition = "all 0.4s";           count = 1;         }         else if (count == 1) {           check.innerHTML = "현재 상태가 다크모드예요 ;-)";         }       }       else if (input.value == "화이트모드") {         if (count == 1) {           statement.innerHTML = "메세지가 여기에 출력됩니다!";           check.innerHTML = "화이트모드로 전환을 해드렸어요 ;-)";           document.body.style.backgroundColor = "white";           check.style.color = "#1257BC";           check_box.style.borderColor = "#1257BC";           statement.style.color = "#1257BC";           input.style.color = "#1257BC";           input.style.background = "transparent";           input.style.borderColor = "#1257BC";           input.style.transition = "all 0.4s";           check.style.transition = "all 0.4s";           check_box.style.transition = "all 0.4s";           document.body.style.transition = "all 0.4s";           count = 0;         }         else if (count == 0) {           check.innerHTML = "현재 상태가 화이트모드예요 ;-)";         }       }       else {         statement.innerHTML = "😭😭😭";         check.innerHTML = "해당 서비스는 준비중이예요!";       }     } } - 코드 리뷰 : 사실 오늘 코드는 어제 코드에 비해 큰 변화는 없습니다! 조건문을 사용하여 다크모드와 화이트 모드를 나누어주었고, 자연스러운 색 변화를 위해 transition 값으로 자연스러운 마무리를 해주었습니다 ;-) 추후 챗봇에 같이 이용할 수 있는 부분이 뭐가 있을까 하다가, 다크모드와 화이트모드를 이용하여 구현을 해주었습니다!
klmhyeonwooo
2022.01.25
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 11
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.25
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 11
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.25
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.25
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트에 댓글을 남겼습니다.
heimish
2022.01.25
@heimish님이
모각코 플러스 자바스크립트, CHAPTER 11
포스트를 좋아합니다.
Isdew
2022.01.24
@Isdew님이
모각코 플러스 자바스크립트, CHAPTER 11
포스트에 댓글을 남겼습니다.
Isdew
2022.01.24
@Isdew님이
모각코 플러스 자바스크립트, CHAPTER 11
포스트를 좋아합니다.
jgh0711
2022.01.24
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 11
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.24
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 11
포스트를 좋아합니다.
klmhyeonwooo
2022.01.24
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 11
포스트를 좋아합니다.
klmhyeonwooo
2022.01.24
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 11
아직은 미숙미숙한(?) 챗봇을 구현해보았습니다! - 아직은 제가 입력한 코드에 따른 결과 값만을 출력하는 챗봇(?)이지만, 인공지능 분야에도 관심이 많은 제게는 한 챕터 한 챕터 뒤로 갈 수록 더욱 신나는 과정들만 등장하네요! 오늘도 재미있게 코딩하였습니다 ;-) - - 프로그램 결과 출력 화면 - 메인 HTML 화면 <!DOCTYPE html> <html>   <head>     <title> CHAPTER 11 </title>     <link rel="stylesheet" href="./Chap11.css">   </head>   <body>       <div class = "section1">       <p class="result">메세지가 여기에 출력됩니다!</p>       </div>       <div class= "section2">         <img src="./mImg.jpeg" alt="메인 이미지 확인"                 width="auto" height="300dp">         <p class="check">TEST</p>       </div>       <div class = "section3">           <input type="text" class="input" name="" value="" placeholder="메세지를 입력해주세요 ;-)">       </div>       <div class = "section4">           <button name="submit" class="btn" type="submit" onclick='submit()'>SUBMIT</button>       </div>       <script src="./Chap11.js"></script>   </body> </html> - 메인 JAVA SCRIPT 화면 var input = document.getElementsByClassName("input")[0]; var check = document.getElementsByClassName("check")[0]; const statement = document.getElementsByClassName("result")[0]; function submit() {     if (input.value == "") {       check.style.visibility = "visible";       check.innerHTML = "메세지를 먼저 입력해주세요!";       statement.innerHTML = "메세지를 입력해주세요 ;-)";     }     else if (input.value != "") {       check.style.visibility = "visible";       check.innerHTML = "&quot" + input.value + "&quot" + " 키워드로 검색하신 결과예요 ;-)";       if (input.value == "홈페이지") {         statement.innerHTML = "www.h4vebeauty.com";       }       else {         statement.innerHTML = "😭😭😭";         check.innerHTML = "해당 서비스는 준비중이예요!";       }     } } - 메인 CSS 화면 body {   text-align: center; } .section1 {   width : 300px;   height: 35px;   border-style: solid;   font-size : 11px;   color : #1257BC;   border-radius: 50px;   margin-bottom: 20px;   left : 50%;   margin : 0 auto;   margin-bottom: 20px;   margin-top : 20px; } .section2 {   margin-bottom: -40px; } .section3 {   margin-top: 60px; } .check {   font-size : 11px;   color : #1257BC;   visibility : hidden;   margin-top: 15px; } .input {   width: 400px;   height: 40px;   text-align: center;   border-radius: 50px;   border-style: solid;   font-size : 12px;   border-color : #1257BC; } .input::placeholder {   color : #1257BC; } .btn:hover {   background-color : #0F5AC7; } .section4 {   margin-top: 20px; } .btn {   width: 400px;   height: 40px;   border-radius: 50px;   border-style: none;   background-color: #1257BC;   color : white;   font-size : 12px; } - 코드 리뷰 : 금일 코드 리뷰는 사실 입력 값에 따라 조건문으로 값에 맞는 데이터 값만을 출력해주는 부분이라서 별개로 설명할 부분이 별로 없습니다. 챕터 11까지의 과정 중 배운 부분을 응용했기에, 주석은 따로 없지만 CSS 부분과 대체적으로 깔끔한 느낌의 UI를 제작해보려고 노력해보았습니다 ;-)
amanda
2022.01.23
@amanda님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트에 댓글을 남겼습니다.
amanda
2022.01.23
@amanda님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트를 좋아합니다.
jgh0711
2022.01.22
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.22
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트를 좋아합니다.
klmhyeonwooo
2022.01.21
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.21
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.21
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.21
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.21
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트를 좋아합니다.
익명
2022.01.21
익명님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트에 댓글을 남겼습니다.
jhyglory
2022.01.21
@jhyglory님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트를 좋아합니다.
heimish
2022.01.21
@heimish님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트를 좋아합니다.
klmhyeonwooo
2022.01.21
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 10
포스트를 좋아합니다.
klmhyeonwooo
2022.01.21
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 10
오늘은 전화번호를 입력하고, 페이스타임을 연동해보았습니다! - 프로그램 결과 출력 화면 (원래는 번호를 입력하면 저장된 이름과 같이 뜨는데, 개인정보 때문에 임의의 번호를 입력하였습니다 ;-) - 메인 HTML 코드 <!DOCTYPE html> <html> <head>   <title> CHAPTER 10 </title>   <link rel="stylesheet" href="./Chap10.css">   </head>   <body>     <div class = "section">       <img src = "./status.png" class="status">       <div class = "message_section">         <p class = "number_message"></p>         <p class = "number_add">번호 추가</p>       </div>       <div class = "num_section">           <!-- 1,2,3 버튼 -->         <div class = "btn_section">           <button type="button" id = "btn" name="button" onclick="one()">             <p class = "num">1</p>             <p class = "sub" style="visibility:hidden">test</p>           </button>           <button type="button" id = "btn_center" name="button" onclick="two()">             <p class = "num">2</p>             <p class = "sub">A B C</p>           </button>           <button type="button" id = "btn" name="button" onclick="three()">             <p class = "num">3</p>             <p class = "sub">D E F</p>           </button> <br />         </div>         <div class = "btn_section">           <button type="button" id = "btn" name="button" onclick="four()">             <p class = "num">4</p>             <p class = "sub">G H I</p>           </button>           <button type="button" id = "btn_center" name="button" onclick="five()">             <p class = "num">5</p>             <p class = "sub">J K L</p>           </button>           <button type="button" id = "btn" name="button" onclick="six()">             <p class = "num">6</p>             <p class = "sub">M N O</p>           </button> <br />         </div>         <div class = "btn_section">           <button type="button" id = "btn" name="button" onclick="seven()">             <p class = "num">7</p>             <p class = "sub">P Q R S</p>           </button>           <button type="button" id = "btn_center" name="button" onclick="eight()">             <p class = "num">8</p>             <p class = "sub">T U V</p>           </button>           <button type="button" id = "btn" name="button" onclick="nine()">             <p class = "num">9</p>             <p class = "sub">W X Y Z</p>           </button> <br />         </div>         <div class = "call_section">           <button type="button" id= "btn" name="button"onclick="symbol()">             <p class = "num" style="margin-top:15px; font-size:35px;">*</p>           </button>           <button type="button" id = "btn_center" name="button" onclick="zero()">             <p class = "num" style="margin-top:9px;">0</p>             <p class = "sub" style="font-size:16px; margin-top:-35px;">+</p>           </button>           <button type="button" id= "btn" name="button" style="font-size:25px;" onclick="symbol_2()">#</button> <br />         </div>         <div class = "btn_section">           <a href="facetime:333" id="caller" onclick="call()"><img src = "./call.jpg" class="call"></a>           </div>       </div>       <!-- num_section 태그 마무리 -->         <img src = "./menu.jpg" class="menu">         <img src = "./indicator.png" class="indicator">       </div>       <!-- section 태그 마무리 -->       <script src="./Chap10.js" charset="utf-8"></script>     </body> </html> - 메인 CSS 코드 .section {   position : absolute;   top : 50%;   left : 50%;   transform : translate(-50%, -50%);   width : 300px;   height : 650px;   border-style : groove;   text-align : center; } #btn, #btn_center {   width : 60px;   height : 60px;   border-radius : 100px;   font-size : 15px;   border-style : none;   background-color : #E5E5EA;   opacity : 100%; } #btn:active, #btn_center:active {   background-color : #AEAEB2;   opacity: 1;   transition:all 0.1s;   animation: fadein 0.6s;   animation-fill-mode: forwards; } @keyframes fadein {     from {         opacity: 1;     }     to {         opacity: 0.7;     } } #btn_center {   margin-left : 25px;   margin-right : 25px; } .num_section {   text-align : center;   width : auto;   margin-top : 38px; } .status {   display : inline-block;   width : 100%; } .menu, .indicator {   display : absolute;   width : 100%; } .menu {   margin-top : 40px; } .indicator {   margin-top: -10px; } .num, .sub {   display : flex;   justify-content : center;   align-items : center;   margin-top: 4px; } .num {   font-size : 28px; } .sub {   margin-top : -30px;   font-size : 3px;   -webkit-transform: scale(0.75);   -webkit-text-size-adjust: none;   font-weight : 700; } .btn_section {   display : flex;   width : auto;   height : 100px;   justify-content : center;   align-items : center;   margin-bottom : -25px; } .call_section {   display : flex;   width : auto;   height : 100px;   justify-content : center;   align-items : center;   margin-bottom : -25px; } .call {   width : auto;   height : 75px; } .call:active {   content : url('./call_2.jpg'); } .number_message {   font-size : 27px;   visibility : hidden; } .number_add {   margin-top : -20px;   color : #007AFF;   visibility : hidden; } .message_section {   width : auto;   height : 107px;   border : 5px solid transparent; /* BORDER 선 투명하게 */   margin-bottom : -35px; } - 메인 JAVA SCRIPT 코드 var list = []; count = 0; var number_add = document.getElementsByClassName("number_add")[0]; var number_message = document.getElementsByClassName("number_message")[0]; var caller = document.getElementById("caller"); function check() {   // 아이폰 번호추가 이벤트 따라하기   if (count == 1) {     number_message.style.visibility = "visible";     number_add.style.visibility = "visible";     number_add.style.transition = "all 0.4s";     number_add.style.opacity = "1";   }   if (list[0] == '0' && list[1] == '1') {     if (list[2] == '0') {       if (count == 3) {         list[count] = "-";         number_message.innerHTML += '-';         count++;       }       if (count == 8) {         list[count] = "-";         number_message.innerHTML += '-';         count++;       }       if (count == 14) {         list.splice(3,1);         list.splice(7,1);         number_message.innerHTML = list.join('');       }         else {           return 0;         }       }     }   } function one() {   list[count] = "1";   number_message.innerHTML += '1';   count++;   check(); } function two() {     list[count] = "2";     number_message.innerHTML += '2';     count++;     check(); } function three() {       list[count] = "3";       number_message.innerHTML += '3';       count++;       check(); } function four() {       list[count] = "4";       number_message.innerHTML += '4';       count++;       check(); } function five() {       list[count] = "5";       number_message.innerHTML += '5';       count++;       check(); } function six() {       list[count] = "6";       number_message.innerHTML += '6';       count++;       check(); } function seven() {       list[count] = "7";       number_message.innerHTML += '7';       count++;       check(); } function eight() {       list[count] = "8";       number_message.innerHTML += '8';       count++;       check(); } function nine() {       list[count] = "9";       number_message.innerHTML += '9';       count++;       check(); } function nine() {       list[count] = "9";       number_message.innerHTML += '9';       count++;       check(); } function nine() {       list[count] = "9";       number_message.innerHTML += '9';       count++;       check(); } function zero() {   list[count] = "0";   number_message.innerHTML += '0';   count++;   check(); } // *을 의미 function symbol() {       list[count] = "*";       number_message.innerHTML += '*';       count++;       check(); } // #을 의미 function symbol_2() {       list[count] = "#";       number_message.innerHTML += '#';       count++;       check(); } function call() {     if (list.length == 14) {       list.splice(3,1);       list.splice(7,1);       var url = 'facetime:' + list.join('');       caller.href = url;     }     else {       var url = 'facetime:' + list.join('');       caller.href = url;     } } 코드 리뷰 : - 오늘은 평소보다 빠르게 낮에 시작을 했는데, UI를 아이폰과 최대한 비슷하게 구현하려고 하다보니까 UI 디자인을 구성하는데 시간을 많이 잡아먹었네요 🙈 디자이너분들 다시 한번 존경합니다.. - 페이스 타임과 연동하여 사용자가 번호를 입력하면 번호 입력창의 - 의 문자를 제거하고 href 란에 자바스크립트를 통해 데이터를 전송해주는 형식으로 구성하였습니다. - 각종 번호 알고리즘까지 구현을 하고, 조금 더 다양하게 구성을 하려고 했으나 하루종일 걸릴 것 같다는 직감적인 느낌때문에 간단하게 010 번호 구성과 # 구성, * 구성 까지만 설계를 하였습니다 (02, 03~ 뭐 다양하게 구성을 하려고 하면 하긴 하겠지만, 엄~청 오래걸릴 것 같습니ㄷ..) - 아이폰.. 못 잃어..
Isdew
2022.01.20
@Isdew님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트에 댓글을 남겼습니다.
Isdew
2022.01.20
@Isdew님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트를 좋아합니다.
jgh0711
2022.01.20
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.20
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트를 좋아합니다.
heimish
2022.01.20
@heimish님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트에 댓글을 남겼습니다.
heimish
2022.01.20
@heimish님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트를 좋아합니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 09
포스트를 좋아합니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 09
제가 좋아하는 영화 및 드라마를 중심으로 한번 깔끔하게 다뤄보았습니다 ;-) - 프로그램 결과 출력 화면 - 메인 HTML 코드 <!<!DOCTYPE html> <html> <head>   <title> CHAPTER 09 </title>   </head>   <body>     <style>       .section {         position : absolute;         left : 50%;         top : 50%;         transform : translate(-50%, -50%);         width : 500px;       }       .movie_1, .movie_2, .movie_3 {         width : 195px;         height : 40px;         border-radius : 50px;         border-style : solid;         background-color : white;         color : #6666ff;         border-color: #6666ff;         font-size : 12px;       }       .movie_1:hover, .movie_2:hover, .movie_3:hover {         color : #9977ff;         border-color: #9977ff;       }       .movie_1:focus, .movie_2:active, .movie_3:active {         color : #9977ff;         border-color: #9977ff;       }       .subject {         text-align : center;       }       .contents {         margin-top : 30px;         margin-left : 60px;       }       .img_section {         text-align : center;       }       .img {         width : auto;         height : 150px;         margin-bottom : 20px;       }       .img_2 {         width : auto;         height : 220px;         margin-bottom : 20px;       }       .content {         font-size : 14px;       }       .sub_content {         font-size : 11px;         margin-top : -10px;       }       .video {         width : 390px;         height : 300px;         margin-top : 5px;       }       </style>     <div class = "section">     <div class = "img_section">       <img src = "./img_1.png" class="img">     </div>       <div class = "subject">     <button type="button" class="movie_1" name="button" onclick="click_1()">뷰티인사이드</button>     <button type="button" class="movie_2" name="button" onclick="click_2()">그 해 우리는</button>       </div>       <div class = "contents">         <p class = "content">뷰티인사이드</p>         <p class = "sub_content">The Beauty Inside, 2015</p>         <iframe class="video" src="https://www.youtube.com/embed/NI5XwC--SYs?autoplay=1&mute=1&controls=0&disablekb=1"         frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>         </iframe>       </div>     </div>     <script src="./Chap09.js" charset="utf-8"></script>     </body> </html> - 메인 JAVA SCRIPT 코드 var img = document.getElementsByClassName("img")[0]; var video = document.getElementsByClassName("video")[0]; var title = document.getElementsByClassName("content")[0]; var sub_title = document.getElementsByClassName("sub_content")[0]; var movie1 = {   kor_name : "뷰티인사이드",   eng_name : "The Beauty Inside, 2015",   movie_src : "https://www.youtube.com/embed/NI5XwC--SYs?autoplay=1&mute=1&controls=0&disablekb=1",   img_src : "./img_1.png", } var movie2 = {   kor_name : "그 해 우리는",   eng_name : "Our Beloved Summer, 2021",   movie_src : "https://www.youtube.com/embed/o94O9LA8GrQ?autoplay=1&mute=1&controls=0&disablekb=1",   img_src : "img_2.gif", } function click_1() {   img.src = movie1.img_src;   img.className = "img";   video.src = movie1.movie_src;   title.innerHTML = movie1.kor_name;   sub_title.innerHTML = movie1.eng_name; } function click_2() {   video.src = movie2.movie_src;   img.src = movie2.img_src;   img.className = "img_2";   title.innerHTML = movie2.kor_name;   sub_title.innerHTML = movie2.eng_name; } - 코드 리뷰 : 이번 코드는 객체를 이용하여 코드를 구성하였기 때문에 그렇게 크게 코드를 건드린 부분은 없었습니다! 또, 좋아하는 영화보다는 영화보다는 드라마를 즐겨보고 있는 요즘이라서, 요즘 즐겨보고 있는 '그 해 우리는' 이 바로바로 떠올라서 영화와 드라마를 섞어버렸습니다 😉 곧 금요일이네요, 오늘 하루도 예쁜 하루 만들어가시길 바랍니다 ;-)
Isdew
2022.01.20
@Isdew님이
모각코 플러스 자바스크립트, CHAPTER 08
포스트에 댓글을 남겼습니다.
Isdew
2022.01.20
@Isdew님이
모각코 플러스 자바스크립트, CHAPTER 08
포스트를 좋아합니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 04
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 04
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 08
포스트를 좋아합니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 08
과제를 기반으로 만든 프로그램 : 편리한 간이 전광판 - 프로그램 결과 출력 화면 - 메인 HTML 코드 <!<!DOCTYPE html> <html> <head>   <title> CHAPTER 08 </title>   </head>   <body>     <style>       .result {         font-weight : 700;         margin-bottom : 15px;         visibility : hidden;         font-size : 70px;       }       .result {          animation-duration: 3s;          animation-name: rainbowLink;          animation-iteration-count: infinite; }       @keyframes rainbowLink {        0% { color: #ff2a2a; }        15% { color: #ff7a2a; }        30% { color: #ffc52a; }        45% { color: #43ff2a; }        60% { color: #2a89ff; }        75% { color: #202082; }        90% { color: #6b2aff; }        100% { color: #e82aff; }       }       .section {         position : absolute;         top : 50%;         left : 50%;         transform : translate(-50%, -50%);         text-align : center;       }       .input {         width : 270px;         height : 40px;         text-align : center;         font-size : 12px;         border-radius : 50px;         border-style : solid;       }       .start_btn, .auto_btn, .reset_btn {         width : 90px;         height : 30px;         font-size : 12px;         border-radius : 50px;         border-style : solid;         background-color : white;         font-size : 11px;       }       .start_btn:hover, .auto_btn:hover, .reset_btn:hover {         color : #3366FF;         border-color : #3366FF;       }       .message {         font-size : 9px;         color : #3366FF;       }       </style>     <div class="section">       <!-- 5의 속도로 텍스트 움직이기 -->       <marquee scrollamount=8 class="result">test</marquee>       <input type="text" value="" class="input" placeholder="전달하고자하는 메세지를 입력해주세요!"></input> <br />       <p class="message">코뮤니티 전광판 시스템 메시지가 여기에 출력이 되어요!</p>       <button type="button" class="start_btn" name="button" onclick="start()">수동시작</button>       <button type="button" class="auto_btn" name="button" onclick="auto()">자동시작</button>       <button type="button" class="reset_btn" name="button" onclick="reset()">초기화</button>     </div>     <script src="./Chap08.js" charset="utf-8"></script>     </body> </html> - 메인 JAVA SCRIPT 코드 var output = ""; var count = 0; var list = []; var finish_count = 1; // 문자열을 슬라이싱하기 위해 만들어놓은 임의의 변수 // substr(from, length)의 양식으로 진행 var n = 0; var from = 0; var length = 1; // 기타 HTML 연결 변수 var result = document.getElementsByClassName("result")[0]; var message = document.getElementsByClassName("message")[0]; var data = document.getElementsByClassName("input")[0]; var start_btn = document.getElementsByClassName("start_btn")[0]; var auto_btn = document.getElementsByClassName("auto_btn")[0]; var finish_btn = document.getElementsByClassName("finish_btn")[0]; var input; // 초기화 내부 함수, 변수들을 초기화해주면서 초기형태로 만들어준다 function reset() {   input = data.value;   // 비활성화된 버튼 모두 활성화   start_btn.disabled = false;   auto_btn.disabled = false;   data.value = "";   message.innerHTML = "코뮤니티 전광판 시스템이 초기화되었습니다!";   result.style.visibility = "hidden";   list = [];   n = 0;   from = 0;   output = "";   count = 0;   finish_count = 1; } function auto() {   input = data.value;   if (input == "") {     message.innerHTML = "상단에 메세지를 입력해주세요!";     return 0;   }   else {     if (finish_count == 1) {     auto_start();     setTimeout(auto, 1000);     }     else {     // 자동실행 콘솔 완료 테스트 메세지 출력     console.log("완료");     }   } } // 자동시작 내부 함수 function auto_start() {   input = data.value;   if (input == "") {     message.innerHTML = "상단에 메세지를 입력해주세요!";     return 0;   }   else {     // 정상적인 동작을 위해 수동시작 버튼 비활성화     start_btn.disabled = true;   // 어떤 문자열의 길이가 올지 모르기 때문에, 슬라이싱을 해주면서 슬라이싱의 값이 비어있을 경우 무한반복문 멈춤   while(true) {     if (input.substr(from, length) != "") {       list[n] = input.substr(from, length);       from++, n++;     }     else {       break;     }   }   // while 반복문이 끝나면, 정상적으로 문자열을 리스트로 하나하나 정상적으로 분배 완료   // 사용자가 버튼을 누를 때마다 카운트 값이 1씩 증가하고, 증가 값에 따라 리스트 값을 출력   // 리스트 값이 undefined이 아닌 경우에만 출력, from 과 count 변수의 차가 0일 경우 출력이 완료되었다는 메세지 출력   if (typeof(list[count]) != "undefined") {   output = output + list[count];   result.style.visibility = "visible";   result.innerHTML = output;   count++;     if (from - count == 0) {       message.innerHTML = "출력이 완료되었습니다 ;-)";       finish_count = 0;     }     else {     message.innerHTML = "자동 실행중입니다!";       }     }   } } // 수동시작 내부 함수 function start() {   input = data.value;   if (input == "") {     message.innerHTML = "상단에 메세지를 입력해주세요!";     return 0;   }   else {     // 정상적인 동작을 위해 자동시작 버튼 비활성화     auto_btn.disabled = true;   // 어떤 문자열의 길이가 올지 모르기 때문에, 슬라이싱을 해주면서 슬라이싱의 값이 비어있을 경우 무한반복문 멈춤   while(true) {     if (input.substr(from, length) != "") {       list[n] = input.substr(from, length);       from++, n++;     }     else {       break;     }   }   // while 반복문이 끝나면, 정상적으로 문자열을 리스트로 하나하나 정상적으로 분배 완료   // 사용자가 버튼을 누를 때마다 카운트 값이 1씩 증가하고, 증가 값에 따라 리스트 값을 출력   // 리스트 값이 undefined이 아닌 경우에만 출력, from 과 count 변수의 차가 0일 경우 출력이 완료되었다는 메세지 출력   if (typeof(list[count]) != "undefined") {   output = output + list[count];   result.style.visibility = "visible";   result.innerHTML = output;   count++;     if (from - count == 0) {       message.innerHTML = "출력이 완료되었습니다 ;-)";     }     else {     message.innerHTML = from - count + "번 더 수동시작 버튼을 클릭해주세요!";       }     }   } } - 코드 리뷰 : 오늘은 치과예약으로 인해서 일찍이 과제를 제출하지 못했네요 ^^; 금일 과제가 굉장히 저에게는 신기하고 흥미로운 주제였어서 정말 재미있게 코딩을 한 것 같습니다 ;-) 어쩌다보니 코드가 조금 길어지긴 했는데, 주석을 깔끔하게 달아 가독성을 조금이나마 높히고자 노력하였습니다!
jamiee0214
2022.01.18
@jamiee0214님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트에 댓글을 남겼습니다.
jamiee0214
2022.01.18
@jamiee0214님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트를 좋아합니다.
Isdew
2022.01.18
@Isdew님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트에 댓글을 남겼습니다.
Isdew
2022.01.18
@Isdew님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트를 좋아합니다.
jgh0711
2022.01.18
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.18
@jgh0711님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트를 좋아합니다.
klmhyeonwooo
2022.01.18
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAPTER 07
포스트를 좋아합니다.
klmhyeonwooo
2022.01.18
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAPTER 07
과제를 기반으로 만든 프로그램 : 간단 명료 스톱워치 - 프로그램 결과 출력 화면 - 메인 HTML 코드 <!DOCTYPE html> <html>   <head>     <title> CHAPTER 07 </title>     </head>     <body>       <style>         .section {           position : absolute;           left : 50%;           top : 50%;           transform : translate(-50%, -50%);         }         .start_btn, .stop_btn, .reset_btn {           border-radius : 50px;           border-style : solid;           width : 130px;           height : 30px;           margin-bottom : 5px;           border-color : #6666ff;           background-color : white;           font-size : 9px;         }         .start_btn:active, .stop_btn:active, .reset_btn:active {           border-color : #6666ff;         }         .start_btn:focus, .stop_btn:focus {           color : #6666ff;         }         .timer {           text-align : center;           font-size : 30px;           font-weight : 700;         }         .subscription {           font-size : 6px;           text-align : center;           margin-top : -30px;           margin-bottom : -8px;           color : #6666ff;         }         </style>       <div class="section">       <p class="timer">00:00:00</p>       <p class="subscription">모각코 커뮤니티 타이머<p>       <button type="button" name="button" class="start_btn" onclick="StartTimer();">START</button><br />       <button type="button" name="button" class="stop_btn" onclick="StopTimer()">STOP</button><br />       <button type="button" name="button" class="reset_btn" onclick="ClearTimer()">RESET</button>       </div>       <script src="./Chap07.js" charset="utf-8"></script>       </body> </html> - 메인 JAVA SCRIPT 코드 // 초, 분, 값의 초기값 설정 (다음 값을 조정하여 타이머 값 임의 변경 가능) var s = 0; var m = 0; var h = 0; var m_count = 0; var h_count = 0; var timer; var btn_count = 0; var subscription = document.getElementsByClassName("subscription")[0]; var time = document.getElementsByClassName("timer")[0]; var start_btn = document.getElementsByClassName("start_btn")[0]; // 타이머 스타트 함수 function StartTimer() {   start_btn.innerHTML = "STARTING";   subscription.innerHTML = "타이머가 작동중입니다!";   Timer();   // setTimeout 함수, 1초 간격으로 StartTimer 함수 실행 [재귀함수]   timer = setTimeout(StartTimer, 1000);   btn_count = 1;   if (btn_count == 1) {     start_btn.disabled = true;   } } // 타이머 스탑 내부 함수 function StopTimer() {   clearTimeout(timer);   start_btn.innerHTML = "RESTART";   subscription.innerHTML = "타이머가 정지되었습니다!";   btn_count = 0;   // 스타트 버튼 다중 클릭 방지   if (btn_count == 0) {   start_btn.disabled = false;   } } // 타이머 초기화 내부 함수 function ClearTimer() {   s = 0;   m = 0;   h = 0;   m_count = 0;   h_count = 0;   btn_count = 0;   if (btn_count == 0) {   start_btn.disabled = false;   }   subscription.innerHTML = "타이머가 리셋 완료되었습니다!";   start_btn.innerHTML = "시작";   time.innerHTML = "00:00:00";   clearTimeout(timer); } // 타이머 동작 내부 함수 function Timer() {   s++;   // 초가 60초 이상일 경우, 60초를 1분으로 변환   // 초를 0으로 변환해주면서, 동시에 분의 자리 수 확인 카운트 값도 0으로 변환   if (s >= 60) {     s = 0;     m_count = 0;     m++;   }   // 분이 60분 이상일 경우, 60분을 1시간으로 변환   // 분를 0으로 변환해주면서, 동시에 시간 자리 수 확인 카운트 값도 0으로 변환   if (m >= 60) {     m = 0;     h_count = 0;     h++;   }   // 값이 한 자리 일 경우, 0을 붙여준다.   // Timer 함수를 작동하면서 계속해서 초기화 해주기 때문에 자리 수 카운트 값은 필요 없음   if (s < 10) {     s = '0' + s;   }   // 값이 한 자리 일 경우, 0을 붙여준다.   // 카운트값을 별도로 지정하여, 10 아래 일 경우 카운트 값을 1로 설정   if (h < 10) {     if (h_count == 0) {     h = '0' + h;     h_count = 1;     }   }   // 값이 한 자리 일 경우, 0을 붙여준다.   // 카운트값을 별도로 지정하여, 10 아래 일 경우 카운트 값을 1로 설정   if (m < 10) {     if (m_count == 0) {     m = '0' + m;     m_count = 1;     }   }   time.innerHTML = h + ":" + m + ":" + s; } - 코드 리뷰 : 오늘도 간단하게 만드려도 하다가, 스타트 버튼을 계속 누르게 되면 ms의 시간이 중첩되어서 올라가는 현상이 일어났습니다. 그래서 이 현상을 잡으려고 버튼 속성을 disabled로 잡아주었고, 각 실행 상태 그리고 간단한 타이머지만 조금 더 오류없고, 완벽한 타이머를 구현해보려고 코드를 조금 길게나마 풀어낸 것 같습니다. 코드를 복붙하면 바로 사용이 가능합니다. 코드는 가독성을 조금이나마 높이고자, 그리고 제가 코딩할때 헷갈리는 부분이 없게하고자 주석을 한 부분 한 부분 달아놓았습니다. 감사합니다 (__)
heimish
2022.01.18
@heimish님이
모각코 플러스 자바스크립트, CHAP 6
포스트를 좋아합니다.
klmhyeonwooo
2022.01.18
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 6
포스트를 좋아합니다.
klmhyeonwooo
2022.01.18
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAP 6
금일 과제를 기반으로 구현한 내용 : 초간단 계산기 - 프로그램 구현 결과에 대한 이미지 파일 - 메인 HTML 코드 <!DOCTYPE html> <html> <head>   <title> CHAPTER 06 </title>   </head>   <body>     <style>     .section {       position : absolute;       left : 50%;       top : 50%;       transform: translate(-50%, -50%);     }     .checkbox_confirm {       margin-top: -10px;       font-size: 10px;       color: #6666ff;     }     .result {       font-size: 10px;       color: #6666ff;       margin-top: 2px;       text-align: center;     }     .user_input_layer {       position: absolute;       top : 50%;       left : 50%;       transform: translate(50%, 50%);     }     .value_a, .value_b {       width: 200px;       height: 30px;       border-radius: 50px;       border-style: groove;       text-align: center;       font-size: 11px;       margin-bottom: 7px;     }     .btn {       width: 100px;       height: 30px;       border-radius: 50px;       border-style: groove;       text-align: center;       font-size: 11px;       margin-bottom: 7px;       background-color: white;     }     .checkbox_layer, .button_section {       text-align: center;     }     </style>     <div class = "section">     <!-- checkbox layer -->     <div class = "checkbox_layer">     <p class = "input_text">     <input type="checkbox" name="calc" onclick="checkOnlyOne(this)" value="+">     +     </input>     <input type="checkbox" name="calc" onclick="checkOnlyOne(this)" value="-">     -     </input>     <input type="checkbox" name="calc" onclick="checkOnlyOne(this)" value="*">     *     </input>     <input type="checkbox" name="calc" onclick="checkOnlyOne(this)" value="/">     /     </input>     <input type="checkbox" name="calc" onclick="checkOnlyOne(this)" value="%">     %     </input>     </p>     <p class = "checkbox_confirm"> 아직 아무것도 선택되지 않았습니다 </p>     </div>     <!-- user input layer -->     <input type="text" class="value_a" value="" placeholder="첫번째 숫자를 입력해주세요!">     <br>     <input type="text" class="value_b" value="" placeholder="두번째 숫자를 입력해주세요!">     <br>     <div class = "button_section">     <button type="submit" name="button" class="btn" onclick="run()">결과 확인</button>     <button type="submit" name="button" class="btn" onclick="reset()">초기화</button>     </div>     <p class = "result"></p>     </div>     <script src="./Chap06.js" charset="utf-8"></script>     </body> </html> - 메인 JAVA SCRIPT 코드 // 전역변수로 사용할 변수 선언 var x = document.getElementsByClassName("value_a")[0]; var y = document.getElementsByClassName("value_b")[0]; var count = 0; var checkbox_message = document.getElementsByClassName("checkbox_confirm")[0]; var result_message = document.getElementsByClassName("result")[0]; const checkbox_list = document.getElementsByName("calc"); const checkbox_confirm = document.getElementsByClassName("checkbox_confirm")[0]; function checkOnlyOne(element) {   checkbox_list.forEach((cb) => {     cb.checked = false;   })   element.checked = true;   var confirm = element.value;   checkbox_confirm.innerHTML = "사칙연산 기호 " + confirm + " 가 선택되었습니다!"; } function run() {   if (x.value == "") {     alert("첫번째 숫자를 입력해주세요!");   }   else if (y.value == "") {     alert("두번째 숫자를 입력해주세요!");   }   else if (x.value != "" && y.value != "") {   checkbox_list.forEach((cb) => {     if ((!cb.checked) && (count == 0)) {       checkbox_confirm.innerHTML = "계산을 시작할 사칙연산 기호를 체크해주세요!"       count = 1;     }     if (cb.checked) {     var symbol = cb.value;     // 결과 테스트용 출력 메세지     // 스위치 조건문을 통해 체크박스 조건여부체크     switch (symbol) {       case '+' :         var result = parseInt(x.value) + parseInt(y.value);         result_message.innerHTML = "계산된 결과의 값은 " + result + " 입니다!";         count = 1;         break;       case '-' :         var result = parseInt(x.value) - parseInt(y.value);         result_message.innerHTML = "계산된 결과의 값은 " + result + " 입니다!";         count = 1;         break;       case '*' :         var result = parseInt(x.value) * parseInt(y.value);         result_message.innerHTML = "계산된 결과의 값은 " + result + " 입니다!";         count = 1;         break;       case '%' :         var result = parseInt(x.value) % parseInt(y.value);         result_message.innerHTML = "계산된 결과의 값은 " + result + " 입니다!";         count = 1;         break;       case '/' :         var result = parseInt(x.value) / parseInt(y.value);         var result = result.toFixed(2);         result_message.innerHTML = "계산된 결과의 값은 " + result + " 입니다!";         count = 1;         break;       default:     }   }   }); } } function reset() {   checkbox_list.forEach((cb) => {     cb.checked = false;   });   x.value = "";   y.value = "";   checkbox_confirm.innerHTML = " 아직 아무것도 선택되지 않았습니다 ";   result_message.innerHTML = "";   count = 0; } - 코드 리뷰 : 처음에 아주 간단하게 구현을 하려고 했는데, 원래 성격상 조금 더 꼼꼼하게 보다보니까 너무 재밌어서 안 만들어도 되는 기능까지 구현을 해버렸네요,, 그래도 아무 이상없이 아무 오류없이 구현을 잘 해놓고 제출할 수 있어서 다행입니다! 최대한 HTML 코드와 JS 코드를 가독성 있게 배치해놓았는데, 이게 다른분들이 보실 때는 어떻게 보이실 지 잘 모르겠습니다 ^^; 오늘 하루도 CLEAR-!
klmhyeonwooo
2022.01.14
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 05
포스트를 좋아합니다.
klmhyeonwooo
2022.01.14
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAP 05
메인 HTML 코드 <html>   <head>     <title> CHAPTER 05 </title>     <style>       .input {         position : absolute;         left : 50%;         top : 50%;         transform : translate(-50%, -50%);       }       .input_box {         height : 30px;         width: 190px;         font-size: 13px;         font-weight: 700;         text-align: center;       }       .btn {         height: 40px;         width: 250px;         border-style : none;         border-radius: 100px;       }       .btn:hover {         border-style : solid;       }       .result {         text-align: center;       }       p {         font-size: 13px;         font-weight: 700;       }       </style>     </head>     <body>       <div class="input">       <p>변수 = <input type="text" class="input_box" value="" placeholder="선언된 변수의 값을 입력해주세요!"></input> </p>       <button type="submit" name="button" class="btn" onclick="result()">변수타입확인</button>       <p class = "result">결과값이 하단에 출력됩니다</p>       </div>       <script src="./Chap05.js" charset="utf-8"></script>       </body>       </html> 메인 JAVA SCRIPT 코드 function result() {   // 클릭 이벤트 변수 선언 [변경되는 태그 p]   var statement = document.getElementsByClassName('input_box')[0].value;   var result = document.getElementsByClassName('result')[0];   // number 파싱 실행   if (parseInt(statement) || parseFloat(statement)) {     result.innerHTML = "변수의 타입은 'number' 입니다";     console.log("number");   }   // boolean 조건 실행   else if (statement == "true" || statement == "false") {     result.innerHTML = "변수의 타입은 'boolean' 입니다";     console.log("boolean");   }   // null 조건 실행   else if (statement == "null") {     result.innerHTML = "변수의 타입은 'object' 입니다";     console.log("object");   }   // string 조건 실행   else {     if (statement == "") {       alert("변수 값을 입력해주세요!");       result.innerHTML = "변수의 타입은 'undefined' 입니다";       console.log("undefined");     }     if (statement != "") {       result.innerHTML = "변수의 타입은 'string' 입니다";       console.log("string");     }   } } 코드 결과 출력 [사진 1 , 메인 화면] [사진2 , 값 입력 후, 결과 값 출력] [사진 3 , 값 출력과 동시에 콘솔창 데이터 출력] [사진 4 , typeof 코드를 통해 각 데이터 타입 값 콘솔 연습] 코드 리뷰 : 아주 간단한 변수 타입을 출력해주는 프로그램을 만들어보았습니다, 아쉽게도 자바 스크립트 내에서 괄호를 통해 객체를 만드는 부분은 어떻게 어떻게 구현은 될 것 같으면서도 만드는 과정에서 배운 내용의 범위를 벗어날 수 있기 때문에 간단한 타입의 예제들로 구성을 해보았습니다. 이번 코드에서 변수 값에 null 값을 적용하였고, typeof 코드를 통해 null 값을 반환받는 줄 알고있었지만, object로 반환되는 값에 호기심이 들어 구글링 해 본 결과, 제가 본 구글링 자료에서는 object로 출력되는 것이 버그현상이라고 합니다. (관련자료 - https://curryyou.tistory.com/183) 너무너무 재밌네요 자바스크립트, 오늘도 한 부분 더 세세하게 알아갑니다 ;-)
jgh0711
2022.01.13
@jgh0711님이
모각코 플러스 자바스크립트, CHAP 04
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.13
@jgh0711님이
모각코 플러스 자바스크립트, CHAP 04
포스트를 좋아합니다.
Isdew
2022.01.13
@Isdew님이
모각코 플러스 자바스크립트, CHAP 04
포스트에 댓글을 남겼습니다.
Isdew
2022.01.13
@Isdew님이
모각코 플러스 자바스크립트, CHAP 04
포스트를 좋아합니다.
klmhyeonwooo
2022.01.13
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 04
포스트를 좋아합니다.
klmhyeonwooo
2022.01.13
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAP 04
메인 HTML 코드 <html>   <head>     <title>CHAPTER 04</title>   </head>   <style media="screen">     .test {       position : absolute;       left : 50%;       top : 50%;       transform : translate(-50%, -50%);       border-radius: 50px 50px 50px 50px;       border-color: blac;       width : 300px;       height : 50px;       font-size : 12px;       font-weight : 700;       background-color : white;     }   </style>   <body>     <button class="test" type="submit" name="button" onclick="output()">콘솔 출력 및 테스트</button>     <script src="./Chap04.js" charset="utf-8"></script>   </body> </html> 메인 자바스크립트 코드 function output() {   var i;   for (i = 0; i < 6; i++) {     console.log(i);   }   alert("출력이 완료되었습니다, 콘솔창을 확인해주세요!"); } 결과 출력화면 (메인화면 → 콘솔 출력 온 클릭 확인 이벤트 → 개발자 도구를 통해 디버깅 확인) 코드 리뷰 : 웹 개발을 할 때 콘솔 창을 통해 디버깅을 확인하곤 했는데, 이렇게 콘솔창이 등장해서 반갑게 과제를 완료하였습니다. 아무래도 자바스크립트는 파이썬과 동일하게 인터프리터 방식을 통해 입력과 동시에 바로바로 출력이 되는 것을 확인할 수 있는데, 바로바로 디버깅을 확인할 때는 아무래도 빠른 방식으로 확인할 수 있는 방법이 아닐까 생각이 듭니다. 본래는 버튼을 클릭하면 개발자도구를 통해 콘솔창을 바로 열고 싶었으나, 아직까지는 키보드 동작 부분까지는 자세히 알지 못하여 구현을 하다가 막힌 부분이 없지 않아있지만 반복문이 성공적으로 완료되면 이벤트 메세지가 뜨도록 설계를 하였습니다.
klmhyeonwooo
2022.01.13
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 03
포스트를 좋아합니다.
klmhyeonwooo
2022.01.13
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAP 03
메인 HTML 코드 <!DOCTYPE html> <html>   <head>     <title> 모각코 삼행시 테스트 </title>   </head>   <body>     <p>모</p>     <p>각</p>     <p>코</p>     <div class="container">       <button type="submit" name="button" onclick="first()">모</button>       <button type="submit" name="button" onclick="twice()">각</button>       <button type="submit" name="button" onclick="third()">코</button>     </div>     <script src="./Chap03.js"> </script>   </body> </html> 메인 JS 코드 const word = document.getElementsByTagName('p'); function first() {   word[0].innerHTML = "모처럼이니"; } function twice() {   word[1].innerHTML = "각잡고 열심히 하면"; } function third() {   word[2].innerHTML = "코린이 탈출이다"; } 결과물 출력 - 기본 레이아웃 구성 결과물 출력 - 클릭 이벤트 발생 시 코드 리뷰 : 기본 레이아웃을 HTML로 구성을 해주고, 동적인 부분만을 JS 코드로 설정해주면 되는데, p 태그 또한 h 태그처럼 인덱싱 설정이 가능하기 때문에 코드 상단에 변수 설정을 해주고 각 함수 별로 지정을 해주었다.
klmhyeonwooo
2022.01.12
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 01
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.12
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 02
포스트를 좋아합니다.
jgh0711
2022.01.11
@jgh0711님이
모각코 플러스 자바스크립트, CHAP 01
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.11
@jgh0711님이
모각코 플러스 자바스크립트, CHAP 01
포스트를 좋아합니다.
klmhyeonwooo
2022.01.11
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 01
포스트를 좋아합니다.
klmhyeonwooo
2022.01.11
@klmhyeonwooo님이
모각코 플러스 자바스크립트, CHAP 01
포스트를 좋아합니다.
klmhyeonwooo
2022.01.11
@klmhyeonwooo님이 새 포스트를 작성했습니다.
모각코 플러스 자바스크립트, CHAP 01
- 메인 HTML 파일 <html>   <head>     <title> CHAPTER 1-2 </title>     <link rel="stylesheet" href="./Chap01.css">   </head>   <body>       <div class="section1">         <p>PLEASE INPUT YOUR MESSAGE</p>       </div>       <div class= "section2">         <img src="./mImg.jpeg" alt="메인 이미지 확인"                 width="auto" height="300dp">       </div>       <div class = "section3">           <input type="text" class="input" placeholder="INPUT YOUR MESSAGE!">       </div>       <div class = "section4">           <button name="submit" class="btn" type="submit">SUBMIT</button>       </div>   </body> </html> - 메인 CSS 파일 .section1, .section2, .section3, .section4 {   text-align: center; } .section1 {   margin: 50px;   border: 5px solid gray; } .section3 {   margin-top: 60px; } .input {   width: 500px;   height: 50px;   text-align: center;   border-radius: 40px 40px 40px 40px;   outline: 1px solid gray; } input:focus-visible {     outline-color: black; } .section4 {   margin-top: 20px; } .btn {   width: 500px;   height: 38px;   border-radius: 40px 40px 40px 40px; } - 결과물 출력 화면 ' 필자는 별도의 설치 없이 기존의 ATOM 에디터를 사용 ' 섹션별로 구분하여 각 클래스 지정을 통해 속성 설정 및 지정