こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか？ String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
JavaScriptでうっかりやってしまいそうなこと色々
こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか？ String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証 - 写経日記
を以下の記事、そのまま試してみた。 HubLog: Setting the height of a cross-domain iframe using postMessage parent.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript"> window.addEventListener("message", receiveSize, false); function receiveSize(e) { if (e.origin === "http://banyan.github.com") // for security: set this to the dom
safariのwindow event
appcacheを調べていたついでに発見したので書いてみる。ちなみにsafariのインスペクターのコンソールがコードの入力補完をしてくれるので、弄ってたら色々出て来たので。出て来た結果をググったらwebkit関連の記事ばかりなので、webkitのソースを追う方が実は早い気がした。 window.onload window.onfocus window.onblur window.onunload window.onbeforeunload このあたりはまぁ他のブラウザでもお馴染みですね。 window.ondrop 字面から。。。？ window.onpagehide window.onpageshow この２つはなかなか面白い。基本LoadとUnloadに近い動きだが、mobile safariだとwindow切り替え時にも反応する(一体何に使えるかはアイデア次第...）。 window
JavaScriptでcookieを使う話
JavaScriptでcookieを使う話の改訂版である。 2年も昔に、JavaScriptのこともよくわからずに、様々な資料を引っ掻き回しながらプログラムを書いた。それはきちんと動作はしたし、そのときはそれで満足だった。 しかし、時間がたち、多少なりとも経験を積むと、昔書いたプログラムの変なところや無駄なところが目に付いてしょうがなくなってしまう。特に、このプログラムについては自分でもかなり納得のできないものになっているし、説明にも変なところがある。そこで、新たにコードと解説を書きなおしたというわけだ。 以前のものと比較していただけば、ずいぶんとすっきりしたプログラムになっていることがわかると思う。2年の間に、私がどう変わったか、なんてことを見てもつまらないかもしれないけれど。より新しくなったコードは有用ではないかと信じる次第である。 掲示板などのCGIでcookieを使う場合、たいてい
iframe 関連処理まとめ - Cyokodog :: Diary
iframe 関連の処理で分かったことをこちらにまとめてこうかと思います。コードは jQuery ベースです。 変更履歴 2009.06.17 Safari,Chrome にて動的に生成したiframe内に CSS ファイルを読み込ます方法が分からないとしてましたが、codeなにがし(http://code.nanigac.com/forum/view/488)で教えていただき、記事を修正しました。 iframe 内 を親 html から参照する 同一ドメインであることが前提です。 //iframe 内の window オブジェクトを参照する $('iframe')[0].contentWindow //iframe 内の document オブジェクトを参照する $('iframe')[0].contents()[0] //iframe 内の html 要素を参照する $('iframe
「訂正とダウンロード」ページのご案内 - デザインってオモシロイ -MdN Design Interactive- - MdN Design Interactive
＜2018年＞ 『MdNデザイナーズファイル2018』 https://www.mdn.co.jp/di/book/3217303024/?page=2 https://www.mdn.co.jp/di/book/3217303024/ ＜2017年＞ 『HTML+CSSワークショップ 手を動かして学ぶWebデザイン』 http://www.mdn.co.jp/di/book/3216203010/?page=2 http://www.mdn.co.jp/di/book/3216203010/ 『大人ディズニー 夢の世界へ 素敵な塗り絵レッスンブック』 http://www.mdn.co.jp/di/book/3216303021/?page=2 http://www.mdn.co.jp/di/book/3216303021/ 『死んだらJ-POPが困る人、CDジャケットデザイナー 木村
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
JavaScript初心者におくる24のグレイトなtips - 三等兵
私が作ったわけではなく海外の記事です。自分も学習してみました。 phpスポーツ啓発日誌や、コカトリスさんや、アイスクレアームパラダイスさんのような、品質の良い訳は私にはできませんので見出しは意訳もしくは誤訳、文章は無視して訳してません。かつ、私がいろいろコードや文章つけたしてます。内容的にはほとんどズレてはないと思いますが、適当なのでおかしいところがあるかもしれません。 うっとうしい場合は原文をどうぞ。 24 JavaScript Best Practices for Beginners 1. 等価演算子で==使うなよボケ===だろナスチン野郎 ひぃぃぃ。 ==|!= だとねー、型は自動に変換されるんすよねー。ねー。 s = '1'; i = 1; alert(s == i); // true alert(s === i); //false えーと、==は「わし、数値も文字列も中身が一緒だ
「吹き出し」をツールチップとして実装するjsいろいろ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウス
5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル:phpspot開発日誌
A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg
JSファイルにJSファイルをインクルードする: ナナイさんメモ
通常複数のjsファイルをHTMLにインクルードする場合は、 <script type="text/javascript" src="aaa.js"></script> <script type="text/javascript" src="bbb.js"></script> の様にscriptタグをjsファイル分記入すれば事足りるが、 HTMLに記述するscriptタグを1つにして、そのjsファイル内で他のjsファイルをインクルードする方法。 HTML: <script type="text/javascript" src="aaa.js"></script> aaa.js: document.write("<script type='text/javascript' src='bbb.js'></script>");" document.write("<script type='text
SWFForceSizeを試すのだ！ | にゃあプロジェクト
かえる君をクリックすると、別ウィンドウが開くので、ウィンドウ・サイズを変えてみよう。 ステージサイズは 600*400 で、背景色は黒に設定。 Stage.scaleModeの値 参照。 SWFObject + SWFForceSize で、ウィンドウ・サイズを指定したサイズより小さくすると、スクロール・バーが表示されるよ。 まず、SWFForceSize をダウンロードしよう。 #最新版は、SWFForceSize 1.0 (07/09/19現在) pixelbreaker : SWFObject add-on: Size limiting for full window flash swfobject.js / swfforcesize.js swf を表示する html と同じ階層にでも置いておく。 swf を表示する html <script type="text/javascri
eWeb - ホームページ作成支援 Web Design
Oops! Sorry!! This site doesn't support Internet Explorer. Please use a modern browser like Chrome, Firefox or Edge. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut elementum elit. Nulla pharetra sem id nisi ornare, eget porta eros vehicula. Morbi vel nisl finibus, porta lacus eget, lobortis enim. Vivamus laoreet ligula ut ipsum sagittis lobortis. Lorem ipsum dolor sit amet, cons
jQueryによるフォーム部品操作のレシピ - むつらつれづれ
テキストボックスやラジオボタンなどのフォーム部品は、論理モデルとしては単純なnameとvalueの組み合わせであるものの、jQueryを以ってしても画面上では統一的に扱えずに意外と苦労する。忘れがちなので纏めてみた。 フォーム部品共通 フォーム部品（のjQueryオブジェクト）を取得する var obj = $('#target'); // id指定 var obj = $('.targets'); // class指定 var obj = $('input[@name=xxx]'); // name指定 テキストエリア、リストメニューなど同一ドキュメントで唯一なものにはユニークなidを振っておき、チェックボックスやラジオボタンなど同一のname要素で複数存在するものにはそれらで共通のclassを振っておくか、name要素で指定するのが無難か。 テキストボックス（input[@type=t
検索できる javascriptサンプルブック
※本ページはソーテック社発行の書籍「使える！JavaScriptサンプルブック」購入者のためのものです。サンプルは書籍内容をマスターする目的のみ使用することができ、他の用途での使用・配布は一切禁止します。また、これらサンプルを実行した結果については著者、（株）ソーテック社は一切の責任を負いかねます。全てお客様の責任において御利用くださいますようお願いいたします。購入者以外の御利用はご遠慮ください。 ここで使用している全ての写真素材ファイルの著作権は篠崎柚さんにありますが、本書を学習する目的では報告や許可を必要とせず自由に使用できます。 しかし、他の目的での写真使用に関しては篠崎柚さんのページ「5memorips-photograghic」のフリー写真素材の利用規約をお守りください。
xingxx - RSSリーダーはJavascript+jQueryでたった14行で作れる
思いつきで、そっけないトップページに、jQueryをつかってRSSリーダーを作ってみた。 MTが出力しているXMLを取得して、エントリーのタイトルを表示している。 そうえいばjQueryは1.2.6にバージョンアップして、実行速度が２倍くらい上がったということだ。体感はそんなでもないけど。。 jQueryのいいところは、なんといっても手軽さだろう。思いついたことを手軽に実現できるのはクリエーターにとって有難い。Ajaxという概念の敷居を低くできているのも、こういったライブラリの恩恵に預かっているからといえると思う。 こんなにも手軽に、たった約10行たらずでRSSリーダーを作れる時代になったことは喜ばしい。 まぁ、これがクロスドメインだったら、ハナシは別なのですが、、 以下、ソース $(function(){ $.ajax({ url: "blog/atom.xml", cache:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://wiki.minaco.net/index.php?JavaScript%2FAndroid%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%2F%E3%81%AF%E3%81%BE%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8
エラートラップ（onerrorイベント）
Form送信ボタンのダブルクリック防止処理で不思議な現象