JavaScript
-
210928_image,random,marquee,array,buttonJavaScript 2021. 9. 28. 11:40
DOCTYPE html> Insert title here #photo{ position: absolute; left: 500px; top: 150px; width: 400px; height: 500px; border: 5px groove gold; } #btnRandom{ margin-left: 400px; width: 100px; height: 100px; } window.onload=function(){ //배열에 10개의 이미지를 넣는다 var imgarr=new Array(); imgarr.push("../image/1.jpg"); imgarr.push("../image/2.jpg"); imgarr.push("../image/3.jpg"); imgarr.push("../image/4.jpg"); ..
-
210928_image,button,zoom-in/outJavaScript 2021. 9. 28. 10:54
DOCTYPE html> Insert title here 떡볶이 삼겹살 다코야끼 점점작게 점점크게 var b1=document.getElementById("btn1"); var b2=document.getElementById("btn2"); var b3=document.getElementById("btn3"); var b4=document.getElementById("btn4"); var b5=document.getElementById("btn5"); var img=document.getElementById("img1"); //버튼1..떡볶이 b1.onclick=function(){ img.setAttribute("src", "../image/떡볶이.png"); } //버튼2..삼겹살 b2.onclick..
-
210927_table,checkbox,radioJavaScript 2021. 9. 28. 10:25
DOCTYPE html> Insert title here table { border: 3px solid green; width: 500px; border-collapse: collapse; margin-left: auto; margin-right: auto; } th,td { border: 1px solid black; } #result { width: 500px; height: 300px; font-size: 1.3em; border: 2px inset gray; margin-top: 20px; padding: 5px 10px; margin-left: auto; margin-right: auto; } 폼 태그들 연습 이름 비밀번호 혈액형 A형 B형 AB형 O형 생년월일 취미 낚시 게임 여행 영화감상 결..
-
210927_button,onchangeJavaScript 2021. 9. 27. 17:53
DOCTYPE html> Insert title here #out{ font-family: 'Do Hyeon', sans-serif; padding: 20px 20px; width: 500px; margin-top: 50px; border: 0px solid black; } //버튼이벤트_3씩 감소/증가 //8보다 작아지면 alert:더이상 줄일수 없습니다 후에 프로그램 종료, 60보다 커지면 alert:~ 종료 //버튼 클릭시마다 현재 글꼴사이즈를 fsize에 저장 window.onload=function (){ var fsize=document.getElementById("fsize"); var out=document.getElementById("out"); fsize.innerHTML="현재 글꼴 ..
-
210927_image,button,zoom-in/out,JavaScript 2021. 9. 27. 15:30
DOCTYPE html> Insert title here #btn{ margin-left: 30px; margin-bottom: 20px; } function photoSmall() { var myimg=document.getElementById("myimg"); //myimg의 width속성 가져오기 var w=myimg.getAttribute("width"); console.log(typeof(w)); //w속성을 콘솔창에 찍어보기 w-=10; //string타입이라 하더라도 -,*는 숫자로 계산됨(+만 안 되기에 콘솔창에 찍어보는 것) myimg.setAttribute("width",w); } function photoLarge() { var myimg=document.getElementById("..
-
210927_array,button,image,push,innerHTMLJavaScript 2021. 9. 27. 15:28
DOCTYPE html> Insert title here #result img{ max-width: 300px; } 이미지출력 //배열에 이미지 var imgarr=new Array(); //imgarr[0]=""; //imgarr.push(""); 둘 중 하나로 imgarr.push("../cat/IMG_5126.JPG"); imgarr.push("../cat/IMG_5188.JPG"); imgarr.push("../cat/IMG_5507.JPG"); imgarr.push("../cat/IMG_6535.JPG"); imgarr.push("../cat/IMG_6600.JPG"); var r=document.getElementById("result"); function writeImage() { var i..
-
210927_image,innerHTML,confirm,buttonJavaScript 2021. 9. 27. 14:05
DOCTYPE html> Insert title here button { width: 100px; height: 30px; background-color: #e6e6fa; color: white; border-radius: 30px; margin-left: 10px; } div img{ max-width: 130px; /* 130이 넘을 경우만 적용 */ } shop star minions /* 헤드에 스크립트를 안 뒀기에 window.onload 안 해도 됨 */ var r=document.getElementById("result"); //버튼1 function buttonOne() { var a=confirm("상품을 출력할까요?"); if(a){ r.innerHTML+=""; } } //버튼2 fu..
-
210927_button,image(절대주소,상대주소)JavaScript 2021. 9. 27. 11:52
DOCTYPE html> Insert title here img { width: 100px; border: 2px groove pink; } .mybtn{ width: 120px; height: 30px; font-size: 12pt; background: green; color: white; border-radius: 30px; /* 100px은 원 */ } /* 헤드태그에서 스트립트 사용시 window.onloade 사용 */ window.onload=function(){ /* id로 해당 요소값 읽어오기 */ btn1=document.getElementById("btn1"); btn2=document.getElementById("btn2"); btn3=document.getElementById("b..