[JavaScript] 今さらながらrequestAnimationFrameをもう一度
JavaScript でループ処理を行うための関数のひとつ requestAnimationFrame。 今さらながら調べ直してみた。 調べなおすきっかけは three.js REVISION: ’63’ のソースを眺めたから。 ループ処理を行うための他の手段は時間ベースの2つの関数です。 setTimeout, setInterval 今では setTimeout, setInterval は非効率で requestAnimationFrame が実装されているブラウザでは使うべきでは無いと言われています。 IE にも実装され microsoft のサイトで解説を見ることができます。 ie.microsoft.com: requestAnimationFrame API MSDN: Timing control for script-based animations (“requestA
![[JavaScript] 今さらながらrequestAnimationFrameをもう一度](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c35180033ae4020a0e0c1b662cd0d153d918e3f/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2F_fb%2Ffb_inazumatv2.png)
JavaScriptでgetter/setter、いけてるブラウザでね
無知をさらけ出すようで恥ずかしいけどJavaScriptでもgetter/setterが実装されてる様子。 IE 8以下を切り捨てる条件付きだけど… MDN: get MDN: set MDN: Working with Objects MDNのブラウザ実装状況を見る限りクズなIE 8以下を切り捨てればモダンと言われているブラウザでは使える模様。 普段IE 6の面倒を見る仕事ばかりやってたので気づかなかった。 ( function ( window ){ "use strict"; function GetterSetterTest () { this._insert_area = document.getElementById( "insert_area" ); } GetterSetterTest.prototype = { constructor: GetterSetterTest,
FN1305001 - Lo-Dashユーティリティライブラリを使ってみる - HTML5 : テクニカルノート
Lo-Dashは、配列やオブジェクトの細かな扱いができるユーティリティライブラリです。JavaScriptに定義されているのと同じメソッドでも、対応するブラウザのバージョンが拡げてあったり、複数組合わせて呼出せたり、心配りが行き届いています。さらに、機能も多くて速いです。本稿では、Lo-Dashの使い方を簡単にご説明します。 なお、Lo-Dashユーティリティのダウンロードについては、Lo-DashサイトのDownload欄をご覧ください(図001)。 図001■Lo-Dashサイト 01 配列を扱う Lo-Dashサイトの冒頭で紹介されているメソッドに、_.forEach()と_.map()があります(前掲図001)。これらのメソッドはともに配列が扱えます。 まず、_.forEach()メソッドは、第1引数に配列を渡すと、すべてのエレメントを順に第2引数の関数に引数として渡して呼出します
window.onloadの代替スクリプト
Updated Entry: http://p2b.jp/200805-events-order 今日は七夕Wですね。小学生の頃は、学校総出で「♪笹の葉さーらさら〜」ってやって、七夕伝説に思いを馳せたものですが。いつになってもガキの頃の心を忘れない大人でいたいものです。 さて、Ajaxの隆盛によって、その根幹であるJavaScriptはブログに欠かせないものとなっています。ppBlogも例外ではなく、至るところで活躍してます。一般にブログの(トップ)ページは、色々な情報を詰め込んでいるために、ファイルサイズは大きくなる傾向にあり、また、画像も至るところで使われるために、読み込むべきコンテンツサイズは更に大きくなります。ブロードバンドが当たり前の今日でもページの表示にちょっと待たされるのは珍しいことではありません。で、JavaScriptは(画像も含めた)ページの内容物が全部読み込まれた後に
setTimeoutの基本
setTimeoutは、実行された時間より、指定されたミリ秒待機して実行します。ブラウザから提供されているAPIであり、ECMAScriptの仕様の範囲外です。JavaScriptのsetTimeoutは、ブラウザの実装を知っていると広く応用の効く命令となります。 待機してから実行する命令にはsetIntervalとsetTimeoutがありますが、setIntervalは使いづらいので特別な理由のない限り使わない方がよいでしょう。例えば var cb = function() { var d = new Date(); document.body.innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); if(d.getSeconds() == 0) { clearTimeout(id); } }; v
画像や外部.jsファイルの読み込み完了のタイミングを知る - とくにあぶなくないRiSKのブログ
簡単な答え onload を使いましょう。 JavaScript var img = new Image(); img.src = "hoge.png"; img.onload = function() { alert("読み込み完了"); } document.body.appendChild(img); var script = document.createElement('script'); script.src = "fuga.js"; script.onload = function() { alert("読み込み完了"); } document.body.appendChild(script); HTML 参考までにHTMLも。 <img src="hoge.png" onload="alert('読み込み完了');"> <script src="fuga.js" onloa
JavaScript でタイマーを使う(setInterval(),setTimeout()) | Try Lifelog
JavaScript でタイマーを使う。JavaScriptでは、｢一定時間後｣に処理を行う setTimeout() と、｢一定時間ごと｣に処理を行う setInterval()の2つが用意されているが、今回は繰り返し処理を行いたいので、後者を使う。 setInterval()でやりたい処理と間隔を指定し、clearInterval()で繰り返しを中止する。 var timer; window.onload = function(){ timer = setInterval('hoge()',1000)); // 1000ミリ秒ごとに実行したい処理hoge()を登録 } function stop(){ clearInterval(timer); // 繰り返し処理を中止する } function hoge(){ // 一定時間ごとにやりたい処理 } setTimeout()を以下のよう
setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵
なかなかどうして、怠惰な若輩者につき不明な点が多々あるため先人の知恵をお借りしたく候。というわけでいろいろ知恵や知識などいただきます。・・・消化不良でしたorz setTimeoutの中の小難しいお話 自分だけじゃ到底調べられないし分かる術もない。Cなんて知るか。だのにこうしてなんとなくでも知ることができるのはありがたいことです。 http://labs.gmo.jp/blog/ku/2007/09/firefoxsettimeout.html Firefoxだけで少し古い記事だけど今でも同じようなものかな。他に私がわかるような資料もないのでこちらをベースに考えさせてもらいます。大きな変更はないだろうし。 タイマースレッド URL先読んだだけではイメージできなかった。整理のため箇条で要約。 Firefoxにはタイマー処理だけを管理している専用のスレッドがある（TimerThread） タイ
HTML DOM Nodes
DOMでは、HTML文書のすべてはノードです。 DOMノード DOMに従えば、HTML文書のすべてはノードです。 DOM風に言えば: 文書全体は文書ノードです 全てのHTMLタグは要素ノードです HTML要素のテキストはテキストノードです 全てのHTML属性は属性ノードです コメントはコメントノードです DOM 例 以下のHTML文書を見てください: <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html> 上記HTMLのルートノードは、<html> です。 文書内の他の全ノードは、 <html> 内に含まれます。 <html>ノードは、<head>と<body>の2つの子ノードを持っています。 <head>ノードは
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
JavaScriptでDOMに挑戦：初心者のためのJavaScript入門（7） - ＠IT
HTMLをドキュメントオブジェクトとして扱うための約束事「DOM」を、JavaScriptを通して使うことで、HTMLの好きな部分を読み書きすることができます。 連載の前回、「第6回 配列とオブジェクトでデータをまとめる」では、配列とオブジェクトの基本的な扱い方を説明しました。扱うデータの量が少ないうちは、普通の変数だけでなんとかなってしまいますが、データの量が増えれば増えるほど、配列やオブジェクトのありがたみが分かります。 特に、配列に入れたデータを、ループで一気に処理する快感が分かるようになれば、初心者卒業といってもいいでしょう。 それでは、前回の課題の答え合わせをしてみましょう。平均点の求め方は、配列のサンプルでやっていたので簡単すぎたでしょうか。解答サンプルでは、成績の一覧と平均点を同時に表示するようにしてみました。 <html> <body> <script type="text
piyo-js.com - このウェブサイトは販売用です！ - 初心者 入門 リファレンス リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
DOM入門
DOM (Document Object Model) は Web ページの構造とそこに含まれるデータを取り扱うために用意された仕組みです。 DOM を利用することで Web ページに含まれるテキストや属性の情報を読み出したり、 Web ページが読み込まれたりボタンがクリックした時の実行する処理を定義したり、新しい要素を Web ページに追加や削除したりすることができます。ここでは JavaScript から DOM を利用する方法について解説します。 ※ イベント処理に関しては「イベント処理」を参照されてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.crystal-creation.com/web-appli/technical-information/programming/javascript/event/handler/onload.htm
Dynamic HTML（クライアントサイドスクリプトやIE固有のプログラム要素も含む）
JavaScriptプログラミング講座【ドキュメントについて（HTMLDocument）】
HTML DOM Properties and Methods
HTML DOM Tutorial
【javascript】firstChild.nodeValue と innerHTML at softelメモ
HTML DOM Introduction