初心者が始めるJavaScript

| コメント(0) | トラックバック(0)


このエントリーをはてなブックマークに追加

ここ2年ぐらいでしょうか。JAVA、Parl、PHPと、それぞれ、ものすごく中途半端になんですが、プログラムの本は読んでいます。さすがに、コードを読んで、どういう機能を動かしているものなのかとか、制限時間や上限回数がどこで指定されていて、どの値を変更すればいいか位は理解できるのですが、実際に1からコードを書いたことはありません。本の練習問題止まり。


と言う状況なのですが、最近、実務としてJavaScriptが必要になってきましたので、せっかくなので備忘録がてら、勉強したことをメモしていきます。

初心者である自分が、ぼやっとしていて躓いた点などを、随時まとめていけたらいいなと思います。また、本来の正確な意味を覚えると言うよりも、こういう感覚です! という感じで、とにかく実務レベルで応用できればいいという前提で書きます。ですので、正確には間違っている部分など多いと思いますが、これからプログラムを始めるよ! という人は、参考までに読んでみていただけると、何かのきっかけになるかもしれません。


さて、javascriptは、イベントが発生した時にコードが実行されます。クリックしたとき、マウスオンした時、読み込みが終わった時など、あらかじめ定められたイベントに応じて、あらかじめ定められた処理が行われます。ようするに、いろんなコードが用意されていても、閲覧者が、定義されたイベントに至る行為を行わなければ、何の処理も実行されません。

また、DOMという概念を知っておく必要があります。Document Object Model の略だそうですが、htmlやxmlなどの文書の特定の要素にアクセスする手法と覚えればよいでしょう。

今回は以下のコードに対して手を加えます。

【表示側】
<div id=”switchpoint1”>
<a href=”#” onClick=”switchPoint3();”><img src=”http://hogehoge.ne.jp/img/com/btn03b.gif” alt=”” border=”0”></a>
</div>
<!?switchpoint1end?>

<div id=”switchpoint3”>
◆クリックした投稿のURLを表示<br>
<a href=”http://hogehoge.ne.jp/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10”>http://hogehoge.ne.jp/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10</a>
<br>

<a href=”http://hogehoge.com/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10”>この投稿を指定する</a>
</div>
<!?switchpoint3end?>

【JS側】
function switchPoint3{
    document.getElementById(“switchpoint1”).style.display = “none”;
    document.getElementById(“switchpoint3”).style.display = “block”;
}

あるページで、特定のボタンをクリックすると、それまで表示していた要素を非表示し、同じページ内で、それまで非表示されていた要素を表示するコードです。また、hogehoge.ne.jp内のとある投稿のURLを、最終的に、hogehoge.comに送ります。

ボタンをクリックした時の処理の流れは以下です。

<a>タグの中に、「onClick=”switchPoint3()”」と記述があります。onclick属性といい、該当する<a>リンクをクリックしたときにイベントが発生します。

1.ユーザーがクリック
2.switchPoint3という関数が動く
3.JSのSwitchPoint3関数内に書かれた処理が上から順に実行される

function switchPoint3とありますが、この「switchPoint3」の部分はコードを書く人が勝手に決められる関数名です。functionに続けて関数名を記述することで、自分で関数を作ることができます。hogeでもいいわけです。関数とIDに同じ文字列「switchPoint」を使っていますが、関数名とIDは別のものであることを意識しましょう。

さて、そのJS関数の中身を見てみましょう。

document.getElementByID(“switchpoint1”),style.dispray

これがDOMと呼ばれるもののようです。
「document」で、htmlソース全体を指定します。
「.getElementByID」と続けることで、そのhtml内の特定のIDを持つ要素にアクセスしています。

ここの指定の仕方はいろいろとあります。
「document.title」と記述すれば、<title>タグの中身にアクセスできますし、「document.ElementsByTagName(“h1”)」のように記述すれば、<h1>タグ
の中身にアクセスできます。
いろんな指定の仕方がありますので、都度調べてみることにして、とりあえず先に進みます。

ここでは、ID(“switchpoint1”)というIDを持つ要素にアクセスしています。
IDは、その文書の中で常に一意の存在ですから、必ず要素が一つだけ特定されます。

このコードでは、<div id=”switchpoint1”>以下から、</div>までがその要素になります。

    document.getElementById(“switchpoint1”).style.display = “none”;
    document.getElementById(“switchpoint3”).style.display = “block”;

div要素にアクセスした上で、「.style.display= “none”;」と続いています。
「.style」で、cssのdisplayプロパティに対して、「=”none”」と続けることでnoneという値にダイナミックに変更し。これまで表示していたswitchpoint1というIDが指定されている<div>全体を非表示しました。

後者も同じで、switchpoint3というIDを持つ<div>要素全体を、displayプロパティの値をblockに変更することで、表示しました。

同じページ内で、再読み込みすることなく、表示要素をダイナミックに変更しているわけです。

さて、ここで本題です。
<div id=”switchpoint3”>内に記述されているリンクのパラメータの一部が静的に記述されているのですが、これを動的にとってきたい。

[% param.fol -%]&tn=[% param.tn -%]&rn=10”

掲示板のプログラムでして、folがフォルダ名、tnがスレッドNO、rnが最新の10件をと言う意味なのですが、これを、指定されたコメントNOを動的にとってきたいわけです。

