prototype.js逆引きサンプル集

prototype.js逆引きサンプル集 | prototype.jsリファレンス

はじめに bookmark

• prototype.jsの概要

ユーティリティ関数 bookmark

• 指定idのエレメントを取得 - $
• 指定idのエレメントのvalueを取得 - $F
• エレメントのリスト形式を配列形式に変換 - $A
• オブジェクトをHash形式に変換 - $H
• 指定した範囲のリストを返す - $R

prototype.jsで追加された機能 bookmark

• Ajax
  • Ajaxリクエストを行う - Ajax.Request
  • Ajaxで指定エレメントの内容を書き換える - Ajax.Updater
  • Ajaxで指定エレメントの内容を定期的に書き換える - Ajax.PeriodicalUpdater
• 定期的に指定の処理を行う - PeriodicalExecuter
• Enumerable
  • リストに特定の関数で処理させる - Enumerable.each
  • リストの全ての値を調べる - Enumerable.all
  • リストに特定の値が含まれるか調べる - Enumerable.any
  • リストを特定の関数で処理し、結果リストを返す - Enumerable.collect
  • 条件にマッチするアイテムを得る - Enumerable.detect
  • 配列の全ての要素を得る - Enumerable.entries
  • 条件にマッチするアイテムを得る - Enumerable.find
  • 条件にマッチする全アイテムを得る - Enumerable.findAll
  • 正規表現に一致するアイテムの存在を調べる - Enumerable.grep
  • 指定したアイテムが存在するか調べる - Enumerable.include
  • 値を結合して文字列にする - Enumerable.inject
  • 値に指定したオブジェクトのメソッドリストを適用 - Enumerable.invoke
  • リストを特定の関数で処理し、結果リストを返す - Enumerable.map
  • リストの最大の値を返す - Enumerable.max
  • 指定したアイテムが存在するか調べる - Enumerable.member
  • 際すとの最小の値を返す - Enumerable.min
  • リストを条件によって分割 - Enumerable.partition
  • オブジェクトの指定プロパティのみ取り出す - Enumerable.pluck
  • リストで条件に一致しないアイテムを取り出す - Enumerable.reject
  • 条件にマッチする全アイテムを得る - Enumerable.select
  • ユーザ定義関数でソートした配列を得る - Enumerable.sortBy
  • 配列の全ての要素を得る - Enumerable.toArray
  • 配列を合成（マージ）する - Enumerable.zip
• Hash
  • ハッシュのキーリストを得る - Hash.keys
  • ハッシュの値リストを得る - Hash.values
  • ハッシュをマージした値を得る - Hash.merge
  • ハッシュをURLのクエリ文字列の形式に変換 - Hash.toQueryString
  • ハッシュを文字列に変換 - Hash.inspect
• 指定した範囲のリストを返す - ObjectRange
• Class
  • クラスを作成する - Class.create
• Element
  • エレメントにクラス名を追加する - Element.addClassName
  • エレメントのクラス名を得る - Element.classNames
  • エレメントのホワイトスペースを除去 - Element.cleanWhitespace
  • エレメントの中身が空かどうか調べる - Element.empty
  • エレメントの幅・高さを調べる - Element.getDimensions
  • エレメントの高さを調べる - Element.getHeight
  • エレメントのCSSプロパティを調べる - Element.getStyle
  • エレメントがclass属性を持つか調べる - Element.hasClassName
  • エレメントを隠す - Element.hide
  • エレメントにクリッピング属性を付与 - Element.makeClipping
  • エレメントにposition:relativeのCSS属性を付与 - Element.makePositioned
  • エレメントを削除 - Element.remove
  • エレメントのクラス名を削除 - Element.removeClassName
  • エレメントの位置までスクロール - Element.scrollTo
  • エレメントに指定CSSプロパティを設定 - Element.setStyle
  • エレメントの表示 - Element.show
  • エレメントの表示状態をトグル - Element.toggle
  • エレメントのクリッピング属性を除去 - Element.undoClipping
  • エレメントのCSS属性（position）を除去 - Element.undoPositioned
  • エレメントのinnerHTMLを書き換える - Element.update
  • エレメントの表示状態を調べる - Element.visible
