티스토리 뷰

VIEW/JAVASCRIPT

[javascript] 이벤트처리,window,document,innerHTML

찰떡쿠키부스트 2017. 12. 1. 11:09

 

# 다른방법으로 이벤트처리하기
 
<html>
 <head>
 <script>
 obj.onclick=function(){ alert(111); }  //오류:obj눈데 몰라
 </script>
 </head>
 <body>
 <input type="button" id="obj">
 </body>
</html>
 
 
<html>
 <head>
 <script>
 window.onload=function(){   // 문서 다읽고 이거 읽어!(window.onload)
 obj.onclick=function(){ alert(111); }
 }
 </script>
 </head>
 <body>
 <input type="button" id="obj">
 </body>
</html>
 
 
<html>
 <head>
 <script>
 window.onload=function(){
 obj.onclick=ff;
 obj2.onclick=ff;
 obj3.onclick=ff;
 }
 function ff(){this.style.backgroundColor=this.value};
 </script>
 </head>
 <body>
 <input type="button" id="obj" value="red"><br/>
 <input type="button" id="obj2" value="green"><br/>
 <input type="button" id="obj3" value="blue"><br/>
 </body>
</html>
 
​
​# 이벤트호출다른방법
​
​
<html>
 <body>
 <input type="button" onclick="style.background='red'">    //이벤트 여기다 해도됨
 </body>
</html>
​
 
 
# window 객체의 메서드
 
<html>
 <head>
 <script>
 window.onload=function(){
  obj1.onclick=f1;
  obj2.onclick=f2;
 }
 function f1(){
 newwin=window.open("b.html","","width=400px height=300px");     //새창열어
 }
 function f2(){
 newwin.close();                   //새창 닫아.근데 그냥 window.close하면 다닫히니까
                                          새창 변수로 받아서(newwin) 새창만 닫아라.​
 }
 </script>
 </head>
 <body>
 <input type="button" value="새창열기" id="obj1">
 <input type="button" value="새창닫기" id="obj2">
 </body>
</html>
 
 
​
​
​
<html>
<head>
<style type="text/css">
div { font-size:5em; }
</style>
<script>
var ar=["red","yellow","green"];
var cnt=0;
window.onload=function(){
obj1.onclick=f1;
obj2.onclick=f2;
}
function f1(){
if(cnt==3) cnt=0;
divTag.style.color=ar[cnt++];
timerID=window.setTimeout("f1()",500);      //500밀리세컨(0.5초)마다 f1() 실행하셈
}
function f2(){
window.clearTimeout(timerID);               //타임아웃 그만해라
}
</script>
</head>
<body>
<input type="button" id="obj1" value="시작">
<input type="button" id="obj2" value="멈춤">
<div id="divTag">글자</div>
</body>
</html>
 
#document 객체의 메서드
​
​
 <html>
<head>
<script>
window.onload=function(){
 b1.onclick=f;
 b2.onclick=f;
 b3.onclick=f;
}
function f(){
 document.bgColor=this.value;      //배경색 바까라
}
</script>
</head>
 <body>
 <input type="button" value="red" id="b1"><br/>
 <input type="button" value="green" id="b2"><br/>
 <input type="button" value="blue" id="b3"><br/>
 </body>
</html>
​
​
​
​
# 칸만들기
<html>
 <head>
 <style type="text/css">
 td { border:2px solid navy; }
 </style>
 <script>
 window.onload=function(){
 b.onclick=f;
 }
 function f(){
 var str="<table>";
 str=str+"<tr>";
 var num=1;
 for(var n=0; n<txt.value; n++)
 str=str+"<td>"+(num++)+"</td>";
 str=str+"</tr>";
 str=str+"</table>";
 document.write(str);
 }
 </script>
 </head>
 <body>
 <input type="text" id="txt">칸<br/>
 <input type="button" value="생성하기" id="b"><br/>
 </body>
</html>
​
​
​
​
# innerHTML
​
<html>
 <head>
 <script>
 function f(){
 divTag.innerHTML="김길동";
 }
 </script>
 </head>
 <body>
 <input type="button" onclick="f()">
 <div id="divTag">홍길동</div>
 </body>
</html>
​
​
​
<html>
 <head>
 <script>
 window.onload=function(){
  a.innerHTML="김길동";
 }
 function f(){
 a.style.color="red";
 }
 </script>
 </head>
 <body>
홍길동
<div id="a" onclick="f(this)"></div>    //onclick 으로 div에도 이벤트 생성 가능. 
 </body>
</html>
저작자표시

'VIEW > JAVASCRIPT' 카테고리의 다른 글

[javascript] image,form,form호출,바로가기,이벤트호출  (0) 2017.12.01
[javascript] Node 관련 메서드  (0) 2017.12.01
[javascript]객체생성방법,for in,date객체,Array객체  (0) 2017.12.01
[javascript] 함수의 종류,객체,String내장객체  (0) 2017.12.01
[javascript] input type,자료형,주석문,배열,내장함수  (0) 2017.12.01
공유하기 링크
댓글