javascript
JavaScript,もしくはWSH/JScriptで,プログラムの実行中に下記のエラーメッセージに遭遇することがある。 「実行時エラー:解放されたスクリプトからコードを実行できません」 この意味と対処法について。 JavaScriptで,「なくなったオブジェクトを参照し…
Webページを「コピペ不可能」にするためのテクニックまとめ。マウスで右クリックしてコピー,Ctrl + C で無断転載,などの行為を禁止できる。CSSやJavaScriptでの手法を網羅した。 (1) 右クリックの禁止方法 (2) コピーイベントを禁止する。Ctrl + C …
HTML5のJavaScriptで,Webページ内でCSVファイルを動的に生成してダウンロードする。CSVファイルの中身は日本語で,文字コードはSJIS(Shift-JIS)とする。サーバ側の処理は一切不要で,JavaScriptだけで実装する。 下記URLに,実際に動く動作デモがあります…
JavaScript/Ajaxライブラリである「jQuery」の, バージョン 1.7 での変更点のまとめ。1.6に無かった要素として,イベントを on/off で 登録・削除できるようになった。jQueryのAPIは,1.9から大きく変わっているのだが その前の1.8と1.7は大体同じ。 イベン…
jQuery 1.9 での変更点のまとめ。 1年以上も前のバージョンである 1.8 との違いが非常に大きいので, うかつに1.9にアップグレードしないほうがよい。Ajaxなどの挙動も 1.8 までとは異なるため, レガシーなWebサイトではそのまま 1.8 を使う事になるだろう…
jQuery バージョン 1.11 と 2.1 での変更点。 バージョンアップに伴う差異のまとめ: APIは前のバージョン(1.10, 2.0)と変わらない。 バグ修正 レイアウト高速化 読み込みをより細分化して高速化 カスタムビルドが向上 npmやBowerなどのパッケージ管理ツー…
jQuery バージョン 2.0と1.10での,変更点のまとめ。 1.9とAPIは同じ HTMLパースの挙動が少し柔軟になった カスタムビルドの改善 IEのフォーカス関連などのバグ修正 jQuery リリースの歴史: 1.8リリース:2012年8月 →こちら 1.9リリース:2013年1月 →こちら…
jQueryのバージョンで,従来の1.x系と最新の2.x系の差異・使い分けの方法について。 まず,いまからWebサイトを作るなら,2.x系を採用しよう。 jQueryの最新の機能が利用できるし,高速で動きが安定している。 特にスマホ向けサイトなら,2系の一択で決まり…
D3.jsの使い方を基礎から学べるチュートリアル動画(英語)。データの初歩的な扱い方から,円グラフ,ヒストグラム,木構造などのグラフィクスを描画する方法を解説。 動画リスト(前半) 1. D3.js tutorial - 1 - Introduction 2. D3.js tutorial - 2 - Sel…
いまやIEやFirefoxで標準的に利用可能な,配列の便利メソッドであるArray.prototype.reduceだが,これをWSHでも使えるようにしたい。 firefoxのJavaScriptの便利関数,reduceの使い方とサンプルコード。配列の全要素を順番に使い,一つの値を生成。Rubyのinj…
JavaScriptのcall/applyの違いには,覚え方がある。 call : 「コ」ール: 「個」別に引数を渡す。 apply : 「ア」プライ: 「ア」レイとして引数を渡す。 第二引数として,個別に渡すか,配列で渡すかの違いだ。上記のように,「コ」と「ア」の区別で記憶し…
JavaScriptの配列関数は,どんどん便利なメソッドが増えている。その中に,「配列の全要素を順番に使い,1つの値を生み出す」というメソッドがある。 それが Array.prototype.reduceだ。Rubyでいうとinjectメソッドにあたる便利関数。 サンプルコードを見て…
JavaScriptの連想配列(=オブジェクト)には,順序がない。なので,連想配列専用の構文である「for in」文で要素を取り出すときにも,順序が決まっていない。配列(Arrayオブジェクト)ではないから。 JavaScriptの連想配列でソート | You Look Too Cool ht…
こうなる: <body> <script> // 1から100までの素数を表示するプログラム // 全体を一つの文として宣言 var // 再帰ロジックによる // 素数判定関数 isPrime = function( n ){ return makeDivRecursive( n, Math.floor( Math.sqrt( n ) ) ); } , // ある数が割り切れるかど</body>…
jQueryで要素のセレクタを記述する際, :before などの疑似クラスを含めることができない。その理由は,そもそもJavaScriptから疑似クラスを操作できないからだ。要素.style でDOMのCSSプロパティを取得できるけど,疑似クラスはその中に含まれていない。 擬…
Youtube上の各動画へのリンク集。トップページは下記。 html5j.org - YouTube https://www.youtube.com/user/HTML5Dev... html5j - YouTube https://www.youtube.com/user/html5j/v...
JavaScriptでブラウザ上で「クロスドメイン通信」をしたい。いくつか方法がある。 クロスドメイン通信の方法 JSONP : scriptタグのSRCの動的書き換えで,外部サーバを指定。 iframeやwindowにHTML5のWeb Messaging APIでpostMessageで通信する 上記の2つが…
ブラウザ比較のまとめTOPへ FirebugでのXPathの使い方。Firefox上で,特定の属性を持つような要素をいっきに抽出して操作したい場合に役立つ。 クラス名を指定するサンプル コンソールで下記のように打ち込めばよい。 $x("//div[@class='hoge']") こうすれば…
JavaScriptからHTML5 APIを使用するコードを書くために,HTML5 APIのプログラミングについて解説しているサイトを集めた。 JavaScriptによるHTML5プログラミング入門 http://libro.tuyano.com/index2?id=206001 HTML5 JavaScript APIの全体像HTML5 JavaScrip…
ブックマークレットでXMLHttpRequestを使う際も,クロスドメイン制限がある。下記のコードは,異なるドメインからは動作しない。返却されるstatusが0になる。 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ console.log(xhr.status…
HTML上で,あるDOM要素が複数のクラス名を持っている場合,classNameプロパティの呼び出しは,複数のクラス名を文字列として取得する。 HTML上のclass文字列がそのまま文字列として返る 文字列の様子は,htmlに書かれているまま。複数のクラス名の間に半角ス…
ブラウザ上から非同期通信した場合も,通信の結果として同一ドメインのサーバから返ってくるレスポンスを受信すれば,そのレスポンスヘッダ内に指定されている通りに,Cookieがセットされる。 つまりWebアプリでは,Ajax通信でもクッキーは発行が可能,とい…
正規表現の基礎を脱して,応用的な情報をメモ。JavaScriptに限らず,Javaとか他のプログラミング言語でも汎用的に当てはまる。 参考サイト: JavaScript正規表現メモ。 http://d.hatena.ne.jp/koseki2/2009053... 括弧系 https://developer.mozilla.org/ja/C…
Webサービスにブックマークレット経由で通信する。通信の結果は,JSON形式でXHRで帰ってくる。FirebugでXmlHttpRequestの中身を読み取って,そのJSONオブジェクトの中身をいろいろWSHで加工したい。・・・ なんてことをやってた時に, 返却されたJSコード(…