# <a> 문서연결
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<a href="http://www.naver.com">네이버</a>
</body>
</html>
==================================================================
[ex]
도시를 클릭하면 텍스틍 도시명이 출력될 수 있도록 소스코드를 작성하시오.
<html>
<body>
<a href="#">진주시</a>
<a href="#">창원시</a>
<a href="#">경주시</a>
<input type="text">
</body>
</html>
---------------
[an]
<html>
<head>
<script>
function a(n){
txt.value=n.innerHTML; <---innerText를 써도 현재 로직에선 같은 결과가 출력된다.
}
</script>
</head>
<body>
<a href="#" onclick="a(this)">진주시</a>
<a href="#" onclick="a(this)">창원시</a>
<a href="#" onclick="a(this)">경주시</a>
<input type="text" id="txt">
</body>
</html>
===========================================================================
[ex] 주석처리부분을 for문으로 바꾸시오.
<html>
<head>
<script>
function a(aObj){
txt.value=aObj.innerHTML;
}
</script>
</head>
<body>
<!--
<a href="#" onclick="a(this)">진주시</a>
<a href="#" onclick="a(this)">창원시</a>
<a href="#" onclick="a(this)">경주시</a>
-->
<input type="text" id="txt">
</body>
</html>
-------------------------------
[an]
<html>
<head>
<script>
function a(aObj){
txt.value=aObj.innerHTML;
}
</script>
</head>
<body>
<script>
var array=["진주시","창원시","경주시"];
for(var i=0;i<array.length;i++){ //length를 사용해 배열의 크기를 구한다.
document.write("<a href='#' onclick='a(this)'>"+array[i]+"</a> ");
}
</script>
<input type="text" id="txt">
</body>
</html>
============================================================================
# 문서내연결
[ex]
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<h1><a href="#naver">네이버</a></h1>
<h1><a href="#yahoo">야후</a></h1>
<h1><a href="#daum">다음</a></h1>
<pre>
</pre>
<a name="naver">네이버...</a>
<div align="right"><a href="#top">TOP</a></div>
<hr>
<pre>
</pre>
<a name="yahoo">야후...</a>
<div align="right"><a href="#top">TOP</a></div>
<hr>
<pre>
</pre>
<a name="daum">다음...</a>
<div align="right"><a href="#top">TOP</a></div>
<hr>
</body>
</html>
======================================================================
# 상자의 위치 지정하기
<html>
<head>
<style type="text/css">
div { width:200px; height:200px; }
.s1 { background-color:yellow; left:100;top:100; position:absolute;}
.s2 {
background-color:orange;
left:50;top:50; //left = x축 , top=y축
position:relative; // position=static, relative, absolute;
}
</style>
</head>
<body>
<div class="s1">aaa</div>
<div class="s2">bbb</div>
</body>
==================================================================================================
[ex] 상자를 보이고 숨기게 하려면?
<html>
<head>
<style type="text/css">
.s1 { width:200px; height:200px;
position:absolute;
background-color:orange;
left:100;top:100;
}
</style>
</head>
<body>
<input type="button" value="보이기">
<input type="button" value="숨기기">
<div class="s1">aaa</div>
</body>
------------------------------------------
[an]
<html>
<head>
<style type="text/css">
.s1 { width:200px; height:200px;
position:absolute;
background-color:orange;
left:100;top:100;
}
</style>
<script>
function a(){
divObj.style.visibility="visible" //visible은 보이게~
}
function b(){
divObj.style.visibility="hidden" //hidden은 안보이게~
}
</script>
</head>
<body>
<input type="button" value="보이기" onclick="a()" >
<input type="button" value="숨기기" onclick="b()" s>
<div class="s1" id="divObj">aaa</div> //div태그를 visible과 hidden을 줘야 하므로 id값을 줘야 한다~
</body>
</html>
=======================================================================================================
<html>
<head>
<style type="text/css">
.s1 {
position:absolute;
width:100px; height:100px;
background-color:yellow;
left:100;top:100;
overflow:visible;
}
</style>
<script>
window.onload=function(){
var str="";
for(var i=0; i<10; i++){
str+="<h1>abcdefghijk</h1>"
}
divObj.innerHTML=str;
}
</script>
</head>
<body>
<div id="divObj" class="s1"></div>
</body>
</html>
overflow:visible | scroll | auto | hidden; <---css에 적용하여 확인해 볼것!
=================================================================================================
# 두번째 이벤트처리방식
[ex]
<html>
<head>
<script>
window.onload=function(){
b1.onclick=function(){
txt2.value=txt1.value;
}
b2.onclick=function(){
txt1.value="";
txt2.value="";
txt1.focus(); // txt1에 포커스를 맞춘다.
}
}
</script>
</head>
<body>
<input type="button" id="b1">
<input type="button" id="b2">
<input type="text" id="txt1">
<input type="text" id="txt2">
</body>
</html>
-------------
[ex]
<html>
<head>
<script>
window.onload=function(){
b1.onclick=f1; //onclick을 변수화 하여 사용함으로써 재사용할 수 있게끔 만들었다.
b2.onclick=f2; //onclick을 변수화 하여 사용함으로써 재사용할 수 있게끔 만들었다.
}
function f1(){
alert(1);
}
function f2(){
alert(2);
}
</script>
</head>
<body>
<input type="button" id="b1">
<input type="button" id="b2">
</body>
</html>
==================================================================================================
# String객체
[ex]
<html>
<head>
</head>
<body>
<script>
var a=prompt("영어대소문자입력요망~","abdfdsaAGDSKJLFA");
document.write(a.substring(0,1).toUpperCase());
document.write(a.substring(1).toLowerCase());
</script>
</body>
</html>
'javascript' 카테고리의 다른 글
| 객체와 배열의 차이 (0) | 2013.11.26 |
|---|---|
| 자바스크립트 (0) | 2013.10.24 |
| # 노드관련 메서드 (insertBefore,replaceChild,removeChild,appendChild) (0) | 2013.10.20 |
| innerText,innerHTML의 차이점? (0) | 2013.10.20 |
| insertAdjacentHTML 은 어디에 사용될까? (0) | 2013.10.20 |
