プログラミング学習の記録 166.1 JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)の練習問題3.1,3.2

開発環境:Microsoft Visual Web Developer+Internet Explorer
Script言語:JavaScript

"JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)"のp.81の練習問題3.1,3.2を解いてみる。




3.1
<script language="javascript" type="text/javascript"> var Member = function(name, age) { this.name = name; this.age = age; this.displayNameandAge = function() { var d0 = document.getElementById("d0"); var p0 = document.createElement("p"); var br0 = document.createElement("br"); var text0 = document.createTextNode("Name: " + this.name); var text1 = document.createTextNode("Age: " + this.age + "歳"); p0.appendChild(text0); p0.appendChild(br0); p0.appendChild(text1); d0.appendChild(p0); }; } var pochi = new Member("JavaScript", 15);</script> <p>名前と年齢を表示してみる。</p> <input type="button" value="Click!" onclick="pochi.displayNameandAge()" /> <p>実行結果</p> <div id="d0"></div>

名前と年齢を表示してみる。

実行結果

3.2
<script language="javascript" type="text/javascript"> var Member1 = function(name, age) { this.name = name; this.age = age; }; Member1.prototype.displayNameandAge1 = function() { var d1 = document.getElementById("d1"); var p1 = document.createElement("p"); var br1 = document.createElement("br"); var text2 = document.createTextNode("Name: " + this.name); var text3 = document.createTextNode("Age: " + this.age + "歳"); p1.appendChild(text2); p1.appendChild(br1); p1.appendChild(text3); d1.appendChild(p1); }; var pochi1 = new Member1("Microsoft Visual C#", 10);</script> <p>もう一つの名前と年齢を表示してみる。(Prototype property バージョン)</p> <input type="button" value="Click!" onclick="pochi1.displayNameandAge1()" /> <p>実行結果</p> <div id="d1"></div>

もう一つの名前と年齢を表示してみる。(Prototype property バージョン)

実行結果