JavaScript

学習メモ

マンガで分かる JavaScriptプログラミング講座
http://crocro.com/write/manga_javascript/wiki.cgi

第3話:書いてみよう

『<script>』タグ

『<script>~</script>』は、この範囲がプログラムという意味です。

<script type="text/javascript">
<!--
alert("test");
// -->
</script>

『コメントアウト』

書き方は以下の2種類です。

  • 行の途中に『//』と書く 『//』の右側が無視される。
  • 本文中に『/*~*/』と書く 『~』の部分が無視される。

第4話:数値変数と計算

変数の宣言

『var a = 3;』は
『[変数][a]は、[3]です([終わり])』 という意味になる

var 『これから変数を書く』という宣言
a   『変数の名前』
=   『左部分の中身は、右部分です』という記号
3   数字の3
;    この式は終わり、以降は次の式ですという記号

これが『var a = 3;』の 意味になる

Mathオブジェクトのメソッド

Math.ceil(n)	小数点以下を繰り上げ	a = Math.ceil(1.55);	変数『a』に『2』を代入
Math.floor(n)	小数点以下を繰り下げ	a = Math.floor(1.55);	変数『a』に『1』を代入
Math.round(n)	小数点以下を四捨五入	a = Math.round(1.55);	変数『a』に『2』を代入

(参考)
http://www.tohoho-web.com/js/operator.htm
http://www.tohoho-web.com/js/math.htm
http://memopad.bitter.jp/w3c/jsref/jsref_obj_math.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math

第5話:文字列変数と様々な出力

『alert』以外の 『文字列』 の表示方法

// Webページに文字列を表示
document.write("文字列1");

改行文字についての補足

  • Windowsでは、普通のテキストファイルの改行は『\r\n』と2つの文字で表されています。
  • Unix系のOSでは、テキストファイルの改行は『\n』と1文字になっています。
  • 『\r』は『キャリッジリターン』(carriage return)で、『復帰』という意味です。
  • 『\n』は『ニューライン』(newline)で、『改行』という意味です。

Stringオブジェクトのメソッド

.length	文字列の長さ	a = "ABCDEF".length;	変数『a』に『6』が入る

(参考)
http://www.tohoho-web.com/js/string.htm
http://memopad.bitter.jp/w3c/jsref/jsref_obj_string.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String

第6話:真と偽 条件分岐と演算子

『if』文

『条件分岐』を行うための『if』文は、以下のように書きます。

if (/* 条件式 */) {
    // Aの処理
} else {
    // Bの処理
}

『switch』文

条件分岐式には、『if』以外に、『switch』もあります。

var tensuu = 3;
switch (tensuu) {
   case 1:
       // 変数『tensuu』の数値が『1』の場合
       alert("成績1番 おめでとう!");
       break;    // 処理終了
   case 2:
       // 変数『tensuu』の数値が『2』の場合
       alert("成績2番 銀メダル!");
       break;    // 処理終了
   case 3:
       // 変数『tensuu』の数値が『3』の場合
       alert("成績3番 銅メダル!");
       break;    // 処理終了
   default:
       // 変数『tensuu』の数値が『その他』の場合
       alert("もっと頑張りましょう");
       break;    // 処理終了
}

第7話:ループ処理

『for』文

for (var i = 1; i <= 1000; i ++) {
   document.writeln(i + "回目:桑立");
}

→ カウンターの「i」を「var i = 1;」で宣言して、用意している。

ループ処理内での特殊な動作

ループ処理に慣れてくると、ある処理を無視したり、途中で終了したりといった、特殊な動作をしたくなってきます。
そういった時に使うのが、『break』『continue』『ラベル』といった命令です。

『break』

『break』は、ループ処理を終了します。

for (var i = 0; i < 10; i ++) {
   if (i == 7) {
       // 変数『i』が『7』ならループを抜ける
       document.write(i + "finish!<br>");
       break;
   }
   document.write(i + "<br>");
}

『continue』

『continue』は、ループ処理をスキップして、『for (~)』の行に戻ります。

for (var i = 0; i < 10; i ++) {    // *1
   if (i == 7) {
       // 変数『i』が『7』なら、
       // 『*2』以下を処理せず『*1』に戻る。
       document.write("skip!<br>");
       continue;
   }
   // *2
   document.write(i + "<br>");
}

『ラベル』

『ラベル』は、少し複雑です。『ラベル』は、『break』や『continue』と組み合わせて使います。
『for』文が入れ子になっている場合、『break』や『continue』は、内側の『for』文に対して働きます。

