キアズマブログ

ループ文・do...whileとは 

whileループにて、もし1回目のループで条件がfalseならば、波カッコの中の文は一度も実行されない。ループの中でコードを最低でも一度は実行させたい場合は、doループを使うのがベスト。

条件の評価はfalseだが、アラート・メッセージが一度だけ表示される例 サンプル

var count = 1;
var word = "繰り返される諸行無常";
do {
  alert (word+count);
  count++;
} while (count < 1)

なぜならdoループは、条件の評価が波カッコより後で行われるので、1回は実行されるのである。

ループ文・whileとは 

if文は繰り返されるタスクに使えないこと。波カッコ({ })のコードのブロックは一度しか実行されない。同じコードを何回も実行させたければ、ループ文を使う必要がある。

ループ文の中のコードは、実行が満たされている限り、継続して実行され、条件がtrueでなくなった時、ループが止まる。

whileループはif文に似ていて、シンタックスが同じ。

while (条件) {
  文(複数可);
}

唯一の違いは、波カッコの中のコードの条件がwhileである限り、繰り返し実行されること。

whileループの例 サンプル

var count = 1;
var word = "繰り返される諸行無常";
while (count < 11) {
  alert (word+count+"/10");
  count++;
}

論理演算子とは 

条件文の中で演算を組み合わせることができる。

例題

変数numが5と10の間の値かどうかを調べる。

作業の手順は以下。

  1. numが5以上かどうかを調べる
  2. numが10以下かどうかを調べる

このような演算をオペランド(operand)という。

参考

オペランドとは 【operand】 - 意味・解説 : IT用語辞典

コンピュータプログラミングにおいて、演算の対象となる値や変数のこと。

論理演算子は真偽値を対象として機能する。各オペランドはtrueかfalseのどちらかの真偽値を返す。

and演算子(&&)

  • オペランドが両方ともtrueの場合にのみtrue

or演算子(||)

  • オペランドの一方がtrueの場合にのみtrue
  • オペランドの両方がtrueの場合もtrue
  • オペランドの両方がfalseの場合にのみfalse

2個のアンバサンド(&&)で表されるand演算子の例 サンプル

変数numが5と10の間の値かどうかを調べる。

var num = 5;
alert(num);
if (num>=5 && num<=10) {
  alert("numは5以上10以下");
} else {
  alert("numは5以上10以下ではない");
}

2個のパイプ(||)で表されるand演算子の例 サンプル

変数numが10より大きいか、あるいは、5より小さいかを調べる。

var num = 4
alert(num);
if (num > 10 || num < 5){
  alert("numは10より大きいか、あるいは、5より小さい");
} else {
  alert("この数値は適切な範囲に入らない");
}

not演算子

1個のオペランドを対象にし、そのオペランドが返す真偽値を逆転させる。もしオペランドがtrueなら、not演算子はそれをfalseに変える。

not演算子の例 サンプル

if ( !(1>2) ) {
  alert("世界は大丈夫");
}

比較演算子とは 

条件文で使用する演算子。

  • より大(>)
  • より小(<)
  • 以上(>=)
  • 以下(<=)
  • 等しい(==)※等価演算子
  • 等しくない(!=)※不等価演算子
  • 厳密に型も含めて比較して等しい(===)※厳密等価演算子
  • 厳密に型も含めて比較して等しくない(!==)※厳密不等価演算子

参考

JavaScript 演算子一覧

サンプル

var my_mood= "うれしい";
var your_mood= "かなしい";
if (my_mood == your_mood) {
  alert("同じ気持ち");
} else {
  alert("違う気持ち");
}

条件文とは 

与えられた判断基準に基づいて決定を下すこと。

もっとも一般的な条件文はif文。

if (条件){
  文(複数可);
}

サンプル

if (1 > 2){
  alert("世界が狂った");
} else {
  alert("世界は大丈夫");
}

演算とは 

演算とはデータの計算と操作のこと。

四則演算のような算術演算には必ず演算子が必要。

演算子は演算を実行するためにJavaScriptが予約した記号。

  • 代入のための演算子は等号(=)
  • 足し算のための演算子はプラス記号(+)
  • 引き算のための演算子はマイナス記号(-)
  • 割り算のための演算子はスラッシュ(/)
  • かけ算のための演算子はアスタリスク(*)

