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

JavaScript
スポンサーリンク

流れ

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

  1. JavaScriptとは
  2. JavaScriptの使い方
  3. JavaScriptの作成と実行

JavaScriptとは

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

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

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

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

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

JavaScriptの使い方

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

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

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!とアラートが表示されれば成功です。

今回<script>タグで囲んでいるこのalert()はコロンで囲んだ文字列を画面上に表示する構文です。

alert('Hello World!');

まとめ

今回のまとめを書きます。

  1. JavaScriptとは
    ブラウザで動作するプログラミング言語
  2. JavaScriptの使い方
    使い方は2パターンある
    ・HTMLファイルに書き込む
    ・JavaScriptファイルを別に作成し読み込む
  3. JavaScriptの作成と実行
    作成と実行はHTMLのときと同じである

スポンサーリンク
JavaScript プログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人3年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました