ここから本文です

JavaScriptに関する簡単な質問です。

chi********さん

2012/9/2123:14:08

JavaScriptに関する簡単な質問です。

<script>

var image1=new Image();
image1.src = "image/ny.jpg";

var image2=new Image();
image2.src = "image/tokyo.jpg";

var i = 1;

function change(){

if(i==1){
element.src=image2.src;
i=2;
}else{

element.src=image1.src;
i=1;
}

}



</script>

<img id="photo" src="image/ny.jpg" />

<script>

var element = document.getElementByid("photo");

element.onclick=change;

</scropt>

オンクリックで画像が切り替わるというスクリプトなのですが、

new Image() というのは new date() と言うのと関係しているのでしょうか。

var i=1 と言うあたりからよくわからなくなってしまいます。

最後のelement.onclick=change;と言うのもよくわかりません。

スクリプトを平易な日本語で、簡単に説明してもらえるとありがたいです。

よろしくお願いします。

補足とても詳しい解説ありがとうございます。大変感謝しています。
Javascriptは変数にimageを直接代入できないという理解で正解でしょうか。PHPだと直接代入できると教わったのですが・・・・。 img.src = ””; img.border = 1; img.width = 100; img.height = 100; img.hspace = 10; img.vspace = 10; このようにかけると。var image1=new Image(); この()の中に何か入れることはあるのでしょうか。

閲覧数:
351
回答数:
3
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

ven********さん

編集あり2012/9/2302:20:52

こんにちは♪

■ 補足に対して ■

んー、「変数にimageを直接代入」というのが、
どういうことを言っているのか分からないですが、
変数 = new Image();
という書き方は、PHP も JavaScript も同じで、
変数 = Image();
という宣言はできません。・ω・)

img.src = "~";
img.border = 1;

という指定は、「var img = new Image();」という宣言のあとであれば、
JavaScript でも記述できます。
「var img = new Image();」がなければ、
img.src = "~";
などは、記述出来ないです。

「new Image();」の ( ) には、
「幅(width),高さ(height)」を数値で指定することが出来ます。
┌----[ 例 ]----
var image1 = new Image(240,320);
└--------
もちろん、省略してもOKです♪
省略した場合には、
「image1.src="~"」 で参照した画像の幅、高さになります・ω・)o
┌----[ 上記の例と同義 ]----
var image1 = new Image();
image1.width = 240;
image1.height = 320;
└--------

■ 以下、最初の回答 ■

まず、
JavaScript の基礎知識をお持ちでないようなので、
質問のソースが含んでいる基本要素について、
1つずつ説明してきますね゜▽^)o

■ var 変数名 = 値 ■

JavaScript では、
値を格納するための箱「変数」を使って、
計算や処理を進めていきます。
┌----[ 例:計算 ]----
変数1 = 4;
変数2 = 3;
変数3 = 変数1 + 変数2;
├----[ 結果 ]----
変数3 に、値「7」が格納されます。
└--------

変数は、
スクリプトを記述する人が、
自分で名前を付けて、自分で作って使います。
まだ作っていない変数を、
いきなり登場させてはいけません。
変数を使うときは、その変数を作らないといけないのです。
この、変数をつくる操作を「変数の宣言」といいます。
例として、myNum という変数を「宣言」するには
┌----[ スクリプト ]----
var myNum;
├----[ 意味 ]----
変数を宣言します : myNum
└--------
ちなみに、「var」は「変数(variable)」の略です♪

変数は、
宣言するのと同時に、値を格納することが出来ます。
┌----[ スクリプト ]----
var myNum = 3;
├----[ 意味 ]----
変数を宣言します : myNum
myNum に 3 を代入します
└--------


■ var 変数名 = new オブジェクト名 ■

変数に格納できるのは、数値だけではありません。
「オブジェクト」を格納することも出来ます。
「オブジェクト」は、
スクリプトの中で「画像」とか「文字列」とか、
取り扱う対象を「物」として定義したもので、
一般的な処理に必要なオブジェクトは
標準で用意されているので、それを使います・ω・)ノ

例えば、
画像オブジェクト Image() は、
画像の幅(.width)、高さ(.height)、
画像を参照するためのURL(src)
などを「値(プロパティ)」として持っています。
文字列オブジェクト String() は、
文字列の長さ(.length)などの「値(プロパティ)」の他に、
文字列を分割する .split() など、
文字列を操作するための「関数(メソッド)」を多く持っています。
Date() は日時のオブジェクトで、
.getFullYear() や .getHours() など、
日時を取得する「関数(メソッド)」を持っています。

例として、
myImg という変数名で、画像オブジェクトをつくるなら、
┌--------
var myImg = new Image();
└--------
となります♪
これに、
「画像の参照場所は"http://www.○△□.jp/img/image1.jpg"です」
という内容を加えると、
┌--------
var myImg = new Image();
myImg.src = "http://www.○△□.jp/img/image1.jpg";
└--------
となります。質問のソースにもありますね?


