클릭이벤트
<html>
<head>
<meta charset="UTF-8">
<title>ex12</title>
<script type="text/javascript">
function display() {
nameObj = document.getElementById('name')//객체를 반환 해 준다.(참조값)
/*alert("name : "+nameObj.value) //참조연산자를 통해서 속성값을 가져올수 있다.*/
name2Obj= document.getElementById('name2')
name2Obj.value=nameObj.value
nameObj.value=""
}
</script>
</head>
<body>
name :
<input type="text" id="name">
<br> name2 :
<input type="text" id="name2">
<br>
<input type="button" value="버튼" onClick="display()">
</body>
</html>
버튼을 클릭하면 아래와 같아진다.
.innerHTML
열린 태그와 닫히는 태그 안에 값을 입력할 때
<html>
<head>
<meta charset="UTF-8">
<title>ex14</title>
<script type="text/javascript">
function display() {
nameObj = document.getElementById('name')
msgObj = document.getElementById('msg')
msgObj.innerHTML=nameObj.value+"<br>"
}
</script>
</head>
<body>
name : <input type="text" id="name"><br>
<span id="msg"></span>
<input type="button" value="버튼" onclick="display()">
</body>
</html>
<span id="msg"></span>
<p id="msg"></p>
<label id="msg"></label>
<div id="msg"></div>
이 안 모두 가능하다.
Focus & onBlur
Focus : 선택된 상태(커서가 깜빡임)
onBlur : 포거스가 빠짐
<html>
<head>
<meta charset="UTF-8">
<title>ex15</title>
<script type="text/javascript">
function display() {
nameObj = document.getElementById('name')
msgObj = document.getElementById('msg')
msgObj.innerHTML = nameObj.value + "<br>"
}
</script>
</head>
<body>
name :
<input type="text" id="name" onBlur="display()">
<br>
<span id="msg"></span>
<p id="msg"></p>
<label id="msg"></label>
<div id="msg"></div>
</body>자기 자신을 조작할 때의 this
<script type="text/javascript">
function change(imgObj) {
imgObj.src ='/jsExam/images/delete.png'
}
</script>
</head>
<body>
<!-- 이미지를 클릭하면 delete.png로 변경 -->
<img src="/jsExam/images/ok.png" id="img" onClick="change(this)">
</body>
onchange
텍스트 필드에서 엔터기가 눌리거나 그 텍스트 필드를 빠져나올 때
<html>
<head>
<meta charset="UTF-8">
<title>ex</title>
<script type="text/javascript">
function pwchk() {
input = document.getElementById('input').value;
document.getElementById('output').value=input;
document.getElementById('input').value="";
}
</script>
</head>
<body>
<ht>
<input type="text" id="input" onchange=pwchk()><br>
<input type="text" id="output"><br>
</ht>
</body>
</html>
onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex</title>
<script type="text/javascript">
function textstyle() {
document.getElementById("msg").style.color = "blue";
document.getElementById("msg").style.fontSize = "30px";
document.getElementById("msg").style.fontSize = "italic";
}
function texthiddin() {
document.getElementById("msg").style.visibility = "hidden";
}
function textvisible() {
document.getElementById("msg").style.visibility = "visible";
}
</script>
</head>
<body>
<p id="msg">문서 객체 스타일 변경하기</p>
<input type="button" onclick="textstyle()" value="텍스트 스타일 변경">
<input type="button" onclick="texthiddin()" value="텍스트 숨기기">
<input type="button" onclick="textvisible()" value="텍스트 보이기">
</body>
onmouseover
<title>ex</title>
<script type="text/javascript">
function changeText(id) {
id.innerHTML = "change text!";
id.style.color="lightblue";
}
function defaultText() {
document.getElementById("h1_id").innerHTML = "Click on this text!!!";
document.getElementById("h1_id").style.color = "black";
}
</script>
</head>
<body>
<h1 onclick="changeText(this)" onmouseover="defaultText()" id="h1_id">
Click on this text
</h1>
</body>
onmousedown, onmouseup
<script type="text/javascript">
function mouse_down(obj) {
obj.innerHTML="마우스 버튼을 클릭하고 있어요"
}
function mouse_up(obj) {
obj.innerHTML="마우스 버튼 클릭을 관뒀어요"
}
</script>
</head>
<body>
<div onmousedown="mouse_down(this)" onmouseup="mouse_up(this)">클릭하세요</div>
</body>
history.back()
이전 페이지로 이동할 수 있다. 히스토리에 페이지가 남아있어야 한다.
history.forward()
이건 history.back()의 반대 개념.
window.open()
<script type="text/javascript">
function myClick(){
//다른 탭 이동
window.open("https://www.naver.com");
}
function myClick2(){
//새 창 열기
window.open("https://www.naver.com","_blank",
"width=600,height=400,top=100,left=300");
}
</script>
</head>
<body>
<input type="button" value="새창" onclick="myClick()">
<label onclick="myClick2()">네이버로 이 글 클릭 가능</label>
</body>
onload
body에 추가해주면 해당 웹페이지가 실행될 때 이벤트가 실행된다.
<html>
<head>
<meta charset="UTF-8">
<title>ex</title>
<script type="text/javascript">
function myClick(){
//다른 탭 이동
window.open("ex26-2.jsp","","width=600,height=400");
}
</script>
</head>
<body onload="myClick()">
<!-- <input type="button" value="새창" onclick="myClick()"> -->
<h2>팝업창이 뜰겁니다.</h2>
</body>
</html>location.href()
<input type="button" value="가입" onclick="location.href='quiz01.jsp'">
클릭으로 바로 그 주소로 간다.
'코딩 공부 > JavaScript' 카테고리의 다른 글
| Java Script 01 (자료형, 산술연산자, 조건문, 생성자, 메서드) (0) | 2022.10.24 |
|---|