遊べるJavaScript入門ロゴ

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

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

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

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

「.write」や「.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



(来歴)R6.6作成  R6.7月見直し
PR

AmazonのJavascript本 送料無料


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



記事の目次へ

電子工作の記事の目次へ