HTMLページにJavaScriptを記述する


ccc

東京都内でサラリーマンをしているAI・育児ブロガー、CCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。


HTMLページの中にJavaScriptのコードを記述する方法を教えてください。


ccc

JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。


ccc

今回はJavaScriptの使い方として、HTMLページの中にJavaScriptのコードを記述する方法をサンプルを用いて解説します。

script要素について

JavaScriptのコードはscript要素の中に記述します。

<script>
//コードを記述します
</script>

script要素は、HTMLページのhead要素内、またはbody 要素内に記述します。コード内容によって、head要素に書くか、body要素に書くか決まります。

<html>
<head>
<meta charset="UTF-8">
<script>
//コードを記述します
</script>

</head>
<body>

<script>
//コードを記述します
</script>

</body>
</html>

noscript要素について

noscript要素内のコードは、ブラウザのJavaScriptが無効になっているときにだけ出力されます。noscript要素内では、JavaScriptが実行できないので、HTML文を記述します。

<noscript>
//JavaScriptが無効のときに表示したいコンテンツ
</noscript>

サンプルコードを実行する

HTMLページの中にJavaScriptのコードを記述し、コードが実行できることを確認してみます。
document.write()は、数値や文字列をブラウザに表示するメソッドです。

<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<script>
 document.write("Hello World from JavaScript");
</script>

<noscript>
 ブラウザのJavaScriptが無効です
</noscript>

</body>
</html>

出力結果は次のようになります。

Hello World from JavaScript