javascript
getElementByIdとgetElementsByNameってよく使い方を間違えます。（私だけかもですが。） ということで、基本中の基本のgetElementByIdとgetElementsByNameの使い方をまとめてみます。 ※「getElementByName」では無く「getElementsByName」だってところがち…
JavaScriptのreplaceの第2引数には関数(function)を使用することが出来ます。 その簡単な使い方と簡単な説明です。※ずっと前にも一度書いたことがあったのですが、読み返したときに意味不明状態になるような内容だったので、情報を整理して改めて書いていま…
PHPでハッシュ配列をJSON形式の文字列に変換する関数を作ってみました。通常、PHPで配列をJSON形式に変換するには「json_encode」を使用するのですが、この関数は「UTF-8 エンコードされたデータでのみ動作」という制約があるため、SJISの場合などは使用でき…
JavaScriptのreplaceの第2引数に関数オブジェクトを渡せることを知りました。関数を渡すことで、ちょっと複雑な置き換えロジックを書くことができるみたいです。 単純なものしか書けませんがこんな感じで。var str_befor = 'hogehoge foo bar hogehoge foo b…
JavaScriptである要素をフェードインする処理を作成してみました。作成にはyoumos opacity - 半透明を操るJavaScriptを参考にさせていただきました。 /* 透明度の設定*/ setOpacity = function(elm, opacity) { elm.style.filter = 'alpha(opacity=' + (opac…
今まで、PタグやAタグの中に文字を挿入する場合にinnerHTMLを使用していましたが、 完全にDOMとして使うにはcreateTextNodeを使用するのが正しいようです。 /* PタグのElementを生成 */ var element = document.createElement('P'); /* Pタグ用のTextNodeを…
クラスのメソッドをaddEventListenerを使用して登録しようとすると、 thisがうまく使えません。 addListener(document.getElementById("hogehoge"), 'click', function(event){ return this.fooBar(event); }); と書いてしまうと、thisがdocument.getElement…
仕事で申込系のフォームを作成する機会があり、動作確認するときに全てのテキストボックスに 同じ入力値を設定したい場合があったため、今更ながらブックマークレットを作ってみました。今まであまり気にしていなかったブックマークレットですが、なかなか楽…
以前に、タグ名とAttributeとして設定したい値をハッシュで受け取って設定する createElementを作成しましたが、それにプラスして配列からHTML要素を生成する処理を 作ってみました。 配列を渡すと親子関係を持ったHTML要素を生成するようになっています。 …
なかなか便利なtextareaのサイズを入力にあわせて調整するJavaScript。 イラストdeブログ開発記さんと404 Blog Not Foundさんで紹介されています。textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ (イラストdeブログ開発記) function textare…
以前、getElementsByClassNameを自作してみましたが、少し作りを変えてみました。 前の作りだと、コードが冗長化されてしまっていたので、一部の処理を共通化してみました。 /*********************************************** * クラス名、タグ名で指定され…
createElementを改良して、タグ名とAttributeとして設定したい値をハッシュで受け取り、 設定する処理を作ってみました。 /*********************************************** * Element生成 AttributeをHashで受け取り設定する ****************************…
JavaScriptは拡張性の高い言語ということで、標準オブジェクトを自分で拡張して、 便利に使うことができます。 例えば、Rubyの配列で使用できるeachみたいなものも、自分で作ることができました。 以下のページを参考にさせていただきました。 IT Pro - Part…
Firefoxではonclickなどのイベント発生時にthisを使用すると、イベントが発生したオブジェクトを取得できるのですが、 IEの場合はthisがundefinedになってしまっていました。 IEではevent.srcElementを使用するようです。 var addEvent = ( window.addEventL…
何気なく使ってしまっていた『tElementsByClassName』ですが、 Firefox3でしかサポートされていないようで、IEやFirefox2では使えなかったので、 自作してみました。 document.getElementsByClassName = ( document.all ? function(classname, tagname){ var…
JavaScriptでのクラスというかprototypeには定義方法がいろいろとあり、 どれがベストなのかが、いまいち理解不足です。『JavaScript 第5版』の再読と、以下の記事／ブログエントリを参考にさせていただいて、 理解を深めていこうと思います。CodeZine - プ…
JavaScriptで、その月の末日を知りたい時があります。 閏年とかで複雑な計算式が必要と思いきや、意外と簡単に実現できました。 /* 末日が知りたい翌月の0日(前月の末日)を取得して末日を求める */ /* 翌月を指定するため『month-1』 をしない。 */ var date…
addListenerで引数付きの関数を指定する方法がいまいち分かっていなかったので、 調べてみました。答えとしては、関数の指定で無記名関数を作成して記述すればOKでした。 関数の定義を指定してあげれば良いということですね。 非常にすっきりしました。解決…
JavaScriptから特定の要素のテキストを書き換えるのにinnerHTMLを使っています。 innerHTMLで書き換える際に、HTMLタグを文字列連結するのはあまりよろしくないみたいです。ということで、自分なりに考えてコードを書いてみました。 どれがいいかは、時と場…
久しぶりにJavaScriptです。 テキストボックス等でフォーカスがあたった時にツールチップを表示するコードを考えてみました。var addListener = ( window.addEventListener ? function(elm, event, func){ elm.addEventListener(event, func, false); } : fu…
今日は月に一度の会社の勉強会。 毎年テーマを決めるのですが、今年のテーマはJavaScript。 同じ課の中でJavaScriptに興味がある5人で活動中です。それで今日の勉強会で後輩が、 「JavaScriptって関数の引数で関数を渡せるんですよね？ これってどんなメリッ…
「JavaScript 第5版」も大体読み終わったので、 「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」を読み始めました。 実はこの本、だいぶ前に購入していましたが、いまいち内容が理解できずに本棚に眠っていました。しかし、「JavaS…
JavaScriptで別ウィンドウを開くのにスマートかつモダンなやり方は無いかと調べてみました。 こちらのサイトを参考にさせていただきました。ヨツモネット − a 要素の target="_blank" の代わり今までは、aタグのonclickに｢windows.open｣とか書いていましたが…
FirefoxのchildNodesは、子要素だけでなく改行コードも要素として含まれました IEの場合は、改行コードは含まず、子要素だけを見てくれるみたいです。 K Factor − Firefoxでは、childNodes.lengthの結果が他ブラウザと違う を参考にさせていただきました。 <html> <head> <script type="text/javascript"></head></html>…
