アットウィキロゴ

Javascript基礎①(概要)

☆JavaScript

【①JavaScriptとは】

動きのあるホームページを作成できるようにする、クライアント用スクリプト言語。
イベント利用のインタラクティブ機能の補完
ユーザ入力補助などにイベント発生

【②JavaScriptとイベントハンドラ】

JavaScriptは動作するタイミング(クリック時、マウスオーバー時・・など)を指定する必要がある。

イベントハンドラ名="実行するJavaScript('コメント')"

●JavaScript(命令)例:

 ・alert('テキスト')  :アラート(ポップアップ)を表示



●イベントハンドラ(命令をするタイミング)例:

 ・onabort :ブラウザの停止ボタンなどで、画像の読み込みが中断された場合
 ・onblur :対象の要素からフォーカス(マウスポインタなど)が離れた場合
 ・onclick   :クリックされたら実行
 ・onchange  :値が変更されたら実行
 ・onerror :ページや画像の読み込みエラーされたら実行
 ・onfocus :対象の要素にフォーカス(マウスポインタなど)が移動した場合
 ・onload   :HTMLが読み込まれたら実行(ページが表示された直後に実行)
 ・onmouseover :カーソルホバーされたら実行
 ・onreset :フォームがリセットされた場合
 ・onsubmit  :フォームのサブミットボタンが押されたら実行
 ・onselect :テキストボックスなどのエリア内をクリックし、入力が可能になった場合に実行
 ・onunload :別ページへ移動する場合に実行


【③記述時のルール】

  • 半角文字で記述する
 ・大文字と小文字が区別される(HTML・CSSは大文字小文字を区別なく書いてもOK)
 ・各文の最後に「;」(セミコロン)を記述する必要がある。(ないと命令がずっと続いていると認識される)
 ・半角、タブによるスペースは無視される。

 ※コメントはHTMLと同様に<--!と//--> でくくる。
 ※外部ファイル(外部JS)の場合は、
 ・//:ラインコメント(1行)
 ・/*非表示にしたい内容*/:ブロックコメント


【④組み込みかた】

④-1.外部ページ

 CSSのようにJavaScript専用の.jsファイルをつくり、そこから呼び出す。

<script type=”text/javascript” src=”パス”></script>

例:
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSイベント</title>
<link href="css/import.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="import.js"></script>


④-2.ページ内(header内)


<script type=”text/javascript” >
   処理
</script>

例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript</title>
<script language="javascript">
<!-- //-->
var total = 4800;
var a = new Array(3);
a[0] = 2000;
a[1] = 400;
a[2] = 500;
function goukei(i){
	if(document.f1.elements[i].checked == true){
		total = total + a[i];
	}
	else{
		total = total - a[i];
	}
	document.f1.elements[3].value = total;
}

</script>
</head>

④-3.タグ内

<要素名 イベント=”処理” >


例:
<body onload="window.alert('オンロードイベント発生')
)

④-4.JavaScriptに対応していないwebブラウザ用に以下の記述をしておくとわかりやすい。

<script language="JavaScript">
<!--

(JavaScriptの処理を記述)

</script>
<nonscript>
このページはJavaScriptが使用されています。<br />
JavaScriptを有効にしてから閲覧してください。
</nonscript>

※<nonscript>~</nonscript>はJavaScriptに対応していないブラウザの場合のみ表示される。
最終更新:2012年01月11日 18:54
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。