Pebble Coding

プログラマーの作業メモ

DOM、jQueryの動作確認環境(Safari)

DOMとjQueryの動作確認はspidermonkeyではできないので、ここではSafari8(MacOSX 10.10最新)を使います。以下環境構築手順です。

1) jQueryのサイトからをjquery-1.11.2.jsというファイルをダウンロードします。
具体的には「Download the uncompressed, development jQuery 1.11.2」のリンクを右クリックし、「リンク先のファイルを別名でダウンロード」します。
Download jQuery | jQuery

ダウンロードしたファイルは/Users/pebble8888/jquery-1.11.2.jsに配置しました。

2) /Users/pebble8888/test.htmlファイルを新規作成し、以下の内容で保存します。
test.jsのスクリプトタグをbodyの終了直前に置いているのはおまじないです。

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-1.11.2.js"></script>
  </head>
  <body>
    <h1>before</h1>
    <script src="test.js"></script>
  </body>
</html>

3) /Users/pebble8888/test.jsファイルを新規作成し、以下の内容で保存します。
$はjQueryのオブジェクトです。

$('h1').text('after'); 

4) ブラウザ(Safari)でURLに「file:///Users/pebble8888/test.html」を入力します。

f:id:pebble8888:20150211114919p:plain

h1タグの内容がbeforeからafterに置き換わっていることが確認できます。 Safariではメニューに開発を表示させウェブインスペタを表示すると、下半分のような画面が表示されます。
これで、DOM、jQueryの動作検証を進められます。