JavaScriptことはじめ2014/06/08(日) @株式会社ガイアックス

ほと（@hoto17296）

• 株式会社ガイアックス新卒エンジニア

• Ruby好き

• JavaScript歴８年くらい

今日やること

• (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 条件; みたいなやつ ）

• () や {} は省略できない

繰り返し(１)

• break でループ終了

• continue で次のループ

繰り返し(２)

• オブジェクトリテラルの要素を順番に取り出す

• 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指数を計算する

• 小数点第２位で四捨五入する

• 計算結果を表示する

～～ 昼休憩 ～～

jQuery とは

• JavaScriptライブラリ

• JavaScriptをより簡潔に記述できる

• 特にDOM操作やAjaxがやりやすい

jQuery とは

• バージョン １系 と ２系 がある

• １系： IE8対応

• ２系： 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はほどほどに活用しよう