JavaScriptメモ（ボタン、画像置き換えなど）

JavaScriptに関するメモです。単純なんだけど、正確な記述はすぐ忘れるので。

 昔の基本機能（HTMLの一部を生成）

JavaScriptの当初の機能はHTML文の一部をプログラムで生成することでした。
もちろん現在も有効な機能ですが、現在の中心はHTML要素をDOMモデルを用いて 変更することに移っています。

例えば、HTML記述の一部として次のような記述

<p>
<center>
HTML文の中に
<script type="text/javascript">
document.write("<font color=blue><b>単純な記述</b></font>");
</script>
を挟む。
</center>
</p>

があると次のような文が表示されます。
HTML文の中に を挟む。

この例では<script>から</script>がJavaScriptでその外は 通常のHTMLです。
このようにHTMLの中に挟んだスクリプトはその前後のHTMLが解釈される ときに順に解釈され、そのスクリプトがdocument.writeで生成する 文が、スクリプト部にあったかのごとく表示されます。

 関数で、HTMLの要素を置きかえる

JavaScriptはHTMLの文の外に関数として記述し、HTML文の中の要素を 指定して置換すこともできます。
例えば、下の画像はボタン押すと呼ばれるJavaScriptで<img>の srcを置き換えることにより、ボタンに応じて画像を変えています。
typeがtextのinputやtextareaはformの中に置けば、直接documentの要素として 指定可能でvalueに文字列を入れることにより置換できます。（formに 入れない場合はgetElementById(名前) 関数呼び出しで要素特定をしなくてはならなくなります）

   

記述は次のものです。

<!-- Javascript関数 -->
<script type="text/avascript">
function dispimage(filename,comment){
   document.getElementById('image').src=filename;
   document.getElementById('text').value=comment;
   }
</script>

<!-- 画像 -->
<center>
<img src="http://k-hiura.cocolog-nifty.com/image_08_12/moai_7.gif" 
     id="image" align="left">
<form id="form1"><input type="text" id="text"/></form1>
<br style="clear: both;">

<!-- ボタンの並び -->
<input type="button" id="button1" 
 value="画像1"
 onClick='dispimage("http://k-hiura.cocolog-nifty.com/image_08_12/moyai_2.gif",
                    "画像1")'/>
 
<input type="button" id="button2" 
 value="画像2"
 onClick='dispimage("http://k-hiura.cocolog-nifty.com/image_08_12/moyai_3.gif",
                    "画像2")'/>
 
<input type="button" id="button3" 
 value="画像3"
 onClick='dispimage("http://k-hiura.cocolog-nifty.com/image_08_12/moyai_6.gif",
                    "画像3")'/>
</center>

画像はHTML文の中に<img>で定義されています。
ここではその<img>にname属性が"image"と定義されています。
<input>ボタンが定義され、onclick属性でボタンが押されたときに 関数dispimageを呼ぶと定めています。
呼び出される関数dispimageは <script>..</script>内にfuntion文で定義されています。
関数dispimageでは"image" のsrcに引数（ファイル名と想定）をセットしています。

もやい結びでモアイを結んでいますが、もやいとモアイは無関係です。念のため
なお、図は 新聞、雑誌の束ね方、結び方、縛り方のものです。

 注意　language="JavaScript"

古い記述ではlanguage属性によりJavaScriptであることと、JavaScriptのバージョン を指定していました。

<script language="JavaScript1.2">
<!--
// なんだかんだJavaScript記述
// -->
</script>

この書き方はHTML4.01で却下されtype属性で指定することになりました。

<script type="text/javascript">
<!--
// なんだかんだJavaScript記述
// -->
</script>

 注意2 プログラム部をコメントで挟む必要はない(2010/6/24)

古い記述ではプログラム部をコメント<!--...-->で囲む必要があるとされていました。

<script type="text/javascript">
<!--
function myFunc(){
   ...
   }
// -->
</script>

しかし、現在はコメントで囲む必要はありません。

<script type="text/javascript">
function myFunc(){
   ...
   }
</script>

  さらに記述は付け加えられるであろう。

(2010/6/24):要素アクセス法を要素つなぎ(document.form.text.value)から getElementById使用(document.getElementById('text').value)に変更