▶ JavaScript

第７回「jQueryでのプログラム制作」 - 360°スゴイ JAVA SCRIPT 講座

プログラミング実況解説

じゃんけんゲーム

画像を動かしてみよう

動かす画像を選んでください

  • jQueryとタイマープラグインをHTMLと同じパスに置いてください。

  • 下記HTMLで画像を表示してください。（HTMLのimgタグに画像ファイル名を書いてください）

  • JavaScriptで 200ミリ秒 ごとに画像の表示を右に 5px ずらしてください。

  • 画像が右に 600px 以上になったら、画像の移動を止めてください。

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.timers-1.0.0.js" type="text/javascript"></script>
<style rtpe="text/css">

#move{
	position: absolute;
	top: 100px;
	left: 100px;
}

</style>
<SCRIPT LANGUAGE="JavaScript">
<!--

$(function(){
	
	/* ページ作成終了時のイベント定義 */
	
});

// -->
</SCRIPT>

</head>
<body>

<img id="move" src="XXX.gif" />

</body>
</html>

いろいろ

要素中のテキスト(文字列)中でマウスアップで実行されるイベント

$("要素").mouseup(function(ev){
     /* 実行内容 */
});

関数から渡される変数（ev）には、いろいろな情報が詰まっています。

  • マウスの座標
    ev.pageX ev.pageY

  • 選択された文章の取得（変数 selectText に取得できます）
    var selectText = '' + window.getSelection();

※このやり方はIEだと動きません。

※空文字列と連結していることで、オブジェクトを無理やり文字列に変換しています。

リーフバンクの検索結果画面URL

http://leafbank.jp/web/?Keywords=ecナビケータイ

http://leafbank.jp/web/?Keywords=【URLエンコードされた検索文字列】

http://～ で始まるURLにはルールがあって、日本語が使えません。

URLエンコードという処理をして日本語を英語圏の文字に変換します。

JavaScript では、encodeURIという命令で文字列をURLエンコードできます。

var encstr = encodeURI("変換したい文字列");

要するに、下記のようなリンクを「黄色いエリア」に JavaScript で作ればOKですよね。

<a href=http://leafbank.jp/web/?Keywords="ec%E3%83%8A%E3%83%93%E3%82%B1%E3%83%BC%E3%82%BF%E3%82%A4" target="_blank">ecナビケータイ</a>

お疲れ様でした

お疲れ様でした。

これで全７回の「360°スゴイ JAVA SCRIPT 講座」は終了です。

これからについて

まずは覚えた jQuery Core を実務で使えるようになってください。

JavaScript の仕組み、メソッド、プロパティ、用意されている関数など、さらに勉強してください。

あと、人が作ったプログラムを見るのは勉強になります。

次のステップ

  • Ajax
    jQuery UI
  • いろいろな人が作ったライブラリ

本やWEBでプログラムを見る

人のプログラムを読む際のちょっとした注意点

  • if文の処理内容が1行だったら { } は省略可能
    if( no==10 ) {
no = 1;
}

    　　　↓
    if( no==10 ) no = 1;
    　　　↓
    if( no==10 ) no = 1;

　

  • $("要素") は jQuery("要素") という書き方もOK
    $("#hoge").show();

    　　　↓
    jQuery("#hoge").show();

　

  • document readyイベントをちゃんと書くのもOK
    $(function(){
/* プログラム */
});

    　　　↓
    $(document).ready(function(ev){ /* プログラム */ });

　

  • 変数に入れる必要がなければ、変数に入れない
    var img_path = $("#photo").attr("src");
$("#showImage").attr( "src", img_path );

    　　　↓
    $("#showImage").attr( "src", $("#photo").attr("src") );

　

  • 変数(箱)を作るのと、変数に値をいれるのは同時に出来るよ
    var path;
path = "JavaScriptプログラミング講座";

    　　　↓
    var path = "JavaScriptプログラミング講座";

講座卒業制作（宿題）

来週までに「講座卒業制作」として「何かjQueryを使用したページ」を作ってください。

どんな些細なことでもいいので、自分のオリジナルアイディアをページに盛り込んでください。

もし、ネタが思いつかない人は以下のどれかを作ってください。

野球拳ゲーム

  • ジャンケンゲームを拡張
  • ジャンケンに勝つと対戦者が服を脱ぐ
  • お互いライフは３

※ 会社なので「やんちゃな画像」は禁止です（笑）

素材画像

COOLな時計

  • 時計を拡張
  • カッコいい数字画像で時刻を表示！
  • 美人時計でも可（画像を用意するのが大変ですが）

素材画像

COOLな画像ビューア

  • アルバムページを拡張
  • とにかくカッコよく！

アクアゾーン（水槽）

  • 画像移動プログラムを拡張
  • 複数の魚が画面を泳ぎます（１匹でも可）
  • 画面端まで行くと向きを変えて泳ぎます

※タイマーイベントの設定は1つだけにしてください。たくさんタイマーイベント使うと処理が重くなります。

素材画像