やっぱり猿にはわからない
JavaScript講座

 

 

-章- 各章には更にメニューページがあります。

 

 

 前書き

通常のJavaScript講座では、最初に「JavaScxriptとは?」から始まり、記述規則からプロパティやメソッドの意味、
また基本構文の説明や演算・変数・関数といった具合に進めて行きます。
多くのNet講座でもそうですし、解説書籍でも同様です。

本講座では、未熟なオーナーが未熟だからこそぶつかった疑問点や理解しづらい内容を、
少しでも理解しやすく説明できれば、そんな思いで綴っています。

尚、このサイトの特質から、WindowsのInternetExplorer5.0以上を中心に(というよりNetscapeやMachintoshはほとんど
取り扱っていません)ターゲットを絞っております。
Netscapeに対応しているかどうかは説明していないために、クロスブラウザでの使用をお考えの方は、
別途追加学習が必要となります。

ここではJavaScriptが少しでも詳しく理解でき、更なるスキルアップの下地になることを切望しております。

概要をつかもう

JavaScriptはDynamicHTMLの格子のひとつで、ホームページやHTMLメールに動的効果を発揮させる技術です。
DynamicHTMLは規約というものではなく、ブラウザに実装されている機能やタグ、その属性(CSSも含みます)から要素までを
一つ一つの部品(これをオブジェクトと呼びます)として扱い、参照したり、操作することでブラウザに動的効果を与える技術の総称です。

これについては後に再度説明いたしますので、ここではJavaScriptによって、それら部品を操作することで、HTMLだけでは不可能な
動きのある効果を得ることができることを把握しておいてください。

この部品操作という捉え方をしっかり理解していないと、JavaScriptでなにかしようと考えたとき、問題にぶつかる可能性が高いのです。
CSSを含めて、HTMLにも理解を深めていくことが、部品を捉える考え方を見につける際にも必要になってきます。
いきなりすべてではなくても、この講座を進めながらHTMLとCSSの学習も平行して学んでいくことができれば、
理解度はさらに深まると考えます。

上で述べた部品を操作するためには、その部品そのものにJavaScriptからアクセスできなければなりません。
それを可能にしたのがDOM(DocumentObjectModel)という考え方に立ったブラウザでの対応です。
MicrosoftではDOMではなく、BOM(BrowserObjectModel)と呼んでいます。
BOMはブラウザ上のボタンやツールバーなどもオブジェクトとして扱うという概念で、
ブラウザのある種の機能を部品として操作できるようになりました。

DOMもBOMもDynamicHTMLに内包されて、InternetExplorerやNetscapeに取り入れられています。

 

JavaScriptではオブジェクトをどう捉え、操作することができるかをしったり身に着けてください。
プロパティやメソッドは、リファレンスを見ればわかりますが、オブジェクトが何であるかがわからないと、
スクリプトの理解はできません。
HTMLやCSSを学ぶ際は、各属性や要素をオブジェクトとしてみるようにしてください。

 

 

主なオブジェクト

navigator(ブラウザ固有の情報)  screen(ディスプレイに関する情報)  event(イベント情報)
window(ブラウザ自身や警告ウィンドウなどのダイアログ情報や操作)  frame(フレーム情報や操作)
document(HTMLファイル自身や記述されている内容の情報や操作)  history(ブラウザがロードした来歴情報)
 location(ページURL情報)  link(リンク配列によりリンク一つ一つの情報を扱う)などなど・・・

他にも、 form  area  image  applet  embeds  layer  date  math  string  array  function  obuject  boolean  number  regexp
などがある。

※ここで覚える必要はありません。

 


例えばフォームボタンを押すとこのページのURLを表示するという場合、このウィンドウのlocationオブジェクトのプロパティである
hrefを使って、その情報を取り出し、windowオブジェクトのメソッドであるalert()で表示させることができます。

 ソース

<form name="form1">
<p align="center">
<font color="blue">
<span style="font-size:10pt;">
<input type="button" name="formbutton1" value="このページのURLは" style="color:blue;" onclick="javascript: alert(location.href)">
</span>
</font>
</p>
</form>

※windowオブジェクトは多くの場合省略ができる。

また画像もimageオブジェクトですから、画像を変更したり表示方法を変えたりと、JavaScriptを使えば、
動きのあるページやメールを作成できます。

メールの場合は、WEBページと違い、使用する画像やMIDIなどがメールソフトによって自動的に添付される方法を採用しないと、
相手に画像が見えないとか、MIDIが聞こえないということが起こります。

WEBページでは使用される画像やMIDIなどをサーバーに置き、そのファイルを読み込むことで表示させますから、
事は簡単です。

 

 JavaScript自体はそれほど難しいものではありません。
むしろスクリプトをどう組むか、そのプロkグラム手法を論理的にかつ創造性を持ってできるかにかかってきます。
この点が「JavaScriptは難しい」と思わせるかもしれませんが、それはプログラムを組む場合にどんな言語であれ同じことがいえます。

プログラムすることはある種”慣れ”が必要です。
簡単なものから自分で作ってみる、できたら更に高度なものへという段階を経て、知らず知らずスキルアップし、プログラムの考え方も自然に身についてきます。

皆さんがんばってくださいね。

ここから講座を順番に読み進めることができます。

 

 

JavaScript基本記述編

 

Window

 

Document

 

Dialog

 

Ebent

 

 

Sample

 

Tips

 

Reflet

 

Software

 

Reference

 

Top

 

GuestBook

 

Chat

 

QuestBBS

 

Link

 

SecretChat

 

 Plugin検証

 

Stationery

 

Technology