Captcha security check codejanitor.com is for sale Please prove you're not a robot View Price Processing
二〇〇九年 如月 廿三日 月曜日 ■ prototype.js でラジオボタンやチェックボックスの値を取得する [/links] この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。 prototype.js には、フォームに入力されている値を取得するための便利な関数 $F がある。しかしこれは、id で指定される1つの HTML 要素の値を取得するのであって、name で指定される1つのフォームコントロールの値を取得するのではない。テキストボックスや選択ボックスなど、ほとんどのフォームコントロールでは、HTML 要素とフォームコントロールが1対1で対応しているので $F を使って値を取得できるが、ラジオボタンとチェックボックスは、1つのフォームコントロールが複数の HTML 要素から構成されているので、値を取得するのは厄介だ。
前回は、数値や文字列といった基本的なデータに関するメソッドを紹介した。今回は、より複雑な構造をもったクラスとオブジェクトに関するメソッドを紹介しよう。バージョンは引き続き1.6だ。詳細はAPIドキュメントを参照していただきたい。なお、オプション以外で省略可能な記述は[〜]で表す。 これらのメソッドは、Prototype.jsのみならずJavaScriptライブラリというものの存在価値を知らしめるのに大きな役割を果たしたといえるだろう。拡張メソッドを使いたくてPrototype.jsを使うというユーザーも多いのではないだろうか。 クラス(Class)のメソッド Class.create( [スーパークラス名, ] [ { コンストラクタやメソッド } ] ); クラスの作成を行う。スーパークラス名を指定すると、それを継承したサブクラスが作成される。このメソッドでクラスを作成するときは、コン
ここに掲載する以外にも多くのメソッドが定義されているので、それらについてはAPIドキュメントなどを参照していただきたい。なお、実行画面はInternet Explorer 7で示す。 HTML要素(Element)の拡張メソッド APIドキュメントには、HTMLの要素に関連するクラスとしてElement、Element.Methods、Element.Methods.Simulatedが掲載されているが、Elementでは他の2つで定義されているメソッドも拡張されているため、ここではElementのメソッドとして紹介する。 Elementのメソッドは $(...).メソッド名(引数) のように記述できるものが多い。しかしAPIドキュメントによると、一部のWebブラウザでは Element.メソッド名(引数) と記述しなければならないメソッドがあるようなので、注意していただきたい。 要素の作
オブジェクトにメソッドを定義する 前回の記事では、JavaScriptでオブジェクトを定義する記法を紹介した。オブジェクト指向プログラミングの利点のひとつに、プログラムの再利用性の向上が挙げられるだろう。既にあるオブジェクトをそのまま流用したり、用途に合わせて既存のオブジェクトを拡張・再構成したりすることにより、必要な概念や機能をゼロから実装する時間やリスクを低減することができる。JavaScriptでのオブジェクト指向の利点も、この例に洩れない(オブジェクト指向プログラミングそのものに関する解説は、本稿の主旨では無いので、別途書籍等を参考いただきたい)。 また、JavaScriptには、「プロトタイプオブジェクト」という特徴的な概念が存在する(このため、JavaScriptは「プロトタイプベース言語」と表現されることもある)。プロトタイプオブジェクトにより、JavaやC++のようなプログ
よく見かけるアレです。例えば不動産系のサイトで、沿線を選択すると駅が選択可能になる、みたいなやつです。 今回はアレをJavaScriptで作ってみました。なお、配列の代わりにJSONを、ライブラリはprototype.jsとcommon.jsを使ってます。 そして、完成してから気がついたんですが、これってPearのHTML_QuickFormのhierselectを使うと一瞬で作れるんですね。 phpをお使いなら断然そっちを薦めます。自分も結局JavaScriptのはやめてhireselectのにしましたから。。 一応、作ったものをアップしときます。 まだJavaScriptにあまり慣れてないので、かなり手間取ってしまいました。 <html> <head> <title>JavaScriptで連動する2つのセレクトメニューを作る</title> <script type="text/jav
prototype.jsに「Event.observe」というものがある。 ボタンなどエレメントに対してイベントを設定するもので、 こまごまとした処理は他にもあるが、内部的にはこうなってる。 // addEventListenerが存在するか判別if (エレメント.addEventListener) { // あれば使う エレメント.addEventListener("アクション", "イベント", false);} else { // なければattachEventを使う エレメント.attachEvent("アクション", "イベント");} ようはIEだけattachEventを使い、 それ以外のブラウザはaddEventListenerでイベントを設定しているわけだ。 何が言いたいかっていうと 「Event.observe」でイベントを2つ追加してい
prototype.jsを使ってみる 2-Event.observe 今回はEvent.observeを使ってイベントを追加する方法です。 onloadイベントを記述する際にbody要素に <body onload="hogehoge" > と記述したりスクリプト内に window.onload = function(){ hogehoge } と記述します。 onloadイベントは1ページに1度の記述しか認められておらず複数のonloadイベントを記述したい場合はonload用の関数を別途作成する必要があります。 prototype.jsのEvent.observeを使えばイベントを追加する事ができスクリプトの保守性が著しく向上します。 Event.observe(追加する要素,イベント,関数,段階) 追加する要素にはオブジェクトかIDを記述します。 イベントにはloadやclickなど
<select id="select_id> <option value="テスト">テスト</option> <option value="ペスト">ペスト</option> <option value="ネスト">ネスト</option> <option value="レスト">レスト</option> </select> 値の取得 selectでは、 var strName = $F(’select_id’); と var strName = $(’select_id’).value; は問題なく動きます。また、 var strName = $(’select_id’).getAttribute(’value’); はIEでは動くのですがfirefoxでは動かないので避けた方がいいです。 当然といえば当然なのですが strName = $(’select_id’).innerHTML
平素より「PHPプロ!」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ!」ですが、サービスの利用状況を鑑みまして、2018年9月25日(火曜日)をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日(火曜日)を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
この機能を実行するにはprototype.jsが必要です 構文 Event.observe(element, name, observer, useCapture) 引数: element=監視したいエレメント, name=イベント名, observer=イベント時関数 「イベントを監視」サンプルコード <html> <head> <title>Event.observe - イベントを監視</title> </head> <!--イベントを監視のサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> <!-- window.onload = function() { Event.observe('sample', 'click', han
はじめに 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 リストの全ての値を調べる
前回までで、基本的なデータ型を拡張したメソッドを紹介してきた。今回からは、JavaScriptによる処理に関する拡張メソッドを紹介していこう。まずは配列、関数、イベントだ。説明に用いるPrototype.jsのバージョンは、本年1月にリリースされた1.6.0.2とする。 ただしメソッドの数が多く本稿ではその一部しか紹介できない。詳細はAPIリファレンスなどを参照していただきたい。また、省略可能な記述は[〜]で表す。 配列(Array)のメソッド Arrayに対する拡張メソッドは、それ自身のものだけでなく、要素の集合に対する操作を便利に行うEnumerableのメソッドも含むため、拡張メソッドの数が特に多い。そのためここでは、メソッド名だけでは、そのはたらきが分かりにくいものについて利用例を示す。 配列.compact() nullでない要素のみの配列を生成。 ['a', null, 'b'
Prototype.jsとはなにか Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。 ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。 これから6回にわたって、こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く