2013年04月19日

jQuery学習 - その1

0.はじめに
仕事でめっきり管理が多くなった関係でコーディングすることがだいぶへりました。
そんな中、Webの仕事ではjQueryを使うことが多くなりました。
しかし自分はjQueryの知識がない、、、上がってくるプログラムを読んでも、これがあっているのか?判断がつかなかったりします。
そこで一から空いた時間を使って、jQueryの勉強していきたいと思います。

1.モジュールのダウンロード
1-1. jQueryの種類
・jQuery - http://jquery.com/
・jQuery UI - http://jqueryui.com/
・jQuery Mobile - http://jquerymobile.com/
・Sizzle - http://sizzlejs.com/
・QUnit - http://qunitjs.com/

今回は全くの無知であるため「jQuery」を勉強していきたいと思いますので、 jQueryサイト(http://jquery.com/)からモジュールをダウンロードします。
ダウンロード先は「http://jquery.com/download/」になります。

1-2. 1.x系と2.x系
2013/04/19の時点では1.x系と2.x系の2パターンがあります。
何が違うのか、、、どうやらAPIは共通なのですが、2.x系はIE6~8がサポート対象外のようです。
自分はIE使わないので2.x系で勉強進めます。

1-3. compressedとuncompressed
compressed - コメントや改行などを削除してサイズを極力少なくしているものです。
uncompressed - コメントやインデントがしっかりあるのでコードを読むときはこちらがよいです。
今回は勉強なので「uncompressed」を利用します。

2. 基本設定
以下のサイトをもとに勉強を進めていきたいと思います。
How jQuery Works - http://learn.jquery.com/about-jquery/how-jquery-works/
まあまあ、普通にjavascriptの定義でjQuery読み込んでいるだけですね。
以下のそれぞれの処理は「// Your code goes here」の位置に記述していきます。

2-1. javascriptのイベントへ設定
Javascriptの各イベントへ設定したい場合は以下のように記述する。
上記ではページ読み込みの際のonLoad()イベントで指定した処理(今回はメッセージを表示)を実行します。

2-2. jQuery独自イベントへ設定
上記のonLoad()イベントと同様に、jQuery独自のイベント処理で設定することも可能。
ready()のように独自のイベントがjQueryでは定義されています。
参考:http://api.jquery.com/ready/
注意:通常のonLoad()と併用した場合、ready()→onLoad()の順番に処理される。

jQueryでは各要素を指定する場合、「$(名称)」が使用される。

2-3.Click時のイベント設定
Click時に呼び出されるClick()イベントへ処理を登録しています。
ready()イベントにて呼び出された際のイベントを事前に定義しています。
ただし、上記の場合はメッセージが表示された後にaタグの通常処理が実行されたページが遷移してしまいます。
これを防ぐためには以下の処理をalert()文の下に挿入することで、イベント本来の処理をキャンセルすることができます。




今回使用したサンプルコード






posted by bob.san at 18:27| Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

google Analyticsをseesaaへ設定

1.google analyticsへサイトを登録
google analyticsのサイトよりサイトを登録して、トラッキングIDとトラッキングコードを発行する。
今回は「Universal Analytics」で発行しています。

2.seesaaのデザインへ設定
デザインからHTML編集にて
タグを閉じる手前にトラッキングコードを記述する。


3.アクセス状況の確認
google analyticsのリアルタイムモニタを監視して、設定したブログへアクセスした際にカウントされるかを確認する。
ga_realtime.PNG
※設定直後の場合、すぐにカウントされない場合があります。その場合はしばらくしてから確認してください。
posted by bob.san at 15:22| Comment(0) | アクセス解析 | このブログの読者になる | 更新情報をチェックする

SyntaxHighlighterをseesaaへ設定

1.SyntaxHighlighterのダウンロード
サイト:http://alexgorbatchev.com/SyntaxHighlighter

サイトの右側にあるメニューより「download」を選択する。
ダウンロードページからモジュールをダウンロードします。
※2013/04/19時点ではversion3.0.83が最新版でした。

2.SyntaxHighlighterの解凍
ダウンロードしたファイルを解凍すると以下のフォルダが作成されます。
・compassフォルダ
・scriptsフォルダ
・srcフォルダ
・styleフォルダ
・testsフォルダ
・index.html
・LGPL-LICENSE
・MIT-LICENSE

3.必要ファイルのアップロード
以下の導入手順はサイトの「instllation」を参考に行っています。

以下のファイルをseesaaのファイルアップロード機能にてアップロードします。
【対象ファイル】
・scriptsフォルダ内のファイル
・stylesフォルダ内のファイル
【アップロード先】
・syntaxフォルダ(新規に作成しました)

4.デザインへの定義設定
seesaaのデザインからHTMLに対して<header>タグ内へ以下を記述します。
※shBrushXXX.shファイルは記述する言語に合わせて必要な物を定義してください。
※各種パスは環境に合わせて設定してください。



記述例:
※<pre>タグでも記述はできますが、seesaaの場合に改行タグが自動設定されるため、scriptタグで定義しています。
※コードへタグを記載する場合はエスケープする必要があります。

posted by bob.san at 14:48| Comment(0) | プログラム | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。