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

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

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

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

「.ｗｒｉｔｅ」や「.writeIn」が使えないのなら、当分は、自分なりに使えるもので慣れていくしか仕方がないで、このHP記事でも使っている命令などで代替えします。

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

let one=0,two=0,three=0,four=0,five=0,six=0;　　　//最初は出目をすべて0にしておく
　for (let i=1; i<=100; i++) {　　　　　//100回繰り返す
　　let sai2 =Math.floor(Math.random()*6+1);　　　　//【計算】1～6の目を出します
　　switch (sai2) {　　　　　//出た目を1～6に振り分けて合計します
　　　　case 1:　　　　　　　//　1の目の場合～6の場合を集計する
　　　　one = one+1;
　　　　break;
　　　　case 2:
　　　　two= two+1;
　　　　break;
　　　　case 3:
　　　　three= three+1;
　　　　break;
　　　　case 4:
　　　　four= four+1;
　　　　break;
　　　　case 5:
　　　　five =five+1;
　　　　break;
　　　　case 6:
　　　　six= six+1;
　　　　break;
　}
}
　　　　//ここから、問題部分（1～6の合計を表示）　
　　　　　　　　//正しく改行しないのでオマジナイ<pre>～</pre>を入れました
document.writeln('<pre>');
document.writeln('100回サイコロを振ってそれぞれの目の出る数を数えました。');
document.writeln('1は　' + one + '　こです。');
document.writeln('2は　' + two + '　こです。');
document.writeln('3は　' + three + '　こです。');
document.writeln('4は　' + four + '　こです。');
document.writeln('5は　' + five + '　こです。');
document.writeln('6は　' + six + '　こです。');
document.writeln('</pre>');
document.close();　

PR

このプログラムを動かすと、答えは表示してうまく動いているようですが、CSSが壊れて画面が乱れます。　動かしてはいけませんし、対策が必要です。

①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>によって各行で改行するようにしています。　

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

【ここでの文章の表示部分のコード】　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はここまで

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

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

PR

---