π μλ° μ€ν¬λ¦½νΈ JavaScript
1οΈβ£2οΈβ£ μλ°μ€ν¬λ¦½νΈ - onload, onblur, onchange, onkey--, onmouse-- μ 리
Meteora_
2021. 3. 4. 17:15
728x90
μ½λκ° κΉλλ€ λλΌμ§ λ§μΈμ
λ보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- <body onload="checkMessage()">
onload (bodyλ divμμ λ§μ΄ μ΄λ€)
<p id="p1"></p>
<script type="text/javascript">
function checkMessage(){
document.getElementById('p1').innerHTML='checkMessage()νΈμΆ';
}
</script>
</body> -->
<!-- <body onload="viewScroll()">
<pre>
μ μ보 νλ―Έ λ°©μλΉλΆλ΄νμλμ¬κ° ν·λ―Έ λ°©μλΉ λΆλ΄κΈ νμκ³Ό κ΄λ ¨ν΄ "κ·Έλμ λ§μ λ
Όμλ₯Ό ν΅ν΄μ μλΉν 곡κ°μ νκ³ μλ€"λ©° "κ°λ₯ν ν λΉ λ₯Έ μμΌλ΄ νμ νκ²°μ κΈ°λνλ€"κ³ λ§νμ΅λλ€.
μ λμ¬λ μ€λ(4μΌ) μΈμ²κ΅μ 곡ν μ 2ν°λ―Έλμμ λ―Έκ΅μΌλ‘ μΆκ΅νκΈ° μ κΈ°μλ€κ³Ό λ§λ "μΌλΆ μμ§ λ¨μ μλ μμ μ ν΄μνκΈ° μν΄ μ΄λ²μ λ―Έκ΅μ κ°μ λλ©΄ νμλ₯Ό νκ² λλ€"λ©° "κ°λ₯ν ν μ΄λ² νμλ₯Ό ν΅ν΄ μμΉμ μΈ λ΄μ©μ λν ν©μλ₯Ό λ§μΉ κΉ μκ°νλ€"κ³ μ€λͺ
νμ΅λλ€.
μ λμ¬λ '5λ
λ¨μμ 13% μΈμμμΌλ‘ νκ²°μ΄ μλ°ν κ² λ§λλ'λ κΈ°μμ μ§λ¬Έμλ "ꡬ체μ μΌλ‘ 13%λ€, μ΄λ° λΆλΆκ³Ό κ΄λ ¨ν΄μλ νμ¬ νμμ΄ μ§νλκ³ μλ€λ μ μμ ꡬ체μ μΈ λ΄μ©μ λν΄ λ§μλλ¦¬κΈ°κ° μ΄λ ΅λ€"κ³ λ΅νμ΅λλ€.
μ λμ¬λ λ 'μ νμ μ λ°λ₯Έ μΈμλ₯ μ΄ μ¬ν΄λΆν° μ μ©λλλ'λ μ§λ¬Έμ "κ·Έλ° κ²λ νμμ ν¬ν¨λ κ²μ΄κ³ , κ·Έλ° κ²λ€μ ν¬ν¨ν΄μ μ΅μ’
μ μΌλ‘ ν¨ν€μ§ νκ²°μ μν λ
Έλ ₯μ νκ³ μλ€"κ³ λ§νμ΅λλ€.
κ·Έλ¬λ©΄μ μμ±ν΄ νμ§μμ νμ λ¬Έμ λ°νν κ°λ₯μ±μ λν΄μ "κ΅λ΄μ μΈ μ μ°¨ λ±μ κ°μν΄λ΄€μ λ κ·Έλ κ² ν μλ μμ κ²"μ΄λΌλ©΄μλ 'μ£Όνλ―Έκ΅° νκ΅μΈ μ§μλ€μ 4μ 무κΈν΄μ§μ μμ κ²μΌλ‘ λ΄λ ν° λ¬Έμ κ° μκ² λλ'λ μ§μμλ "μ κ° μκΈ°λ‘λ κ·Έλ κ² μκ³ μλ€"κ³ λ΅νμ΅λλ€.μ μ보 νλ―Έ λ°©μλΉλΆλ΄νμλμ¬κ° ν·λ―Έ λ°©μλΉ λΆλ΄κΈ νμκ³Ό κ΄λ ¨ν΄ "κ·Έλμ λ§μ λ
Όμλ₯Ό ν΅ν΄μ μλΉν 곡κ°μ νκ³ μλ€"λ©° "κ°λ₯ν ν λΉ λ₯Έ μμΌλ΄ νμ νκ²°μ κΈ°λνλ€"κ³ λ§νμ΅λλ€.
μ λμ¬λ μ€λ(4μΌ) μΈμ²κ΅μ 곡ν μ 2ν°λ―Έλμμ λ―Έκ΅μΌλ‘ μΆκ΅νκΈ° μ κΈ°μλ€κ³Ό λ§λ "μΌλΆ μμ§ λ¨μ μλ μμ μ ν΄μνκΈ° μν΄ μ΄λ²μ λ―Έκ΅μ κ°μ λλ©΄ νμλ₯Ό νκ² λλ€"λ©° "κ°λ₯ν ν μ΄λ² νμλ₯Ό ν΅ν΄ μμΉμ μΈ λ΄μ©μ λν ν©μλ₯Ό λ§μΉ κΉ μκ°νλ€"κ³ μ€λͺ
νμ΅λλ€.
μ λμ¬λ '5λ
λ¨μμ 13% μΈμμμΌλ‘ νκ²°μ΄ μλ°ν κ² λ§λλ'λ κΈ°μμ μ§λ¬Έμλ "ꡬ체μ μΌλ‘ 13%λ€, μ΄λ° λΆλΆκ³Ό κ΄λ ¨ν΄μλ νμ¬ νμμ΄ μ§νλκ³ μλ€λ μ μμ ꡬ체μ μΈ λ΄μ©μ λν΄ λ§μλλ¦¬κΈ°κ° μ΄λ ΅λ€"κ³ λ΅νμ΅λλ€.
μ λμ¬λ λ 'μ νμ μ λ°λ₯Έ μΈμλ₯ μ΄ μ¬ν΄λΆν° μ μ©λλλ'λ μ§λ¬Έμ "κ·Έλ° κ²λ νμμ ν¬ν¨λ κ²μ΄κ³ , κ·Έλ° κ²λ€μ ν¬ν¨ν΄μ μ΅μ’
μ μΌλ‘ ν¨ν€μ§ νκ²°μ μν λ
Έλ ₯μ νκ³ μλ€"κ³ λ§νμ΅λλ€.
κ·Έλ¬λ©΄μ μμ±ν΄ νμ§μμ νμ λ¬Έμ λ°νν κ°λ₯μ±μ λν΄μ "κ΅λ΄μ μΈ μ μ°¨ λ±μ κ°μν΄λ΄€μ λ κ·Έ
μ μ보 νλ―Έ λ°©μλΉλΆλ΄νμλμ¬κ° ν·λ―Έ λ°©μλΉ λΆλ΄κΈ νμκ³Ό κ΄λ ¨ν΄ "κ·Έλμ λ§μ λ
Όμλ₯Ό ν΅ν΄μ μλΉν 곡κ°μ νκ³ μλ€"λ©° "κ°λ₯ν ν λΉ λ₯Έ μμΌλ΄ νμ νκ²°μ κΈ°λνλ€"κ³ λ§νμ΅λλ€.
μ λμ¬λ μ€λ(4μΌ) μΈμ²κ΅μ 곡ν μ 2ν°λ―Έλμμ λ―Έκ΅μΌλ‘ μΆκ΅νκΈ° μ κΈ°μλ€κ³Ό λ§λ "μΌλΆ μμ§ λ¨μ μλ μμ μ ν΄μνκΈ° μν΄ μ΄λ²μ λ―Έκ΅μ κ°μ λλ©΄ νμλ₯Ό νκ² λλ€"λ©° "κ°λ₯ν ν μ΄λ² νμλ₯Ό ν΅ν΄ μμΉμ μΈ λ΄μ©μ λν ν©μλ₯Ό λ§μΉ κΉ μκ°νλ€"κ³ μ€λͺ
νμ΅λλ€.
μ λμ¬λ '5λ
λ¨μμ 13% μΈμμμΌλ‘ νκ²°μ΄ μλ°ν κ² λ§λλ'λ κΈ°μμ μ§λ¬Έμλ "ꡬ체μ μΌλ‘ 13%λ€, μ΄λ° λΆλΆκ³Ό κ΄λ ¨ν΄μλ νμ¬ νμμ΄ μ§νλκ³ μλ€λ μ μμ ꡬ체μ μΈ λ΄μ©μ λν΄ λ§μλλ¦¬κΈ°κ° μ΄λ ΅λ€"κ³ λ΅νμ΅λλ€.
μ λμ¬λ λ 'μ νμ μ λ°λ₯Έ μΈμλ₯ μ΄ μ¬ν΄λΆν° μ μ©λλλ'λ μ§λ¬Έμ "κ·Έλ° κ²λ νμμ ν¬ν¨λ κ²μ΄κ³ , κ·Έλ° κ²λ€μ ν¬ν¨ν΄μ μ΅μ’
μ μΌλ‘ ν¨ν€μ§ νκ²°μ μν λ
Έλ ₯μ νκ³ μλ€"κ³ λ§νμ΅λλ€.
κ·Έλ¬λ©΄μ μμ±ν΄ νμ§μμ νμ λ¬Έμ λ°νν κ°λ₯μ±μ λν΄μ "κ΅λ΄μ μΈ μ μ°¨ λ±μ κ°μν΄λ΄€μ λ κ·Έ
μ μ보 νλ―Έ λ°©μλΉλΆλ΄νμλμ¬κ° ν·λ―Έ λ°©μλΉ λΆλ΄κΈ νμκ³Ό κ΄λ ¨ν΄ "κ·Έλμ λ§μ λ
Όμλ₯Ό ν΅ν΄μ μλΉν 곡κ°μ νκ³ μλ€"λ©° "κ°λ₯ν ν λΉ λ₯Έ μμΌλ΄ νμ νκ²°μ κΈ°λνλ€"κ³ λ§νμ΅λλ€.
μ λμ¬λ μ€λ(4μΌ) μΈμ²κ΅μ 곡ν μ 2ν°λ―Έλμμ λ―Έκ΅μΌλ‘ μΆκ΅νκΈ° μ κΈ°μλ€κ³Ό λ§λ "μΌλΆ μμ§ λ¨μ μλ μμ μ ν΄μνκΈ° μν΄ μ΄λ²μ λ―Έκ΅μ κ°μ λλ©΄ νμλ₯Ό νκ² λλ€"λ©° "κ°λ₯ν ν μ΄λ² νμλ₯Ό ν΅ν΄ μμΉμ μΈ λ΄μ©μ λν ν©μλ₯Ό λ§μΉ κΉ μκ°νλ€"κ³ μ€λͺ
νμ΅λλ€.
μ λμ¬λ '5λ
λ¨μμ 13% μΈμμμΌλ‘ νκ²°μ΄ μλ°ν κ² λ§λλ'λ κΈ°μμ μ§λ¬Έμλ "ꡬ체μ μΌλ‘ 13%λ€, μ΄λ° λΆλΆκ³Ό κ΄λ ¨ν΄μλ νμ¬ νμμ΄ μ§νλκ³ μλ€λ μ μμ ꡬ체μ μΈ λ΄μ©μ λν΄ λ§μλλ¦¬κΈ°κ° μ΄λ ΅λ€"κ³ λ΅νμ΅λλ€.
μ λμ¬λ λ 'μ νμ μ λ°λ₯Έ μΈμλ₯ μ΄ μ¬ν΄λΆν° μ μ©λλλ'λ μ§λ¬Έμ "κ·Έλ° κ²λ νμμ ν¬ν¨λ κ²μ΄κ³ , κ·Έλ° κ²λ€μ ν¬ν¨ν΄μ μ΅μ’
μ μΌλ‘ ν¨ν€μ§ νκ²°μ μν λ
Έλ ₯μ νκ³ μλ€"κ³ λ§νμ΅λλ€.
κ·Έλ¬λ©΄μ μμ±ν΄ νμ§μμ νμ λ¬Έμ λ°νν κ°λ₯μ±μ λν΄μ "κ΅λ΄μ μΈ μ μ°¨ λ±μ κ°μν΄λ΄€μ λ κ·Έ
</pre>
<script type="text/javascript">
let posY = 0;
function viewScroll(){
window.scroll(0, posY);
posY = posY + 2;
if(posY == 300) posY = 0;
setTimeout("viewScroll()", 100);
}
</script>
</body> -->
<body>
<!-- onblur : ν¬μ»€μ€ μ΄λ -->
λμ΄:<input type="text" onblur="isRegNum()" size="10" maxlength="2">μΈ
<br><br>
<script type="text/javascript">
function isRegNum(){
alert('onblur μ€ν')
}
</script>
<!-- onchange: μ
λ ₯κ°μ΄ λ³κ²½λκ³ ν¬μ»€μ€κ° λ€λ₯Έ κ³³μΌλ‘ μ΄λνμλ (κ°μ΄ λ³κ²½μλλ©΄ μ€νλμ§μμ) -->
μ°νΈλ²νΈ:<br>
<input type="text" size="5" maxlength="3" onchange="isPostNum(this)">
-
<input type="text" size="5" maxlength="3" onchange="isPostNum(this)">
<br>
<select id="sel" onchange="changeVal()">
<option value="apple">μ¬κ³Ό</option>
<option value="pear">λ°°</option>
<option value="banana">λ°λλ</option>
</select>
<script type="text/javascript">
function isPostNum(obj){
let str = obj.value;
//alert(str);
if(str.match(/[^0-9]/g)) // μ«μκ° μλ λ¬Έμκ° ν¬ν¨λ κ²½μ° ββ
ββ
alert("λ¬Έμκ° ν¬ν¨λμ΄ μμ΅λλ€") //λ¬Έμκ° ν¬ν¨λλ€κ³ μλμ λμ
}
function changeVal() {
//alert("changeVal");
alert(document.getElementById("sel").value);
}
</script>
<br><br>
<!-- onkeydown, onkeypress -->
<input type="text" name="title">
<script type="text/javascript">
/*
document.getElementsByName("title")[0].onkeydown = function(event) {
console.log("keydown keycode:"+event.keyCode);
}
*/
document.getElementsByName("title")[0].onkeypress = function(event) {
console.log("keypress keycode:"+event.keyCode);
}
</script>
<br><br>
<!-- onMouseDown, onMouseUp, onMouseOver, onMouseOut -->
<input type="image" src="san0.gif" onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
<script type="text/javascript">
function mouseDown(obj){
obj.src = "san1.gif";
}
function mouseUp(obj){
obj.src = "san0.gif";
}
function mouseOver(obj){ //
obj.src = "san2.gif";
}
function mouseOut(obj){ //λ²μ΄λ¬μλ
obj.src = "san0.gif";
}
</script>
<br><br>
<a href="#" onmouseover="document.box.src='surprise.gif'" onmouseout="document.box.src='box.gif'">
<img alt="" src="box.gif" name="box">
</a>
</body>
</html>