Chrome’s Console API: Greatest Hits
Mitch Robb 14 Jul 2014 Chrome’s Console API: Greatest Hits The Chrome debugger is the best tool for locating problematic code in a JavaScript application, but there are times that diving into your code line-by-line isn’t the fastest or most convenient means to that end. We all know about console.log(), but I thought I’d write about a few of its lesser-known cousins that are more refined, and can
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
スクロールで何かするための処理まとめ。（JavaScriptおれおれAdvent Calendar 2014 – 21日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
ajaxで持って来たソーシャルボタンをボタンを更新する [俺の備忘録]
Google+ボタン はてなブックマークボタン 更新日時: 2013年10月24日（木） 作成日時: 2013年03月03日（日） 前の記事 / 次の記事 ツイッターの「ツイート」ボタン、facebookの「いいね！」ボタン、googleの「+1」ボタン mixiの「イイネ！」ボタン、はてなの「はてなブックマーク」ボタンをajaxで差し替える、 と 正常に表示されない。 たぶん他の各ソーシャルサイトのボタンも全部そう。 ちょっと調べてみると、ajaxで要素を差し替えた場合は、 scriptタグに記述されたスクリプトは実行されない。 document.onload() イベントが発生しない（jQueryの $(document).ready() イベントも発生しない） っていうところに原因がありそう。 Ajax/Ajaxで取ってきたHTMLコンテンツ内の＜script＞タグを実行させたい そ
Greasemonkey スクリプトの冒頭に書く 5 行
WordPress with Twitter の不具合を修正した記念に、Greasemonkey を書く時に頻繁に利用する関数をまとめたので、公開してみます。 外部の JavaScript ライブラリを読み込む方法を解説したサイトもありますが、そこまで大げさな機能が必要でもなく、軽く動作させたいときに便利です。 特に共通ライブラリを利用すると、Firefox 以外のブラウザの対応も無駄に読み込む事になるので、スマートじゃないなぁと思います。 var d = document; var $ = function(id) { return d.getElementById(id); } var $x = function(xp) { return d.evaluate(xp, d, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleN
Parallax Background with Javascript and CSS
« back to inner.geek Parallax Backgrounds a multi–layered javascript experiment This work is licensed under a Creative Commons Attribution 3.0 License. First of all, try scrolling up and down thing page. Use your scroll wheel, use the scroll bar, use the arrow keys, page up, page down, space bar. Note how the text scrolls normally, but the green background scrolls slowly, and how the clouds scroll
javascript - 特定のDOMをソース表示する : 404 Blog Not Found
2008年07月13日16:00 カテゴリTipsLightweight Languages javascript - 特定のDOMをソース表示する すでにいくつかのentriesで使っているのですが、かなり便利なので改めて紹介。 表示元 表示したいHTMLを適当にdivタグで囲ってidを振っておく。ここではhtml2show 表示先として空のpreを作っておき、そこにもidを振っておく。ここではhtmlsrc 以下のようなscriptを、preタグの直下に転がしとく (function(src, dst){ dst.appendChild(document.createTextNode(src.innerHTML)) })( document.getElementById('html2show'), document.getElementById('htmlsrc') ); もちろん以下
ecl.js (Escape Codec Library) と Sleipnir の相性が悪い件について
とあるサイトで ecl.js を使っています。ecl.js とは JavaScript で文字コード変換を行うライブラリで Escape Codec Library が正式名称です。配布元は Escape Codec Library: ecl.js です。ちなみに yaplog に組み込まれている /blog/js/urlEnDecoding.js も元ネタは ecl.js みたいですね。もちろん Sleipnir で yaplog 見ると激遅です・・・ Shift_JISエンコードやEUC-JPエンコードなども可能な escape エンコード・デコード関数のライブラリ 文字列をすべてのコンピュータで読めるような形式に変換したり、変換されたものを元の文字列にデコードすることができる関数のライブラリです。 ビルトイン関数 escape() , unescape() とは異なり、どの種類のブラ
高速なgetElementsByClassName - 素人がプログラミングを勉強していたブログ
追記：ちょっとコードを短くした。 メモ化、正規表現を使わない工夫、メソッド呼び出しを減らすなど、地味に努力した。 けっこう速いと思う。 引数には、順不同で複数のクラス名を渡せる("foo bar"、"bar foo"みたいに)。 if (typeof HTMLElement.prototype.getElementsByClassName!="function") HTMLElement.prototype.getElementsByClassName=function(className) { var names=className.split(/\s+/), all=this.getElementsByTagName("*"), memo={}, ret=[]; for(var i=0,l=all.length,elem,iname,flag;i<l;i++) { elem=all[i
javascript - のみでQRCode! # thanx, google! : 404 Blog Not Found
2008年07月05日02:30 カテゴリLightweight Languages javascript - のみでQRCode! # thanx, google! [を] Google Chart API で QRコードも生成してくれるようになった新たに QRコードを生成してくれるオプションができました。 - QR codes (Developer's Guide - Google Chart API) http://code.google.com/apis/chart/#qrcodes ほう、それはめでたい。 「QRコードブログ」とかが手軽にできそうです。 というわけで、手軽につくってみた。 Demo: Size: Text: Encoding: ラク過ぎですなあ。むしろ漢字まじりの場合、Shift_JISにしないとケータイで読む時文字化けするというのが一番引っかかったところだったり
JavaScript で文字をトリミングする（改善版）
JavaScript を用いてエントリータイトル等の文字をトリミング（指定した文字数だけ表示する）するカスタマイズです。前回の「JavaScript で文字をトリミングする」は文字数だけでトリミングしたものですが、今回の改善版はバイト数で計算します。全角はそのまま1文字として数え、半角英数は2文字（2バイト）を1文字としてカウントします。 左のスクリーンショットが5文字でトリミングしたサンプルです。上は全角のみなので5文字でトリミングし、下は半角を含むので計7文字でトリミングしています。 さらにスクリプトを修正すれば、特定の半角文字（"M"とか"W"のような幅の広い文字）を全角として数えることも可能と思われます。完璧に横幅を揃えることはできませんが、かなり精度の良いトリミングができると思います。 今回も「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列を
Uri Detection | UserJS.org - User JavaScript for Opera
Avoiding page address detection mistakes Written on 2005-06-01 09:35 by tarquin. Last modified 2005-09-19 09:19 If is a script is intended to be active only on certain pages, it is important to ensure that the page address is correctly detected. The simple way is to use @include or @exclude like this: // @include http://example.com/* // @include http://www.example.com/easy/* or // @exclude http://
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 -
実用 - ウィンドウの外で発生するmouseupイベントを取得する、Firefox
JavaScript save the assistants 上記のスライダー、ドラッグを開始して、ウィンドウ外でボタンを離し、再度ウィンドウに戻るとずっと押しっぱなしのおかしな状態になる。これは、たぶんマウスが離されたことを検知できていないため。 WebFXのスライダーは、ちゃんと動く。実装を読んでみた。 Slidebar (WebFX) Firefoxは、文字を選択するようにドラッグを開始すれば、ウィンドウ外でマウスのボタンを外した時にもmouseupが起こせるようだ。これを利用し、見えない文字を選択し、選択状態も見えなくして、スライダーが正常に動作するようにしていた。 簡単なサンプルは以下。スライダに限らず、ドラッグ全般に使えると思う。mouseup以外に、mousemoveなども取れた。 IEの場合は、onlosecaptureイベントを使っていた。WebFX++
arguments に対して shift するための考察（をしていたらカッとなって配列変換のベンチマーク） - IT戦記
JavaScript において可変引数を扱う場合 arguments オブジェクトを使います。 function func() { for (var i = 0; i < arguments.length; i ++) { alert(arguments[i]); } }; func(1,2,3) // 1,2,3 を順に表示 そして 可変引数を使うパターンとしては、 すべて可変引数 固定引数と可変引数 の二つに分けることができます。 すべて可変引数 引数が与えられた分だけ同じような処理を行うパターン function add() { for (var i = 0, r = 0; i < arguments.length; i ++) r += arguments[0]; return r; } var r = add(1, 2, 3, 4, 5); 固定引数と可変引数 最初のいくつかの引
超便利！JavaScript用の文字列拡張関数いろいろ
Ivan Uzunov, a blogger since 2007, is still active posting free code for all those techies out there who would prefer to do it themselves… with a little help from Ivan, of course. In 2006 & 2007 Ivan posted lots of code for his visitors and followers. At some point the domain expired and the site saw several different owners with content that had nothing to do with Ivan’s blog post. The site has n
404 Blog Not Found:Digest - 今日にでも使うべきJavaScriptの7つのテクニック
2007年04月25日12:00 カテゴリLightweight LanguagesBlogosphere Digest - 今日にでも使うべきJavaScriptの7つのテクニック 良質の記事だけに全訳したかったのだけど、時間もないので紹介と抄録。 Digital Web Magazine - Seven JavaScript Techniques You Should Be Using Today サンプルコードは、適宜書き換えてあります。 1. Branch when possible - 分岐はなるはやで これは実例を見た方が早いでしょう。クロスブラウザー対応のaddListener()を考える。機能だけを考えれば、以下でOK。 function addListener(el, type, fn) { if ( window.addEventListener ) { el.addE
【コラム】そろそろきっちりJavaScript 第1回 "Firebug"の導入〜関数リテラルとは? (MYCOMジャーナル)
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台