JavaScriptのabc
7.ページに動きを
● ポップアップで新ウインドウ
先回タイマーを作ってからは、「eventオブジェクト」を使っての写真ギャラリー作りに挑戦してきたけど、アカン!!
どうも「eventオブジェクト」のメソッドやプロパティの中には、ブラウザを選んでしまうものがあるらしく、うまく作れません。そこで、これはこれで時間をかけて行くとして、今回は「window」オブジェクトの「open」メソッドと「moveTo」メソッドを使ってポップアップウインドウをの出すことにしまーす♪♪
3ステップに分けてプログラムを作ります。
第1ステップでは、
・bodyの中に、HTMLで「このボタンでポップアップ!!」と言うボタンを作る。
・headの中で、新ウインドウを変数win1、その特性を変数winfeatureと定義し、
「このボタンでポップアップ!!」ボタンをクリックしたら関数openWindowが
動く様にする。
までにしました。下がその実物です。
windowがloadされた時に関数btnPopupを働かせ、その関数の中でボタンがclickしたらポップアップ用の関数openWindowを働かせます。ただし、まだ関数openWindowの中味は空っぽですから、何も起こりません。
動きは下のボタンから確認して下さい。
さて第2ステップです。ここで、「window」オブジェクト「open」メソッドの登場です。
「open」メソッドの書き方は下の通りです。
open(URL,ウインドウの名前,ウインドウの特性)
「URL」は、""で囲んで表示させたいWebページのURLを記入しますが、ブランク表示したいので""とします。
「ウインドウの名前」は、""で囲んで任意(好み)のものを記入します。ここでは、aaaaにしました。
「ウインドウの特性」は、変数winfeatureで定義しましたので、この変数名を入れます。なお、変数winfeatureの中で指定した特性は、「キー=値」をカンマ(,)で区切って列記しています。「open」メソッドの主な特性は次のものがあります。
「width」、「height」(ウインドウサイズの幅と高さを指定する)
「toolbar」(値が「yes」でツールバー表示)
「resizable」(ウインドウサイズを変更可能にする)
「scrollbar」、「location」なども有るそうです。
このwindow.openを使って、関数openWindowを、□で囲んだ様に変更しました。
動きは下のボタンから確認して下さい。
第3ステップでは、このポップアップを画面中央に持って来て、色を付けます。
画面中央に持って来る方法は、スクリーンの幅と高さを調べて、その半分の位置を新ウインドウの中央に設定します。下の実際のプログラム中で□で囲んだ部分で、ここでwin1オブジェクトの「moveTo」メソッドを使っています。
ポップアップの色を変える方法は、cssのbackgroundを使います。下の実際のプログラム中で□で囲んだ部分です。win1→document→最初body要素→style→backgroundとプロパティをたどって行き、色をアクアに設定しました。
動きは下のボタンから確認して下さい。
今回は順番を入れ替えてopenメソッドとmoveToメソッドを使ったポップアップを作りました。
次回は、いまだ大苦戦中のeventオブジェクトを使って写真ギャラリーを作ります。
● eventオブジェクト使って写真ギャラリー
このテーマは難題なので後回しして来ましたが、「JavaScriptのabc」としては最後のテーマにするつもりで、しつこく挑戦します。
作りたいのは、下の様な画面で、
下のサムネイルのどれかをクリックすると、上の大きい写真が切り替わる
矢印をクリックしたら、大きい画面がサムネイル上の左右の画面と切り替わる
と言うプログラムです。
最初に、動きの無い画面上配置だけのプログラムを作ります。
まず、4枚の写真を用意して、head部で配列変数として定義します。body部では2つのdivを作り、最初のdivに矢印、最初の写真、矢印の順に並べ、それぞれにIDを付けます。
2つ目のdivはサムネイルで、これにもIDを付け、その中で4つの写真を幅96px・高さ72pxで並べます。なお、このdiv内の写真は、最初はダミーですから同じもので結構です。
この様にして作ったプログラムの実物は下の通りです。
動きは下のボタンから確認して下さい。
狙い通り、何も動きません。
では、JavaScriptに入ります。
まず、ページをloadした時に、サムネイルのダミー写真をすべて削除して、表示すべき写真(配列変数の中)を配置していきます。
下が、修正したプログラムです(head部のみ)。□で囲んだ部分でを追加しており、追加の前半(while文)で、サムネイルdiv内の最初の子ノード(firstChild)(写真)を1枚づつ、子ノードの数(childNodes.length)だけremoveChildメソッドで削除します。
追加の後半(for文)では、createElementメソッドを使って、配列変数photoの数(length)だけ、表示すべき写真を幅96px・高さ72pxで作り、appendChildメソッドを使ってサムネイルのdiv内に子ノードとして追加します。 また、ここでは、何番目の画像かをphptoidプロパティで記憶させています。
動きは下のボタンから確認して下さい。
サムネイルの写真が用意したものに変わりました。
では、これから動きを付けます。
サムネイルをクリックすると上の大きい写真が切り替わる様にする為に、head部内で、下の□で囲んだ4つの部分を追加しました。
①では、curphotoと言う変数を作って、現在大きく表示している写真の番号を記憶します。
②では、サムネイルをクリックした時にshowLargeと言う関数が働く様にしておきます。
③では、サムネイルの1枚目の写真を大きく表示させています。getElementByIdメソッドで大きな写真の要素を呼び出し、ここに配列変数photoの最初の写真を代入すると言う方法です。
④は関数showLargeの中味で、event.currentTargetでクリックしたサムネイルのエレメントを取得し、その写真のphotoidを変数curphotoに代入します。さらに、getElementByIdメソッドで大きな写真の要素を呼び出し、ここに配列変数photoのcurphoto番目の写真を入れる様にしています。
さて動きはどうでしょう。下のボタンから確認して下さい。
だーめだ!!
デバッグかけると、④の2行目で「'currentTarget' は Null またはオブジェクトではありません」のコメントでエラーが出ました。
おそらく②のonclickだとeventオブジェクトとかcurrentTargetプロパティとかとの関連付けができないのだろう、と勝手に思い、②の1行を下の□で囲んだ様に変えました。
さて、今度はどうでしょう。下のボタンから確認して下さい。
だーめだ!!
デバッグかけると、今度は水色矢印の所で、④の2行目で「'photoid' は Null またはオブジェクトではありません。」のコメントでエラーが出ました。
「それでは試しに・・・」と言う事で、水色矢印の行の中の「img.photoid」の代わりに数字の「2」を入れてみました。
その結果は下のボタンから確認して下さい。
どのサムネイルをクリックしても、エラー表示する事無く、大きい写真はサムネイル3番目(photo[2})に変わります。
判らん!! 一応、図書館から教科書借りてきて学習しているのだけど、本に書いてある通りにならん。
clickイベント、eventオブジェクトのcurrentTargetプロパティ、img要素のphotoidプロパティ、・・・・どう直したらよいのだろう???
これ以上は私には無理なので、このサイトを覗いてくれている皆さんへの宿題にします。どうか、対処を教えてください。
今回は、「要素」を駆使して写真ギャラリーを作りテクニックを学ぶつもりでしたが、挫折してしまいました。対応策は人任せにしておいて、「よしじい」としては既知の知識で写真ギャラリー作りをしたいと思います。次回は、我流写真ギャラリー作りの予定です。
● eventオブジェクト使って写真ギャラリー(安易版)
写真ギャラリー作りながらeventオブジェクトやimg要素を学ぼうと悪戦苦闘しましたが、とうとう挫折(詳しくは前章「・eventオブジェクト使って写真ギャラリー」を見てね)しました。
このままでは寝起きが悪いので、持っている知識を駆使して写真ギャラリーを作ることにしました。
用いた方法は、「5.書き換え、置き換え」(こちら→)で学んだ「イベントハンドラーで関数を呼び出す」やり方です。
具体的には、body部では、サムネイルにならべた4つの写真が「onclick」の時に呼び出される4つの関数を与えます。head部では、4つの写真の配列変数を定義した後に、呼び出される4つの関数を定義します。4つの関数は、クリックしたサムネイルに呼応する番号を付け、この番号の写真を配列変数から呼び出し上の大きい写真を置き換える様に、定義します。大きい写真を置き換えるのも関数を使いますが、これはthumsPicと名付けます。
下が実際のプログラムです。
動きは下のボタンから確認して下さい。
次に左右方向の矢印をクリックしたら写真が変わる様にします。
方法は、サムネイルによる大きい写真の入れ替えと同じです。左向きの矢印をクリックしたら配列変数の中の一つ前の写真を選び、右向きの場合は一つ後ろの写真を選び、最先端、最後尾の場合の処理をした後に、関数thumsPicを実行します。
実際のプログラムは下の通りです。
動きは下のボタンから確認して下さい。
今回は、持っている知識の範囲で写真ギャラリーを作ってみました。何とか狙いの動きはしてくれましたが、何しろ写真の数だけ関数が必要と言う欠点があります。
やっぱり、eventオブジェクトのcurrentTargetプロパティ、img要素のphotoidプロパティを使う方法が王道でしょうね・・・・
● 外部ファイル化で安心、便利
友人がHTMLのチェックプログラムを紹介してくれました。さっそく前章で作ったサンプルプログラムjssample32をチェックしてみると、なんとマイナス200点以下でした。満点は100点だそうですから、赤点もいい所です。
減点の内容はいろいろ有りましたが、JavaScript記述に関するものとして、「<script>~</script> 内にコメントを書いたときの警告」や「コメント中に--と書いてはならない事」が指摘されていました。
そこで、これらへの対処として、JavaScriptを外部ファイルで記述してみる事にしました。
外部ファイル化することで下のようなメリットもあります。
・読みやすい
・メンテナスしやすい
・汎用性がある
外部ファイルの拡張子は「.js」と決められており、今回「thums.js」と言う外部ファイルを作ることにします。
外部ファイル「thums.js」の中は、前回サンプルプログラムjssample32の中のJavaScript記述文をそのまま書きますが、HTMLとしてのコメントアウト「<!--~-->」は不必要です。
下が実際の外部ファイルです。
次に、HTML文書の中での外部ファイル指定記述は、
<script type="text/javascript" src="thums.js"></script>
と書きます。
さらに、外部ファイルのJavaScriptを読み込みますので、もともとコメントアウトの狙いであったJavaScriptが無効である場合への対処が必要です。これは、HTML文書bodyの中に、
<noscript>JavaScript無効の場合の対処</noscript>
と書きます。
下が実際のHTML文書です。
動きは下のボタンから確認して下さい。
今回は、JavaScriptの外部ファイル化をしました。
次回以降、この外部ファイルが増えてライブラリーとして使えるようにできたらと思います。
これでJavaScriptを使った、実際のホームページは終了します。