スポンサーサイト
2014.01.27 Monday
一定期間更新がないため広告を表示しています
- -
- -
- -
2013.05.02 Thursday
2012.10.06 Saturday
2012.10.05 Friday
第一引数 文字列又は関数オブジェクト
function test() { alert('test'); }; setTimeout(test, 1000);//1ms後実行 setTimeout(test(), 1000);//評価時に即実行 setTimeout('test()', 1000);//1ms後実行 setTimeout('test', 1000);//単なる文字列なので何も起こらない
第一引数が文字列の時evalされる。
引数を渡したいとき、
var str = 'str'; function test(arg) { alert(arg); }; setTimeout('test("' + str + '")', 1000); //一応可能 setTimeout(function(){test(str)}, 1000); //無名関数を渡せば問題無い
var arr = [1,2,3]; for(var i=0,len=arr.length;i<len;i++){ setTimeout(function() { console.log(arr[i]);//undefined×3 }, i * 1000); };
setTimeout内でarrにアクセスできていないのかと一見思った。 がiがブロックスコープの為このコンソールは全てarr[3]にアクセスし undefinedが返っている。
var arr = [1,2,3]; console.log(i);//undefined>条件式で定義されてるからエラーではない for(var i=0,len=arr.length;i<len;i++){ console.log(i);//0,1,2 setTimeout(function() { console.log(i);//3,3,3>ブロックスコープでは無い為 }, i * 1000); }; }; console.log(i);//3>条件式で3回インクリされた状態で残る var arr = [1,2,3]; for(var i=0,len=arr.length;i<len;i++){ (function(arg) { setTimeout(function() { console.log(arr[arg]);//1,2,3 }, arg * 1000); })(i); }; //クロージャにてスコープをキープ
forで回してDOM要素にアクセスしてイベントハンドリング。 参考までに画像を見込んだ順にフェードインするスクリプト。
<style type="text/css"> h1 { font-family: Helvetica, Arial; text-align: center; } #gallery { width: 95%; margin: 0 auto; padding: 5px; border: solid 1px #ccc; border-radius: 5px; } #gallery li { list-style-type: none; width: 200px; height: 200px; display: inline-block; background: url('load.gif') no-repeat center; } #gallery img { width: 200px; height: 200px; opacity: 0; } </style>
<h1>- gallery -</h1> <ul id="gallery"> <li><img src="1.png" /></li> <li><img src="2.png" /></li> <li><img src="3.png" /></li> <li><img src="4.png" /></li> <li><img src="5.png" /></li> <li><img src="6.png" /></li> <li><img src="7.png" /></li> <li><img src="8.png" /></li> <li><img src="9.png" /></li> <li><img src="10.png" /></li> <li><img src="11.png" /></li> <li><img src="12.png" /></li> </ul>
とりあえず、変数iをクロージャでキープ
onloadイベントの前に無名関数でスコープを作らないと
onloadが実行される時にはみんな同じiを参照してしまう、、、。
setTinerval内も無名関数のスコープで実行できる。
<script type="text/javascript"> var gallery = document.getElementById('gallery'); var elem = gallery.getElementsByTagName('img'); var timerId = []; var count = []; for(var i=0,len=elem.length;i<len;i++) { count[i] = 0; (function(arg) { elem[arg].onload = function() { timerId[arg] = setInterval(function(){fade(arg)}, 50); }; })(i); }; function fade(tar) { if(elem[tar].style.opacity >= 1) { clearInterval(timerId[tar]); } else { count[tar] += 0.1; elem[tar].style.opacity = count[tar]; }; }; </script>
こん度は頑張ってthisとか使ってみる。
そんで、ついでにmouseoverとかも追加してみる。
<script type="text/javascript"> function ImgObj(img) { var that = this; this.img = img; this.duration = 0.1; this.img.addEventListener('load', function() { that.fadeIn() }, false); this.img.addEventListener('mouseover', function() { that.fadeOut() }, false); this.img.addEventListener('mouseout', function() { that.fadeIn() }, false); }; ImgObj.prototype.fadeIn = function() { var that = this; if(this.fadeTimer) { clearInterval(this.fadeTimer); } else { this.opacity = this.img.style.opacity = 0; }; this.fadeTimer = setInterval(function() { that.chgOpacity(1) }, 50); }; ImgObj.prototype.fadeOut = function() { var that = this; if(this.fadeTimer) { clearInterval(this.fadeTimer); } else { this.opacity = this.img.style.opacity = 1; }; this.fadeTimer = setInterval(function() { that.chgOpacity(0) }, 50); }; ImgObj.prototype.chgOpacity = function(limit) { this.opacity = Math.round(this.opacity * 100) / 100; if(this.opacity == limit) { clearInterval(this.fadeTimer); } else { this.opacity += limit ? this.duration : -this.duration; this.img.style.opacity = this.opacity; }; }; var gallery = document.getElementById('gallery'); var elem = gallery.getElementsByTagName('img'); var imgObj = []; for(var i = 0, len = elem.length; i < len; i++) imgObj[i] = new ImgObj(elem[i]); </script>
クロージャなしでいけるのか?
しかしイベントリスナ部でthisを
使用するとそこはやはりそのイベント発生元のDOMを参照する。
setInterval内でのthisはwindowを参照する。
それでこのthisの参照が違うって聞くと、いよいよかっこよさげなapplyとか callが使えるの??って思って考えたけどよく理解していませんので 使い道が思いつきませんでした。
基本的にthisをローカル変数に代入してクロージャで参照するって感じでしょうか。
前から思ってたけどこういうイベントハンドリングみたいなのを クラスとか使う書き方が全くもってわからん。
なので我ながら
意味不明なコードになってます。
結局クロージャです。正直クロージャってのもあまり理解できていません。
なんか検索しようとするとメモリリークとかサジェストで出てくるし。
しっかり理解した方が良さそうさな。
2012.09.26 Wednesday
以下fileReaderに関するメモです。。
iPhoneってinput type="file"が使えなかったんですよね。
これ結構残念な仕様だなぁとずっと思ってました。
それがついに開放!
そしてこのブログでも長いことひっぱてますお絵かきアプリ、
以前作ってみた時、撮った写真にお絵かきできたらいいな、
と思ったのですが、
まぁ、まずファイルにアクセスできないし、ブラウザだけで
完結できないし、とか考えつつあきらめていたのですが、
iOS6にて両方いけるようになったのでとりあえず試してみました。
ちなみに1点残念な事がありまして、どーやらwindows版safariの
提供が終了してしまったようで、win safariはfileReaderが使えないまま
最後を迎えてしまったようです。。。
input type="file"ってそーいえばデザインどーする?!
とちょっとググってみたら、透明にして重ねる!みたいな記事が
結構ヒット。やっぱり同じ悩みを持つ方は結構いるんだなと。
html
<ul> <li>写真にお絵かき<input type="file" id="fake" /></li> <li>・・・・</li> <li>・・・・</li> <li>・・・・</li> </ul>
css
li { line-height: 75px; position: relative; margin: 0 auto; width: 320px; } #fake { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }一応webkit系であればli全体がクリックできた
var tar = $("#illustMenu li"); //input type file、fileReader使える?? if(!window.FileReader || $('#fake').get(0).disabled) $(tar[0]).css('display', 'none'); $("#illustMenu li").bind("click", function() { scrollTo(0, 0); var index = $("#illustMenu li").index(this); var myImg = new Image(); if(!index) { var $fake = $('#fake').get(0); $fake.onchange = function() { var file = $fake.files[0]; if(!file.type.match('image.*')) { alert('画像以外は読込めません'); return; }; var fr = new FileReader(); fr.onload = function() { myImg.src = fr.result; callback(); }; fr.onerror = function() { alert('読込めませんでした'); }; fr.readAsDataURL(file); }; } else { myImg.src = "img/illust/" + index + ".png"; callback(); }; function callback() { myImg.onload = function() { var iw = myImg.width; var ih = myImg.height; if(!index) { ・・・・・ ・・・・・ }; if(W > 600 && !retina) { ctx.drawImage(myImg, 0, 0, iw, ih); } else { ctx.drawImage(myImg, 0, 0, iw/2, ih/2); }; }; }; });とりあえずfileReaderが使えるか?input type fileが使えるか?
ではiPhoneで確認。
問題なくファイル選択画面登場。
適当な写真を選択。
まったくもってきちんと描画されない、、、、。
縦、横もおかしい。
ググってググってまたググって。
そこでふと思い出したMobileSafariのリソース制限。
これかぁ。
canvasにリサイズして書き出したくても
どーにもきちんと読み込まれない。
これはやっぱりimageオブジェクトで読み込んだ時
おかしくなってるのか??
上限35メガピクセル。
iPhone4sのカメラは800万画素で8メガピクセル。
ただ2メガピクセル以上はうんたらかんたら。
よくわからん。
さらにcanvasの上限は2メガバイト。
よくわからん。
まず4sで撮影したデフォルト画像はcanvasに書き出した際
おかしなことになる。さらに縦・横認識していない。
しかしフォトストリームから読み込むと問題なく書き出され
縦・横も認識される。
iPad2で撮影したデフォルト画像はcanvasに書き出した際
きちんと書き出されるが縦・横が認識されていない?
ただiPad2で4sで撮影したフォトストリームの画像は
問題なく書き出され縦・横も認識された。
3GSではフォトストリームの画像もおかしなことに、、、。
うーんよくわからん。
おそらくそのRAMとリソース制限の関係でしょうか??
描きだし時にバグるのはしょうがないとして
なぜ縦・横を認識しない?
ググってみると画像にはExifという画像の様々なデータ
が書き込まれたものがあると。なるほど。
そんでそれはバイナリデータで抽出可能。
なんともめんどくさそう。
fileapiに出会った時これは一体何に使うんだ?
と思っていったreadAsArrayBuffer。
バイナリデータを読み込めます。
まさか早速お世話になるとは。
JPEG画像からExif情報を抽出する
未知な世界のバイナリ。
ということでとりあえず上のコードをお借りして
いったんExifデータを確認させていただくと、
しっかりorientation6又は1となってる。
これで分岐すればとりあえず対応はできそう。
そのうちバイナリの勉強でもしよう。
まともには使えませんがとりあえず実装してみました。
それとあまり関係ありませんがgetImageDataで取得した
imageDataオブジェクトをputImageDataで描き出す際
変換マトリックスを適用する方法ご存知の方いませんでしょうか??
回転させたいだけなんですが、、、。ご存知の方コメントいただけたら
うれしいです。
いつもいつも簡単に終わるかなと思って取り掛かるんですが、
予想外の時間がかかってしまいます。
いい加減他の勉強を始めなければ、、、
2012.06.22 Friday
<div id="scratchBox"> <div id="cover"> <span id="back" class="btn"><<back</span> <span id="next" class="btn">Loading....</span> </div> <canvas id="can"></canvas> <canvas id="can_bg"></canvas> <canvas id="can_is"></canvas> </div>scratch.js、scratch.cssがまぁベースになりまして、
2011.07.11 Monday
<link rel="stylesheet" href="jquery.ts.css" type="text/css" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript" src="jquery.ts.js"></script>
<script type="text/javascript"> $(function() { $('a[rel^="ts"]').ts(); }); </script> //引数(オプション)はこんな感じにデフォルトでセットされてます↓ <script type="text/javascript"> $(function() { $('a[rel^="ts"]').ts({borderW: 20,underH: 50,speed: 500,type: 2,auto: false, timer: 6000}); }); </script>呼び出す画像はLightbox風に以下な感じで、aタグのrel属性に"ts"をセットします。 tsの後ろに[]で任意の名前を付けるとグループ分けしてスライドも可能です。
<a href="images/img1.jpg" rel="ts" title="画像1">画像1</a> <a href="images/img2.jpg" rel="ts[group1]" title="画像2">画像2</a> <a href="images/img3.jpg" rel="ts[group1]" title="画像3">画像3</a>
DEMO
2011.04.20 Wednesday
2011.02.07 Monday
2011.02.07 Monday
func();//func文静的っつーのがピンっとこないのですが、
var func = function() {//無名関数を変数に代入
alert('無名func');
};
function func() {//function文
alert('func文');
};
func();//無名func
var exec = function() {こんな書き方するのかしないのかわかりませんが、
if(document.getElementById('id')) {
func1();//こっちはエラー
function func1() {
alert('func1');
};
function func2() {
alert('func2');
};
func1();//こっちはOKでした
};
};
var exec = function() {とりあえずこんな感じで回避。
if(document.getElementById('id')) {
(function() {
func1();//エラーなし
function func1() {
alert('func1');
};
function func2() {
alert('func2');
};
func1();
})();
};
};
2011.01.19 Wednesday
if(navigator.userAgent.indexOf('MSIE') != -1) {的な感じでIE6,7,8(でしょうか???)を処理しとかないと、
iebrows = true;
};
if(iebrows) {
imgElem.src = imgsrc[i] + "?" + new Date().getTime();
} else {
imgElem.src = imgsrc[i];
};
imgElem.onload = function() {
//処理
};