JavaScript入門（リファレンス）

目次

JavaScriptの概要

JavaScriptの使用方法

  1. <SCRIPT>タグに記述
  2. 各要素のイベント属性に記述
  3. <A>タグのhref属性に記述

ダイアログ・ボックスの表示

  1. alert
  2. confirm

documentオブジェクト

  1. document.open
  2. doument.write
  3. document.writeln
  4. フォームの操作

historyオブジェクト

  1. history.back
  2. history.forward
  3. history.go

変数

Date

関数

Ajax

JavaScriptの概要

このドキュメントでは JavaScript の使用方法と文法を説明します。JavaScript は Netscape 社の開発した HTML 内に埋め込み可能なオブジェクト指向スクリプト言語です。クライアント側（主にブラウザ）で動作するスクリプト言語で、文法がJavaに似ています。ただし、Javaテクノロジと直接の関わりはありません。 Ajax として使うこともできます。

JavaScriptの使用方法

HTMLからJavascriptを使用するには、以下の方法があります。

  1. <SCRIPT>タグに記述
  2. 各要素のイベント属性に記述
  3. <A>タグのhref属性に記述

<SCRIPT>タグに記述

<SCRIPT>タグの値として直接Javaスクリプトを記述するか、src 属性に外部ファイルのURIを指定します。

<script type="text/javascript">
<!--
  document.write("JavaScript");
// -->
</script>

スクリプトの記述部分が定義が <!-- と // --> で挟まれてコメントになっているのは、スクリプトが解釈できないブラウザではコメントとして扱われるようにしているためです。

<script type="text/javascript" src="www.js.com/js/sample.js">
</script>

外部ファイル www.js.com/js/sample.js には、Javaスクリプトを記述しておきます。

document.write("JavaScript");

各要素のイベント属性に記述

各要素のイベント属性にスクリプトを記述すると、そのイベントが発生したときにスクリプトが実行されます。 属性値はダブルクォーテーション記号で囲みますが、属性値の中でダブルクォーテーション記号を使いたい場合は、実体参照を使用します。

<button onclick="javascript:alert(&quot;JavaScript&quot;)">アラート</button>

<A>タグのhref属性に記述

<A>タグのhref属性にスクリプトを記述すると、アンカーがクリックされたときにスクリプトが実行されます。

<a href="javascript:スクリプト"> 〜 </a>
<a href="javascript:history.back()">戻る</a>

ダイアログ・ボックスの表示

alert

警告（アラート）表示を行うために、ダイアログボックスを表示します。

JavaScript alert の使用例と表示サンプルを次に示します。

function alert_test()
{
    alert("ボタンがクリックされました。");
}

<button onclick="alert_test()">警告</button>

confirm

確認を行うために、ダイアログボックスを表示します。 OK ボタンがクリックされたら真を、キャンセルボタンがクリックされたら偽を返します。

JavaScript confirm の使用例と表示サンプルを次に示します。

function confirm_test() {
  if (confirm("よろしいですか？")) {
    alert("OKがクリックされました。");
  } else {
    alert("キャンセルがクリックされました。");
  }
}

<form method="post">
 <input type="button" value="確認" onclick="confirm_test()">
</form>

documentオブジェクト

document.open

新しいドキュメントを作成（オープン）します。

function newpage() {
  document.open();
  document.write("<html><title>newpage<\/title>");
  document.write("<body>newpage<\/body><\/html>");
  document.close();
}

<form method="post">
 <input type="button" value="newpage" onclick="newpage()">
</form>

document.write

ブラウザに文字列を出力します。HTMLのタグも出力可能です。

document.write( 文字列 )

出力する文字列は " と " で囲んで指定します。

document.write の使用例と表示サンプルを次に示します。

<script type="text/javascript">
<!--
  document.write("<pre>");
  document.write("最初の文字列");
  document.write("次の文字列");
  document.write("<\/pre>");
// -->
</script>

document.writeln

ブラウザに文字列を出力します。文字列の末尾には改行が自動的に付けられます。HTMLのタグも出力可能です。

document.writeln( 文字列 )

出力する文字列は " と " で囲んで指定します。

document.writeln の使用例と表示サンプルを次に示します。

<script type="text/javascript">
<!--
  document.writeln("<pre>");
  document.writeln("最初の文字列");
  document.writeln("次の文字列");
  document.writeln("</pre>");
// -->
</script>

フォームの操作

JAVAスクリプトからテキスト入力フィールドに値を設定することができます。

document.FORM要素の名前.INPUT要素の名前.value = 値;

例えば次のようなHTMLを用意します。 form 要素には form1、 input 要素には text1、text2 という名前を付けます。 ボタンがクリックされたら JavaScript の copy_text という関数を呼び出すようにします。

<form method="post" name="form1">
 <input type="text" name="text1" value="初期値">
 <input type="text" name="text2">
 <input type="button" onclick="copy_text()" value="コピー">
</form>