// 『*1』の『for』文に
// 『outer』という『ラベル』を付ける
outer:
for (var i = 0; i < 10; i ++) {    // *1
   for (var j = 0; j < 10; j ++) {    // *2
       if (j == 7) {
           // 変数『j』が『7』なら
           // 『outer』という『ラベル』が付いた
           // 『*1』のループを抜ける
           document.write(i + "-" + j + "finish!<br>");
           break outer;
       }
       document.write(i + "-" + j + ", ");
   }
}

『outer』という『ラベル』で指定した『for』文を『break』の対象として、外側の『for』文を一気に抜けています。
そのために、内部の『for』文であるにも関わらず、『finish!』と出力した時点で処理が終了しています。

さて、この『ラベル』ですが、『ラベル』の末尾は『;』(セミコロン)ではなく『:』(コロン)なので、注意してください。
慣れない内は、よく間違えます。

→「ラベル」ってのは便利だな! 複雑な制御が必要なときに、ラベルが使える?

『while』『do while』

『for』以外に、『while』『do while』という『ループ文』もあります。
これらの『ループ文』は、『for』文から『変数の初期化』と『変数の増減』を省略したような形をしています。

var i = 0;
while (i < 10) {
   document.write(i + ",");
   i ++;
}
var i = 0;
do {
   document.write(i + ",");
   i ++;
} while (i < 10);

→ 無限ループに注意! 終了条件を間違えないこと。

第8話:配列

『配列』の様々な作り方

『配列』は、以下のようにして作れます。

  • new演算子
    var nameArray = new Array(3);
    nameArray[0] = "足立";
    nameArray[1] = "安藤";
    nameArray[2] = "内木";
    →配列に、「キー」と「値」を1個ずつセットしていく方法。
  • コンストラクター
    var nameArray = new Array("足立","安藤","内木");
    →new演算子でオブジェクトを作るときに、コンストラクターに初期値を与えて、配列を作る方法。
  • リスト
    var nameArray = ["足立","安藤","内木"];
    →配列のリテラル[ ]に初期値をセットして、リスト(配列)を作る方法。
  • 文字列の分割
    var name = "足立,安藤,内木";
    var nameArray = name.split(",");    // 『,』で分割して配列に
    →Stringオブジェクトのsplit()メソッドで、リスト(配列)を作る方法。

『連想配列』(ハッシュ)の作り方

『連想配列』(ハッシュ)は、以下のようにして作ります。
→連想配列=キー(要素を参照するためのポインター)に数字ではなく、文字列を使った配列。

  • new演算子
    var tensuuHash = new Array();
    tensuuHash["足立"] = 65;
    tensuuHash["安藤"] = 78;
    tensuuHash["内木"] = 87;
  • 連想配列のリテラル
    var tensuuHash = {"足立" : 65 ,"安藤" : 78 ,"内木" : 87};
    →連想配列のリテラル{キー:値, …}に初期値をセットして、連想配列を作る方法。

Arrayオブジェクトのメソッド

var a = ["aa","bb"];

.length	配列の要素の個数	x = a.length;	変数『x』に『2』が入る

(参考)
http://www.tohoho-web.com/js/array.htm
http://memopad.bitter.jp/w3c/jsref/jsref_obj_array.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

第9話:連想配列のループ処理

『連想配列』は、『.length』で要素の数を知ることはできません。
また、数字の添え字を使って要素にアクセスすることもできません。
『連想配列』の各要素をループ処理で利用する際には、『for』文ではなく、『for in』文を利用します。

『for in』文

『for in』文では、『for (~)』の括弧内の書き方が『for』文とは異なります。

  • 以下は、『for』文です。
    for (変数の初期化; 継続条件; 変数の増減) {
       // ループ処理(何度も実行する処理)
    }
  • 以下は、『for in』文です。
    for (キーを取得する変数 in 連想配列の変数) {
       // ループ処理(何度も実行する処理)
    }

『for in』文では、『for (~)』の括弧内で、『連想配列の変数』と、その要素の『キー』を取得する変数を書きます。
この『キー』を取得する変数には、ループが1回行われるごとに、『キー』が1つずつ代入されていきます。
ループ処理の中では、この『キー』を利用して、連想配列の各要素の値を取得します。
そして、全ての『キー』を処理し終えたあとに、ループを抜けます。

第10話:関数

『関数』は、何度も行う処理を、一度だけ書いて済ませるプログラムの書き方です。
この方法を使えば、プログラムをいくつかの部品に分けて、組み立てるようにしてプログラムを書くことができます。

