root/docs/holidays-l/JavaScript-Study-Meeting.html

Revision 1079, 16.6 kB (checked in by holidays-l, 14 months ago)

added charset into svn:mime-type

  • Property svn:mime-type set to text/html; charset=utf-8
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<meta name="generator" content="Docutils 0.4: http://docutils.sourceforge.net/" />
6<meta name="version" content="S5 1.1" />
7<title>JavaScript勉強会</title>
8<style type="text/css">
9
10#id14 pre.literal-block {
11  font-family: "MS PGothic";
12  font-size: 12pt;
13  line-height: 1.0;
14  white-space: pre;
15}
16
17.presentation .incremental,
18.presentation .incremental *,
19.presentation .incremental *:after {
20  visibility: hidden;
21}
22
23</style>
24<!-- configuration parameters -->
25<meta name="defaultView" content="slideshow" />
26<meta name="controlVis" content="hidden" />
27<!-- style sheet links -->
28<script src="ui/default/slides.js" type="text/javascript"></script>
29<link rel="stylesheet" href="ui/default/slides.css"
30      type="text/css" media="projection" id="slideProj" />
31<link rel="stylesheet" href="ui/default/outline.css"
32      type="text/css" media="screen" id="outlineStyle" />
33<link rel="stylesheet" href="ui/default/print.css"
34      type="text/css" media="print" id="slidePrint" />
35<link rel="stylesheet" href="ui/default/opera.css"
36      type="text/css" media="projection" id="operaFix" />
37
38<style type="text/css">
39#currentSlide {display: none;}
40</style>
41</head>
42<body>
43<div class="layout">
44<div id="controls"></div>
45<div id="currentSlide"></div>
46<div id="header">
47
48</div>
49<div id="footer">
50<h1>JavaScript勉強会</h1>
51
52</div>
53</div>
54<div class="presentation">
55<div class="slide" id="slide0">
56<h1 class="title">JavaScript勉強会</h1>
57<h2 class="subtitle" id="id1">JavaScript基礎</h2>
58<!-- -*- mode: RST -*- -->
59<ul class="simple">
60<li class="incremental">第1回<ul>
61<li class="incremental">歴史</li>
62<li class="incremental">お作法</li>
63<li class="incremental">変数</li>
64<li class="incremental">関数</li>
65</ul>
66</li>
67<li class="incremental">第2回以降の予定<ul>
68<li class="incremental">何も考えてません（＞＜）</li>
69<li class="incremental">DOM</li>
70<li class="incremental">prototype</li>
71<li class="incremental">プロトタイプベースオブジェクト指向</li>
72<li class="incremental">要望があれば「もっと基礎」やります</li>
73<li class="incremental">「サイトのJavaScriptを勝手に添削」</li>
74</ul>
75</li>
76</ul>
77
78</div>
79<div class="slide" id="id2">
80<h1>歴史</h1>
81<div class="section" id="id3">
82<h2>誕生</h2>
83<ul>
84<li class="incremental"><p class="first">マウスカーソルを</p>
85<p class="incremental">ハートアイコンに変えてくれる</p>
86<p class="incremental">キラキラした何かが追ってきてくる</p>
87<ul class="simple">
88<li class="incremental">ウザイ</li>
89</ul>
90</li>
91<li class="incremental"><p class="first">訪問時刻が夜中だったら</p>
92<p class="incremental">「まだ起きてるんですか？(^o^)/」</p>
93<ul class="simple">
94<li class="incremental">余計なお世話</li>
95</ul>
96</li>
97</ul>
98</div>
99</div>
100<div class="slide" id="id4">
101<h1>歴史</h1>
102<div class="section" id="id5">
103<h2>誕生</h2>
104<ul class="simple">
105<li class="incremental">ウィンドウタイトルやステータスを書き換えて騙しリンク<ul>
106<li class="incremental">エロサイト</li>
107<li class="incremental">騙されたことあるでしょ？</li>
108<li class="incremental">…</li>
109<li class="incremental">……あります…orz</li>
110</ul>
111</li>
112</ul>
113<p class="incremental">どうでもいい（むしろウザイ）使われ方ばかりされ、</p>
114<p class="incremental">Java Appletと共に忌み嫌われる存在になる（＞＜）</p>
115</div>
116</div>
117<div class="slide" id="id6">
118<h1>歴史</h1>
119<div class="section" id="id7">
120<h2>時は流れ</h2>
121<ul class="simple">
122<li class="incremental">インターネットの普及</li>
123<li class="incremental">Ajax（という新鮮な名前←名前大事）</li>
124<li class="incremental">Web2.0<ul>
125<li class="incremental">死語です。</li>
126</ul>
127</li>
128</ul>
129</div>
130<div class="section" id="id8">
131<h2>復興</h2>
132<ul class="simple">
133<li class="incremental">実力が見直され始める<ul>
134<li class="incremental">Bookmarklet</li>
135<li class="incremental">ウェブアプリケーション<ul>
136<li class="incremental">でもWebOSはチョットやり過ぎ</li>
137</ul>
138</li>
139<li class="incremental">ブラウザを拡張（特にフォームとか）</li>
140<li class="incremental">クライアントに負荷を分散</li>
141</ul>
142</li>
143</ul>
144</div>
145</div>
146<div class="slide" id="id9">
147<h1>歴史</h1>
148<div class="section" id="id10">
149<h2>時は戦乱の世</h2>
150<ul class="simple">
151<li class="incremental">JavaScriptフレームワークの乱立 <strong>←去年ココ</strong></li>
152<li class="incremental"><img alt="amachang" src="./JavaScript-Study-Meeting/amachang.gif" /> ← IT戦士 (id:amachang)</li>
153<li class="incremental">確かにフレームワーク・ライブラリは便利だけど、<ul>
154<li class="incremental">フレームワークに振り回される</li>
155<li class="incremental">フレームワークが違うと別言語</li>
156</ul>
157</li>
158</ul>
159<p class="incremental">やっぱり基礎は知っておかないと！ <strong>←今日ココ</strong></p>
160</div>
161</div>
162<div class="slide" id="id11">
163<h1>歴史</h1>
164<div class="section" id="id12">
165<h2>革命</h2>
166<ul class="simple">
167<li class="incremental">Flashと連携(ExternalInterface) <strong>←今ココ</strong><ul>
168<li class="incremental">mp3再生</li>
169<li class="incremental">flvの再生</li>
170<li class="incremental">クリップボードの操作</li>
171<li class="incremental">IMEの操作</li>
172<li class="incremental">クロスドメイン通信(要crossdomain.xml)</li>
173</ul>
174</li>
175</ul>
176<p class="incremental">そんなJavaScriptの歴史をグラフにしてみました。</p>
177</div>
178</div>
179<div class="slide" id="id13">
180<h1>歴史</h1>
181<div class="section" id="id14">
182<h2>JavaScriptの歴史グラフ</h2>
183<pre class="incremental literal-block">
184.
185
186
187
188　　　　　嫌われ者　　　　　脇役　　　　　　主役
189　　　　　　　┝━━━━━━┿　-　-　-　-　┥
190　　　　　　　　　　　 ∩＿＿＿∩　　　/)
191　　　　　　　　　　　 | ノ　　　　　 ヽ　 ( i )))
192　　　　　　　　　　　/　　●　　　● | /　/　今ココ
193　　　　　　　　　　 |　　　　( _●_)　 |ﾉ　/
194　　　　　　　　　　彡､　　　|∪|　　　　,/
195　　　　　　　　　 ／　　　　ヽノ　　　/´
196
197
198
199　　　　　　　　　　　　　　　　　　　　　　　　　.
200</pre>
201<p class="incremental">詳しい歴史については「JavaScript - Wikipedia」を見てね</p>
202<p class="incremental"><a class="reference" href="http://ja.wikipedia.org/wiki/JavaScript">http://ja.wikipedia.org/wiki/JavaScript</a></p>
203</div>
204</div>
205<div class="slide" id="id15">
206<h1>お作法</h1>
207<div class="section" id="html">
208<h2>HTMLに直接書く場合はコメントアウトしよう</h2>
209<ul>
210<li class="incremental"><pre class="incremental first literal-block">
211&lt;script type=&quot;text/javascript&quot;&gt;
212...
213&lt;/script&gt;
214</pre>
215<ul class="simple">
216<li class="incremental">&lt;SCRIPT&gt;〜&lt;/SCRIPT&gt; 内の要素はすべてコメントで囲んだ方が安全です。<ul>
217<li class="incremental">出ちゃうから（＞＜）</li>
218</ul>
219</li>
220</ul>
221</li>
222<li class="incremental"><p class="first">こうする:</p>
223<pre class="incremental literal-block">
224&lt;script type=&quot;text/javascript&quot;&gt;
225&lt;!--
226...
227// --&gt;
228&lt;/script&gt;
229</pre>
230</li>
231</ul>
232</div>
233</div>
234<div class="slide" id="id16">
235<h1>お作法</h1>
236<div class="section" id="id17">
237<h2>&lt;/を書かないようにしよう</h2>
238<ul>
239<li class="incremental"><pre class="incremental first literal-block">
240document.write('&lt;p&gt;...&lt;/p&gt;');
241</pre>
242<ul class="simple">
243<li class="incremental">&lt;SCRIPT&gt;〜&lt;/SCRIPT&gt; 内に <cite>&lt;/</cite> を直接書くことはできません。<ul>
244<li class="incremental">&lt;/ を終了タグだと勘違いしちゃう（＞＜）</li>
245</ul>
246</li>
247</ul>
248</li>
249<li class="incremental"><p class="first">もし&lt;/を書く必要があるなら</p>
250<ul>
251<li class="incremental"><p class="first">エスケープ:</p>
252<pre class="incremental literal-block">
253'&lt;￥/script'
254</pre>
255</li>
256<li class="incremental"><p class="first">分割:</p>
257<pre class="incremental literal-block">
258'&lt;' + '/script'
259</pre>
260</li>
261</ul>
262</li>
263</ul>
264</div>
265</div>
266<div class="slide" id="id18">
267<h1>お作法</h1>
268<div class="section" id="id19">
269<h2>&amp; &lt; を書かないようにしよう</h2>
270<ul>
271<li class="incremental"><pre class="incremental first literal-block">
272if (a &lt; 1 &amp;&amp; b &lt; 10)
273</pre>
274<ul class="simple">
275<li class="incremental">&lt;SCRIPT&gt;〜&lt;/SCRIPT&gt; 内に <cite>&lt;</cite> を書くときは外部にスクリプトを用意しましょう。</li>
276<li class="incremental">&lt;SCRIPT&gt;〜&lt;/SCRIPT&gt; 内に <cite>&amp;</cite> を書くときは外部にスクリプトを用意しましょう。<ul>
277<li class="incremental">だってHTMLだもん（＞＜）</li>
278</ul>
279</li>
280</ul>
281</li>
282<li class="incremental"><p class="first">こうする:</p>
283<pre class="incremental literal-block">
284if (a &amp;lt; 1 &amp;amp;&amp;amp; b &amp;lt; 10)
285</pre>
286</li>
287</ul>
288<p class="incremental">こんなの、ほとんどの人は正しく書けてない！</p>
289</div>
290</div>
291<div class="slide" id="id20">
292<h1>お作法</h1>
293<div class="section" id="id21">
294<h2>結論</h2>
295<p class="incremental">外部スクリプトにすればおｋ</p>
296<pre class="incremental literal-block">
297&lt;script type=&quot;text/javascript&quot; src=&quot;foo.js&quot;&gt;&lt;/script&gt;
298</pre>
299</div>
300</div>
301<div class="slide" id="id22">
302<h1>お作法</h1>
303<ul>
304<li class="incremental"><p class="first">その他色々</p>
305<ul>
306<li class="incremental"><p class="first">理由の無いdocument.writeはやめよう</p>
307<ul class="simple">
308<li class="incremental">レンダリングが止まる</li>
309<li class="incremental">documentがcloseされていると使えない</li>
310</ul>
311</li>
312<li class="incremental"><p class="first">&lt;script&gt;はなるべく下に書こう</p>
313</li>
314<li class="incremental"><p class="first">文字列形式のfunctionはやめよう</p>
315<ul>
316<li class="incremental"><pre class="incremental first literal-block">
317setTimeout('foo()', 0)
318じゃなくて
319setTimeout(foo, 0)
320</pre>
321</li>
322</ul>
323</li>
324<li class="incremental"><p class="first">などなど、他にも書き切れないほどあるので、</p>
325<p class="incremental">それはまたの機会に（＞＜）</p>
326</li>
327</ul>
328</li>
329</ul>
330</div>
331<div class="slide" id="id23">
332<h1>変数</h1>
333<ul class="simple">
334<li class="incremental">数値</li>
335<li class="incremental">真偽値</li>
336<li class="incremental">文字列</li>
337<li class="incremental">オブジェクト<ul>
338<li class="incremental">Object   オブジェクト（{} = new Object()）</li>
339<li class="incremental">Array    配列（[] = new Array()）</li>
340<li class="incremental">Date     日時</li>
341<li class="incremental">RegExp   正規表現</li>
342<li class="incremental">Function 関数</li>
343</ul>
344</li>
345</ul>
346<p class="incremental">時間が無いので、はしょります（＞＜）</p>
347</div>
348<div class="slide" id="id24">
349<h1>変数</h1>
350<div class="section" id="id25">
351<h2>型の自動変換</h2>
352<pre class="incremental literal-block">
3531  +  1  =  2
354'1' + '1' = '11'
355</pre>
356<p class="incremental">型が違うときは適当に変換してくれる</p>
357<pre class="incremental literal-block">
358false + 1 = 1
359 true + 1 = 2
360
3612 - '1' = ？
3622 + '1' = ？
363</pre>
364</div>
365</div>
366<div class="slide" id="id26">
367<h1>変数</h1>
368<div class="section" id="id27">
369<h2>型の自動変換</h2>
370<ul>
371<li class="incremental"><p class="first">自動変換で発生するミス</p>
372<p class="incremental">数値の加算と文字列の連結が同じ演算子なのが問題</p>
373<ul class="simple">
374<li class="incremental">style.width<ul>
375<li class="incremental">'640px'</li>
376</ul>
377</li>
378<li class="incremental">style.width.replace(/D/g,'')<ul>
379<li class="incremental">'640'</li>
380</ul>
381</li>
382<li class="incremental">style.width.replace(/D/g,'') + 300<ul>
383<li class="incremental">'640300'</li>
384</ul>
385</li>
386<li class="incremental">Number( style.width.replace(/D/g,'') ) + 300<ul>
387<li class="incremental">940</li>
388</ul>
389</li>
390</ul>
391</li>
392</ul>
393<p class="incremental">見覚えある人、手挙げて！</p>
394</div>
395</div>
396<div class="slide" id="id28">
397<h1>変数</h1>
398<div class="section" id="id29">
399<h2>グローバル変数はやめよう</h2>
400<ul>
401<li class="incremental"><p class="first">グローバル変数はバグの温床</p>
402<ul class="simple">
403<li class="incremental">他スクリプトと干渉する</li>
404</ul>
405</li>
406<li class="incremental"><p class="first">グローバル変数はスクリプトを遅くする</p>
407<ul>
408<li class="incremental"><p class="first">グローバル変数はずっと残る（ローカル変数はスコープを外れると破棄される）</p>
409</li>
410<li class="incremental"><p class="first">グローバル変数まで辿って行くのは大変</p>
411<p class="incremental">ってJavaScriptインタプリタが言ってた</p>
412</li>
413</ul>
414</li>
415</ul>
416</div>
417</div>
418<div class="slide" id="id30">
419<h1>変数</h1>
420<ul>
421<li class="incremental"><p class="first">グローバル変数はやめよう</p>
422<ul>
423<li class="incremental"><p class="first">iがグローバル変数:</p>
424<pre class="incremental literal-block">
425var i; // window['i']
426function foo() {
427    for (i = 0; i &lt; 10; ++i) {
428    }
429}
430foo();
431</pre>
432</li>
433<li class="incremental"><p class="first">こうした方がクリーンで速い:</p>
434<pre class="incremental literal-block">
435function foo() {
436    var i;
437    for (i = 0; i &lt; 10; ++i) {
438    }
439}
440foo();
441</pre>
442</li>
443</ul>
444</li>
445</ul>
446</div>
447<div class="slide" id="id31">
448<h1>関数</h1>
449<pre class="incremental literal-block">
450function foo(bar) {...}
451</pre>
452<p class="incremental">関数もオブジェクト</p>
453<pre class="incremental literal-block">
454var foo = function(bar) {...};   // 無名関数を代入
455</pre>
456<p class="incremental">実はFunctionをnewしてる</p>
457<pre class="incremental literal-block">
458var foo = new Function('bar', '...');
459</pre>
460</div>
461<div class="slide" id="id32">
462<h1>関数</h1>
463<p class="incremental">関数は手続きをまとめるもの <strong>だけじゃなくて</strong> スコープの基本単位</p>
464<pre class="incremental literal-block">
465function foo() {
466    var x = 3;
467}
468</pre>
469<p class="incremental">関数に閉じ込めると外に漏れない。</p>
470</div>
471<div class="slide" id="id33">
472<h1>関数</h1>
473<div class="section" id="id34">
474<h2>変数をローカルスコープに閉じ込める慣用句（イディオム）</h2>
475<pre class="incremental literal-block">
476(function(){
477   ...
478})();
479</pre>
480<p class="incremental">生い立ちを解説します</p>
481</div>
482</div>
483<div class="slide" id="id35">
484<h1>関数</h1>
485<ol class="arabic">
486<li class="incremental"><pre class="incremental first literal-block">
487function foo() {...}
488
489foo();
490</pre>
491</li>
492<li class="incremental"><pre class="incremental first literal-block">
493var foo = function() {...};
494
495foo();
496</pre>
497</li>
498<li class="incremental"><pre class="incremental first literal-block">
499function() {...}(); // これはsyntax error
500</pre>
501</li>
502<li class="incremental"><pre class="incremental first literal-block">
503(function() {...})();
504</pre>
505</li>
506</ol>
507</div>
508<div class="slide" id="id36">
509<h1>関数</h1>
510<div class="section" id="new-this">
511<h2>newとthis</h2>
512<pre class="incremental literal-block">
513function foo() {
514  // this === foo
515}
516new foo();
517</pre>
518<pre class="incremental literal-block">
519function foo() {
520  // this === foo
521  function bar() {
522    // this !== foo
523  }
524}
525new foo();
526</pre>
527</div>
528</div>
529<div class="slide" id="id37">
530<h1>関数</h1>
531<div class="section" id="id38">
532<h2>クロージャ</h2>
533<pre class="incremental literal-block">
534function foo() {
535  // this === foo
536  var self = this;  // self === foo
537  function bar() {
538    // self === foo
539  }
540}
541new foo();
542</pre>
543<p class="incremental">関数を作ると「外側の関数に含まれる変数」が束縛される</p>
544</div>
545</div>
546<div class="slide" id="id39">
547<h1>関数</h1>
548<div class="section" id="id40">
549<h2>クロージャに関わるよくある間違い</h2>
550<p class="incremental">スコープが分かってない時にやってしまいがちなミス</p>
551<p class="incremental"><a class="reference" href="JavaScript-Study-Meeting/with.html">デモ</a></p>
552</div>
553</div>
554<div class="slide" id="id42">
555<h1>終わりに</h1>
556<p class="incremental">APIがどんどん公開されていて、
557JavaScriptができると大抵なんでもできちゃうようになってきた。</p>
558<p class="incremental">さあ、JavaScriptを始めよう！</p>
559</div>
560</div>
561</body>
562</html>
Note: See TracBrowser for help on using the browser.