2007-09-13

初めてのJavaScript - アドレスバー

エディタなしでも大丈夫。アドレスバーJavaScriptを実行してみよう!

これでも一応javascript

アドレスバーに入れた場合、最後の値が表示されます。

javascript:"Hello world!"

ダイアログで表示

サンプルでは良くあるけれど、実際、ダイアログはほとんど使いません。でもちょっとしたデバッグには便利です。

javascript:alert("Hello alert() world!")

このとき「alert()」とは「window.alert()」を表します。windowオブジェクトブラウザの表示ウィンドウを表すオブジェクトです。windowオブジェクトプロパティやメソッドを使用する場合は、alertに限らず「window.」が省略できます。

ドキュメントに表示

これが「print "Hello world!"」に一番近と思います。

javascript:document.write("Hello document.write() world!"); document.close()

documentオブジェクトは表示中のドキュメント全体を表すオブジェクトです。

DOMで追加

Document Object Modelを利用して要素を追加します。

javascript:document.write("<html><body></body><html>"); document.close(); var p = document.createElement("p"); p.appendChild(document.createTextNode("Hello DOM world!")); document.body.appendChild(p);

現在ドキュメントHTMLであれば、先ほどの「document.write()」はHTMLを扱うことになります。これを使用してbody要素を作っておき、そこへp要素を追加しています。

[追記] createTextNodeを使用するように変更しました。

イベントハンドラを使用

DOMを使用した場合のメリットは後で要素を扱えることです。

javascript:document.write("<html><body>Hello world!</body><html>"); document.close(); p = document.createElement("p"); p.innerHTML = "Hello javascript world!"; document.body.appendChild(p); p.addEventListener("click", function(){this.style.borderStyle="solid"}, false)

イベントハンドラの使用方法は幾つかありますが、ここでは「addEventListener」を使用します(申し訳ありませんがIEでは動きません)。この例では、イベントに対するコールバック関数として無名関数の「function(){……}」が登録されます。p要素がクリックされたとき「function(){……}」が呼び出されます。このとき、this(変数ではありません!)が、要素pを示します。

  • DOMをつかうのだったらinnnerHTMLは使うべきではないと思う。

    • 一方はcreateTextNode使うようにしました。ただ、空白ページでも動くように、 document.write(&quot;&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;html&gt;&quot;) ってしてるのがいまいち。何か良い方法はありません...

    • まららん曰く「使われまくってるので今更なくなるということはない」

  • RimoでそのページにはってあるYouTubeを自動的に再生するjavascript javascript:window.open('http://rimo.tv/#/channel?url='+encodeURI(location.href),%20'_blank',%20'width=425,height=350,resizable=1,scrollbars=1');undefined; 途中で...

    • ダウンロード必要じゃないですか。 http://anond.hatelabo.jp/20070914213754 http://anond.hatelabo.jp/20070914204359 この2つは直接ブックマークツールバーに入力するだけですよ? はてなブックマーカーなら...

  • 今見てるサイトをケータイでみるためのQRコード化javascript javascript:window.open('http://d.hatena.ne.jp/barcode?str=http://mgw.hatena.ne.jp/?url='+encodeURI(location.href),%20'_blank',%20'width=120,height=120,resizable=1,scrollba...

    • 何でもかんでもweb上でやりたくなる気持ちはわからなくもないのだが、普通はこれで万全。 http://www.psytec.co.jp/docomo.html ま、webアプリになってればユビキタスなわけだけど、だからって、...

  • 「メタブックマークする」 javascript:window.open('http://b.hatena.ne.jp/add?mode=confirm&amp;is_bm=1&amp;title=http://b.hatena.ne.jp/entry/'+escape(document.title)+'&amp;url=http://b.hatena.ne.jp/entry/'+escape(location.href),%20'_blank',%...

  • ルー語変換javascript javascript:void(location.href='http://lou5.jp/?url='+encodeURI(location.href)) これで http://blog.livedoor.jp/dankogai/archives/50912060.html 1.視覚効果を使いすぎるな(Don't abuse your visuals) - ポスター...

  • 注意:Firefox 6以降ではアドレスバーでは動作しません http://anond.hatelabo.jp/20070913180648

  • [[Internet Explorer]]9以降、[[Google Chrome]]13以降などで[[コピーペースト]]した場合は先頭に「javascript:」を追加してください http://anond.hatelabo.jp/20070913180648

記事への反応(ブックマークコメント)

ログイン ユーザー登録
ようこそ ゲスト さん