「JavaScript」とは、動的なWebページを作成する事のできるプログラミング言語です。通常はブラウザー上で実行されます。JavaScriptを使うと、ユーザーのアクションに応じたコンテンツの表示の他、ブラウザー上で表示される地図やグラフィックアニメーションなども表示する事ができます。
目次
1.1. JavaScriptの歴史
1.2. ブラウザーが翻訳する３つの言語
2.1. HTMLコンテンツの変更
2.2. HTMLコードの変更
2.3. CSSスタイルの変更
2.4. HTMLコンテンツを表示・非表示にする
3. 3. JavaScriptの文法を学習する前に覚えること！
1. JavaScriptの基本
1.1. JavaScriptの歴史
JavaScriptは開発当初、Webサイトに動きをつけるプログラミング言語です。1995年、Brendan Eich(https://brendaneich.com/) がNetscape社のエンジニアの頃に開発された言語です。
1996年の初めにNetscape2.0でリリースされました。現在では、「IE」や「Google Crome」、「Firefox」など様々なブラウザーにJavaScriptのエンジンが組み込まれています。
●『JavaScript』と『Java』の関係は？
「JavaScript」は開発当初「LiveScript」と呼ばれていましたが、その当時人気のあったプログラミング言語の「Java」にあやかって「JavaScript」という名前に変更されました。「JavaScript」と「Java」にいくつかの共通点はありますが、まったく別の言語です。
1.2. ブラウザーが翻訳する３つの言語
インターネットもしくはローカルPCでWebページを開いた時、ブラウザーは以下３つの言語(※１)を翻訳して、ページを表示させます。
※１ Web技術で用いられる言語は３つだけでなく、サーバーサイドで動くプログラミング言語などもありますが、主にクライアントPC側のブラウザーで実行される言語を確認してみましょう。
HTML・・単なるテキストや画像からなるページに「見出し」や「段落」といった構造と意味を持たせる言語です。
CSS・・HTMLに「文字や背景の色」や「余白」といったレイアウトやデザインを設定するための言語です。
JavaScript・・「メッセージボックスの表示」や「HTMLコンテンツの操作」、「カレンダー」、「地図」、「ゲーム」など、様々な動的コンテンツを作成できる言語です。
「JavaScript」は「HTML」や「CSS」が翻訳された後で実行されます。
2. JavaScriptでできること
「JavaScript」を使ってできる事は多岐にわたっています。開発当初のJavaScriptはクライアントサイドで実行され動的Webページを作成していましたが、現在ではサーバーサイドで動作する「Node.js」の他、Adobe Acrobat、Yahoo! ウィジェットエンジン、組み込みコンピューターなど様々な所で使われています。
本コラムでは、最も多く活用されている動的WebページでJavaScriptがどのように使われているかを見ていきましょう。JavaScriptのコードの詳細は後程学習するとして、まずはJavaScriptでどのような事ができるかサンプルで確認して下さい。
2.1. HTMLコンテンツの変更
JavaScriptを使うとWebページで表示するHTMLコンテンツを変更する事ができます。サンプルのボタンをクリックすると表示されているテキストが変わります。
[JavaScriptのサンプル]
ボタンをクリックするとテキストが変わります。
2.2. HTMLコードの変更
JavaScriptでHTMLコードそのものを変更する事ができます。
例えば、画像を指定する「img」タグの「src属性」の値を変更すると画像に動きをつける事ができます。
<img src="imageName.jpg">
[JavaScriptのサンプル]
ボタンをクリックすると花の色が変わります。
2.3. CSSスタイルの変更
CSSで指定する、文字の大きさや色なども変更する事ができます。ボタンをクリックするとテキストの色が変わります。
[JavaScriptのサンプル]
JavaScriptでHTML要素のスタイルを変更する事ができます。
2.4. HTMLコンテンツを表示・非表示にする
JavaScriptを使ってHTMLコンテンツを表示したり、非表示にしてみます。
[JavaScriptのサンプル]
JavaScriptでHTMLコンテンツを表示・非表示にする事ができます。
3. JavaScriptの文法を学習する前に覚える事
「JavaScript」の学習をすすめる上で、必要最低限覚えてほしいJavaScriptのルールについて少し説明しましょう。JavaScriptプログラムの基本中の基本ですが、プログラム初心者が陥りやすいコードの記述ミスでもあるのでしっかりと確認しておいて下さい。
3.1. 半角英数字、大文字・小文字
●半角英数字・記号
「JavaScript」のコードを記述する際には半角英数字と中カッコ「{ }」小カッコ「( )」など一部の記号を使います。
また変数名や関数名を定義する場合には、同じく半角英数字に加えて、アンダーバー「 _ 」やドルマーク「$」などの記号を使う事が可能です。但し、「1文字目に数字を使う事」や"boolean"、"TRUE"などJavaScriptの「予約語を使う事」はできません。
●大文字・小文字の区別
「JavaScript」は大文字・小文字を区別します。例えば、警告メッセージを表示する「alert」メソッド
alert("Hello!!");
を
Alert("Hello!!");
と記述するとエラーになります。
3.2. 改行を入れる時の注意事項
「Jascript」のソースコードが長くなる時に改行を入れる場合、適切な場所で改行を入れないとエラーになる場合があります。
通常JavaScriptを記述する場合、単語やカッコなどの区切りで改行を入れても問題なく実行されます。
alert
("Hello, world!");
↑ 実行可能！
しかし、単語を途中で改行したり、文字列の途中で改行を入れるとエラーになりますので、コードを改行する際には気をつけましょう。
alert("Hello,
world!");
↑ 実行時エラー
3.3. セミコロン
JavaScriptでは、処理の最後にセミコロン「;」をつけます。１つの命令を１行で記述する場合には、セミコロンはいらないのですが、バグの原因にもなりますので「セミコロン」をつける事を習慣づけておいた方がよいでしょう。
var str1 = "Hello!"
alert(str1)
↑ どちらも実行可能 ↓
var str1 = "Hello!";
alert(str1);
4. Javasciptの開発環境
開発環境を整えるのが面倒な言語もありますが、「JavaScript」の開発環境はとてもシンプルです。準備するのは
「ブラウザー」
と
「テキストエディター」
のみでOKです。テキストファイルにコード記述したら結果をブラウザーですぐに確認できるので、プログラム初心者でも気軽に学習する事ができます。
