Archive for the ‘JavaScript’ Category

2010年10月02日に投稿

[Javascript] 特定のチェックボックスがチェックされているか確認する

特定のチェックボックスがチェックされているかどうかを確認する Javascript のサンプルコードです。

HTML JavaScript チェックボックス

2010年06月09日に投稿

Javascript で経過日数を計算する

Javascript で YY/MM/DD 形式の文字列をシリアル値に変換して計算する機会がありました。そこで利用した関数が parse 関数です。parse 関数は YY/MM/DD 形式を引数として渡すとシリアル値を返します。

下記のコードは2010年5月15日のシリアル値をアラートで出力します。

<script type="text/javascript">
    var n = Date.parse("2010/05/15");
    alert(n);
</script>

var n = Date.parse("2010/05/15");

alert(n);

</script>

今日が5月15日から何日経過しているのかを出力する場合は今日のシリアル値との差分を求めることで経過日数を算出できます。

<script type="text/javascript">
    var n = Date.parse("2010/05/15");
    var m = new Date();
    var x =(m - n)/1000/60/60/24;
    x = Math.floor(x);
    alert(x);
</script>

var n = Date.parse("2010/05/15");

var m = new Date();

var x =(m - n)/1000/60/60/24;

x = Math.floor(x);

alert(x);

</script>

シリアル値の単位はミリ秒なので日単位に変換する必要があります。最後に小数点以下を切り捨てて表示させれば経過日数になります。

2010年05月31日に投稿

jQueryを学ぶためのリンク集

1. 概要の理解
jQueryを一切知らない場合はまずは概要の理解から始めます。

ノンプログラマーのためのjQuery入門
http://www.slideshare.net/hayatomizuno/jquery-7665168

はじめてのjQuery
http://higashizm.sakura.ne.jp/jquery_first/

2. 基本的な使い方を理解する
サンプルを見ながら具体的なコードを作成し理解を深めます。

40分で覚えるjQuery速修講座
http://ascii.jp/elem/000/000/498/498710/

jQuery基礎文法最速マスター
http://blog.webcreativepark.net/2010/02/02-111519.html

jQueryサンプル集
http://www.designwalker.com/2008/04/jquery.html

[JS]jQueryのプラグイン33+1選 -2010年3・4月
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2010-mar.html

3. リファレンスを参照する
jQueryの使い方や文法をある程度理解したら、メソッドに渡す引数や挙動を調べながらコーディングを進めます。

jQuery日本語リファレンス
http://semooh.jp/jquery/

jQuery逆引きリファレンス
http://www.atmarkit.co.jp/fdotnet/jqueryref/index/index.html

4. 深く知る
さらに精進したい場合はJavascript自体の仕様を調べたり、jQueryのソースコードを参照して理解を深めます。
オリジナルのプラグインを開発することもできます。

jquery.jsを読み解く
http://gihyo.jp/dev/feature/01/jquery

jQueryを使い始めたときに感じる13の疑問
http://tech.kayac.com/archive/jquery-first-questions.html

JavaScript jQuery

2010年05月30日に投稿

[jQuery]マウスオーバーで画像の透明度を変更する

ページが読み込まれた段階では、薄くなった状態で表示され
マウスオーバーで透明度を0にします。
この動作を簡単に実現するために、jQueryを使用します。

サンプル
books

コード
[javascript]
$(function(){
$(“#target_image”).fadeTo(0,0.2);
$(“#target_image”).hover(
function(){
$(this).stop().fadeTo(“fast”,1.0);
},
function(){
$(this).stop().fadeTo(“fast”,0.2);
}
);
});
[/javascript]

2行目
IDがtarget_imageの要素をfadeTo関数で透明度を0.2にします。

3行目
IDがtarget_imageの要素にマウスオーバーした時の動作を定義します。
マウスオーバーとマウスアウトした時の動作はhover関数を使用します。
hover(マウスオーバーの動作,マウスアウトの動作)
マウスオーバー時に透明度0に、マウスアウト時に透明度を0.2に戻しています。