JavaScript

Script

JavaScript というと、Javaと名前がよく似ていますがまったく別物です。
JavaScriptは、Netscape社が開発した、HTML内に記述する、オブジェクト指向スクリプト言語です。

Javascriptは、下記のような特徴をもっています。

  1. forやifといった制御命令によるプログラムの効率化
  2. オブジェクトの導入による、パッケージ化
  3. onClik,onChangeなどによる、イベント処理
  4. タイマー処理
  5. 入出力ダイヤログによるデーターの入出力
  6. formに入力したデータのチェック
  7. 新しいページやフレーム、ウィンドウの管理

以上のような機能を、うまく利用(CSSの切り替え)して、ページDesignの切り替えにも利用されます。

JavaScriptを学び、プログラミングに進むキッカケを摑むことができるかもしれません。


 

Javascriptの記述法

Javascriptの読み込みは、下記の様にhtmlの<head>~</head>内に記述します。

<script type="text/javascript">
  Javascriptのソース
</script>
<noscript>
  < --
    Javascript未対応のブラウザ用のコメント
    このブラウザは、Javascriptに対応していません!
  // -->
</noscript>


Javascriptのイベントハンドラ

Formに配置した部品および、リンク・アンカーからイベントハンドラを呼びだすことができます。

イベント処理できるものは、下記の通り

イベント処理名 イベントが発生するとき 対象オブジェクト
onBlur フォーカスを失ったとき text,textarea,select
onClick クリックしたとき button,checkbox,radio,reset,submit,リンク
onChange 値が変化したとき text,textarea,select
onFocus フォーカスを受け取ったとき text,textarea,select
onLoad ページが読み込まれたとき ページ
onMouseOver マウスが通過したとき リンク、アンカー
onSelect テキストが選択されたとき text,textarea
onSubmit Submit(送信)ボタンがクリックされたとき submit
onUnload ページがアンロードされたとき ページ

Javascriptの言語仕様

Javascriptは、下記の規則に従って記述する。

  1. 英字またはアンダースコアー(_)で始まる英数文字
  2. 大文字と小文字は、区別される
  3. if,forなどの予約語は使用できないが、それを含むことはできる。 例>> forforce

JavaScriptの定数

Javascriptには、整数、浮動小数点、文字列、論理、null の5種類の定数があります。

  1. 整数 定  数  : 20, 0x0000ff (0xは16進数を示す)
  2. 浮動小数点定数 : 3.14
  3. 論理 定 数  : true(真),false(偽)
  4. null 定 数  : null(未定義を意味する)

JavaScriptのスペシャルキャラクタ(エスケープ文字)

Javascriptには、¥ではじまる特殊文字は、writeで出力された印刷時に特別な機能があります。
印刷時の設定以外では、使わないようにしましょう。

  1. ¥b ⇒ バックスペース
  2. ¥f ⇒ フォームフィード
  3. ¥n ⇒ 復帰・改行 ⇒ ブラウザによっては機能しない場合がある、その時は<br>を使う
  4. ¥r ⇒ 改行
  5. ¥t ⇒ タブ

