JavaScript - 基本

js - 基本

このページが説明するのは、Windowsユーザを対象にした
htmlも知らなくて、javascriptを始める、ということ。
javascriptそのものの説明（文法）の説明については是非
hackjsを参照願いたい。

html
概念的すぎる説明、一々身近な(と筆者が信じる)物に喩えて説明
するやり方はやめよう。誤解の元凶だ。

インターネットを見る、とは何枚かのwebページを見る、というこ
とである。webページとは結局web上の「ファイル」にすぎない。
１「ファイル」は例えばデスクトップ上やマイドキュメントで
１「アイコン」で表示される。htmlとはファイルの１つの規格で、
webページを作る為に開発されたもののやはり１つに過ぎない。

これは、これから将来、PCを使うにあたって影響を及ぼす大それた
ことなのだが、是非次のような設定変更をオススメする。
それは、
１．マイドキュメントを開く（実際には適当なフォルダを開いて構わない
２．ウィンドウ上部のメニューから
　「ツール」->「フォルダオプション」
　を開く。
３．フォルダオプションの「表示」タブをクリックして表示。
４．「詳細設定」の欄から
　「登録されている拡張子は表示しない」
　という欄の直ぐ左のチェックを外す。
　つまり拡張子を表示させる設定だ。
５．完了。開いたウィンドウは適当に閉じる。

これは拡張子が理解できない輩とMSがトラブルを起こすのを防ぐ意味
で大事な設定だが、プログラミングをするものが拡張子を理解しない
では困る。
以下、この設定を行ったことを前提で話を進める。

さっそくhtmlファイルを作ってみよう。
テキスト作成の為のエディタ(editor)の類いのソフトが必要である。
「メモ帳(notepad.exe)」でもよいが、これはエディタではなくて
メモ帳だということは認識する必要がある。つまり機能が少ないのだ。

エディタで次のような文章を入力して保存しよう。
ファイル名は「test.html」とでもすればよい。保存すると、保存箇所に
アイコンが１つ追加され直ぐ下にファイル名が表示されるはずだ。
もしも「test.html.txt」などとなっている場合、（恐れていたことが
起きた！）エディタの使い方を間違えたのだ。とりあえず、アイコンを
１回クリックして[F2]を押すとか、右クリックすることで「名前の変更」
を行え。さあ、文章はいかだ。（この通りに写せ。当然半角英数である）
<html>
<head>
</head>
<body>
</body>
</html>
君は頭がいいね。
<>に対応して必ず</>が存在するようだ。
<html>と</html>に囲まれる間がhtmlだ、と主張するのが
htmlタグ。headタグはページの情報を包含する。例えば、head内に
titleタグを書こう。
<html>
<head>
<title>タイトル</title>
</head>
<body>
</body>
</html>
またbodyタグは文字通りページの本体である。
試しにbody内に好きな文章（日本語でよい）を書いてみよ。
保存したhtmlファイルはアイコンをダブルクリックすれば、通常インター
ネットを見るのと全く同様の振る舞いをする。お前は何も考えなくて良い。
すべては目の前にある賢い箱が考えることだ。ああ、プログラマは虚しい。
プログラムに従う人間なのだから。神を呪う言葉をプログラマは知っている。

JavaScript
JavaScriptってのはだからねー。うんとねー。
HTML(大文字に意味なんてない)に対してDHTMLという言葉がある。
HTMLはHyperTextMakeupLanguage(テキストをハイパーにする言葉)
DHTMLはDynamicHTML(動的なHTML)。
動的ってのは随分と言葉どおりで本当に動きを与えるもの。
例えば、文章を入れ替えたり、表示してる画像を入れ替えたり動かしたり、
そういうもの。ただ、DHTMLてのも死語みたいなもので、最近はAjax。これだね。
そもそもWeb2.0が少し昔葉流行ったわけよ。ユーザに「俺は今インターネット
を使ってる」と意識させないインターフェース、みたいな。Ajaxってのはユーザ
が見えない場所でサーバとデータをやり取りするシステム系統のこと。

お察し鋭いですね。そうなんです。DHTMLだろうが、AjaxだろうがJavaScriptが
関係するんです。時にはJavaScriptそのものだったりします。(厳密には、DHTML
もAjaxもシステムのことを指すのであって具体的にコレ、というものではありま
せん。)とにかく、ただのテキスト以上のある程度のことをするのがJavaScript。

具体的に、どう使うか。HTMLの中で使います。
scriptタグがあります。とりあえず、先のHTMLにおけるhead内にでも使いましょう。
とりあえず、って言ったでしょ？
 - なんで取りあえずなんよ。
