5609373
2022.02.11
@5609373님이
웹 자바스크립트 5일차
포스트를 좋아합니다.
5609373
2022.02.11
@5609373님이
웹 자바스크립트 4일차
포스트를 좋아합니다.
zo_dang
2022.02.08
@zo_dang님이
웹 자바스크립트 6일차
포스트를 좋아합니다.
jgh0711
2022.01.28
@jgh0711님이
웹 자바스크립트 15일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.28
@jgh0711님이
웹 자바스크립트 15일차
포스트를 좋아합니다.
abbiddo
2022.01.28
@abbiddo님이
웹 자바스크립트 14일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.28
@abbiddo님이
웹 자바스크립트 14일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.28
@abbiddo님이
웹 자바스크립트 15일차
포스트에 댓글을 남겼습니다.
amanda
2022.01.28
@amanda님이
웹 자바스크립트 15일차
포스트에 댓글을 남겼습니다.
amanda
2022.01.28
@amanda님이
웹 자바스크립트 15일차
포스트를 좋아합니다.
Isdew
2022.01.28
@Isdew님이
웹 자바스크립트 14일차
포스트에 댓글을 남겼습니다.
Isdew
2022.01.28
@Isdew님이
웹 자바스크립트 14일차
포스트를 좋아합니다.
jgh0711
2022.01.27
@jgh0711님이
웹 자바스크립트 14일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.27
@jgh0711님이
웹 자바스크립트 14일차
포스트를 좋아합니다.
abbiddo
2022.01.27
@abbiddo님이
웹 자바스크립트 15일차
포스트를 좋아합니다.
abbiddo
2022.01.27
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 15일차
말 가르치기 까지 완성!! 드디어 15일차네요ㅎㅎ 원래 있던 대답들은 변수로 답변이 정해지는 등 다양한 변수가 있기 때문에 그대로 두고 그 외에 말들이 입력되면 말을 배우도록 했습니다! (csv 파일처럼 한 번 입력한다고 평생 바뀌는 건 아니더군요...ㅎㅎ 내심 기대했는데ㅎㅎㅎ) 15-1 코드에 오타나 오류가 살짝 있는 것 같아서 헤매긴 했지만 무사히 끝냈네요!! 다들 수고많으셨습니다 :) < JS > var json=[ { "question":"안녕", "answer":"안호!" }, { "question":"나이", "answer":"그런거 없다 호!" }, { "question":"이름", "answer":"호호!" }, ] var question=""; var answer=""; var key=0; var h2=document.getElementsByTagName("h2"); var k=0,kk=0,l=0; var str="",set; function text_input(){ var value = document.getElementById("console").value; if (k==0) { if (value=="하하호호"){ k=1; str="안녕하세요! 어떤 도움이 필요하신가호?"; typing(); } } else if (value=="따라해 봐"){ k=2; str="알겠다 호!"; typing(); } else if (value=="그만해"){ k=1; str="알겠다 호!"; typing(); } else if (k==2) { value+=" 호!"; str=value; typing(); } else if (value.includes("맛있")||value.includes("먹")){ str="❌안 돼❌"; typing(); alert("❗❗❌❌위험❌❌❗❗"); } else if (value=="불 꺼") { if (l==1) { str="꺼져 있잖호^^"; typing(); } else{ str="ㅇㅋ"; typing(); document.body.style.backgroundColor="black"; l=1; } } else if (value=="불 켜") { if (l==0) { str="켜져 있잖호^^"; typing(); } else { str="ㅇㅋ"; typing(); document.body.style.backgroundColor="white"; l=0; } } else text_check(value) } function text_check(value){ if (key==1){ if(value=="네"){ str="대답을 입력해주세호"; typing(); key=2; } else{ str="호 :("; typing(); key=0; } return 0; } if (key==2){ answer=value; push_json() return 0; } for (let i=0;i<json.length;i++){ if (value==json[i].question){ str=json[i].answer; typing(); return; } } str="말을 가르쳐 주실래호?  (네 or 아니요)" typing(); question=value key=1; } function help(){ kk++; if (kk%2==1) document.getElementById("help").style.display="block"; else document.getElementById("help").style.display="none"; } var i=0; var strr=""; function typing(){ if (i==0){ strr=""; } strr+=str[i]; h2[0].innerHTML=strr; i++; if (strr.length>=str.length) { i=0; return 0; } setTimeout(typing,100); } function push_json(){ json.push({question: `${question}`, answer: `${answer}`}); h2[0].innerHTML = "말을 배웠호!"; key = 0; }
abbiddo
2022.01.27
@abbiddo님이
웹 자바스크립트 14일차
포스트를 좋아합니다.
abbiddo
2022.01.27
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 14일차
저는 CDN이 적용이 안되어서... 일주일 고민하고 뜯어 봤는데도 안되더라구요... 아무것도 없는 새 창에도 해보고 여러가지 해봤는데 안돼서 타이핑 모션을 직접 만들었습니다...ㅎ < JS > var h2=document.getElementsByTagName("h2"); var k=0,kk=0,l=0; var str="",set; function text_input(){ var value = document.getElementById("console").value; if (k==0) { if (value=="하하호호"){ k=1; str="안녕하세요! 어떤 도움이 필요하신가요?"; typing(); } } else if (value=="따라해 봐"){ k=2; str="알겠다 호!"; typing(); } else if (value=="그만해"){ k=1; str="알겠다 호!"; typing(); } else if (k==2) { value+=" 호!"; str=value; typing(); } else if (value.includes("맛있")||value.includes("먹")){ str="❌안 돼❌"; typing(); alert("❗❗❌❌위험❌❌❗❗"); } else if (value=="불 꺼") { if (l==1) { str="꺼져 있잖아^^"; typing(); } else{ str="ㅇㅋ"; typing(); document.body.style.backgroundColor="black"; l=1; } } else if (value=="불 켜") { if (l==0) { str="켜져 있잖아^^"; typing(); } else { str="ㅇㅋ"; typing(); document.body.style.backgroundColor="white"; l=0; } } else { str="호~"; typing(); } } function help(){ kk++; if (kk%2==1) document.getElementById("help").style.display="block"; else document.getElementById("help").style.display="none"; } var i=0; var strr=""; function typing(){ if (i==0){ strr=""; } strr+=str[i]; h2[0].innerHTML=strr; i++; if (strr.length>=str.length) { i=0; return 0; } setTimeout(typing,300); }
abbiddo
2022.01.26
@abbiddo님이
웹 자바스크립트 11일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.26
@abbiddo님이
웹 자바스크립트 11일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.26
@abbiddo님이
웹 자바스크립트 11일차
포스트를 좋아합니다.
abbiddo
2022.01.26
@abbiddo님이
웹 자바스크립트 13일차
포스트를 좋아합니다.
abbiddo
2022.01.26
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 13일차
텍스트 자동 삭제기능도 구현을 해봤습니다! 입력란을 누르면 원래 있던 문구나 전에 입력했던 텍스트가 지워지도록 하였고, 다른 곳을 클릭하면 원래 문구가 다시 나오게 했습니다. 그리고 불이 켜져있을 때 켜라고 하거나 반대의 경우 다른 문구를 출력했구요 따라하기 기능도 구현했습니다. < HTML > <!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>챗봇</title>     <link rel="stylesheet" href="./chatbot.css" />     <script src="./chatbot.js"></script>     <script src="https://kit.fontawesome.com/bf6ed1956f.js" crossorigin="anonymous"></script>   </head>   <body> <div class="layout">   <div class="box">   <h2>먼저 "하하호호"를 입력해 저를 깨워주세요</h2>   </div>   <div class="minibox">   <img src="../images/hoho.png" class="img">   </div>   <div class="minibox">   <input type="text" id="console" class="inputText" placeholder="요기야 요기!!" onfocus="this.value='';this.placeholder='';return true;" onblur="this.placeholder='요기야 요기!!'">   </div>   <div class="textBox">   <button id="btn" onclick="text_input()">Click!</button>   <button id="hbtn" onclick="help()">?</button>   </div>   <div id="help">   <h4>* 하하호호</h4>   <h4>* 먹___ ex) 먹을거야, 먹고싶다</h4>   <h4>* 맛있__ ex) 맛있겠다</h4>   <h4>* 불 꺼/켜</h4>   <h4>* 따라해 봐 / 그만해</h4>   </div>     </div>   </body> </html> < CSS > @font-face {     font-family: 'Wemakeprice-Regular';     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Wemakeprice-Regular.woff') format('woff');     font-weight: normal;     font-style: normal; } .layout{ margin: 60px; } .box{ margin: auto;   width: 300px;   height: 100px;   border: 10px solid #c0c0c0;   border-radius: 10px;   background-color: white;   box-shadow: 3px 3px 4px 3px grey; } .img{ width: 200px; height: 150px;   overflow: auto; } .minibox{ margin: 10px auto; width: 200px; } .inputText{ width: 190px; height: 20px; border: 5px solid #c0c0c0;   border-radius: 10px;   box-shadow: 3px 3px 4px 3px grey;   font-family: 'Wemakeprice-Regular'; } .textBox{ margin: 30px auto; width: 150px; display: flex; flex-direction: row; } #btn{ margin: 0px 0px 0px 10px; width: 100px; height: 30px; background-color: #c0c0c0; border: 0px; border-radius: 20px; font-family: 'Wemakeprice-Regular'; box-shadow: 2px 2px 3px 2px grey;  } #btn:active{ margin: 2px 0px 0px 12px; box-shadow: none; font-family: 'Wemakeprice-Regular'; } #btn:active + button{ margin: 0px -5px 0px 6px; } #hbtn{ margin: 0px -5px 0px 8px; width: 30px; height: 30px; border: 0px; border-radius: 15px; background-color: black; color: white; box-shadow: 1px 1px 2px 1px grey;  } #hbtn:active{ margin: 1px -5px 0px 9px; box-shadow: none; font-family: 'Wemakeprice-Regular'; } #help{ margin: auto; padding: 10px; width: 250px; background-color: #Fafad2; border-radius: 20px; display: none; } h2{ margin: 13px 10px; padding: 10px; font-family: 'Wemakeprice-Regular';   text-align: center; } h4{ margin: 5px; font-family: 'Wemakeprice-Regular'; } body{ background-color: white; } < JS > var h2=document.getElementsByTagName("h2"); var k=0,kk=0,l=0; function text_input(){ var value = document.getElementById("console").value; if (k==0) { if (value=="하하호호"){ h2[0].innerHTML="안녕하세요! 어떤 도움이 필요하신가요?" k=1; } } else if (value=="따라해 봐"){ k=2; h2[0].innerHTML="알겠다 호!"; } else if (value=="그만해"){ k=1; h2[0].innerHTML="알겠다 호!" } else if (k==2) { value+=" 호!"; h2[0].innerHTML=value; } else if (value.includes("맛있")||value.includes("먹")){ h2[0].innerHTML="❌안 돼❌"; alert("❗❗❌❌위험❌❌❗❗"); } else if (value=="불 꺼") { if (l==1) h2[0].innerHTML="꺼져 있잖아^^"; else{ h2[0].innerHTML="ㅇㅋ"; document.body.style.backgroundColor="black"; l=1; } } else if (value=="불 켜") { if (l==0) h2[0].innerHTML="켜져 있잖아^^"; else { h2[0].innerHTML="ㅇㅋ"; document.body.style.backgroundColor="white"; l=0; } } else h2[0].innerHTML="호~"; } function help(){ kk++; if (kk%2==1) document.getElementById("help").style.display="block"; else document.getElementById("help").style.display="none"; }
kimbyunsoo
2022.01.25
@kimbyunsoo님이
웹 자바스크립트 12일차
포스트를 좋아합니다.
kimbyunsoo
2022.01.25
@kimbyunsoo님이
웹 자바스크립트 11일차
포스트를 좋아합니다.
abbiddo
2022.01.25
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 12일차
일단 불 켜/꺼 기능을 추가했습니다. 빅스비나 구글어시스턴트처럼 특정 문구를 말해야 실행이 되도록 했습니다 다른 어떤 기능들을 넣으면 좋을 지 추천해주세요!! < HTML > <!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>챗봇</title>     <link rel="stylesheet" href="./chatbot.css" />     <script src="./chatbot.js"></script>     <script src="https://kit.fontawesome.com/bf6ed1956f.js" crossorigin="anonymous"></script>   </head>   <body> <div class="layout">   <div class="box">   <h2>먼저 "하하호호"를 입력해 저를 깨워주세요</h2>   </div>   <div class="minibox">   <img src="../images/hoho.png" class="img">   </div>   <div class="minibox">   <input type="text" id="console" class="inputText" placeholder="요기야 요기!!">   </div>   <div class="textBox">   <button id="btn" onclick="text_input()">Click!</button>   <button id="hbtn" onclick="help()">?</button>   </div>   <div id="help">   <h4>* 하하호호</h4>   <h4>* 먹___ ex) 먹을거야, 먹고싶다</h4>   <h4>* 맛있__ ex) 맛있겠다</h4>   <h4>* 불 켜</h4>   <h4>* 불 꺼</h4>   </div>     </div>   </body> </html> < CSS > @font-face {     font-family: 'Wemakeprice-Regular';     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Wemakeprice-Regular.woff') format('woff');     font-weight: normal;     font-style: normal; } .layout{ margin: 60px; } .box{ margin: auto;   width: 300px;   height: 100px;   border: 10px solid #c0c0c0;   border-radius: 10px;   background-color: white;   box-shadow: 3px 3px 4px 3px grey; } .img{ width: 200px; height: 150px;   overflow: auto; } .minibox{ margin: 10px auto; width: 200px; } .inputText{ width: 190px; height: 20px; border: 5px solid #c0c0c0;   border-radius: 10px;   box-shadow: 3px 3px 4px 3px grey;   font-family: 'Wemakeprice-Regular'; } .textBox{ margin: 30px auto; width: 150px; display: flex; flex-direction: row; } #btn{ margin: 0px 0px 0px 10px; width: 100px; height: 30px; background-color: #c0c0c0; border: 0px; border-radius: 20px; font-family: 'Wemakeprice-Regular'; box-shadow: 2px 2px 3px 2px grey;  } #btn:active{ margin: 2px 0px 0px 12px; box-shadow: none; font-family: 'Wemakeprice-Regular'; } #btn:active + button{ margin: 0px -5px 0px 6px; } #hbtn{ margin: 0px -5px 0px 8px; width: 30px; height: 30px; border: 0px; border-radius: 15px; background-color: black; color: white; box-shadow: 1px 1px 2px 1px grey;  } #hbtn:active{ margin: 1px -5px 0px 9px; box-shadow: none; font-family: 'Wemakeprice-Regular'; } #help{ margin: auto; padding: 10px; width: 250px; background-color: #Fafad2; border-radius: 20px; display: none; } h2{ margin: 13px 10px; padding: 10px; font-family: 'Wemakeprice-Regular';   text-align: center; } h4{ margin: 5px; font-family: 'Wemakeprice-Regular'; } body{ background-color: white; } < JS > var h2=document.getElementsByTagName("h2"); var k=1,kk=0; function text_input(){ var value = document.getElementById("console").value; if (k!=0) { if (value=="하하호호"){ h2[0].innerHTML="안녕하세요! 어떤 도움이 필요하신가요?" k=0; } } else if (value.includes("맛있")||value.includes("먹")){ h2[0].innerHTML="❌안 돼❌"; alert("❗❗❌❌위험❌❌❗❗"); } else if (value=="불 꺼") { h2[0].innerHTML="ㅇㅋ"; document.body.style.backgroundColor="black"; } else if (value=="불 켜") { h2[0].innerHTML="ㅇㅋ"; document.body.style.backgroundColor="white"; } else h2[0].innerHTML=value; } function help(){ kk++; if (kk%2==1) document.getElementById("help").style.display="block"; else document.getElementById("help").style.display="none"; }
Isdew
2022.01.24
@Isdew님이
웹 자바스크립트 11일차
포스트에 댓글을 남겼습니다.
Isdew
2022.01.24
@Isdew님이
웹 자바스크립트 11일차
포스트를 좋아합니다.
jgh0711
2022.01.24
@jgh0711님이
웹 자바스크립트 11일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.24
@jgh0711님이
웹 자바스크립트 11일차
포스트를 좋아합니다.
abbiddo
2022.01.24
@abbiddo님이
웹 자바스크립트 11일차
포스트를 좋아합니다.
abbiddo
2022.01.21
@abbiddo님이
웹 자바스크립트 10일차
포스트를 좋아합니다.
abbiddo
2022.01.21
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 10일차
레이아웃은 어떻게 만들다 보니 아이폰이 되었네요ㅋㅋㅋ 전화번호는 따로 입력하지 않고 전화번호부를 만들었습니다. 상단에는 현재 시간도 나타내냈습니다 중간 버튼을 눌러야 화면이 켜지게 하였고 버튼은 마우스를 갖다대면 색이 변화하게 하였습니다. < html > <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CALL</title> <link rel="stylesheet" href="./call.css" /> <script src="./call.js"></script> <script src="https://kit.fontawesome.com/bf6ed1956f.js" crossorigin="anonymous"></script> </head> <body> <div class="box"> <div class="top"> <div class="speaker"></div> <div class="camera"></div> </div> <div id="display"> <div class="time"> <h5>ㅤ</h5> <hr> </div> <div class="callnumber">연락처</div> <div class="number"> <div class="n"> <h4>좌변수</h4> <button id="call" onclick="call(0)"><i class="fas fa-phone"></i></button> </div> <div class="n"> <h4>이씨샾</h4> <button id="call" onclick="call(1)"><i class="fas fa-phone"></i></button> </div> <div class="n"> <h4>다자바</h4> <button id="call" onclick="call(2)"><i class="fas fa-phone"></i></button> </div> <div class="n"> <h4>썬파이</h4> <button id="call" onclick="call(3)"><i class="fas fa-phone"></i></button> </div> </div> <div id="calling"> <h1></h1> <h2></h2> <button id="calll" onclick="end()"><i class="fas fa-phone"></i></button> </div> </div> <div class="bottom"> <button class="btn" onclick="display()"></button> </div> </div> </body> </html> < css > .box{ margin: 30px auto; width: 300px; height: 600px; border: 1px solid black; border-radius: 30px; background-color: black; } .top{ margin: auto; height: 60px; width: 300px; } .speaker{ margin: 20px 10px 20px 120px; width: 50px; height: 7px; border: 1px solid black; border-radius: 10px; background-color: white; display: inline-block; } .camera{ margin: 20px 5px; width: 7px; height: 7px; border: 1px solid black; border-radius: 10px; background-color: white; display: inline-block; } #display{ margin: auto; width: 280px; height: 480px; border: 1px solid black; background-color: black; display: flex; flex-direction: column; } .time{ width: 280px; height: 20px; text-align: center; } .callnumber{ margin: 10px; text-align: center; } .number{ display: flex; flex-direction: column; } .n{ margin: auto -2px; display: flex; flex-direction: row; border: 1px solid black; } #call{ margin: 1px 0px 0px 180px; width: 40px; height: 40px; border: 1px solid black; border-radius: 40px; background-color: black; } .bottom{ margin: auto; height: 60px; width: 300px; } #calling{ margin: 10px; text-align: center; display: none; } #calll{ margin: 20px auto; width: 40px; height: 40px; border: 1px solid black; border-radius: 40px; background-color: white; } .btn{ margin: 10px 130px; width: 40px; height: 40px; border: 1px solid black; border-radius: 20px; } .btn:active{ background-color: #e0e0e0; } #call:hover{ background-color: #3cb371 !important; } #calll:hover{ background-color: red !important; } h5{ margin: 0px; } hr{ margin: 0px -2px; background-color: black; border: 0.5px solid black; } h4{ margin: 10px 5px; } < js > var i,time=""; var h1=document.getElementsByTagName('h1'); var h2=document.getElementsByTagName('h2'); var h5=document.getElementsByTagName('h5'); var b=document.getElementsByTagName('button'); var names={ 0:"좌변수", 1:"이씨샾", 2:"다자바", 3:"썬파이"}; var number={ 0:"010-9386-6577", 1:"02-7727-7338", 2:"010-4338-3438", 3:"010-7658-8302"}; function display(){ document.getElementById("display").style.backgroundColor = "white"; for (i=0;i<4;i++) b[i].style.backgroundColor = "white"; } function timer(){ var today = new Date(); time=""; time+= ('0'+today.getHours()).slice(-2); time+= ':'; time+= ('0'+today.getMinutes()).slice(-2); setTimeout(m,998.5); } function m(){  //h5 텍스트 바꾸는게 timer 안에서 안돼서 함수 하나 더만들어서 이중으로 돌림 h5[0].innerHTML=time; timer(); } function call(n){ document.getElementById("calling").style.display="block"; h1[0].innerHTML=names[n]; //변수 이름을 name으로 저장했더니 [obj] 가 하나씩 나옴 name은 변수명으로 X h2[0].innerHTML=number[n]; } function end(){ document.getElementById("calling").style.display="none"; } timer();
abbiddo
2022.01.21
@abbiddo님이
웹 자바스크립트 9일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.21
@abbiddo님이
웹 자바스크립트 9일차
포스트에 댓글을 남겼습니다.
Isdew
2022.01.20
@Isdew님이
웹 자바스크립트 9일차
포스트에 댓글을 남겼습니다.
Isdew
2022.01.20
@Isdew님이
웹 자바스크립트 9일차
포스트를 좋아합니다.
jgh0711
2022.01.20
@jgh0711님이
웹 자바스크립트 9일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.20
@jgh0711님이
웹 자바스크립트 9일차
포스트를 좋아합니다.
abbiddo
2022.01.20
@abbiddo님이
웹 자바스크립트 9일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.20
@abbiddo님이
웹 자바스크립트 9일차
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.20
@klmhyeonwooo님이
웹 자바스크립트 9일차
포스트에 댓글을 남겼습니다.
heimish
2022.01.20
@heimish님이
웹 자바스크립트 9일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.20
@abbiddo님이
웹 자바스크립트 9일차
포스트를 좋아합니다.
abbiddo
2022.01.20
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 9일차
책갈피 느낌으로 만들어 봤습니다! 버튼 클릭했을 때 배경 색 변화와 검정 선 사라지는게 포인트!! js는 오늘 학습한 객체를 이용했구요 반복문을 잘 활용하면 코드가 줄 것 같은데 마땅한 방법이 떠오르질 않아서 노가다로 했습니다~ 글씨체도 바꾸고 싶었는데 바꾸면 버튼 크기 깨질 것 같아서 안건드렸습니다ㅋㅋㅋ < html > <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>영화</title> <link rel="stylesheet" href="./movie.css" /> <script src="./movie.js"></script> </head> <body> <div class="box"> <div id="movie"> <h1>ㅤ</h1> <div id="line"></div> <h3>ㅤ</h3> <h3>ㅤ</h3> <h3>ㅤ</h3> <h3>ㅤ</h3> </div> <button id="btn1" onclick="btn1()">조작된도시</button> <button id="btn2" onclick="btn2()">아나스타샤</button> <button id="btn3" onclick="btn3()">미비포유</button> </div> </body> </html> < css > .box{ width: 500px; height: 400px; margin: 150px auto; } #movie{ padding: 20px; width: 400px; height: 300px; border: 2px solid black; border-radius: 20px; background-color: white; display: inline-block; } #btn1{ display: inline-block; position: relative; border: 2px solid black; border-radius: 0px 10px 10px 0px; background-color: #e0ffff; top: -240px; left: -7px; width: 35px; height: 100px; } #btn2{ display: inline-block; position: relative; border: 2px solid black; border-radius: 0px 10px 10px 0px; background-color: #fafad2; top: -231px; left: 442.5px; width: 35px; height: 100px; } #btn3{ display: inline-block; position: relative; border: 2px solid black; border-radius: 0px 10px 10px 0px; background-color: #fff0f5; top: -123px; left: 402px; width: 35px; height: 80px; } #btn1:hover{ background-color: white; } #btn2:hover{ background-color: white; } #btn3:hover{ background-color: white; } #line{ width: 400px; height: 0px; border: 1px solid white; } < js > var movie1={ title : "제목 : 조작된 도시", date : "* 개봉일 : 2017.02.09", genre : "* 장르 : 범죄, 액션", actor : "* 출연 : 지창욱, 심은경, 안재홍 등", time : "* 러닝타임 : 126분" } var movie2={ title : "제목 : 아나스타샤", date : "* 개봉일 : 1997.12.20", genre : "* 장르 : 애니메이션", actor : "* 출연 : 아나스타샤, 디미트리 등", time : "* 러닝타임 : 94분" } var movie3={ title : "제목 : 미 비포 유", date : "* 개봉일 : 2016.06.01", genre : "* 장르 : 멜로, 로맨스", actor : "* 출연 : 에밀리아 클라크, 샘 클라플린 등", time : "* 러닝타임 : 110분" } var h1=document.getElementsByTagName('h1'); var h3=document.getElementsByTagName('h3'); function btn1(){ document.getElementById("movie").style.backgroundColor = "#e0ffff"; document.getElementById("btn1").style.borderColor = "black black black #e0ffff"; document.getElementById("btn2").style.borderColor = "black" document.getElementById("btn3").style.borderColor = "black" h1[0].innerHTML=movie1.title; document.getElementById("line").style.borderColor = "#a9a9a9"; h3[0].innerHTML=movie1.date; h3[1].innerHTML=movie1.genre; h3[2].innerHTML=movie1.actor; h3[3].innerHTML=movie1.time; } function btn2(){ document.getElementById("movie").style.backgroundColor = "#fafad2"; document.getElementById("btn2").style.borderColor = "black black black #fafad2"; document.getElementById("btn1").style.borderColor = "black" document.getElementById("btn3").style.borderColor = "black" h1[0].innerHTML=movie2.title; document.getElementById("line").style.borderColor = "#a9a9a9"; h3[0].innerHTML=movie2.date; h3[1].innerHTML=movie2.genre; h3[2].innerHTML=movie2.actor; h3[3].innerHTML=movie2.time; } function btn3(){ document.getElementById("movie").style.backgroundColor = "#fff0f5"; document.getElementById("btn3").style.borderColor = "black black black #fff0f5"; document.getElementById("btn1").style.borderColor = "black" document.getElementById("btn2").style.borderColor = "black" h1[0].innerHTML=movie3.title; document.getElementById("line").style.borderColor = "#a9a9a9"; h3[0].innerHTML=movie3.date; h3[1].innerHTML=movie3.genre; h3[2].innerHTML=movie3.actor; h3[3].innerHTML=movie3.time; }
Isdew
2022.01.20
@Isdew님이
웹 자바스크립트 8일차
포스트를 좋아합니다.
amanda
2022.01.20
@amanda님이
웹 자바스크립트 8일차
포스트를 좋아합니다.
abbiddo
2022.01.19
@abbiddo님이
웹 자바스크립트 8일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.19
@jgh0711님이
웹 자바스크립트 8일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.19
@jgh0711님이
웹 자바스크립트 8일차
포스트를 좋아합니다.
abbiddo
2022.01.19
@abbiddo님이
웹 자바스크립트 07일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.19
@abbiddo님이
웹 자바스크립트 07일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.19
@abbiddo님이
웹 자바스크립트 8일차
포스트를 좋아합니다.
abbiddo
2022.01.19
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 8일차
버튼을 누를 때 하나씩 출력하는 수동 버전이랑 무한 반복하는 자동 버전 두 가지를 만들었습니다! 자동버전은 auto 버튼 자리에 stop 버튼을 만들어 정지할 수 있게 만들었습니다. 정지 후 수동 버튼을 클릭하면 이어서 출력되고, 자동 버전은 항상 처음부터 시작하도록 만들었습니다 요즘 버튼 효과에 빠져버렸네요ㅋㅋㅋㅋㅋㅋㅋㅋㅋ < html > <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>전광판</title> <link rel="stylesheet" href="./display.css" /> <script src="./display.js"></script> </head> <body> <div class="box"> <h1></h1> </div> <div class="btnBox"> <button id="manualbtn" onclick="manual()">manual</button> <button id="autobtn" onclick="auto()">auto</button> <button id="stopbtn" onclick="stop()">stop</button> </div> </body> </html> < css > body{ background-color: black; } .box{ margin: 50px auto; width: 900px; height: 300px; border: 8px dotted white; border-radius: 50px; } .btnBox{ margin: auto; width: 406px; height: 200px; } #manualbtn{ margin: 50px; width: 100px; height: 100px; border: 0px; border-radius: 50px; box-shadow: 2px 2px 0px 1px grey; font-size: 27px; } #manualbtn:active{ position: relative; top: 2px; left: 2px; box-shadow: none; } #autobtn{ margin: 50px; width: 100px; height: 100px; border: 0px; border-radius: 50px; box-shadow: 2px 2px 0px 1px grey; font-size: 27px; display: inline-block; } #autobtn:active{ position: relative; top: 2px; left: 2px; box-shadow: none; } #stopbtn{ margin: 50px; width: 100px; height: 100px; border: 0px; border-radius: 50px; box-shadow: 2px 2px 0px 1px grey; font-size: 27px; position: relative; top: -200px; left: 205px; display: none; } #stopbtn:active{ position: relative; top: -198px; left: 207px; box-shadow: none; } h1{ color: #ffffff; text-align: center; font-size: 100px; } < js > var name="abbiddo"; var str="" var i=0,j=0,k=0,set; var num; var colorlist="0123456789abcdef"; var color="#"; var h1=document.getElementsByTagName('h1'); function colorchoice(){ var i,n; color="#" for (i=0;i<6;i++){ n=Math.floor(Math.random()*20) if (n>15) i--; else{ color+=colorlist[n]; } } } function manual() { colorchoice(); h1[0].style.color=color; str+=name[i++]; h1[0].innerHTML=str; if (i==7){ i=0; str=""; } } function auto(){ if (j==0){ j=1; document.getElementById("stopbtn").style.display = "block"; document.getElementById("autobtn").style.display = "none"; i=0; str=""; } realstop() manual(); set=setTimeout(auto,1000); } function stop(){ k=1; realstop(); } function realstop(){ if (k==1) { clearTimeout(set); document.getElementById("stopbtn").style.display = "none"; document.getElementById("autobtn").style.display = "inline-block"; j=0; k=0; } }
Isdew
2022.01.18
@Isdew님이
웹 자바스크립트 07일차
포스트에 댓글을 남겼습니다.
Isdew
2022.01.18
@Isdew님이
웹 자바스크립트 07일차
포스트를 좋아합니다.
amanda
2022.01.18
@amanda님이
웹 자바스크립트 07일차
포스트에 댓글을 남겼습니다.
amanda
2022.01.18
@amanda님이
웹 자바스크립트 07일차
포스트를 좋아합니다.
abbiddo
2022.01.18
@abbiddo님이
웹 자바스크립트 07일차
포스트를 좋아합니다.
abbiddo
2022.01.18
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 07일차
오늘의 스톱워치는 꽤 걸렸네요..!! 처음보는 함수 알아가는데 시간을 좀 쓴 것 같아요 무한 반복문, 버튼 눌림 감지 등등 찾아보고 해보다가 결국은 재귀로 선택했습니다! 사실 버튼 디자인에 더 시간을 쏟은 것 같은...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ https://abbiddo.github.io/MGK_JS/%EC%8A%A4%ED%86%B1%EC%9B%8C%EC%B9%98/stopwatch.html < html > <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>stopwatch</title> <link rel="stylesheet" href="./stopwatch.css" /> <script src="./stopwatch.js"></script> </head> <body> <div class="box"> <div class="time"> <h1>00 : 00 : 00</h1> </div> <div class="btn"> <button class="stop" onclick="stop()">stop</button> <button class="reset" onclick="reset()">reset</button> <button class="start" onclick="start()">start</button> </div> </div> </body> </html> < css > .box{ margin: 150px auto; width: 500px; height: 330px; background-color: #E3C4FF; border-radius: 35px; border: 1px solid #E3C4FF; box-shadow: 12px 12px 4px #EBB9FF; } .time{ margin: auto; width: 400px; height: 100px; background-color: white; border-radius: 10px; } .btn{ margin: 40px auto; width: 371.5px; } .stop{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #ff4500; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .stop:active{ position: relative;    /** 위치 이동을 위해 position, top 사용 **/ top: 3px; left: 3px; box-shadow: none; } .reset{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #ffa500; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .reset:active{ position: relative; top: 3px; left: 3px; box-shadow: none; } .start{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #3cb371; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .start:active{ position: relative; top: 3px; left: 3px; box-shadow: none; } h1{ text-align: center; font-size: 70px; } < js > var h=0,m=0,s=0,k=0; var time=""; var h1=document.getElementsByTagName('h1'); var set; function stop(){ k=1; timestop(); } function reset(){ clearTimeout(set); time="00 : 00 : 00"; h=0; m=0; s=0; h1[0].innerHTML=time; } function start(){ timer(); timestop(); set=setTimeout(start,999.5) } function timestop(){ if (k==1) clearTimeout(set); } function timer(){ time=""; s++; if (s>=60){ s-=60; m++; } if (m>=60){ m-=60; h++; } if (h==99 && m==59 && s==59){ stop(); } if (h<10) time+='0'; time+=h; time+=' : '; if (m<10) time+='0'; time+=m; time+=' : '; if (s<10) time+='0'; time+=s; h1[0].innerHTML=time; }
abbiddo
2022.01.18
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 7일차
오늘의 스톱워치는 꽤 걸렸네요..!! 처음보는 함수 알아가는데 시간을 좀 쓴 것 같아요 무한 반복문, 버튼 눌림 감지 등등 찾아보고 해보다가 결국은 재귀로 선택했습니다! 사실 버튼 디자인에 더 시간을 쏟은 것 같은...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ https://abbiddo.github.io/MGK_JS/%EC%8A%A4%ED%86%B1%EC%9B%8C%EC%B9%98/stopwatch.html < html > <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>stopwatch</title> <link rel="stylesheet" href="./stopwatch.css" /> <script src="./stopwatch.js"></script> </head> <body> <div class="box"> <div class="time"> <h1>00 : 00 : 00</h1> </div> <div class="btn"> <button class="stop" onclick="stop()">stop</button> <button class="reset" onclick="reset()">reset</button> <button class="start" onclick="start()">start</button> </div> </div> </body> </html> < css > .box{ margin: 150px auto; width: 500px; height: 330px; background-color: #E3C4FF; border-radius: 35px; border: 1px solid #E3C4FF; box-shadow: 12px 12px 4px #EBB9FF; } .time{ margin: auto; width: 400px; height: 100px; background-color: white; border-radius: 10px; } .btn{ margin: 40px auto; width: 371.5px; } .stop{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #ff4500; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .stop:active{ position: relative;    /** 위치 이동을 위해 position, top 사용 **/ top: 3px; left: 3px; box-shadow: none; } .reset{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #ffa500; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .reset:active{ position: relative; top: 3px; left: 3px; box-shadow: none; } .start{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #3cb371; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .start:active{ position: relative; top: 3px; left: 3px; box-shadow: none; } h1{ text-align: center; font-size: 70px; } < js > var h=0,m=0,s=0,k=0; var time=""; var h1=document.getElementsByTagName('h1'); var set; function stop(){ k=1; timestop(); } function reset(){ clearTimeout(set); time="00 : 00 : 00"; h=0; m=0; s=0; h1[0].innerHTML=time; } function start(){ timer(); timestop(); set=setTimeout(start,999.5) } function timestop(){ if (k==1) clearTimeout(set); } function timer(){ time=""; s++; if (s>=60){ s-=60; m++; } if (m>=60){ m-=60; h++; } if (h==99 && m==59 && s==59){ stop(); } if (h<10) time+='0'; time+=h; time+=' : '; if (m<10) time+='0'; time+=m; time+=' : '; if (s<10) time+='0'; time+=s; h1[0].innerHTML=time; }
abbiddo
2022.01.18
@abbiddo님이
웹 자바스크립트 7일차
포스트를 좋아합니다.
abbiddo
2022.01.18
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 7일차
오늘의 스톱워치는 꽤 걸렸네요..!! 처음보는 함수 알아가는데 시간을 좀 쓴 것 같아요 무한 반복문, 버튼 눌림 감지 등등 찾아보고 해보다가 결국은 재귀로 선택했습니다! 사실 버튼 디자인에 더 시간을 쏟은 것 같은...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ https://abbiddo.github.io/MGK_JS/%EC%8A%A4%ED%86%B1%EC%9B%8C%EC%B9%98/stopwatch.html < html > <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>stopwatch</title> <link rel="stylesheet" href="./stopwatch.css" /> <script src="./stopwatch.js"></script> </head> <body> <div class="box"> <div class="time"> <h1>00 : 00 : 00</h1> </div> <div class="btn"> <button class="stop" onclick="stop()">stop</button> <button class="reset" onclick="reset()">reset</button> <button class="start" onclick="start()">start</button> </div> </div> </body> </html> < css > .box{ margin: 150px auto; width: 500px; height: 330px; background-color: #E3C4FF; border-radius: 35px; border: 1px solid #E3C4FF; box-shadow: 12px 12px 4px #EBB9FF; } .time{ margin: auto; width: 400px; height: 100px; background-color: white; border-radius: 10px; } .btn{ margin: 40px auto; width: 371.5px; } .stop{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #ff4500; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .stop:active{ position: relative;    /** 위치 이동을 위해 position, top 사용 **/ top: 3px; left: 3px; box-shadow: none; } .reset{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #ffa500; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .reset:active{ position: relative; top: 3px; left: 3px; box-shadow: none; } .start{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #3cb371; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .start:active{ position: relative; top: 3px; left: 3px; box-shadow: none; } h1{ text-align: center; font-size: 70px; } < js > var h=0,m=0,s=0,k=0; var time=""; var h1=document.getElementsByTagName('h1'); var set; function stop(){ k=1; timestop(); } function reset(){ clearTimeout(set); time="00 : 00 : 00"; h=0; m=0; s=0; h1[0].innerHTML=time; } function start(){ timer(); timestop(); set=setTimeout(start,999.5) } function timestop(){ if (k==1) clearTimeout(set); } function timer(){ time=""; s++; if (s>=60){ s-=60; m++; } if (m>=60){ m-=60; h++; } if (h==99 && m==59 && s==59){ stop(); } if (h<10) time+='0'; time+=h; time+=' : '; if (m<10) time+='0'; time+=m; time+=' : '; if (s<10) time+='0'; time+=s; h1[0].innerHTML=time; }
abbiddo
2022.01.18
@abbiddo님이
웹 자바스크립트 7일차
포스트를 좋아합니다.
abbiddo
2022.01.18
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 7일차
오늘의 스톱워치는 꽤 걸렸네요..!! 처음보는 함수 알아가는데 시간을 좀 쓴 것 같아요 무한 반복문, 버튼 눌림 감지 등등 찾아보고 해보다가 결국은 재귀로 선택했습니다! 사실 버튼 디자인에 더 시간을 쏟은 것 같은...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ https://abbiddo.github.io/MGK_JS/%EC%8A%A4%ED%86%B1%EC%9B%8C%EC%B9%98/stopwatch.html < html > <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>stopwatch</title> <link rel="stylesheet" href="./stopwatch.css" /> <script src="./stopwatch.js"></script> </head> <body> <div class="box"> <div class="time"> <h1>00 : 00 : 00</h1> </div> <div class="btn"> <button class="stop" onclick="stop()">stop</button> <button class="reset" onclick="reset()">reset</button> <button class="start" onclick="start()">start</button> </div> </div> </body> </html> < css > .box{ margin: 150px auto; width: 500px; height: 330px; background-color: #E3C4FF; border-radius: 35px; border: 1px solid #E3C4FF; box-shadow: 12px 12px 4px #EBB9FF; } .time{ margin: auto; width: 400px; height: 100px; background-color: white; border-radius: 10px; } .btn{ margin: 40px auto; width: 371.5px; } .stop{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #ff4500; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .stop:active{ position: relative;    /** 위치 이동을 위해 position, top 사용 **/ top: 3px; left: 3px; box-shadow: none; } .reset{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #ffa500; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .reset:active{ position: relative; top: 3px; left: 3px; box-shadow: none; } .start{ margin: 10px; width: 100px; height: 100px; border: 0px; border-radius: 70px; background-color: #3cb371; color: white; font-size: 25px; box-shadow: 3px 3px 4px 2px grey; } .start:active{ position: relative; top: 3px; left: 3px; box-shadow: none; } h1{ text-align: center; font-size: 70px; } < js > var h=0,m=0,s=0,k=0; var time=""; var h1=document.getElementsByTagName('h1'); var set; function stop(){ k=1; timestop(); } function reset(){ clearTimeout(set); time="00 : 00 : 00"; h=0; m=0; s=0; h1[0].innerHTML=time; } function start(){ timer(); timestop(); set=setTimeout(start,999.5) } function timestop(){ if (k==1) clearTimeout(set); } function timer(){ time=""; s++; if (s>=60){ s-=60; m++; } if (m>=60){ m-=60; h++; } if (h==99 && m==59 && s==59){ stop(); } if (h<10) time+='0'; time+=h; time+=' : '; if (m<10) time+='0'; time+=m; time+=' : '; if (s<10) time+='0'; time+=s; h1[0].innerHTML=time; }
sue5116
2022.01.18
@sue5116님이
웹 자바스크립트 6일차
포스트를 좋아합니다.
abbiddo
2022.01.18
@abbiddo님이
웹 자바스크립트 6일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.18
@abbiddo님이
웹 자바스크립트 6일차
포스트에 댓글을 남겼습니다.
jhyglory
2022.01.17
@jhyglory님이
웹 자바스크립트 6일차
포스트를 좋아합니다.
jamiee0214
2022.01.17
@jamiee0214님이
웹 자바스크립트 6일차
포스트에 댓글을 남겼습니다.
jamiee0214
2022.01.17
@jamiee0214님이
웹 자바스크립트 6일차
포스트를 좋아합니다.
Isdew
2022.01.17
@Isdew님이
웹 자바스크립트 6일차
포스트에 댓글을 남겼습니다.
Isdew
2022.01.17
@Isdew님이
웹 자바스크립트 6일차
포스트를 좋아합니다.
abbiddo
2022.01.17
@abbiddo님이
웹 자바스크립트 6일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.17
@jgh0711님이
웹 자바스크립트 6일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.17
@jgh0711님이
웹 자바스크립트 6일차
포스트를 좋아합니다.
abbiddo
2022.01.17
@abbiddo님이
웹 자바스크립트 6일차
포스트를 좋아합니다.
abbiddo
2022.01.17
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 6일차
사칙연산을 이용한 계산기를 만들었습니다. 주말 내내 심심해서...ㅎㅎㅎ 다항식 계산 (입력순으로 계산, 곱셈 나눗셈 우선 X) answer 기능 (계산 후 연산자를 클릭하면 이전 결과값에 계산) reset 기능 (버튼을 따로 만들지는 않았지만 '=' 클릭 후 숫자를 입력하면 새로운 계산 가능) 실수 계산 가능 아직 구현하지 못 한 기능(연산자 두 번 클릭, 숫자 입력 전 소수점 클릭 등)들이 훨씬 많지만 https://abbiddo.github.io/MGK_JS/%EA%B3%84%EC%82%B0%EA%B8%B0/cal.html 요기 링크로 들어가면 직접 이용해볼 수 있습니다! 오늘은 자랑을 위해 계산기 움짤 먼저 올립니당ㅎㅎㅎㅎ 만들고 보니까 또 계산기를 만드신 분이 있더라구요 신기신기! 이건 콘솔에 결과값 출력한 것 입니다! < html > <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>claculator</title> <link rel="stylesheet" href="./cal.css" /> <script src="./cal.js"></script> </head> <body> <div class="box"> <div class="text"> <h2>0</h2> </div> <div class="line"></div> <button class="btn" onclick="num(7)">7</button> <button class="btn" onclick="num(8)">8</button> <button class="btn" onclick="num(9)">9</button> <button class="btn" onclick="symbol(4)">÷</button> <br> <button class="btn" onclick="num(4)">4</button> <button class="btn" onclick="num(5)">5</button> <button class="btn" onclick="num(6)">6</button> <button class="btn" onclick="symbol(3)">×</button> <br> <button class="btn" onclick="num(1)">1</button> <button class="btn" onclick="num(2)">2</button> <button class="btn" onclick="num(3)">3</button> <button class="btn" onclick="symbol(2)">–</button> <br> <button class="btn" onclick="dot()">.</button> <button class="btn" onclick="num(0)">0</button> <button class="btn" onclick="result()">=</button> <button class="btn" onclick="symbol(1)">+</button> </div> </body> </html> < css > .box{ margin: 70px auto; width: 378px; background-color: #e6e6fa; padding: 15px; border-radius: 20px; } .text{ background-color: white; height: 80px; width: 343px; border: 2px solid black; margin: 9px auto 18px; padding: 10px; border-radius: 5px;  text-align: right; } .line{ width: 378px; height: 0px; border: 1px solid black; margin: 9px auto; } .btn{ font-size: 25px; background-color: #f8f8ff; margin: 9px 5px; width: 80px; height: 80px; border-radius: 50px; border-width: 3.1px; } .btn:hover{ background-color: white; } < js > var n1=0,n2=0,cnt=0; var s=0,d=0,i=1; var str=""; var h2=document.getElementsByTagName('h2'); function num(n){ if (cnt>0) { n1=0; str=""; cnt=0; } h2[0].innerHTML=str; str+=n; if (s==0){ if (d==0) n1*=10; else{ i*=0.1; n*=i; } n1+=n; } else { if (d==0) n2*=10; else{ i*=0.1; n*=i; } n2+=n; } h2[0].innerHTML=str; } function symbol(n){ if (s==1) n1+=n2; else if (s==2) n1-=n2; else if (s==3) n1*=n2; else if (s==4) n1/=n2; n2=0; s=n; cnt=0; if (s==1) str+="+"; else if (s==2) str+="-"; else if (s==3) str+="×"; else str+="÷"; h2[0].innerHTML=str; d=0; i=1; } function dot(){ d=1; str+="."; h2[0].innerHTML=str; } function result(){ cnt+=1; str+="="; if (s==1) n1+=n2; else if (s==2) n1-=n2; else if (s==3) n1*=n2; else n1/=n2; n1=Math.round(n1*1000)/1000   //0.2*0.4=0.0800000002 를 방지하기 위함 console.log(n1); str+=n1; h2[0].innerHTML=str; n2=0; s=0; str=n1; d=0; i=1; }
abbiddo
2022.01.15
@abbiddo님이
웹 자바스크립트 5일차
포스트에 댓글을 남겼습니다.
amanda
2022.01.14
@amanda님이
웹 자바스크립트 5일차
포스트를 좋아합니다.
Isdew
2022.01.14
@Isdew님이
웹 자바스크립트 5일차
포스트를 좋아합니다.
jgh0711
2022.01.14
@jgh0711님이
웹 자바스크립트 5일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.14
@jgh0711님이
웹 자바스크립트 5일차
포스트를 좋아합니다.
abbiddo
2022.01.14
@abbiddo님이
웹 자바스크립트 5일차
포스트에 댓글을 남겼습니다.
jamiee0214
2022.01.14
@jamiee0214님이
웹 자바스크립트 5일차
포스트에 댓글을 남겼습니다.
jamiee0214
2022.01.14
@jamiee0214님이
웹 자바스크립트 5일차
포스트를 좋아합니다.
abbiddo
2022.01.14
@abbiddo님이
웹 자바스크립트 5일차
포스트를 좋아합니다.
abbiddo
2022.01.14
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 5일차
다양한 방법으로 시도를 해봤습니다! 번수를 선언하고 변수의 타입을 출력하는 방법과 변수를 선언하지 않고 값의 타입을 출력하는 방법으로 했습니다. 당연하게 typeof() 형식을 사용했는데 예시에는 괄호가 없길래 없앴더니 둘 다 되더라구요! 새로운 발견ㅎㅎ html은 또 3행시를 재탕했답니다...ㅎㅎㅎㅎ <js> var n=21; var str="abbiddo"; var ft=true; var obj={0:"zore", 1:"one", 2:"two"}; console.log(typeof n); console.log(typeof str); console.log(typeof ft); console.log(typeof obj); console.log(typeof a); console.log(typeof 13); console.log(typeof "Hello"); console.log(typeof false); console.log(typeof {3:"three", 4:"four"});
abbiddo
2022.01.13
@abbiddo님이
웹 자바스크립트 4일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.13
@abbiddo님이
웹 자바스크립트 4일차
포스트에 댓글을 남겼습니다.
abbiddo
2022.01.13
@abbiddo님이
웹 자바스크립트 4일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.13
@jgh0711님이
웹 자바스크립트 4일차
포스트에 댓글을 남겼습니다.
jgh0711
2022.01.13
@jgh0711님이
웹 자바스크립트 4일차
포스트를 좋아합니다.
heimish
2022.01.13
@heimish님이
웹 자바스크립트 4일차
포스트를 좋아합니다.
Isdew
2022.01.13
@Isdew님이
웹 자바스크립트 4일차
포스트에 댓글을 남겼습니다.
Isdew
2022.01.13
@Isdew님이
웹 자바스크립트 4일차
포스트를 좋아합니다.
klmhyeonwooo
2022.01.13
@klmhyeonwooo님이
웹 자바스크립트 4일차
포스트에 댓글을 남겼습니다.
klmhyeonwooo
2022.01.13
@klmhyeonwooo님이
웹 자바스크립트 4일차
포스트를 좋아합니다.
flatty12
2022.01.13
@flatty12님이
웹 자바스크립트 4일차
포스트를 좋아합니다.
abbiddo
2022.01.13
@abbiddo님이
웹 자바스크립트 4일차
포스트를 좋아합니다.
abbiddo
2022.01.13
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 4일차
어제 삼행시 html을 그대로 이용했기 때문에 js 코드만 업로드 합니다! 크게 달라진건 없고 count 값을 0으로 초기화 시켜주고 모든 버튼 함수 내부에 count++; 값을 콘솔에 출력시켜주는 코드를 추가했어요 움짤에 버튼 클릭이 잘 보이진 않지만 어떤 버튼을 클릭해도 상관없이 카운트 됩니다! <js> count=0; function change0(){ var h1=document.getElementsByTagName('h1'); h1[0].innerHTML="모여서"; console.log(count++); } function change1(){ var h1=document.getElementsByTagName('h1'); h1[1].innerHTML="각자"; console.log(count++); } function change2(){ var h1=document.getElementsByTagName('h1'); h1[2].innerHTML="코딩"; console.log(count++); }
jamiee0214
2022.01.12
@jamiee0214님이
웹 자바스크립트 3일차
포스트를 좋아합니다.
Isdew
2022.01.12
@Isdew님이
웹 자바스크립트 3일차
포스트를 좋아합니다.
sac7160
2022.01.12
@sac7160님이
웹 자바스크립트 3일차
포스트를 좋아합니다.
abbiddo
2022.01.12
@abbiddo님이
웹 자바스크립트 3일차
포스트를 좋아합니다.
abbiddo
2022.01.12
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 3일차
저는 3행시를 모여서 각자 코딩으로 하였습니다!!ㅎㅎ 그리고 버튼 스타일을 css파일을 따로 만들지 않고 head에 넣어줬어요 버튼 마다 넣기에는 너무 길고 지저분하고 css파일을 만들자기엔 딸랑 하나 밖에 안돼서 head를 택했습니당 어제 약간 예습을 했더니 수월하게 끝났네요~! 벌써 이것 저것 응용하고 싶은 마음이 들어요!!ㅎㅎ <html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" />     <title>모각코 JS</title> ​     <script src="./3행시.js"></script>     <style>     .btn{     border-radius: 10px;     background-color: #c0c0c0;     width: 50px;     height: 40px;     font-size: 1.2em;     }     </style> </head> <body> <h1>모</h1> <h1>각</h1> <h1>코</h1> <button class="btn" onclick="change0()">모</button> <button class="btn" onclick="change1()">각</button> <button class="btn" onclick="change2()">코</button> </body> </html> <js> function change0(){ var h1=document.getElementsByTagName('h1'); h1[0].innerHTML="모여서"; } function change1(){ var h1=document.getElementsByTagName('h1'); h1[1].innerHTML="각자"; } function change2(){ var h1=document.getElementsByTagName('h1'); h1[2].innerHTML="코딩"; } 전 후
klmhyeonwooo
2022.01.12
@klmhyeonwooo님이
웹 자바스크립트 2일차
포스트를 좋아합니다.
klmhyeonwooo
2022.01.12
@klmhyeonwooo님이
웹 자바스크립트 2일차
포스트에 댓글을 남겼습니다.
rlaek12
2022.01.11
@rlaek12님이
웹 자바스크립트 2일차
포스트에 댓글을 남겼습니다.
rlaek12
2022.01.11
@rlaek12님이
웹 자바스크립트 2일차
포스트를 좋아합니다.
abbiddo
2022.01.11
@abbiddo님이
웹 자바스크립트 2일차
포스트를 좋아합니다.
abbiddo
2022.01.11
@abbiddo님이
웹 자바스크립트 1일차
포스트를 좋아합니다.
abbiddo
2022.01.11
@abbiddo님이
웹 자바스크립트 1일차
포스트를 좋아합니다.
abbiddo
2022.01.11
@abbiddo님이
웹 자바스크립트 2일차
포스트를 좋아합니다.
abbiddo
2022.01.10
@abbiddo님이 새 포스트를 작성했습니다.
웹 자바스크립트 1일차
< html > <!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>모각코 JS</title>     <link rel="stylesheet" href="./static/JS.css" />     <script src="https://kit.fontawesome.com/bf6ed1956f.js" crossorigin="anonymous"></script>   </head>   <body> <div class="layout">   <div class="box">   <h2>냠~</h2>   </div>   <div class="minibox">   <img src="./static/images/hoho.jpg" class="img">   </div>   <div class="minibox">   <input type="text" class="inputText" placeholder=" 맛있겠지~?">   </div>   <div class="textBox">   <button class="btn">먹으려고...?</button>   </div>     </div>   </body> </html> < CSS > @font-face {     font-family: 'Wemakeprice-Regular';     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Wemakeprice-Regular.woff') format('woff');     font-weight: normal;     font-style: normal; } .layout{ margin: 100px; } .box{ margin: auto;   width: 300px;   height: 100px;   border: 10px solid #c0c0c0;   border-radius: 10px; } .img{ width: 200px; height: 150px;   overflow: auto; } .minibox{ margin: 10px auto; width: 200px; } .inputText{ width: 190px; height: 20px; border: 5px solid #c0c0c0;   border-radius: 10px;   font-family: 'Wemakeprice-Regular'; } .textBox{ margin: 10px auto; width: 100px; } .btn{ margin: auto; width: 100px; height: 30px; background-color: #a9a9a9; border-radius: 20px; font-family: 'Wemakeprice-Regular'; } h2{ font-family: 'Wemakeprice-Regular';   text-align: center; } 역시 똥손에게 디자인은 너무 어렵네요...ㅎㅎ HTML/CSS는 모각코 과정으로 다뤄본 게 다 인데 그것도 1년이 다 되어가서 하나도 기억이 안나네요ㅜㅜ 호멮이지 프로젝트 참고하고 열심히 서치해가며 완성했습니다! 사실 그냥 노가다로 어떻게든 한 것 같은ㅋㅋㅋㅋㅋㅋㅋㅋ 그래도 다시 보니까 시간은 오래 걸려도 기억이 나더라구요! 귀여운 호빵 착는 것도 시간이 은근 걸렸다는...ㅎㅎㅎ (포스트 작성했더니 오류나서 날라갔다가 다시쓰는 글입니다...ㅠ 오류나서 새로고침 했더니 저도 다른 분 계정을 로그인하는 경험을 하고 왔습니다...ㅎ)