onfocus: 포커스를 부여할 때
onblur : 포커스를 잃을 때
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check(obj){
if(obj.value == ' '){
//alert('이름은 필수 입력 사항입니다.');
//윈도우 창에 띄우기 - 실습
// (파일/url, 창의 이름 [,창의 속성 설정])
let w = window.open('','mywin','width=500px, height=150px, left=600px, top=300px, backgroundColor=pink');
w.document.open();
w.document.write('<html><head></head><body style="text-align:center;width:300px;height:150px; background-color:pink; margin"><h2>이름은 필수사항입니다.</h2></body></html>');
w.document.close();
obj.focus();
}
}
</script>
</head>
<body onload="document.getElementById('name').focus()">
<h3>onfocus와 onblur</h3>
<hr>
<form>
이름 <input type="text" id='name' onblur="check(this)" value=" "><br>
학번 <input>
</form>
</body>
</html>
라디오 버튼
- name으로 묶여있음
체크박스
. 그룹화되어 있지 않고, name이 다 다름
. 개별적으로 체크함
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
let sum = 0;
function f(obj){
if(obj.checked){
sum = parseInt(sum) + parseInt(obj.value);
} else{
sum = sum - parseInt(obj.value);
}
document.getElementById('sumtext').value = sum;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="hap" value="10000" onclick='f(this)'> 모자 1만원
<input type="checkbox" name="hap" value="30000" onclick='f(this)'> 구두 3만원
<input type="checkbox" name="hap" value="80000" onclick='f(this)'> 가방 8만원
<br>구매 견적가 <input type="text" id="sumtext" value='0'>
</form>
</body>
</html>select에서 발생하는 이벤트 >> onchange이벤트
onchange이벤트 : input, select, textarea에서 텍스트나 선택된 내용이나 체크상태가 변경될 때 발생
. select 객체
속성 설명
-------------------------------------------------------------------------------------------------------
length option개수
selectedIndex 선택된 옵션의 인덱스 번호
size 콤보박스에 보여지는 개수
option 콤보박스에 들어있는 option들의 컬렉션 option -- [ ][ ][ ]
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function drawImage(){
let item = document.getElementById('baby');
let img = document.getElementById('f');
img.src = item.options[item.selectedIndex].value;
}
</script>
</head>
<body>
<form>
<select id='baby' onchange="drawImage()">
<option value='../img/ku2.jpg'>쿠로미
<option value='../img/rol1.jpg'>시나모롤
<option value='../img/my1.jpg'>마이멜로디
</select>
<img id="f" src="../img/rol3.png" width="200" height="200">
</form>
</body>
</html>
key관련 이벤트
. 종류
onkeydown : 모든 키에 대해 눌렀을때 호출되는 이벤트
onkeypress: enter, space, esc 키들과 문자키에 대해서만 호출되는 이벤트
onkeyup : 키에서 손을 뗄때
. key이벤트 객체 - event, e.code
- 속성(프로퍼티)
code : 눌러진 키의 이름
key : 눌러진 키의 문자열
번호/방향키 : "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"
엔터키 : "Enter"
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
let tds;
let index = 0, prevIndex = 0;
let ran;
let img = "<img id='img' src='../img/rol2.png' width='50px' height='50px' onclick='move()'>";
window.onload = function () {
tds = document.getElementsByTagName('td');
tds[index].innerHTML = img;
}
function move() {
ran = Math.floor(Math.random()*99);
tds[ran].innerHTML = img;
tds[prevIndex].innerHTML = "";
prevIndex = ran;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' style='margin: auto; text-align: center'>");
for (var i = 0; i < 10; i++) {
document.write("<tr>");
for (var j = 0; j < 10; j++) {
document.write("<td width='50px' height='50px'>" + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>포커스와 onblur, onfocus</title>
<script type="text/javascript">
window.onblur = function(){
document.body.style.backgroundColor="lightgray";
}
window.onfocus = function(){
document.body.style.backgroundColor="white";
}
</script>
</head>
<body>
<h2>포커스와 onblur, onfocus</h2>
<hr>
브라우저 바깥에 마우스를 클릭하면 window 객체에 blur이벤트가 발생하고,<br>
다시 마우스를 클릭하면 window 객체에 focus이벤트가 발생한다.
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 커서 만들기</title>
<style type="text/css">
img
{ width: 30px;
height: 30px;}
</style>
</head>
<body>
<h3>이미지 커서만들기♡</h3>
<hr>
<p>마우스를 움직이면 이미지로 만든 커서가 마우스를 따라 다닙니당</p>
<div id="div" style="position: absolute">
<img src="../img/rol2.png">
</div>
<script type="text/javascript">
var div = document.getElementById("div");
window.onmousemove = function(e)
{ div.style.left = e.clientX + "px";
div.style.top = e.clientY + "px";
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 객체의 target</title>
<script type="text/javascript">
function clk(obj){
obj.style.fontSize="2.5em"
}
</script>
</head>
<body>
<h2>아이템을 클릭하면 2.5배 크기로</h2>
<hr>
<p>여름 방학 때 하고 싶은 것들</p>
<ul>
<li class='l' onclick='clk(this)'>자전거로 대한민국 일주</li>
<li class='l' onclick='clk(this)'>책 100권 읽기</li>
<li class='l' onclick='clk(this)'>철인 3종 경기 준비</li>
<li class='l' onclick='clk(this)'>자바스크립트 정복</li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 휠을 이용한 이미지 크기 변경</title>
<script type="text/javascript">
function sz(e,img){
if(e.wheelDelta<0){
img.width += img.width*0.05;
img.height += img.height*0.05;
}else{
img.width -= img.width*0.05;
img.height -= img.height*0.05;
}
}
</script>
</head>
<body>
<h2>마우스 휠을 이용한 이미지 확대/축소</h2>
<hr>
이미지 위에 휠을 위로 굴리면 이미지가 축소되고, 아래로 굴리면 이미지가 확대됩니다.<br>
<img onwheel=sz(event,this) src="../img/rol3.png" width="300" height="300">
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
td {width:50px; height:50px; border: 1px solid orchid}
</style>
<script type="text/javascript">
let tds;
let prevIndex=0, index=0;
window.onload = function () {
tds = document.getElementsByTagName("td");
tds [index].style.backgroundColor = "orchid";
}
window.onkeydown = function (e) {
switch (e.key) {
case "ArrowDown" :
if(index/3 >= 2) return;
index += 3;
break;
case "ArrowUp" :
if(index/3 < 1) return;
index -= 3;
break;
case "ArrowLeft":
if(index%3 == 0) return;
index--;
break;
case "ArrowRight" :
if(index%3 == 2) return;
index++;
break;
}
tds [index].style.backgroundColor = "orchid";
tds [prevIndex].style.backgroundColor = "white";
prevIndex = index;
}
</script>
</head>
<body>
<h3>화살표 키로 셀이동하기</h3><hr>
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>