JSP - JavaScript 클릭 이벤트(이미지 변화, 텍스트 옮기기, 객체 스타일 변화) (2022-09-16)
2022. 9. 18. 21:59ㆍ3층 1구역 - 개발의 장/JSP
1. 서론
여러가지 클릭 이벤트를 한번 해보자.
이번에 해볼 것은
1. 클릭하면 이미지가 변하는 것.
2. 텍스트창에 텍스트를 쓰고 포커스를 잃게 되면 다른 텍스트창에 쓴 내용이 옮겨가는 것
3. 문서 객체 스타일 변경하기
2. 본론
1번 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex16</title>
<script type="text/javascript">
function change(imgObj){
imgObj.src='/jsExam/images/images/delete.png'
}
</script>
</head>
<body>
<!-- 이미지를 클릭하면 delete.png로 변경하기 -->
<img id="ok" src="/jsExam/images/images/ok.png" onclick="change(this)">
</body>
</html>
2번 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex17</title>
<script type="text/javascript">
function pwchk(){
input = document.getElementById("inPut");
document.getElementById("outPut").value=inPut.value;
document.getElementById("inPut").value = " ";
}
</script>
</head>
<body>
<hr>
<input type = "text" id = "inPut" onchange = "pwchk()"><br>
<input type = "text" id = "outPut"><br>
<hr>
</body>
</html>
3번 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex17</title>
<script type="text/javascript">
function textstyle(){
document.getElementById("msg").style.color = "red";
document.getElementById("msg").style.fontSize = "30px";
document.getElementById("msg").style.fontStyle = "italic";
}
function texthidden() {
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 = "texthidden()" value = "텍스트 숨기기">
<input type = "button" onclick = "textvisible()" value = "텍스트 보이기">
</body>
</html>'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글
| JSP - JavaScript mousedown, mouseup (2022-09-16) (0) | 2022.09.18 |
|---|---|
| JSP - JavaScript mouseover, mouseout (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript 텍스트 글씨가 출력(버튼과 포커스)됨 (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript 아ㅋㅋ 텍스트가 복사된다고.ㅋㅋㅋ (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript function 사용 (2022-09-16) (0) | 2022.09.18 |