JavaScriptでテキストを表示
JavaScriptでプログラムするとテキストを表示したくなることがあるのでいくつかまとめてみました。
document.write()でページ上に表示する
documentオブジェクトのwriteメソッドを使用すると簡単に表示できます。下記のように記載するとテキストとして表示できます。HTMLの改行コードである”</br>”を付けると改行もできます。
document.write("ページに表示できます。</br>");documentオブジェクト
ここで簡単にdocumentオブジェクトについて説明します。documentオブジェクトはページにある情報をすべて持ったオブジェクトです。そのため、これがもつメソッドやプロパティを使うことでページ上の情報を得たり、表示を変えたりすることができます。うまく使えるようになると便利だと思います。例えば下記の様に表示させると、ドメイントとアドレスを表示できます。これらの情報をうまく処理できると配置する場所が変わっても、自ファイルの場所を特定させることができたりします。
document.write(document.domain+"</br>");
document.write(document.location+"</br>");ページ上の特定の箇所へテキストを表示する。
HTML上のid属性で表示するタグを指定して、テキストを表示することができます。下記の例はid=”div0″属性を持つdivタグへテキストを表示する方法です。documentオブジェクトから”getElementById”で要素を抜き出し、その要素のinnerHTMLへ書き込みを行います。タグはdivタグである必要はなく、pタグでも構いません。
<div id="div0"></div>
<script>
var doc0= document.getElementById("div0");
doc0.innerHTML= "div0の箇所にテキストを表示します。";
</script>コンソールへ表示する
今までの2つと異なり、次はコンソールに表示する方法です。表示がコンソールなのでデバック時に便利でよく使います。また配列等もそのまま出力してくれるのでとっても便利です。例えば下記のように記載するとこのソールへ表示されます。
console.log("コンソールに表示できます。")コンソールの表示
コンソールはブラウザでコードを表示させたときに右クリックで出てくるウィンドウから表示せることができます。Chromeなら右クリック->検証、Firefoxなら右クリック->要素を操作を選ぶと表示されます。JavaScriptでエラーがある場合にも表示させるのでデバック時には常に表示させていると便利です。
documentオブジェクトの中身の確認
console.logはいろいろ表示できるので、下記のように記載すると、windowオブジェクトやdocumentオブジェクトの中を見ることができます。なお、windowオブジェクトはページのjavascriptの最上位のオブジェクトでその中にdocumentオブジェクトも含まれています。表示してみて、確認すると面白いと思います。
console.log(window)
console.log(document)
まとめ
javascriptでテキストを表示させる方法を３つ紹介しました。テキスト表示は必ず使用すると思いますので、必要に応じて使い分けてみてください。
コメント