■ if( 条件 ){ 処理1 } else{ 処理2 } ■

スクリプト処理の中で、
「変数 i の値が 1 なら処理1 を、2 なら処理2 を」
のように、条件によって処理を分けたい場合があります。
これを、「条件分岐」といいます。
条件分岐には、いくつかありますが、
一番基本的なものとして「if 文」があります。
if( 条件 ){ 処理1 } else{ 処理2 }
とすると、
「条件」が満たされているときは「処理1」を
それ以外は「処理2」を実行する、という命令になります。
例として、
変数 i の値が 1 なら「http://~/img1.jpg」を
変数 i の値が それ以外 なら「http://~/img2.jpg」を
画像オブジェクト myImg の参照とするスクリプトは、
┌--------
if( i==1 ){
myImg.src = "http://~/img1.jpg";
}
else{
myImg.src = "http://~/img2.jpg";
}
└--------
です♪

if の条件分岐では、「条件、それ以外」の分岐だけでなく、
複数の条件「条件1、条件2、…」による分岐も可能です♪
例として
変数 i の値が 1 なら「http://~/img1.jpg」を
変数 i の値が 2 なら「http://~/img2.jpg」を
変数 i の値が それ以外 なら「http://~/img0.jpg」を
画像オブジェクト myImg の参照とする場合は、
┌--------
if( i==1 ){
myImg.src = "http://~/img1.jpg";
}
else if( i==2 ){
myImg.src = "http://~/img2.jpg";
}
else{
myImg.src = "http://~/img0.jpg";
}
└--------
のようになります♪


■ function 関数名(){ 処理 } ■

複数のスクリプト処理を、ひとまとめにしておいて、
必要なところで、それを呼び出したい。
そういう場合がありますね♪
この「処理をひとまとめにしたもの」を「関数」といいます。
関数は
┌--------
function 関数名(){
処理
}
└--------
という形で「宣言」します♪
例えば、
画像の参照を、変数 i の値によって分岐する関数を
「Change()」という名前でつくるには
┌--------
function Change(){
if( i==1 ){
myImg.src = "http://~/img1.jpg";
}
else if( i==2 ){
myImg.src = "http://~/img2.jpg";
}
else{
myImg.src = "http://~/img0.jpg";
}
return 0; //関数の処理を終える
}
└--------
という風になります。
この関数を呼び出して使いたい場合は
使いたい場所で
┌--------
Change();
└--------
と記述すればOKです。


■ その他 ■

質問のソースで、
説明しきれていない細かなモノをザッと説明します。

┌--------
var element = document.getElementById("photo");
└--------
これは、
element という変数を宣言して、
それに、「 id が "photo"」のHTML要素を格納する、
という処理です。
例えば、
HTML の <body> に <img id="photo"> という要素があった場合
この要素を、element という変数に格納します。
こうすると、
┌--------
element.src = "http://~/img1.jpg";
└--------
のように、要素 <img id="photo"> を操作出来ます。
┌--------
element.onclick = Change;
└--------
は、
<img id="photo"> をクリックしたら関数 Change() を実行する、
という意味です。


■ まとめ ■

上記を踏まえて、
質問のソースについて、処理の流れを見てみましょう♪
┌--------
(1)2画像オブジェクト image1 と image2 を用意する。
(2)i の値によって画像を入れ替える関数 Change() を用意する。
(3)<img id="photo"> を記述しておく。
(4)<img id="photo"> をクリックしたら Change() を
実行するよう仕込む。
└--------
という流れです♪

