JS勉強会 カリキュラム

๏ JAVASCRIPT言語の基礎（基礎をちゃんと学ぶ）

๏ 重点をおさらい（具体例を交えながら）

๏ さらに勉強しながらサンプル作成（ハンズオン形式）

๏ PHONEGAP BUILDを使ってスマフォアプリとして完成させる

サンプルは検討中ゲームとか

JavaScript言語の基礎

JAVASCRIPTの基礎๏ 実行環境

๏ 字句構造

๏ 変数と型

๏ 式と演算子

๏ 文

๏ オブジェクト

๏ 配列

๏ 関数

๏ クラス

๏ ブラウザでのJAVASCRIPT

๏ JQUERY

๏ モバイルライブラリ

スクリプトを実行する方法

コメント、予約語、行

値、宣言

代入、リテラル

IF文と論理式、FOR文、スコープ

オブジェクトリテラル、JSON

配列リテラルと操作

関数リテラルと呼出し

オブジェクト指向なので割愛？

WINDOW、DOM

DOM/スタイル定義、イベント、AJAX

いくつかライブラリ紹介

　実行環境

•HTML内に書いてブラウザで実行

•Chrome、Safariでのコンソール

•jsFiddle　http://jsfiddle.net

•jsdo（by KAYAC）　http://jsdo.it

さすがに面倒です

ちょっと試すには便利だが

さくっと試せるし機能も豊富　- テストするにはベスト

保存機能、コードコミュニティ機能があり日本製なのも魅力　- 最終的にモバイルアプリにする　 ならこれがイチオシ

スクリプトを実行する方法

　字句構造(1)

// これはコメント

/* これもコメント */

/* * * 複数行コメント * 複数行コメント * */

コメントを書く理由：

他の人が見てもコードが読みやすい

自分のコードすら何をやっているかわからないことが多々あるので自分のためにもコメントが必要！

最近のエディタは便利ですコメントはちゃんと色分けされる

使ってはいけない予約語というものがありますがこれも覚えなくてもOK

コメント、予約語

　字句構造(2)

a = 1 b = 2

a = 1; b = 2;

a = 1; b = 2;

基本は一行が一文

ただし文はセミコロンによって区切られる

なるべくセミコロンを使って一行に一文で書きましょう

セミコロンと行

　変数と型

0 1000

3.1415

"abc"

var a = 1; var s = "abc"; var f = true;

　a = 2;

整数の値（数値の基本です）

実数の値（小数点を入れるだけ）

文字列

宣言　最初だけ「var」で宣言する　（実はしなくても動くけど）

　他の言語では細かく宣言するものや　Rubyのように＠や＠＠を頭に置くものなど

値と宣言

変数名は大文字／小文字を区別します

　式と演算子(1)

1 + 1 2 - 1 2 * 2 4 / 2 5 % 2

2 * (1 + 2) 2 * (a + b)

"abc" + "def"

加算（=2）減算（=1）乗算（=4）除算（=2）剰余（あまり=1）

括弧で優先順位を変える（=6）もちろん変数も指定可

文字列において＋は連結となる（="abcdef"）

算術演算子

　式と演算子(2)

a = a + 1;

var s1 = "abc"; (s1を宣言し、”abc”を代入の意) var s2 = 'abc'; var s3 = ' "abc" is a string.';

var a1 = []; var a2 = [1,2,3];

代入演算子変数 a に a + 1 を入れるa ← a + 1 のイメージ

文字列リテラル　プログラムでのリテラルとは　コード内に値を直接書くこと　（結構あいまいに使われている）

配列リテラル　複数の値をまとめて持つことができる

　他にもオブジェクト、関数リテラルなどがある

代入、リテラル

　式と演算子(3)

a = "文字列" + 5; a = "2" * "5";

型の確認方法: alert(typeof a);

"文字列5" という文字列になる整数で 10 になる

ダックタイピング：　もしそれがアヒルのように歩き、　アヒルのように鳴くのなら、　それはアヒルである！

JavaScriptは式から判断して変数の型を動的に変更してくれますつまり「良きに計らって」くれます（時に迷惑なときもあります）

こういう場合はどうなる？

　文(1)

if (a == 1) { a = 0; b = 0; }

if (a == 1) a = 0;

if文はよく使います、基本です。 if (論理式) {　　論理式が真なら実行する処理 }

「変数aが1ならばaとbに0を代入」

処理が一行なら中括弧はなしで可

＝＝は値が等しいかを判定する演算子

