オブジェクトとJavaScript

  1. オブジェクト


    1. オブジェクト

      　html 記述されたページの各項目はjavaスクリプトのオブジェクトになります。html 全体は　document と呼ばれるオブジェクトになります。document に、image や form などのタグに相当するオブジェクトが含まれます。form には ｂｕｔｔｏｎ　や text などのオブジェクトが含まれます。
      　各オブジェクトには、メソッド（関数）、プロパティ、下位のオブジェクトが定義されます。
      例えば、document.write( ); は document に文字列を追加するメソッドになります。document.linkColor はリンクの色になり、この値を設定することで、リンクの色を変更できます。
      　

    2. オブジェクトの指定

      オブジェクトは名前やIDが定義されている場合、その名前やIDで指定できます。名前がない場合は配列の番号で、名前がある場合はその名前で（連想型）で指定できます。

      例
      　image[2]：画像の2番目
      　image["big"]:"big"の名前がついた画像

    3. イベント

      　マウスのクリック、キー入力、ページの読み込み、各種の状態変化、等で発生します。このイベントに伴い、ｊａｖａスクリプトの実行を行うことができます。通常はイベントに対応する関数を定義し、書くイベントに対し、実行する関数を指定します。

      例:ボタンクリックで keisan() 関数を実行する
      <INPUT TYPE ="button" NAME="bottom" VALUE="計算"  onClick= "keisan()">


  2. Formタグとスクリプト

    1. FORMタグ

      FORMタグはブラウザで利用できるGUI（対話型処理）を組み込むタグです。このタグを利用すると、ブラウザで文字入力の箱やボタンを配置することができます。FORMタグで入力された内容はｈｔｍｌ単独では利用できません。JavaScriptや、 CGI などで利用できます。
      FORM　タグは FORM 記述の開始と終了を示すだけです。詳細な内容は、FORMタグの内部に記述します。
      　<FORM>......</FORM>

    2. INPUTタグ

      　< INPUTTYPE="text" NAME="NAME" SIZE=10>は1行の文字入力が可能で、その文字列の名前をNAMEとします。TYPEはINPUTタグの型を表し、　ｔｅｘｔ　は文字入力を指示します。submit　は「提出する」の意味で、この場合、ブラウザから外へ「入力された項目を送り出す」意味になります。 
        <FORM >
     名前：  <I NPUTTYPE="text" NAME="NAME" SIZE=10>
     E-Mail：<INPUT TYPE="text" NAME="MAIL" SIZE=20>
  </FORM>
      これを、ブラウザで表示すると、次のようになります。
      　

    3. その他の入力用タグ

      　　FORMタグには、文字入力以外に、メニュー選択やボタンによる選択形式があります。
      1. 複数行入力
        複数の行が入力できます。cols で行の文字数、rows で行数を指定します。改行も可能です。
        <textarea name="message" cols="60" rows="8"></textarea>

      2. メニュー選択
        複数の項目を設定しておき、選択する方法です。

        <select name="etc1"> <option value="">性別<option value="男性">男 性<option value="女性">女性</select>
      3. ラジオボタン
        複数の項目のどれか一つを選択します。リストと組み合わせた例を示します。

        <UL>
        <LI><INPUT type="radio" checked name="1" value="1"> １年生
        <LI><INPUT type="radio" name="1" value="2">２年生
        <LI><INPUT type="radio" name="1" value="3">３年生
        <LI><INPUT type="radio" name="1" value="4">４年生
        </UL>

      4. チェックボタン
        複数の項目を選択できます。
        <UL>
        <LI><INPUT type="checkbox" name="2" value="1"> デスクトップ
        <LI><INPUT type="checkbox" name="2" value="2">　ノート型
        <LI><INPUT type="checkbox" name="2" value="3">　携帯型
        <LI><INPUT type="checkbox" name="2" value="4">　携帯電話
        </UL>

    4. フォーム入力を利用

      次は、フォーム入力を利用する例です。FORMタグを利用して入力した、単価と個数を読み込みます。Formタグで入力された値は、Javaスクリプトでは
          　Formの名前.入力項目の名前.value
      　で参照できます。例えば、FORM　NAME　が zeikin で、INPUT項目が tanka の値は　zeikin.tanka.value　で参照できます。
      　ボタン項目の「計算」ボタンを押すと、onClick= 以後の書かれたJavaスクリプトを実行します。フォームの値を読み込み、結果を　komi　のフォームに表示します。onClick は次項で紹介する「イベント処理」です。
      こちらから実行できます。

      <BODY>

   <FORM NAME="zeikin">
      単価<INPUT TYPE="text" name="tanka"><br>
      個数<INPUT TYPE="text" name="kosu"><br>

      税込み価格
   <INPUT TYPE ="button" NAME="bottom" VALUE="計算" 
     onClick= "zeikin.komi.value=
            zeikin.tanka.value*zeikin.kosu.value*1.05">
    <INPUT TYPE="text" name="komi">

