티스토리 뷰

VIEW/JAVASCRIPT

[javascript] event,eval(),focus(),prototype,외부 파일 가져오기,visibility, display, overflow

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

 

# event.srcElement

​
<html>
<head>
<script>
function a(){ event.srcElement.value="bb"; }
</script>
</head>
<body>
<input type="button" value="aa" onclick="a()">
</body>
</html>



# event.type

​

<html>
<head>
<style type="text/css">
 span { background:green; }
</style>
<script>
window.onload=function(){
 spanTag.onmouseover=f;
 spanTag.onmouseout=f;
}
function f(){
  if(event.type=="mouseover")
 this.style.background="gray";
 else
 this.style.background=""; 
 }
</script>
</head>
<body>
 <span id="spanTag">aaa</span>
</body>
</html>


​
# eval()

​

<html>
<head>
<script>
window.onload=function(){
var str="";
for(var a=1; a<4; a++){
 str+=" b"+a+".onmouseover=f; ";
 str=str+" b"+a+".onmouseout=f; ";
 }
 eval(str);
}
function f(){
if(event.type=="mouseover")
this.style.background=this.value;
else
this.style.background="";
}
</script>
</head>
<body>
 <input type="button" value="red" id="b1">
 <input type="button" value="orange" id="b2">
 <input type="button" value="green" id="b3">
</body>
</html>


​
# onfocus,onblur

​

<html>
<head>
<script>
window.onload=function(){
var str="";
for(var a=1; a<4; a++){
 str+=" t"+a+".onfocus=f; ";
 str=str+" t"+a+".onblur=f; ";
 }
 eval(str);
}
function f(){
  if(event.type=="focus")
  this.style.background="red";
  else
  this.style.background="white";
}
</script>
</head>
<body>
 <input type="text" id="t1">
 <input type="text" id="t2">
 <input type="text" id="t3">
</body>
</html>


​
# focus(),onkeyup

​

<html>
<head>
<script>
window.onload=function(){
 t1.onkeyup=f;
}
function f(){
 if(t1.value.length==6)
 t2.focus();
}

</script>
</head>
<body>
주민등록번호입력하기~<br/>
 <input type="text" id="t1">
 <input type="text" id="t2">
</body>
</html>


​
#메서드,멤머변수 선언,호출

​

<html>
<body>
<script>
 function Dog(b,a){
 this.breed=b; this.age=a;
 this.eat=f;
 }
 function f(c){
 this.cc=c;
 document.write("<br/>");
 document.write(this.age+"살  "+this.breed+"가  "+c+"  먹는다")
 }
 var dog1=new Dog("씨추",5);
 var dog2=new Dog("코커스파니엘",10);
 document.write(dog1.breed+","+dog1.age);
 document.write("<br/>");
 document.write(dog2.breed+","+dog2.age);
 dog1.eat("사료"); // 5살 씨추 사료를 먹는다.
 dog2.eat("뼈다귀간식");
</script>
</body>
</html>


​
#prototype

​

<html>
<body>
<script>
 Date.prototype.aaa=function(){ return "홍길동"; }
var a=new Date();
 document.write(a.getFullYear());
 document.write("<br/>");
 document.write(a.aaa());// 홍길동
</script>
</body>
</html>


​

# 외부 css 데꼬오기.

​

a.css 파일
=========
div { background:navy; color:white; }
span { background:orange; color:white; }

a.html 파일
=========
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css"/>
<style type="text/css">
 body { background:pink; }
</style>
</head>
<body>
 <div>aaa</div>
 <span>bbb</span>
</body>
</html>


​
# 외부 js 데꼬오기.

​

a.js
=====
function a(){ return 100; }

a.html
======
<html>
<head>
<script src="a.js"></script>
<script>
function b(){ return 200; }
</script>
</head>
<body>
<script>
 document.write(a());
 document.write("<br/>");
 document.write(b());
</script>
</body>
</html>


​
# frame

​

a.html
======
<html>
<frameset cols="30%,*">
 <frameset rows="50%,*">
  <frame src="b.html">
  <frame src="c.html">
 </frameset>
 <frame src="d.html">
</frameset>
</html>



​
# iframe

​

<html>
 <body>
 <h1>AAAA</h1>
 <iframe src="b.html"></iframe>
 <h1>BBBB</h1>
 </body>
</html>

​

​


# css명령어  visibility, display, overflow

​

# visibility
 hidden | visible

​
<html>
<head>
<style type="text/css">
 .s1 { background:orange; }
 .s2 {
 background:tomato;
 visibility:hidden;
 }
 .s3 { background:green; }
</style>
<script>
window.onload=function(){
 b1.onclick=f1;
 b2.onclick=f2;
}
function f1(){ target.style.visibility="visible";     }
function f2(){ target.style.visibility="hidden";     }
</script>
</head>
<body>
 <input type="button" value="보이기" id="b1">
 <input type="button" value="숨기기" id="b2">
 <span class="s1">aaa</span>
 <span class="s2" id="target">bbb</span>
 <span class="s3">ccc</span>
</body>
</html>


​
# display
 none | block | inline


--위 예문에 visibility 빼고 이거넣어봐.

css
display:none;

f1()
target.style.display="inline";
target.style.display="block";
f2()
target.style.display="none";


​
# overflow
 visible | hidden | scroll | auto

​

<html>
<head>
<style type="text/css">
 div {
 background:gray; width:100px; height:100px;
 overflow:hidden;
 }
</style>
<script>
window.onload=function(){
 var str="";
 for(var a=0; a<50; a++){
 str+="fjksda;jflaj;fjfjksaj;f<br/>";
 }
 target.innerHTML=str;
}
</script>
</head>
<body>
 <div id="target"></div>
</body>
</html>

저작자표시

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

[javascript] image,form,form호출,바로가기,이벤트호출  (0) 2017.12.01
[javascript] Node 관련 메서드  (0) 2017.12.01
[javascript] 이벤트처리,window,document,innerHTML  (0) 2017.12.01
[javascript]객체생성방법,for in,date객체,Array객체  (0) 2017.12.01
[javascript] 함수의 종류,객체,String내장객체  (0) 2017.12.01
공유하기 링크
댓글