-
명품 웹 프로그래밍 9장 과제웹프로그래밍 2019. 5. 14. 18:52
1.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>onblur</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <script> window.onblur = function () { document.body.style.backgroundColor = "lightgray"; } window.onfocus = function () { document.body.style.backgroundColor = "white"; } </script> </head> <body> <h3>포커스와 onblur,onfocus</h3> <hr> <p> 브라우저 바깥에 마우스를 클릭하면 window 객체에 blur 이벤트가 발생하고 다시 마우스를 클릭하면 window 객체에 focus 이벤트가 발생한다. </p> </body> </html>2.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>라디오 버튼과 이미지 출력</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <script> function drawImage() { var found = null; var kfruit = document.getElementsByName("fruit"); for (var i = 0; i < kfruit.length; ++i) { if (kfruit[i].checked == true) { found = kfruit[i]; } } var img = document.getElementById("fruitimage"); img.src = "media/" + found.value + ".png"; } </script> </head> <body> <h3>라디오 버튼을 클릭하면 이미지를 출력합니다.</h3> <hr> <form> <input type="radio" name="fruit" value="banana" onchange="drawImage()">바나나 <input type="radio" name="fruit" value="mango" onchange="drawImage()">망고 <input type="radio" name="fruit" value="apple" onchange="drawImage()" checked>사과 <br> <img id="fruitimage" src="media/apple.png" alt=""> </form> </body> </html>3.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>onkeydown</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <script> function calculate(e) { if(e.keyCode==13) { var exp = document.getElementById("exp"); var result = document.getElementById("result"); result.value = eval(exp.value); } } </script> </head> <body> <h3>계산기 만들기</h3> <hr> <p> 수식을 입력하고, <enter>를 입력하세요. </p> <form> 식 <input type="text" id="exp" value="" onkeydown="calculate(event)"><br> 값 <input type="text" id="result"> </form> </body> </html>4.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>onmousemove</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <style> div { display: inline-block; position: absolute; } img { width: 30px; height: 30px; } </style> </head> <body> <h3>이미지 커서 만들기</h3> <hr> <p> 마우스를 움직이면 이미지로 만든 커서가 마우스를 따라다닙니다. </p> <div id="div"><img src="media/puppy.png" alt=""></div> <script> document.onmousemove=function (e) { var div = document.getElementById("div"); div.style.left = e.x+"px"; div.style.top = e.y + "px"; } </script> </body> </html>5.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>자바스크립트 배경</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> <h3>바탕 아무 곳에나 더블 클릭</h3> <hr> <p> 바탕 아무 곳이나 <span><strong>더블클릭</strong></span>하면 배경색이 랜덤하게 변합니다. </p> <script> document.ondblclick=function() { var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); document.body.style.backgroundColor="rgb(" + x +","+y+","+z+")"; } </script> </body> </html>6.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>onwheel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> <h3>마우스 휠을 이용한 이미지 확대/축소</h3> <hr> <p> 이미지 위에 휠을 위로 굴리면 이미지가 축소되고, 아래로 굴리면 이미지가 확대됩니다. </p> <img id="img" src="media/puppy.png" alt="" onwheel="wheel(event)" width="100px" height="100px"> <script> var size=100; function wheel(e) { if(e.wheelDelta < 0) { size=size-(size*0.05); if(size<0) { size=0; } } else { size = size + (size * 0.05); } document.getElementById("img").style.width= size+"px"; document.getElementById("img").style.height = size + "px"; } </script> </body> </html>7.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>이벤트 객체의 target</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <script> window.onmouseover = function (e) { if (e.target.tagName == "SPAN") { e.target.style.textDecoration = "underline"; } } window.onmouseout = function (e) { if (e.target.tagName == "SPAN") { e.target.style.textDecoration = "none"; } } </script> </head> <body> <h3>span 태그에만 onmouseover / onmouseout</h3> <hr> <p> span 태그에 대해서만 <span>마우스</span>가 올라올 때 밑줄이 그어지고 <span>마우스</span>가 내려갈 때 밑줄이 사라지도록 <span>자바스크립트 코드</span>를 작성한다. </p> </body> </html>8.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>이벤트 객체의 target</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <script> var sw=0; function init() { var liArray = document.getElementsByTagName("li"); for (var i = 0; i < liArray.length; ++i) { liArray[i].onclick = click; } function click(e) { reset(); e.target.style.fontSize = "1.3em"; } function reset() { for(var i=0; i<liArray.length ; ++i) { liArray[i].style.fontSize="1em"; } } } </script> </head> <body onload="init()"> <h3>아이템을 클릭하면 1.3배 크기로</h3> <hr> <p>여름 방학 때 하고 싶은 것들</p> <ul> <li>자전거로 대한민국 일주</li> <li>책 100권 읽기</li> <li>철인 3종 경기 준비</li> <li>자바스크립트 정복</li> </ul> </body> </html>9.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>onmouseover 과 onmouseout</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <script> var text=["빨간자전거를 타고 서울, 대전, 대구, 부산 찍고, 목포, 인천을 거쳐 달린다", "철학책과 문학 작품 30권씩 읽기", "수영 2시간, 달리기 10km씩, 싸이클 20km씩 꾸준히", "개발자 커뮤니티등을 참고하며 자바스크립트 공부하기"]; var textDiv; function init() { textDiv = document.getElementById("textDiv"); var liArray = document.getElementsByTagName("li"); for(i=0; i<liArray.length; ++i) { liArray[i].onmouseover=over; liArray[i].onmouseout=hide; } } function over(e) { var n=0; switch(e.target.id) { case "0" : n = 0; break; case "1" : n = 1; break; case "2" : n = 2; break; case "3" : n = 3; break; } settextDiv(text[n], e); } function settextDiv(text, e) { textDiv.innerHTML = text; textDiv.style.border = "1px solid green"; textDiv.style.backgroundColor = "aliceblue"; textDiv.style.left = e.x + "px"; textDiv.style.top = e.y + "px"; textDiv.style.visibility = "visible"; textDiv.style.width = "150px"; textDiv.style.height = "100px"; } function hide() { textDiv.style.visibility = "hidden"; } </script> </head> <body onload="init()"> <h3>아이템에 마우스를 올리면 설명 출력</h3> <hr> <p>여름 방학 때 하고 싶은 것들</p> <ul> <li id="0">자전거로 대한민국 일주</li> <li id="1">책 100권 읽기</li> <li id="2">철인 3종 경기 준비</li> <li id="3">자바스크립트 정복</li> </ul> <div id="textDiv" style="position:absolute"></div> </body> </html>'웹프로그래밍' 카테고리의 다른 글
명품 웹 프로그래밍 홈페이지 만들기 (10) 2019.05.14 명품 웹 프로그래밍 8장 과제 (0) 2019.05.14 명품 웹 프로그래밍 7장 과제 (0) 2019.05.14 명품 웹 프로그래밍 6장 과제 (0) 2019.05.14 명품 웹 프로그래밍 5장 과제 (0) 2019.05.14
