Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Dreamweaverを使ったjQuery入門
前編 ~jQueryの概要とコーディングルール解説

原題:jQuery入門 with Dreamweaver CS5.5 前編

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルソース (41.7 KB)

目次

Dreamweaver CS5.5におけるjQuery開発を支援する機能

 jQueryを用いたJavaScriptプログラムを記述するにあたり、Dreamweaver CS5.5を使用すると、以下に示すようなメリットがあります。

強力なシンタックスハイライト機能

 DreamweaverはCSSやJavaScriptの文法を深く理解しており、予約語や文字列、コメントなどをわかりやすく色分けしてくれます。また、構文エラーがあるとすぐに示唆してくれます。一般的なエディタとは異なり、HTMLファイル内にscript要素やstyle要素を用いて記述したJavaScriptやCSSについても、問題なくシンタックスハイライトや文法チェックが行われます。

図5 Dreamweaverはシンタックスエラーを報告してくれる
図5 Dreamweaverはシンタックスエラーを報告してくれる

jQueryにも対応したコードヒント機能

 Dreamweaverは強力なコードヒント機能を備えており、JavaScriptのコーディングを手助けしてくれます。JavaScriptの基本的なオブジェクト(window/document/文字列など)に対応しているだけではなく、jQueryにも対応しているのがポイントです。例えば、$()にCSSセレクタを与えようとすると、ページ内のid属性やclass属性の値を補完候補として表示します。

図6 id属性の候補が表示されているところ
図6 id属性の候補が表示されているところ

 また、jQueryオブジェクトに続けてピリオドを入力すると、利用できるメソッドの一覧が表示されます。なお、Dreamweaver CS5.5が対応しているjQueryのバージョンは1.5相当です(この原稿執筆時点での最新版は1.7.1ですので、少し古いバージョンです)。

図7 メソッドの一覧が表示されているところ
図7 メソッドの一覧が表示されているところ

おわりに

 今回は、jQueryの基礎知識とDreamweaverを用いたコーディングについて紹介しました。後編では今回のサンプルを改善しながら、jQueryを使用したアニメーションの実現やイベント処理など、より高度なトピックについて紹介します。

こちらもおすすめ!Dreamweaver CS5.5 参考情報



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5