質問のソースをむりやり「日本語」化します(〃▽〃
┌--------
<ここからスクリプト>
変数 Image1 を Image() オブジェクトとして宣言;
Image1 の画像参照先を "image/ny.jpg"に;

変数 Image2 を Image() オブジェクトとして宣言;
Image2 の画像参照先を "image/tokyo.jpg"に;

変数 i を宣言し、i に 1 を代入する;

関数を宣言: Change()
{ 処理内容 }
****************
( i==1 のとき )
画像要素 element の参照を、
画像オブジェクト Image2 の参照先にして、
i に 2 を代入する。
( それ以外 )
画像要素 element の参照を、
画像オブジェクト Image1 の参照先にして、
i に 1 を代入する。
****************
</ここまでスクリプト>

<img id="photo" src="image/ny.jpg" />

<ここからスクリプト>
変数 element に、「id="photo"」の要素を格納する。
要素 element がクリックされたら、関数 Change() を実行する。
</ここまでスクリプト>
└--------


■ 参考 ■
興味が沸いたり、JavaScript の必要がでてきたら、
短期間で身に着くので勉強してみてください♪
<http://crocro.com/write/manga_javascript/wiki.cgi>

質問した人からのコメント

2012/9/23 09:03:32

降参 ycchiechieさん、 pz_yah_infoさんもありがとうございました。 皆さんにベストアンサーを差し上げたい気持ちでいます。まだ何となくわかったというレベルなので、何度も読み返してみたいと思います。ある人に、そんなの理解しないでのそのまま書けば良いんだと言われたのですが、やっぱり、理屈を理解したいです。

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

ycc********さん

編集あり2012/9/2303:13:27

>Javascriptは変数にimageを直接代入できないという理解で正解でしょうか。
new Image()やdocument.createElement("img");で「スクリーンに表示されないimg要素」を生成して、それを変数に代入するということです。


// コンストラクタ
// new ○○で呼び出されるもの new Date()や、new Object()などもそうです。
// Image()コンストラクタで画像を生成、変数image1に代入
var image1 = new Image();
image1.src = "hoge.jpg";
image1.alt = "hoge";

// DOM
// DOMで画像を生成、変数image2に代入
var image2 = document.createElement("img");
image2.src = "piyo.jpg";
image2.alt = "piyo";

これだけの状態では画面上に画像は表示されません。が、生成自体はされていて、hoge.jpgやpiyo.jpgがロードされている状態になっています。

表示されないにもかかわらずこのようにする理由は、非表示状態の画像である"image/ny.jpg"と”image2.src = "image/tokyo.jpg"に切り替わる前にロード(キャッシュ)しておく必要があるからです。

もしこの処理を書いていなければ、一回目にマウスオーバー状態になったときに[x]マークがでて画像の切り替えが失敗する可能性があります。

もし生成したimg要素をドキュメント上に表示したいのであれば、
document.body.appendChild(image1); //body直下の一番最後に挿入
document.getElementById("aaaa").appendChild(image2); // idがaaaaの要素の一番最後に挿入
のようにしてドキュメント上に追加してください。(今回の場合は必要ないと思います。)



>var image1=new Image(); この()の中に何か入れることはあるのでしょうか。
widthとheightを設定できます。

var image1 = new Image(200, 100);
image1.src = "hoge.jpg";
image1.alt = "hoge";

-> <img width="200" height="100" src="hoge.jpg" alt="hoge">

borderなども追加するのであれば
var image1 = new Image(200, 100);
image1.src = "hoge.jpg";
image1.alt = "hoge";
image1.border = .... ;
image1.id = ... ;

のように追加してください。

vspaceとhspaceは廃止されたものなので利用しないでください。
borderもCSSで設定しましょう。




もし
<img src="hoge.jpg" alt="hoge" id="hoge">
というHTMLがあり、
<script>
var img = document.getElementById("hoge");
</script>
のようにidからimg要素を取得しておけばnew Image()を使わなくてもimg.src=""などの設定はできます。
上記のdocument.createElement("img");の場合も同様です。

pz_********さん

2012/9/2211:22:43

Image ・・・というのは、定義済みのオブジェクトで、画像を操作するものです。
Image オブジェクトを使うには、new する必要があります。
new というのは文法です。そのオブジェクトを処理する領域を確保することです。

new date() というのは、new Date() のことでしょう。
JavaScriptでは大文字小文字が厳密に区別されますので、注意してください。
それも、定義済みオブジェクト Date を操作する領域を確保することです。
文法上は同じです。対象オブジェクトが違うのです。
-----------------------------------------------------------
var image1=new Image(); //<-- Image オブジェクトの領域確保。グローバル変数。
image1.src = "image/ny.jpg"; //<-- 指定した画像のローディングを始める

var image2=new Image(); //同様
image2.src = "image/tokyo.jpg"; //同様

var i = 1; //<--グローバル変数。これがどっちの画像を表示するかを決める。

function change(){ //<--関数定義。実行されるわけではない。
if(i==1){
element.src=image2.src; //<--グローバル変数i が1なら画像2を表示
i=2; //<-- 次回表示のために更新
}else{
element.src=image1.src;//<--グローバル変数i が1でないなら画像1を表示
i=1; //<-- 次回表示のために更新
}
}
・・・省略・・・
var element = document.getElementByid("photo");//<--imgタグのDOM。グローバル変数。
element.onclick=change; //<-- DOMのonclickイベントに関数changeを割り付ける。
-----------------------------------------------------------
onclick というのは、画像をクリックしたときに実行される関数を割り付けるところです。
そこに、change を割り付ける(代入)すると、画像がクリックされると、change( ) がコールされます。

グローバル変数というのは、関数の中でも参照できる変数です。
関数 change( ) の中で、 i、elementを参照しています。

関数 change( )は書いただけでは実行されません。
コールされて実行されます。
element.onclick=change;
・・・というのは、画像をクリックしたら change() をコールするように設定します。
これにより、画像をクリックしたら、change()が実行されます。

change( ) では、i を使って交互に画像を切り替えています。

以上により、画像をクリックするたびに切り替わる動作をします。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる