遊べるJavaScript入門ロゴ

Document.write の代わりになるもの

「document.write()」はHTML5では使ってはいけない(非推奨)とされています。 

文字や写真を表示するには、この「.write」は便利なメソッドですが、JavaScriptの改良がなされるまでは時間がかかりそうですので、当面はどうにかしないといけないようです。

WEBにはいろいろな方法が紹介されていますが、自分で書いてみないと実感できないので、こちらの「.writeIn()」を使った私のページのプログラムコードの表示部分を、2つのやり方で書き直しをしてみました。 

「.write」や「.writeIn」が使えないのなら、当分は、自分なりに使えるもので慣れていくしか仕方がないのかもしれません。 下で使ったいずれの方法も、このHP記事の他のところでも使っているものです。

ここでは、先のページの「100回サイコロを振って出る各目の数を表示するプログラム」中の、「.writeIn」をつかった部分を書き換えています。 

コードについては本文に表示していませんので、必要なら、画面を右クリックして、ソースのコードを表示させて内容を見てください。

PR


①arert・confirm・promptなどで小窓に答えを出す方法

ここで使うのは警告や注意文ではないけれども、答えや説明文を表示するだけなら、小窓に文字を表示することができる「.alert」「.confirm」「.prompt」などが使えそうです。 

ここでは、「.alert」「.confirm」「.prompt」をつかって順に結果を表示させています。

もちろん、表示の仕方に違和感もありますが、ともかく、表示ができるので使えそうですね。

Google chromeでみると、3つの中では「.confirm」がマシなようですが、比較して良さそうなものを使ってみてください。

サイコロを100回振らせるコードは前のページのものと同じで、答えの表示は「.alert」「.confirm」「.prompt」の順で表示されます。 その部分はこのように書いています。

alert('1は'+one+'個 2は'+two+'個 3は'+three+'個 4は'+four+'個 5は'+five+'個 6は'+six+ '個です。') ;

confirm('1は'+one+'個 2は'+two+'個 3は'+three+'個 4は'+four+'個 5は'+five+'個 6は'+six+ '個です。') ;

prompt('1は'+one+'個 2は'+two+'個 3は'+three+'個 4は'+four+'個 5は'+five+'個 6は'+six+ '個です。','答えが表示されました') ;


PR


実際にJavaScriptを動かして表示を見てみましょう。

「.alert」「.confirm」「.prompt」で結果を表示させるJavaScript

**********ここから

*********Javascriptはここまで

ボタンを押すと順番に小窓にサイコロを100回振ってランダム関数で1から6の目のでた数が、①arertの場合 ②confirmの場合 ③promptの場合の順で表示されます。

OKまたはキャンセルボタンで次に進みます。 新たにボタンを押すと、再計算された答えが繰り返し表示されます。


② innerHTMLを使う方法

これは、ボタンの下に書いたテキスト部分に「id名」をつけて、「.getElementById()」でその「id名」部分(ここではmyKekka)のテキストや画像を「.innerHTML」で書き換える… という一般的に使われている方法です。

表示部分のコードは、1行で表示するなら、上の小窓での表示と同じように、document.getElementById('myKekka').innerHTML = ('1は'+onea+'個 2は'+twoa+'個 3は'+threea+'個 4は'+foura+'個 5は'+fivea+'個 6は'+sixa+ '個です。' ) ;  … でいいのですが、ここでは、HTMLが書き込めるという「.innerHTML」の良さを活かして、<br>によって各行で改行するようにしています。 

そのようにすれば、前のページの「writeIn」を使った表示のように整列して改行された状態になります。

【ここでの文章の表示部分のコード】 document.getElementById('myKekka').innerHTML = ('1は '+onea+' 個です。<br>2は '+twoa+' 個です。<br>3は '+threea+' 個です。<br>4は '+foura+' 個です。<br>5は '+fivea+' 個です。<br>6は '+sixa+ ' 個です。' ) ;


ちなみに、テキストを書き換える「.textContent」もテキスト表示だけなら使えます。 これは、『document.getElementById('myKekka').textContent = ('**')』 の「’**’」にテキストだけで文章を書けば表示してくれます。

しかし、今回の例のように「変数」が入っているとうまく表示されないので innerHTML にしないといけないのですが、もしも、テキストだけの表示なら、「textContent」も使えることを覚えておくと良いでしょう。


「.getElementById」と「innerHTML」を使うJavaScript

出た目の個数の結果は、ここに表示します。

*********Javascriptはここまで

(お断り)このページでは、「コピー」ができませんので、コピーは、画面を右クリックして、「ページのソースを表示」させてHTMLからコピーしてください。

表示される文字の体裁はスペースなどを使って整える必要もあって、試行錯誤して決めましたが、「id部分の文章を入れ替える」という方法を使えば、「document.write()」を使わないで表現できますね。 

でも今も簡単に使えた document.write が普通に使えるようになってほしい気持ちは消えません。



記事の目次へ

PR



(来歴)R6.6作成  
PR

AmazonのJavascript本 送料無料


楽天ブックスは品揃え200万点以上!



記事の目次へ

電子工作の記事の目次へ