File system APIでブラウザーで動くファイラーを作る (1/3)
Webブラウザー内に独自のファイルやディレクトリを保存できる「File system API」の使い方ついて、前回の記事に続き解説します。ファイルの作成／削除やディレクトリの作成／削除方法については前回紹介しましたので、今回は一覧の取得やファイルへの書き込み／読み込み方法を学び、簡易ファイラーを完成させましょう。 ディレクトリ内のファイル／ディレクトリ一覧を取得する ディレクトリ内のファイル／ディレクトリ一覧を取得します。 ファイル／ディレクトリ一覧を取得するには、ディレクトリエントリーオブジェクトのcreateReader()メソッドを使ってディレクトリリーダーオブジェクトを生成します。 readEntries()メソッドは、第1引数に指定した関数に、ファイル／ディレクトリの一覧情報を渡します。関数にはファイルエントリーオブジェクト／ディレクトリエントリーオブジェクトを格納した配列が渡さ
ssig33.com - JavaScript を最下段で読み込むのがあまり有効ではない理由
この辺主観も混ってくるところではあるんですが。 JavaScript を上の方で読み込んだ場合 JavaScript の読み込みが終わるまでレンダリングされない JavaScript を下の方で読み込んだ場合 JavaScript の読み込み前にレンダリングは終わるが、 JavaScript が読み込まれるまでウオッなんかスクロールガクガクする！！スクロールできねえ！！！みたいになりがち スクロールしなくてもコンテンツが表示されるようなサイトでは下で読み込むアプローチは有効でしょう。しかしながらユーザーがレイアウトを変えられるようなサイトだったり長文コンテンツが沢山出るような可能性が高いサイト（具体的にははてなブログ）などで「スクロールしないとコンテンツが出てこない可能性が十分に高い」場合はかえってユーザビリティを阻害する可能性があります。 ユーザーは経験的に数秒待てばコンテンツが表示され
jsdo.it
We’re getting things ready Loading your experience… This won’t take long.
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
WebGL: ウェブの 2D および 3D グラフィック - Web API | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �� ��View in English Always switch to English WebGL (Web Graphics Library) は、互換性があるウェブブラウザーにおいて、プラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API です。HTML の <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。 WebGL への対応は、現代のすべてのブラウザーにあります（後
外部 script の document.write が何もしない条件などについて - ひだまりソケットは壊れない
読み込みのタイミングによっては外部 script のdocument.writeは無視される - HAKOBE blog ♨ なるほどなー、と思いながら上記記事を読んでた。 記事を読んでて JS の読み込み周りで気になることがあったので調べた。 DOM 操作で追加された script 要素のスクリプトはどのタイミングで実行されるのか? <!DOCTYPE html> <html> (略) <div id="js-insertion-point"></div> <script> var se = document.createElement("script"); se.src = "test.js"; var te = document.getElementById("js-insertion-point"); te.appendChild(se); </script> (略) 上記のような
Cartesian product - 直積集合 - カルテシアン積 - デカルト積 (Kanasansoft Web Lab.)
extendMap( [1,2,3], [4,5,6], function(x,y){...} ); で、実装してみた。 引数の配列の個数はいくつでも構わない。 (実際の処理は最後に記す。) そうしたら、それはmapとは言わないとnanki氏。 じゃあなんて言うんだろうと考えたがわからない。 順列(permutation)でもないし組合せ(combination)でもない。 そこへ、naoya_t氏の登場。 「cartesian product?」 日本語では「カルテシアン積」もしくは「デカルト積」。 なんかかっこいい。 でも、どこをどう読んだらデカルト積? 「直積集合」とも言うらしい。 Gaucheにはlibraryがあってもの凄く簡単に直積集合を求められる。 そうそう、いつもJavaScriptはそう。 ないものは自分で実装しなくてはならないけど、JSの場合はほとんど自分で作らなくては
JavaScript のビットマスクによるフラグの管理
JavaScript のビットマスクをはじめて使った。というかビット演算子というものに触れるのがそもそもはじめて。最初は何が何やらわからなかったけど、以下のページなどを参考にしつつなんとかやってみた。 ビット演算子 - JavaScript | MDN ビットマスクによるフラグ - piglovesyouの日記 状況としては、ユーザー設定のフラグをビットマスクで管理していて、それを API を通じて GET/POST する、という感じ。ここでは例として、アプリケーションのユーザー設定で、各種ソーシャル系サービスと連携するかどうかみたいなデータを管理する場合を想定する。 まず、各フラグのデータを 1、2、4、8… という整数値で定義しておく。こういったデータは定数として扱うのでキーを大文字にすることが多い、らしい。 var social = { TWITTER: 1, FACEBOOK: 2
Javascript/String.replaceメソッド - 俺の基地
単に置換する 文字列を指定して単に置換するだけです。 var hoge = 'abc'; hoge = hoge.replace('a', 'z'); //'zbc' 注意する点は最初にヒットした部分しか置換しないということ var hoge = 'aaa'; hoge = hoge.replace('a', 'z'); //'zaa' という動き こいつを全置換にしたい場合は gオプションを指定してやります var hoge = 'aaa'; hoge = hoge.replace('a', 'z', 'g'); //'zzz' ▲ ▼ 正規表現でヒットさせて置換 検索条件に正規表現オブジェクトも使えます var hoge = 'abc'; hoge = hoge.replace(/.c/, 'zz'); //'azz' ▲ ▼ 正規表現でヒットさせて置換 後方参照 キャプチャ利用版
Don’t docwrite scripts | High Performance Web Sites
April 10, 2012 5:29 pm | 32 Comments In yesterday’s blog post, Making the HTTP Archive faster, one of the biggest speedups came from not using a script loader. It turns out that script loader was using document.write to load scripts dynamically. I wrote about the document.write technique in Loading Script Without Blocking back in April 2009, as well as in Even Faster Web Sites (chapter 4). It look
)
効率的な JavaScript の記述 (HTML) - Windows app development
How you write your JavaScript code can have a big impact on your app's performance. Learn how to avoid common mistakes and how to architect your app for performance. Avoid unnecessary DOM interactions In the Windows Store app using JavaScript platform, the DOM and the JavaScript engine are separate components. Any JavaScript operation that involves communication between these components is relativ
Opera News
Gaming, Opera GX Get Exclusive In-Game Neverness to Everness Rewards Through GX Corner May 28th, 2026 Dreaming of coasting through Hethereau and combatting the supernatural with a jump-start on the game? We’ve got your back: Opera... Desktop Opera One gets a new and faster native ad blocker May 14th, 2026 We're introducing a major update to the native ad blocker in Opera One: a new and rebuilt eng
JavaScriptの動かないコード (中級編) 文字数のカウントに失敗する - 主に言語とシステム開発に関して
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： 入力された文字列の長さ（文字数）を取得する。 ここに入力して下さい：<input type="text" id="hoge" value=""><br> <input type="button" onclick="c()" value="文字数を数える"> <script> function c() { // 入力内容の文字列 var str = hoge.value; // 普通に文字数をカウント var len = str.length; // 表示 alert( len ); } </script> 入力に利用する文字列のサンプル： 叱られる 𠮟られる 発生する問題 問題の原因 解決策 発生する問題 「叱られる」は4文字だが， 「𠮟られる」は，なぜか5文字になる。
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrote: As a web developer, learning the internals of browser operations helps you make better decisions and k
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://jslinterrors.com/
コンマ付き数字文字列に変換する関数 - jsdo.it - Share JavaScript, HTML5 and CSS
地獄のJavaScriptセキュリティ
Constraint Validation: Native Client Side Validation for Web Forms - HTML5 Rocks
５ちゃんねる error 3001
JavaScript for Internet Explorer 9 Beta
