WEB技術教えます
2005年6月15日
kumausa.comのぬりえページに採用されているスクリプトの記述をまとめる手法について説明したいと思います。教本は以前にも紹介したは、ＨＴＭＬ ＆スタイルシートデザインブック  です。ここにちょこっとだけJavaScliptについて載ってます。
ぬりえにある「なかよし」というページを小窓で表示させることにします。
 JavaScliptを入れる所
JavaScliptをいれる場所はHTMLページ内の</TITLE>と</HEAD>の間に入れ、下のようにくくります。
<script language="JavaScript">
<!--
記述
// -->
</script>
記述の中に、スクリプトを埋め込んでいきます。
次に、普通にリンクをするよう、このスクリプトを実行させたい場所へ下記のリンクをつけます。
<a href="javascript:photo1()">なかよし</a>
記述の中身 その１
普通の記述は下記のようにします。
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>
記述の中身 その２
その１でも短くなりましたが、しかしリンク分のfunction photo〜部分は必要です。それ自体も１つで全部まかなえるようにします。
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");
}
スクリプトを実行させたい場所を下記のように、リンク先を変えることにより、スクリプトが１つですむ訳です。
<a href="javascript:photo('index03.html')">なかよし</a>
あとがき
JavaScliptを別ページにする方法もありますが、しかし、変更の手間を考えたら、1つの方が便利だと思いませんか？
でもこれは、ページが同じパターンだった場合に限ります。ページごとに大きさを変更したい場合は個々で設定しなければなりません。
|
