JAvascriptの手帳一体化開発例(初級)

一;メモ帳の開発では、javascriptラベルはブラウザがファイル全体を読み終わった後に実行することを保証しなければならない.一般的にjavascriptラベルを最後に書く.先生がよく使う方法を使うには、headラベルにjavascriptラベルを追加し、このラベルに次のコードを加える必要がある.
window.onload=function(){
/*操作のコード*/
}
二:例:javascriptの手帳への応用:
名前:
男:
女:
10歳
二十歳
30歳
を選択します.
</div>
<div style="font-family:tahoma;font-size:medium;">
var text=document.getElementById("text");
</div>
<div style="font-family:tahoma;font-size:medium;">
text.onclick=function(){
</div>
<div style="font-family:tahoma;font-size:medium;">
this.value="";
</div>
<div style="font-family:tahoma;font-size:medium;">
}
</div>
<div style="font-family:tahoma;font-size:medium;">
var sex=document.getElementById("sex");
</div>
<div style="font-family:tahoma;font-size:medium;">
var sex1=document.getElementById("sex1");
</div>
<div style="font-family:tahoma;font-size:medium;">
var select=document.getElementById("select");
</div>
<div style="font-family:tahoma;font-size:medium;">
var button=document.getElementById("button");
</div>
<div style="font-family:tahoma;font-size:medium;">
var table=document.getElementById("table");
</div>
<div style="font-family:tahoma;font-size:medium;">
var tr=document.getElementById("tr");
</div>
<div style="font-family:tahoma;font-size:medium;">
var td1=document.getElementById("td1");
</div>
<div style="font-family:tahoma;font-size:medium;">
var td2=document.getElementById("td2");
</div>
<div style="font-family:tahoma;font-size:medium;">
var td3=document.getElementById("td3");
</div>
<div style="font-family:tahoma;font-size:medium;">
button.onclick=function(){
</div>
<div style="font-family:tahoma;font-size:medium;">
alert("hello world");
</div>
<div style="font-family:tahoma;font-size:medium;">
var textvalue=text.value;
</div>
<div style="font-family:tahoma;font-size:medium;">
var sexvalue=sex.value;
</div>
<div style="font-family:tahoma;font-size:medium;">
var age=select.value;
</div>
<div style="font-family:tahoma;font-size:medium;">
td1.innerHTML=textvalue;
</div>
<div style="font-family:tahoma;font-size:medium;">
td2.innerHTML=sex1.checked?sex1.value:sex.value;
</div>
<div style="font-family:tahoma;font-size:medium;">
td3.innerHTML=age;
</div>
<div style="font-family:tahoma;font-size:medium;">
tr.appendChild(td1);
</div>
<div style="font-family:tahoma;font-size:medium;">
tr.appendChild(td2);
</div>
<div style="font-family:tahoma;font-size:medium;">
tr.appendChild(td3);
</div>
<div style="font-family:tahoma;font-size:medium;">
table.appendChild(tr);
</div>
<div style="font-family:tahoma;font-size:medium;">
}
</div>
<div style="font-family:tahoma;font-size:medium;">
三:myeclipseのhtml、jspでもこのコードを実行できます.興味のある人は試してみてください.
未完待续....

var but=document.getElementById("but");
var tb=document.getElementById("tb");
but.onclick=function(){

var uname=document.getElementById("uname");
var c=uname.value;
uname.value="";
var td=document.createElement("td");
var tr=document.createElement("tr");
td.innerHTML=c;
tr.appendChild(td);
tb.appendChild(tr);


}

var but=document.getElementById("but");
var tb=document.getElementById("tb");
but.onclick=function(){

var uname=document.getElementById("uname");
var c=uname.value;
uname.value="";
var td=document.createElement("td");
var tr=document.createElement("tr");
td.innerHTML=c;
tr.appendChild(td);
tb.appendChild(tr);


}