javascriptとは
JavaScriptは、HTML／CSSでは実現できない「動きの変化」を設定できます。
HTML／CSSで作成したWebサイトは、ブラウザ表示中に色を変えたり文字を編集したりすることはできません。コードで指定した通りの色や文字で、表示されます。
例えば、「いいね」機能です。SNSでよくある機能ですが、ハートマークを押すと、赤色に変わりますよね。これは、HTML/CSSではできません。javascriptの機能になります。
JavaScriptの記述方法は、次の2種類あります。
・ファイル内に記述する
・専用のファイル（拡張子.js）にJavaScriptのみ記述する
順番に見ていきます。
ファイル内に記述する
HTMLファイル内に、scriptタグを使って、直接JavaScriptを記述します。
index.html
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
alert('Hello World');
</script>
</body>
</html>
scriptタグ内に記述されているalert('Hello World'); は、引数の文字列をアラートウィンドウに表示するという関数です。
今回はHello Worldという文字列が入っているため、アラートウィンドウにHello Worldと表示されています。
実際のブラウザはこうなります。
専用のファイル（拡張子.js）にJavaScriptのみ記述する
ブラウザに表示される内容はhtmlファイルに記述したときと同じですが、htmlファイルにjavascriptを記述してしまうと、コードの記述量が増えるにつれて、htmlと混在し、メンテナンスが行いにくくなります。そのため、htmlファイルとjsファイルを切り分けて、記述するのが効果的です。
index.html
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="app.js"></script>
</body>
</html>
app.js
alert('Hello World');
こちらも実際のブラウザを確認してみます。
表示画面は先ほどと同様です。