양식(폼)이벤트
submit(), reset()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>양식(폼)이벤트</title>
</head>
<body>
<form action="https://www.google.com" id="loginForm">
USER ID : <input id="uId" type="text" name="uId"><br/>
USER PW : <input id="uPw" type="password" name="uPw"><br/>
<input id="sbmBtn" type="button" value="SUBMIT">
<input id="resBtn" type="button" value="RESET">
</form>
<script type="text/javascript">
window.onload = function() {
var sbmBtn = document.getElementById('sbmBtn');
sbmBtn.onclick = function() {
if(document.getElementById('uId').value == ""){
alert("user id blank!!");
}else if(document.getElementById('uPw').value == ""){
alert("user pw blank!!");
}else {
alert("login ok!!");
document.getElementById('loginForm').submit();
}
};
var resBtn = document.getElementById('resBtn');
resBtn.onclick = function() {
alert('reset ok!!');
document.getElementById('loginForm').reset();
}
};
</script>
</body>
</html>
submit 타입, reset 타입 으로 정의
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 이벤트</title>
</head>
<body>
<form action="https://www.google.com" id="loginForm">
USER ID : <input id="uId" type="text" name="uId"><br/>
USER PW : <input id="uPw" type="password" name="uPw"><br/>
<input id="sbmBtn" type="submit" value="SUBMIT">
<input id="resBtn" type="reset" value="RESET">
</form>
<script type="text/javascript">
window.onload = function() {
var lf = document.getElementById('loginForm');
lf.onsubmit = function() {
if(document.getElementById('uId').value == ""){
alert('user id blank!!');
return false; //보내지 않는다.
} else if(document.getElementById('uPw').value == ""){
alert('user pw blank!!');
return false; //보내지 않는다.
} else {
alert('login ok!!');
return true; //보낸다.
}
}
}
</script>
</body>
</html>위 예제와 동일한 결과
이벤트 리스너 등록
한개의 html 요소에서 복수개의 이벤트와 연관을 맺을수 있도록하는 기능을
제공하는 이벤트 리스너 구현
- 브라우저 호환성 고려해 줘야함.
=> 이벤트 리스너를 사용하는 경우에는 크로스 브라우징(cross browsing)
를 고려한 코드를 작성해야함.
크로스 브라우징 고려해 구현 이벤트 리스너 등록함수
el : 이벤트가 발생한 HTML 요소
ev : 이벤트
handler : 이벤트 핸들러 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 리스너 등록</title>
</head>
<body>
<form action="">
<input type="button" id="btnClick" value="눌러주세요" />
<input type="button" id="btnCancel" value="취소" />
</form>
<div id="result"></div>
<script type="text/javascript">
/* 한개의 html 요소에서 복수개의 이벤트와 연관을 맺을수 있도록하는 기능을
제공하는 이벤트 리스너 구현
- 브라우저 호환성 고려해 줘야함.
=> 이벤트 리스너를 사용하는 경우에는 크로스 브라우징(cross browsing)
를 고려한 코드를 작성해야함.
*/
/*
크로스 브라우징 고려해 구현 이벤트 리스너 등록함수
el : 이벤트가 발생한 HTML 요소 (노드, 테그)
ev : 이벤트 (load event)
handler : 이벤트 핸들러 함수 (처리 부분)
*/
//함수구현
function addListener(el, ev, handler) {
//Chrome, FireFox 등등 웹브라우저의 경우
if(el.addEventListener) {
//원하는 요소에 메서드로 함수에 등록하는 것
//(이벤트명, 콜백함수로 이벤트가 발생하면 실행, 이벤트 전파 사용여부)
el.addEventListener(ev, handler, false);
} else { // IE 웹 브라우저의 경우
el.attachedCallback('on' + ev, handler);
}
}
// 함수 호출
addListener(window, 'load', init);
// load 이벤트 발생시 수행할 이벤트 헨들러 함수임.
function init() {
// 이벤트 리스너 등록 함수로 사용해 click 이벤트에 대한
// 이벤트 헨들러 함수를 등록함.
var btnClickElement = document.getElementById('btnClick');
var btnCancelElement = document.getElementById('btnCancel');
addListener(btnClickElement, 'click', addText);
addListener(btnCancelElement, 'click', clearText);
}
// click 이벤트 발생시 수행할 이벤트 헨들러 함수.
function addText() {
var resultElement = document.getElementById('result');
resultElement.innerHTML = "크로스 브라우저 이벤트 리스너 구현";
}
// click 이벤트 발생시 수행할 이벤트 헨들러 함수.
function clearText() {
var resultElement = document.getElementById('result');
resultElement.innerHTML = "";
}
</script>
</body>
</html>
가위, 바위, 보 게임
1) 사용자는 가위,바위,보 버튼을 눌러 게임을 진행함.
2) DOM 이벤트는 크로스 브라우징 문제가 있으므로 모든 이벤트와
관련된 함수를 만들때는 크로스 브라우징 해결해야함.
3) 웹 브라우저가 window 객체에서 load 이벤트가 발생하면 init()함수를
호출하여 초기화 작업을 함.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가위, 바위, 보</title>
</head>
<body>
<div id="game">
<button id="btnScissors">가위</button>
<button id="btnRock">바위</button>
<button id="btnPaper">보</button>
</div>
<div id="result">
가위 바위 보
</div>
</body>
</html>/*
크로스 브라우징 고려해 구현 이벤트 리스너 등록함수
el : 이벤트가 발생한 HTML 요소 (노드, 테그)
ev : 이벤트 (load event)
handler : 이벤트 핸들러 함수 (처리 부분)
*/
//함수구현
function addListener(el, ev, handler) {
//Chrome, FireFox 등등 웹브라우저의 경우
if(el.addEventListener) {
//원하는 요소에 메서드로 함수에 등록하는 것
//(이벤트명, 콜백함수로 이벤트가 발생하면 실행, 이벤트 전파 사용여부)
el.addEventListener(ev, handler, false);
} else { // IE 웹 브라우저의 경우
el.attachedCallback('on' + ev, handler);
}
}
// 함수 호출
addListener(window, 'load', init);
//load 이벤트 발생시 수행할 헨들러 함수.
function init(){
var gameElement = document.getElementById('game');
addListener(gameElement, 'click', playRockScissorsPaper);
}
function getEventSource(evt){
if(evt.target)
return evt.target;
else
return window.event.srcElement;
}
function Player(p){
if(!p){
p = 0; //가위,바위,보 중 기본값 설정
}
this.point = p;
}
Player.prototype.toString = function(){
switch(this.point){
case 0:
return "가위";
case 1:
return "바위";
case 2:
return "보";
}
}
function playRockScissorsPaper(evt){
var source = getEventSource(evt);
var player = new Player();
switch(source.id) {
case "btnScissors":
player.point = 0;
break;
case "btnRock":
player.point = 1;
break;
case "btnPaper":
player.point = 2;
break;
default:
return;
}
var computer = new Player(Math.floor(Math.random() * 3));
var resultElement = document.getElementById('result');
if(player.point == computer.point){ //같은걸 냈을때(무승부 경우)
resultElement.innerHTML = '플레이어 : ' +player+ ' vs 컴퓨터 : '
+computer+ ' => 비겼습니다!!!';
} else {
//서로 다른 걸 냈을 때
/* 0 +1 = 1 (바위) 0 사용자 승
1 +1 = 2 (보) 1 사용자 승
2 +1 = 3 (가위) 2 사용자 승
*/
//0,1,2 중 하나에 1을 더함 => 1~3까지가 됨, => 3으로 나눈 나머지 값
if((player.point + 1) % 3== computer.point){
resultElement.innerHTML = '플레이어 : '+player+ ' vs 컴퓨터 : '
+computer+ ' => 졌습니다!!!';
}else {
resultElement.innerHTML = '플레이어 : '+player+ ' vs 컴퓨터 : '
+computer+ ' => 이겼습니다!!!';
}
}
}
Content delivery network
jQuery 인터넷에서 다운받아 사용
developers.google.com/speed/libraries#jquery
Hosted Libraries | Google Developers
A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.
developers.google.com
토굴 스타일 적용 jQuery -CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.test {
color: #000;
padding: 0.5em;
border: 1px solid #444;
}
.active {
color: #900;
font-weight: bold;
}
.inside {
background-color: aqua;
}
</style>
</head>
<body>
<div class="test">ready</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.test").on({
click: function() {
$(this).toggleClass("active");
}
})
});
</script>
</body>
</html>
jQuery 이벤트 처리 -CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.test {
color: #000;
padding: 0.5em;
border: 1px solid #444;
}
.active {
color: #900;
font-weight: bold;
}
.inside {
background-color: aqua;
}
</style>
</head>
<body>
<div class="test">ready</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.test").on({
click: function() {
$(this).toggleClass("active");
},
mouseenter: function() {
$(this).addClass("inside");
$(this).text("mouseenter");
},
mouseleave: function() {
$(this).removeClass("inside");
$(this).text("mouseleave");
}
})
});
</script>
</body>
</html>
jquery-3.5.1.js 다운받은거 사용
DOM 이벤트 전파
- 이벤트 흐름 단계 : 캡쳐 단계(웹브라우저에서 이벤트 발생 => document)
타겟 단계(이벤트가 발생한 객체로 전파되는 단계)
버블링 단계(타켓 객체의 상위 객체에서 다시 최상위
객체인 document 객체까지 전파되는 단계)
-stopPropagation() : 이벤트 버블링 억제함.
버블링 억제 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
cursor: pointer;
}
div#inner{
background-color: #adff2f;
}
div#outer{
background-color: #dda0dd;
}
</style>
</head>
<body>
<div id="outer">
외부영역
<div id="inner">
내부영역을 클릭해 보세요!
</div>
클릭하세요!
</div>
<div id="log">
</div>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/*
DOM 이벤트 전파
- 이벤트 흐름 단계 : 캡쳐 단계(웹브라우저에서 이벤트 발생 => document)
타겟 단계(이벤트가 발생한 객체로 전파되는 단계)
버블링 단계(타켓 객체의 상위 객체에서 다시 최상위
객체인 document 객체까지 전파되는 단계)
-stopPropagation() : 이벤트 버블링 억제함.
*/
$(document).ready(function() {
$('#outer').click(function(event) {
$('<div/>').append('외부 div를 클릭하였습니다.')
.appendTo('#log');
});
$('#inner').on('click', function(event){
event.stopPropagation();
$('<div/>').append('내부 div를 클릭하였습니다.')
.appendTo('#log');
});
});
</script>
</body>
</html>
보이기 감추기 미완
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div.card{
background: #ece023;
width: 30px;
height: 40px;
margin: 2px;
float: left;
display: none;
line-height: 2;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<button id="show">보이기</button>
<button id="hide">감추기</button>
</div>
<div>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show').click(function(){
$('div.card').first().show('fast', function showCard(){
$(this).next("div.card").show("fast", showCard);
});
})
});
</script>
</body>
</html>