変数の演算も可能。

fahrenheit(華氏)からcelsius(摂氏)を計算 サンプル

var temp_fahrenheit = 95;
var temp_celsius = (temp_fahrenheit - 32) / 1.8;
alert(temp_celsius);

celsius(摂氏)からfahrenheit(華氏)を計算 サンプル

var temp_celsius = 35;
var temp_fahrenheit = (temp_celsius * 1.8) + 32;
alert(temp_fahrenheit);

演算のショートカットもある。

ショートカットを使わない例 サンプル

var year = 2007;
alert(year);
year = year + 1;
alert(year);
year = year - 1;
alert(year);

上記の例は、1を足す演算子(++演算子)と1を減らす演算子(--)を使って、同じ結果を得ることができる。

ショートカットを使う例 サンプル

var year = 2007;
alert(year);
year++;
alert(year);
year--;
alert(year);

+演算子は文字列を連結(concatenation)することができる。変数にも有効。数字と文字列を連結することすら可能。

数字と文字列を連結する例 サンプル

var mood = "happy";
var year = 2007;
var message = mood + year;
alert(message);

文字列と数値を連結すると、その結果は長い文字列になるのに対し、2つの数値に同じ演算子を使うと、2つの数値が算術演算された結果になるのに注意。

文字列と数値を連結した例 サンプル

alert("10" + 20);

2つの数値に同じ演算子を使った例 サンプル

alert(10 + 20);

別の便利なショートカットとして、足し算と代入(あるいは連結と代入)を同時に行う+=がある。

演算子+=の例 サンプル

var year = 2008;
var message = "今年は、";
message += year;
alert(message);

連想配列とは 

配列には別の配列を入れることができる。 サンプル

var lennon = Array("ジョン",1940,false);
var beatles = Array();
beatles[0] = lennon;
alert(lennon);
alert(beatles[0][0]);
alert(beatles[0][1]);
alert(beatles[0][2]);

この方法で、配列beatlesの最初の要素の値は、それ自体が配列となった。配列の各要素の値を取り出すには、ブラケットを追加する。beatles[0][0]の値は"ジョン"である。しかし配列beatlesから値を取り出すには、インデックス番号を覚える必要があり、非効率である。

beatlesという配列は、数値添字配列(numeric array)の一例。各要素のインデックスは数値で、配列に要素が追加されるごとにその値が増大する。

最初のインデックスは0、2番目の要素のインデックスは1、以下同様。

配列の値を指定するのみでは、その配列は数値添字配列になり、各要素のインデックスが自動的に作成され更新される。

このような振る舞いは、各要素のインデックスを指定することで、変更させることができる。

インデックスの指定に使えるのは、数値に限らない。文字列をインデックスに使うことも可能。

これを連想配列(associative array)という。 サンプル

var lennon = Array();
lennon["name"] = "ジョン";
lennon["year"] = 1940;
lennon["living"] = false;
alert(lennon["name"]);
alert(lennon["year"]);
alert(lennon["living"]);
for (var i in lennon) {
  alert(lennon[i]);
}

for~inについて参考

JavaScript の配列と連想配列の違い - IT戦記

すべての配列は連想配列になる。数字添字配列のインデックスはたまたま自動的に作られるに過ぎない。それぞれのインデックスは特定の値と結びついているので、数字添字配列もほんとうは連想配列の一例に過ぎない。

連想配列を使うと、名前で要素を参照できる。スクリプトを読みやすくするのに役立つ。

連想配列を用いて、配列に別の配列を入れた例 サンプル

var mukai = Array();
mukai["name"] = "向井秀徳";
mukai["year"] = 1973;

var yoshikane = Array();
yoshikane ["name"] = "カシオマン";
yoshikane ["year"] = 1974;

var matsushita = Array();
matsushita ["name"] = "柔道二段";
matsushita ["year"] = 1969;

var yoshida = Array();
yoshida ["name"] = "吉田一郎";
yoshida ["year"] = 1982;

var zazenboys = Array();
zazenboys["vocalist"] = mukai;
zazenboys["guitar"] = yoshikane;
zazenboys["drums"] = matsushita;
zazenboys["bass"] = yoshida;