表示側では、stwitchpoint1で指定したコメントのURLを表示し、該当するURLのリンクを表示し、またその値を持った状態で、他のドメインにデータを渡したいのですが、元のプログラムは、どのコメントを指定しても、最新10件のURLを静的に表示しています。

以下のように修正します。

◆表示側
<div id=”switchpoint1”>
<a href=”#” onClick=”switchPoint3(‘[% param.fol -%]’,’[% param.tn -%]’,’[% i.no -%]’);”><img src=”http://hogehoge.ne.jp/img/com/btn03b.gif” alt=”” border=”0”></a>
</div>
<!?switchpoint1end?>

もともと、switchPoint3という関数は、()内に何の値も持っていませんでしたが、今回、クリックした際に、フォルダ名とタイトル名、コメントNOを取得するようにしました。[% hogehoge -%]は、parlのtemplate toolkit側の処理ですので、割愛します。いずれにしても、Onclickイベントが起こった時に、switchPoint3と言う関数に3つの値を持たせました。

さらに、JS側でその値を受け取らなくてはいけません。

function switchPoint3(fol,tn,rs){
    document.getElementById(“switchpoint1”).style.display = “none”;
    document.getElementById(“comurl”).href = “http://hogehoge.com/fol=” + fol + “&tn=” + tn + “&rs=” + rs;
    document.getElementById(“comrsurl”).href = “http://hogehoge.ne.jp/fol=” + fol + “&tn=” + tn + “&rs=” + rs + “&re=” + rs;
    document.getElementById(“comrsurldisp”).innerHTML = “http://hogehoge.ne.jp/fol=” + fol + “&tn=” + tn + “&rs=” + rs + “&re=” + rs;
    document.getElementById(“switchpoint3”).style.display = “block”;
}

switchPoint3(fol,tn,rs)と引数を与え、表示側で投げた3つの値を順に受け取ります。左から、フォルダ名、スレッドNO、コメントNOが入っています。

switchPoint3関数内に、三つの処理を加えました。それぞれ、一意のIDを指定し、引数で取得してきた値を用いて、ダイナミックにURLを生成します。

.hrefで、表示側の該当するIDを持つhrefの値に、=より右側で生成したURLを与えます。

=より右側の作り方は以下。
文字列は ”hogehoge” とダブルクウォーテーションで囲みます。表示するときは「hogehoge」と表示されます。値はダブルクウォーテーションは用いずそのまま引数を指定します。folにたとえば「tokyo」というフォルダ名が入っていれば、tokyoという文字列が表示されることになります。
tnに1500というスレッド番号、rsに35というコメント番号が入ったと仮定すると、一つめの処理では、以下のURLが生成されます。

http://hogehoge.com/fol=” + fol + “&tn=” + tn + “&rs=” + rs
http://hogehoge.com/fol=tokyo&tn=1500&rs=35

hogehoge.com以下のtokyoというフォルダにある、1500番スレッドの35番コメントのURLができあがりました。
JSに限った事ではありませんが、プログラム初心者は、値と文字列の扱いに最初に躓きますね。
どれが動的に取得してきた値で、どれが文字列で、コードのうちどれが表示されるのか、を理解することが大切です。

innerHTMLは、ドキュメントにあるタグのIDを取得して、タグ内のHTMLを参照します。

表示側は、以下のように修正します。

<div id=”switchpoint3”>
◆クリックした投稿のURLを表示<br>
<a id=”com_rs_url”  href=”http://hogehoge.ne.jp/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10“>
<div id=”com_rs_url_disp”>http://hogehoge.ne.jp/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10</a></div>
<br>

<a id=”com_url”  href=”http://hogehoge.com/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10“>この投稿を指定する</a>
</div>
<!?switchpoint3end?>


それぞれ、js側で指定したIDを、値を差し替えたい個所に指定します。
com_url リンク先URL
com_rs_url 該当コメントのURL
com_rs_url_disp 該当コメントのURLを表示する用

JS側で、「.href」「.innerHTML」にアクセスし、動的に中身を変更しますので、これまで静的に指定されていたURLは削除しておきます。データの取得に失敗したときに表示する用に、記述しておいてもよいでしょう。

これで、
1.html側でリンクをクリックする
2.特定のコメントNOをJSに渡す
3.JSでコメントNOを受け取る
4.JSで、コメントNOを含んだURLを生成する
5.html側に作ったURLを渡して表示する

と言う処理を行うことができるようになりました。

とても簡単な処理ですが、DOMの概念とか、イベントが発生した時に処理が行われるということ、データがhtml側とJS側でどういう風に行き来するかといった、JavaScriptの基本的な概念みたいなものが良く分かりました。

今回の処理で、初心者が押さえておくべきポイントは、以下ぐらいでしょうか。

・URLを動的に作る場合、値と文字列を意識する
・onClick イベントが発生したときに、JS側に値を渡す
・JS側で、その値を受け取る引数を指定する
・引数を使って、動的に作ったURLをhtml側に戻す
・戻すときに、DOMが必要になる
・IDを使って、戻す場所を指定する

ということで、初めて簡単なコードを書いたJavaScript超初心者のメモでした。

トラックバック(0)

トラックバックURL: http://www.enjoy-com.com/mt/mt5/mt-tb.cgi/608

コメントする

        

人気エントリー