javascript講座001 -document.writeで「Hello World」-
ブログパーツやプルダウンメニューなどの動きのある装飾をブログやサイトに設置するときに欠かせないのがjavascriptです。
このjavascriptをゼロからスタートしよう！というのがこの企画です。
ボクも人に教えるのは初めてなので、かなり手探り状態ですが・・・。
それでは早速、始めてみましょう！
まず始めに、javascriptの一番基本的な機能である「文字の出力」をやってみましょう。
フリープラグインにjavascriptを書く場合、<script>タグを書かなければいけません。
<script type="text/javascript"><!--
--></script>
このタグの中に書いた命令が実行されます。
命令はいくつでも書けますので、何度も<script>タグを書く必要はありません。
今回やってみる「文字の出力」の命令は「document.write("出力する文字列")」と記述すれば実行されます。
document.write("Hello World");
と書いて保存してみましょう。
<script type="text/javascript"><!--
document.write("Hello World");
--></script>
このようになるかと思います。
最後のセミコロンは「この行の命令はここまで」という意味のマークですので、必要なものです。
省かないように気を付けてください。
成功すれば、サイドバーのフリープラグインを貼っている場所に「Hello World」という文字列が表示されるはずです。
クォーテーションとは、Hello Worldという文字列の両端に付いている " ←これのことです。
点が2つある " ←これを「ダブルクォーテーション」、点が一つだけの ' ←これを「シングルクォーテーション」と呼びます。
これらで囲まれた部分は、命令文ではなく単なる文字列だと扱われます。
逆にいうと、文字列だということをjavascriptに認識させるには、必ずクォーテーションが必要なのです。
例えば、
document.write←これは命令文であるdocument.writeとして扱われます。
"document.write"←これは「document.write」という文字列として扱われます。
使うのはシングルでもダブルでも構わないのですが、片端はダブルで片端はシングル、というのはNGですので注意してください。
文字列を出力するときに、document.write("<div></div>");のように、HTMLタグを出力したらどうなるでしょうか。
もちろん、HTMLとして認識され、CSSも適用されて表示(「レンダリング」と言います)されます。
これを使えば好きなようにHTMLタグを生成することができます。
では実際にやってみましょう。
<a href="http://ameba.jp/">マイページへ</a>
これは「マイページへ」という部分をクリックするとアメーバのマイページへジャンプするリンクを生成するHTMLタグです。
先程のdocument.write命令を使ってトライしてみてください。
うまくいきましたか？
おそらく、失敗したと思います。なぜでしょうか？
その理由を説明したいと思います。
失敗した原因は、クォーテーションの使い方です。
おそらく次のようなコードを書いた方が失敗したと思います。
document.write("<a href="http://ameba.jp/">マイページへ</a>");
よく見てください。ダブルクォーテーションが4つも登場しています。つまり、
"<a href="←ここは文字列
http://ameba.jp/←ここは命令文
">マイページへ</a>"←ここは文字列
というように、3つにわけて解釈されてしまっているのです。
「http://ameba.jp/」なんていう命令文は存在しませんので、エラーが出てコードは実行されません。
これを回避するには、2つの方法があります。
1…シングルクォーテーションを使う
document.write("<a href='http://ameba.jp/'>マイページへ</a>");
こうします。
「http://ameba.jp/」を囲む部分をシングルクォーテーションに変えただけですが、これなら上手く動作します。
2…\マークを使う
\は、特殊な意味を持つ文字の前に付けると、その特殊な役割を無効化してただの文字として認識させることができます。つまり・・・
document.write("<a href=\"http://ameba.jp/\">マイページへ</a>");
こうすれば上手く動作します。
ちなみに、特殊な意味を持つ文字のことを「メタ文字」と呼びます。
これからもこの「メタ文字」はしばしば登場しますので覚えておいてください。
第1回はこんなもんかな・・・という感じです。
わかりやすい、わかりづらいなど、リクエストやご意見いただければ幸いです。
では、第2回でお会いしましょう～！
このjavascriptをゼロからスタートしよう！というのがこの企画です。
ボクも人に教えるのは初めてなので、かなり手探り状態ですが・・・。
それでは早速、始めてみましょう！
Hello World!
まず始めに、javascriptの一番基本的な機能である「文字の出力」をやってみましょう。
フリープラグインにjavascriptを書く場合、<script>タグを書かなければいけません。
<script type="text/javascript"><!--
--></script>
このタグの中に書いた命令が実行されます。
命令はいくつでも書けますので、何度も<script>タグを書く必要はありません。
今回やってみる「文字の出力」の命令は「document.write("出力する文字列")」と記述すれば実行されます。
document.write("Hello World");
と書いて保存してみましょう。
<script type="text/javascript"><!--
document.write("Hello World");
--></script>
このようになるかと思います。
最後のセミコロンは「この行の命令はここまで」という意味のマークですので、必要なものです。
省かないように気を付けてください。
成功すれば、サイドバーのフリープラグインを貼っている場所に「Hello World」という文字列が表示されるはずです。
クォーテーションの役割
クォーテーションとは、Hello Worldという文字列の両端に付いている " ←これのことです。
点が2つある " ←これを「ダブルクォーテーション」、点が一つだけの ' ←これを「シングルクォーテーション」と呼びます。
これらで囲まれた部分は、命令文ではなく単なる文字列だと扱われます。
逆にいうと、文字列だということをjavascriptに認識させるには、必ずクォーテーションが必要なのです。
例えば、
document.write←これは命令文であるdocument.writeとして扱われます。
"document.write"←これは「document.write」という文字列として扱われます。
使うのはシングルでもダブルでも構わないのですが、片端はダブルで片端はシングル、というのはNGですので注意してください。
HTMLタグを文字列として出力してみる
文字列を出力するときに、document.write("<div></div>");のように、HTMLタグを出力したらどうなるでしょうか。
もちろん、HTMLとして認識され、CSSも適用されて表示(「レンダリング」と言います)されます。
これを使えば好きなようにHTMLタグを生成することができます。
では実際にやってみましょう。
<a href="http://ameba.jp/">マイページへ</a>
これは「マイページへ」という部分をクリックするとアメーバのマイページへジャンプするリンクを生成するHTMLタグです。
先程のdocument.write命令を使ってトライしてみてください。
うまくいきましたか？
おそらく、失敗したと思います。なぜでしょうか？
その理由を説明したいと思います。
クォーテーションを使いこなす
失敗した原因は、クォーテーションの使い方です。
おそらく次のようなコードを書いた方が失敗したと思います。
document.write("<a href="http://ameba.jp/">マイページへ</a>");
よく見てください。ダブルクォーテーションが4つも登場しています。つまり、
"<a href="←ここは文字列
http://ameba.jp/←ここは命令文
">マイページへ</a>"←ここは文字列
というように、3つにわけて解釈されてしまっているのです。
「http://ameba.jp/」なんていう命令文は存在しませんので、エラーが出てコードは実行されません。
これを回避するには、2つの方法があります。
1…シングルクォーテーションを使う
document.write("<a href='http://ameba.jp/'>マイページへ</a>");
こうします。
「http://ameba.jp/」を囲む部分をシングルクォーテーションに変えただけですが、これなら上手く動作します。
2…\マークを使う
\は、特殊な意味を持つ文字の前に付けると、その特殊な役割を無効化してただの文字として認識させることができます。つまり・・・
document.write("<a href=\"http://ameba.jp/\">マイページへ</a>");
こうすれば上手く動作します。
ちなみに、特殊な意味を持つ文字のことを「メタ文字」と呼びます。
これからもこの「メタ文字」はしばしば登場しますので覚えておいてください。
というわけで・・・
第1回はこんなもんかな・・・という感じです。
わかりやすい、わかりづらいなど、リクエストやご意見いただければ幸いです。
では、第2回でお会いしましょう～！