JavaScriptことはじめ
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

JavaScriptことはじめ

on

  • 833 views

2014/06/08(日) @株式会社ガイアックス

2014/06/08(日) @株式会社ガイアックス

Statistics

Views

Total Views
833
Views on SlideShare
752
Embed Views
81

Actions

Likes
5
Downloads
6
Comments
0

5 Embeds 81

http://cashew.hatenablog.com 59
http://s.deeeki.com 17
http://blog.hatena.ne.jp 2
http://feedly.com 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScriptことはじめ Presentation Transcript

  • 1. JavaScriptことはじめ 2014/06/08(日) @株式会社ガイアックス
  • 2. ほと（@hoto17296） • 株式会社ガイアックス
 新卒エンジニア • Ruby好き • JavaScript歴８年くらい
  • 3. 今日やること • (Web開発における) JavaScript入門 • jQuery • Ajax • オブジェクト指向
  • 4. 今日やらないこと • JavaScriptフレームワーク（知らない） • サーバーサイドJavaScript（知らない） • JavaScriptでスマホアプリ開発（知らない） • JavaScriptのテスト手法（知らない）
  • 5. JavaScript 概要
  • 6. JavaScript とは • Javaではない！！！ • Javaに記法を似せて作ったのが由来らしい • が、全然似てない(と思う) • 全く異なる言語
  • 7. JavaScript とは • ブラウザ上で実行できる唯一のプログラム言語 • Web開発するなら避けて通れない • TypeScript？Dart？なにそr…
  • 8. ブラウザごとに実装 Google V8 SpiderMonkey Nitro Chakra
  • 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ってクラスないじゃん • オブジェクトリテラル クラス
  • 20. ここまでで何か質問は
 ( ・ ・)ﾉ
  • 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
  • 25. オブジェクトリテラル • RubyやPerlでいうところのハッシュ • 配列や関数も入れることができる
  • 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
  • 40. BMIを求めるスクリプト • http://bit.ly/js-kotohajime
 の「ワーク」ページから
 サンプルコードをダウンロード ワーク
  • 41. やること ワーク • フォームに入力された値を取得する • BMI指数を計算する • 小数点第２位で四捨五入する • 計算結果を表示する
  • 42. ∼∼ 昼休憩 ∼∼
  • 43. jQuery とは • JavaScriptライブラリ • JavaScriptをより簡潔に記述できる • 特にDOM操作やAjaxがやりやすい
  • 44. jQuery とは • バージョン １系 と ２系 がある • １系： IE8対応 • ２系： IE8非対応・高速
  • 45. jQuery 関数 • jQuery( セレクタ ) • $( セレクタ ) とも書ける • CSSライクなセレクタで様々なDOMを選択できる
  • 46. jQueryでDOM操作 新しい div 要素を生成して
 .parent クラスを持つ要素の中に追加
  • 47. jQueryでDOM操作 偶数番目の tr要素 に
 highlightクラス を追加/削除
  • 48. jQueryでイベント駆動
  • 49. データ属性を操作 • HTML5のカスタムデータ属性 • 要素そのものに任意のデータを
 紐付けることができる
  • 50. ゲーム作ろう( ́ー｀) ワーク
  • 51. エイトクイーン • クイーンを8体ならべるゲーム • どのクイーンも他のクイーンを取れない位置に
 置かないといけない ワーク
  • 52. エイトクイーン ワーク
  • 53. サンプルコードの仕様 ワーク .queen クイーンを
 置いたマス .able
 クイーンを
 置けるマス .disable
 クイーンを
 置けないマス
  • 54. やること • クリックしたマスを queen クラスにする • 置いたクイーンの 縦・横・斜め を
 disable クラスにする • ゲームクリアしていたら「おめでとう！」的な
 アラートを表示する
  • 55. Ajax
  • 56. Ajax とは • Asynchronous JavaScript + XML • 非同期通信 • jQueryを使うと便利
  • 57. JSON • ほと はここで力尽きたようだ
  • 58. クロスドメイン制約
  • 59. オブジェクト指向の話
  • 60. まとめ • JavaScriptはWeb開発では必須知識 • 仕組みがわかっていると安全にインターネットを
 使える • JavaScriptは簡単に書けるからこそ
 スパゲティコードになりがち • jQueryはほどほどに活用しよう