Recommended
More Related Content
What's hot
What's hot (20)
Similar to JavaScriptことはじめ
Similar to JavaScriptことはじめ (20)
More from Yuki Ishikawa
More from Yuki Ishikawa (20)
JavaScriptことはじめ
- 2. ほと（@hoto17296） • 株式会社ガイアックス 新卒エンジニア • Ruby好き • JavaScript歴８年くらい
- 3. 今日やること • (Web開発における) JavaScript入門 • jQuery • Ajax • オブジェクト指向
- 4. 今日やらないこと • JavaScriptフレームワーク（知らない） • サーバーサイドJavaScript（知らない） • JavaScriptでスマホアプリ開発（知らない） • JavaScriptのテスト手法（知らない）
- 6. JavaScript とは • Javaではない！！！ • Javaに記法を似せて作ったのが由来らしい • が、全然似てない(と思う) • 全く異なる言語
- 7. JavaScript とは • ブラウザ上で実行できる唯一のプログラム言語 • Web開発するなら避けて通れない • TypeScript？Dart？なにそr…
- 9. ECMAScript とは • JavaScriptの標準化仕様 • 各ブラウザによる ECMAScript 実装を JavaScript と呼ぶ • 詳しくはWikipedia読もう
- 10. JavaScript の特徴 • DOMを操作できる • 動的型付け • イベントドリブン • オブジェクト指向
- 11. JavaScript の特徴 • DOMを操作できる • 動的型付け • イベントドリブン • オブジェクト指向
- 12. DOMを操作できる • DOM： Document Object Model • マークアップ文書(HTMLとか)の構造に アクセスするためのAPI • ほぼすべてのブラウザで実装されている • 要するに、JavaScriptはWebページを 動的に書き換えたりできるということ
- 13. JavaScript の特徴 • DOMを操作できる • 動的型付け • イベントドリブン • オブジェクト指向
- 14. 動的型付け • 実行されるまでデータの型がわからない • 一般的に、動的型付け言語は遅い • が、JavaScriptは速い
- 15. 動的型付け 言語 条件 結果 JavaScript Chrome 31.0 (V8) 0.385 sec Ruby 2.0.0p353 5.345 sec Python 2.7.5 15.726 sec PHP 5.5.7 26.398 sec Perl 5.16.3 39.230 sec 【ベンチマーク対決】竹内関数でたらいまわし ¦ 熊本でWEB開発もホームページ制作もしない http://www.mixp.net/javascript/360
- 16. JavaScript の特徴 • DOMを操作できる • 動的型付け • イベントドリブン • オブジェクト指向
- 17. イベントドリブン • イベントが起こったら処理が実行される • ○○ を したときに △△ する • 例： 送信ボタン を クリック した時に バリデーション をする
- 18. JavaScript の特徴 • DOMを操作できる • 動的型付け • イベントドリブン • オブジェクト指向
- 19. オブジェクト指向 • すべてのデータはオブジェクト • 関数ですら第一級オブジェクト • 関数を変数に代入できる • 関数に関数を渡せる • えっ でもJavaScriptってクラスないじゃん • オブジェクトリテラル クラス
- 21. JavaScriptの文法
- 22. 変数 • var文 を使うと宣言できる • $ 付けなくていい • 宣言されてない変数にも代入できる • グローバルスコープになってしまう • あまりやらないほうがいい
- 23. 変数のスコープ • 外側 → 内側： 見えない • 内側 → 外側： 見える
- 24. データ型いろいろ データ型 意味 例 String 文字列 hogehoge , 123 Number 数値 123, 3.14, 0xFF, Infinity, NaN Boolean 論理値 true, false Object オブジェクト オブジェクトリテラル, 関数 など Array 配列 [ 1, 1, 2, 3, 5, 8 ] Null Null null undefined 未定義 undefined
- 26. 関数 • return は省略できない • 引数のデフォルト値は指定できない
- 27. 演算子いろいろ 演算子名 例 代入演算子 = += -= *= /= %= $= ^= ¦= など 比較演算子 == != === !== > >= < <= 算術演算子 + - * / % ++ ̶ - ビット演算子 & ¦ ^ << >> >>> 論理演算子 && ¦¦ ! 文字列演算子 + += 特殊演算子 delete in new this typeof など
- 28. 文字列演算子 • JavaScriptの文字列連結は「 + 」！！ • 型に注意
- 29. 条件式 • 後置構文は使えない（ 式 if 条件; みたいなやつ ） • () や {} は省略できない
- 30. 繰り返し(１) • break でループ終了 • continue で次のループ
- 31. 繰り返し(２) • オブジェクトリテラルの要素を順番に取り出す • foreach と同じ感覚で使うと痛い目見る
- 32. DOM関連
- 33. windowオブジェクト プロパティ例 意味 window.alert( msg ) アラートを表示 window.confirm( msg ) 確認ダイアログを表示 window.document ドキュメントオブジェクト(後述) • ウィンドウに関するあらゆるプロパティが 取得できる • 「window. 」は省略できる
- 34. documentオブジェクト • html文書そのものを表すオブジェクト • ここからDOMツリーにアクセスできる プロパティ例 意味 document.title ページタイトル document.cookie クッキーデータ document.getElement ById( id ) 指定された id を持つ 要素オブジェクトを返す document.getElements ByClassName( class ) 指定された class を持つ 要素オブジェクトリストを返す
- 35. (;́ー｀) ふぅ…
- 36. とりあえず実行してみよう
- 37. 実行のしかた • コンソールで実行 • Chrome or Firefox • 右クリック → 要素の検証 → コンソール • htmlファイルから呼び出し • <script type= ∼∼.js ></script> • htmlファイルに埋め込み
- 38. デバッグ方法 • ブラウザのコンソールで試してみる • スクリプトに console.log() を埋め込む • スクリプトに debugger を埋め込む
- 39. BMIを求めるスクリプト • BMI： ボディマス指数(Body Mass Index) • ヒトの肥満度を表す体格指数 ワーク BMI = Weight(kg) Height(m)2
- 41. やること ワーク • フォームに入力された値を取得する • BMI指数を計算する • 小数点第２位で四捨五入する • 計算結果を表示する
- 42. ∼∼ 昼休憩 ∼∼
- 44. jQuery とは • JavaScriptライブラリ • JavaScriptをより簡潔に記述できる • 特にDOM操作やAjaxがやりやすい
- 45. jQuery とは • バージョン １系 と ２系 がある • １系： IE8対応 • ２系： IE8非対応・高速
- 46. jQuery 関数 • jQuery( セレクタ ) • $( セレクタ ) とも書ける • CSSライクなセレクタで様々なDOMを選択できる
- 47. jQueryでDOM操作 新しい div 要素を生成して .parent クラスを持つ要素の中に追加
- 48. jQueryでDOM操作 偶数番目の tr要素 に highlightクラス を追加/削除
- 49. jQueryでイベント駆動
- 51. ゲーム作ろう( ́ー｀) ワーク
- 53. エイトクイーン ワーク
- 55. やること • クリックしたマスを queen クラスにする • 置いたクイーンの 縦・横・斜め を disable クラスにする • ゲームクリアしていたら「おめでとう！」的な アラートを表示する
- 56. Ajax
- 57. Ajax とは • Asynchronous JavaScript + XML • 非同期通信 • jQueryを使うと便利
- 59. クロスドメイン制約
- 60. オブジェクト指向の話
- 61. まとめ • JavaScriptはWeb開発では必須知識 • 仕組みがわかっていると安全にインターネットを 使える • JavaScriptは簡単に書けるからこそ スパゲティコードになりがち • jQueryはほどほどに活用しよう