티스토리 뷰
# image객체
<html>
<head>
<style type="text/css">
img { width:100px; height:100px; }
</style>
<script>
window.onload=function(){
imgObj.onmouseover=f1;
imgObj.onmouseout=f2;
}
function f1(){
this.style.width="150px";
this.style.height="150px";
}
function f2(imgObj){
this.style.width="100px";
this.style.height="100px";
}
</script>
</head>
<body>
<img src="img2.jpg" id="imgObj">
</body>
</html>
# img 부르는 방법 3가지
var s1=document.images[0].src;
var s2=document.obj1.src;
var s3=obj2.src;
<body>
<img src="a.gif">
<img src="b.gif" name="obj1">
<img src="c.gif" id="obj2">
</body>
# form객체
<html>
<head>
<script>
window.onload=function(){
document.forms[0].elements[0].style.background="green";
}
</script>
</head>
<body>
<form>
<input type="text"><br/>
</form>
</body>
<html>
# form객체에 접근하는 방법
[ex]
<html>
<head>
<script>
window.onload=function(){
document.forms[0].elements[0].style.background="red";
document.fObj.tObj.style.background="orange";
document.forms["fObj"].elements["tObj"].style.background="gold";
}
</script>
</head>
<body> <form name="fObj">
<input type="text"><br/>
<input type="text" name="tObj"><br/>
<input type="text"><br/>
</form>
</body>
<html>
# 바로가기
<html>
<body>
<a href="#target">택배아저씨</a><br/>
<script>
for(var a=0; a<100; a++){
document.write("jfksa;jf;asj;<br/>");
}
</script>
<a name="target">집</a>
</body>
<html>
#이벤트호출방법 최종정리
<html>
<head>
<script>
function a(){ alert("홍길동");}
function b(){ alert("김길동");}
</script>
</head>
<body>
<input type="button" onclick="a()"><br/>
<input type="button" onclick="b()"><br/>
</body>
<html>
//태그자체에서 onclick을주고 함수호출바로해주는 1번째 방법.
<html>
<head>
<script>
window.onload=function(){
aa.onclick=a;
bb.onclick=b;
}
function a(){ alert("홍길동");}
function b(){ alert("김길동");}
</script>
</head>
<body>
<input type="button" id="aa"><br/>
<input type="button" id="bb"><br/>
</body>
<html>
//태그에서는 아이디만주고 window.onload에서 각 아이디에 onclick을주고 함수호출하는
// 2번째방법 (이걸많이씀)
//2번방법인데 호출하는 다양한 방법들 한번 보고가라
<html>
<head>
<script>
window.onload=function(){
document.forms[0].elements[0].onclick=a;
document.forms[0].elements[1].onclick=b;
}
function a(){ alert("홍길동");}
function b(){ alert("김길동");}
</script>
</head>
<body>
<form name="fObj">
<input type="button" id="aa" name="b1"><br/>
<input type="button" id="bb" name="b2"><br/>
</form>
</body>
<html>
<html>
<head>
<script>
window.onload=function(){
document.fObj.b1.onclick=a;
document.forms["fObj"].elements["b2"].onclick=b;
}
function a(){ alert("홍길동");}
function b(){ alert("김길동");}
</script>
</head>
<body>
<form name="fObj">
<input type="button" name="b1"><br/>
<input type="button" name="b2"><br/>
</form>
</body>
<html>
'VIEW > JAVASCRIPT' 카테고리의 다른 글
| [javascript] event,eval(),focus(),prototype,외부 파일 가져오기,visibility, display, overflow (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 |