<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onload="checkCookies()">
<!-- onclick , onload(한 번 실행해 놓고 body 봄) , onChange -->
<!-- onload -->
<p id="demo"></p>
<script type="text/javascript">
function checkCookies(){
var text = "onload 실행";
document.getElementById("demo").innerHTML = text;
-문서에 있는 id가 demo 라는 요소에 접근하여 text 를 쓴다
}
</script>
<!-- onblur : 포커스가 이동했을 때 처리 된다.-->
<form action="#">
나이:<input type="text" onblur="isRegiNum(this)" size="3" maxlength="3">세<br>
숫자가 아닌 문자로 입력하면 , 포커스를 잃을 때 경고가 표시됩니다.
</form>
<script type="text/javascript">
function isRegiNum(obj) { /* 오브젝트가 넘어온거임 this 로 */
var str = obj.value;
obj 의 값을 str 에 저장한다.
/* 숫자가 아닌 문자열이 포함된 경우 */
if(str.match(/[^0-9]/g)){
alert("문자열이 포함되어 있습니다");
obj.value = "";
-빈 문자열로 초기화 시킨다
return false;
-값을 false 로 리턴을 해 주면
}
}
</script>
<!-- onChange -->
<form action="">
우편번호 입력란
T:
<input type="text" size="5" maxlength="3" onchange="isPostNum(this)">
-
<input type="text" size="5" maxlength="3" onchange="isPostNum(this)">
<br>
</form>
<script type="text/javascript">
function isPostNum(obj) {
var str = obj.value;
if(str.match(/[^0-9]/g)){
-str 이 0 부터 9까지의 숫자를 제외한 나머지가 있는지 확인한다. 숫자를 제외하고 다른게 있으면 true 값을 반환하여 밑 alert를 띄운다
alert(str.match(/[^0-9]/g) + "\n\n숫자가 아닌 문자가 포함되어 있습니다.");
obj.value = "";
return false;
}
}
</script>
<!-- onkeydown -->
<form>
<p>입력: <input type="text" onkeydown="func(this.form)"
onkeyup="func(this.form)" name="txt" size="40">
</p>
<p>확인: <input type="text" readonly="readonly"
name="copy" size="40" style="background-color: #eee; border: 1px solid #ccc;">
</p>
</form>
<script type="text/javascript">
function func(formObj) {
//alert(formObj.elements["txt"].value);
formObj.elements["copy"].value = formObj.elements["txt"].value;
-form 에 name 이 copy 인 input 태그에 값에 name 이 txt 인 input 태그의 값을 넣는다
같이 써지는 효과가 있다.
}
</script>
<!-- onkeydown -->
<form action="#">
<input type="text" name="title">
</form>
<script type="text/javascript">
//document.getElementById("title")[0].onkeydown
document.getElementsByName("title")[0].onkeypress = function(event){
console.log('keydown - keycode : ' + event.keyCode);
console.log('keydown - which : ' + event.which);
}
</script>
<!-- onmousedown onmouseup -->
<form action="#">
<p>
이미지 버튼을 마우스로 클릭하면, onmousedown 이벤트 발생
버튼을 눌렀다가 땔때 , onmouseup 이벤트 발생
</p>
<p>
<input type="image" src ="san0.gif" onmousedown="fMouseDown(this)" onmouseup="fMouseUp(this)">
</p>
</form>
<script type="text/javascript">
function fMouseDown(obj){
obj.src ="san1.gif";
}
function fMouseUp(obj){
obj.src="san0.gif";
}
</script>
<!-- onmouseover onmouseout -->
<form action="#">
<input type="image" src="./san0.gif"
onmouseover="m_over(this)"
onmouseout="m_out(this)"
onmousedown="m_down(this)">
</form>
<script type="text/javascript">
function m_over(obj) {
obj.src = "san1.gif";
}
function m_out(obj) {
obj.src = "san0.gif";
}
function m_down(obj) {
obj.src = "san2.gif";
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| JSON(2) (0) | 2018.08.10 |
|---|---|
| JSON(1) (0) | 2018.08.10 |
| javascript(9) 화면전환,시간차로 글 띄우기 (0) | 2018.07.30 |
| javascript(8) 클릭시 다른페이지로 가기 (0) | 2018.07.30 |
| javascript(7) math.floor ,이름으로 값 넣기 (0) | 2018.07.30 |