『関数』の基本

『関数』は、以下の方法で作れます。

function 関数名(引数) {
   内部処理
   return 戻り値;
}

『関数』の利用

作成した『関数』は、以下のように利用できます。

var kekka = han(16);

『再帰関数』

『再帰関数』とは、『関数』から『それ自身を呼び出す』関数のことです。

// 再帰関数を呼び出し
saiki(0, 12);

// 再帰関数
function saiki(no, max) {
   // 『no』(再帰回数)を引数1として取得
   // 『max』(終了条件の値)を引数2として取得

   // 終了条件を満たせば終了
   if (no >= max) return;

   // グラフの作成
   var str = "";
   for (var i = 0; i < no; i ++) {
       for (var j = 0; j <= i; j ++) {
           str += "+";
       }
   }
   document.write(str + no + "<br>");

   // 再び自分自身を呼び出す
   saiki(no + 1, max);
}

第11話:変数のスコープ

「スコープ」(scope)=変数が有効な「範囲」のこと。

JavaScriptのプログラムでは、『関数』の内側の領域は、外側の領域とは違う空間になっています。
『関数』の外側の通常の場所を『グローバル』と呼び、『関数』の内側になる場所を『ローカル』と呼びます。
『グローバル』で宣言された変数を『グローバル変数』、『ローカル』で宣言された変数を『ローカル変数』と呼びます。

【グローバルな領域】
var globalVar = 1;    // グローバル変数

function kansuu() {
   【ローカルな領域】
   var loclalVar = 0;    // ローカル変数
}
【グローバルな領域】
var globalVar2 = 2;    // グローバル変数

(参考)
スコープ - Wikipedia

プログラミングでのスコープとは、ある変数や関数が特定の名前で参照される範囲のこと。

第12話:型、オブジェクト、クラス

『型』

変数の種類のことを『型』と言います。
変数の『型』は、『typeof』関数を使って調べることができます。

var no = 0;            // 『数値変数』を初期化
var str = "文字列";    // 『文字列変数』を初期化

// 『typeof』関数で、変数の『型』を調べる
alert(typeof(no));     // 『number』(数)と表示
alert(typeof(str));    // 『string』(文字)と表示

『オブジェクト』

『オブジェクト』型の変数は、内部に変数や関数を保持している変数です。
『オブジェクト』型変数内の変数や関数は、『オブジェクト.変数名』『オブジェクト.関数名()』として利用することができます。

object.variable;    // 『オブジェクト』型変数内の変数を利用
object.function();  // 『オブジェクト』型変数内の関数を利用

fig_1.gif

→クラスベースか、プロトタイプベースか、とかの仕組みの話を持ち出さない間は、JavaScriptのオブジェクトも、他のプログラム言語と同じなんだよなー。

  • プロパティー → オブジェクト内の変数(データ)
  • メソッド → オブジェクト内の関数(処理)

つまり、

  • データに処理がくっついたもの=オブジェクト
  • 処理にデータがくっついたもの=クロージャー

そんだけの話?

下記の『document』は、Webページ内でJavaScriptを利用する際に、最初から用意されているオブジェクトになります。
他にも、『window』などのオブジェクトが、用意されています。

document.title;     // 『document』オブジェクトの『title』変数
document.write(""); // 『document』オブジェクトの『write』関数

documentオブジェクトには、最初から『title』変数や、『write』関数が用意されている、っていう話ですね?

『連想配列』と『オブジェクト』

『連想配列』と『オブジェクト』は同じものです。

→何気に、これ重要な説明だな!!!(JSの特徴)

  • 『連想配列』として作成した変数は、『オブジェクト』として扱うことができます。
  • 『オブジェクト』として作成した変数も『連想配列』として扱えます。
var tensuuArray = {
   "足立" : 65,
   "安藤" : 78,
   "木村" : 43
};
alert(tensuuArray.足立);    // 『65』と表示

本来は『tensuuArray["足立"]』と書くべきところを『tensuuArray.足立』と書いています。
書き方を変えても、正しく値を参照できます。

『オブジェクト』を『連想配列』として、『for in』文で処理すれば、キーと値を表示させることができます。
以下の例では、『document』オブジェクトを『連想配列』として扱い、キー、型、値を調べて表示させています。

var str = "";
for (var key in document) {
   str += "キーが " + key
       + " : 型が " + typeof(document[key])
       + " : 値が " + document[key]
       + "<br>";    // 改行タグ
}
document.write(str);

『メソッド』

