ObjectName.innerHTML
|
100
111
initial
initial
initial
|
당초값='100'
당초값='111'
당초값='initial'
당초값='initial'
당초값='initial'
|
| 마우스를 오브젝트 위에 올려보라. |
<head>
..
<script Language="Javascript">
<!-- 감춤
var a,b;
function calcC(a,b) {
var c= a*b;
divC.innerHTML=c;
}
function calcD(a,b) {
var c= a*b;
divD.innerHTML=c;
}
function calcE(a,b) {
var c= a*b;
divE.innerHTML=a + ' * ' + b + ' = <font color=red>' + c + '</font>';
}
// 감춤 끝 -->
</script>
</head>
<body>
..
<table width=500>
<tr>
<td>
<div id=divA style='border:solid 1pt;' title='divA 당초값=100'>100</div>
<div id=divB style='border:solid 1pt;' title='divB 당초값=111'>111</div>
<div id=divC style='border:solid 1pt;' title='divC 당초값=initial'>initial</div>
<div id=divD style='border:solid 1pt;' title='divD 당초값=initial'>initial</div>
<div id=divE style='border:solid 1pt;' title='divE 당초값=initial'>initial</div>
<script Language="Javascript">
<!-- 감춤
calcC(12,12);
calcD(divA.innerHTML, divB.innerHTML);
calcE(divA.innerHTML, divB.innerHTML);
// 감춤 끝 -->
</script>
<style>
td.description div{height:16pt}
</style>
</td>
<td class=description>
<div>당초값='100'</div>
<div>당초값='111'</div>
<div>당초값='initial'</div>
<div>당초값='initial'</div>
<div>당초값='initial'</div>
</td>
</tr>
<tr><td colspan=2>마우스를 오브젝트 위에 올려보라.</td></td>
</table>
..
</body>
 중요 사항
- 일반적인 계산은 데이터베이스에서 변수를 가져와서 계산하지만 페이지 속에서 div, span 등의 내용을 가지고 계산 할 수 있다. 이 예제에서 div 대신에 span을 그대로 적용하여도 결과를 얻을 수 있다.
- divA.innerHTML에서 divA는 이름이 그렇게 지정된 div object 의 이름이고 .innerHTML은 그 내용물을 가리킨다.
그 내용물로 계산을 할 수 있으며 스트링이 포함되면 스트링 결합이 일어난다.
- object 속에서 title='설명'을 해 주면 마우스를 올렸을 때 표현된다. 이는 img에서 alt='설명'과 같은 작용을 한다.
- 처음과 두번째는 내용이 그대로 있고 그 다음부터는 당초값이 'initial'이었는데 기능에 의하여 바뀐 것이다.
주어진 변수고 곱하고(divC), div 내용의 수치끼리 곱하고(divD), 그것에 스트링을 가미한 것(divE)을 만들기 위하여 각각의 기능을 만들어 사용하였다.
style에서 td.description div{height:16pt}는 왼쪽과 맞추기 위한 것으로 td class='description' 속의 div에 해당한다는 것이다. 그것은 중간의 공간을 넣으므로서 얻을 수 있다(Nescape에서는 않됨).
|
제공