ホームページ作成支援
ジャバスクリプト辞典 超基本こ難しい基本その1こ難しい基本その2予約語変数演算子条件文1条件文2
関数関数と変数関数の戻り値いろいろな関数配列フォームとフレームクッキー
JavaScriptサンプル1JavaScriptサンプル2JavaScriptサンプル3
JavaScript見習所

小難しい基本その1

■オブジェクト指向プログラミング
オブジェクトとはいわゆる「物」の事です。たとえば、鉛筆やテレビなどを物と言いますね?そういった物は、存在意義というか、働きをそれぞれもっています。そして、それらの物には「状態」と「ふるまい」があります。たとえば、鉛筆ならば色や太さといった「状態」があり、線を引くという「ふるまい」 があります。「状態」と「ふるまい」をもって機能する「物」をプログラムを作成する場面に持ち込んだのが、オブジェクト指向です。
ジャバスクリプトも一応そんなオブジェクト指向のプログラミング言語です。

■オブジェクト
この場合のオブジェクトとは「ユーザーが操作できるインターフェイス」の事を指します。windowオブジェクトといえば、ブラウザのウィンドウ、documentオブジェクトといえば、ウィンドウの表示部分になります。
押して〜
オブジェクト
「押して〜」というボタンはwindowオブジェクトのdocumentオブジェクトのformオブジェクトのbuttonオブジェクトとなります。
このformやbuttonオブジェクトは1つのファイルの中に複数作ることができます。これらに名前を付けることによって同じdocumentの中に複数のボタンがあってもそれぞれのボタンに違ったイベントハンドラ(小難しい基本2にて説明)の指定ができるようになります。
オブジェクトの階層構造
このように、オブジェクトは階層構造をもっています。下は、主なオブジェクトの説明です。オブジェクト一覧はこちらです。
●windowオブジェクト
全てのオブジェクトの基となるものです。 ウィンドウの操作や、メニューバー、ツールバー、アラート等ブラウザ全体の動作です。全てのオブジェクトの親なので、参照時に記述を省略することができます。たとえば、「window.alert()」も「alert()」で呼び出すことができます。
●navigatorオブジェクト
ブラウザについての情報をもっているオブジェクトです。ユーザーが使っているブラウザやOSなどの環境について調べることができます。
●documentオブジェクト
「HTML」を表示する部分を示すオブジェクトです。HTMLページがウィンドウであっても、フレームであっても基本となるのは、documentオブジェクトです。documentオブジェクトには、アンカー、フォーム、リンク、タイトル、カラー、場所(URL)などページの要素に関するさまざまな情報が含まれており、多くの要素オブジェクトを操作するメソッドやプロパティを提供しています。
●locationオブジェクト
windowオブジェクトの下に配置されているオブジェクトです。場所に関しての処理を行うときに使用します。URLを変更したり、現在表示されているページのアドレスについての情報を取り出したりすることができます。
●historyオブジェクト
ブラウザの持っている履歴に関しての処理を行うときに使います。このオブジェクトを使うことで、1つ前のページに戻るといった動作をさせることができます。

メソッド
たくさんあるオブジェクトを操作するスイッチのようなものです。メソッドの後に、「( )」という値を設定します。その値のとおりにメソッドを行うことになります。よくわからなくても、気にしないで次のJavaScriptの基本形その1を見てください。

JavaScriptの基本形その1
どこを(ドキュメント).どうする
「どこを(ドキュメント)の部分」にdocumentやframeなどのオブジェクトが入ります。 そして、「.」(ピリオド)の後の「どうするの部分」にwriteやpromptなどメソッドが入ります。 ( )の部分にメソッドの値が入ります。
<script language="JavaScript">
<!--
document.write("ドキュメントに書きだします");
//-->
</script>
このオブジェクト(document)に「ドキュメントを書き出します」という値を書き出し(write)する。という簡単なプログラムです。実行例はこちらです。
これが「文字表示」のいちばん簡単なスクリプトです。では、次の段階として、文字以外のものを表示する場合の例を二つ、あげます。

●簡単な日時表示<dateメソッド>
<script language="JavaScript">
<!--
document.write(Date());
//-->
</script>
Date()は、「現在の時刻を書き出す」という命令です。「""」がないのに注意してください。「""」で囲むと、「Date()」という文字列を書き出すという命令になってしまいます。実行例はこちらです。
●算術演算<mathメソッド>
<script language="JavaScript">
<!--
document.write(Math.pow(2,3));
//-->
</script>
Mathは算術演算用のメソッドです。上の場合、「Math.pow(2,3)」がMathメソッドになります。pow()は「数字を何回かける」という命令です。実行例はこちらです。

プロパティ
プロパティは、オブジェクトがもっている特性のようなもの、「設定値」です。オブジェクト内の固有の変数ということもできます。プロパティに値を設定することにより、オブジェクトの設定値を変更することができます。プロパティの値として設定されているのは、背景色、テキストの色、ブラウザの各種情報(名前・ヴァージョンなど)です。

JavaScriptの基本形その2
どこの.プロパティを=値(どうする)
「どこの(ドキュメント)の部分」オブジェクトが入ります。そして、「.」(ピリオド)の後の「プロパティ」にbgColorfgやColorなどプロパティが入ります。値の部分にプロパティの値が入ります。(そのまんま…(笑))
<script language="JavaScript">
<!--
document.bgColor="#000000";
document.fgColor="#ffffff";
//-->
</script>
画面が表示されると同時に画面が変更されます。実行例はこちらです。

ジャバスクリプト
超基本こ難しい基本その1こ難しい基本その2予約語変数演算子条件文1条件文2
関数関数と変数関数の戻り値いろいろな関数配列フォームとフレームクッキー
JavaScriptサンプル1JavaScriptサンプル2JavaScriptサンプル3
便利リンク
ネット便利帳ホームページ作成支援イラストラウンジおすすめスタイルシートメモみつけたきせき