とほほのJavaScript入門

文中の記号の意味

    e3:   Internet Explorer 3.X
    e4:   Internet Explorer 4.X
    N2:   Netscape Navigator 2.X
    N3:   Netscape Navigator 3.X
    N4:   Netscape Communicator 4.0〜4.05
    N45:  Netscape Communicator 4.06 or 4.5
    NN:   Netscape Navigator/Communicator
    IE:   Internet Explorer
    [...]: ...の部分は省略可能。

概要

• JavaScriptとは？
• JavaScriptの歴史
• JavaScriptの注意
• 使用例
• LANGUAGE属性
• JavaScript未対応ブラウザへの配慮
• スクリプト内の "</" について
• 変数名・関数名
• 型の種類
• 特別な値

サンプル

• 基本サンプル集
  • はじめに
  • 現在の時刻を表示する
  • 今日の日付を表示する
  • ランダムな画像を表示する
  • ブラウザによって処理を振り分ける
  • 別ウィンドウに表示する
  • 「別ウィンドウに表示」を制御する
  • フォームの入力をチェックする
  • 現時刻をリアルタイムに表示する
  • 複数のフレームの内容を書き換える
• 簡易電卓
• 背景色エディタ
• ブラウザに応じて処理を振り分ける
• 現在の時刻を表示する(IE3.0/NN2.0)
• 時刻によって表示を変える(IE3.0/NN2.0)
• 別ウィンドウに表示する(IE3.0/NN2.0)
• フォームの未入力をチェックする(IE?.0/NN2.0)
• セレクトボックスからジャンプする(IE?.0/NN?.0) New!!

演算子

• 代入演算子 =
• 算術演算子 + - * / % ++ --
• 比較演算子 == < <= > >= === !==
• プラス・マイナス演算子 - +
• 論理演算子 && || !
• 条件演算子 ? :
• カンマ演算子 ,
• ビット演算子 & | ^ ~ << >> >>>
• 複合代入演算子 += -= *= /= %= &= |= ^= <<= >>= >>>=
• その他の演算子 new delete typeof void
• 演算子の優先順位

構文

• // ... - コメント
• /* ... */ - コメント
• { ... } - 複文
• with... - オブジェクト指定
• this - オブジェクト指定
• if...else... - 条件分岐
• switch... - 条件分岐
• while... - 繰り返し
• do...while - 繰り返し
• for... - 繰り返し
• for...in - 繰り返し
• break - 繰り返しを終える
• continue - 繰り返しを続ける
• label: - ラベル
• function - 関数宣言
• return - 戻る
• var - 変数宣言
• import -
• export -

基本オブジェクト

• 数値(Number)
  Number() NaN MAX_VALUE MIN_VALUE POSITIVE_INFINITY NEGATIVE_INFINITY toString()

• 文字列(String)
  String() length anchor() big() blink() bold() charAt() charCodeAt() concat() fixed() fontcolor() fontsize() fromCharCode() indexOf() italics() lastIndexOf() link() match() replace() search() slice() small() split() sub() substr() substring() sup() toLowerCase() toUpperCase()

• 真偽(Boolean)
  Boolean() toString()

• オブジェクト(Object)
  Object() constructor prototype eval() toString() ユーザー定義オブジェクト

• 配列(Array)
  Array() length concat() join() pop() push() reverse() shift() slice() splice() sort() toString() unshift()

• 日付(Date)
  Date() getYear() getMonth() getDate() getHours() getMinutes() getSeconds() getTime() getTimezoneOffset() setYear() setMonth() setDate() setHours() setMinutes() setSeconds() setTime() toGMTString() toLocaleString() UTC() parse()

• 数学関数(Math)
  E LN2 LN10 LOG2E LOG10E exp() log() SQRT1_2 SQRT2 sqrt() abs() ceil() floor() round() PI sin() cos() tan() asin() acos() atan() atan2() max() min() pow() random()

