Dynamic Web Project : jQuery
Folder : 01_helloJQuery
Java - 네트워크
- 채팅 프로그램 - 동기 데이터 통신 ( 요청을 보내면 반드시 응답이 와야한다.)
상대방이 응답 안 보내면 프로그램 다운된다.
Ajax - 페이지 이동이 없는 비동기 데이터 통신
jQuery의 개요
* jQuery
- 전 세계에서 가장 많이 사용되는 JavaScript 라이브러리
- HTML 요소 제어
=> HTML 요소를 손쉽게 획득하고 제어할 수 있다.
- 손쉬운 이벤트 처리
=> 단 한번의 이벤트 정의로 크로스 브라우징 해결
- 요소의 탐색과 생성
=> DOM 요소를 제어하기 위한 간결한 기능 제공
- Ajax 통신처리
=> 페이지 이동이 없는 비동기 데이터 통신
※ 라이브러리 ? 자바스크립트로 만든 다양한 함수들의 집합
* jQuery 특징
- 크로스 브라우징
=> 한 번의 코딩으로 거의 모든 브라우저에게 적용된다.
- 간결한 문법
=> HTML 태그 (element)를 제어하거나 이벤트를 처리하는 부분 등 Javascript의 전반에 걸쳐서
구문이 짧아지기 때문에 개발 효율성이 높아진다.
- 익숙한 구문
=> CSS에서 사용하던 속성과 값을 그대로 Javascript 구문에 적용할 수 있어서
document 내장 객체가 제공하는 기능을 쉽게 사용할 수 있다.
- 다양한 플러그인
=> jQuery를 기반으로 하는 수 많은 플러그인들이 무료로 배포되고 있기 때문에,
갤러리, 메뉴 등의 구현에 대한 작업이 많이 단축된다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
Hello jQuery
1. jQuery() 함수 사용
Javascript는 window 객체의 addEventListener() 함수와 attachEvent() 함수를 사용하여
onload 이벤트를 처리해야 하는데 이때 크로스 브라우징 처리를 하기 위해 if문으로 브라우저를 구별하는 분기문을 작성해야만 한다.
jQuery는 이러한 번거로움을 jQuery() 함수 하나로 해결할 수 있게 해준다.
예) jQuery() 함수에게 파라미터로 사용하려는 함수명을 전달하는 것으로 onload 처리가 완료된다.
function ex() {
......
}
jQuery(ex);
2. $ 객체의 사용
(1) jQuery() 함수로부터 전달되는 파라미터 받기
- jQuery의 모든 기능은 $ 라는 객체의 하위로 포함되어 있다.
- $ 는 jQuery의 모든 기능을 담고 있는 객체이자 함수이다.
- jQuery() 함수로 페이지가 열릴 때, 특정 함수를 호출하게 되면,
이 특정함수는 파라미터로 $라는 객체를 받는다.
이 $객체로 jQuery의 막강한 기능들을 사용할 수 있다.
예)
function ex($) {
$ 객체 사용
}
jQuery(ex);
(2) HTML 요소를 획득하기
- Javascript에서 사용하던 document.getElementById("id") 구문이 jQuery에서는 $() 함수를 통해
작동하는데, $("CSS 셀렉터")의 축약된 형태로 객체 생성 표현을 제공한다.
- Javascript의 addEventListener() 함수를 사용하여 onload 이벤트를 처리하면서 HTML 요소를
객체로 생성하는 경우, 웹 브라우저에 의해 모든 HTML 요소가 로드된 후에 객체를 생성해야
하기 때문에 onload 이벤트에 의해서 호출되는 함수 안에서 객체획득이 가능하였다.
- jQuery 역시 이와같은 웹브라우저의 특성을 따라 $() 함수에 의한 객체생성은
jQuery() 함수에 의해서 호출되는 콜백함수 안에서 수행되어야 한다.
예) var h1 = document.getElementById("hello");
=> var h1 = $("#hello");
(3) innerHTML의 간결화
- $() 함수를 사용하여 획득한 요소는 html() 함수를 내장하고 있는 객체가 된다.
- 이렇게 생성된 객체는 innerHTML 대신 html() 함수를 사용하여 요소안에 새로운 내용을 추가할 수 있다.
예)
h1.innerHTML = "Hello Javascript";
=> h1.html("Hello jQuery");
(4) 함수 이름 대신 함수 자체를 사용하기
① 함수 이름 사용
function ex() {
......
}
jQuery(ex);
② 함수 자체를 사용
jQuery(function() {
......
});
③ $객체를 전달받기 위해 파라미터 선언
$(function($) {
$ 객체 사용
});
④ jQuery() 함수의 축약
$(function() {
......
});
=> $() 함수에 의해서 호출되는 함수는 $객체에 대한 파라미터를 명시하지 않아도,
자동으로 전달받게 된다.
exam01.html
- js 파일을 다운 받아서 사용
<script type="text/javascript" src="../js/jquery-3.7.1.min.js"></script>
src를 쓸 때는 무조건 </script>해서 막아야한다. 밑에처럼 하면 못가져온다.
<script type="text/javascript" src="../js/jquery-3.7.1.min.js"/>- http://code.jquery.com의 CDN 서비스를 사용
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>- http://code.jquery.com의 CDN 서비스를 버전 명시 없이 사용
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
메모장에 적어놓고 나중에 쓰면 편하다~
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id='hello'></h1>
<!-- <script type="text/javascript" src="../js/jquery-3.7.1.min.js"></script>-->
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
function hello() {
var h1 = document.getElementById('hello');
alert(h1.tagName);
h1.innerHTML = 'Hello jQuery';
}
//JavaScript
window.onload = function() {
hello();//body태그를 다 읽으면 hello() 호출하시오.
}
</script>
<hr/>
</body>
</html>
//JavaScript의 onload 이벤트와 같은 효과
jQuery(hello);
2. $ 객체의 사용
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id='hello'></h1>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
function hello($){
var h1 = $('#hello');
h1.html('Hello jQuery');
h1.text('Hello jQuery'); // innerText
}
jQuery(hello);
</script>
</body>
</html>
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id='hello'></h1>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var h1 = $('#hello');
h1.html('Hello jQuery');
h1.text('Hello jQuery'); // innerText
});
</script>
</body>
</html>
exam04.html - 가장 많이 씀
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id='hello'></h1>
<p id="text">안녕하세요 제이쿼리!!</p>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
var h1 = $('#hello');
h1.html('Hello jQuery');
h1.text('Hello jQuery'); // innerText
});
</script>
</body>
</html>
css 적용하는 법
$(function(){
var h1 = $('#hello');
h1.css('color', 'red');
h1.html('Hello jQuery');
});
태그의 값 가져오는 것
h1.text('Hello jQuery');//h1태그에 값을 넣는 것
alert($('#text').text());//h1태그의 값을 가져오는 것
1. $는 제이쿼리 문서 객체 선택자의 메소드를 나타낸다.
2. $에 익명함수를 사용하면 문서를 <body> 영역의 문서를 모두 로딩한 후에
제이쿼리를 실행하라는 의미이다.
$(document).ready(function(){});
$(function(){});
CSS 셀렉터
jQuery에서 제어할 대상에 접근하는 방법
- jQuery는 제어할 요소를 획득하기 위해서 $() 함수안에 대상을 의미하는
CSS 셀렉터를 파라미터로 전달한다.
예) var mytag = $("h1"); // h1 태그 객체 획득하기
예) var mytag = $(".hello"); // "hello" 라는 class 속성값을 갖는 요소의 객체 획득하기
예) var mytag = $("#hello"); // "hello" 라는 id 속성값을 갖는 요소의 객체 획득하기
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div#container {
width: auto;
border: 5px solid #ff00ff;
padding: 10px;
}
div#container>h1#title {
background-color: #d5d5d5;
padding: 10px;
}
div#container div.box {
padding: 10px;
background-color: #ffff00;
font: 20px '굴림';
}
div#container>ul {
list-style: none;
padding: 10px;
margin: 0px;
width: auto;
border: 5px solid #00ff00;
}
/* div#container > ul > li:first-child, div#container > ul > li:last-child { */
div#container li:first-child, div#container li:last-child {
border: 3px dotted red;
padding: 3px 10px;
}
pre {
font: 14px/130% 'Courier New';
background: #eee;
padding: 10px 20px;
margin: 10px auto;
border: 1px solid #555;
border-radius: 20px;
}
</style>
exam05.html
<body>
<div id="container">
<h1 id="title"></h1>
<div class="box"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p></p>
<pre></pre>
<pre name="source"></pre><script type="text/javascript">
$(function () {
$("#title").html('두 번째 항목');
$("#title").text('두 번째 항목');
$('h1[id="title"]'.html('두 번째 항목'));
});
</script>
$('div#container #title').html('제목입니다.')
$('div#container > div.box').html('안녕하세요')
$('ul > li').html("목록입니다.")
$('ul > li:eq(0)').html("jQuery의 고유의 방식도 있습니다.")
$('ul > li:eq(1)').html("jQuery의 고유의 방식도 있습니다.")
$('p, pre').html('다중 요소 선택');
$('pre[name="source"]').html('CSS의 선택자')
$('ul > li:first-child').html('First-child')
$('ul > li:last-child').html('Last-child')
jQuery 이벤트 정의하는 방법
$(function() {
$("셀렉터").이벤트이름(function() {
... 처리 내용 ...
});
});
Folder: 02_jQueryEvent
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원가입</h1>
<form name="form1" id="join">
<div id="input">
<h3>아이디</h3>
<input type="text" name="user_id"/>
<h3>비밀번호</h3>
<input type="password" name="user_pw"/>
<h3>성별</h3>
<label><input type="radio" name="gender" value="남자"/>남자</label>
<label><input type="radio" name="gender" value="여자"/>여자</label>
<h3>이메일</h3>
<input type="email" name="email"/>
<h3>URL</h3>
<input type="url" name="url" />
<h3>핸드폰</h3>
<input type="tel" name="phone"/>
<h3>취미</h3>
<label><input type="checkbox" name="hobby" value="축구"/>축구</label>
<label><input type="checkbox" name="hobby" value="농구"/>농구</label>
<label><input type="checkbox" name="hobby" value="야구"/>야구</label>
<h3>직업</h3>
<select name="job">
<option>-------선택하세요-------</option>
<option value="프로그래머">프로그래머</option>
<option value="퍼블리셔">퍼블리셔</option>
<option value="디자이너">디자이너</option>
<option value="기획">기획</option>
</select>
<input type="submit" value="회원가입" class="myButton"/>
<input type="reset" value="다시작성" class="myButton"/>
</div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>Folder : css
event.css
@charset "UTF-8";
* {
padding: 0;
margin: 10px;
}
#input, #result {
border: 5px solid #D5D5D5;
text-align: center;
width: auto;
font-weight: bold;
}
#input {
background: #eef;
padding: 5px;
}
#input:after {
content: '';
display: block;
float: none;
clear: both;
}
#input > input, #input > select, #input > div, #input > button, #input > div > button {
width: 99%;
text-align: center;
display: block;
font-size: 17px;
color: #222;
background: #eef;
border: 3px solid #d3d3d3;
margin: 5px auto;
padding: 5px 0;
}
#input > h3 {
text-align: left;
margin: 0;
padding: 10px 0 0 0;
}
#input > h3:before {
content: '';
display: block;
float: none;
clear: both;
}
#input > label {
margin: 0;
padding: 0;
display: block;
float: left;
padding-bottom: 10px;
}
#input > label > input {
width: auto !important;
display: inline;
}
#input .myButton {
box-shadow: inset 0px 1px 0px 0px #54a3f7; /* inset : 박스 안쪽의 그림자 */
background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
/* background-color: #007dc1; */
border-radius: 3px;
border: 1px solid #124d77;
display: inline-block;
color: #ffffff;
font-family: arial;
font-size: 15px;
font-weight: normal;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #154682;
}
#input .myButton:hover {
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
background-color: #0061a7;
}
#input .myButton:active {
position: relative;
top: 1px;
}
h2 {
padding-top: 10px;
}
#result {
padding: 50px;
font-size: 17px;
color: #500;
background: #5AAEFF;
}exam.01에 event.css적용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
Folder : js
member.js
<script type="text/javascript" src="../js/member.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
위에처럼 하면 안된다 !!
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="../js/member.js"></script>
이 순서로 해야된다 !!
exam01.html
<script type="text/javascript">
$(function () {});
</script>
위에 코드를 js파일로 옮겨주면 된다 !!
member.js
$(function(){});유효성 검사
아이디
$(function(){
$('#join').submit(function(){
let user_id = $('input[name="user_id"]').val();
if(!user_id){
alert("아이디를 입력하세요.");
$('input[name=user_id]').focus();
return false;
}
return false; // 페이지 이동을 막음.
});
});$(function(){
$('#join').submit(function(){
let user_id = $('input[name="user_id"]').val();
//id(!user_id){}
if(user_id == ''){
alert("아이디를 입력하세요.");
$('input[name=user_id]').focus();
return false;
}
return false; // 페이지 이동을 막음.
});
});
- val() 메서드: <input>, <select> 또는 <textarea> 요소의 value 속성에 접근하거나 이를 설정할 때 사용됩니다. 사용자가 입력한 값을 가져오거나 설정할 때 주로 사용된다.
- text() 메서드: 요소의 텍스트 콘텐츠를 가져오거나 설정할 때 사용됩니다. 이 메서드는 <div>, <span>, <p>와 같은 요소의 텍스트 내용을 다룰 때 유용하다.
비밀번호
let user_pw = $('input[name="user_pw"]').val();
if(!user_pw){
alert("비밀번호를 입력하세요.");
$('input[name=user_pw]').focus();
return false;
}
성별
선택했으면 true / 안됐으면 false
if(!$('input[name="gender"]').is(':checked')) {
alert("성별을 입력하세요.");
//남자 선택하게 하는 것 전부 name속성
//radio는 배열로 받는다. 남자 : gender[0] / 여자 : gender[1]
document.form1.gender[0].checked = true;
return false;
}
if(!$('input[name="gender"]').is(':checked')) {
alert("성별을 입력하세요.");
//남자 선택하게 하는 것 전부 name속성
//radio는 배열로 받는다. 남자 : gender[0] / 여자 : gender[1]
//document.form1.gender[0].checked = true;
$('input[name="gender"]').attr('checked', true)
return false;
}
eq(0)을 써서 남자에 기본으로 체크되게 한다.
$('input[name="gender"]:eq(0)').attr('checked', true)
return false;이메일 / URL / 핸드폰
let email = $('input[name="email"]').val();
if(!email){
alert("이메일을 입력하세요.");
$('input[name=email]').focus();
return false;
}
let url = $('input[name="url"]').val();
if(!url){
alert("URL을 입력하세요.");
$('input[name=url]').focus();
return false;
}
let phone = $('input[name="phone"]').val();
if(!phone){
alert("핸드폰 번호를 입력하세요.");
$('input[name=phone]').focus();
return false;
}취미
if(!$('input[name="hobby"]').is(':checked')){
alert("취미를 선택하세요");
$('input[name="hobby"]:eq(1)').attr('checked', true)
return false;
}
선택하세요가 이미 선택되어있기 때문에 처음에 0번째에 가있을경우
직업을 선택하세요라는 문구가 나오게 해야한다.
if($('select[name="job"] > option:selected').index() == 0){
alert("직업을 선택하세요.")
$('select[name="job"] option:eq(1)').attr('selected', true)
return false;
}
선택안했을 경우 기본값 줄 때 여기서는 checked가 아닌 selected를 해야한다는 것 !!
int[ ] ar = new int[3];
for(int i=0; i<ar.length; i++)
for(?? : ar)
this 자바에서처럼 자기자신을 나타내며 / 하나하나의 값을 this라고 한다.
//입력한 내용을 화면에 출력
let gender = $('input[name="gender"]:checked').val();
let hobby = $('input[name="hobby"]:checked') //여러 개가 선택이 돼서 온다. => 배열로 들어온다.
let hobby_val = '';
hobby.each(function(){
hobby_val += $(this).val()+", "
});
let job = $('select[name="job"] > option:selected').val();
let result = `
<ul>
<li>아이디 : ` + user_id + `</li>
<li>비밀번호 : ` + user_pw + `</li>
<li>성별 : ` + gender + `</li>
<li>이메일 : ` + email + `</li>
<li>URL : ` + url + `</li>
<li>핸드폰 : ` + phone + `</li>
<li>취미 : ` + hobby_val + `</li>
<li>직업 : ` + job + `</li>
</ul>`;
$('body').html(result)
[ member.js 전체코드 ]
$(function(){
// 폼 제출 시 실행되는 코드 작성
$('#join').submit(function(){
let user_id = $('input[name="user_id"]').val();
//id(!user_id){}
if(user_id == ''){
alert("아이디를 입력하세요.");
$('input[name=user_id]').focus();
return false;
}
let user_pw = $('input[name="user_pw"]').val();
if(!user_pw){
alert("비밀번호를 입력하세요.");
$('input[name=user_pw]').focus();
return false;
}
if(!$('input[name="gender"]').is(':checked')) {
alert("성별을 입력하세요.");
//남자 선택하게 하는 것 전부 name속성
//radio는 배열로 받는다. 남자 : gender[0] / 여자 : gender[1]
//document.form1.gender[0].checked = true;
$('input[name="gender"]:eq(0)').attr('checked', true)
return false;
}
let email = $('input[name="email"]').val();
if(!email){
alert("이메일을 입력하세요.");
$('input[name=email]').focus();
return false;
}
let url = $('input[name="url"]').val();
if(!url){
alert("URL을 입력하세요.");
$('input[name=url]').focus();
return false;
}
let phone = $('input[name="phone"]').val();
if(!phone){
alert("핸드폰 번호를 입력하세요.");
$('input[name=phone]').focus();
return false;
}
if(!$('input[name="hobby"]').is(':checked')){
alert("취미를 선택하세요");
$('input[name="hobby"]:eq(1)').attr('checked', true)
return false;
}
if($('select[name="job"] > option:selected').index() == 0){
alert("직업을 선택하세요.")
$('select[name="job"] option:eq(1)').attr('selected', true)
return false;
}
//입력한 내용을 화면에 출력
let gender = $('input[name="gender"]:checked').val();
let hobby = $('input[name="hobby"]:checked') //여러 개가 선택이 돼서 온다. => 배열로 들어온다.
let hobby_val = '';
hobby.each(function(){
hobby_val += $(this).val()+", "
});
let job = $('select[name="job"] > option:selected').val();
let result = `
<ul>
<li>아이디 : ` + user_id + `</li>
<li>비밀번호 : ` + user_pw + `</li>
<li>성별 : ` + gender + `</li>
<li>이메일 : ` + email + `</li>
<li>URL : ` + url + `</li>
<li>핸드폰 : ` + phone + `</li>
<li>취미 : ` + hobby_val + `</li>
<li>직업 : ` + job + `</li>
</ul>`;
$('body').html(result)
return false; // 페이지 이동을 막음.
});
});exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>마우스 이벤트 확인하기</h1>
<div id="input">
Do it in Here~!!
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>마우스 이벤트 확인하기</h1>
<div id="input">
Do it in Here~!!
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#input').mousedown(function(){
$('#result').html('Mouse Down Event')
});
$('#input').mouseup(function(){
$('#result').html('Mouse Up Event')
});
$('#input').mouseenter(function(){
$('#result').html('Mouse Enter Event')
});
$('#input').mouseleave(function(){
$('#result').html('Mouse Leave Event')
});
});
</script>
</body>
</html>
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>클릭 이벤트 확인하기</h1>
<div id="input">
Click or Double Click Here~!!
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#input').click(function(){
$('#result').html('Click Event')
});
$('#input').dblclick(function(){
$('#result').html('Double Click Event')
});
});
</script>
</body>
</html>
exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Hover 이벤트 확인하기</h1>
<div id="input">
Mouse Over or Out
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#input').hover(function(){
$('#result').html('Mouse Enter Event (onMouseOver)')
}, function(){
$('#result').html('Mouse Leave Event (onMouseOut)')
});
});
</script>
</body>
</html>
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Key 이벤트 확인하기</h1>
<div id="input">
<input type="text"/>
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
var down_count = 0;
var up_count = 0;
$('#input > input[type="text"]').keydown(function(){
down_count++;
$("#result").html("down_count: " + down_count + " / up_count: " + up_count);
});
$('#input > input[type="text"]').keyup(function(){
up_count++;
$("#result").html("down_count: " + down_count + " / up_count: " + up_count);
});
});
</script>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| DAY 38 - jQuery (2024.08.26) (0) | 2024.08.26 |
|---|---|
| DAY 37 - jQuery (2024.08.23) (0) | 2024.08.23 |
| DAY 35 - JS - 템플릿리터럴 / 연산자 / 화살표함수 / 시간 / onclick / history (2024.08.21) (0) | 2024.08.21 |
| DAY 34 - JS - getElementById / getElementsByClassName / querySelector / querySelectorAll (2024.08.20) (0) | 2024.08.20 |
| DAY 33 - JS (2024.08.19) - let / var / const / prompt / 함수 / 내장함수 / 이벤트처리 (2024.08.19) (0) | 2024.08.19 |
