【JavaScript入門】JavaScriptの使い方と実行方法

流れ
JavaScriptとは
JavaScriptの使い方
1. HTMLファイルに書き込む
2. JavaScriptファイルを別に作成し読み込む
JavaScriptの作成と実行
まとめ

流れ

今回は以下の流れで進めていきます。

JavaScriptとは
JavaScriptの使い方
JavaScriptの作成と実行

JavaScriptとは

主にブラウザ上で動作するプログラミング言語です。ブラウザでWebページを開いたときに実行され、画面上に「動き」を加えることができます。

例えばクリックで文章の色が変わったり、送信ボタンのクリックで送信確認ダイアログが表示されたり、入力にエラーがある場合にエラーがありますと表示したりできます。

主にHTMLと一緒に使い、HTMLで作成した画面に動きを持たせるのに使います。

最近のWebページはアップルのサイトなど動きを付けることが当たり前となってきているので、JavaScriptはWebサイトを作成するには必須となってきています。

なお、Javaと付きますがJava言語とは全く異なる言語です。

JavaScriptの使い方

まず前提として開発環境の用意と、HTMLの基本的な書き方・実行方法を以下の記事を参考にしてください。

JavaScriptの書き方は２パターンあります。

HTMLファイルに書き込む

1つ目はHTMLファイルに書き込む方法です。

以下のようなHTMLファイルを作成したとします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
  </head>
  <body>
    こんにちは
  </body>
</html>

このファイルに直接JavaScriptを書くと以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <script>
      //ここにJavaScriptを書く
    </script>
  </head>
  <body>
    こんにちは
  </body>
</html>

このように<script>タグで囲むとJavaScriptを書けるようになります。<script>タグは<head>タグの中に書きます。

JavaScriptファイルを別に作成し読み込む

2つ目はJavaScriptファイルを作成し、HTMLファイルで読み込みます。この場合は<src>タグを使用して読み込みます。

例えばsample.htmlが保存してあるフォルダと同じところにsample.jsを作成し保存します。その場合の読み込み方法は以下になります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <script type="text/javascript" src="sample.js"></script>
  <head>
  <body>
    こんにちは
  </body>
</html>

JavaScriptの作成と実行

では実際にJavaScriptを書きます。JavaScriptの書き方は1つ目のHTMLファイルに書き込む方法を使います。

以下のコードでsample.htmlを作成してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <script>
      alert('Hello World!');
    </script>
  </head>
  <body>
  </body>
</html>

sample.htmlを作成したらブラウザで開きます。

Hello World!とアラートが表示されれば成功です。