はじめに
こんにちは。のりべんです。
今日はJavaScriptの簡単なアウトプットについて学習していきます。
よろしくお願いします。
3種類のアウトプット
JavaScriptには大きく分けて3種類のアウトプットがある。
1.コンソールへのアウトプット
2.ダイアログボックスへのアウトプット
3.HTML、CSSへのアウトプット
それでは各項目について見ていく
1.コンソールへのアウトプット
JavaScriptプログラムはブラウザのコンソールにテキストや数字を出力することができる。
最も簡単なコンソールの出力にconsole.log()がある。具体的な使い方を書いていくと、
①開発者ツールのコンソール画面を開く
②コンソール画面に**フレドラ**と表示させたい場合、console.log('フレドラ')と入力
③エンターキーを押すと表示させたい文字列が表示される。
これだけである。
console.log()の()内をシングルクォート(')もしくはダブルクォート(")で囲むと文字列として扱われる。これは文字列を書く際は必要な記述となるが数式の取り扱いの場合は特に注意が必要となる。
数式を数値として出すのか、数式の文字列として出すのかで使い方が分かれてくるのである。
例えば
console.log(2+3);
の場合の出力は、数値計算の結果となるので
5
となる。
しかし、文字列として出力する'もしくは"で囲うと
console.log('2+3');
2+3という式の文字列が出力されるため、出力結果は
2+3
となる。
オブジェクト、メソッド、パラメータ
先ほど取り扱った出力にはconsole.log()を使用した。
これは大きく3つの部分に分解することができ、例の「フレドラ」を出力する例で例えると
console → オブジェクト
log → メソッド
('フレドラ') → パラメータ
となる。
オブジェクトは動作させるパーツを指定する。
consoleはコンソール部分を指定している。他にもウィンドゥを指定するwindowオブジェクトや、画面表示に関するdocumentオブジェクトなどがある。
メソッドはオブジェクトの持つ機能の何を利用するかを指定する。
console.log()のlog()は()内をコンソールに出力する、という機能を指す。
consoleオブジェクトはこの他にも
複雑なデータをリスト表示する.dir()や
エラーを表示する.error()など
様々なメソッドを持つ。
パラメータはメソッドに持たせるデータを指定する。
console.log()の場合はどのようなデータをコンソールに出力するのかを指定する。
「フレドラ」という文字列を出力する場合は先程のようにパラメータとして'フレドラ'を使用する。
JavaScriptの記述場所
先ほどは開発ツールのコンソールにJavaScriptを記述して使用していた。しかし実際のwebサイトではコンソールを使うことはない。ではJavaScriptはどこに記述されているのか？ここでは大きく2点に分かれる。
①HTMLに直接JavaScriptを書き込む方法
②JavaScriptファイルに記述する方法
どちらの例も同じ結果になるような具体例を提示しよう。
コンソール画面に「バシャーモ」と記述する例とする。
①はHTML内にJavaScriptを書き込んで動作させる方法となる
コンソール画面に文字を表示させる際はconsole.log()を用いる。
これをHTML内に埋め込む。
<body>
…省略
</footer>
<script>
'use strict'
console.log('バシャーモ');
</script>
</body>
HTML内にscriptタグを用いると実現させることができる。
こうすることでコンソールに「バシャーモ」と表示させられているはずだ。
②は外部のJavaScriptファイルに書き込み、それをHTML内で呼び出す手法だ。
使用するJavaScriptファイル（以下jsファイル）をblaziken.jsとするとHTMLファイルの中身は
<body>
…省略
</footer>
<script src="blaziken.js"></script>
</body>
↑これでHTML内でblaziken.jsを読み込む
読み込み先のjsファイルにはJavaScriptの動作を記述するので
'use strict'
console.log('バシャーモ');
こうすることでコンソールに「バシャーモ」と表示させられているはずだ。
※jsファイルの文字コード形はUTF-8に設定する。
HTML内で外部のjsファイルを読み込む際に
<script src="blaziken.js"></script>
を使用した。この際のファイルパスは相対パス（HTMLファイルに対するjsファイルの場所がどこなのかを示す記述）で設定する必要がある。
この場合はHTMLファイルとjsファイルが同じフォルダにいる場合を想定しているが、
そうでない場合はパスを記述する必要があるので注意が必要。
2.ダイアログボックスへのアウトプット
続いてのアウトプットはダイアログボックスへのアウトプットとなる。
ブラウザ画面にダイアログボックスを表示させる場合は次のように行う。
例えば「バシャーモのフレアドライブ！」と表示されたダイアログボックスを表示させる場合
<body>
…省略
<script>
'use strict'
window.alert('バシャーモのフレアドライブ！');
</script>
</body>
この状態でHTMLファイルをブラウザで開くと想定していたダイアログが表示される。
このように、アラートダイアログボックスを表示し、文字列を出力する場合は、windowオブジェクトのalertメソッドを使用し、表示させたい文字列や数値をプロパティに設定する。
window.alert(プロパティ);
3.HTMLへのアウトプット
要素の取得
HTMLの書き換えには2段階の処理を行う。
1.書き換えたい部分の要素を取得する
2.取得した要素のコンテンツを書き換える
1に関してはいくつかの方法があるが、今回は特定のID属性を持つ要素を取得する方法を使用する。
使用するID要素はpokemonとし、(
)を取得するものとする。
上記の要素を持つ部分を取得し、コンソールに書き出す処理は以下のようになる。
<body>
...省略
<section>
<p id="pokemon">バシャーモのフレアドライブ</p>
</section>
...省略
</footer>
<script>
'use strict'
console.log(document.getElementById('pokemon'));
</script>
</body>
ここではdocumentオブジェクトが要素の取得を行っている。
document.getElementById('pokemon')でpokemonの要素を持つ部分を取得し、
取得してきた内容をconsole.log()でコンソールに表示している。
要素の書き換え
では2の工程の書き換えの作業を行う。
ここでは先ほどのdocument.getElementById('pokemon')を使用する。
例えば、日付に書き換えを行うスクリプトの場合は以下のようになる。
<body>
...省略
<section>
<p id="pokemon">バシャーモのフレアドライブ</p>
</section>
...省略
</footer>
<script>
'use strict'
document.getElementById('pokemon').textContent = new Date();
</script>
</body>
document.getElementById('pokemon').textContent = new Date();
この部分で日付への書き換えを行っている。
document.getElementById('pokemon')で要素を取得し、textContentその要素を
new Date()に書き換えるという処理を行っている。
終わりに
今回はJavaScriptの主なアウトプットについて見ていきました。
次はJavaScriptの基本的な文法や機能について見ていきたいと思います。
それでは、お疲れ様でした。