라라리라
2023.09.05 / Step 3 [DOM_이벤트] - 코딩 45 일차 본문
_0301_이벤트추가1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick</title>
</head>
<body>
<!--
[개념] 이벤트 핸들러
이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수를 할당해야 하는데,
이 함수를 핸들러(handler)라고 부른다.
-->
<!--
[개념] 이벤트 추가하기
(1) HTML 속성 : onclick="함수명()"
(2) DOM 속성 : elem.onclick = function
(3) 메서드 : elem.addEventListener(이벤트명, 실행할이벤트함수)
-->
<!-- onclick : 마우스를 클릭했을 때 발생하는 이벤트 -->
<button onclick="clickMe()">버튼</button>
<script>
function clickMe() {
alert("클릭!");
}
</script>
</body>
</html>
_0301_이벤트추가2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick</title>
</head>
<body>
<!--
[개념] 이벤트 추가하기
(1) HTML 속성 : onclick="함수명()"
(2) DOM 속성 : elem.onclick = function
(3) 메서드 : elem.addEventListener(이벤트명, 실행할이벤트함수)
-->
<button id="btn">버튼</button>
<script>
let btn = document.querySelector("#btn");
btn.onclick = function() {
alert("클릭!");
}
</script>
</body>
</html>
_0301_이벤트추가3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick</title>
</head>
<body>
<!--
[개념] 이벤트 추가하기
(1) HTML 속성 : onclick="함수명()"
(2) DOM 프로퍼티 : elem.onclick = function
(3) 메서드 : elem.addEventListener(이벤트명, 실행할이벤트함수)
* HTML속성과 DOM 프로퍼티를 이용한 이벤트 핸들러 방식은
하나의 이벤트에 여러개의 핸들러(=함수)를 할당할 수 없다는 문제가 있다.
* 반면 addEventListener 메서드는 여러개의 핸들러를 할당할 수 있어
addEventListener 사용을 권장한다.
-->
<button id="btn" onclick="alert('첫번째')">버튼</button>
<script>
let btn = document.querySelector("#btn");
btn.onclick = function() {
alert("두번째"); // 마지막 것만 실행됨
}
</script>
</body>
</html>
_0301_이벤트추가4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>addEventListener()</title>
</head>
<body>
<!--
[개념] 이벤트 추가하기
(1) HTML 속성 : onclick="함수명()"
(2) DOM 프로퍼티 : elem.onclick = function
(3) 메서드 : elem.addEventListener(이벤트명, 실행할이벤트함수)
* HTML속성과 DOM 프로퍼티를 이용한 이벤트 핸들러 방식은
하나의 이벤트에 여러개의 핸들러(=함수)를 할당할 수 없다는 문제가 있다.
* 반면 addEventListener 메서드는 여러개의 핸들러를 할당할 수 있어
addEventListener 사용을 권장한다.
-->
<!-- <button onclick="test()" id="btn">버튼</button> -->
<button id="btn">버튼</button>
<script>
let btn = document.querySelector("#btn");
// 주의!!! 함수명만 작성할 것! 소괄호 작성하면 오류 발생!
btn.addEventListener("click", test);
btn.addEventListener("click", test2);
function test() {
alert("함수호출!");
}
function test2(){
confirm("retry")
}
</script>
</body>
</html>
0302_onblur.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onblur</title>
</head>
<body>
<!--
[개념] 이벤트 종류
(1) onblur : 내용 변경에 관계없이 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(2) onchange : 내용이 변경 된 후 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(3) onfocus : HTML 요소가 포커스를 받으면 이벤트가 발생한다.
(4) oninput
1) <input> 또는 <textarea> 요소의 값이 변경될 때 발생하는 이벤트이다.
2) onchange와 유사하나 oninput은 내용이 변경된 직후 이벤트가 발생한다.
(5) onkeyup / onkeydown : 키보드의 키를 놓을/누를 때 이벤트가 발생한다.
(6) onload
1) 객체가 로드되었을 때 이벤트가 발생한다.
2) 웹 페이지가 모든 콘텐츠를 완전히 로드한 후 스크립트를 실행하기 위해
<body> 요소 내에서 가장 자주 사용한다.
(7) onclick : HTML 요소를 클릭했을 때 이벤트가 발생한다.
-->
<input type="text" id="msg" placeholder="소문자로 입력하세요." onblur="changeUpper()"> <!--
요소가 포커스를 잃었을때, changUpper라는 함수를 실행한다.
-->
<!-- <input type="text" id="msg" placeholder="소문자로 입력하세요." onchange="changeUpper()"> -->
<script>
function changeUpper() { //함수: changeUpper 지정한다.
let element = document.querySelector("#msg"); //`변수명` 은 msg라는 id의 요소를 받아온다
element.value = element.value.toUpperCase(); //`변수명`의 요소중 입력값(value)을 대문자로변경
element.style.backgroundColor = "yellow"; // `변수명`의 스타일: backgrounColor를 yellow로 변경
}
</script>
</body>
</html>
_0303_onchange.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onchange</title>
</head>
<body>
<!--
[개념] 이벤트 종류
(1) onblur : 내용 변경에 관계없이 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(2) onchange : 내용이 변경 된 후 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(3) onfocus : HTML 요소가 포커스를 받으면 이벤트가 발생한다.
(4) oninput
1) <input> 또는 <textarea> 요소의 값이 변경될 때 발생하는 이벤트이다.
2) onchange와 유사하나 oninput은 내용이 변경된 직후 이벤트가 발생한다.
(5) onkeyup / onkeydown : 키보드의 키를 놓을/누를 때 이벤트가 발생한다.
(6) onload
1) 객체가 로드되었을 때 이벤트가 발생한다.
2) 웹 페이지가 모든 콘텐츠를 완전히 로드한 후 스크립트를 실행하기 위해
<body> 요소 내에서 가장 자주 사용한다.
(7) onclick : HTML 요소를 클릭했을 때 이벤트가 발생한다.
-->
<h4>과목을 선택하세요.</h4>
<select id="mySelect" onchange="selectSub()">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
<p id="selected">선택한 과목 : </p>
<script>
function selectSub() {
let value = document.querySelector("#mySelect").value;
document.querySelector("#selected").innerText = "선택한 과목 : " + value;
}
</script>
</body>
</html>
과목을 선택하세요.
선택한 과목 :
_0304_onfocus.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onblur</title>
</head>
<body>
<!--
[개념] 이벤트 종류
(1) onblur : 내용 변경에 관계없이 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(2) onchange : 내용이 변경 된 후 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(3) onfocus : HTML 요소가 포커스를 받으면 이벤트가 발생한다.
(4) oninput
1) <input> 또는 <textarea> 요소의 값이 변경될 때 발생하는 이벤트이다.
2) onchange와 유사하나 oninput은 내용이 변경된 직후 이벤트가 발생한다.
(5) onkeyup / onkeydown : 키보드의 키를 놓을/누를 때 이벤트가 발생한다.
(6) onload
1) 객체가 로드되었을 때 이벤트가 발생한다.
2) 웹 페이지가 모든 콘텐츠를 완전히 로드한 후 스크립트를 실행하기 위해
<body> 요소 내에서 가장 자주 사용한다.
(7) onclick : HTML 요소를 클릭했을 때 이벤트가 발생한다.
-->
<input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()">
<script>
let element = document.querySelector("#myInput");
console.log(element);
// element.addEventListener("focus", focusFunction);
// element.addEventListener("blur", blurFunction);
function focusFunction() {
element.style.background = "lightgray";
}
function blurFunction() {
element.style.background = "";
}
</script>
</body>
</html>
_0305_oninput1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oninput</title>
</head>
<body>
<!--
[개념] 이벤트 종류
(1) onblur : 내용 변경에 관계없이 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(2) onchange : 내용이 변경 된 후 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(3) onfocus : HTML 요소가 포커스를 받으면 이벤트가 발생한다.
(4) oninput
1) <input> 또는 <textarea> 요소의 값이 변경될 때 발생하는 이벤트이다.
2) onchange와 유사하나 oninput은 내용이 변경된 직후 이벤트가 발생한다.
(5) onkeyup / onkeydown : 키보드의 키를 놓을/누를 때 이벤트가 발생한다.
(6) onload
1) 객체가 로드되었을 때 이벤트가 발생한다.
2) 웹 페이지가 모든 콘텐츠를 완전히 로드한 후 스크립트를 실행하기 위해
<body> 요소 내에서 가장 자주 사용한다.
(7) onclick : HTML 요소를 클릭했을 때 이벤트가 발생한다.
-->
<input type="text" id="name" placeholder="이름을 입력하세요." oninput="changeText()">
<p id="result"></p>
<script>
function changeText() {
// alert(document.querySelector("#name").value);
document.querySelector("#result").innerText = document.querySelector("#name").value;
}
</script>
</body>
</html>
_0305_oninput2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oninput</title>
</head>
<body>
<!--
[개념] 이벤트 종류
(1) onblur : 내용 변경에 관계없이 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(2) onchange : 내용이 변경 된 후 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(3) onfocus : HTML 요소가 포커스를 받으면 이벤트가 발생한다.
(4) oninput
1) <input> 또는 <textarea> 요소의 값이 변경될 때 발생하는 이벤트이다.
2) onchange와 유사하나 oninput은 내용이 변경된 직후 이벤트가 발생한다.
(5) onkeyup / onkeydown : 키보드의 키를 놓을/누를 때 이벤트가 발생한다.
(6) onload
1) 객체가 로드되었을 때 이벤트가 발생한다.
2) 웹 페이지가 모든 콘텐츠를 완전히 로드한 후 스크립트를 실행하기 위해
<body> 요소 내에서 가장 자주 사용한다.
(7) onclick : HTML 요소를 클릭했을 때 이벤트가 발생한다.
-->
<input type="range" id="range" oninput="changeRange()">
<p id="result"></p>
<script>
function changeRange() {
let value = document.querySelector("#range").value;
document.querySelector("#result").innerText = value;
}
</script>
</body>
</html>
_0306_onkeydown.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onkeydown</title>
</head>
<body>
<!--
[개념] 이벤트 종류
(1) onblur : 내용 변경에 관계없이 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(2) onchange : 내용이 변경 된 후 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(3) onfocus : HTML 요소가 포커스를 받으면 이벤트가 발생한다.
(4) oninput
1) <input> 또는 <textarea> 요소의 값이 변경될 때 발생하는 이벤트이다.
2) onchange와 유사하나 oninput은 내용이 변경된 직후 이벤트가 발생한다.
(5) onkeyup / onkeydown : 키보드의 키를 놓을/누를 때 이벤트가 발생한다.
(6) onload
1) 객체가 로드되었을 때 이벤트가 발생한다.
2) 웹 페이지가 모든 콘텐츠를 완전히 로드한 후 스크립트를 실행하기 위해
<body> 요소 내에서 가장 자주 사용한다.
(7) onclick : HTML 요소를 클릭했을 때 이벤트가 발생한다.
-->
<input type="text" id="myInput" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
<script>
function keydownFunction() {
document.querySelector("#myInput").style.backgroundColor = "red";
}
function keyupFunction() {
document.querySelector("#myInput").style.backgroundColor = "green";
}
</script>
</body>
</html>
_0306_onkeyup.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onkeyup</title>
</head>
<body>
<!--
[개념] 이벤트 종류
(1) onblur : 내용 변경에 관계없이 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(2) onchange : 내용이 변경 된 후 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(3) onfocus : HTML 요소가 포커스를 받으면 이벤트가 발생한다.
(4) oninput
1) <input> 또는 <textarea> 요소의 값이 변경될 때 발생하는 이벤트이다.
2) onchange와 유사하나 oninput은 내용이 변경된 직후 이벤트가 발생한다.
(5) onkeyup / onkeydown : 키보드의 키를 놓을/누를 때 이벤트가 발생한다.
(6) onload
1) 객체가 로드되었을 때 이벤트가 발생한다.
2) 웹 페이지가 모든 콘텐츠를 완전히 로드한 후 스크립트를 실행하기 위해
<body> 요소 내에서 가장 자주 사용한다.
(7) onclick : HTML 요소를 클릭했을 때 이벤트가 발생한다.
-->
<input type="text" id="myInput" placeholder="영어소문자를 입력하세요.">
<script>
document.querySelector("#myInput").addEventListener("keyup", keyupFunction);
function keyupFunction() {
let element = document.querySelector("#myInput");
element.value = element.value.toUpperCase();
}
</script>
</body>
</html>
_0307_onload.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onload</title>
</head>
<!--
[개념] 이벤트 종류
(1) onblur : 내용 변경에 관계없이 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(2) onchange : 내용이 변경 된 후 HTML 요소가 포커스를 잃으면 이벤트가 발생한다.
(3) onfocus : HTML 요소가 포커스를 받으면 이벤트가 발생한다.
(4) oninput
1) <input> 또는 <textarea> 요소의 값이 변경될 때 발생하는 이벤트이다.
2) onchange와 유사하나 oninput은 내용이 변경된 직후 이벤트가 발생한다.
(5) onkeyup / onkeydown : 키보드의 키를 놓을/누를 때 이벤트가 발생한다.
(6) onload
1) 페이지가 로드되었을 때 이벤트가 발생한다.
2) 웹 페이지가 모든 콘텐츠를 완전히 로드한 후 스크립트를 실행하기 위해
<body> 요소 내에서 가장 자주 사용한다.
(7) onclick : HTML 요소를 클릭했을 때 이벤트가 발생한다.
-->
<!--
onload를 통해 페이지가 실행하자마자
실행시킬 함수를 호출할 수 있다.
-->
<body onload="myFunction()">
<script>
function myFunction() {
alert("페이지가 로드되었습니다!");
}
</script>
</body>
</html>
_0308_this인자.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oninput</title>
</head>
<body>
<h3 id="result" onclick="changeRange('red')">클릭하면 글자 색상이 바뀝니다.</h3>
<h3 id="test" onclick="changeColor(this, 'blue')">클릭하면 글자 색상이 바뀝니다.</h3>
<script>
function changeRange(value) {
document.querySelector("#result").style.color = value;
}
// this를 인자로 전달하면, querySelector를 통해 태그를 선택할 필요가 없다.
function changeColor(element, color) {
// element = document.querySelector("#test");
element.style.color = color;
}
</script>
</body>
</html>
클릭하면 글자 색상이 바뀝니다.
클릭하면 글자 색상이 바뀝니다.
_0309_onclick1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick</title>
</head>
<body>
아이디: <input type="text" id="id" size="10">
<button onclick="checkID()">검사</button>
<script>
function checkID() {
let s = document.getElementById("id").value;
if (s.length < 6) {
alert("아이디는 6글자 이상이어야 합니다.");
}
}
</script>
</body>
</html>
_0309_onclick2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick</title>
</head>
<body>
이름: <input type="text" id="user">
<input type="button" onclick="checkNotEmpty()" value="확인">
<script>
function checkNotEmpty() {
let field = document.getElementById('user');
if (field.value.length == 0) {
alert("필드가 비어있네요!");
field.focus();
}
}
</script>
</body>
</html>
_0309_onclick3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick</title>
</head>
<body>
아이디(6-8 문자): <input type="text" id="id" autofocus>
<input type="button" onclick="checkLength(6, 8)" value="확인">
<script>
function checkLength(min, max) {
let elem = document.getElementById("id");
let s = elem.value;
if (max < s.length || s.length < min) {
alert(min + " 문자와 " + max + " 문자 사이로 입력해주세요!");
elem.focus();
}
}
</script>
</body>
</html>
_0309_onclick4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick</title>
</head>
<body>
과일선택
<select id="fruits">
<option value="0">선택하세요</option>
<option value="1">사과</option>
<option value="2">배</option>
<option value="3">바나나</option>
</select>
<input type="button" onclick="checkSelection('하나를 선택하여야 합니다.')" value="확인">
<p id="result"></p>
<script>
function checkSelection(msg) {
let elem = document.getElementById("fruits");
if (elem.value == 0) {
alert(msg);
document.querySelector("#result").innerText = msg;
elem.focus();
} else {
document.querySelector("#result").innerText = "선택하신 과일은 " + elem.children[elem.value].innerText + "입니다.";
}
}
</script>
</body>
</html>
_0309_onclick5.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick</title>
</head>
<body>
숫자 : <input id="num" type="text">
<input type="button" value="확인" onclick="ok()">
<script type="text/javascript">
function ok(){
let num = document.getElementById("num").value;
//정규식 패턴(숫자만 입력할 수 있도록)
let num_pattern = /^[0-9]+$/; //0~9사이의 숫자 // /^[0-9]+$/(0~9사이의 숫자)
// num_pattern.test(num)); 결과는 true 또는 false
if( !num_pattern.test(num) ){
alert("숫자만 입력할 수 있습니다.");
}
}
</script>
</body>
</html>
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.09.07 / Step 3 [DOM_이벤트] - 코딩 47 일차 (0) | 2023.09.07 |
|---|---|
| 2023.09.06 / Step 3 [DOM_이벤트] - 코딩 46 일차 (0) | 2023.09.06 |
| 2023.09.04 / Step 2 [DOM_속성변경] - 코딩 44 일차 (0) | 2023.09.04 |
| 2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차 (0) | 2023.08.31 |
| 2023.08.30 / Step 1 [DOM_태그선택2] - 코딩 42 일차 (0) | 2023.08.30 |