JavaScript 44

210927_table,checkbox,radio

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형 생년월일 취미 낚시 게임 여행 영화감상 결..

JavaScript 2021.09.28

210927_button,onchange

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="현재 글꼴 ..

JavaScript 2021.09.27

210927_image,button,zoom-in/out,

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("..

JavaScript 2021.09.27

210927_image,innerHTML,confirm,button

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..

JavaScript 2021.09.27

210927_button,image(절대주소,상대주소)

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..

JavaScript 2021.09.27

210927_image,setAttribute(array)

DOCTYPE html> Insert title here .test{ width: 100px; } .result{ width: 500px; height: 300px; } #img_div{ position: absolute; left: 500px; top: 100px; cursor: pointer; /* 커서포인터 : 링크기능있는 걸 알수있도록 커서모양 바꿔줌 */ } #result_div>img { position: absolute; left: 350px; top: 300px; width: 600px; height: 350px; } /* (방법1) window.onload=function(){ //1.id로 객체 읽어오기..개수가 많을 때는 배열처리 img1=document.getElementById("..

JavaScript 2021.09.27

210924_window.open/close,버튼,opener

(dataOpen.html) DOCTYPE html> Insert title here function dataOpen(){ window.open('ex8_dataSend.html','w','width=300,height=200'); /*코드 중에서 'w'는 그냥 아무 이름 붙인 거 */ } 이름 주소 연락처 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (dataSend.html) DOCTYPE html> Insert title here function dataSend(){ /* opener는 현재 열려있는 곳을 의미..여기선 dataopen */ opener.frm.name.value=frm.name.value; opener.frm.addr.value=frm.addr.valu..

JavaScript 2021.09.24

210924_(랜덤숫자맞추기)innerHTML,이미지

DOCTYPE html> Insert title here #out{ position: absolute; top: 50px; border: 1px solid gray; width: 300px; height: 200px; padding-left: 10 10px; background-color: #ffc; font-size: 11pt; } var rnd; var cnt=0; window.onload=function(){ rnd=parseInt(Math.random()*100)+1; } function check(su) { /* su를 파라메타값으로 넘김 */ //숫자를 이미지로 변환해서 출력 if(su=10 && surnd) out.innerHTML+=cnt+":"+su+"보다 작습니다 "; //out.inn..

JavaScript 2021.09.24