Download as PDF, PPTX
![データ型いろいろ
データ型 意味 例
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](https://image.slidesharecdn.com/javascript-140608014835-phpapp02/75/JavaScript-24-2048.jpg)
![[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門](https://cdn.slidesharecdn.com/ss_thumbnails/a-3ssjsjavascript-141120023907-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
JavaScriptことはじめ
- 1.
- 2. ほと（@hoto17296） • 株式会社ガイアックス 新卒エンジニア • Ruby好き •JavaScript歴８年くらい
- 3. 今日やること • (Web開発における) JavaScript入門 •jQuery • Ajax • オブジェクト指向
- 4. 今日やらないこと • JavaScriptフレームワーク（知らない） • サーバーサイドJavaScript（知らない） •JavaScriptでスマホアプリ開発（知らない） • JavaScriptのテスト手法（知らない）
- 5.
- 6. JavaScript とは • Javaではない！！！ •Javaに記法を似せて作ったのが由来らしい • が、全然似てない(と思う) • 全く異なる言語
- 7. JavaScript とは • ブラウザ上で実行できる唯一のプログラム言語 •Web開発するなら避けて通れない • TypeScript？Dart？なにそr…
- 8.
- 9. ECMAScript とは • JavaScriptの標準化仕様 •各ブラウザによる ECMAScript 実装を JavaScript と呼ぶ • 詳しくはWikipedia読もう
- 10. JavaScript の特徴 • DOMを操作できる •動的型付け • イベントドリブン • オブジェクト指向
- 11. JavaScript の特徴 • DOMを操作できる •動的型付け • イベントドリブン • オブジェクト指向
- 12. DOMを操作できる • DOM： DocumentObject Model • マークアップ文書(HTMLとか)の構造に アクセスするためのAPI • ほぼすべてのブラウザで実装されている • 要するに、JavaScriptはWebページを 動的に書き換えたりできるということ
- 13. JavaScript の特徴 • DOMを操作できる •動的型付け • イベントドリブン • オブジェクト指向
- 14. 動的型付け • 実行されるまでデータの型がわからない • 一般的に、動的型付け言語は遅い •が、JavaScriptは速い
- 15. 動的型付け 言語 条件 結果 JavaScriptChrome 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.
- 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.
- 26. 関数 • return は省略できない •引数のデフォルト値は指定できない
- 27. 演算子いろいろ 演算子名 例 代入演算子 =+= -= *= /= %= $= ^= ¦= など 比較演算子 == != === !== > >= < <= 算術演算子 + - * / % ++ ̶ - ビット演算子 & ¦ ^ << >> >>> 論理演算子 && ¦¦ ! 文字列演算子 + += 特殊演算子 delete in new this typeof など
- 28. 文字列演算子 • JavaScriptの文字列連結は「 +」！！ • 型に注意
- 29. 条件式 • 後置構文は使えない（ 式if 条件; みたいなやつ ） • () や {} は省略できない
- 30. 繰り返し(１) • break でループ終了 •continue で次のループ
- 31. 繰り返し(２) • オブジェクトリテラルの要素を順番に取り出す • foreachと同じ感覚で使うと痛い目見る
- 32.
- 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. 実行のしかた • コンソールで実行 • Chromeor Firefox • 右クリック → 要素の検証 → コンソール • htmlファイルから呼び出し • <script type= ∼∼.js ></script> • htmlファイルに埋め込み
- 38. デバッグ方法 • ブラウザのコンソールで試してみる • スクリプトにconsole.log() を埋め込む • スクリプトに debugger を埋め込む
- 39. BMIを求めるスクリプト • BMI： ボディマス指数(BodyMass Index) • ヒトの肥満度を表す体格指数 ワーク BMI = Weight(kg) Height(m)2
- 40.
- 41. やること ワーク • フォームに入力された値を取得する • BMI指数を計算する •小数点第２位で四捨五入する • 計算結果を表示する
- 42.
- 44. jQuery とは • JavaScriptライブラリ •JavaScriptをより簡潔に記述できる • 特にDOM操作やAjaxがやりやすい
- 45. jQuery とは • バージョン１系 と ２系 がある • １系： IE8対応 • ２系： IE8非対応・高速
- 46. jQuery 関数 • jQuery(セレクタ ) • $( セレクタ ) とも書ける • CSSライクなセレクタで様々なDOMを選択できる
- 47. jQueryでDOM操作 新しい div 要素を生成して .parentクラスを持つ要素の中に追加
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55. やること • クリックしたマスを queenクラスにする • 置いたクイーンの 縦・横・斜め を disable クラスにする • ゲームクリアしていたら「おめでとう！」的な アラートを表示する
- 56.
- 57. Ajax とは • AsynchronousJavaScript + XML • 非同期通信 • jQueryを使うと便利
- 58.
- 59.
- 60.
- 61. まとめ • JavaScriptはWeb開発では必須知識 • 仕組みがわかっていると安全にインターネットを 使える •JavaScriptは簡単に書けるからこそ スパゲティコードになりがち • jQueryはほどほどに活用しよう