JavaScriptは、Webページに動的なコンテンツを追加し、インタラクティブなユーザー体験を実現するためのプログラミング言語です。ブラウザ上で実行され、HTMLやCSSと組み合わせて使用されることが多いです。本記事では、JavaScriptの基本的な概念から、ブラウザ上での表示方法、さらに具体的なコード例を交えながら説明します。
JavaScriptとは？
JavaScriptは、Web開発において欠かせない言語の一つです。次のような特徴があります。
- 動的なコンテンツの生成：ページの内容を動的に変更できる。
- イベントハンドリング：ユーザーの操作（クリック、入力など）に応じた動作を実装。
- クライアントサイドでの実行：ブラウザ上で実行されるため、サーバーとの通信を必要としないインタラクションが可能。
JavaScriptの表示方法
JavaScriptを使用するためには、HTMLファイルに直接コードを記述するか、外部のJavaScriptファイルを読み込む必要があります。以下ではその方法を紹介します。
1. 直接HTMLに埋め込む
HTML内に直接JavaScriptコードを記述することができます。これは簡単なスクリプトを実行する場合に便利です。例を見てみましょう。
この例では、<script>タグ内にJavaScriptコードを記述し、特定の要素（ここでは<p>タグ）にテキストを表示しています。
2. 外部JavaScriptファイルを読み込む
外部ファイルにJavaScriptを記述し、それをHTMLファイルから読み込む方法もあります。この方法はコードの管理が容易で、再利用性も高まります。
- 外部ファイルの作成：以下のようにscript.jsというファイルを作成します。
- HTMLから読み込む：HTMLファイルで<script>タグを使用して外部ファイルを読み込みます。
この例では、script.jsファイルに書かれたJavaScriptコードが読み込まれ、実行されます。
JavaScriptの使用例
実際にJavaScriptをどのように使うかをいくつかの例を通じて見ていきましょう。
ユーザーの入力に応じた動作
JavaScriptを使ってユーザーが入力した内容を取得し、それに基づいて表示を変えることができます。
この例では、ユーザーが名前を入力してボタンをクリックすると、greetUser関数が呼び出され、名前と一緒に挨拶のメッセージが表示されます。
まとめ
JavaScriptは、Webページにインタラクティブな要素を追加するための強力なツールです。HTMLやCSSと組み合わせて使うことで、ユーザーの操作に反応する動的なコンテンツを簡単に実装することができます。初心者でも簡単に始められるので、ぜひ試してみてください。