Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
JavaScriptことはじめ
2014/06/08(日) @株式会社ガイアックス
ほと(@hoto17296)
• 株式会社ガイアックス

新卒エンジニア
• Ruby好き
• JavaScript歴8年くらい
今日やること
• (Web開発における) JavaScript入門
• jQuery
• Ajax
• オブジェクト指向
今日やらないこと
• JavaScriptフレームワーク(知らない)
• サーバーサイドJavaScript(知らない)
• JavaScriptでスマホアプリ開発(知らない)
• JavaScriptのテスト手法(知らない)
JavaScript 概要
JavaScript とは
• Javaではない!!!
• Javaに記法を似せて作ったのが由来らしい
• が、全然似てない(と思う)
• 全く異なる言語
JavaScript とは
• ブラウザ上で実行できる唯一のプログラム言語
• Web開発するなら避けて通れない
• TypeScript?Dart?なにそr…
ブラウザごとに実装
Google V8
SpiderMonkey
Nitro
Chakra
ECMAScript とは
• JavaScriptの標準化仕様
• 各ブラウザによる ECMAScript 実装を

JavaScript と呼ぶ
• 詳しくはWikipedia読もう
JavaScript の特徴
• DOMを操作できる
• 動的型付け
• イベントドリブン
• オブジェクト指向
JavaScript の特徴
• DOMを操作できる
• 動的型付け
• イベントドリブン
• オブジェクト指向
DOMを操作できる
• DOM: Document Object Model
• マークアップ文書(HTMLとか)の構造に

アクセスするためのAPI
• ほぼすべてのブラウザで実装されている
• 要するに、JavaScriptはWebページを...
JavaScript の特徴
• DOMを操作できる
• 動的型付け
• イベントドリブン
• オブジェクト指向
動的型付け
• 実行されるまでデータの型がわからない
• 一般的に、動的型付け言語は遅い
• が、JavaScriptは速い
動的型付け
言語 条件 結果
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...
JavaScript の特徴
• DOMを操作できる
• 動的型付け
• イベントドリブン
• オブジェクト指向
イベントドリブン
• イベントが起こったら処理が実行される
• ○○ を したときに △△ する
• 例: 送信ボタン を クリック した時に

   バリデーション をする
JavaScript の特徴
• DOMを操作できる
• 動的型付け
• イベントドリブン
• オブジェクト指向
オブジェクト指向
• すべてのデータはオブジェクト
• 関数ですら第一級オブジェクト
• 関数を変数に代入できる
• 関数に関数を渡せる
• えっ でもJavaScriptってクラスないじゃん
• オブジェクトリテラル クラス
ここまでで何か質問は

( ・ ・)ノ
JavaScriptの文法
変数
• var文 を使うと宣言できる
• $ 付けなくていい
• 宣言されてない変数にも代入できる
• グローバルスコープになってしまう
• あまりやらないほうがいい
変数のスコープ
• 外側 → 内側: 見えない
• 内側 → 外側: 見える
データ型いろいろ
データ型 意味 例
String 文字列 hogehoge , 123
Number 数値 123, 3.14, 0xFF, Infinity, NaN
Boolean 論理値 true, false
Object オブジェクト...
オブジェクトリテラル
• RubyやPerlでいうところのハッシュ
• 配列や関数も入れることができる
関数
• return は省略できない
• 引数のデフォルト値は指定できない
演算子いろいろ
演算子名 例
代入演算子 = += -= *= /= %= $= ^= ¦= など
比較演算子 == != === !== > >= < <=
算術演算子 + - * / % ++ ̶ -
ビット演算子 & ¦ ^ << >> ...
文字列演算子
• JavaScriptの文字列連結は「 + 」!!
• 型に注意
条件式
• 後置構文は使えない( 式 if 条件; みたいなやつ )
• () や {} は省略できない
繰り返し(1)
• break でループ終了
• continue で次のループ
繰り返し(2)
• オブジェクトリテラルの要素を順番に取り出す
• foreach と同じ感覚で使うと痛い目見る
DOM関連
windowオブジェクト
プロパティ例 意味
window.alert( msg ) アラートを表示
window.confirm( msg ) 確認ダイアログを表示
window.document ドキュメントオブジェクト(後述)
• ウィンド...
documentオブジェクト
• html文書そのものを表すオブジェクト
• ここからDOMツリーにアクセスできる
プロパティ例 意味
document.title ページタイトル
document.cookie クッキーデータ
documen...
(;́ー`) ふぅ…
とりあえず実行してみよう
実行のしかた
• コンソールで実行
• Chrome or Firefox
• 右クリック → 要素の検証 → コンソール
• htmlファイルから呼び出し
• <script type= ∼∼.js ></script>
• htmlファイル...
デバッグ方法
• ブラウザのコンソールで試してみる
• スクリプトに console.log() を埋め込む
• スクリプトに debugger を埋め込む
BMIを求めるスクリプト
• BMI: ボディマス指数(Body Mass Index)
• ヒトの肥満度を表す体格指数
ワーク
BMI =
Weight(kg)
Height(m)2
BMIを求めるスクリプト
• http://bit.ly/js-kotohajime

の「ワーク」ページから

サンプルコードをダウンロード
ワーク
やること
ワーク
• フォームに入力された値を取得する
• BMI指数を計算する
• 小数点第2位で四捨五入する
• 計算結果を表示する
∼∼ 昼休憩 ∼∼
jQuery とは
• JavaScriptライブラリ
• JavaScriptをより簡潔に記述できる
• 特にDOM操作やAjaxがやりやすい
jQuery とは
• バージョン 1系 と 2系 がある
• 1系: IE8対応
• 2系: IE8非対応・高速
jQuery 関数
• jQuery( セレクタ )
• $( セレクタ ) とも書ける
• CSSライクなセレクタで様々なDOMを選択できる
jQueryでDOM操作
新しい div 要素を生成して

.parent クラスを持つ要素の中に追加
jQueryでDOM操作
偶数番目の tr要素 に

highlightクラス を追加/削除
jQueryでイベント駆動
データ属性を操作
• HTML5のカスタムデータ属性
• 要素そのものに任意のデータを

紐付けることができる
ゲーム作ろう( ́ー`)
ワーク
エイトクイーン
• クイーンを8体ならべるゲーム
• どのクイーンも他のクイーンを取れない位置に

置かないといけない
ワーク
エイトクイーン
ワーク
サンプルコードの仕様
ワーク
.queen
クイーンを

置いたマス
.able

クイーンを

置けるマス
.disable

クイーンを

置けないマス
やること
• クリックしたマスを queen クラスにする
• 置いたクイーンの 縦・横・斜め を

disable クラスにする
• ゲームクリアしていたら「おめでとう!」的な

アラートを表示する
Ajax
Ajax とは
• Asynchronous JavaScript + XML
• 非同期通信
• jQueryを使うと便利
JSON
• ほと はここで力尽きたようだ
クロスドメイン制約
オブジェクト指向の話
まとめ
• JavaScriptはWeb開発では必須知識
• 仕組みがわかっていると安全にインターネットを

使える
• JavaScriptは簡単に書けるからこそ

スパゲティコードになりがち
• jQueryはほどほどに活用しよう
JavaScriptことはじめ
Nächste SlideShare
Wird geladen in …5
×

JavaScriptことはじめ

16.027 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Ingenieurwesen
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

JavaScriptことはじめ

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

×