calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< July 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

JavaScript・右の端から左の端へ絵の移動

0
      今回は、画像を移動したいの思いを実現しました。
     やり方は、絶対座標のX値を一番右端から順番に減算する方法をとりました。
     ところで、絶対座標の指定はスタイルシートによって行わなければなりませんので、JavaScript内でスタイルを指定する方法を知っておく必要があります。
     例えば「A」と言うidの画像の左端のX値は
        document.all.A.style.pixelLeft
    と表します。画像「A」を画面の右端に持って行きたい場合は、
        document.all.A.style.pixelLeft = document.body.offsetWidth;
    と書きます。
     ここから画像「A」を一定時間間隔毎に左に少しづつ移動して行きます。この方法は、「17.2つのタイマー(その2)」(→こちら)で学んだsetIntervalメソッドを使います。setIntervalメソッドで時間間隔と実行する関数を指定し、その関数は、画像が一定距離動く様に作ります。又、この関数では、画像が画面の左端一杯まで移動したらclearIntervalで動きを止めます。
     この様にして作ったプログラムが、下のものです。
    js61サンプル
    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

     ここで、ちょっと遊び心が出て来まして、下の様なアニメを作って、これを移動させてみる事にしました。いわば「千鳥足のよしじいさん」とでも言いましょうか。
    千鳥足アニメ

     最初のプログラムサンプルのカメラ写真の代わりにこのアニメを使う様に指定し、移動幅はアニメのスキップ歩幅、時間間隔はアニメの1周期に設定しました。又、JavaScriptを外部ファイル化しました。
     まずHTML文書は下の通りです。「skipanime.gif」と言うのがアニメ画像です。
    js62サンプル

     次にJavaScript文書は下の通りです。移動幅を140px、時間間隔を1400ms(1.4秒)にしています。
    js63サンプル

    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

     今回は、JavaScriptによるスタイルシートのコントロールで絶対座標をコントロールしました。
     次回も絶対座標ネタをもう少し続けて、マスターしたいと思います。

    なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


    JavaScript・外部ファイル化で安心、便利

    0
        友人がHTMLのチェックプログラムを紹介してくれました。さっそく前回作ったサンプルプログラムjssample32をチェックしてみると、なんとマイナス200点以下でした。満点は100点だそうですから、赤点もいい所です。
       減点の内容はいろいろ有りましたが、JavaScript記述に関するものとして、「<script>〜</script> 内にコメントを書いたときの警告」や「コメント中に--と書いてはならない事」が指摘されていました。
      js60マイナス200点

       そこで、これらへの対処として、JavaScriptを外部ファイルで記述してみる事にしました。
       外部ファイル化することで下のようなメリットもあります。
         ・読みやすい
         
      ・メンテナスしやすい
         
      ・汎用性がある
       
      外部ファイルの拡張子は「.js」と決められており、今回「thums.js」と言う外部ファイルを作ることにします。
       外部ファイル「thums.js」の中は、前回サンプルプログラムjssample32の中のJavaScript記述文をそのまま書きますが、HTMLとしてのコメントアウト「<!--〜-->」は不必要です。
       下が実際の外部ファイルです。
      js58サンプル

       次に、HTML文書の中での外部ファイル指定記述は、 
         <script type="text/javascript" src="thums.js"></script>
      と書きます。
       さらに、外部ファイルのJavaScriptを読み込みますので、もともとコメントアウトの狙いであったJavaScriptが無効である場合への対処が必要です。これは、HTML文書bodyの中に、
         <noscript>JavaScript無効の場合の対処</noscript>
      と書きます。
       下が実際のHTML文書です。
      js59サンプル
      右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

       今回は、JavaScriptの外部ファイル化をしました。
       次回以降、この外部ファイルが増えてライブラリーとして使えるようにできたらと思います。

       なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。


      Javascript・eventオブジェクト使って写真ギャラリー(安易版)

      0
          写真ギャラリー作りながらeventオブジェクトやimg要素を学ぼうと悪戦苦闘しましたが、とうとう挫折(詳しくは「eventオブジェクト使って写真ギャラリー」を見てね)しました。

        このままでは寝起きが悪いので、持っている知識を駆使して写真ギャラリーを作ることにしました。
        js55ありあわせ

         用いた方法は「イベントで文字・画像の置き換え」こちら→)で学んだ「イベントハンドラーで関数を呼び出す」やり方です。
         具体的には、body部では、サムネイルにならべた4つの写真が「onclick」の時に呼び出される4つの関数を与えます。head部では、4つの写真の配列変数を定義した後に、呼び出される4つの関数を定義します。4つの関数は、クリックしたサムネイルに呼応する番号を付け、この番号の写真を配列変数から呼び出し上の大きい写真を置き換える様に、定義します。大きい写真を置き換えるのも関数を使いますが、これはthumsPicと名付けます。
         下が実際のプログラムです。
        is56サンプル

        右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

         次に左右方向の矢印をクリックしたら写真が変わる様にします。
         方法は、サムネイルによる大きい写真の入れ替えと同じです。左向きの矢印をクリックしたら配列変数の中の一つ前の写真を選び、右向きの場合は一つ後ろの写真を選び、最先端、最後尾の場合の処理をした後に、関数thumsPicを実行します。
         実際のプログラムは下の通りです。
        js57サンプル

        右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

         今回は、持っている知識の範囲で写真ギャラリーを作ってみました。何とか狙いの動きはしてくれましたが、何しろ写真の数だけ関数が必要と言う欠点があります。

         やっぱり、eventオブジェクトのcurrentTargetプロパティ、img要素のphotoidプロパティを使う方法が王道でしょうね・・・・

        次回は何をしようかな〜。

         なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。


        JavaScript・eventオブジェクト使って写真ギャラリー

        0
           助けてー
          今回はギブアップでーす
          以下を読んで誰か助けてー

          と言う事で以下が挫折談でーす。
          ???????????????????
          このテーマは難題なので後回しして来ましたが「JavaScriptのabc」としては最後のテーマにするつもりで、しつこく挑戦します。
          作りたいのは、下の様な画面で、
          下のサムネイルのどれかをクリックすると、上の大きい写真が切り替わる
          矢印をクリックしたら、大きい画面がサムネイル上の左右の画面と切り替わる
          と言うプログラムです。
          js46写真ギャラりー

          最初に、動きの無い画面上配置だけのプログラムを作ります。
           
          まず、4枚の写真を用意して、head部で配列変数として定義します。body部では2つのdivを作り、最初のdivに矢印、最初の写真、矢印の順に並べ、それぞれにIDを付けます。
           2つ目のdivはサムネイルで、これにもIDを付け、その中で4つの写真を幅96px・高さ72pxで並べます。なお、このdiv内の写真は、最初はダミーですから同じもので結構です。
           この様にして作ったプログラムの実物は下の通りです。
          js51サンプル
           動きは右をクリックして下さい。 →JavaScript例
           狙い通り、何も動きません。

           では、JavaScriptに入ります。
           まず、ページをloadした時に、サムネイルのダミー写真をすべて削除して、表示すべき写真(配列変数の中)を配置していきます。
           下が、修正したプログラムです(head部のみ)。で囲んだ部分でを追加しており、追加の前半(while文)で、サムネイルdiv内の最初の子ノード(firstChild(写真)を1枚づつ、子ノードの数(childNodes.length)だけremoveChildメソッド削除します。
           追加の後半(for文)では、createElementメソッドを使って、配列変数photoの数(length)だけ、表示すべき写真を幅96px・高さ72pxで作り、appendChildメソッドを使ってサムネイルのdiv内に子ノードとして追加します。 また、ここでは、何番目の画像かをphptoidプロパティで記憶させています。
          js52サンプル
           動きは右をクリックして下さい。 →JavaScript例
          サムネイルの写真が用意したものに変わりました。

           では、これから動きを付けます。
           サムネイルをクリックすると上の大きい写真が切り替わる様にする為に、head部内で、下ので囲んだ4つの部分を追加しました。
          js53サンプル
          ,任蓮curphotoと言う変数を作って、現在大きく表示している写真の番号を記憶します。
          △任蓮▲汽爛優ぅ襪鬟リックした時にshowLargeと言う関数が働く様にしておきます。
          では、サムネイルの1枚目の写真を大きく表示させています。getElementByIdメソッドで大きな写真の要素を呼び出し、ここに配列変数photoの最初の写真を代入すると言う方法です。
          い牢愎showLargeの中味で、event.currentTargetでクリックしたサムネイルのエレメントを取得し、その写真のphotoidを変数curphotoに代入します。さらに、getElementByIdメソッドで大きな写真の要素を呼び出し、ここに配列変数photoのcurphoto番目の写真を入れる様にしています。
          さて動きはどうでしょう。右をクリックして下さい。 →JavaScript例

          だーめだ!!
          デバッグかけると、い裡温毀椶如'currentTarget' は Null またはオブジェクトではありません」のコメントでエラーが出ました。
          おそらく△onclickだとeventオブジェクトとかcurrentTargetプロパティとかとの関連付けができないのだろう、と勝手に思い、△裡厩圓魏爾で囲んだ様に変えました。
          js54サンプル
           さて、今度は、動きはどうでしょう。
          右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

          だーめだ!!

           
          デバッグかけると、今度は水色矢印の所で、い裡温毀椶如'photoid' は Null またはオブジェクトではありません。」のコメントでエラーが出ました。

          「それでは試しに・・・」と言う事で、水色矢印の行の中の「img.photoid」の代わりに数字の「2」を入れてみました。
           
          その結果の動きはどうでしょう。
           右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
           どのサムネイルをクリックしても、エラー表示する事無く、大きい写真はサムネイル3番目(photo[2})に変わります。
          判らん!! 一応、図書館から教科書借りてきて学習しているのだけど、本に書いてある通りにならん。
          js27泣きそう

          clickイベント、eventオブジェクトのcurrentTargetプロパティ、img要素のphotoidプロパティ、・・・・どう直したらよいのだろう???
           
          これ以上は私には無理なので、このサイトを覗いてくれている皆さんへの宿題にします。どうか、対処を教えてください。
           
          今回は「要素」を駆使して写真ギャラリーを作りテクニックを学ぶつもりでしたが、挫折してしまいました。対応策は人任せにしておいて、「よしじい」としては既知の知識で写真ギャラリー作りをしたいと思います。次回は、我流写真ギャラリーの予定です。


          JavaScript・ポップアップで新ウインドウ

          0
              先回タイマーを作ってからは、「eventオブジェクト」を使っての写真ギャラリー作りに挑戦してきたけど、アカン!!
             
            どうも「eventオブジェクト」のメソッドやプロパティの中には、ブラウザを選んでしまうものがあるらしく、うまく作れません。そこで、これはこれで時間をかけて行くとして、今回は「window」オブジェクトの「open」メソッドと「moveTo」メソッドを使ってポップアップウインドウをの出すことにしまーす♪♪
            js50簡単な方から

            3ステップに分けてプログラムを作ります。
            第1ステップでは、
              ・bodyの中に、HTMLで「このボタンでポップアップ!!」と言うボタンを作る。
              
            ・headの中で、新ウインドウを変数win1、その特性を変数winfeatureと定義し、 「このボタンでポップアップ!!」ボタンをクリックしたら関数openWindowが
            動く様にする。
            までにしました。下がその実物です。
            js47サンプル
            windowがloadされた時に関数btnPopupを働かせ、その関数の中でボタンがclickしたらポップアップ用の関数openWindowを働かせます。ただし、まだ関数openWindowの中味は空っぽですから、何も起こりません。

            右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

            さて第2ステップです。ここで、「window」オブジェクト「open」メソッドの登場です。

            「open」メソッドの書き方は下の通りです。
              open(URL,ウインドウの名前,ウインドウの特性)
            「URL」は、""で囲んで表示させたいWebページのURLを記入しますが、ブランク表示したいので""とします。
            「ウインドウの名前」は、""で囲んで任意(好み)のものを記入します。ここでは、aaaaにしました。
            「ウインドウの特性」は、変数winfeatureで定義しましたので、この変数名を入れます。なお、変数winfeatureの中で指定した特性は、「キー=値」をカンマ(,)で区切って列記しています。「open」メソッドの主な特性は次のものがあります。
              「width」、「height」(ウインドウサイズの幅と高さを指定する)
              
            「toolbar」(値が「yes」でツールバー表示)
              
            「resizable」(ウインドウサイズを変更可能にする)
              
            「scrollbar」、「location」なども有るそうです。
            このwindow.openを使って、関数openWindowを、で囲んだ様に変更しました。
            js48サンプル

            右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

            第3ステップでは、このポップアップを画面中央に持って来て、色を付けます。
             画面中央に持って来る方法は、スクリーンの幅と高さを調べて、その半分の位置を新ウインドウの中央に設定します。下の実際のプログラム中でで囲んだ部分で、ここでwin1オブジェクトの「moveTo」メソッドを使っています。
             ポップアップの色を変える方法は、cssのbackgroundを使います。下の実際のプログラム中でで囲んだ部分です。win1→document→最初body要素→style→backgroundとプロパティをたどって行き、色をアクアに設定しました。
            js49サンプル

            右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

            今回は順番を入れ替えてopenメソッドとmoveToメソッドを使ったポップアップを作りました。

            次回は、いまだ大苦戦中のeventオブジェクトを使って写真ギャラリー作ります。


            JavaScript・2つのタイマー(その3)

            0
               今回は、setTimeoutメソッドを使って、クリック後2秒でアラーム画面が出て来るプログラムを作りまーす。
              js44私が主役2
               「16.2つのタイマー(その1)」で学んだ2つ目のタイマーです。復習すると、
                   ♣ 一定時間後に、指定した関数を呼び出す。
                    
              書き方  window.setTimeout(関数,呼び出までの時間)

               動きとしては、画面上の「ここをクリックしてアラーム開始」をクリックすると、
              その文字が「タイマー動作中」に変わり、
              2秒後には「闘魂」の絵に変わる様にします。

              プログラムとしては、まずonClickで関数setAlarmを起動し、この関数の中で文字列を「タイマー動作中」に置き換えて「window.setTimeoutl(闘魂の絵に置き換える関数,2000);」と言う2秒アラームを設定します。

              実際のプログラムは下の様になりました。
              js45サンプル

              右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

               今回まで計3回でsetIntervalメソッド、setTimeoutメソッドを使ったタイマーを作ってみました。
               次回は、eventオブジェクトを使って写真ギャラリーを作りますが、大苦戦です。

              なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。


              JavaScript・2つのタイマー(その2)

              0
                 11月から始まるボランティアのパソコン教室・・・言い訳
                教材のCD,テキスト・・・言い訳
                つくらなくっちゃ〜・・・言い訳
                時間が無い・・・言い訳
                と言うことで、少し間があきましたが、JavaScriptの始まり始まりー

                setIntervalメソッドを使って、画面上の写真を2秒ごとに自動差し替えしまーす。
                js43誰が主役?

                 今回は4枚の写真を用意し、「pictureChange」と言う関数を作りました。
                 この関数は、カウンタ(1〜4)に対応して、body中のID「xx」の写真を別々の写真で置き換え、さらにカウントが4になったら1に戻す、と言うものです。
                 この関数を、window.setInterval(pictureChange,2000);を使って2秒毎に呼び出せば、狙いの動きをします。
                 実際のプログラムは下の様になりました。
                js41サンプル

                右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                良いですねー。これなら実際のホームページに使えそう。

                 
                今回まででsetIntervalメソッドの使い方は理解できました。
                 次回は、setTimeoutメソッドを使ってアラーム作ってみます。

                なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。


                JavaScript・2つのタイマー(その1)

                0
                    画面上にさりげなく置かれた時計、時間が来たら処理を始めるアラーム、これらのタイマーを作りま〜す。
                  js42私が主役

                   タイマーを作るには、windowオブジェクトsetIntervalメソッドsetTimoutメソッドを使い、これら自体はそんなに難しいものではありません。
                   まずこの2つのメソッドを理解しましょう。両方に共通する基本的な機能は、ある時間で、決められた関数を呼び出し実行する事です。

                  setIntervalメソッド
                    
                  ♣ 一定間隔毎に、指定した関数を呼び出す。
                     書き方  window.setInterval(関数,呼び出し間隔)
                     タイマーを停止したい場合は、clearIntervalメソッドを使う。
                  setTimeoutメソッド
                    
                  ♣ 一定時間後に、指定した関数を呼び出す。
                     書き方  window.setTimeout(関数,呼び出までの時間)
                     タイマーを停止したい場合は、clearTimeoutメソッドを使う。
                  ちなみに、呼び出し間隔、呼び出しまでの時間の単位は1/1000秒です。

                   今回は、setIntervalメソッドを使ってデジタル時計を作ってみますが、ロジックを判り安くする為に3段階に分けてプログラムします。

                  ステップ1 画面が立ちあがった時に「現在時刻」を表示
                   
                  body中のIDが「xx」の文列を、現在の時、分、秒に書き換える関数を作ります。関数の名前は「startWatch」と付け、画面立ち上がりと同時に起動する様にしました。
                  js38サンプル
                  右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

                  ステップ2 表示される「現在時刻」の時、分、秒全てを2ケタで表示
                   
                  関数の名前は「startWatch」の中で、現在の時、分、秒が「10」以下の時には頭に「0」を付けて、いかなる場合も2ケタ表示されるようにします。条件式は「if分岐」を使いました。
                  js39サンプル
                  右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

                  ステップ3 1秒毎に「現在時刻」が更新される様に表示・・・完成
                   
                  ここでsetIntervalメソッドが登場します。関数が1秒毎に呼び出される様にします。window.setInterval(startWatch,1000);」の1行の追加です。
                  js40サンプル
                  右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                  画面上での見映えを良くするにはスタイルを指定すれば良いのですが、ここでは割愛します。

                   今回はsetIntervalメソッドで時計を作って見ました。

                   setIntervalメソッドを使えば、画面上の写真を一定間隔で自動的に差し替えできます。次回は、この写真自動差し替えをやってみたいと思います。

                  なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。


                  JavaScript・イベントで文字・画像の置き換え

                  0
                      今回は、楽しいホームページなんかに使われている「マウス乗っけたら絵が変わる」ってのに挑戦!!

                    かなり実用に近づきます。
                    js37絵を替える
                     

                     今回学ぶ「マウス乗っけた時」、「クリックした時」「ページを読み込んだ時」などは「イベント」と呼ばれます。そして、「イベント」が起こった時に所定のプログラムを実行させるものを「イベントハンドラ」と呼びます。
                     「イベントハンドラ」は、「on〜」と記述される「属性」です。
                     以下に良く用いられるイベントハンドラ」「イベント」を示します。
                          イベントハンドラ ・・・イベント
                          onLoad・・・・・・・・・・読み込みが完了
                          
                    onClick ・・・・・・・・・クリックされた
                          
                    onMouseOver ・・・・マウスが乗った
                          
                    onMouseOut・・・・・マウスが離れた
                    他にもたくさんの「イベントハンドラ」が有りますが、それらは、遭遇した時にマスターしましょう。

                     まず、「文字の書き換え、絵の置き換え・・・DOMって言うんだって」で作った文字列書き換えのプログラムを手直しして、onLoad、onClick、onMouseOver、onMouseOutを使いイベントごとに違う動くをするようにします。
                          onLoadで、ダイヤログを出す
                          onClickをカウントして文字列に表示する
                          onMouseOverをカウントして文字列に表示する
                          onMouseOutをカウントして文字列に表示する
                     プログラムの概要は以下の通りです。
                        HTMLタグbdyを<body onLoad=”act0()”>として、onLoad時に処理をする関数act0()を指定する
                        HTMLタグpを<p id=”xx” onMouseOver=”acta();” onClick=”actb();” onMouseOut=”actc();”> として、各イベント時に処理をする関数を指定する。
                        head部分でJavaScriptの関数act0()、acta()、actb()、actc()を定義する。

                    関数acta()、actb()、actc()の内容は、「文字の書き換え、絵の置き換え・・・DOMって言うんだって」のbodyの中のJavaScript記述をほとんど流用できます。

                     下が、実際のプログラムです。
                    js35サンプル

                    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                    マウスを適当に操作すると文字列が変わります。

                     同じ要領で絵を操作してみましょう。「文字の書き換え、絵の置き換え・・・DOMって言うんだって」で作った写真置き換えのプログラムを手直しして、onClick、onMouseOver、onMouseOutを使いイベントごとに違う写真が出て来る様にします。
                          onClickで、「ミッキーカメラ」を表示する
                          onMouseOverで、「マミヤ35」を表示する
                          onMouseOutで、「ホークアイ」を表示する
                     プログラムの概要は、文字列の書き換えのケースと同じですが、写真を扱いますので、関数acta()、actb()、actc()の中で「interHTML」の代わりに「src」を使います。
                    js36サンプル
                    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                    マウスを適当に操作すると写真が変わります。

                     今回は少しオモシロイ学びができました。
                     次回は、タイマーで画面を動かしてみたいと思います。

                    なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。


                    JavaScript・文字の書き換え、絵の置き換え・・・DOMって言うんだって

                    0
                       ようやくたどり着きました、文字の書き換え、絵の置き換え

                      今回は基本的なものを理解したいと思います。
                       文字列を置き換えるには、次の様な処理をします。
                             置き換えたい文字列を探し、変数にする
                             
                        ↓
                             
                      その変数に新しい文字列を入れる

                       
                      これをどの様な記述で行わせるか・・・その前に知識の整理を。

                       Script要素がオブジェクトから成り立っている事は、「「Dateオブジェクト」使いこなしてカレンダー作り(その1)」で学びました。その時「オブジェクト」の一例として「document」を使いました。
                      js31フロー

                       今回は、この「オブジェクト」を探し出し、入れ替える事がテーマです。さて「オブジェクト」には、「document」の他にどのようなものがあるのでしょうか。

                       右の図はHTML文書で、タグを使ったツリー状になっています。
                       この中に探し出して処理したい部分があるわけですが、それをScript言語では「要素」と言い、これも「オブジェクト」です。又、「document」の上位には、ブラウザを表す「window」と言う「オブジェクト」があります。



                       すなわち、Scriptから見たWebページは下の様な階層構造になっています。

                      js32DOM説明

                       さらに難しいコトバを使うと、このように「オブジェクト」を探し出し、加工・処理する仕組みはDOM(Document Objekt Model)と呼ばれるそうです。

                       では、実際にプログラム作って、理解を深めます。

                       まず探し出すべき目標の要素ですが、判りやすいのはIDを付ける方法です。ある文字列を目標にする場合、HTMLのタグにIDを付けます。例えば、「あいうえお」と言う文字列にID「xx」を付ける記述、下の通りです。これはHTML上でリンクをかける時にとる手法でもあります。
                          <p id = ”xx”>あいうえお</p>
                      そして、JavaScript上で、ID「xx」を探し出し、それを「a」と言う変数にする記述は、下の様になります。
                          var a = document.getElementById(”xx”);
                      次に、例えば「かきくけこ」と書き替えたい場合、JavaScript上で、変数「a」のHTML上での内容を「かきくけこ」とします。これは、「innerHTMLプロパティ」を使い、次の様な記述です。
                          a.innerHTML = ”かきくけこ”);
                       
                      では、目標となる(書き換え前の)文字列を「書き替え前の文字列」とし、「文字列を変えました」と書き変えてみます。
                       下が、実際のプログラムです。
                      js33サンプル

                      右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

                       切り替えが早すぎるので、セキュリティ対策でスクリプトがブロックしてありこれを手動で解除していくケースの方が動きが良く判ります。

                       ここでは、メソッドとして「getElementById」を使いましたが、他にも「getElementsByTagName」(タグの種類で要素を選択、複数)、「getElementsByName」(name属性で付けた名前で選択、複数)などがあります。
                       また、プロパティとして「innerHTML」を使いましたが、これは、要素内のHTMLの文字列にアクセスする機能を持ちます。



                       同じ考え方で、絵を差し替えてみましょう。

                       HTML上で目標とする<img>タグにIDを付け、JavaScript上で「getElementById」を使って変数に直します。ここからが文字列の場合と違います。文字列の場合は、「innerHTML」を使って文字列を書き替えましたが、絵を置き換える場合は「src」を使いパスを変更します。

                       下のプログラムでは、目標となる(置き換え前の)写真はカメラC3(0c3)で、マミヤ35の写真(0mamiya35)に置き換えています。
                      js34サンプル

                      右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
                       これも絵の入れ替えが早すぎるので、セキュリティ対策でスクリプトがブロックしてありこれを手動で解除していくケースの方が動きが良く判ります。

                       この辺は、深堀りすればキリが無いけど頭が付いていかない。ここまで!
                       
                       
                      次回は、ボタンいじくって画面を変えてみませう。

                      なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。

                       


                      << | 2/4PAGES | >>