JavascriptのPage Visibility APIを使うことで現在閲覧しているWEBページが 開いているかどうか確認することができる。 詳しいことは以下のサイトから参照 Page Visibility API の使用 - Web developer guide | MDN 利用シーンとしては･･･ ブラウザのタブ機能を利用して複数の動画を再生。結果的にサーバに負荷が掛かり、他の利用者に迷惑かけてしまう。 画像を順次表示しているサイトで、ユーザがページを見ていないのに次のスライドへ進むべきではないもの ブラウザメールで、開いている時に数分毎メールサーバへ問い合わせを行い、新しいメールをチェックしたいとき 利用者から見えなくなっている（離れている）間は ゲームを停止する など･･･色々使えそうですね。 Page Visibility APIを利用すれば、Web ページが見えていないと

目次 人気のある Module パターンを見てみよう。Module パターンは JavaScript 「クラス」のアイディアのためにパブリックとプライベートの両方のカプセル化をおこなうための方法を提供する。実際には関数として定義されている「クラス」を前提にこれらは機能する (簡潔性のために用語をクラスにそろえて説明する)。 このクラスに対して使うと決めたパラメータは実際にはクラスのパラメータである。クラス内部で定義されたローカル変数と関数の両方はプライベートメンバーになる。クラスの retrun メソッド (関数でもある) はパブリックなメソッドと変数を含むオブジェクトを返す。 ちょっとしたトリビアは Module パターンは Douglas Crockford (著書の JavaScript: The Good Parts などで知られる) によってオリジナルかつフォーマルに定義されたと

enchant.jsで重要なスプライトとシーンを使うには：enchant.jsでHTML5＋JavaScriptゲーム開発入門（3）（1/4 ページ） 大人気のHTML5＋JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく。今回は、スプライトの3つの基本操作、スプライトシート、シーンの扱い方を解説。最後に「もぐらたたきゲーム」を作ってみよう

ある要素に無名関数でイベントが設定されているけど、そのイベントを発生させたくない！でも要素は消したくない！ということがあったのでJavaScriptのイベントについて少し調べてみました。 具体的には、ある要素がtouchmoveの中でpreventDefault()しているためその要素の上だとタッチスクロールが出来なくて不便なのでどうにかしたいという状況でした。 preventDefault() preventDefault()はその要素に設定されているブラウザの規定のアクションを中止する関数です。 タッチスクロールも規定のアクションに含まれます。 https://developer.mozilla.org/ja/DOM/event.preventDefault イベントのキャプチャリングとバブリング DOMのイベントには、キャプチャリングフェーズとバブリングフェーズという二つのフェーズが

こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。 アニメーションの前提知識 HTMLにおける通常のアニメーションを構成するのは、「⁠特定の要素」に対して、「⁠そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「⁠ある値からある値に操作」する、といった要素です。 特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。 まず、単純にインクリメントするだけというサンプルを見てみましょう。 良くないアニメーション var y = 0;

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h

はじめに JavaScriptはオブジェクト指向言語です。しかし、そのオブジェクトの性質は、他に良く知られているオブジェクト指向言語のJavaやC++と大きく異なっています。 そこでこの記事では、なぜそのような違いがあるのか、JavaScriptにおけるオブジェクト指向の言語思想を見ていくと共に、その違いの根幹であるプロトタイプについて解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語（JScript、ActionScript）でも通じる内容になっています。 対象読者 プログラミングの基本的な知識、ならびにオブジェクトやメソッドと言った基礎的な概念については、ここでは解説しません。最低限、オブジェクト指向プログラミングについて理解をして

JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう

ようこそのお運びで、厚く御礼申し上げます。 さてさて、いろいろと勉強会などに参加させて頂きますが、私の場合は懇親会とネタ集め目的でして、今回はこんなものをがアンテナに引っかかりました。 「JavaScriptのMVCフレームワーク」 ごめんなさい。今頃「へぇー」とか思ってしまいました。なのでちょっと勉強してみます。 今回の目次 どうしてフレームワークを使うのかな？ 何を使えばいいのかな？ Backbone.jsを勉強する 今回のまとめ どうしてフレームワークを使うのかな？ 私は基本サーバーサイドのプログラムを書いていますが、CakePHPにしろRuby On Railsにしろ書けたところで、単純なプログラムの場合は別にフレームワークを使う必要はないんですよね。 ※近頃フレームワークしか使えない人種が増えてるってホント？？ JavaScriptのフレームワークって何か意味って 複数のWebブ

JSON Editor Online JSON Editor Online is the original and most copied JSON Editor on the web. Use it to view, edit, format, repair, compare, query, transform, validate, and share your JSON data. About JSON Editor Online JSON Editor Online is a versatile, high quality tool to edit and process your JSON data. It is one of the best and most popular tools around, has a high user satisfaction, and is c

Our core library. Includes all standard chart types and more.