반응형
1.이벤트 처리 함수 작성법
41_event_handle.html
- 이벤트(Element 객체)에서 발생되는 다양한 이벤트는 자바스크립트를 이용하여 이벤트 처리 명령을 작성하여 실행
- 동적인페이지( js ) : id 식별자 많이 사용 VS 스타일링( css ) : class 속성값 많이 사용
1) 방법1. HTML + JS 같이 이용
- HTML 태그의 이벤트 속성의 속성값으로 이벤트 처리 명령(함수 호출)을 작성하여 이벤트가 발생될 경우 이벤트 처리 명령이 실행되도록 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<!-- HTML 태그의 onXXX 속성 : 태그에 발생되는 이벤트에 대한 속성으로 이벤트 처리 명령을 속성값으로 설정 -->
<!-- 태그의 이벤트 속성값으로 이벤트 처리 함수 호출 -javascript 접두사 생략 가능 -->
<button type="button" onclick="javascript:alert('버튼-1을 눌렀습니다.')">버튼-1</button>
</body>
</html>
2) 방법2. JS만 이용 : 유지보수가 더 쉬움 - 권장
- Element 객체(태그)에 이벤트 속성을 프로퍼티로 설정해서 이벤트 처리 함수를 등록하여 이벤트가 발생될 경우 이벤트 처리 함수가 호출되어 실행되도록 처리
<!--🍑1. onclick 이벤트 속성값에 이벤트 함수(JS) 등록-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<!-- HTML 태그의 onXXX 속성 : 태그에 발생되는 이벤트에 대한 속성으로 이벤트 처리 명령을 속성값으로 설정 -->
<!-- 태그의 이벤트 속성값으로 이벤트 처리 함수 호출 -javascript 접두사 생략 가능 -->
<button type="button" onclick="eventHandle()">버튼-1</button>
<script type="text/javascript">
function eventHandle(){
alert("버튼-1을 눌렀습니다.");
}
</script>
</body>
</html>
<!--🍑2. id 식별자로 Element 객체 가져옴-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<!-- HTML 태그의 onXXX 속성 : 태그에 발생되는 이벤트에 대한 속성으로 이벤트 처리 명령을 속성값으로 설정 -->
<!-- 태그의 이벤트 속성값으로 이벤트 처리 함수 호출 -javascript 접두사 생략 가능 -->
<button type="button" id="btn" >버튼-2</button>
<script type="text/javascript">
/*
//🍑방법1.
//Element 객체의 이벤트 속성으로 이벤트 처리 함수 등록 : Element 객체에서 이벤트가 발생될 경우 이벤트 처리 함수 자동 호출되어 명령이 실행됨
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("버튼-2를 눌렀습니다.");
}
*/
//🍑방법2.
//변수 사용할 필요 없으니 바로 이벤트 처리 함수 등록
document.getElementById("btn").onclick = function(){
alert("버튼-2를 눌렀습니다.");
}
</script>
</body>
</html>
2. 이벤트 처리 함수 내 this 키워드
42_event_this.html
- 이벤트 처리 함수에서 이벤트가 발생된 태그(Element 객체)를 표현하기 위해 this 키워드 사용
1) 자바스크립트에서 this 의 역할 2가지
- 클래스 함수 내에서 객체의 요소를 표현하기 위해
- 이벤트 처리 함수 내에서 이벤트를 발생시킨 엘리먼트 객체를 표현하기 위해
2) 이벤트 처리함수 내 this 키워드 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
#displayDiv {
border: 1px solid gray;
border-radius: 5px;
width: 500px;
text-align: center;
}
</style>
</head>
<body>
<hr>
<div id="displayDiv">이벤트 처리</div>
<ul>
<li>메뉴 - 1</li>
<li>메뉴 - 2</li>
<li>메뉴 - 3</li>
</ul>
<script type="text/javascript">
//1.
//🍅#displayDiv 태그에 클릭 이벤트 함수 등록
document.getElementById("displayDiv").onclick = function() {
//alert("태그에서 클릭 이벤트가 발생 되었습니다.");
//Element 객체(태그)의 style 속성값 변경 - CSS 스타일 변경
//document.getElementById("displayDiv").style="color:white;background-color:gray;";
//이벤트 발생 태그 : document.getElementById("displayDiv") >> this
this.style="color:white;background-color:gray;";
}
//2.
//🍅li 태그 각각에 클릭 이벤트 함수 등록
var liList = document.getElementsByTagName("li"); //li태그를 찾아 List객체로 만들어주세요!
//방법1.
/*
//메뉴 1 클릭 -> 글자색 오렌지로 변경
liList.item(0).onclick = function() {
//liList.item(0).style="color:orange;";
this.style="color:orange;";
}
liList.item(1).onclick = function() {
//liList.item(1).style="color:orange;";
this.style="color:orange;";
}
liList.item(2).onclick = function() {
//liList.item(2).style="color:orange;";
this.style="color:orange;";
}
*/
//방법2.
for(i=0; i<liList.length; i++){ //i 변수에 [3]이 저장되면 반복문 종료
//반복문 내부에서 List 객체에 저장된 모든 Element 객체에 이벤트 처리 함수 등록
liList.item(i).onclick = function() { //이벤트 처리 함수는 "이벤트가 발생된 후 호출되어 실행"
//이벤트 처리 명령은 "반복문 종료 후 실행"
//alert("i = "+ i); //i = 3
//Element 객체가 없는 경우 객체 요소를 사용할 경우 에러 발생 - 즉, liList.item(3)인 것이고, null이라서 프로퍼티나 메소드 사용 시 error 떨어지는 것임
//liList.item(i).style="color:orange;";
this.style = "color:orange;";
}
}
</script>
</body>
</html>
3. 기본 이벤트(Default Event)
43_default_event.html
- 태그 중에는 이벤트가 발생될 경우 자동 실행되어 명령이 등록된 태그 존재 : <a> 태그, <form> 태그 등
1) 기본 이벤트 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>이벤트(Event) - 기본 이벤트(Default Event)</h1>
<hr>
<p>태그 중에는 이벤트가 발생될 경우 자동 실행되는 명령이 등록된 태그 존재
- a 태그, form 태그 등</p>
<hr>
<button type="button" id="btn">다음(Daum) 이동</button>
<hr>
<!-- 🍍a 태그는 이벤트 처리 함수를 등록하지 않아도 클릭 이벤트가 발생되면 href 속성값으로
브라우저의 URL 주소를 변경하고 웹프로그램을 요청하여 실행결과를 응답받아 출력 - 기본 이벤트 -->
<a href="https://www.naver.com" id="naver"><button type="button">네이버(Naver) 이동</button></a>
<script type="text/javascript">
//🍍<button> 태그의 클릭 이벤트 함수 등록 : 클릭 시 이동 가능해짐
document.getElementById("btn").onclick=function() {
location.href="https://www.daum.net";
}
//🍍<a> 태그의 default 이벤트인 클릭 이벤트 명령 중지
//: 클릭 이벤트가 default라서 클릭 시 이동 가능했지만, 중지하였으므로 클릭해도 이동 불가능해짐
document.getElementById("naver").onclick=function() {
//event 객체 : 이벤트 관련 프로퍼티와 메소드를 제공하는 객체
//event.preventDefault() : 이벤트 발생에 의해 실행되는 명령을 중지하는 메소드
event.preventDefault();
}
</script>
</body>
</html>
4. 이벤트 전달(Event Propagation)
44_event_propagation.html
1) 이벤트 전달이란?
- 태그에서 발생된 이벤트가 다른 태그로 전달 - 캡쳐링 -> 타겟 -> 버블링
2) 이벤트 전달의 단계
- 캡쳐링(Capturing) 단계 : 이벤트가 부모 태그에서 자식 태그로 전달
- 타겟(Target) 단계 : 이벤트가 발생된 태그로 전달
- 버블링(Bubbling) 단계 : 이벤트가 자식 태그에서 부모 태그로 전달
3) 이벤트 전달 예시
기본 세팅
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
div {
border: 1px solid black;
padding: 30px;
text-align: center;
}
#one{ background-color: red; }
#two{ background-color: green;}
#three{ background-color: blue;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
<script type="text/javascript">
문제점
//문제점
//=> 클릭이벤트 발생 시 부모객체에서 자식객체로 전달되는데(capturing),
//=> 부모에게도 클릭이벤트가 있으므로 자식객체를 클릭해도 부모의 이벤트 발생만 실행됨
document.getElementById("one").onclick = function() { //조상태그
location.href = "<https://www.daum.net>";
}
document.getElementById("two").onclick = function() { //부모태그
location.href = "<https://www.naver.com>";
}
document.getElementById("three").onclick = function() { //자식태그
location.href = "<https://www.google.com>";
}
해결법
//해결법
//=> 자식객체에 이벤트 발생 시 부모객체에게 이벤트 전달을 중지하는 메소드 작성하기
document.getElementById("one").onclick = function() { //조상태그
location.href = "<https://www.daum.net>";
}
document.getElementById("two").onclick = function() { //부모태그
location.href = "<https://www.naver.com>";
event.stopPropagation(); //🍐event.stopPropagation() : 이벤트 전달을 중지하는 메소드 (Bubbling 중지)
}
document.getElementById("three").onclick = function() { //자식태그
location.href = "<https://www.google.com>";
return false; //🍐이벤트 처리 함수에서 false를 반환하면 이벤트 전달이 중지됨
}
</script>
</body>
</html>
5. "다수의" 이벤트 함수 등록
45_event_listener.html
1) EventListener 란?
- 태그의 이벤트 속성의 속성값으로 이벤트 처리 함수를 호출하여 이벤트 처리
- 다수의 이벤트 처리 함수 호출 가능
2) EventListener 예시
기본세팅
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" onclick="eventHandleOne(); eventHandleTwo();">이벤트 버튼 - 1</button>
<button type="button" id="btn">이벤트 버튼 - 2</button>
<script type="text/javascript">
이벤트 버튼 - 1 클릭 시
//이벤트 버튼 - 1 클릭 시
//=> eventHandleOne() 실행 후 -> eventHandleTwo() 실행됨
function eventHandleOne() {
alert("eventHandleOne 함수의 이벤트 처리 명령 실행");
}
function eventHandleTwo() {
alert("eventHandleTwo 함수의 이벤트 처리 명령 실행");
}
이벤트 버튼 - 2 클릭 시
//이벤트 버튼 - 2 클릭 시
//=> 덮어씌우기(overwrite)로 인해 alert("두번째 이벤트 처리 함수의 명령 실행");만 실행됨
//태그를 검색하여 Element 객체로 반환받아 이벤트 속성에 이벤트 처리 함수 등록하여 이벤트 처리
//=> Element 객체의 이벤트 속성에는 이벤트 처리 함수를 "하나만 등록" 가능
document.getElementById("btn").onclick = function() {//덮어씌우기(overwrite)
alert("첫번째 이벤트 처리 함수의 명령 실행");
}
document.getElementById("btn").onclick = function() {
alert("두번째 이벤트 처리 함수의 명령 실행");
}
이벤트 버튼 - 2 클릭 시
//이벤트 버튼 - 2 클릭 시
//=> alert("첫번째 이벤트 처리 함수의 명령 실행"); 실행 후 ->
//=> alert("두번째 이벤트 처리 함수의 명령 실행"); 실행됨
//🍓Node.addEventListener( type , callback [,capture] ) :Node(Element) 객체에서 발생된 이벤트에 대한 이벤트 처리 함수를 등록하는 메소드
//=> type : 이벤트 종류 전달 (on 제외하고 작성)
//=> callback : 이벤트 처리 함수
//=> capture : false(기본 - 이벤트 전달 안함) 또는 true
//Node(Element) 객체에서 발생된 이벤트에 대한 "다수의 이벤트 처리 함수"를 등록할 때 사용
document.getElementById("btn").addEventListener("click", function() {
alert("첫번째 이벤트 처리 함수의 명령 실행");
}, false);
document.getElementById("btn").addEventListener("click", function() {
alert("두번째 이벤트 처리 함수의 명령 실행");
}, false);
</script>
</body>
</html>
6. DHTML(Dynamic HTML)
46_event_dom.html
1) DHTML이란?
- 태그에서 이벤트가 발생될 경우 태그에 대한 Element객체를 조작하여 동적인 페이지를 제공하는 기능
- 참고) REACT : HTML + JS 합쳐져서 동적인 페이지를 쉽게 만들 수 있도록 제공
2) DHTML 예시
기본세팅
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
#itemListDiv div{
margin: 5px;
}
</style>
</head>
<body>
<button type="button" id="addBtn">아이템 추가</button>
<div id="itemListDiv"></div>
[아이템추가] 버튼 클릭 시 - #addBtn 태그의 클릭 이벤트 함수 등록
<script type="text/javascript">
var count = 0;//태그를 구분하기 위한 값을 저장하는 전역변수(프로그램이 끝나야 소멸)
//[아이템추가] 버튼 클릭 시 - #addBtn 태그의 클릭 이벤트 함수 등록
document.getElementById("addBtn").onclick = function() {
count++;
var newItem = document.createElement("div"); //<div></div>가 생성됨
newItem.setAttribute("id","item_"+count); //속성값이 <div id="item_XXX"></div>로 설정됨
var html = "아이템["+count+"] "; //"아이템XXX " 라는 String객체 생성됨
html+="<button type='button' onclick='removeItem("+count+");'>삭제</button>"; //"아이템XXX <button type='button' onclick='removeItem("+count+");'>삭제</button>" 라는 String객체
newItem.innerHTML = html;
//<div id="item_XXX">html</div>
//<div id="item_XXX">아이템XXX <button type='button' onclick='removeItem("+count+");'>삭제</button></div>
document.getElementById("itemListDiv").appendChild(newItem);
//다 만들어진 노드 객체를 itemListDiv의 마지막 자식으로 추가해 출력
}
[삭제]버튼 클릭 시
//🥭[삭제]버튼 클릭 시
function removeItem(cnt) {
//alert(cnt);
var removeElement = document.getElementById("item_"+cnt);//itemXXX를 찾아서
document.getElementById("itemListDiv").removeChild(removeElement);//itemListDiv의 자식인 itemXXX을 삭제해주세요
}
</script>
</body>
</html>
7)Form 태그 관련 이벤트
1) <form> 태그
- 사용자로 값을 입력받아 제출 이벤트(Submit Event)가 발생 되면 웹프로그램을 요청하여 입력값을 전달하는 태그
2) <a>태그
- 클릭 이벤트(Click Event)가 발생 되면 웹프로그램을 요청하여 URL 주소를 요청하는 태그
- 기본적으로 사용자 입력값 전달 못함
3) 사용자 입력값 있을 경우 - 검증 필수
- 제출 이벤트 발생 전 검증
- 제출 이벤트(Submit Event)가 발생되어 form 태그가 실행되기 전에 사용자 입력값에 대한 검증 기능을 자바스크립트로 구현
- 즉, 사용자 입력값에 대한 검증을 클라이언트에서 자바스크립트로 하고, 검증된 값을 서버에게 전달하면 서버 부담 줄어듦
- 대형 프로그램 : 입력값에 대한 검증을 클라이언트와 서버에서 검증 , 총 2번함
4) form의 click이벤트 프로그램 (입력-출력)
47_event_form.html - 입력페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Form 태그 관련 이벤트 - 입력페이지</h1>
form 태그
<!-- form 태그의 action 속성값으로 요청 웹프로그램의 URL 주소 설정 -->
<!-- => form 태그의 자식 태그로 입력태그와 제출 이벤트가 발생되는 태그가 반드시 존재 -->
<!-- => form 태그 또는 입력태그의 name 속성값은 자바스크립트에서 객체명으로 사용 가능 -->
<!-- form 태그에서 action 속성(기본값 : 현재 URL 주소) 및 method 속성(기본값 : GET) 생략 가능 -->
<!-- <form action="47_event_action.html" method="post" name="loginForm"> -->
<!-- => 자바스크립트를 이용하여 action 속성과 method 속성에 대한 속성값 설정 가능 -->
<form name="loginForm">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="passwd"></td>
</tr>
<!-- button 태그의 type 속성값을 [submit - 기본값]으로 설정한 경우,
버튼을 클릭하면 제출 이벤트(Submit Event)가 발생해 form 태그가 실행되어 웹프로그램을 요청해 입력값 전달 (무조건적인 요청) - 사용자 입력값에 대한 검증 불가능 -->
<!-- <tr><td colspan="2"><button type="submit">로그인</button></td></tr> -->
<!-- <tr><td colspan="2"><button>로그인</button></td></tr> -->
<!-- button 태그의 type 속성값을 [button]으로 설정한 경우,
일반 버튼으로 출력되므로 자바스크립트를 이용하여 버튼을 클릭할 경우 실행될 이벤트 처리 함수 등록해야함
이벤트 처리 함수에서 "사용자 입력값 검증"을 하여 "검증에 성공한 경우에만" 제출 이벤트(Submit Event)가 발생헤 form 태그가 실행되어 웹프로그램 요청하여 입력값 전달 - 사용자 입력값에 대한 검증 가능 -->
<tr><td colspan="2"><button type="button" id="loginBtn">로그인</button></td></tr>
</table>
</form>
form태그의 name 속성값 이용 가능
<script type="text/javascript">
//"form태그" 및 "입력태그"의 name 속성값으로 element 객체 표현 가능
alert(document.loginForm); //[object HTMLFormElement]
//document 객체 표현 생략 가능
alert(loginForm); //[object HTMLFormElement]
//입력태그(input, textarea, select)는 form 태그의 자식태그
//입력태그의 name 속성값으로 Element 객체 표현 가능
//=>즉, 자바스크립트에서 getElementById로 element 객체 표현하지 않아도 됨
alert(loginForm.id); //[object HTMLInputElement]
alert(loginForm.passwd); //[object HTMLInputElement]
//1.
//🍎InputElement.focus() : 입력태그에 입력촛점을 위치시키는 메소드
loginForm.id.focus();
//2.
//🍎form 태그의 Click 이벤트가 발생될 경우 호출되는 이벤트 처리 함수 등록
document.getElementById("loginBtn").onclick = function() {
//사용자 입력값에 대한 검증
// [1.입력값 유무에 대한 검증] , [2.입력값 패턴에 대한 검증] 등
//[1.입력값 유무에 대한 검증]
//InputElement.value : 입력태그(Element 객체)의 입력값을 저장한 프로퍼티
if(loginForm.id.value==""){//입력태그에 입력값이 없는 경우
alert("아이디를 입력해 주세요.");
loginForm.id.focus();
return; //이벤트 처리 함수 강제 종료 - 제출 이벤트 미발생 : form 태그 미실행
}
//[2.입력값 패턴에 대한 검증] - 입력값 패턴에 대한 검증은 정규표현식 이용
//자바스크립트에서는 정규표현식을 / / 안에 작성하여 RegExp 객체로 표현하여 사용 [g : global - 모든 자바스크립트에서 사용 가능하다는 뜻] [자바는 \\를 표현하려면 \\\\ 두번 써야하지만, 자바스크립트는 \\ 한번만 사용 가능]
var idReg=/^[a-zA-Z]\\w{5,19}$/g;
//RegExp.test(input) : RegExp 객체에 저장된 정규표현식으로 입력값에 대한 패턴을 검사하여 형식에 맞지 않을 경우 [false]를 반환하고, 형식에 맞는 경우 [true]를 반환하는 메소드
if(!idReg.test(loginForm.id.value)){//사용자 입력값이 패턴에 맞지 않는 경우
alert("아이디를 형식에 맞게 입력해 주세요.");
loginForm.id.focus();
return;
}
//[1.입력값 유무에 대한 검증]
if(loginForm.passwd.value==""){//입력태그에 입력값이 없는 경우
alert("비밀번호를 입력해 주세요.");
loginForm.passwd.focus();
return; //이벤트 처리 함수 강제 종료 - 제출 이벤트 미발생 : form 태그 미실행
}
//[2.입력값 패턴에 대한 검증]
var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{8,30}$/g;
if(!passwdReg.test(loginForm.id.value)){//사용자 입력값이 패턴에 맞지 않는 경우
alert("비밀번호를 형식에 맞게 입력해 주세요.");
loginForm.passwd.focus();
return;
}
//✨태그의 속성은 Element 객체의 프로퍼티로 표현하여 속성값 변경 가능
//단, subit이벤트 발생 전 작성하기
loginForm.action = "47_event_action.html";
loginForm.method = "post";
//🍎FormElement.submit() : form 태그에 제출 이벤트를 발생시키는 메소드 - form 태그 실행
loginForm.submit();
}
</script>
</body>
</html>47_event_action.html - 처리페이지 - 웹프로그램
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Form 태그 관련 이벤트 - 처리페이지</h1>
<hr>
</body>
</html>
5) form의 submit이벤트 프로그램 (입력-출력)
48_submit_form.html - 입력페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Form 태그 관련 이벤트 - 입력페이지</h1>
form 태그
<form action="48_submit_action.html" method="post" name="loginForm">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="passwd"></td>
</tr>
<tr>
<td colspan="2"><button type="submit">로그인</button></td>
</tr>
</table>
</form>
form태그의 name 속성값 이용 가능
<script type="text/javascript">
//1.
//🍏InputElement.focus()
loginForm.id.focus();
//2.
//🍏form 태그의 Submit 이벤트가 발생될 경우 호출되는 이벤트 처리 함수 등록
loginForm.onsubmit = function () {
if(loginForm.id.value==""){
alert("아이디를 입력해 주세요.");
loginForm.id.focus();
/*
event.preventDefault(); //태그의 기본 이벤트(Submit Event) 중지 - form 태그 미실행
return;
*/
//🍏"이벤트 처리 함수"에서 [false]를 반환하면 기본 이벤트 제거 및 이벤트 전달 중지되며 이벤트 처리 함수 종료 - false 논리값을 반환하는 것 아님
return false; //event.preventDefault()메소드 호출과 event.stopPropagation()메소드 호출 명령 실행
}
var idReg=/^[a-zA-Z]\\w{5,19}$/g;
if(!idReg.test(loginForm.id.value)){
alert("아이디를 형식에 맞게 입력해 주세요.");
loginForm.id.focus();
/*
event.preventDefault();
return;
*/
return false;
}
if(loginForm.passwd.value==""){
alert("비밀번호를 입력해 주세요.");
loginForm.passwd.focus();
/*
event.preventDefault();
return;
*/
return false;
}
var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{8,30}$/g;
if(!passwdReg.test(loginForm.id.value)){
alert("비밀번호를 형식에 맞게 입력해 주세요.");
loginForm.passwd.focus();
/*
event.preventDefault();
return;
*/
return false;
}
}
</script>
</body>
</html>48_submit_action.html - 처리페이지 - 웹프로그램
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Form 태그 관련 이벤트 - 처리페이지</h1>
<hr>
</body>
</html>
반응형
'web > javascript' 카테고리의 다른 글
| [js] 11. 자바스크립트 쿠키(Cookie) 사용법 (0) | 2024.05.19 |
|---|---|
| [js] 10. 자바스크립트 예외처리(Exception Handle) (0) | 2024.05.18 |
| [js] 8. DOM(Document Object Model) | Element 객체 조작법 (0) | 2024.05.18 |
| [js] 7. BOM(Browser Object Model) | window | screen | navigator | location | document (0) | 2024.05.17 |
| [js] 6. 자바스크립트 표준내장객체 (클래스함수) Number|String|Date|Math|JSON (0) | 2024.05.16 |
