JavaScriptで覚えておくとよいデータ構造 - 配列・オブジェクト - いろいろ解析日記
JavaScriptで必要なデータ構造の覚書です。 目次 配列 配列を生成する。 配列にデータを追加する。 配列にデータを格納する。 配列からデータを取得する。 配列中のすべてのデータに同じ処理をする。 オブジェクト オブジェクトを生成する。 オブジェクトにデータを格納する。 オブジェクトからデータを取得する。 オブジェクト中のすべてのデータに同じ処理をする。 関連記事 配列 配列は複数件のデータを扱うためのデータ構造です。 ■配列を生成する。 配列の生成は以下のように行います。 var 配列の名前 = []; var 配列の名前 = [ データ, データ, … ]; 配列の生成では、配列の名前を指定します。 もし、生成時にデータを格納する場合に、[]内にデータを指定します。 なお、JavaScriptでは配列の生成時にサイズを指定しません。 例えば、空の配列array1を生成するには、以
JavaScriptにおける、丸め誤差の掛け算テスト
JavaScriptにおける、丸め誤差の掛け算テスト 単価： 数量： ※計算ボタンを押してみてください。 どんな結果が出てくるでしょうか？ 結果： 四捨五入： ※とてもカンタンな計算なのに、こんなになってしまいます(; ;)。 【原因】 計算機における丸め誤差が原因です。 通常の数値計算ルーチンは数値はすべて２進数扱いにするが、 ２進数では１０進数の小数を表現しきれないためにこういう現象がおこる。 ２進数の桁は２の累乗扱いになるわけだが、小数だと、２の-1乗（つまり1/2)、 ２の-2乗(1/4)という単位になる。 したがって、２のマイナス何乗かの数値の合成でうまく表現できない。 数値は無限小数になって、最後の桁を切り捨てした部分の誤差ができてしまう。 補正後 ※いったん1000倍してから積を求め、積を1000で割った後四捨五入
スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール）
（”追記”書きました。） 下にスクロールすると横にtopへ戻るボタンを表示させるjQueryのコードのチュートリアルが公開されていましたのでメモ。 チュートリアルページ→webdesignerwall チュートリアルdemo→demo 上記のページに設置方法も詳しくのっています。デモコードと画像のダウンロードもできます。 チュートリアルページに公開されているCSSのコードとjQueryのコードをヘッド内で読み込み、 下記の例のように、body内のスクロールさせたい要素に”back-top”とidをふり空のspanを入れます。 <p id="back-top"> <a href="#top"><span></span>Back to Top</a> </p> このspanの部分がスクロールボタンになります。 CSSをいじればスクロールボタンの位置やデザインなど変更できます。 ↓↓Demoを作
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
jQueryのパフォーマンス高速化Tipsまとめ | Webエンジニアのメモ
TweetPocket jQueryのパフォーマンス高速化Tipsまとめ jquery-logo jQueryのパフォーマンス高速化Tipsのヒントリストです。 セレクタのパフォーマンスのヒント 1. 常に#ID から辿る jQueryで要素を選択する最速の方法は、IDによるものです。 $('#content').hide(); $('#content p').hide(); 2. クラスの前にタグを使用 jQueryで2番目に早いセレクタは、タグセレクタ（$（’head’））です。 なぜならそれはネイティブJavaScriptメソッド、getElementsByTagName（）だからです。 最良の方法は、接頭辞にタグ名（およびIDから派生）を持つクラスです。 var receiveNewsletter = $('#nslForm input.on'); クラスセレクタは、jQueryの
Symfony2でjQuery UIを簡単に扱うGenemuFormBundleを試してみた - Do You PHP はてブロ
KnpBundlesでjQueryを扱うBundleを探していたら、何だかいい感じっぽいGenemuFormBundleというのが見つかったので試してみました。 GenemuFormBundle by genemu | KnpBundles 今回はjQuery UIのDatepickerを使うまでの手順をまとめてます。 GenemuFormBundleとは javascriptライブラリを使うカスタムForm集で、jQuery UIだけではなくReCaptchaやTinymce、uploadifyといったものを使ったカスタムFormも用意されています。 GenemuFormBundleのインストール インストール手順はREADME.markdownにある通りです:-) 1. GenemuFormBundleのインストール Symfony/depsファイルに以下の内容を追加 [GenemuF
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
Route 477(2007-12-07)
■ [javascript] サーバが一定時間応答しなかったら処理を打ち切る 探していたものとは違うものだけど、一応メモ。 IT trends By 渡辺翔太 » Blog Archive » Ajaxでタイムアウトを設定するコード ネタ元： codejanitor » AJAX Timeouts with Prototype インデントが崩れているので直したものを貼っておきますね。 function callInProgress (xmlhttp) { switch (xmlhttp.readyState) { case 1: case 2: case 3: return true; break; // Case 4 and 0 default: return false; break; } } function showFailureMessage(
prototype.jsのイベント | GENDOSU@NET
prototype.jsで、エレメントにイベントを設定する <div id="test">test</div> このタグにクリックイベントを付ける時は $('test').observe('click', function(event){ alert('testをクリック'); }); prototype.jsのイベントとして指定出来るイベント ページのイベント load ページが読み込まれた時 dom:loaded ページが読み込まれた時(イメージなどは読み込み完了していなくても発動) ※DOMツリーの構築が終わっていても描画が終わっていない場合があるので、このイベント内で$('test’).style.height のようなプロパティを見ても0やnullが入っている場合がある。 unload ページが閉じられる時 resize ページのサイズが変更された時 abort ページの読み込み
付録 prototype.js：通信を中断する
prototype.jsはデータの通信を開始した際にonLoadingイベントが発生します。この時に通信用のオブジェクトをグローバル変数に入れておきます。あとは、abort()メソッドで通信を中断することができます。ただし、この方法が良いとは考えられないので他に良い方法があるはずです。（サンプルを実行する） <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- gHttpObj = null; function waitData()
Ajaxで通信を強制停止させる方法 | システムエンジニアの戯言
Ajaxで通信を強制停止するには XMLHttpRequestのabortを使います。 実際には、abortなんてそうそう使う機会はありません。 果たして使い道はあるのでしょうか？ 例えば、Ajax通信中に、「Now Loading・・・」なんていうメッセージをモードレスダイアログで表示し、さらにユーザが手動で通信を停止させる手段としてダイアログの右上に×ボタンを用意しておき、ボタンが押されたタイミングで、abortする、なんていうことが考えられます。 Ajax通信中に他のページに移動する際の問題 ミッションクリティカルなWebシステムでない限り、Ajax通信中に他のページへの移動を許容する事は間々あるかと思います。 例えば、最近私が作成したWebシステムでは、Topページのパフォーマンス向上のために、Ajaxで情報を遅延ロードして表示するような仕組みを採用しました。 どれぐらい、パフォー
スタイルシート［CSS］/ページ全般/印刷時の改ページ部分を指定する - TAG index
avoid の指定は、Opera以外では対応していないようです。 指定例 見出し（h2要素）の直前で改ページさせる例 h2 { page-break-before: always; } 水平線（hr要素）で区切って改ページさせる例 hr { page-break-after: always; } 使用例 h2要素の直前で改ページさせる例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> h2 { page-break-before: always; } </style> </head> <body> <h1>印刷時の
小数点以下の桁数を固定した表現を得る - ぱせらんメモ
JavaScriptで小数点以下1桁に固定した数値を表示させる方法について悩んでいる人がいたので調べてみた。 というのも、何も考えずに次のようなコードを書くと2.0と表示させたいのに2と表示されてしまうようだ。 var value = 2.0; target_element.innerHTML = value; valueが2.1や2.01であればその通りに表示されるのだが、小数点以下の省略可能な0は省略されてしまうらしい。 で、安直な解決方法としては整数の場合に文字列として".0"を連結するという案が思いつくわけだが、他人にソースを見られたときに格好悪いのでスマートな解決方法があるなら知りたい、ということらしい。 まぁ、上手くやってくれそうなメソッドぐらいあるだろうとなんとなく思ったので調べてみたらあった。 Number.toFixed(丸め位置); 数値またはNumberオブジェクトの
JavaScript 例えば小数点第2位以下を切り捨てる | Yasigani-ni Blog
JavaScriptは、小数点第N位以下切り捨てという関数は用意されていません。 というわけで、『JavaScriptで小数点第N位以下切り捨てる方法』をメモも兼ねてブログに残しておきます。 最初にも書いたように、小数点第N位以下切り捨てる関数は用意されていませんが、小数点以下を切り捨てる関数や四捨五入する関数はあります。 これらの関数を利用し、ちょっとした計算をすることで、小数点第N位以下切り捨てなどを実現します。 Math.floor() 小数点以下を切り捨てる。 Math.ceil() 小数点以下を切り上げる。 Math.round() 四捨五入する 『9.87654321』という数があったとします。 この数を小数点第2以下切り捨てる場合、まずは、『9.87654321』を10倍にしてしまいます。 var val = 9.87654321; val *= 10; 結果 val
JavaScript - 書式チェック
第４弾は、書式チェックです。 日付チェック [js] /** * 指定された文字列が有効な日付かチェックします。 * ※閏年判定含む。 * * @param argValue チェック対象日付(8桁の半角数字(yyyymmdd)の書式) * @return 日付として有効な場合はtrue、 * 日付として無効な場合はfalse */ function isDate(argValue) { if (isEmpty(argValue)) { // 未入力の場合 return false; } if (argValue.length != 8 ) { // ８桁以外の場合 return false; } if (!isNumeric(argValue)) { // 半角数字以外の文字列が含まれている場合 return false; } var iYear = parseInt(argValue.
配列要素を逆順に並べ替える [Ajax - (reverse) - prototype.js - 配列 - Tips]
1. ダウンロードしたprototype.jsを読み込みます。 <script type="text/javascript" src="prototype.js"></script> 2. indexOfメソッドを実行します。 // 配列を宣言して値をセットする var myArray = new Array("ABC", "DEF", "GHI"); // 配列要素を逆順に入れ替える // この例では"GHI", "DEF", "ABC"という配列を返す var afterArray = beforeArray.reverse(false);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
scriptaculous.jsでスムーススクロール。 – 伊藤清徳の垂直落下式ムーンサルトプレス
日経PC21 / エクセル - 勝手に設定される「ハイパーリンク」を解除したい！
webOpixel
Javascript で trim するには - Enjoi Blog