プロパティの中でも、関数は特別に『メソッド』と呼びます。

fig_2.gif

『クラス』

『function』型の変数

変数の『型』には『function』型と呼ばれるものがあります。
これは、『関数』を変数として格納したものです。
JavaScriptでは、『関数』も数値や文字列と同じように、変数に入れて利用することができます。

→ これがJavaScriptのコードが、他の言語と比べて、読みにくい理由の一つなんだよねー?
→ 「見た目が変数でも、中身は関数」って場合があるから、変数と関数のどっちなのか?を勘違いしなようにしないといけない。

以下、『関数』を変数に入れて利用する例を示します。

// 関数を作成
var func = function () {
   alert("関数を変数にしたよ!");
};
// 関数を実行
func();    // 変数の後に『()』を付けて実行

変数の中身に、関数が入っている場合のみ、変数名の後ろに();を付ければ、関数が実行される。
これが、自分にとっての罠、分かりにくかった点だな!!!

JavaScriptのFunction型変数の正体を見破ったり!!!
次からは、騙されへんで~www

// 配列に関数を入れて実行
var aArray = new Array(1);
aArray[0] = func;
aArray[0]();    // 配列の後に『()』を付けて実行
// 『連想配列』に関数を入れて
// プロパティとして実行
aArray["rensou"] = func;
aArray.rensou();    // プロパティの後に『()』を付けて実行

3種類示しましたが、いずれもきちんとダイアログが表示されます。

『無名関数』

『function () {~}』のように、『function』の後に名前がない関数のことを『無名関数』と呼びます。

JavaScriptでは、ある程度以上に高度なプログラムを書き始めると、この『無名関数』を多用するようになります。
そのため、こういった「名前のない関数」があるということを覚えておいてください。

  • 有名関数 function hoge() { } → ()の前に、関数名が入っている。(この場合は「hoge」という関数名)
  • 無名関数 function () { } → ()の前に、関数名が入ってない=関数名が無い=無名関数

よーく、覚えておこう!

クラス

『function』型変数を使って、『クラス』と呼ばれるものを作ります。

// 生徒クラスを作成
var Seito = function(namae, tensuu) {
    this.namae  = namae || "???";
    this.tensuu = tensuu || 0;
    this.show = function() {
        window.alert("名前 : " + this.namae
            + " / 点数 : " + this.tensuu);
    };
};

『this』という文字の意味は、ここでは『クラス』自体を現すオブジェクトだと思っていてください。

// 生徒クラスを使って『生徒 遊』変数を作成
var sYuu = new Seito("遊", 3);
alert(sYuu.namae + " " + sYuu.tensuu);
sYuu.show();

こんなかんじで、クラスが作れると。
上記の例は、動的クラスの作り方ですね。

(参考)
JavaScriptでの静的クラスと動的クラスの作り方 - Qiita
http://qiita.com/candyrobot/items/1b99a577e1d58e2d7d4f

【javascript】やさしいクラスの作り方 - Qiita
http://qiita.com/varmil/items/99fd6f2a886fdde4b7fa

JavaScriptの(「オブジェクト」じゃなくて)「クラス」もどきは、書き方がいろいろあるから、混乱しないように注意されたし!!!

  • プロトタイプベース
  • クラスベース
    • 静的クラス
    • 動的クラス

javaScriptの作法では、Javaっぽい「クラスベース」な書き方は諦めて、まずは素直に「プロトタイプベース」で書く練習をすべきなのだろうか?(守破離)

this

クラスを作る際に、『this』という、これまで説明していない謎の変数が出てきました。
この『this』は、オブジェクト自身を表す特殊な変数です。

関数内の『this』

次は関数内の『this』です。
関数内であれば、『this』は、関数が呼び出された際に、その関数が格納されていたオブジェクトを表しています。

// 生徒クラスを作成
var Seito = function(namae, tensuu) {
    this.namae  = namae || "???";
    this.tensuu = tensuu || 0;
    this.show = function() {
        alert("名前 : " + this.namae
            + " / 点数 : " + this.tensuu);
    };
}

// 生徒クラスを使って『生徒 遊』変数を作成
var sYuu = new Seito("遊", 3);
sYuu.show();

読了

そういや、JavaScriptって、こういう言語だったよなー。
もうちょい、細かいところまで、勉強を進めてみよう。

JSのコードが、すらすらと書けるようになれたらいいな!


添付ファイル: filefig_2.gif 205件 [詳細] filefig_1.gif 202件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-03-08 (日) 22:10:33 (1144d)