View
2.710
Download
1
Category
Preview:
DESCRIPTION
2014/06/08(日) @株式会社ガイアックス
Citation preview
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
Perl 5.16.3 39.230 sec
【ベンチマーク対決】竹内関数でたらいまわし | 熊本でWEB開発もホームページ制作もしない http://www.mixp.net/javascript/360
JavaScript の特徴
• DOMを操作できる
• 動的型付け
• イベントドリブン
• オブジェクト指向
イベントドリブン
• イベントが起こったら処理が実行される
• ○○ を ×× したときに △△ する
• 例: 送信ボタン を クリック した時に バリデーション をする
JavaScript の特徴
• DOMを操作できる
• 動的型付け
• イベントドリブン
• オブジェクト指向
オブジェクト指向• すべてのデータはオブジェクト
• 関数ですら第一級オブジェクト
• 関数を変数に代入できる
• 関数に関数を渡せる
• えっ でもJavaScriptってクラスないじゃん
• オブジェクトリテラル ≠ クラス
ここまでで何か質問は( ・∀・)ノ
JavaScriptの文法
変数
• var文 を使うと宣言できる • $ 付けなくていい
• 宣言されてない変数にも代入できる • グローバルスコープになってしまう • あまりやらないほうがいい
変数のスコープ
• 外側 → 内側: 見えない • 内側 → 外側: 見える
データ型いろいろデータ型 意味 例
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
オブジェクトリテラル
• RubyやPerlでいうところのハッシュ
• 配列や関数も入れることができる
関数
• return は省略できない
• 引数のデフォルト値は指定できない
演算子いろいろ演算子名 例
代入演算子 = += -= *= /= %= $= ^= |= など
比較演算子 == != === !== > >= < <=
算術演算子 + - * / % ++ ̶ -
ビット演算子 & | ^ ~ << >> >>>
論理演算子 && || !
文字列演算子 + +=
特殊演算子 delete in new this typeof など
文字列演算子
• JavaScriptの文字列連結は「 + 」!!
• 型に注意
条件式
• 後置構文は使えない( 式 if 条件; みたいなやつ )
• () や {} は省略できない
繰り返し(1)
• break でループ終了
• continue で次のループ
繰り返し(2)
• オブジェクトリテラルの要素を順番に取り出す
• foreach と同じ感覚で使うと痛い目見る
DOM関連
windowオブジェクトプロパティ例 意味
window.alert( msg ) アラートを表示
window.confirm( msg ) 確認ダイアログを表示
window.document ドキュメントオブジェクト(後述)
• ウィンドウに関するあらゆるプロパティが取得できる
• 「window. 」は省略できる
documentオブジェクト
• html文書そのものを表すオブジェクト • ここからDOMツリーにアクセスできる
プロパティ例 意味
document.title ページタイトル
document.cookie クッキーデータ
document.getElementById( id )
指定された id を持つ要素オブジェクトを返す
document.getElementsByClassName( class )
指定された class を持つ要素オブジェクトリストを返す
(;́ー`) ふぅ…
とりあえず実行してみよう
実行のしかた• コンソールで実行
• 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はほどほどに活用しよう
Recommended