• Insertion
  • エレメントの前に値を挿入 - Insertion.Before
  • エレメントの後に値を挿入 - Insertion.After
  • エレメントの先頭に値を挿入 - Insertion.Top
  • エレメントの末尾に値を挿入 - Insertion.Bottom
• Field
  • フィールドの値をクリア - Field.clear
  • フィールドの入力状態を調べる - Field.present
  • フィールドにフォーカスをあわせる - Field.focus
  • フィールドのテキストを選択 - Field.select
  • フィールドにカーソルを合わせ、テキストを選択 - Field.activate
• Form
  • フォーム内容をシリアライズ - Form.serialize
  • フォームの最初のエレメントを得る - Form.findFirstElement
  • フォームのエレメントを得る - Form.getElements
  • フォームのinputエレメントを得る - Form.getInputs
  • フォームを利用不可にする - Form.disable
  • フォームを利用可能にする - Form.enable
  • フォームの最初のエレメントにフォーカスする - Form.focusFirstElement
  • フォームの内容をリセットする - Form.reset
  • Form.Element
    • フォーム内容をシリアライズする - Form.Element.serialize
    • フォームエレメントの値を得る - Form.Element.getValue
    • フォームの入力要素の値を監視する - Form.Element.Observer
    • フォームの入力要素の値を監視する - Form.Element.EventObserver
• Position
  • スクロール位置のプロパティ調節 - Position.prepare
  • スクロール位置のオフセットを取得 - Position.realOffset
  • エレメントのオフセット位置を求める - Position.cumulativeOffset
  • エレメントが指定座標内にあるか調べる - Position.within
  • スクロールボックス内において現在位置が指定座標内にあるか調べる - Position.withinIncludingScrolloffsets
  • エレメント内の座標位置の割合を得る - Position.overlap
  • エレメントの大きさと位置を他と合わせる - Position.clone
• 関数のリストで利用可能な関数を得る - Try.these

基本クラス拡張 bookmark

• Number
  • 数字をHTML色に変更 - Number.toColorPart
  • 次の数字を得る - Number.succ
  • 関数をn回繰り返す - Number.times
• String
  • タグを除去する - String.stripTags
  • <script>タグを除去する - String.stripScripts
  • HTMLをエスケープした値を得る - String.escapeHTML
  • HTMLをアンエスケープした値を得る - String.unescapeHTML
  • 文字列からスクリプトを得る - String.extractScripts
  • 文字列のスクリプトを評価（eval）する - String.evalScripts
  • クエリ文字列をハッシュ形式に変換する - String.toQueryParams
  • クエリ文字列をハッシュ形式に変換する - String.parseQuery
  • 1文字ごとに分割する - String.toArray
  • CSSプロパティ名をJavaScriptでの名前に変換 - String.camelize
• Array
  • 配列をクリア（空に）する - Array.clear
  • 配列のnullやundefinedな値を抜いた配列を得る - Array.compact
  • 配列の最初の値を得る - Array.first
  • 多次元配列を1次元配列にする - Array.flatten
  • 配列の内容を分かりやすい文字列にする - Array.inspect
  • 配列の最後の値を得る - Array.last
  • 指定した値を除いた配列の値を得る - Array.without
• document
  • class名を元にエレメントを取得する - document.getElementsByClassName
• Event
  • イベントを発生させたエレメントを取得 - Event.element
  • 左クリックが押されているかどうか調べる - Event.isLeftClick
  • マウスポインタのX座標を得る - Event.pointerX
  • マウスポインタのY座標を得る - Event.pointerY
  • イベントの上位伝播を防ぐ - Event.stop
  • イベントを発生後のエレメントの上位を辿ってタグを検索 - Event.findElement
  • イベントを監視 - Event.observe
  • イベント監視を解除 - Event.stopObserving

オブジェクト指向 bookmark

• クラスの定義 - Class.create
• クラスの継承 - Object.extend
• 抽象クラスの利用 - Abstract