쌍용교육(JAVA)/JavaScript
쌍용교육 -JavaScript수업 37~38일차 JSEvent(2)
구 승
2024. 4. 15. 14:09
s10_mouseover.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mouseover,mouseout</title>
<style type="text/css">
ul{
list-style:none;
}
ul li{
background:#FF8888;
width:110px;
height:50px;
margin-bottom:3px;
}
ul li a{
text-decoration:none;
color:#FFF;
width:110px;
height:50px;
display:flex;
align-items:center;/* 세로 정렬 */
justify-content:center;/* 가로 정렬 */
}
</style>
<script type="text/javascript">
window.onload=function(){
const menu = document.getElementsByTagName('li');
for(let i=0;i<menu.length;i++){
//이벤트 연결
//커서를 태그에 올려놓을 때 이벤트 발생
menu[i].onmouseover=function(){
//this : 이벤트가 발생한 태그
this.style.backgroundColor='#FF0000';
};
//커서가 태그를 벗어날 때 이벤트 발생
menu[i].onmouseout=function(){
this.style.backgroundColor='#FF8888';
};
}
}
</script>
</head>
<body>
<ul>
<li><a href = "#">Company</a></li>
<li><a href = "#">Product</a></li>
<li><a href = "#">Service</a></li>
<li><a href = "#">Community</a></li>
</ul>
</body>
</html>
s11_mouseover.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mouseover,mouseout</title>
<script type="text/javascript">
window.onload = function(){
const bigImg = document.getElementById('bigImg');
const alink = document.getElementsByTagName('a');
for(let i=0;i<alink.length;i++){
//이벤트 연결
alink[i].onmouseover = function(){
bigImg.style.display ='';
//이벤트가 발생한 a태그의 href 속성값(이미지경로) 반환
bigImg.src = this.href;
bigImg.width = 500;
bigImg.height = 350;
};
alink[i].onmouseout = function(){
bigImg.style.display ='none';
};
alink[i].onclick = function(){
//a태그의 링크 기능(기본 이벤트)제거 -> 클릭하면 사진이 켜지는걸 없앰.
return false;
};
}
};
</script>
</head>
<body>
<div>
<a href="../files/Penguins.jpg"><img src="../files/Penguins_small.jpg" width="83" height="83"></a>
<a href="../files/Koala.jpg"><img src="../files/Koala_small.jpg" width="83" height="83"></a>
<div>
<img id="bigImg" style="display:none;">
</div>
</div>
</body>
</html>
s12_key.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>key</title>
<script type="text/javascript">
/*
이벤트 이름 설명 발생순서
keydown 키보드가 눌러질 때 발생 1
keypress 글자가 입력될 때 발생(한글사용불가) 2
keyup 키보드가 떼어질 때 3
*/
window.onload = function() {
//이벤트 연결
document.getElementById('content').onkeyup=function(){
//입력한 글자 수
let inputLength = this.value.length;
//남은 글자 수를 구함
let remain = 150 - inputLength;
//문서 객체에 반영
let letter = document.getElementById('letter');
letter.innerHTML = remain;
};
};
</script>
</head>
<body>
<h4 id="letter">150</h4>
<textarea rows="5" cols="30" name="content" id="content"></textarea>
</body>
</html>
s13_isNaN.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>isNaN</title>
<script type="text/javascript">
window.onload = function(){
const check_age =document.getElementById('check_age');
//이벤트 연결
check_age.onclick=function(){
const age = document.getElementById('age');
//공백 제거를 위해 trim 메서드를 사용함
if(age.value.trim()==''){//trim은 문자열 양쪽에 공백을 제거하고 내용만 남긴다.
alert('나이를 입력하세요');
age.value = ''; //공백이 있다면 공백을 제거
age.focus();//해당 요소에 자동으로 커서가 위치하게 됨 (글쓰는곳이 자동으로 깜빡거림)
return;
}
if(isNaN(age.value)){//숫자가 아닌 경우
alert('숫자만 입력 가능합니다.');
age.value='';
age.focus();
return;
}
alert('나이는'+age.value+'살입니다.');
};
};
</script>
</head>
<body>
<form>
<input type="text" name="age" id="age" size="20">
<input type ="button" value="나이 확인" id="check_age">
</form>
</body>
</html>
s14_submit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>submit</title>
<script type="text/javascript">
window.onload = function(){
const form = document.getElementById('register_form');
//이벤트 연결
form.onsubmit = function(){
const name = document.getElementById('name');
if(name.value.trim()==''){
alert('이름을 입력하세요!');
name.value = '';//공백이 있을 경우 공백 제거
name.focus();
return false;
}
const id = document.getElementById('id');
if(id.value.trim()==''){
alert('아이디를 입력하세요!');
id.value = '';//공백이 있을 경우 공백 제거
id.focus();
return false;
}
const password = document.getElementById('password');
if(password.value.trim()==''){
alert('비밀번호를 입력하세요!');
password.value = '';//공백이 있을 경우 공백 제거
password.focus();
return false;
}
const zipcode = document.getElementById('zipcode');
if(zipcode.value.trim()=='' || zipcode.value.length!=5){
alert('우편번호는 5자리를 꼭 입력하세요!');
zipcode.value='';
zipcode.focus();
return false;
}
};
};
</script>
</head>
<body>
<form id="register_form" action="a.jsp" method="post">
<fieldset>
<legend>회원가입</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" name="name" id="name"
size="10" maxlength="10">
</li>
<li>
<label for="id">아이디</label>
<input type="text" name="id" id="id"
size="10" maxlength="10">
</li>
<li>
<label for="password">비밀번호</label>
<input type="password" name="password" id="password"
size="10" maxlength="10">
</li>
<li>
<label for="zipcode">우편번호</label>
<input type="text" name="zipcode" id="zipcode"
size="5" maxlength="5">
</li>
</ul>
<div align="center">
<input type ="submit" value="전송">
</div>
</fieldset>
</form>
</body>
</html>
s15_gallery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gallery</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#galleryWrap{
width:520px;
margin:0 auto;
text-align:center;
}
#galleryWrap img{
vertical-align:middle;
}
img#prev, img#next{
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
let num = 1;
let gallery = document.getElementById('gallery');
//이벤트 연결
document.getElementById('prev').onclick=function(){
num--;
if(num<1)
num=7;
gallery.src ='../files/img'+num+'.jpg';
};
document.getElementById('next').onclick = function(){
num++;
if(num>7)
num =1; // 이미지가 7번을 넘어서면 다시 이미지 1번으로 돌아가게함.
gallery.src ='../files/img'+num+'.jpg';
};
};
</script>
</head>
<body>
<div id = "galleryWrap">
<h1>이미지 넘기기</h1>
<P>
<img src="../files/left_btn.png" alt ="이전 그림 보기" id="prev">
<img src="../files/img1.jpg" alt ="갤러리 그림" id="gallery">
<img src="../files/right_btn.png" alt="다음그림보기" id="next">
</P>
</div>
</body>
</html>
s16_defalut.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 이벤트</title>
<script type="text/javascript">
window.onload = function(){
const alink = document.getElementById('alink');
//이벤트 연결
alink.onclick=function(){
alert('이벤트 연결');
//기본 이벤트 제거(네이버 사이트로 이동을 막음.)
return false;
};
const myForm = document.getElementById('myForm');
//이벤트 연결
myForm.onsubmit = function(){
const name = document.getElementById('name');
alert(name.value);
//기본이벤트 제거(새로운 사이트로 넘어가는 걸 막음.)
return false;
};
};
</script>
</head>
<body>
<a id ="alink" href="https://www.naver.com">이동</a>
<form id="myForm" action="a.jsp" method="post"><!-- form의 name은 css나 자바스크립트에서 사용 가능-->
이름: <input type="text" name="name" id="name"><!-- input의 name은 서버프로그램에서 사용 자바스크립트도 사용가능 -->
<input type="submit" value="전송">
</form>
</body>
</html>
s17_propagation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 전달</title>
<script type="text/javascript">
/*
이벤트 전파(전달) : 특정 태그에서 이벤트가 발생하면 다른 태그로 이벤트가 전달되는 현상
이벤트 버블링 : 자식 노드에서 부모 노드 순으로 이벤트를 실행하는 것을 의미(지원O)
div
| ^
div |
| | 부모 태그로 이벤트 전파
p |
|
span <--- 이벤트 발생
이벤트 캡쳐링 : 부모노드에서 자식 노드 순으로 이벤트를 실행하는 것을 의미(요샌 지원X)
*/
window.onload = function(){
//이벤트 연결
document.getElementById('space').onclick = function(){
alert('space');
this.style.background='pink';
};
document.getElementById('paragraph').onclick = function(event){//위에서 실행되면 여기로 event객체가 전달됨(이벤트 전파가 발생)
alert('paragraph');
this.style.background='yellow';
//이벤트 전파(전달)을 제거
event.stopPropagation();//이걸 쓰지않으면 실행창에 paragraph를 누르면 space도 같이 실행됨.
};
};
</script>
</head>
<body>
<div id ="space">Space
<p id ="paragraph">Paragraph</p>
</div>
</body>
</html>
s18_level2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표준 이벤트 모델</title>
<script type="text/javascript">
/*
DOM Level 2 표준 이벤트 모델
addEventListener(eventType,eventHandler,userCapture): 이벤트 연결
removeEventListener(eventType,eventHandler) : 이벤트 제거
*/
//윈도우가 로드될 때 매개변수로 전달된 함수를 실행
window.addEventListener('load',function(){ //'load'는 이벤트 타입 ,function()은 eventHandler
const header = document.getElementById('header');
//이벤트 연결
header.addEventListener('click',function(){//'click'는 이벤트 타입 ,function()은 eventHandler
alert('이벤트 연결');
},false);//false가 userCapture
},false);//false가 userCapture
</script>
</head>
<body>
<h1 id = "header">Click</h1>
</body>
</html>