[プログラム学習] JavaScript #1 「HelloWorld編」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

HelloWorldとは、その言語の開発環境を構築し、実行環境での表示を目的とする事で、どの言語でも、はじめの一歩となる基本的な作業になります。

「HelloWorld」という言葉自体には、あまり意味がなく、電話の「もしもし」と同じぐらいの間隔だと考えてください。

JavaScriptにおける「HelloWorld」の実現

JavaScriptは、サーバーサイドとブラウザがありますが、今回は一般的なブラウザを対象にします。(サーバーサイドは別言語として行います)

概要の確認

環境

JavaScriptの実行環境は以下のように複数の種類があるので、全ての環境で行います。

  1. HTMLソースに直接記述して実行
  2. 外部ファイルで実行
  3. ブラウザのデバッグコンソールで実行

今回のブラウザはchrome、OSはMacを使用しますが、他のブラウザ、OSを使用する場合は、デバッグコンソールなどの使い方が少し違うので、ググッて行なってください。

実行方法

JavaScriptにおける表示については、以下の種類があるので、環境と実行をマトリクスで行います。

  1. アラートダイアログに表示
  2. WEBページに表示
  3. デバッグコンソールに表示

事前準備(環境構築)

今回の基本形としてHTMLソースファイルとして以下を用意しました。

sample.html

スクリーンショット 2015-10-24 9.05.06

サンプル1.アラートダイアログに表示

HTMLソースに直接記述して実行

sample.htmlのheadタグ内に以下を記述

ページを読み込むと以下のアラートが表示されれば完了です。

スクリーンショット 2015-10-24 9.05.42

HTMLソースに直接記述して実行

sample.htmlのheadタグ内に以下のscriptタグを追加

sample.jsファイルを作って以下を記述

スクリーンショット 2015-10-24 9.08.35

ページを読み込むと先ほどと同じようにアラートダイアログが表示されれば完了です。

スクリーンショット 2015-10-24 9.09.09

デバッグコンソールに表示

まず最初にデバッグコンソールを表示します。

Macの場合は「Option」+「Command」+「j」
Winの場合は「F12」
を押すと、以下の様なウィンドウが表示されるので、「Console」タグをクリックしてください。

スクリーンショット 2015-10-24 9.12.23

一番下のカーソルが点滅している箇所に下記のコマンドを記入して「Enter」キーを押すと、JavaScriptが実行されます。

スクリーンショット 2015-10-24 9.14.10

ダイアログが表示されれば、完了です。

何故複数の環境があるのか?

JavaScriptは、もともと静的なHTMLのファイルを動的にするためにプログラムする為に作られた言語で、HTMLの柔軟なタグ構成やファイル構成に適用できるように設計されています。
最近では、JavaScriptなしでは、Webページが効果的に見せられないぐらいに、なくてはならない言語になっているため、ブラウザの開発元でも、デバッグコンソールなどの機能を搭載しているようです。
ほぼ全てのブラウザにコンソールは搭載されているので、全てのブラウザで使い慣れておくとデバッグなどの作業が効率的に行えると思います。

とりあえず、今回行なった3つの環境を理解できていれば、あとはプログラムに応じてどれが効率的かを考えればいいですね。

※デバッグコンソールは、本番環境では行えないので、デバッグまたは、プログラムの簡易テストとして使うという認識で使用してください。

2 comments

  • こういった記事とても助かります!
    これだけ見るとすごいカンタンそうですねw
    とにかく動かしてみます!

    • 初心者の人が分かりやすいという記事をしばらく書いてみることにしました。
      最近こういうニーズが多いので・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です