Home > タグ > JavaScript

JavaScript

サイ本かった

先日クリップライトを購入し、ベッドの上で優雅に読書を楽しんでいたところ何かを燃やした臭いが漂ってきたので、こんな時間に何燃やしてんだよと思ったらクリップライトの熱が椅子を燃やしてました、こんばんは、こしあんです。

ライトはLEDが良いらしいですよ。

さて、職場に詳しい人がいるからと、逃げてきたJavaScriptですが、そろそろ1度腰を据えて勉強しておこうと思います。

評判の良さそうなオライリーのサイ本。比較的どこの書店にも置いてあるようですが、本棚で擦り切れてボロボロなものしかなかったので、大型書店まで行ってきました。
オライリーのフェアだったらしく、おまけ込みで袋詰めされてました。

20081120a

見本誌かなーと思ったら、

20081120b

付箋だった。

おまけはともかく、よい状態の本が買えて満足です。
新品で本を買って汚れてたら萎えるもんね。その辺りやっぱりAmazonとか強いですよね…。

分厚いので持ち歩くにはしんどいので家でノンビリ勉強します!

JavaScript 第5版
JavaScript 第5版

擬似プロトコルとラベル@JavaScript

リンクをクリックされたときにJavaScriptで処理をしたいときは a タグの href属性か onClick属性に書くことが多いです。

  1.  <html>
  2.  <head>
  3.  <script type="text/javascript">
  4.  <!–
  5.      function hoge(str){
  6.          document.getElementById(’res’).innerHTML=str+’をクリックしました’;
  7.      }
  8.  //–>
  9.  </script>
  10.  <body>
  11.  <p><a href="javascript:hoge(’href属性を使う’)" >href属性を使う</a></p>
  12.  
  13.  <p><a href="#" onClick="hoge(’onClick属性を使う’)" >onClick属性を使う</a></p>
  14.  
  15.  <p><span id="res">リンクをクリックしてね!</span></p>
  16.  </body>
  17.  </html>

「href=”#”」とかどうなのよ、という意見もあるかと思いますが、今回のポイントから外れるのでスルーします。
で、hrefとonClickで書き方が違います。hrefには”javascript:”を先頭につけています。
これは擬似プロトコルと呼ばれるもので、”http:”と同じようなプロトコルの指定という意味で同じようなものです。なので、普段URIを指定するようなところにJavaScriptを書きたいときに指定します。指定しなければ動作しませんので、大した問題にはなりません。

では、onClickはどうでしょうか。以下のJavaScriptは動作するのでしょうか。

  1.  <html>
  2.  <head>
  3.  <script type="text/javascript">
  4.  <!–
  5.      function hoge(str){
  6.          document.getElementById(’res’).innerHTML=’うごいたよ!’
  7.      }
  8.  //–>
  9.  </script>
  10.  <body>
  11.  <p><a href="#" onClick="javascript:hoge(’onClick属性を使う’)" >これうごく?</a></p>
  12.  
  13.  <p><span id="res">リンクをクリックしてね!</span></p>
  14.  </body>
  15.  </html>

これも動きます。
なるほど、ならJavaScriptで動作させたいときは常に”javascript:”指定したほうがよさそうだね…とはならないのです

>javascriptの正しい書き方なのでしょうか?
とりあえず誤りではないというのが答えかと。
ただ、予想されているのとはたぶん異なり、
規則の上では javascript という名前のラベル付けがされたと考えられると思います。
onChange=”javascript:関数名”について - 教えて!goo

つまり、この場合の”javascript:”は擬似プロトコルではなく、ラベルになるとのこと。
実際に試してみましょう。

  1.  <html>
  2.  <head>
  3.  <script type="text/JavaScript">
  4.  </script>
  5.  <body>
  6.  <a href="#" onClick="javascript:{break javascript;document.getElementById(’res’).innerHTML=’ありえない’}" >リンク</a>
  7.  <br />
  8.  <span id="res">リンクをクリックしてね!</span>
  9.  </body>
  10.  </html>

先頭の”javascript:”がラベルとして解釈されるなら、”break javascript;”でブロックから抜け、次のinnerHTMLの処理は実行されないはずです。

■IE6.0
エラー”このLabelは定義されていません”
ラベルとして解釈されず。

■FF3.0
innerHTML実行されない。
ラベルとして解釈された。

■Opera9.6
innerHTML実行されない。
ラベルとして解釈された。

こんな感じです。IEは擬似プロトコルとして解釈してんのかな。
まあ、こんなコード書くのは限りなくダメダメなので深追いはしません。

結論。onClickなどに”javascript:”を書くやつは限りなくアヤシイ

おわりです。

Home > Tags > JavaScript

Search
Feeds
Link
あわせて読みたいブログパーツ
Meta

Return to page top