• 正規表現(RegExp)
  RegExp() lastIndex ignoreCase global source lastMatch leftContext rightContext lastParen $n compile() exec() test() length index input

• 関数(Function)
  function Function() arity arguments caller prototype toString()

• ビルトイン関数
  escape() unescape() Number() String() parseFloat() parseInt() isNaN() eval() taint() untaint()

ウィンドウ関連オブジェクト

• ウィンドウ(window)
  clientInformation closed defaultStatus dialogArguments dialogHeight dialogLeft dialogTop dialogTop dialogWidth innerHeight innerWidth locationbar menubar name offscreenBuffering opener outerHeight outerWidth pageXOffset pageYOffset parent personalbar returnValue scrollbars self status statusbar toolbar top window alert() back() blur() captureEvents() clearInterval() clearTimeout() close() confirm() disableExternalCapture() enableExternalCapture() execScript() find() focus() forward() handleEvent() home() moveBy() moveTo() navigate() open() print() prompt() releaseEvents() resizeBy() resizeTo() routeEvent() scroll() scrollBy() scrollTo() setInterval() setTimeout() showHelp() showModalDialog() stop()

• ヒストリー(window.history)
  length current next previous back() forward() go()

• ロケーション(window.location)
  href protocol host hostname port pathname hash search assign() reload() replace()

• スクリーン(window.screen)
  height width availHeight availWidth coorDepth pixelDepth bufferDepth updateInterval

ナビゲーター関連オブジェクト

• ナビゲーター(window.navigator)
  appCodeName appMinorVersion appName appVersion browserLanguage connectionSpeed cookieEnabled cpuClass language onLine platform systemLanguage userAgent userLanguage userProfile javaEnabled() preference() taintEnabled()

• MIMEタイプ(window.navigator.mimeTypes)
  length description enabledPlugin suffixes type

• プラグイン(window.navigator.plugins)
  length name description filename refresh()

ドキュメント関連オブジェクト

• ドキュメント(window.document)
  activeElement alinkColor bgColor charset cookie defaultCharset domain embeds expando fgColor formName lastModified linkColor parentWindow plugins readyState referrer selection title URL vlinkColor captureEvents() clear() close() createElement() createStyleSheet() elementFromPoint() execCommand() getSelection() handleEvent() open() queryCommandEnabled() queryCommandIndeterm() queryCommandState() queryCommandSupported() queryCommandText() queryCommandValue() releaseEvents() routeEvent() showHelp() write() writeln()

• アンカー(window.document.anchors)
  length

• アプレット(window.document.applets)
  length

• イメージ(window.document.images)
  border complete height hspace lowsrc name src vspace width handleEvent()

• レイヤ(window.document.layers)
  length above background below bgColor clip.top clip.bottom clip.left clip.right clip.height clip.width document left name pageX pageY parentLayer siblingAbove siblingBelow src top visibility zIndex captureEvents() handleEvent() load() moveAbove() moveBelow() moveBy() moveTo() moveToAbsolute() releaseEvents() resizeBy() resizeTo() routeEvent()

• リンク(window.document.links)
  length hash host hostname href pathname port protocol search target text handleEvent()

フォーム関連オブジェクト

• フォーム(window.document.forms)
  length action encoding length method name target handleEvent() reset() submit()

• フォーム部品(window.document.form.elements)
  length checked defaultChecked defaultValue form length name options defaultSelected selected text value selectedIndex type value blur() click() focus() handleEvent()

イベント関連オブジェクト

• イベント概要

• イベントハンドラ
  onAbort onBlur onClick onDblClick onChange onDragDrop onError onFocus onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOver onMouseOut onMouseUp onMove onReset onResize onSelect onSubmit onUnload

• イベントオブジェクト(event)
  target type data which modifiers height width layerX layerY pageX pageY screenX screenY

その他

• IE4.0のダイナミックHTML
• JavaScriptの文字列と数値について
• JavaScriptに関するFAQ
• JavaScriptの " と ' について
• getYear()に潜む2000年問題 New!!