uhyohyo.net

JavaScript初級者から中級者になろう

基礎第一回

JavaScriptの書き方

基礎とはいえ、さすがにHTMLの書き方くらいは知っているという前提で書いていきます。

さて、Webページ上でJavaScriptを動かすには、scriptという要素を使います。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <script type="text/javascript">
      alert("test");
    </script>
    <p>test</p>
  </body>
</html>

これを適当なhtmlファイルに保存して開いてみると、「test」というアラートが出ます。

さて、scriptタグを置く場所ですが、head内に置くのがよく見られますが、基本的にどこでもいいです。body内に置いてもいいですし、bodyの一番最後に置くパターンも実はそれなりにあります。

IEをやめよう

本題に入る前に、ちょっとブラウザの話題です。

IEとは、「Internet Explorer」のことで、Windowsのパソコンを手に入れた後にインターネットを開くと出るやつです。

「ブラウザ」というインターネットを見るソフトの一種なのですが、このIEがよくないブラウザで、それにも関わらず(日本の)Windowsではデフォルトでこのブラウザが入っているため、多くの人がIEを使用しています。

JavaScriptの観点からどういう点がよくないかを述べると、一部の機能でIEは独自の方法を作ってしまっています。しかも標準の方法に対応していないことがあります。

IEもバージョンアップを重ねており、最新のIE(2014年7月現在、IE11がでています)は他のブラウザと比べてもそんなに遜色ないのですが、古いIEはそれはそれはひどいものでした。この講座を書き始めたとき(2010年頃)はIEの最新バージョンが8で、他のブラウザが現代人だとしたらIEだけ明治時代に生きているというくらい違いました。普通のブラウザ向けの処理とIE向けの処理を別々に書いてやる必要があったのです。

今はマシになったといっても、IEにはもう一つ特徴があります。それは、古いIEが今でも使われているということです。このサイトも未だに(2014年7月現在)IE8からのアクセスが数%あります。これは、以前のOSだとIEが最新版にならないことなどが関係しています(例えばWindows VistaはIE9までしかバージョンアップできません)。

ですから、IEはWebサイトを作る人達の間ではひどく嫌われています。無知な人はブラウザにも詳しくないためIEを使う割合が高いので、IEでは動かないようなWebサイトを見ても自分に原因があるとは思わずにクレームをつけてくるからです。特に商用のサイトなどになれば、そんな無知なユーザーでも無視するわけにはいかず、IEでも動くように余計な労力をかける必要があるのです。

さて、それではどうすればいいのかですが、自分はIEなんて使わないようにしましょう。「Firefox」や「Opera」「Google Chrome」などの別のブラウザを使うことをおすすめします。自分の愛用のブラウザは「Opera」と「Google Chrome」です。

FirefoxやChromeなどはJavaScriptの仕様に関してなかなか厳格です。IEを基準にして物事を考えるのは絶対にしてはいけないことです。それは標準的とは限らないからです。もちろん、何か作った時はIEでも動くか確かめるためにIEを使用するのは悪いことではありません。ただ、普段からIEを使うというのは避けるべきでしょう。

今後いろいろJavaScriptの解説をしていきますが、IEではまともに動かない場合があると思います。IEでも同じような動作をするようにする方法も無いこともないのですが、それは標準仕様ではないので、解説しません。

先ほど最新のIE11ならば他のブラウザと遜色ないと述べましたが、実は第十章で解説するXPathに関してはIE11でも動作しません。このように、この講座を読むにあたってはIEだと不都合があるかもしれません。ぜひIEをやめましょう。

アラートを出す

それでは、実際にJavaScriptの解説をしていきます。

一番上のサンプルを見てみると、JavaScriptが書いてある<script>〜</script>内には、次の一行しかありません。

alert("test");

この一行がアラートを出す処理をしています。ちなみに、JavaScriptは基本的に上から順番に処理が実行されていきます。この一行ですが、初めから解説するとなるとたった一行でも非常に大変な解説になります。

ちなみに、このアラートですが、JavaScriptをデバッグ(動作をチェックしてバグを直すこと)するのには役立ちますが、実際にWebページで使わないほうがよいでしょう。これが出ると他の操作ができなくなり、非常に邪魔です。

関数

まず「関数」というものを解説します。これは、JavaScriptで何か処理をするのに必要なもので、関数がもつ機能を使うことを「実行する」とか「呼び出す」といいます。数学で「関数」という用語がありますが、それとはまた結構違うものです。

関数は次のようにして呼び出します。

関数名()

関数名はその関数が持つ機能を表します。今回の場合、「alert」が関数名です。

しかし、今紹介した形と、上のサンプルは多少違っています。上のサンプルでは、括弧の中に「"test"」というものが挟まっています。

これは「引数(ひきすう)」というもので、関数に与える情報です。

どういうことかというと、alertの場合、この関数はアラートを出す関数ですが、ただalertを使っても、何を表示すればいいのか分かりません。そこで、この場合は何を表示するかという付属情報を与える必要があります。これが引数です。もちろん、どういう引数を渡せばいいかは関数によって違います。

この場合、alertの引数は「"test"」ということになります。また、引数が2つ以上必要な場合もあります。その場合、「,」で区切ります。例えば、aaaという関数に3つの引数を渡したい場合、次のようにします。

aaa(引数1, 引数2, 引数3)

ちなみに、このサンプルでは「,」の後に余計な空白が入っていますが、JavaScriptでは自由に空白を入れることができます。ただし、「aaa」という関数名を「aa a」というように分けることができません。単語を分けると2つの別の単語と見なされるからです。あくまで単語と単語の区切りなどに空白を入れることができます。

さて、引数が「"test"」ですが、実際にアラートに出るのは「test」です。両端の記号が抜けていますね。これはなぜかというと、両端の記号は、「ここからここまでが文字列である」ということを表しています。

文字列とは、「test」のように「文字の並び」のことです(1文字でも文字列です)。つまり、「"test"」が引数だというのは、実は「『test』という文字列」を引数として渡していたのです。

この記号を省略してしまうと、意味が変わってしまいます。文字列は「"」で囲むということを覚えましょう。

だから、前のコードの「"test"」を"あああああ"などに変えると任意に出る文字列を変えることができますが、「ああああ"」のように"で囲まないとエラーが出てしまいます。

また、次のようなことができます。

alert(100);

"」で囲んでいないのに、ちゃんと「100」と表示されます。

これはなぜかというと、この100は、文字列ではない別のものに解釈されます。それは数値です。JavaScriptには、文字列のほかに数値というものがあります。要するに数字なのですが、これは文字列ではないので、"で囲む必要はありません。逆に、囲むと「100」という文字列として扱われ、数字ではなくなります。今回はただ表示するだけなのでどちらでも構いませんが、次回で解説する数値の計算などになると、文字列の状態では計算できません。

文字列や数値といった実体のあるものを、といったりします。

文の区切り

今までの解説で、最初のサンプルでまだ謎の部分が一つだけあります。最後の「;」です。

これは、ひとつのが終わることを表す記号で、文の終わりにはこの記号をつけるべきです。

さて、文とは、処理の一単位です。alert("test")でひとつの文ということになります。次からは、2つ以上の文からなる処理が出てきます。