Download as PDF, PPTX
![データ型いろいろデータ型 意味 例String 文字列 hogehoge , 123Number 数値 123, 3.14, 0xFF, Infinity, NaNBoolean 論理値 true, falseObject オブジェクト オブジェクトリテラル, 関数 などArray 配列 [ 1, 1, 2, 3, 5, 8 ]Null Null nullundefined 未定義 undefined](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-140608014835-phpapp02%2f75%2fJavaScript-24-2048.jpg&f=jpg&w=240)
Recommended
![[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fa-3ssjsjavascript-141120023907-conversion-gate01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
What's hot
Similar to JavaScriptことはじめ
More from Yuki Ishikawa
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 secRuby 2.0.0p353 5.345 secPython 2.7.5 15.726 secPHP 5.5.7 26.398 secPerl 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 , 123Number 数値 123, 3.14, 0xFF, Infinity, NaNBoolean 論理値 true, falseObject オブジェクト オブジェクトリテラル, 関数 などArray 配列 [ 1, 1, 2, 3, 5, 8 ]Null Null nullundefined 未定義 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はほどほどに活用しよう