jQuery leeson

jQuery問題

下記の問題をラジオボタンにチェックを入れて解答ボタンを行っていってください
及第点は80点です！

問題１

jQueryはどのプログラム言語のライブラリでしょうか。

問題2

HTMLファイルにはjQueryしかプログラム言語は書き込めない。○か×か

問題3

jQueryのライブラリを読み込むときにHTMLファイルのhead内で使用するタグはどれ？

問題4

jQueryで1行のコメントアウトをしたいときどれをつかう？

問題5

JavaScriptファイルの拡張子は？

問題6

$('要素')←これはなんという？

問題7

条件分岐のときに使われる文はどれ？

問題8

W3Cから勧告されているHTML文章などをアプリケーションから利用するAPIはどれか

問題9

jQueryの弱点は？

問題10

JavaScriptのライブラリではないものはどれ

問題 解答
得点

お疲れ様でした。及第点にいかなかった場合は再度チャレンジしてみてください。

上記の問題をクリアできたかた用の問題です。
下記の要件を満たすアプリケーションを作成してください。

自動販売機を模したアプリケーションを作成してください。
テキストボックスにユーザーが金額を入力。
支払いボタンを押すと、下記の条件でテキストを表示してください。
金額がちょうどの場合は
ちょうどですありがとうございます。というテキストを表示
多い場合は
～～円のお釣りです。ありがとうございます。というテキストを表示
金額がちょうどの場合は
～～円たりません。というテキストを表示
商品の金額は、作成者次第
商品の種類は、作成者次第
繰り返し買い物ができるかは、作成者次第
ユーザーインターフェースも、作成者次第

val()メソッドで取得した値は文字列です。そのままでは計算がでいないので、数値に型変換を行うために、parseInt()メソッドを使用します。

//input要素のvalue値を取得し、10進数の数値として変数valに代入する式                        
var val =  parseInt($('input').val(),10);

UIサンプル

お金をいれてください。円

自販機のメッセージ欄

おまけ

スクロールに反応してフェードインするボタン

IF文を活用すれば、スクロール量に応じてフェードインするボタンがつくれますよ。下記ソースはこのページに実装しているソースですので、参考にしながら自分のページでつかってみましょう。 

	var top_btn = $('#cent a');
	var off_src = top_btn.find('img').attr('src');
	var on_src = off_src.replace(/^(.+)_off(\.[^\.]+)$/,'$1_on$2');
    //変数isHiddenで真偽値のみで、現在のボタンの表示状態を表します。そのための初期化を行っています。
    //真偽値（ブーリアン値）とは、trueかfalseの2種類のみ値です。if文の条件式にtrueの値がはいっている場合はtureの処理をします。falseの場合はその逆です。
	var isHidden = true;
	
	top_btn.hide();
	
	new Image().src = on_src;

//.scrollイベントを使用すると、スクロールしたときにイベントが発生します。現在のスクロール位置が取得できます。	
	$(window).scroll(function () {
//scrollTop()メソッドでスクロールした位置を取得して、その値が３００PX以上かどうか判定しています。
		if( $(this).scrollTop() > 300 ) {
			if( isHidden ) {
				top_btn.stop(true,true).fadeIn();
//現在表示されている状態のフラグとして、isHidden変数をfalseにしています。	
				isHidden = false;
			}
		} else {
			if( !isHidden ) {
				top_btn.stop(true,true).fadeOut();
				isHidden = true;
			}
		}
	});

cssでページボタンのpositionをfixedにしておいてくこともみそです。

上へ