上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

超簡易版の画像を入れ替えるJavaScript。画像を入れ替えるだけの本当に簡単なものです。


JavaScript

function change( pict ){
	document.mainImg.src = pict;
}

HTML

<div id="main_view">
	<img name="mainImg" src="twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="twitter.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="google" src="google.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="flickr" src="flickr.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="facebook" src="facebook.png" width="48" height="48" onclick="change(this.src);" /></li>
</ul>

CSS

#main_view{
	width: 230px;
	border: 1px solid #999;
	margin: 10px 10px;
	padding-left: 30px;
}
#item_list li{
	float: left;
	list-style: none;
	border: 1px solid #999;
	margin: 0 10px 0;
}

仕組みとしてはli要素にonclickイベントで大きく表示されている画像のsrc属性を変更する というもので、引数にthis.srcとすることでli要素に設定されている画像のsrc属性を取得しています。なので、li要素に設定されているのと同じ画像が大きな画像として表示される形になっています。この方法はサムネイル画像を用意しなくてもいいという利点がありますが、表示させたい画像が大きければ大きいほどサムネイルの画像容量が大きくなるという欠点があるので実用には向かないかと… あくまで習作のものですね。
※注意 li要素に設定されているsrc属性は実際のものとは異なります。



今回は前回書いたソースを元にjQueryの書き方の基礎を解説していきます。
さて、前回のソースにおいてjQueryにあたるのは下記の3行です。

$(function(){
        $("p").text("Hello,World");
    });

実際にテキストを表示する動作をしているのは下記の部分です。
まずはここから解説していきましょう。

$("p").text("Hello,World");

1.セレクタ

jQueryにはCSSと同様にセレクタという概念があります。
書き方がCSSのセレクタと非常に似ているので理解しているのであればすぐに書き方がわかると思います。

まず、基本的な書き方は3つです。

  • $(" #id名 ")
  • $(" .class名 ")
  • $(" タグ名 ")

それぞれ、#idでは指定したidが設定されている要素、 .classでは指定したclassが設定されている要素、 タグ名では指定したタグの要素へとアクセスすることができます。今回は $("p") となっているので、<p>タグへのアクセスとなります。

2.メソッド

jQueryでは基本的にセレクタで要素にアクセスし、メソッドを使って処理を行います。
今回は .text("Hello, World") がメソッドの部分になります。

textメソッド : text(val)
対象となる要素にテキストを設定します。

対象は前に書かれたセレクタに対応する要素です。なので、$("p").text("Hello,World"); というのは <p>タグ全てに"Hello, World"のテキストを設定する という動作になります。実際に、前回のHTMLソースでは <p>タグ内には何も書いていなかったはずなのにブラウザで読み込んだときには Hello,World というテキストが設定されていたのがわかると思います。

次に全体を括っている$(function(){ })について解説します。
これはページが読み込まれたときに実行するというメソッドで、古い書き方では$(document).ready(function(){ })となるそうです。動作としてはHTMLタグにonloadプロパティでJavaScriptを指定したときに同じ動作になります。つまり、$(function(){ })の内部に処理を書くとページが読み込まれたときにその処理が実行されることになります。

以上を踏まえた上で、前回のソース全体を見直してみましょう。

$(function(){
        $("p").text("Hello,World");
    });
いかがでしょうか。「ドキュメントが読み込まれたら、<p>タグ全てに"Hello,World"というテキストを設定する」というのが読み取れますでしょうか?

今回はここまでです。次回はセレクタにおけるフィルタについて勉強します。というのもjQueryのセレクタは非常に強力でフィルタを組み合わせることによってスマートに対象の要素にアクセスできるからです。

では、また次回。
jQueryを勉強するがてら、勉強したことをブログ記事にしようという企画
まだまだjQuery初級者なので進めて行くうちにおかしいところや間違っているところが混ざっている可能性があるのでご注意ください。

1.jQueryの設置

