タグ

JavaScriptとTipsに関するwackyのブックマーク (320)

  • これでできる! クロスブラウザJavaScript入門 記事一覧 | gihyo.jp

    運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    これでできる! クロスブラウザJavaScript入門 記事一覧 | gihyo.jp
    wacky
    wacky 2010/03/17
    2010年現在のクロスブラウザJavaScriptのテクニックを解説する連載。「ライブラリを使わないクロスブラウザ実装」のケーススタディが中心。
  • mir.aculo.us JavaScript with Thomas Fuchs » Blog Archive » 6 easy things you can do to improve your JavaScript runtime performance

    November 8th, 2009 Here are the slides from my “Extreme JavaScript Performance” talk that I gave at JSConf.eu on November 7 in Berlin. I’m talking about 6 easy things you can do to improve your JavaScript runtime performance, ranging from simple things (function inlining) to some quite surprising findings on how JavaScript engines deal with loops. There’s benchmarks for the four most common JavaSc

    wacky
    wacky 2009/11/11
    JavaScriptを高速化する6つのテクニック。関数呼び出しを避けインラインに展開、配列やオブジェクトはnewではなく括弧で生成、評価式の記述順を工夫、など。(→ 日本語紹介: http://journal.mycom.co.jp/news/2009/11/11/015/index.html
  • HTMLDocument の動的な作成: Days on the Moon

    ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre

    wacky
    wacky 2009/10/30
    JavaScriptを使ってHTMLソースからHTML文書(HTMLDocument)オブジェクトを生成する方法まとめ。ブラウザごとの挙動の違い。createHTMLDocument、createDocument、cloneNode、iframe要素、ActiveXObject("htmlfile")、CID。
  • Google Doctype - Google Code

    利用方法 Google Doctype を参照します。 コンテンツ テーブルから興味のあるページを見つけます。 間違いを見つけたり、何か書き加えたいことがあれば、Google アカウントでログインし、ページ上の [編集] リンクをクリックします。 詳細情報 概要 - Google Doctype について ライセンス - 業界標準のソーã

    wacky
    wacky 2009/10/13
    GoogleによるWeb開発者向けのオープンな百科事典。DOM操作やCSSのヒント・コツ、セキュリティやブラウザ互換性の情報、DOMリファレンスなど。(英語)
  • Let's make the web faster - Google Code

    Optimizing JavaScript code Authors: Gregory Baker, Software Engineer on GMail & Erik Arvidsson, Software Engineer on Google Chrome Recommended experience: Working knowledge of JavaScript Client-side scripting can make your application dynamic and active, but the browser's interpretation of this code can itself introduce inefficiencies, and the performance of different constructs varies from client

    wacky
    wacky 2009/10/13
    Google Chrome開発者によるJavaScriptコード最適化・高速化のノウハウ集。文字列結合、オブジェクト定義、クロージャの欠点、メモリリークの注意など。(→ 日本語訳: http://d.hatena.ne.jp/tohokuaiki/20090630/1246351679
  • WSHでCSSセレクタのWEBのスクレーピング - それマグで!

    ここまでのまとめ。 WEBスクレーピングをCSSセレクタで遣るためにPerl入れますか?Ruby入れますか?PerlでWeb::ScraperやRubyでScrapiと同じ事をWSHでやればいいじゃん。わざわざWSHで?うん、わざわざ、してみた。 ActivePerlでCPANモジュール使うの面倒じゃん*1 WindowsRubyいれてパッケージ入れるのすら面倒(笑 WSHならJSだけで動くじゃん JScriptでWeb.Scraperを作ればいいじゃん。 休日を返上してうんうん唸って捻って考えた結果。どうしてもWSHからIEを使いたかった。 スクレーピングのテストとしてYahooから株価を取得することを考えた。 株価取得コード これを動作させるのが目標 //株価取得 var stocks = {}; stocks.NIKKEI = Utena.Scraper.YahooStock("9

    WSHでCSSセレクタのWEBのスクレーピング - それマグで!
    wacky
    wacky 2009/09/03
    WSHからHTMLをCSSセレクタでスクレイピングする方法。cssQuery.jsを利用。
  • WSH で HTML を XPath したいんじゃあああぁぁ - Wisteria::Diary

    CompleteX で文脈依存のヘルプを表示するために、各種ライブラリ (たとえば 田楽 DLL) のドキュメントを INI ファイル形式に変換したい。ただし、できるだけロバストな記述で*1。具体的には 素の Windows + IE 環境で (不特定多数の一般ユーザーのマシンで*2 ) 必ずしも well-formed でない HTML 文書を対象として XPath を使って内容をスクレイピングしたい という、一見ありがちな要求。なんだけど……これが全く一筋縄では行かないどころか五筋縄以上かいくぐる羽目になりましたことよ。 結論 現在のところ Windows + IE だけでは不可能。サードパーティの XPath 実装を使えば可能。 0 筋縄: 方針の確認 まず、対象が純粋な XML なら簡単にできることを確認。 var dom = WScript.CreateObject("MSXML

    WSH で HTML を XPath したいんじゃあああぁぁ - Wisteria::Diary
    wacky
    wacky 2009/09/03
    WSHからHTMLをXPathでスクレイピングする手法の試行錯誤まとめ。amachang氏のJavaScript-XPathを利用。
  • Browser fixes :: XRegExp

    “Regular Expressions Cookbook manages to be simultaneously accessible and almost ridiculously comprehensive.” —Jeff Atwood Recommended regex tools: • RegexBuddy • RegexMagic • PowerGREP Splitting on regex matches There are several cross-browser inconsistencies when using a regular expression as the delimiter with the native String.prototype.split method. Divergences from the ES3/5 standard are lis

    wacky
    wacky 2009/07/23
    JavaScriptの正規表現におけるブラウザごとの動作非互換性まとめ。spliceメソッド、lastIndexプロパティ、replaceメソッドなど。(英語)
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    wacky
    wacky 2009/07/23
    複数行テキストの中でマッチする正規表現の書き方( /[\s\S]*/ )。mオプションは行頭(^)と行末($)マッチングに対するもの。
  • JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log

    Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。

    wacky
    wacky 2009/06/03
    JavaScriptで画像の幅と高さを取得する方法。Firefox、Safari、ChromeはnaturalWidth / naturalHeightで。IEはruntimeStyleのwidth / heightで。Operaは非同期でやるか、removeAttribute("width") + DOMAttrModifiedイベントで。
  • 正規表現のベンチマーク(String.match と RegExp.exec のざっくりとした違い) - latest log

    2009-01-12追記 タイトル修正しました。 2009-01-14追記 String.indexOf と RegExp.test のスコアが逆に書かれてていたのを修正しました。 String.match ばかりで、RegExp.exec を使ったことがありませんでした。 ちょっと気になったので色々とベンチマークを取ってみました。 TEST TIMES IE6 Fx3.0 Fx3.1 (JIT) Safari3 Chrome1 (JIT) A. match(/\s*/) vs match(/ */) "aaaaaaaaaaaa".match(/\s*aa\s*/) 1000000 7203 1714 327 2375 2128 "aaaaaaaaaaaa".match(/ *aa */) 1000000 7156 1638 297 2328 2148 B. RegExp.exec vs

    正規表現のベンチマーク(String.match と RegExp.exec のざっくりとした違い) - latest log
    wacky
    wacky 2009/06/01
    JavaScriptの正規表現に関して主要ブラウザでベンチマーク比較。String.matchとRegExp.exec、String.indexOfとRegExp.testなど。
  • JavaScript正規表現メモ。 (JavaScriptでよく使う書き方。) - こせきの技術日記

    タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー

    JavaScript正規表現メモ。 (JavaScriptでよく使う書き方。) - こせきの技術日記
    wacky
    wacky 2009/06/01
    JavaScriptの正規表現の使い方と注意点まとめ。正規表現リテラルを使わないほうが良い ← 状態を持つ、ループ中でgオプション付き正規表現リテラルを使わない ← 無限ループの可能性。
  • ppBlog official

    こんにちは、martinです。日に帰国して1年が経ちました。昨年は2月から新しい職場で働き始めたり、9月6日に第1子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます(静的リンクが有効な場合ですが)。今時のブラウザならエンコ

    wacky
    wacky 2009/04/09
    角丸コーナーのJavaScript実装。ブラウザごとのサンプルコード。IEはVMLで、OperaはSVGで、FirefoxやWebKit系は専用メソッドで。
  • handleEvent、addEventListener - 素人がプログラミングを勉強していたブログ

    addEventListenerの第二引数は、関数以外にも、handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。 window.addEventListener("click", { handleEvent: function (e) { console.log(e); } }, false); また、この仕様を利用すると、 ({ run: function () { window.addEventListener("click", this, false); this.counter = 0; }, handleEvent: function () { this.counter++ if (this.counter < 3) alert(this.counter + "clicked!"); else this.destroy(); }, destroy: fun

    handleEvent、addEventListener - 素人がプログラミングを勉強していたブログ
    wacky
    wacky 2009/04/07
    『addEventListenerの第二引数は、関数以外にも、handleEventをメソッドとして持ったオブジェクトも渡すことが出来る』。それを利用してイベント処理の登録・削除をオブジェクトにまとめるサンプルコード。
  • jQuery UI Tabs with Next/Previous | CSS-Tricks

    Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you

    jQuery UI Tabs with Next/Previous | CSS-Tricks
    wacky
    wacky 2009/03/27
    jQuery UI Tabsでタブ化したコンテンツを次々に切り替える「Prev Page」「Next Page」ボタンの簡単な実装方法。
  • KOPI77: Link Situs Slot Gacor Spesial Terbaru Server Slot88 Menang

    Belanja di App banyak untungnya: Banyak Vouchernya Produk Eksklusif di App Rekomendasi Hanya Untukmu Paling Pertama Dapat Promo

    wacky
    wacky 2009/03/24
    カードをシャッフルするように画像を次々と切替えるイメージギャラリーをjQueryで実装するチュートリアル。CSSのz-indexプロパティを操作してアニメーション効果を付ける。
  • Simple jQuery Modal Window Tutorial

    Introduction In this tutorial, I'm going to share how to create a simple modal window with jQuery. I like jQuery, it makes everything so simple and so easy. In case you don't know what's modal window. You can click here. That's an example of a modal window. In this website, I'm using facebox (inspiration from facebook). Others, such as lightbox, thickbox, multibox, litebox...... it's too many of t

    Simple jQuery Modal Window Tutorial
    wacky
    wacky 2009/03/19
    プラグインを使わずにjQueryだけでLightbox風のモーダルウインドウを実装するチュートリアル。
  • 大量に同じ画像を表示したいとき - os0x.blog

    画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += ' css:' + ((new Date*1) - now); })();

    大量に同じ画像を表示したいとき - os0x.blog
    wacky
    wacky 2009/03/17
    JavaScriptで同一画像を大量表示する際の高速化手法。CSSのbackgroundを利用。並べる/敷き詰める場合はbackground-repeat。イベント周りは座標を計算して。
  • Side Navigation Tooltip / Popup Bubble

    I’ve had quite a few questions regarding the tooltip on my side navigation so I figured I would write a tutorial on it. The tooltip used on my blog was actually from www.jQueryForDesigners.com, but I decided to write my own with some simple jQuery. View Demo Step1 - Create Wireframe We will first start by creating the wireframe of the side navigation. HTML <ul class="sidenav"> <li> <a href="#">Hom

    wacky
    wacky 2009/03/12
    マウスを乗せた項目にツールチップがスライドアニメーション効果付きでポップアップするサイドバーの作り方。要jQuery。
  • Easy Display Switch with CSS and jQuery - DesignM.ag

    This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch. I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may

    Easy Display Switch with CSS and jQuery - DesignM.ag
    wacky
    wacky 2009/03/11
    サムネイルビューと詳細ビューを切り替えるインタフェースのjQuery + CSSサンプル。