for (var i in zazenboys) {
  alert(zazenboys[i]["name"]);
}

for (var i in zazenboys) {
  alert(zazenboys[i]["year"]);
}

配列とは 

変数がスカラーである場合、その変数には一度に1つの値しか持つことができない。

変数に値のセットを入れるには、配列が必要になる。

配列というのは、複数の値を1つの名前でグループ化すること。それらの値の1つずつが、その配列の要素になる。

JavaScriptでは、Arrayというキーワードを使って配列を宣言する。

また配列に格納したい要素の数も指定できる。この数のことを配列の長さ(length)という。

var beatles = Array(4);

要素の数は必須ではないので、要素の数を指定せずに配列を宣言することができる。

var beatles = Array();

配列に要素を追加することをポピュレイティング(populating)という。配列に要素を追加する場合は、その要素の値を指定するだけでなく、その要素が配列のどこに入るかも指定する。

要素が配列のどこに入るかは、要素のインデックスで示す。要素はそれぞれ、対応するインデックスを持っている。インデックスはブラケット([ ])の中に格納される。

配列[インデックス] = 要素;

配列beatlesのジョージにアクセス・その1(配列のインデックス番号は0から始まる) サンプル

var beatles = Array(4);
beatles[0] = "ジョン";
beatles[1] = "ポール";
beatles[2] = "ジョージ";
beatles[3] = "リンゴ";
alert(beatles[2]);

この例は、配列に要素を追加する方法としては、回りくどいやり方。配列と同時に要素を追加する近道もある。宣言の中で要素を追加する場合は、値をコンマで区切る。

配列beatlesのジョージにアクセス・その2 サンプル

var beatles = Array("ジョン","ポール","ジョージ","リンゴ");
alert(beatles[2]);

配列であることを指摘せずに済ませる方法すらある。ブラケットを使って初期値をグループ化する。

配列beatlesのジョージにアクセス・その3 サンプル

var beatles = ["ジョン","ポール","ジョージ","リンゴ"];
alert(beatles[2]);

しかし、配列の宣言と要素の追加をする場合には、Arrayキーワードを使う習慣をつけるのが良い。スクリプトが読みやすくなるから。

配列の要素は文字列に限らない。真偽値を配列に入れることも可能。

一連の数値を格納するために配列を使うこともできる。 サンプル

var years = Array(1940,1941,1942,1943);
alert(years);

3種のデータ型を混在させることも可能。 サンプル

var lennon = Array("ジョン",1940,false);
alert(lennon);

変数も要素になることができる。 サンプル

var beatles= Array();
var name = "ジョン";
beatles[0] = name;
alert(beatles);

ある配列の要素が別の配列の要素になることもできる。値"ポール"を配列beatlesの2番目の要素に代入している。 サンプル

var beatles= Array(4);
var name= Array("リンゴ","ジョン","ジョージ","ポール");
beatles[1] = name[3];
alert(name);
alert(beatles[1]);

スカラーとは 

ベクトルが方向と大きさを持つ量であるのに対して、スカラーは大きさだけを持つ量。

参考

スカラー - Wikipedia

例えば物体が空間内を運動するときの速度が大きさと方向を含むベクトルであるのに対し、その絶対値(大きさ)である速さは方向を持たないスカラーである。

ベクトル量の例

力、電界、運動量

スカラー量の例

時間、質量、長さ、エネルギー、電荷、温度

真偽値とは 

真偽値には、true(真)とfalse(偽)の2つの値しかない。

真偽値とはすべてのコンピュータプログラミングの中心的な存在。根本的なレベルでは、すべての電子回路は真偽値しか使わない。電流が流れているか、そうでないか。

真偽値は文字列と違って、引用符号で囲まない。

真の例 サンプル

var sleeping = true;

偽の例 サンプル

var sleeping = false;

数値とは 

変数に数値を入れる場合、JavaScriptでは、整数だけでなく小数点を含む浮動小数点数(コンピュータにおける実数の近似値の表現方式)を使うことができる。

var age = 33.25;

負の数値を使うことも可能。数字の先頭のマイナス記号は、その数が負の数値であることを示す。

var age = -20;

負の数値も整数以外に浮動小数点数が使える。

浮動小数点数の 例 サンプル

