자바 스크립트에는 사용자가 이벤트를 발생시키면 그 이벤트에 대응하여 이벤트 핸들러를 사용해서 처리해주어야 한다.
그에 대한 실습을 해보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function func(){
console.log('good');
let dateTime = "2024-05-20";
let arrData = dateTime.split('-');
document.write(`${arrData[0]}년 ${arrData[1]}월 ${arrData[2]}일`);
}
</script>
</head>
<body>
<h2>이벤트 처리 이해</h2>
<a href="https://www.naver.com">네이버</a><br>
<a href="javascript:func()">이벤트 처리 함수 호출1</a><br>
<!--
이벤트 연결
사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것을 이벤트 핸들러라고 함
이벤트 핸들러는 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리.
on 이벤트 종류 = 핸들러 함수()
-->
<a href="javascript:onclick='func()';">이벤트 처리 함수 호출2</a><br>
<button onclick="func()">이벤트 처리 함수 호출3</button><br>
<input type="button" onclick="func()" value="이벤트 처리 함수 호출4"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function colorFunc(){
//alert(document.frm.selBc.value);
document.body.bgColor = document.frm.selBc.value;
document.body.text = frm.selTc.value;
}
</script>
</head>
<body>
<h2>이벤트 연습</h2>
<form name="frm">
<table border="1">
<tr>
<td colspan="2">색상 선택</td>
</tr>
<tr>
<td><b>배경색 : </b></td>
<td>
<select name="selBc">
<option value="black">검정</option>
<option value="blue">파랑</option>
<option value="green">초록</option>
<option value="white" selected="selected">하양</option>
</select>
</td>
</tr>
<tr>
<td><b>글자색 : </b></td>
<td>
<select name="selTc">
<option value="black" selected="selected">검정</option>
<option value="blue">파랑</option>
<option value="green">초록</option>
<option value="white">하양</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" value="변경 확인" onclick="colorFunc()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
이벤트를 처리하면서 DOM을 배우기 전 중요한 두가지에 대해서도 따로 공부해보았다.
innerText : element 안의 text 값들만을 수정, 참조. tag도 text 처리
innerHTML : element 안의 HTML이나 XML이 있으면 기능 발휘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function func1(){
let str1 = document.getElementById("test1").innerHTML;
document.getElementById("show1").innerHTML = str1;
document.getElementById("show2").innerHTML = "<i>" + str1 + "</i>";
let mytag = "이름:<input type='text' name='irum'/>";
mytag += "<br>";
mytag += "나이:<input type='text' name='nai' value='23'/>";
document.getElementById("test1").innerHTML = mytag;
}
function func2(){
let str2 = document.getElementById("test2").innerHTML;
document.getElementById("show1").innerText = str2;
document.getElementById("show2").innerText = "<i>" + str2 + "</i>";
}
</script>
</head>
<body>
<h2>실행 중 tag 또는 데이터의 생성, 삭제, 수정, 참조, 처리 가능</h2>
<!--
innerText : element 안의 text 값들만을 수정, 참조. tag도 text 처리
innerHTML : element 안의 HTML이나 XML이 있으면 기능 발휘
DOM 기능을 일부 수행
Document Object Model의 약자로, HTML 요소를 자바스크립트 object처럼 조작할 수 있는 모델
-->
<hr>
<div id="test1"><h2>innerHTML 연습</h2></div>
<div id="test2">안녕하세요</div>
<input type="button" value="처리 1" onclick="func1()">
<input type="button" value="처리 2" onclick="func2()">
<br>
<div id="show1"></div>
<div id="show2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function func1(){
document.getElementById("show").innerText = "전통적인 이벤트 처리";
}
let a = 10;
let b = {
funcNew:function(){
document.getElementById("show").innerText = "b 객체의 메소드 처리";
},
funcNew2:function(){
document.getElementById("show").innerHTML = "<h1>b 객체의 멤버 처리</h1>";
},
}
</script>
<script type="text/javascript">
// window.onload() : 자바스크립트에서 페이지가 로드(서버로부터 문서 수신이 완료)되면 자동으로 실행되는 전역 콜백함수.
window.onload = function(){ // 1회 : 초기화 담당
//alert("ok");
const exBtn1 = document.getElementById("btn1"); // 버튼을 읽어 변수가 기억
exBtn1.onclick = function(){ // 이벤트 장착
document.getElementById("show").innerText = "클릭1 선택";
}
const exBtn2 = document.getElementsByName("myBtn"); // 배열
console.log(exBtn2.length);
exBtn2[0].onclick = function(){
document.getElementById("show").innerText = "클릭2 누름";
}
exBtn2[1].onclick = function(){
document.getElementById("show").innerText = "클릭3 처리";
}
exBtn3 = document.getElementsByTagName("input")[6];
exBtn3.onclick = function(){
document.getElementById("show").innerText = "클릭4 수행";
}
// 이벤트 연결 및 해제
// 컴포넌트.addEventListener("이벤트 종류", 핸들러 함수)
document.getElementById("show").addEventListener("click", abcFunc);
}
function abcFunc(){
document.getElementById("show").innerText = "클릭5 이벤트 연결처리";
// 이벤트 연결 해제
document.getElementById("btn5").removeEventListener("click", abcFunc);
}
</script>
</head>
<body>
<h2>이벤트 처리</h2>
<input type="button" value="버튼1" onclick="func1()"><br>
<input type="button" value="버튼2" onclick="b.funcNew()"><br>
<input type="button" value="버튼3" onclick="b.funcNew2()"><br>
<hr>
<input type="button" value="클릭1" id="btn1">
<input type="button" value="클릭2" id="btn2" name="myBtn">
<input type="button" value="클릭3" id="btn3" name="myBtn">
<input type="button" value="클릭4" id="btn4">
<input type="button" value="클릭5" id="btn5">
<hr>
<div id="show"></div>
</body>
</html>
클릭했을 때의 이벤트 처리에 대해서도 실습했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = () => {
document.getElementById("colorW").onclick = function(){
document.bgColor = "white";
}
document.getElementById("colorG").onclick = () =>{
document.bgColor = "#00ff00";
}
/*
document.getElementById("colorR").onclick = () =>{
document.bgColor = "rgb(255, 0, 0)"; // rgb(100%, 0%, 0%)
}*/
document.querySelector("#colorR").onclick = () =>{
document.bgColor = "rgb(255, 0, 0)";
}
document.querySelector(".hello").onclick = () => {
document.querySelector("#show").innerText = "안녕하세요";
}
document.querySelector("#calc").ondblclick = () => {
let ss = `연산결과는 ${10 + 20}`;
document.querySelector("#show").innerText = ss;
}
// hover 기능
document.querySelector("#name").onmouseover = () => {
document.querySelector("#show").innerText = "<h1>난 홍길동</h1>";
}
document.querySelector("#name").onmouseout = () => {
document.querySelector("#show").innerText = "";
}
// a tag : click 이벤트가 기본 등록됨
document.querySelector("#daum").onclick = (event) =>{
event.preventDefault(); // 해당 태그의 고유 기능 해제
console.log(event);
console.log(`x좌표 : ${event.x} y좌표 : ${event.y}`);
}
//select
const sdata = document.querySelector("#sel");
/*
sdata.onclick = function(){
document.querySelector("#show").innerHTML = sdata.value;
console.log(sdata.value);
}*/
sdata.onchange = function(){
document.querySelector("#show").innerHTML = sdata.value;
console.log(sdata.value);
}
};
</script>
</head>
<body>
<h2>여러 이벤트 경험</h2>
<input type="button" value="흰색" id="colorW">
<!--
<input type="button" value="녹색" id="colorG">
<input type="button" value="적색" id="colorR">
-->
<span id="colorG"> 녹색 </span>
<b id="colorR" style = "border: 1px solid black; cursor : pointer;"> 적색 </b>
<hr>
이벤트 종류 연습<br>
<button id="Hello" class="hello">인사하기(click)</button>
<button id="calc">계산하기(dblclick)</button>
<button id="name">이름알기(mouseover)</button>
<br>
<a href="https://m.daum.net" id="daum">앵커 태그 클릭</a>
<br>
<select id="sel">
<option value="프로그래머">프로그래머</option>
<option value="웹퍼블리셔">웹퍼블리셔</option>
<option value="프로게이머">프로게이머</option>
</select>
<hr>
<div id="show">출력장소 1</div>
</body>
</html>
이를 활용한 간단한 캘린더 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = () => {
document.querySelector("#btnShow").addEventListener("click", func);
};
function func(){
//alert("a");
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth();
let day = now.getDate();
console.log(`${year} ${month + 1} ${day}`);
// 현재 월의 1일은 무슨 요일인지?
let setDate = new Date(year, month, 1);
let firstDay = setDate.getDate();
console.log(firstDay); // 1
let yoil = setDate.getDay(); // 요일 반환 0(일) ~ 6(토) 까지 값 반환
console.log(yoil);
// 현재 월의 일 수는?
const nalsu = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
// 2월 일 수는 윤년 체크
if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
nalsu[1] = 29;
}
let str = makeCalendar(yoil, nalsu[month], year, month + 1, day);
document.querySelector("#disp").innerHTML = str;
document.querySelector("#etc").style.display = ""; // 버튼 등장
}
function makeCalendar(yoil, nalsu, year, month, day){
let str = `<table>`;
str += `<tr><th colspan="7">${year}년 ${month}월</th></tr>`;
str += `<tr>`;
let week = new Array("일", "월", "화", "수", "목", "금", "토");
for(let i=0;i<week.length;i++){
str += `<th>${week[i]}</th>`;
}
str += `</tr>`; // 년월 요일명 출력 완료
// 날 수 채우기
let no = 1;
let currentCell = 0;
// 이번 달은 몇 주?
let ju = Math.ceil((nalsu + yoil) / 7);
console.log(`이번달은 ${ju}`);
for(let r=0; r<ju; r++){ // 행
str += `<tr style="text-align:center">`;
for(let col=0; col<7; col++){ // 열
if(currentCell < yoil || no > nalsu){ // 예) 첫 주의 1일이 수요일이면 이전은 공백처리, 일 수까지만 출력
str += `<td> </td>`;
currentCell++;
}else {
if(no === day){ // 오늘의 글자색은 파랑으로 표시
str += `<td style="color:blue">${no}</td>`;
}else {
str += `<td>${no}</td>`;
}
no++;
}
}
str += `</tr>`;
}
str += `</table>`;
return str;
}
</script>
</head>
<body>
<button id="btnShow">달력보기</button>
<br><br>
<div id="disp"></div>
<br>
<div id="etc" style="display: none;">
<button id="btnPyear">이전 년</button>
<button id="btnPmonth">이전 월</button>
<button id="btnNmonth">다음 월</button>
<button id="btnNyear">다음 년</button>
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 자바스크립트 돔(DOM) (1) | 2024.07.24 |
|---|---|
| 자바스크립트 폼(form)과 부트스트랩(bootstrap) 활용 (0) | 2024.07.24 |
| 자바스크립트 함수(Arrow 함수, 재귀함수) (1) | 2024.07.24 |
| 자바스크립트 배열과 함수 (2) | 2024.07.24 |
| 자바스크립트 문법 배우기 (1) | 2024.07.24 |