how_to_javascript_7

プログラミング実況解説 †

じゃんけんゲーム

↑

画像を動かしてみよう †

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

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>

↑

なぞってサーチ †

下記のページを自分のPCに保存してください。

なぞってページ

以下を順番に進めてください。

まずは黄色ボックスを初期状態で消してください（CSS、JavaScript どちらで消しても良いです）

マウスアップさせたらマウスの位置の近くに黄色いボックスを出現させましょう

黄色いボックスの中に選択した文字列を表示させましょう

20文字以上の文字が選択されていたら、黄色いボックスを出すのをやめよう
　※ 関数の中で「return;」という命令を実行すると、それ以降の処理を行わずに関数処理が終了します。

何も選択されていなかったら黄色いボックスを出すのをやめましょう

表示させた文字列にLeafbank検索結果へのリンクをつけましょう（target="_blank"）

↑

いろいろ †

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

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

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

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

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

※このやり方はIEだと動きません。
※空文字列と連結していることで、オブジェクトを無理やり文字列に変換しています。

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

http://leafbank.jp/web/?Keywords=ec%E3%83%8A%E3%83%93%E3%82%B1%E3%83%BC%E3%82%BF%E3%82%A4

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つだけにしてください。たくさんタイマーイベント使うと処理が重くなります。

素材画像

↑

もっとなぞってサーチ †

なぞってサーチを拡張
いろいろやってみよう（IE対応等）