var age = -20.3333333333;

これらはすべて、数値データ型の例。

参考

浮動小数点数 - Wikipedia

文字列とは 

文字列は0個以上の文字列からできている。

文字には、通常の文字だけでなく、数字と区切り記号とスペースも含まれる。

文字列は引用符号で囲む必要がある。引用符号はシングルクォート(')とダブルクォート(")のどちらも使える。次の2つの文章は同じ結果になる。

var mood = 'ゴキゲン';
var mood = "ゴキゲン";

文字列の中にシングルクォートが含まれる場合はダブルクォートで囲み、文字列の中にダブルクォートが含まれる場合はシングルクォート囲む。

var mood = "don't ask";

エスケープ処理(escaping)で書く方法もある。JavaScriptではエスケープ処理は\(バックスラッシュ、日本語では半角の¥)を使って行う。

var mood = 'don\'t ask';

シングルクォートとダブルクォートのどちらを使うにしろ、どちらか一方に決めておく方がよい。コードが読みにくくなるから。

ダブルクォート混在の例 サンプル

var height = "about 5'10\" tall";
alert(height);

データ型とは 

var mood;
var age;
mood= "ゴキゲン";
age = 10;

変数moodの値は文字リテラルだが、変数ageの値は数字リテラル。これらは異なるデータ型。

他の言語では、変数を宣言する時にデータ型の宣言(型付け:typing)も必要になることがあるが、JavaScriptでは宣言や代入の仕方に違いはない。

明確な型付けを必要とする言語は、強く型付けされた言語(strongly typed language)という。

JavaScriptは、弱く型付けされた言語(weakly typed language)である。このことは、変数のデータ型をどの段階ででも変更できることを意味する。

リテラルとは 

var my_mood = "ゴキゲン";

この例文中の"ゴキゲン"という文字列は、リテラルの一例である。

リテラルとはJavaScriptのコードの中に文字どおりに書き記されたもののこと。(プログラムのソースコード中に使用される定数のこと)。

"var"はキーワード(予約語)。"my_mood "は変数の名前。

"ゴキゲン"という文字列はそれ以外の何かを表してはいない。まさに文字どおり。

参考

リテラルとは 【literal】 - 意味・解説 : IT用語辞典

変数の名前で使える文字 

変数の名前では、大文字と小文字は別のものとして扱われる。

たとえば、変数moodと変数Moodは異なる変数として扱われる。

JavaScriptのシンタックスでは、変数名にスペースと区切り記号をいれることは禁止されている。($は例外)。

変数名には、文字、数字、ドル記号($)とアンダーバー(_)を含めることができる。

var my_mood = "ゴキゲン";

変数とは 

名前や誕生日は固定している。一方、気分や年齢は時間ともに変化する。変化する性質があるものを、変数という。

変数に値を与えることを代入(assignment)と呼ぶ。

変数に値が代入されると、その変数はその値を持つ(contain)という。

多くのプログラミング言語は、どんな変数でもまず最初にvarを使ってそれが変数であることを宣言(declare)する必要がある。

しかし、JavaScriptは、宣言されていない変数に値を代入すると、その変数は自動的に宣言されたことになる。

1)

mood= "ゴキゲン";
age = 10;

2)変数を宣言する方法 サンプル

var mood;
var age;
mood= "ゴキゲン";
age = 10;

は同じだが、良いプログラミングの作法としては、2)の変数を宣言する方法にする。

ちなみに3)~5)は、全て2)と同じ。

3)変数を一度に宣言する方法 サンプル

var mood, age;
mood= "ゴキゲン";
age = 10;

4)一度に済ます方法 サンプル

var mood = "ゴキゲン";
var age = 10;

5)変数の宣言と値の代入のもっとも効率的な方法 サンプル

var mood = "ゴキゲン", age = 10;

JavaScriptにおけるコメントの書き方 

一行コメントの書き方

// コメント:
// コメントの内容。コメントの内容。コメントの内容。

複数行コメントの書き方

/* コメント:
コメントの内容。コメントの内容。コメントの内容。 */

お勧めできない書き方

<!-- コメント:
<!-- コメントの内容。コメントの内容。コメントの内容。

APIとは 

API(Application Programming Interface)とは、本質的には、合意された取り決め。