論理式の結果は論理値で、真(true) か 偽(false)、はい か いいえ、オン か オフかなどで表される

IF文

　文(2)

if (a == 1) { a = 0; } else { a = 1; }

if (a == 1) { a = 10; } else if (a == 2) { a = 20; }

組み合わせて使用ができる

if (論理式1) {　　論理式1が真なら実行する処理 } else if (論理式2) {　　さらに2論理式が真なら実行する処理 } else {　　全ての論理式が偽なら実行する処理 }

※ elseは最後に使います

　 簡単な文字列操作などで試すことをお勧めします

IF-ELSE文

　文(3)

x == 0 && y == 0

if (x == 0 && y == 0) { ..... }

x == 0 || y ==0

x != 0

x < 10 x >= 5

論理AND両方とも0ならばtrueとなる

のように使う

論理ORどちらかが0ならばtrueとなる

0ではない

10より小さい5以上

論理式（演算子）

　文(4)

for (初期化式; テスト式; 更新式) { ..... }

for ( var i = 0 ; i < 3 ; i++ ) { alert( "i=" + i ); }

1回: alert( "i=" + 0 ); 2回: alert( "i=" + 1 ); 3回: alert( "i=" + 2 );

初期化式が一度だけ呼ばれ、テスト式が真(true)の間繰り返し、実行後更新式がよばれ次のテストへ！

初期化：変数iに0をセットテスト：iが３より小さいならば更新：iに1を足す

結果iは 0, 1, 2 と繰り返した後終了する

FOR文

　文(5)

