지금까지 배운 내용들은 준비단계에 불과 하다. 지금까지는 거의 글자의 색상이나 Layer기능을
통한 카드방식의 내용변화가 거의 주된 내용이었다. 물론 지금까지 배운 내용만으로도 기존의 웹페이지를
보다 근사하게 구성할 수 있을지도 모른다.
그러나, 이제부터 배울내용은 좀더 막강한 기능 예를 들면, 문서의 내용자체를 바꾼다거나,
위치를 조정하는 일을 할 것이다. 뭐 대충 이딴걸 통털어 동적변화라고 불러도 좋을 것이다.
다만, 익스플로러 4.0이상에서만 작동된다는게 아쉽지만...!
7.1 텍스트/이미지 변환
원리는 간단하다. 특정한 ID를 가지는 HTML문장을 실제로 바꾸면 된다. 예를 들면,
<P ID=PG> I am a BOY</P>
라는 문장의 P Tag안에 들어있는 문장을 바꾸고 싶다면, Script문내에서
PG.innerHTML = "Changed....";
라고 바꿔주면 된다. 즉. innerHTML, outHTML, innertText, outerText라는 속성이 추가된 것이고,
이 속성을 이용해서 바꿔치기 할 수 있는 것이다.
- innerHTML : 위의 예에서 P Tag사이에 끼인 문장 전체를 나타낸다.
- outHTML : P Tag까지 포함한 문장 전체를 나타낸다.
<script language="JavaScript">
function chg(no){
switch(no){
case 1:
p1.innerHTML = "<span style='color:blue; font-size:50pt'>....Changed....";
break;
case 2:
p1.innerHTML = "<img src='../image/idea.gif'>이렇게 이미지로도 바뀐다.";
break;
case 3:
p1.innerHTML = "처음 문장으로 아주 단순하게 작성되어있습니다.";
break;
}
}
</script>
<p id="p1">처음 문장으로 아주 단순하게 작성되어있습니다.</P>
<form>
<input type="button" value="Change Text" onclick="chg(1)">
<input type="button" value="Change Image" onclick="chg(2)">
<input type="button" value="Reset" onclick="chg(3)">
</form>
|
처음 문장으로 아주 단순하게 작성되어있습니다.
|
* 위의 예에서는 단순히 innerHTML만을 이용한 것일뿐이지만, 사용자는
사이트가 엄청난 속도를 내면서 작동한다고 믿게 될 것이다.
위와 같이 동적으로 바뀌는게 얼마나 강력한 것인가? 사실 위와 같은 일을 하려고 했었다면,
기존에는 서버에 가서 CGI를 실행시키거나, 새로운 문서를 가져와야 했었다. 그말은, 서버와 네트웍에
부하를 준다는 말이고, 또 사용자는 일정시간을 기다려야 한다는 말이다. 그러나, 위와 같은 기능을
이용하게 되면 확실히 부하를 줄일 수는 있을 것이다.
- Last Update : 2001.7.2 by Deadfire(http://www.deadfire.net)
|
DHTML이란?
동적인 변화