JavaScript勉強会

JavaScript基礎

第1回
- 歴史
- お作法
- 変数
- 関数
第2回以降の予定
- 何も考えてません（＞＜）
- DOM
- prototype
- プロトタイプベースオブジェクト指向
- 要望があれば「もっと基礎」やります
- 「サイトのJavaScriptを勝手に添削」

歴史

誕生

マウスカーソルを

ハートアイコンに変えてくれる

キラキラした何かが追ってきてくる
- ウザイ
訪問時刻が夜中だったら

「まだ起きてるんですか？(^o^)/」
- 余計なお世話

歴史

誕生

ウィンドウタイトルやステータスを書き換えて騙しリンク
- エロサイト
- 騙されたことあるでしょ？
- …
- ……あります…orz

どうでもいい（むしろウザイ）使われ方ばかりされ、

Java Appletと共に忌み嫌われる存在になる（＞＜）

歴史

時は流れ

インターネットの普及
Ajax（という新鮮な名前←名前大事）
Web2.0
- 死語です。

復興

実力が見直され始める
- Bookmarklet
- ウェブアプリケーション
  - でもWebOSはチョットやり過ぎ
- ブラウザを拡張（特にフォームとか）
- クライアントに負荷を分散

歴史

時は戦乱の世

JavaScriptフレームワークの乱立 ←去年ココ
← IT戦士 (id:amachang)
確かにフレームワーク・ライブラリは便利だけど、
- フレームワークに振り回される
- フレームワークが違うと別言語

やっぱり基礎は知っておかないと！ ←今日ココ

歴史

革命

Flashと連携(ExternalInterface) ←今ココ
- mp3再生
- flvの再生
- クリップボードの操作
- IMEの操作
- クロスドメイン通信(要crossdomain.xml)

そんなJavaScriptの歴史をグラフにしてみました。

歴史

JavaScriptの歴史グラフ

.



　　　　　嫌われ者　　　　　脇役　　　　　　主役
　　　　　　　┝━━━━━━┿　-　-　-　-　┥
　　　　　　　　　　　 ∩＿＿＿∩　　　/)
　　　　　　　　　　　 | ノ　　　　　 ヽ　 ( i )))
　　　　　　　　　　　/　　●　　　● | /　/　今ココ
　　　　　　　　　　 |　　　　( _●_)　 |ﾉ　/
　　　　　　　　　　彡､　　　|∪|　　　　,/
　　　　　　　　　 ／　　　　ヽノ　　　/´



　　　　　　　　　　　　　　　　　　　　　　　　　.

詳しい歴史については「JavaScript - Wikipedia」を見てね

http://ja.wikipedia.org/wiki/JavaScript

お作法

HTMLに直接書く場合はコメントアウトしよう

```
<script type="text/javascript">
...
</script>
```
- <SCRIPT>〜</SCRIPT> 内の要素はすべてコメントで囲んだ方が安全です。
  - 出ちゃうから（＞＜）

こうする:

<script type="text/javascript">
<!--
...
// -->
</script>

お作法

</を書かないようにしよう

```
document.write('<p>...</p>');
```
- <SCRIPT>〜</SCRIPT> 内に </ を直接書くことはできません。
  - </ を終了タグだと勘違いしちゃう（＞＜）
もし</を書く必要があるなら
- エスケープ:
```
'<￥/script'
```
- 分割:
```
'<' + '/script'
```

お作法

& < を書かないようにしよう

```
if (a < 1 && b < 10)
```
- <SCRIPT>〜</SCRIPT> 内に < を書くときは外部にスクリプトを用意しましょう。
- <SCRIPT>〜</SCRIPT> 内に & を書くときは外部にスクリプトを用意しましょう。
  - だってHTMLだもん（＞＜）
こうする:
```
if (a &lt; 1 &amp;&amp; b &lt; 10)
```

こんなの、ほとんどの人は正しく書けてない！

お作法

結論

外部スクリプトにすればおｋ

<script type="text/javascript" src="foo.js"></script>

お作法

その他色々
- 理由の無いdocument.writeはやめよう
  - レンダリングが止まる
  - documentがcloseされていると使えない
- <script>はなるべく下に書こう
- 文字列形式のfunctionはやめよう
  - ```
  setTimeout('foo()', 0)
  じゃなくて
  setTimeout(foo, 0)
```
- などなど、他にも書き切れないほどあるので、
  
  それはまたの機会に（＞＜）

変数

数値
真偽値
文字列
オブジェクト
- Object オブジェクト（{} = new Object()）
- Array 配列（[] = new Array()）
- Date 日時
- RegExp 正規表現
- Function 関数

時間が無いので、はしょります（＞＜）

変数

型の自動変換

1  +  1  =  2
'1' + '1' = '11'

型が違うときは適当に変換してくれる

false + 1 = 1
 true + 1 = 2

2 - '1' = ？
2 + '1' = ？

変数

型の自動変換

自動変換で発生するミス

数値の加算と文字列の連結が同じ演算子なのが問題
- style.width
  - '640px'
- style.width.replace(/D/g,'')
  - '640'
- style.width.replace(/D/g,'') + 300
  - '640300'
- Number( style.width.replace(/D/g,'') ) + 300
  - 940

見覚えある人、手挙げて！

変数

グローバル変数はやめよう

グローバル変数はバグの温床
- 他スクリプトと干渉する
グローバル変数はスクリプトを遅くする
- グローバル変数はずっと残る（ローカル変数はスコープを外れると破棄される）
- グローバル変数まで辿って行くのは大変
  
  ってJavaScriptインタプリタが言ってた

変数

グローバル変数はやめよう

iがグローバル変数:

var i; // window['i']
function foo() {
    for (i = 0; i < 10; ++i) {
    }
}
foo();

こうした方がクリーンで速い:

function foo() {
    var i;
    for (i = 0; i < 10; ++i) {
    }
}
foo();

関数

function foo(bar) {...}

関数もオブジェクト

var foo = function(bar) {...};   // 無名関数を代入

実はFunctionをnewしてる

var foo = new Function('bar', '...');

関数

関数は手続きをまとめるもの だけじゃなくて スコープの基本単位

function foo() {
    var x = 3;
}

関数に閉じ込めると外に漏れない。

関数

変数をローカルスコープに閉じ込める慣用句（イディオム）

(function(){
   ...
})();

生い立ちを解説します

関数

```
function foo() {...}

foo();
```
```
var foo = function() {...};

foo();
```

function() {...}(); // これはsyntax error

```
(function() {...})();
```

関数

newとthis

function foo() {
  // this === foo
}
new foo();

function foo() {
  // this === foo
  function bar() {
    // this !== foo
  }
}
new foo();

関数

クロージャ

function foo() {
  // this === foo
  var self = this;  // self === foo
  function bar() {
    // self === foo
  }
}
new foo();

関数を作ると「外側の関数に含まれる変数」が束縛される

関数

クロージャに関わるよくある間違い

スコープが分かってない時にやってしまいがちなミス

デモ

終わりに

APIがどんどん公開されていて、 JavaScriptができると大抵なんでもできちゃうようになってきた。

さあ、JavaScriptを始めよう！