JavaScript超入門基礎

JS勉強会カリキュラム
๏ JAVASCRIPT言語の基礎
（基礎をちゃんと学ぶ）
๏ 重点をおさらい
（具体例を交えながら）
๏ さらに勉強しながらサンプル作成
（ハンズオン形式）
๏ PHONEGAP BUILDを使って
スマフォアプリとして完成させる
サンプルは検討中
ゲームとか

JAVASCRIPTの基礎
๏ 実行環境
๏ 字句構造
๏ 変数と型
๏ 式と演算子
๏ 文
๏ オブジェクト
๏ 配列
๏ 関数
๏ クラス
๏ ブラウザでのJAVASCRIPT
๏ JQUERY
๏ モバイルライブラリ
スクリプトを実行する方法
コメント、予約語、行
値、宣言
代入、リテラル
IF文と論理式、FOR文、スコープ
オブジェクトリテラル、JSON
配列リテラルと操作
関数リテラルと呼出し
オブジェクト指向なので割愛？
WINDOW、DOM
DOM/スタイル定義、イベント、AJAX
いくつかライブラリ紹介

実行環境
•HTML内に書いてブラウザで実行
•Chrome、Safariでのコンソール
•jsFiddle
http://jsﬁddle.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 という変数を作成する
（プロパティ名と値はコロンで区切り、
複数のデータをカンマで区切る）
オブジェクトリテラル

var myBook = {
author: "夏目漱石",
"published date": 1905
};
「JavaScriptのほとんどの値は
オブジェクトである」
スペースやハイフンが含まれる時は文
字列リテラルを使う（クウォート）
=> 発行年として数値1905をセット
文字列、数値なども一時的に生成され
るラッパオブジェクトによってオブジ
ェクトのように振る舞ってくれます
オブジェクトリテラル2

var myBook = {
};
myBook.title
myBook["author"]
myBook["published date"]
オブジェクトのプロパティを読み出す
時はドット( . )か角括弧（ [] ）演算子
を使う
角括弧にはプロパティ名を文字列で
＝＞吾輩は猫である
＝＞夏目漱石
スペースやハイフンが含まれる場合の
プロパティは角括弧のみ
＝ドット演算子は簡易的と考えておく
プロパティの読み出し

var myBook = {
};
myBook.title = "こころ"
myBook["published date"] = 1914
myBook["publisher"] = "大倉商店"
オブジェクトのプロパティに値を書き
込む時もドット( . )か角括弧（ [] ）を
使い、代入をする
読み出しと同じルール
新しいプロパティ名で代入すると新し
いプロパティが作成されます
プロパティの書き込み

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 （自動的に拡張される）
=>undeﬁned （間のデータは空）
=> 「いち」、「にい」、「さん」の
順でアラートボックスが表示される
配列の長さ、巡回（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] = {
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の知識とあわせて使うもの

JavaScript超入門基礎

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to JavaScript超入門基礎

Similar to JavaScript超入門基礎 (20)

Recently uploaded

Recently uploaded (14)