JavaScriptの出力
HTMLファイルにJavaScriptを記述してブラウザ上で出力結果を確認しましょう。
ここでは、HTMLの意味や記述についての説明は省略します（HTMLについてはこちらから）。
HTML内のScriptタグ
JavaScript のコードを記述するには script 要素を使用します。具体的には <script> から </script> の間に JavaScript のコードを記述します。
以下のソースを記述してファイル名を「js011.html」としてください。
|
1 2 3 4 5 |
<html> <body> <script>document.write('Hello');</script> </body> </html> |
ブラウザでこのファイルにアクセスすると「Hello」が表示されます。
※「document.write()」は、現在非推奨なので実際の制作では使用しないようにしましょう。
アラートダイアログの出力
アラートダイアログを出力します。同じファイルのスクリプトの一部を以下のように書き換えてください。
|
1 2 3 4 5 |
<html> <body> <script>alert('Hello');</script> </body> </html> |
ブラウザでこのファイルにアクセスすると「Hello」のダイアログが表示されます。
コンソールログ出力
コンソールログで出力しましょう。デバッグにも役立つのでフロントの開発では最も多く使用します。
|
1 2 3 4 5 6 7 |
<html> <body> <script> console.log('Hello'); </script> </body> </html> |
ログの確認は、ブラウザのデバッグツールを使用します。
今回は、Google Chrome を使用した場合です。
検証画面（右クリックかF12）でコンソールタブを選択することで表示されます。
Scriptの外部リンクとJSファイル
HTMLの要素内に記述する方法で説明しましたが、CSSと同様に外部ファイル化してリンクする方法もあります。
CSSと同様にHead要素内に記述する場合。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="javascript.js"></script> <title>cyber-genjin</title> </head> <body> <!-- ここにコンテンツが入る --> </body> </html> |
拡張子は「.js」にしましょう。
今回は、同階層にある「javascript.js」を読み込んでいます。
「javascript.js」には、JavaScriptのソースを記述します。