JavaScript-Reference

 
種 類 Command 機 能 書 式
オブジェクト anchors アンカー配列 document.anchors[index]
document.anchors.length
オブジェクト button ボタン prop-er-ty(特性):name value
meth-do(方法):click
e-vent_han-dle(結果_処理):onClick
オブジェクト チェックボックス   prop-er-ty(特性):checked defaultChecked name value
meth-do(方法):click
e-vent_han-dle(結果_処理):onclik
オブジェクト document ドキュメント prop-er-ty(特性):
alinkColor anchors bgColor cookie fgColor
forms lastModified linkColor links location
referrer title vlinkColor
meth-do(方法):clear close open write writein
オブジェクト hidden 隠しテキストボックス prop-er-ty(特性):name value
オブジェクト history URL履歴 prop-er-ty(特性):lenth
meth-do(方法):back forward go
オブジェクト location カレントURLの情報 prop-er-ty(特性):
hash host hostname href
pathname port protocol search
オブジェクト Math 算術オブジェクト prop-er-ty(特性):E LN2 LN10 LOG2E LOG10E PI
SQRT1_2 SQRT2 meth-do(方法):
abs acos asin atan ceil cos
exp floor log max min pow
random round sin sqrt tan
オブジェクト navigator ブラウザの情報 prop-er-ty(特性):
appCodeName appName appVersion userAgent
オブジェクト password パスワードテキストボックス prop-er-ty(特性):defaultValue name value
meth-do(方法):focus blur select
オブジェクト radio ラジオボタン prop-er-ty(特性):checked defaultChecked length name value
meth-do(方法):click
e-vent_han-dle(結果_処理):onClick
オブジェクト reset リセットボタン prop-er-ty(特性):name value
meth-do(方法):click
e-vent_han-dle(結果_処理):onClick
オブジェクト select 選択ボックス prop-er-ty(特性):length name options selectedindex
(options) defaultSelected index length name
selected selectedindex text value
meth-do(方法):blur focus
e-vent_han-dle(結果_処理):onBlur onChange onFoucus
オブジェクト string 文字列 prop-er-ty(特性):length
meth-do(方法):anchor big blink bold charAt
fixed fontcolor fontsize indexOf italics
lastindexOflink small strike sub
substring sup toLowerCase toUpperCase
オブジェクト submit サブミットボタン prop-er-ty(特性):name value
meth-do(方法):click
e-vent_han-dle(結果_処理):onClick
オブジェクト textbox テキストボックス prop-er-ty(特性):defaultValue name value
meth-do(方法):focus blur select
e-vent_han-dle(結果_処理):onBlur onChange onFocus onSelect
オブジェクト textarea 複数行テキストボックス prop-er-ty(特性):defaultValue name value
meth-do(方法):focus blur selec
e-vent_han-dle(結果_処理):onBlur onChange onFocus onSelect
オブジェクト window ウィンドウ prop-er-ty(特性):
defaultStatus frames length name parent
self status top window alert close confirm open prompt
setTimeout clearTimeout
e-vent_han-dle(結果_処理):onLoad onUnload
プロパティ action アクションURLの設定/取得 formName.action[=URL]
プロパティ alinkColor アクティブリンクカラーの設定/取得 document.alinkColor[=col]
プロパティ appCodeName ブラウザのコード名の取得 navigator.appCodeName
プロパティ appName ブラウザの名前の取得 navigator.appName
プロパティ appVersion ブラウザのバージョンの取得 navigator.appVersion
プロパティ bgColor バックカラーの設定/取得 document.bgColor[=col]
プロパティ checked チェック状態の設定/取得 chekboxName.checked[=bool]
chekboxNam[index].checked[=bool]
プロパティ cookie   document.cookie[=文字列]
プロパティ defaultSelected 選択ボックスのディフォルトの選択の設定/取得 selectName.options[index].defaultSelected[=bool]
プロパティ defaultStatus ディフォルトのステータスメッセージの設定 [window.]defaultStatus="メッセージ"
プロパティ defaultValue 初期設定された値の取得 passwordName.defaultValue
textName.defaultValue
textareaName.defaultValue
プロパティ E 自然対数の底 Math.E
プロパティ encoding エンコードタイプの設定/取得 formName.encoding[=type]
プロパティ fgColor フォアグランドカラーの設定/取得 document.fgColor[=col]
プロパティ hash アンカー名の設定 links[index].hash = anchor
location.hash = anchor
プロパティ host ホスト名の設定/取得 links[index].host[=host]
location.host[=host]
プロパティ hostname ホスト名とドメイン名の設定/取得 links[index].hostname[=hostname]
location.hostname[=hostname]
プロパティ href URLのフル名の設定/取得 links[index].href[=href}
location.href[=href]
プロパティ index 選択ボックスのインデックス selectName.option[indexValue].index
プロパティ lastModified 最終更新日時の取得 document.lastModified
プロパティ length オブジェクトの長さの取得 object.length
プロパティ linkColor リンクカラーの設定/取得 document.linkColor[=col]
プロパティ LN2/LN10 LN2/LN10 Math.LN2
Math.LN10
プロパティ location URLのフル名の取得 document.location
プロパティ LOG2E/LOG10E LOG定数 Math.LOG2E
Math.LOG10E
プロパティ name オブジェクト名の取得 object.name
プロパティ parent 親フレーム parent.propertyName
parent.methodName
parent.frameName
parent.frames[index]
プロパティ pathname URLのパス名の設定/取得 links[index].pathname[=pathname]
location.pathname[=pathname]
プロパティ PI 円周率 Math.PI
プロパティ port コミュニケーションポートの設定/取得 links[index].port[=port]
location.port[=port]
プロパティ protocol URLのプロトコルの設定/取得 links[index].protocol[=protcol]
location.protocol[=protcol]
プロパティ referrer コール元のURLを取得 document.referrer
プロパティ search URLの/以後の文字列の設定/取得 links[index].search[=queryinfo]
location.search[=queryinfo]
プロパティ selected 選択状態の設定/取得 selectName.option[index].selected[=bool]
プロパティ selectedindex 選択されている項目の番号の設定/取得 selectName.selectedindex[=index]
selectName.options.selectedindex[=index]
プロパティ self ウィンドウ自身 self.propertyName
self.methodName
プロパティ SQRT1 1/2 Math.SQRT1_2
プロパティ SQRT2 √2 Math.SQRT2
プロパティ status ステータス行のメッセージの設定/取得 [windowRefernce.]ststus[=msg]
プロパティ target ターゲットウィンドウの設定/取得 fromName.target[="windowName"]
links[index].target[="windowName"]
プロパティ text 選択ボックスの項目のテキストの設定/取得 selectName.option[index].text
プロパティ title ドキュメントのタイトルの取得 document.title
プロパティ top トップウィンドウ top.propertyName
top.methodName
top.frameName
top.frames[index]
プロパティ userAgent ユーザエージェントヘッダーの取得 navigator.userAgent
プロパティ value オブジェクトの値の設定/取得 object.value[=value]
radioName[index].value[=value]
selectName.options[index].value[=value]
プロパティ vlinkColor リンク済みカラーの設定/取得 document.vlinkColor[=col]
プロパティ window カレントウィンドウの取得 window.propertyName
window.methodName
メソッド abs 絶対値の取得 Math.abs(x)
メソッド acos アークコサインの取得 Math.acos(x)
メソッド alert メッセージボックスの表示 [window.]alert("メッセージ")
メソッド anchor アンカーの設定 string.anchor("名前")
メソッド asin アークサインの取得 Math.asin(x)
メソッド atan アークタンジェントの取得 Math.atan(x)
メソッド back 前ページに戻る History.back()
メソッド big 大きな文字にする string.big()
メソッド blink ブリンク文字にする string.blink()
メソッド blur フォーカスを失わせる partName.blur()
メソッド bold 太字にする string.bold()
メソッド ceil/floor 整数化 Math.ceil(x)
Math.floor(x)
メソッド charAt 文字配列として参照 string.charAt(index)
メソッド clear ドキュメントのクリア document.clear()
メソッド clearTimeout タイムアウトの設定をクリア [window.]clearTimeout8timeoutID)
メソッド click クリックしたのと同じ機能を行う buttonName.click()
radioname[index].click()
checkboxName.click()
メソッド close クローズ document.close()
woindowReference.close()
メソッド confirm 確認ボックスの表示 [window.]confirm("メッセージ")
メソッド cos コサイン Math.cos(x)
イベント exp e*の取得 Math.exp(x)
イベント fixed 固定ピッチフォントに変換 string.fixed()
イベント floor 整数化 ceilを参照
イベント focus フォーカスを与える parts.focus()
イベント fontcolor フォントカラーの設定 string.fontcolor(col)
メソッド fontsize フォントサイズの設定 string.fontsize(size)
メソッド forward 先のページに進む history.forward()
メソッド getDate 日の取得 date.getDate()
メソッド getDay 曜日の取得 date.getDay()
メソッド getHours 時の取得 date.getHours()
メソッド getMinutes 分の取得 date.getMinutes()
メソッド getMonth 月の取得 date.getMonth()
メソッド getSeconds 秒の取得 date.getSeconds()
メソッド getTime 経過ミリ秒の取得 date.getTime()
メソッド getTimezoneOffset タイムゾーンオフセットの取得 date.getTimezoneOffset()
メソッド getYear 年の取得 date.getYear()
メソッド go 指定ページ数だけジャンプ history.go(n)
history.go(URL)
メソッド indexOf キー文字の検索 string.indexOf(key[,start])
メソッド italics 斜体に変換 string.italics()
メソッド LastIndexOf 後ろから検索 string.lastindexOf8key[,start])
メソッド link リンクの作成 string.link(URL)
メソッド log 自然対数 Math.log(x)
メソッド max 最大を得る Math.max(a,b)
メソッド method メソッドタイプの取得 formName.method
メソッド min 最小を求める Math.min(a,b)
メソッド open ドキュメントのオープン document.open(["mimeType"])
メソッド open ウィンドウのオープン {window.open("URL","windowName"[,"windowFeatures"])
メソッド parse 経過ミリ秒の取得 Date.parse(dataString)
メソッド pow Xのy乗の取得 Math.pow(x,y)
メソッド prompt 入力ボックスの表示 [window.]prompt(msg[,inputDefault])
メソッド random 乱数 Math.random()
メソッド round 整数化 Math.round(x)
メソッド select テキストの選択 passwordName.select()
textName.select()
textareaName.select()
メソッド setDate 日の設定 date.setDate(day)
メソッド setHours 時の設定 date.setHours(h)
メソッド setMinutes 分の設定 date.setMinutes(m)
メソッド setMonth 月の設定 date.setMonth(m)
メソッド setSeconds 秒の設定 date.setSeconds(s)
メソッド setTime 日時の設定 date.setTime(time)
メソッド setTimeout タイムアウトの設定 ID = [window.]setTimeout("expression",msec)
メソッド setYear 年の設定 date.setYear(y)
メソッド sin サイン Math.sin(x)
メソッド small スモールフォントに変換 string.small()
メソッド sqrt ルート Math.sqrt(x)
メソッド strike 打消し線の不可 string.strike()
メソッド sub 下付き文字の生成 string.sub()
メソッド submit データの送信 formName.submit()
メソッド substring 部分文字列の取得 string.substring(m,n)
メソッド sup 上付き文字の生成 string.sup()
メソッド tan タンジェント Math.tan(x)
メソッド toGMTString GMT時間文字列に変換 date.toGMTString()
メソッド toLocalString ローカル時間文字列に変換 date.toLocalString()
メソッド toLowerCase 小文字に変換 string.toLowerCase()
メソッド toUpperCase 大文字に変換 string.toUpperCase()
メソッド UTC 経過ミリ秒の取得 Date.UTC(year,month,day[,hrs][,min][,sec])
メソッド write ドキュメントへの出力 document.write(引数1,引数2,・・・])
メソッド writeln ドキュメントへの出力 document.writeln(引数1,引数2,・・・])
コンストラクタ Date Dateオブジェクトの生成 dateObjectName = new Date()
dateObjectName = new Date("month day,year hours:minutes: seconds")
dateObjectName = new Date(year,month,day[,hours,minutes,seconds])
配列 elements 部品配列 formName.elements[index]
formName.elements.length
配列 forms フォーム配列 documents.form[index]
documents.forms.length
配列 frames フレーム配列 [frameReference.]frames[index]
[frameReference.]frames.length
[windowReference.]frames[index]
[windowReference.]frames.length
配列 links リンク配列 document.links[index]
document.links.length
配列 options 選択ボックスの項目配列 selectName.options
関数 escape 非英数文字のコード取得 escape("str")
関数 eval 数値に変換 eval("str")
関数 isNaN 数値でないか検査 isNaN(val)
関数 parseFloat 文字列を実数に変換 parseFloat(str)
関数 parselnt 文字列を整数に変換 parselnt(str[,radix])
関数 unescape エスケープコードを文字列にする unescape("value")
イベントハンドラ onBlur フォーカスを失ったとき発生
イベントハンドラ onChange 値が変化したとき発生
イベントハンドラ onClick クリックで発生
イベントハンドラ onFocus フォーカスを得たとき発生
イベントハンドラ onLoad ページのロードで発生
イベントハンドラ onMouseOver マウスの通過で発生
イベントハンドラ onSelect テキストの選択で発生
イベントハンドラ onSubmit サブミットボタンのクリックで発生
イベントハンドラ onUnload ページのアンロードで発生