次に JavaScript の copy_text 関数の定義を示します。テキスト入力フィールドに値を設定するには、次のようにします。

function copy_text()
{
    document.form1.text2.value = document.form1.text1.value;
}

次に実際の表示サンプルを示します。表示結果はブラウザによって異なることがあります。 ボタンをクリックすると、テキスト入力フィールド text1 の値が text2 にコピーされます。

historyオブジェクト

history.back

ブラウザの「戻る」ボタンをクリックしたのと同じ動作をします。

<a href="javascript:history.back()">戻る</a>

戻る

<button onclick="history.back()">戻る</button>

history.forward

ブラウザの「進む」ボタンをクリックしたのと同じ動作をします。

<a href="javascript:history.forward()">進む</a>

進む

history.go

history.go( 数 )

指定した数だけ画面を進めます。たとえば、1を指定した場合は1つ進みます。-2 を指定した場合は2つ戻ります。

<a href="javascript:history.go(-1)">戻る</a>

戻る

変数

変数とは、プログラムで扱われる数値や文字列などの値を一時的に記憶しておく領域のことです。変数を識別するために、ひとつひとつの変数に固有の名前を付けておきます。これを変数名といいます。

変数を使用する前に、どのような変数を使用するか、その変数名を明らかにしておくことを変数の宣言といいます。

JavaScript で変数を宣言する書式を次に示します。

var 変数名 ;

変数に値を入れることを代入といいます。変数に値を代入する書式を次に示します。

変数名 = 値 ;

値が数値の場合は数値を直接記述します。値が文字列の場合は、文字列をダブルクォーテーション記号で囲んで記述します。変数の宣言と代入の例を次に示します。

<script type="text/javascript">
<!--
    var age;
    var name;
    age = 20;
    name = "山田太郎";
// -->
</script>

ただし、JavaScript では変数の宣言を省略できます。したがって、変数の宣言をしなくても変数を使うことができます。つまり、いきなり変数への代入を書いてしまっても構いません。

例えば、上記の JAVA スクリプトは、次のように記述することもできます。

<script type="text/javascript">
<!--
    age = 20;
    name = "山田太郎";
// -->
</script>

Date

Dateオブジェクトは現在の日時を表します。

<script>
d = new Date();
document.write(d);
</script>

getYear

<script>
d = new Date();
document.write(d.getYear());
</script>

関数

JavaScriptでは、関数を定義して、それを呼び出すことができます。

function 関数名() { ... }
function alert_test()
{
    alert("ボタンがクリックされました。");
}
<button onclock="alert_test()">ボタン</button>

Ajax

Ajax (Asynchronous JavaScript and XML) とは JavaScirpt を使って XML データを非同期的に取得する技法です。

JavaScript で非同期通信を行うには、まず通信オブジェクトを取得します。 通信オブジェクトを取得する方法は、ブラウザの種類やバージョンによって異なります。

ブラウザ通信オブジェクトの作成方法
Internet Explorer 6 以上new ActiveXObject("Msxml2.XMLHTTP")
Internet Explorer 5 以上new ActiveXObject("Microsoft.XMLHTTP")
Safari, Firefox などnew XMLHttpRequest()

JavaScript で通信オブジェクトを取得するサンプルコードを次に示します。

httpObj = null; // 通信オブジェクト
try {
  httpObj = new XMLHttpRequest(); // Safari, FireFoxなど
} catch(e) {
  try {
    httpObj = new ActiveXObject("Msxml2.XMLHTTP"); // IE6以上
  } catch (e) {
    try {
      httpObj = new ActiveXObject("Microsoft.XMLHTTP"); // IE5以上
    } catch(e) {
      httpObj = null;
    }
  }
}

Ajax では状態に変化が生じたときにメソッドが呼び出されることで非同期通信を実現しています。 状態変化が起こったときに呼び出されるメソッドを指定する例を示します。

httpObj.onreadystatechange = displayData

データを送信するサンプルコードを次に示します。

httpObj.open("GET", "data.xml", true);
httpObj.send(null);

データを受信した際に呼び出されるメソッドを定義します。

function displayData() {
  if (httpObj.readyState == 4) && (httpObj.status == 200)) {

この例では通信オブジェクトのステータスを調べています。

readyState プロパティの戻り値
コードステータス
0未初期化（open()が呼び出されていない）
1ロード中（open()は呼び出されたが、send()は呼び出されていない）
2ロード済み（send()は呼び出されたが、ステータスやヘッダはまだ利用できない）
3一部データを取得済み（ヘッダは読み込み可能だが、本体はまだ取得していない）
4全データ取得済み
status プロパティの主な戻り値
コードステータス
200OK (成功)
404Not Found
500Internal Server Error

XMLデータを取得する例を次に示します。

xmlData = httpObj.responseXML;

emplyeeList = xmlData.getElementByTagName("employee");
noList = xmlData.getElementByTagName("no");
nameList = xmlData.getElementByTagName("name");

Contents


SEO 仕事 花 掲示板 レンタルサーバー プロフ SEO