</BODY>

  3. 画像オブジェクト


    1. 画像オブジェクト

      以下のように、name 属性が指定された画像は document.images["tulip"] で指定できます。この、画像の幅は、document.images["tulip"].widthで、高さは document.images["tulip"].height　で取得できます。
          <img src="large.jpg" name="tulip">
      　逆に、ｗｉｄｔｈ やheight の属性を変更することで、画像のサイズを スクリプトで設定できます。

    2. 画像の大きさを制限する

      　幅が指定以上のサイズとなる画像を、縦横費を変えずに指定サイズに制限する関数（limitsize）を作成します。関数の引数は、画像の名前と最大の幅です。
      　関数ではまず、現在の幅と高さを　w と h に取得します。この値が制限値（limit）を越えたとき、幅をlimitに制限し、高さを縦横比が変化しないよう設定します。
         function limitsize(imgName,limit)
   {
     var w ;
     w = document.images[imgName].width;
     h = document.images[imgName].height;
     //document.write("imagesize"+w+":"+h+"<br>");
     
     if( w > limit) {
       h = h * limit / w;
       w=limit;
       //document.write("imagesize5:"+w+":"+h+"<br>");
       document.images[imgName].width=w;
       document.images[imgName].height=h;
   }
 }

      下はこの関数を利用して、二つの画像を幅を２００に制限して表示する html の例です。
      <html>
<head>
  <title>imageSize</title>

 <script language="JavaScript">
 <!--
   function limitsize(imgName,limit)
   {
　　　___________
   }
 }
  //-->
 </script>
</head>
 
<body>
 <h3>image size<BR><BR></h3>
  <img src="large.jpg" name="tulip">
  <img src="big.jpg" name="tulips">
  
 <script type="text/javascript">
 <!--
   //関数は　img タグの後で呼び出す
   //document.write("imagesize<br>");
   limitsize("tulip",200);
   limitsize("tulips",200);
  //-->
 </script>
 
</body>
</html>

      このスクリプトはここから実行できます。

  4. Formで画像を選択


    1. FORM で画像選択

      　FORM の中にメニューを表示し、選択する機能があります。これを利用して、メニューで選択した画像を表示するJavaスクリプトを紹介します。

    2. プログラム

      　FORM の　<SELECT> タグに <OPTION>でメニューの項目を並べます。これをブラウザで表示すると、メニューが表示され、選択可能になります。
      　<SELECT>タグに mｙSEL の名前がつけてあります。選択された項目は、selectedIndex の属性を利用して、
      　　options[mySEL.selectedIndex]
      で参照できます。選択された項目の値（これが、画像の名前になります）は
           options[mySEL.selectedIndex].value
      で取得できます。
       処理は、メニューの選択イベントである SELECT タグの onChange がきっかけになります。メニューが選択されると、onChangeイベントが起こり、スクリプトの関数である changeImage('myIMG',this） が実行されます。myIMG は IMG タグの名前です。this は自分自身、つまり SELECT　を代表します。
      　ヘッダ部で定義された関数は、この二つのオブジェクトを受け取り、document の指定された　IMAGE のsrc （ファイル名）を、選択されたメニューの画像ファイルと入れ替えます。結果として、
      　<IMG SRC="0.jpg" NAME="myIMG">
      の SRC で指定されるファイル名が Javaスクリプトで書き換えられます

      <HTML>
  <HEAD>
  <TITLE>menu options</TITLE>
  <SCRIPT Language="JavaScript">
    <!--
    //　指定画像を変更
    function changeImage(imgName,selOBJ)
   {
      if (document.images) 
　     document.images[imgName].src = 
           selOBJ.options[mySEL.selectedIndex].value;
   }
  // -->
  </SCRIPT>
  </HEAD>

<BODY>
  メニューを選択して画像を変える<BR>

  <FORM NAME="myFORM">
  <SELECT NAME="mySEL" onChange="changeImage('myIMG',this)">
    <OPTION VALUE="0.jpg">一枚目の画像
    <OPTION VALUE="1.jpg">二枚目の画像
    <OPTION VALUE="2.jpg">三枚目の画像
  </SELECT>
  </FORM>

  <IMG SRC="0.jpg" NAME="myIMG">
</BODY>
</HTML>

      このスクリプトはここから実行できます。