jQueryの基礎① 〜フォームで指定した大きさで画像を表示させる

Posted

 

jQueryの基礎を勉強しているので備忘録。

 

フォームで指定した大きさで画像を表示させる。

width, heightの大きさをフォームに入力しaddボタンを押すと指定された大きさの画像を表示する。bigボタンを押すと2倍の大きさにする。

というコードを書いてみます。
他にもいろいろやり方ありそうですが以下のように書いてみました。
画像参照は、URLを指定すると適当な大きさの画像を返してくれるlorempixelというサービスを使いました。
※実際のWebサイトだとローカル画像参照ですけどね。
 

<!DOCTYPE HTML>
<html>

<head>

<meta charset="UTF-8">
<title>test</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">	

var valW = 0;
var valH = 0;

$(function() {
	
	//addbuttonを押すと画像を指定した値で表示する
	$("#add").click(function() {
	valW = $('#width').val();
	valH = $('#height').val();
	$("#main").append("<img src='http://lorempixel.com/400/200/food/' width="+valW+" height="+valH+">");
	});
	
	//bigbuttonを押すと、画像の大きさを倍にする
	$("#big").click(function() {
		$("#main").append("<br>");
		valW = valW * 2;
		valH = valH * 2;
		$("#main").append("<img src='http://lorempixel.com/400/200/food/' width="+valW+" height="+valH+">");
	});
});

</script>
</head>

<body>


<form name="charaform">

width:<input type="text" name="width" id="width">
height:<input type="text" name="height" id="height">

<input type="button" value="addbutton" id="add">
<input type="button" value="bigbutton" id="big">

<div id="main"></div>


</body>
</html>

 

①htmlでwidth, height入力用のフォームを用意しidを付与します。
②addボタンとbigボタンを用意し、こちらもidを付与します。

<form name="charaform">

width:<input type="text" name="width" id="width">
height:<input type="text" name="height" id="height">

<input type="button" value="addbutton" id="add">
<input type="button" value="bigbutton" id="big">

<div id="main"></div>

 

③width, heightの大きさを格納しておく変数を宣言します。

var valW = 0;
var valH = 0;

 
※『$(function() {　〜』は、『documentがすべて読み込まれてからscriptを実行する』というお決まりの書き方ですね。

$(function() {

 

④addボタンをクリックしたら、width, heightのフォームから値を取得してvalW, valHに代入します。

※『$(‘#width’).val()』は、id=widthのフォームの値を取得する書き方です。

『$(“#main”).append(〜』以下で、id=mainのタグ配下にの属性を追加し、width, heightに先程取得したvalW, valHを代入します。
※文字列と変数をつなぐ時は、『width=”+valW+”』文字列部分と変数部分を+(連結演算子)で連結します。

	//addbuttonを押すと画像を指定した値で表示する
	$("#add").click(function() {
	valW = $('#width').val();
	valH = $('#height').val();
	$("#main").append("<img src='http://lorempixel.com/400/200/food/' width="+valW+" height="+valH+">");
	});

 

⑤bigボタンをクリックしたら、先程保持していたwidth, heightの値を倍にしてimgタグをappendします。

	//bigbuttonを押すと、画像の大きさを倍にする
	$("#big").click(function() {
		$("#main").append("<br>");
		valW = valW * 2;
		valH = valH * 2;
		$("#main").append("<img src='http://lorempixel.com/400/200/food/' width="+valW+" height="+valH+">");

 
以下、jsdo.itでの実行例です。

 

こういう感じでscriptが書けました。
jQuery独自の書き方に慣れるのは少し手間だけど、うまく動くと楽しいです。

 

いじょ

Posted
Categorized: jQuery