body内じゃないと困ることもあるからです。
 - いつ？
script内でbodyを扱う場合です。
 - 何それ？
DOMって知ってる？
 - 何だとバカにしやがって。白根絵よ
あとdocument.write()をhead内で使うと大変だよー
 - 全部一辺に喋るなバカ。お前のタイミングで言っても全部一辺に覚えれねーんだよ！

やってみよう。
HTMLにおけるタグは必要の無いものは別に書く必要ありません。

<html>
<head>
<title>JavaScriptのてすと。</title>
<script>
//ここにJavaScriptのコードを書く。
var i;
i=1+2+3;
alert(i);
</script>
</head>
</html>
さてJavaScriptのコードとやらは初めに言ったように別の所で説明してます。
ここでは説明しません。
一応body内で書くパターン（一例）も挙げましょう。
<head>
<title>JavaScriptのてすと。</title>
</head>
<body>
こんにちわ。<br>
これはjavascriptのテストです。<br>
<script>
var state="1+2+3";
var i=eval(state);
document.write(state+"の計算結果:"+i);
</script>
</body>
</html>
先のbodyタグの説明で、文章を書けと申しましたが、文章の任意箇所で普通に
改行しても、ブラウザで見ると改行されないことに気付きましたか？気付きま
したね。<br>で改行します。普通の改行は無意味です。
<br>はbrタグと呼ばれます。</br>なんてものはありません。
そういうのもあるさ。

外部jsファイル
プログラマというのはつまりプログラムをする者、という程度の意味ですが、
先頭の「プロ」がプロフェッショナルっぽく見えますね。私はアマチュアで
すからアマグラマなんです。そうです。

一流のプログラマともなると、いやならなくても半年位プログラムで遊んでる
と外部jsファイルの必要性に気付きます。
外部jsファイルというのは、先に言ったようにhtmlの中にjsコードを直接書く
のではなくて、純粋にjsコード（scriptタグ内）だけを書いたjsファイルと
htmlファイルを別に用意する。htmlからjsを関連付けさせて、htmlを開くと
直接書いたのと同じ振る舞いをする。

ナゼこんなことをするのか。
第一に物によっては同じjsを複数のhtmlから関係させることができる。一々
htmlに同じコードを書くのは無駄な仕事である。
次はhtmlとjavascriptを別々に編集したほうが綺麗だし人間労働の能率が上
がる、そんな気がする。経験に基づくものである。

実際にやってみよう。
下をそのまま写して「ex_test.js」てな名前で保存する。
var statement="1+2*3";
alert(statement+" = "+eval(statement));
次にhtml。scriptタグの中のみを消して次のように変更する。
<html>
<head>
<title>JavaScriptのてすと。</title>
<script src="ex_test.js"></script>
</head>
</html>
このhtmlを開くとき、プログラムは上から順に読まれ、scriptを読む時に、
"ex_test.js"を開きそれを読む。"ex_test.js"は相対パスである。つまり
htmlファイルから見てex_test.jsなのでhtmlと同じフォルダにある必要が
ある。(htmlがデスクトップならex_test.jsもデスクトップだし、)
scriptタグの名前"script"のすぐ後ろに半角スペースを噛ましてsrc=""と
書くが、srcはタグの属性と呼ばれる。

もしもjsがbodyを扱うなら<script src="ex_test.js"></script>は
body内に書く必要がある。

何かさ。bodyに書く必要、とかさっきから言ってるけど、じゃあ全部body
に書けばいいじゃん。
 - まあね。
まあね、って何だよ。じゃあ今までのはなんだったんだよ。騙したのか。
 - いやね。タイミングってのがあって・・・

少し触れたように、「スクリプト」(訳したら台本という意味)は上から読み
こまれますが、読み込むと即、実行・反映します。scriptに関して言えば、
<script>から</script>までを読み込んだら中身をやはり上から
忠実に実行します。headに書けばbodyを読む前に実行するでしょう。

相対パス、についてもう少し。
あるディレクトリ(例えばマイドキュメント)にhtmlを作ります。
そのディレクトリ内にさらにディレクトリB(フォルダB)を作ります。
Bの中はhtmlからみて"B"または"/B"または"B/"または"/B/"であり、
Bの中に作ったファイル"C.js"はhtmlからみて"B/C.js"または"/B/C.js"です。
絶対パスもあります。大したこと無いのでどうでもいいです。

以上。
戻る---2010/3/2---(c)Kero's World