Elementオブジェクトとは、、HTMLドキュメント中にある form要素内で配置されるエレメント (要素) を集めたオブジェクトです。 この Elementオブジェクトは、Button、Checkbox、FileUpload、Hidden、Password、Radio、Reset、Text、Textarea、Submit、Select、Option などのオブジェクトを内包しています。 このオブジェクトの上位オブジェクトは Formオブジェクト です。
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか? コピーしてご自由にご利用ください。 Javascriptで try ~ catch 構文を使う 例外処理、エラー処理 「a-100」は計算できないのでエラーになります。 テキストボックスをダブルクリックすると入力できます。 計算式を入力してください。 計算結果が表示されます。(入力例) 77+123, 100*20 サンプルソース <html> <head> <script type="text/javascript"> <!-- function kekka(){ val=document.getElementById("Kbox").value; try{ val=eval(val); alert("計算結果: "+val); } catch(ex){ alert(ex+"
Javascript で配列の初期化や要素を追加するには様々な方法があるが、 ここでは一般的(と思われる)な方法をいくつか以下に示す。 [HTML / javascript]// 初期化サンプル(その1) var array1 = ['日', '月', '火', '水', '木', '金', '土']; for(var i=0; i<array1.length; i++) { alert(array1[i]); } // 初期化サンプル(その2) var array2 = new Array('日', '月', '火', '水', '木', '金', '土'); for(var i=0; i<array2.length; i++) { alert(array2[i]); } [HTML / javascript]var array3 = []; // 配列の初期化 // 最後尾に要素を追加
このページは削除されました。以前のリビジョンの一覧をチェックして、いつ・なぜ削除されたのか確認したり、過去の版にアクセスしたり、元に戻したり出来ます。
わりといい加減だった型判定について、確認の意味も込めてここに。 今後のためにも、頭の中を整理してみる。 型の判定に良く使用するもの === typeof instanceof constructor それぞれに利点があり、状況によって使い分けることになるが、処理速度は上記の順の通り、『===』が最も速い。 つまり、『===』<『typeof』<『instanceof』<『constructor』 下図はFirebugで計測した結果です。環境によって数値は変わると思われ、参考値としてご覧下さい。 100万回 for loopで回した処理に掛った時間 ※『*constructor』は後に説明します。 一部、扱う型によって処理速度に差が見られた。 その二つの例外を以下に説明します。 存在しない変数を参照した場合の『undefined』についてvar a; alert(typeof a); 通常は
このページでは、DOMで要素を作成し、それをドキュメントや他の要素に追加・削除する方法を紹介します。 ※ 要素の作成以外は、Elementインターフェイスに限らずすべてのNodeインターフェイスで共通の技術です。ただし親要素によって追加できるノードの種類が異なるため注意が必要です。 [関連キーワード: createElement、appendChild、insertBefore、removeChild、DocumentFragment、createDocumentFragment] 要素の作成・追加 DOMで要素(Element)を作成するには、DocumentインターフェイスのcreateElementメソッドを使用します。 [JavaScript] var newElement = document.createElement("div"); しかし、createElementは単に要
JavaScript独特な書き方で理解が困難かつWebを探してもまとまったサイトが無かったのでまとめました。 オブジェクト オブジェクトリテラル オブジェクトは複数のプロパティを含むコンテナであり、プロパティは名前と値で構成されている。 var flight = { airline: "Oceanic", departure: { IATA: "SYD", "city-name": "Sydney" // JavaScriptの名前規則に従わないはクォート「""」が必要 }, arrival: { city_name: "Los Angeless" // JavaScriptの名前規則に従う場合はクォート「""」が不要 } }; flight.departure.IATA // "SYD"が取得できる JavaScriptにおける関数はオブジェクトです。そのためそれ以外の値と同様に扱うこと
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。(ただし最近の処理系ではconst扱いになって上書
フォームに入力された全角英数字を自動的に半角変換するJavascriptです。 <input onkeyup="zentohan(this)" type="text" /> function zentohan(obj){ if(typeof(obj.value)!="string")return false; var han= '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@-.,:'; var zen= '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@−.,:'; var word = obj.value; for(i=0;i<zen.length;i++){ var regex = new RegExp(zen[i],"gm")
JavaScript Reference onBlur 関連オブジェクト : - タイプ : イベントハンドラ 書式 <input type="text" name="A" onBlur="関数名"> 入力フォームでフォーカス (選択状態) されていた場合に、そのフォーカス が外れ、他に移動したりした場合に発生するイベントハンドラ。 イベント属性の値に関数を指定して、イベントが発生したときに実行されるようにします。 Top / Home / Index / Next
サンプルコード [実行] <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="main.css" type="text/css" media="all"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function disElement() { $("comment").disable(); } function disForm() { $("eForm").disable(); } // --></script> </head> <
JavaScriptのDOMを使って要素のreadonly属性を変更しようとするときには、readOnlyと書かなければならない。 初歩的だけど忘れているとハマる。 Firefoxでは小文字のreadonlyでも操作できるが、IEだとreadOnlyである必要がある。 IEの場合はreadonly状態でもinput要素の背景色は白のままなので、クラス名を変更するなどして背景色を変えるのがいい。 // via prototype.js $("hoge").readOnly = "readonly"; Element.addClassName($("hoge"), "readonly"); disabledを使う手もあるが、disabledを使うとinput要素の値が送信されなくなる。readonlyなら送信される。時と場合によって使い分け。
>>前回 新しいブラウザーが登場したとき、いつも問題となるのが互換性だ。IE9では、JavaScriptの仕様が標準規格のECMAScript5に準拠し、W3C(World Wide Web Consortium) DOMに対応した。実際に、標準規格に基づくJavaScriptをいくつか動作させてみると、問題なく動作した。1種類のコードをIE、Firefox、Chromeなど、複数のブラウザーで動作させることが可能になった。IE9は現行標準のCSS(Cascading Style Sheets)3にも対応し、その点でも他のブラウザーとの互換性が向上した。 ただし、IE8以前のMicrosoft独自仕様に合わせて開発したWebアプリケーションはそのままでは動作しない可能性がある。また、ユーザーのブラウザーの種類やバージョンを判定し、それに合わせたJavaScriptのコードを動作させるアプリ
console.time('nodeList'); var elems = document.getElementsByTagName('*'); for(var i=0;i<1000;i++) for(var j=0;j<elems.length;j++) elems[j]; console.timeEnd('nodeList'); console.time('array'); var elems = Array.slice(document.getElementsByTagName('*')); for(var i=0;i<1000;i++) for(var j=0;j<elems.length;j++) elems[j]; console.timeEnd('array'); console.time('length'); var elems = document.getElement
自分用メモ TBODY要素にid指定してDOMアクセスしようとしてはいけない。(IE6だとまず動かない) Ajax.UpdaterのcontainerにTEXTAREA要素を指定してはいけない。 prototype.jsのElement.updateメソッドで更新しようとするが、innerHTMLに対して操作しようとするので動かない。 update: function(element, html) { if($(element).tagName.toLowerCase()=='textarea'){ $(element).value = html.stripScripts(); } else { $(element).innerHTML = html.stripScripts(); } setTimeout(function() {html.evalScripts()}, 10); },こ
またまた"Prototype.js"についてのちょっとしたメモ 下記のような簡単なスクリプトで document.observe('dom:loaded', function(event) { var item = new Image(); item.src = 'image.jpg'; $$('body')[0].insert(item); item.observe('click', function(event) { alert(event.element().src); }); }); SafariやFirefox、Operaでは問題なく写真をクリックしたときにイベントが実行される ところがIEでは実行されない。ステータスバーにはエラーのアイコン。 メッセージを見てみると"item.observe('click', function(event){})"の部分が問題ありらしい ite
2009年07月06日22:00 カテゴリJavaScriptDOM入門 親子・兄弟、相対位置にあるノードを探索する 前回childNodesプロパティについて説明しましたが、これはある要素ノードの子ノード(タグ要素に限らない)を参照するプロパティです。DOMには子ノードを参照する以外に、親ノードや兄弟ノードを参照するプロパティが用意されており、それらを使うことで基準となる要素から相対位置にあるノードを参照することができます。 相対位置にあるノードを取得する 親ノードの要素オブジェクトを取得する parentNodeプロパティ…………その要素の直近の親ノードの要素オブジェクトを取得するプロパティ。テキストノードなどは原則的に子ノードを持たないので、親ノードは必ず「要素ノード」かdocumentノードになる。また一つのノードにつき親ノードは一つだけなので配列にはならない。 (例) <div
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く