まずはjQueryの入手から。これはものすごく簡単でhttp://jquery.com/からjquery.jsをダウンロードします。
何も考えずにDownloadボタンをクリックしてください。そうするだけでjQueryのJavascriptファイルがダウンロードできます。ダウンロードされるファイルの名前がjquery.1.3.2.min.jsとなっているのでこのときに必要であればファイル名を変更してください。

2.jQueryの使い方

次にjQueryの使い方です。使い方と言っても今回説明するのは「jQueryを使う為の準備」です。やることはたった1つで、タグの中でjQueryを外部読み込みをするだけ。とっても簡単。但し、必ずjQueryを一番最初に読み込ませるように記述してください。
例. <script type="text/javascript" src="js/jquery.js"></script>

3.jQueryで書く"Hello,World"

わずか2ステップでjQueryが使えるようになりました。そこでプログラミング初歩の定番"Hello,World"をjQueryで書いてみましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Hello,World</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$("p").text("Hello,World");
	});
</script>
</head>
<body>
	<p><!-- Hello,World --></p>
</body>
</html>
 
うまくjQueryがロードできていれば HelloWorldが表示されると思います。

今回はjQueryの設置、使い方からHello,Worldまでやりました。次回はjQueryの書式について触れたいと思います。

参考サイト:jQuery入門 (ver 1.3)

どうしてプログラマに・・・プログラムが書けないのか?
1から100までの数をプリントするプログラムを書け。ただし3の倍数のときは数の代わりに「Fizz」と、5の倍数のときは「Buzz」とプリントし、3と5両方の倍数の場合には「FizzBuzz」とプリントすること。

上記のページに触発されて、ちょっくらFizzBuzz問題をJavaScriptで書いてみました。

コードはこんな感じ。
function FizzBuzz(){
  var n;
  for( n = 1 ; n <= 100; n++){
    if( n % 3 == 0 && n % 5 == 0 ){
      document.write("FizzBuzz
"); }else if( n % 3 == 0 ){ document.write("Fizz
"); }else if( n % 5 == 0 ){ document.write("Buzz
"); }else{ document.write(n + "
"); } } window.stop(); }
もっとスマートに処理できるかどうか1日考えてみましたが思いつかず…。
なんかいいアイディアがありましたらコメントいただければ助かります。

いい方法あるかなぁ?

Powered by ScribeFire.

JavaScriptで日付型変数を生成する際に気をつけるべき1つのポイントがあります。
それは”月が0基点で始まっていること”。

なぜだかわかりませんが、月の値が0から始まっているんです。
ざっくり、一覧にすると下記ような感じ。

0, 1月4, 5月 8,  9月
1, 2月5, 6月 9, 10月
2, 3月6, 7月10, 11月
3, 4月7, 8月11, 12月

故に、"2009-06-10T19:00:00+09:00"みたいな文字列から日付型変数を生成する際には
月の部分だけ、文字列を切り取っただけではなく数値を -1 して調整する必要があります。
以上、JavaScriptで日付型を生成するときに気をつけるべき1つのポイントでした。

Powered by ScribeFire.

openclose

カテゴリ一覧

そま宗助

  • Author:そま宗助
  • タイ生まれのちょっと変な?日本人。
    農学博士の父とブラジル日系1世の母の間に生まれたため、普通の日本人とはちょっと違う視点で世界を見つめる男。

    最近、勉強会やカンファレンスにちょいちょい顔出ししてます。

    読書週間継続中?

    ストレングスファインダー
    1.収集心
    2.学習欲
    3.共感性
    4.指令性
    5.運命思考
プロフィール

※注意書き※
当ブログに掲載されているJavaScriptの動作確認はFirefoxでのみ行っております。他ブラウザでの動作に関しては保障できませんのでご注意ください。






1キロバイトの素材屋さん
フリーエリア
FC2カウンター

名前:
メール:
件名:
本文:

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

| Template Design by スタンダード・デザインラボ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。