kumausa.com  
 
HOME
ぬりえ
ARTギャラリー
WEB技術教えます
Macをもっと使おう!
これみつけた!
よってけ!地元情報
お友達サイト
著作権等について
このサイトについて
ご意見・ご感想

 

WEB技術教えます

本日のテーマ〔JavaSclipt 小窓の設定〕
2005年6月15日

kumausa.comのぬりえページに採用されているスクリプトの記述をまとめる手法について説明したいと思います。教本は以前にも紹介したは、HTML &スタイルシートデザインブック です。ここにちょこっとだけJavaScliptについて載ってます。
ぬりえにある「なかよし」というページを小窓で表示させることにします。

JavaScliptを入れる所

JavaScliptをいれる場所はHTMLページ内の</TITLE>と</HEAD>の間に入れ、下のようにくくります。
<script language="JavaScript">
<!--
記述
// -->
</script>
記述の中に、スクリプトを埋め込んでいきます。

次に、普通にリンクをするよう、このスクリプトを実行させたい場所へ下記のリンクをつけます。
<a href="javascript:photo1()">なかよし</a>

記述の中身 その1

普通の記述は下記のようにします。

function photo1(){
win=Window.open("index03.html","Photo","membar=yes. scrollbars=yes,resizable=yes,directories=yes,location=yes, status=yes,toolbar=yes,width=650,height=750");
}

で、これをリンク先をそれぞれ変更しながら、リンク分の数を作成しますが、リンクに対してスクリプトを用意すると、結構な分量になってしまい、ちょっとした変更をするのに、手間もかかってしまいます。スクリプトはリンク先が違うだけで、赤い部分の設定は同じです。これを変数でまとめて記述します。

winname="photo";
setting="membar=yes. scrollbars=yes,resizable=yes,directories=yes,location=yes, status=yes,toolbar=yes,width=650,height=750";

function photo1(){
win=Window.open("index03.html",winname,setting);
}

緑色の部分が共通になって、上の緑部分を変更することによって、細かい変更が簡単に行うことができます。
スクリプトを実行させたい場所へ下記のリンクをつけます。
<a href="javascript:photo1()">なかよし</a>

記述の中身 その2

その1でも短くなりましたが、しかしリンク分のfunction photo〜部分は必要です。それ自体も1つで全部まかなえるようにします。

function photo1(){
win=Window.open("index03.html","Photo","membar=yes. scrollbars=yes,resizable=yes,directories=yes,location=yes, status=yes,toolbar=yes,width=650,height=750");
}

今度は置き換えるものだけ、つまり、リンク部分(赤文字)を変更します。これを、

function photo1(){
win=Window.open("page","Photo","membar=yes. scrollbars=yes,resizable=yes,directories=yes,location=yes, status=yes,toolbar=yes,width=650,height=750");
}

pageの変数にし、さらに下記のように記入します。

function photo(page){
win=window.open(page,"photo",
"menubar=no,scrollbars=yes,resizable=yes,
width=650,height=750");
}

スクリプトを実行させたい場所を下記のように、リンク先を変えることにより、スクリプトが1つですむ訳です。
<a href="javascript:photo('index03.html')">なかよし</a>

あとがき

JavaScliptを別ページにする方法もありますが、しかし、変更の手間を考えたら、1つの方が便利だと思いませんか?
でもこれは、ページが同じパターンだった場合に限ります。ページごとに大きさを変更したい場合は個々で設定しなければなりません。

 

 





 

△このページの先頭へ

 
  2005-2007 kuma kuma usagi. All Rights Reserved.