for (初期化式; テスト式; 更新式) { ..... //ここでやめて次に進める continue; //ここで繰り返しをやめる break; ..... }

if文を使って特定の条件で処理をパスしたり、繰り返しを終了したい場合にループ内で制御できる

var str = '';for (var i=0; i<10; i++) { if (i == 0) continue; if (i == 5) break; str = str + ' ' + i;}alert(str); // "1 2 3 4"

FOR文での制御

　オブジェクト(1)

オブジェクトはJavaScriptの基本

var empty = { };

var myBook = { title: "吾輩は猫である", author: "夏目漱石" };

→複数のデータを一つにまとめる→名前によってデータを読み書きする　（ハッシュテーブル、連想配列）★なんでも入れられる魔法の箱

空のオブジェクトを変数emptyに代入オブジェクトは波括弧で括る！

プロパティ”title”と”author”をセットした”myBook”という変数を作成する（プロパティ名と値はコロンで区切り、　複数のデータをカンマで区切る）

オブジェクトリテラル

　オブジェクト(2)

var myBook = { title: "吾輩は猫である", author: "夏目漱石", "published date": 1905 };

「JavaScriptのほとんどの値は

　オブジェクトである」

スペースやハイフンが含まれる時は文字列リテラルを使う（クウォート）=> 発行年として数値1905をセット

文字列、数値なども一時的に生成されるラッパオブジェクトによってオブジェクトのように振る舞ってくれます

オブジェクトリテラル2

　オブジェクト(3)

var myBook = { title: "吾輩は猫である", author: "夏目漱石", "published date": 1905 };

myBook.title myBook["author"] myBook["published date"]

オブジェクトのプロパティを読み出す時はドット( . )か角括弧（ [] ）演算子を使う角括弧にはプロパティ名を文字列で

＝＞吾輩は猫である＝＞夏目漱石

スペースやハイフンが含まれる場合のプロパティは角括弧のみ＝ドット演算子は簡易的と考えておく

プロパティの読み出し

　オブジェクト(4)

var myBook = { title: "吾輩は猫である", author: "夏目漱石", "published date": 1905 };

myBook.title = "こころ" myBook["published date"] = 1914 myBook["publisher"] = "大倉商店"

オブジェクトのプロパティに値を書き込む時もドット( . )か角括弧（ [] ）を使い、代入をする

読み出しと同じルール

新しいプロパティ名で代入すると新しいプロパティが作成されます

プロパティの書き込み

　オブジェクト(5)

JSON = JavaScript Object Notation JavaScriptのオブジェクト表記

var myBook = { title: "こころ", date: 1905 };

var json = JSON.stringfy(myBook); var obj = JSON.parse(json);

JSONとはオブジェクトリテラルと ほぼ同等の記述を文字列で記した もの

JSONでは、‘ {"title":"こころ","date":1905} ’となります

★ データのやり取りに適しています　そのため最近ではサーバーとのやり取りに　おいて標準的なフォーマットとなっています

JSON

　配列(1)

配列もオブジェクト （でも特殊なオブジェクト）

var empty = [ ];

var a = [ "要素1", "要素2" ];

a[0] a.length a[3] = "要素3";

複数のデータを一つにまとめるという意味でオブジェクトに似ている。

要素数を返す「length」というプロパティを持った特殊なオブジェクト

空の配列を変数emptyに代入

角括弧演算子に負でない整数値（インデックス）を指定することで読み出す=>要素の1番目を読む=>要素数は２=>3番めの要素を新たに追加

配列リテラル

　配列(2)

var b = [ 1,2,3 ]; b[99] = 100; alert( b.length ); alert( b[50] );

// for文で巡回 var a = [ "いち", "にい", "さん" ]; var s = ""; for ( var i = 0; i < a.length; i++) { s = s + a[i] + "! "; } alert ( s );

添字に大きい数字を入れてみる=>100　（自動的に拡張される）=>undefined　（間のデータは空）

=> 「いち」、「にい」、「さん」の　順でアラートボックスが表示される

配列の長さ、巡回（FOR文）

　配列(3)

var a = [ ]; a.push("<body>"); a.push(" <div>"); a.push(" <h1>タイトル</h1>"); a.push(" </div>"); a.push("</body>");

alert( a.join("\n") );

メソッド：オブジェクト内で呼び出す関数のことをメソッドと呼ぶpushとjoinメソッドを使って、

<body> <div> <h1>タイトル</h1> </div></body>

という綺麗なマークアップが完成jQueryとか使うようになると便利なやり方です“\n”は改行を表す特殊文字（エスケープシーケンス）です

配列の便利なメソッド

　配列(4)

var a = [ ]; a[0] = { title: "吾輩は猫である", author: "夏目漱石" }; あるいは var data = [ { title: "吾輩は猫である", author: "夏目漱石" }, { title: "どんぐりと山猫", author: "宮沢賢治" } ];

配列の要素は文字列だけでなく、何でも入れられます。なのでさきほどのmyBookも配列の要素として保存出来ます。

このように配列とオブジェクトを組み合わせ、JSONなどで外部とやり取りすることでWEBアプリケーションは動いているのです。

配列の要素

　配列(5)

var a = { }; a[0] = "要素1"; a[1] = "要素2"; ※インデックスを指定している 　ようですが文字列に変換され 　プロパティとして保存されます var a = { 　"1": "要素1", 　"2": "要素1" }; a.length = 2; //プロパティ追加

var b = [ "要素1", "要素2" ];　とほぼ同じ振る舞いをする

オブジェクトの角括弧内はプロパティ名、配列の角括弧内はインデックス　- プロパティ名は文字列　- インデックスは負でない数値ですが見た目は同じように動きます

配列はlengthプロパティのほか、前の項で説明した便利なメソッド群をもつ特殊なオブジェクト！

オブジェクトプロパティと配列インデックス

　関数(1)

function 関数名 (引数1, 引数2...) { 処理.... return 戻り値; }

function add (a, b) { return a + b; }

//これを呼び出してみる alert( add(1, 2) );

一カ所にまとめて書いておくことでその機能を使い回しできます(戻り値を返さないものもあります)

簡単な足し算　（普通に式で「a + b」でいいのだけど）

呼び出すには関数名を使います＝＞足した結果「３」が表示されます

一度の定義で何度も呼び出せるのが関数

　関数(2)

var myBook = { title: "こころ", date: 1905 };　と同じように 関数を定義　↓ var keisan = { add: function(a,b) { return a + b; }, sub: function(a,b) ... }; alert( keisan.add(a, b) );

関数も変数として扱えます

つまりオブジェクトのプロパティに関数を定義するとメソッドになります

例えばいままで使ってきた「alert」はwindowオブジェクトのメソッドですので正確には、　window.alert("hello!");なのです。

オブジェクトに関数を定義＝メソッド

今後使っていくJavascriptを便利に使うためのライブラリのほとんどはオブジェクトであり、ほとんどの機能はメソッドで提供されるのです

　基礎は終わりです

今後WEBブラウザやモバイルでのJavaScriptを学ぶには、ブラウザでの動作方法の基本知識と、HTML/CSSの知識が必要になります。

HTMLの勉強と合わせて実際に動作させながら進めていく方法がよいと思います。

　テキストは、

　　１４歳からはじめる　　HTML＆JavaScript　　わくわく　　ゲームプログラミング教室　　

HTML/CSSの知識とあわせて使うもの