上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 jQueryというのは、私たちのようにプログラムがよく分からない人向けの「ライブラリ」というモノです。

 Javascriptと言うものは、HTMLやCSSのように、最初に描画したら後は何もしない…と言うものではなく描画が終わった後も何かを動作させる「動的なプログラム」のコトです。
 例えば、当サイトにあるアドセンスも、高度なJavaスクリプトが利用されています。
 このJavaスクリプトを、初心者向けに「解りやすくした」構文がjQueryなんです。

 JavaスクリプトもjQueryも、意味不明ですか?

 いえいえ、HTMLとCSSを理解していれば、文系の私でさえ、なんとかかんとかいじくることが出来るんです。描画し終わったHTMLやCSSを動的(マウスクリックや、何秒後とか、ランダムとか)に書き換えるのは、楽しいし、何よりブログを「リッチコンテンツ」に見せかけることも出来ます。
 取りあえず、「jQuery日本語リファレンス」を参考に、まずは使ってみます。




出来ること



 まずは、どんなことが出来るのかみてみてください。

 
ボックス開け閉めのテスト。ボックス開け閉めのテスト。ボックス開け閉めのテスト。ボックス開け閉めのテスト。ボックス開け閉めのテスト。ボックス開け閉めのテスト。ボックス開け閉めのテスト。ボックス開け閉めのテスト。ボックス開け閉めのテスト。ボックス開け閉めのテスト。
sample

 こんなの、「スクリプトで組んでください」といわれても、さっぱり解りませんが、jQueryを使えば、簡単に作れてしまったりします。



まず準備



 最初に、Javaスクリプトを簡単にする為のJavaスクリプト、jQueryをブログ上で呼び出す設定をします。
 これ、スゴイ簡単にできます。自分のサイトにアップロードするまでもなく、Googleが「ウチのサイトから呼び出しても良いよ」ッテな感じで、めちゃくちゃ太っ腹なので、有り難く使わせてもらいましょう。

Google Libraries API - Developer's Guide - Google Libraries API - Google Code

 <head>内に、以下のHTMLコード(Javaスクリプト外部ファイル呼び出し)を記述すれば、コレで準備は完了です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
※バージョンが古くなっている場合がありますので、上記リンクから最新のモノをチョイスすることをお勧めします。



決まり事



 jQueryでは、CSSと違い、存在しない「クラス」や「ID」を呼び出そうとすると、エラーが出ます。
 HTML上で記述する場所は、「必ず弄るDIVやSPANなどの後」か、「Javaスクリプト側で、HTMLが最後まで読まれたか確認してから動かす」ようにしないとイケません。

 例えば…

  :
  :
<script type="text/javascript">
$("div#test").css("display"."none") ←jQuery(Javascript)
</script>
  :
<div id="test">ボタン</div>
  :
  :
コレだとエラーになります。スクリプトは、ページで記述が出てきたところで実行されますから、スクリプトの後に記述されている「クラス」や「ID」は、この時点ではまだ存在していないためです。

  :
  :
<div id="test">ボタン</div>
  :
<script type="text/javascript">
$("div#test").css("display"."none") ←jQuery(Javascript)
</script>
  :
  :
 こちらであれば、正常に動作します。HTML上での書き順ですね。こちらは、スクリプトが読み込まれ実行される直前にすでに指定の「クラス」「ID」の記述が終わっていますから、スクリプトは、指定されたクラスやIDに対してアクションを起こせる訳です。
 要するに、先に「HTML」その後に「jQuery」という書き方をします。





HTMLを汚さず、Javaスクリプト側ですべて制御する

 これは、HTML上での「書き順」に拘わらず、スクリプトを「ページが完全に読み込み終わったら作動させる」という構文を使う方法です。読み込みが早いサーバーを利用出来る場合は、こちらの方が合理的で、しかも、HTML記述が綺麗になり、スクリプトを外部ファイル化すれば、SEO的にも効果が高まります。

 この場合は、以下のように書き、「HEAD」内にすべてのjQuery…Javaスクリプトを収めることが可能です。

<head>
  :
  :
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){

この中に、jQueryの構文、Javaスクリプトの構文を書く。

   });
 </script>
</head>
<body>
  :
  :

 これで、準備は万端です。
 次のページでは、テンプレート編集画面を開いて、まずは基本的な使い方を覚えていきます。




このエントリーをはてなブックマークに追加
Fri.01.27.2012
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。