現実世界でAPIに相当するものとして、モールス信号やタイムゾーン、元素周期表などがある。これらはすべて標準となっており、人々のコミュニケーションと共同作業を容易にする。

プログラミングの世界では、さまざまな言語が存在しているが、同様のタスクが多数あるために、APIが便利な存在になる。

使用する言語によってシンタックスが異なっても、取り決め自体は変化しないため、標準さえ知っていれば、多くの異なる環境でそれを適用できる。標準化されたDOMもAPIの一種。

参考

Application Programming Interface - Wikipedia

API(アプリケーション・プログラミング・インタフェース、Application Programming Interface)とは、アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口となるものである。主に、ファイル制御、ウインドウ制御、画像処理、文字制御などのための関数として提供されることが多い。

DOMとは 

DOM(Document Object Model)とはドキュメントのコンテンツを概念化する方法の1つ。

また、アプリケーション・プログラミング・インターフェース(API)の一種。

Jeremy Keith氏がWorld Object Modelと呼ぶものを、現実世界で我々は共有している。

我々は、環境の中にあるオブジェクトを「車」、「家」、「木」という用語で指し示す。それら用語はほぼ確実に他人によって理解される。その理由は、ある言葉が具体的に指し示すオブジェクトに関して、われわれ相互に合意が存在しているから。

World Object Modelは物理的なオブジェクトに限定されるものではなく、抽象的な概念にも適用される。たとえば、人に道を教える場合に「左側の三番目の家」と言うことができる。

抽象概念の世界モデルに関する合意が人々の間に成立しているので、非常に短い描写でも豊富な意味を持つことができる。

Webページに関しても同じ。

NetscapeとMicrosoftとのブラウザ戦争の果てに、Web標準が登場。DOMはブラウザ・メーカーがW3Cに協力し、1998年10月にDOMレベル1が完成した。

W3Cは、いかなるマークアップ言語でかかれた、いかなるドキュメントに対する、いかなるプログラミング言語による操作も使うことができるモデルを提案した。

DOMの知識は、PHPやPythonなどのプログラミング言語を使ってXMLドキュメントを解析する必要が生じた場合にも、役に立つ。

W3CはDOMを次のように定義している。

プログラムとスクリプトによるドキュメントのコンテンツと構造とスタイルへの、動的なアクセスと更新を可能にする、プラットフォームおよび言語的に中立なインタフェース

ステートメントとは 

JavaScriptで書かれたスクリプトは、他のどの言語でも同じだが、一連の指示でできている。このような指示をステートメントと呼ぶ。

ステートメントとは1つ以上の式やキーワード、演算子などから成り立つ。

最初の文;
次の文;

と行末に ; を配置する。

参考

JavaScript主要ステートメント

JavaScriptの基礎

シンタックスとは 

シンタックス(syntax)とはプログラミング言語の文法規則に含まれるルールのこと。

英語もインタプリタ型の言語。人が、英語で書かれた言葉を読んで処理することで、インタプリタの働きをする。英語の「文法規則」に従っている限り、その文章は正しくインタプリタで実行されるはず。

JavaScriptはJavaやC++のようなプログラム言語と似たシンタックスを持つ。

会話が成り立たない状態を「シンタックスエラー」と言えるかも......?

備考

XML用語事典 [シンタックス]

XML用語事典 [セマンティックス]

セマンティック・ウェブ - Wikipedia

インタプリタとは 

インタプリタ(interpreter)とは、プログラミング言語で書かれたソースコードを逐次解釈しながら実行するソフトウェアである。

プログラム言語は、インタプリタで実行されるか、コンパイルされるか、いずれかになる。

JavaScriptは、ブラウザがインタプリタとして実行する。ブラウザの中のJavaScriptインタプリタがソースからコードを実行する。

インタプリタが存在しなければ、JavaScriptのコードは実行されない。

インタプリタで実行される言語では、インタプリタがコードを実行する時まで、エラーは明らかにされない。

インタプリタで実行されることが一般的なプログラミング言語

  • AWK
  • BASIC
  • JavaScript
  • LISP
  • Shell
  • Perl
  • Prolog
  • Ruby
  • Python
  • PHP

参考

インタプリタ - Wikipedia