UI/UX_018
간단정리
1. event
1)실행했을때 다른 대상에 영향을 줌
이벤트대상.on이벤트이름 = function { 이벤트 핸들러 }
window.onload=function(){
b.onclick = a;
}
function a(){
b.style.backgroundColor = "red";
}
- 이벤트대상 : window 객체
- 이벤트이름 : load
- 이벤트속성 : onload
- 이벤트핸들러 : function 의 내용
2. script
function a(){
b.style.backgroundColor = "red";
}
</script>
<body>
<input type="button" id="b" onclick="a()">
</body>
- 이벤트 대상은 id가 "b"인 객체
- 이벤트 이름 : click
- 이벤트 속성 : onclick
- 이벤트 핸들러 : a()
3. Mouse Events
1)onClick
- 마우스로 해당 엘리먼트를 클릭함
2)onDblClick
- 마우스로 해당 엘리먼트를 더블클릭함
3)onMouseDown
- 마우스를 누름(클릭은 마우스를 눌렀다 때는 것으로 구별됨)
4)onMouseMove
- 마우스가 엘리먼트 위에서 이동함
5)onMouseOut
- 마우스가 엘리먼트에서 벗어남
6)onMouseUp
- 마우스를 뗌(MouseDown과 반대됨 버튼을 누른 상태에서 떼는 경우)
4. Keyboard Events
1)onKeyDown
- 키보드 버튼을 누르고 있는 경우 (어떤 키인지 읽으려면 함수를 호출하여 event.KeyCode를 참고해야 한다)
2)onKeyPress
- 키보드 버튼을 눌렀 땐 경우 ( 마우스의 클릭과 유사)
3)onKeyUp
- 키보드 버튼을 누르고 있다가 땐 경우 ( MouseUp과 유사)
5. HTML Control Events
1)onBlur
- 엘리먼트가 Focus(초점)를 잃음. 예를 들어 버튼을 클릭하면 포커스(점선테두리로 보임)가 버튼에 잡혀있는데 이 때 다른 것을 클릭하거나 탭등으로 포커스를 이동할 경우를 의미함.
2)onChange
- 엘리먼트에서 특정 내용을 선택 혹은 변경하는 경우. 셀렉트박스(select box)에서 선택된 아이템을 변경하는 경우가 이에 해당됨
3)onFocus
- 엘리먼트에 초점이 맞춰지는 경우
4)onReset
- 리셋 이벤트가 발생하는 경우. 대표적으로 input box의 타입 reset이 적용될 때이다.
5)onSelect
- 엘리먼트내 문자열을 블럭화 할 경우(즉 드래그 혹은 쉬프트+방향키등으로 문자열에 블럭을 씌우는 경우이다)
6)onSubmit
- 폼(Form)태그내에서 전송(Submit) 이벤트가 발생하는 경우
6. Window Events
1)onLoad
- 페이지나 이미지등의 엘리먼트가 로딩이 완료되는 경우
2)onResize
- 윈도우나 프레임의 사이즈가 변경되는경우
3)onUnLoad
- 온로드의 반대로서 페이지를 이탈하는 경우
7. 문서객체 스타일 접근
1) document.getElementById(id).style.속성 = 속성 값
예) 폰트 색상 변경
- document.getElementById(id).style.color = red
2) css 에서 속성이 "-" 으로 연결된 경우 : - 뒤의 첫글자를 대문자로
- background-color ===> backgroundColor
- font-size ===> fontSize
예문
Ex_01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
function changeText1() {
document.getElementById("demo").innerHTML = "Ooops!";
}
function changeText2() {
document.getElementById("test").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 id="demo" onclick="changeText1()">텍스트가바뀝니다.</h1>
<p id="test" onclick="changeText2()">클릭해 보세요</p>
</body>
</html>
Ex_02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
function changeText1(id) {
id.innerHTML = "Ooops!";
//document.getElementById("demo")
// this 는 이벤트를 발생시킨 객체 자신
}
</script>
</head>
<body>
<h1 id="demo" onclick="changeText1(this)">텍스트가바뀝니다.</h1>
<p id="test" onclick="changeText1(this)">클릭해 보세요</p>
</body>
</html>
Ex_03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
function changeText1(id) {
id.innerHTML = "Ooops!";
//document.getElementById("demo") 또는
//document.getElementById("test")
// this 는 이벤트를 발생시킨 객체 자신
}
</script>
</head>
<body>
<h1 id="demo" onclick="changeText1(this)">텍스트가바뀝니다.</h1>
<p id="test" onclick="changeText1(this)">클릭해 보세요</p>
</body>
</html>
Ex_04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
document.getElementById("test").onclick = changeText2;
}
function changeText1(id) {
id.innerHTML = "Ooops!";
}
function changeText2() {
document.getElementById("test").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 id="demo" onclick="changeText1(this)">텍스트가바뀝니다.</h1>
<p id="test">클릭해 보세요</p>
</body>
</html>
Ex_05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
function myFunction(x) {
document.getElementById("test").innerHTML = "온포커스";
}
</script>
</head>
<body>
<input type="text" onfocus="myFunction(this)">
<div id="test"></div>
</body>
</html>
Ex_06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
function myFunction(x) {
document.getElementById("test").innerHTML = "온체인지";
}
</script>
</head>
<body>
<input type="text" onchange="myFunction(this)">
<div id="test"></div>
</body>
</html>
Ex_07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
function changeText1(id) {
id.innerHTML = "Ooops!";
}
function changeText2() {
//변경할 대상객체.style.속성 = 값
document.getElementById("test").style.color = "#0000FF";
document.getElementById("test").style.backgroundColor = "#FFFF00";
document.getElementById("test").style.fontSize = "20px";
}
</script>
</head>
<body>
<h1 id="demo" onclick="changeText1(this)">텍스트가바뀝니다.</h1>
<p id="test" onclick="changeText2()">클릭해 보세요</p>
</body>
</html>
Ex_08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
document.getElementById("test").onclick = changeB;
}
function changeB() {
// 테스트 객체의 border 를 3픽셀 솔리드 red로 바꾸기
document.getElementById("test").style.border = "3px solid red";
}
</script>
</head>
<body>
<p id="test">클릭해 보세요</p>
</body>
</html>
Ex_09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
document.getElementById("b1").onclick = hText;
document.getElementById("b2").onclick = sText;
}
function hText() {
document.getElementById("p1").style.visibility = "hidden";
}
function sText() {
document.getElementById("p1").style.visibility = "visible";
}
</script>
</head>
<body>
<ul id="p1">
<li>This is a text.</li>
<li>This is a text.</li>
<li>This is a text.</li>
<li>This is a text.</li>
</ul>
<input type="button" value="텍스트 숨기기" id="b1">
<input type="button" value="텍스트 보이기" id="b2">
</body>
</html>
Ex_10 here을 완성하여 input text를 클릭하면 해당 객체의 값으로 배경색상 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
function aColor(c) {
//here
}
</script>
</head>
<body>
<input type="text" value="red" id="b1" onclick="aColor(this)">
<br />
<input type="text" value="green" id="b2" onclick="aColor(this)">
<br />
<input type="text" value="blue" id="b3" onclick="aColor(this)">
<br />
</body>
</html>
Sol_11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
function aColor(c) {
c.style.backgroundColor=c.value;
}
</script>
</head>
<body>
<input type="text" value="red" id="b1" onclick="aColor(this)">
<br />
<input type="text" value="green" id="b2" onclick="aColor(this)">
<br />
<input type="text" value="blue" id="b3" onclick="aColor(this)">
<br />
</body>
</html>
Ex_11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
function changeLink() {
var lk = document.getElementById("url");
window.location.href = lk.options[lk.selectedIndex].value;
}
</script>
</head>
<body>
<select id="url" onchange="changeLink()">
<option value="http://www.daum.net">다음</option>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.google.com">구글</option>
</select>
</body>
</html>
Ex_12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
// 익스플로어 실행
// 기타 브라우저는 서버에서 실행
function changeColor() {
var oPen = window.open('popup.html', '', 'width=500, height=300');
oPen.document.getElementById("test").innerHTML = "바뀐글자";
oPen.document.getElementById("test").style.backgroundColor = "#FFFF00";
oPen.document.getElementById("test").style.fontSize = "20px";
}
</script>
</head>
<body>
<p id="test" onclick="changeColor()">클릭해 보세요</p>
</body>
</html>
Ex_13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트</title>
<script>
function changeP() {
opener.document.getElementById("test").innerHTML = "부모창을 변경합니다.";
opener.document.getElementById("test").style.backgroundColor = "#FFFF00";
opener.document.getElementById("test").style.fontSize = "20px";
}
</script>
</head>
<body>
<p id="test">여기는 새창입니다.</p>
<a href="#" onclick="window.close();">새창닫기</a>
<a href="#" onclick="changeP();">부모창접근하기</a>
</body>
</html>
Ex_14
test1.html
==========
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
function idck() {
var oPen = window.open('popup.html', '', 'width=500, height=300');
}
</script>
</head>
<body>
<form id="my-form" name="myform" method="post" action="ok.html">
<label for="name">이름</label><br />
<input type="text" name="name" id="name" /><br />
<label for="pass">비밀번호</label><br />
<input type="password" name="pass" id="pass" /><br />
<label for="pass-check">비밀번호 확인</label><br />
<input type="password" id="pass-check" /><br />
<input type="button" value="클릭하세요" onclick="idck()" />
</form>
</body>
</html>
popup.html
==========
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트</title>
<script>
function changeP() {
p = opener.document.getElementById("name");
// 부보창의 입력박스
c = document.getElementById("name");
p.value = c.value;
window.close();
}
</script>
</head>
<body>
<p id="test">여기는 새창입니다.</p>
<form id="child" name="myform" method="post">
<label for="name">이름</label><br />
<input type="text" name="name" id="name" /><br />
<input type="button" value="부모창에값전달" onclick="changeP()" />
</form>
</body>
</html>
Ex_15 here을 완성하여 텍스트 박스에 값을 입력하면 ol 목록이 추가 되도록 하시오
<title>INDEX</title>
<script>
// here
</script>
</head>
<body>
<h1>서울IT교육센터 학원 과정</h1>
<ol id="sb">
<li>java</li>
<li>jsp</li>
<li>orcale</li>
</ol>
<input type="text" id="name">
<input type="button" value="과정추가" id="b">
</body>
</html>
Sol_15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
// 텍스트 박스에 값을 입력하면 ol 목록이 추가 되도록
window.onload = function() {
b.onclick = f;
}
function f() {
var myElement = document.getElementById("sb");
var liTag = document.createElement("li");
var name = document.getElementById("name").value;
var liText = document.createTextNode(name);
liTag.appendChild(liText);
myElement.appendChild(liTag);
}
</script>
</head>
<body>
<h1>서울IT교육센터 학원 과정</h1>
<ol id="sb">
<li>java</li>
<li>jsp</li>
<li>orcale</li>
</ol>
<input type="text" id="name">
<input type="button" value="과정추가" id="b">
</body>
</html>
Ex_16 here을 완성하여 숫자 텍스트 입력 2개 받고 합을 구한뒤 다른 입력창에 전달하고 배경색상 변경하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
// here
</script>
</head>
<body>
<input type="text" id="t1"> <br />
<input type="text" id="t2"> <br />
<input type="button" value="결과보기" id="b"><br />
<input type="text" id="t3">
</body>
</html>
Sol_16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
b.onclick = clickFunc;
}
function clickFunc() {
n1 = document.getElementById("t1");
n2 = document.getElementById("t2");
n3 = document.getElementById("t3");
n3.value = parseInt(n1.value) + parseInt(n2.value);
n3.style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<input type="text" id="t1">
<br />
<input type="text" id="t2">
<br />
<input type="button" value="결과보기" id="b">
<br />
<input type="text" id="t3">
</body>
</html>