JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
Photobooth.js
$('#example').photobooth().on("image",function( event, dataUrl ){ $( "#gallery" ).append( '<img src="' + dataUrl + '" >'); }); container = document.getElementById( "example" ); gallery = document.getElementById( "gallery" ); myPhotobooth = new Photobooth( container ); myPhotobooth.onImage = function( dataUrl ){ var myImage = document.createElement( "img" ); myImage.src = dataUrl; gallery.appendChi
初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ
初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。 初めてのお仕事として「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、２週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 ということで、Titanium Mobileで試しにアプリ開発をしてみた感想を書いてみました。 そもそもTitanium Mobileとは？ Titanium Mobileとは、Appcelerator社によるスマートフォン対応アプリケーションの開発環境です。 iPhoneやiPad、Androidを
Jquery.a3d.js | JavaScriptからCSS3キーフレームアニメーションを自在に操れる。３Dにも対応
複雑なアニメーションを簡単＆シンプルに実装できます CSS3キーフレームアニメーションをJavaScriptから動的に使用するためのプラグインです。また、CSS3アニメーションを強力に機能拡張することができます。 機能 JavaScriptのプログラムから、CSS3のキーフレームアニメーションを動的に生成できます キーフレームにおける任意のタイミングでJavaScriptのコードを発火することができます。 キーフレーム情報、エフェクト情報、アニメーション情報を分離して管理することで、複雑なアニメーション制御をシンプルに記述できます。 複数のキーフレームアニメーションを連鎖させる事ができます 絶対位置指定、相対位置指定をサポートします。（エレメントの現在地点から前へ１０PXといった指定が可能） 対応ブラウザ Firefox, Chrome, Safari, Opera ,IE10 使い方 基
「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTML5/CSS3で新たに使える機能がブワッと増えたわけですが、 新機能に対応している環境というのはまだまだごくわずかです。 ということは、機能が使えるor使えない場合に処理を分けたりしなければいけないわけで。 「Modernizr」は、それを支援してくれるJavaScriptライブラリです。 Modernizr 「Modernizer」ではなく、「Modernizr」。 eが欠けている点に注意。Flickrみたいな感じ。 Modernizrがしてくれる事は、ただ一つの単純な処理です。 閲覧しているブラウザが、或る機能に対応しているかどうかをJavaScriptで判別し、 その結果をhtml要素のclassという形で教えてくれます。 例えば、box-shadowに対応しているかどうかを知りたい場合。 Modernizrを読み込
Grid-A-Licious
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念
おそらく、JavaScript を使いこなす肝は setInterval、setTimeout、イベントによる関数の実行を理解することだと思う 例えば 次のコードの結果を考えたとき document.write("hoge\n"); setTimeout(function(){ document.write("fuga\n") }, 1000); document.write("piyo\n");普通に JavaScript を使いこなしてる人なら、hoge → piyo と表示して、 1 秒後に fuga が表示されるな。って思うはずなんです。 でも、 JavaScript を始めたばっかりの人の中には、 hoge と表示したあと 1 秒後に fuga → piyo と表示するな。って思ってる人が非常に多い。(経験的に) 何故か？ たぶん、どのサイトの setTimeout の説明を見て
クロスドメインでiframeの高さを自動調節するjavascript
クロスドメインでiframeの高さを自動調節するjavascript 年末から異なるドメイン間でiframeの入れ子になってる方の高さを自動調節する方法を考えていました。 ＜参考＞ クロスドメインでiframeの高さを自動調節する方法iframeの高さをコンテンツにあわせるwindow.postMessage() を使って、クロスドメインの iframe の高さを設定する検証1の文章中に、"クロスドメインでの確認はしていませんが、恐らく大丈夫じゃないかと思います。（駄目だったらごめんなさい。）"なんて書いてあるので期待したら、 https://github.com/house9/jquery-iframe-auto-height SummaryにWill NOT work if the iframe contains a page from another domainって書いてあります。
[JS]かなりかっこいいアニメーションを使ったスライドショーを実装するチュートリアル
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ：別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要
document.writeを使った遅いブログパーツ（例えばzenback）を非同期化してサイトを高速表示する方法 | ゆっくりと…
広告やソーシャル系のサードパーティー製ブログパーツを張りたいんだけど、サイトの表示速度が遅くなるのって我慢なりませんよネ。こういったブログパーツの多くが JavaScript で作られています。自サーバーに設置したスクリプトならまだ手の打ちようはあるし、本サイトでも JavaScript 読み込みを高速化するための非同期化ネタを幾つか扱ってきました。例えば Google Analitics の非同期トラッキングスニペット や LABjs、HEAD JS などの非同期ローダーが有名なところでしょう。 ところが困ったことに、こういったサードパーティ製スクリプトに document.write が使われていると、Google Analitics のようなテクニックや非同期ローダーでは、ほとんどの場合でページが白紙となってしまい使えません。Twitter や Facebook など超有名どころは既
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
CanvasとPhoneGapで作るiPhone用落書きアプリ (1/4)
HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、HTML5で作成したWebアプリケーションを、PhoneGapを使ってiPhoneアプリに変換してみましょう。 本連載では以前、HTML5で作ったWebアプリケーションを、「NimbleKit」でiPhoneアプリに変換する方法を取り上げました。 この記事では、PCのブラウザー向けに作成したお絵かきアプリを、iPhoneアプリに移植しました。多少の変更は必要でしたが、比較的すんなりと移植できたケースです。 このiPhoneアプリでは、NimbleKitのスライダー機能を使ってペンの色を指定しましたが、残念ながらPhoneGapにはNimbleKitのように手軽に使えるスライダー機能がありません（jQuery UIもしくはjQuery Mobileのようなライブラリーを利用すれ
jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECT
ちょっとお洒落なプリローダーを探してた という方の参考になるかな・・と思ったの と、自分でも使いたかったので備忘録です。 アニメーションエフェクトが素敵なプリ ローダー・CUSTOM PRELOADER EFFECTの ご紹介です。 エフェクトはjQueryとeasingで動かし、エレメントはcssで作成しています。コードも軽量で分かりやすいし、エレメントはcssベースなのでなかなか使い勝手がいいんじゃないかと思います。 動きがなかなか素敵なんでｓ・・と言われても動き見ないとですよね。以下、公式サイトのサンプルです。 Sample ドットはcss3でサークル上を形成、位置はランダムとなっています。 コード<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javas
Learn to Code - for Free | Codecademy
Get personalized job listings and practice interview questions
JavaScriptをブラウザ上で開発、その場で実行できるJSBinがオープンソースで公開されてたのでインストールしてみた
基本的にはjsfiddleメインなんですが、 依存するのが基本的に不安なのでロー カル環境で同じような環境を作りたか ったのですが、同様のサービスのJSBin がOSSで公開されてましたので試しに インストールしてみました。 まだちゃんと使うかは分かりませんけど、折角入れてみたので手順をメモ書き。 以前、ブラウザ上でjsを開発、URLを発行するjsfiddleをご紹介しました。jsDoitみたいなやつですね。 で、この2つ以外にも以前からJSBinっていう同じようなWebサービスがあるんですが、このJSBinがオープンソース（MIT）で公開されています。 見た目も自分用に使いやすく変えられるし、開発もスニペットの保管も出来るかなと思って、試しにローカル環境に入れてみました。 左側にJavaScriptコードやHTML、CSSを書けば、右側に結果として反映される、みたいなやつです。 JSBi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cssrefresh.frebsite.nl/
crocos.jp
stroll.js - CSS3 Scroll Effects
jobyj.in