スポンサーサイト

2014.01.27 Monday

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

AnimalPuzzle

iPhone用webアプリ兼Androidアプリ作ってみました。

センサーをしようしたパズルゲームです!

良かったら試してみて下さい!!

iPhone用→AnimalPuzzle
safariでアクセス>下の真ん中の矢印タップ>ホーム画面に追加で簡単インストール?
よろしくお願いします!

Android用→AnimalPuzzle
GooglePlay
続きを読む >>

全然まとまってないのですが、まとまりそうもなく

また早くアウトプットして次にいきたかったのでメモを記事に。

前々回記事にしたアプリについて今ひとつ納得できない。

ふとcanvasの画像をiPhoneのカメラロールに保存ってできないかなぁ、

そーいえば画像は普通に長押しすれば保存ができるじゃん。

がしかし、スタンドアロンモードって色々制限されるんでしょうか?

まずimg要素長押ししてもうんともすんとも。

しょうがないからbase64をaタグにてリンクさせてみたけど

遷移しないし。

こーなったらblobを作成してクリックしてみたけど

これまたうんともすんとも。

blobリンクに関しては通常のsafariでもリンク先にいけませんでした。

う〜ん。

createObjectURLとはなかなか便利そうですが、

iOS対応しているのでしょうか???

Blob、ArrayBuffer、とかよくわからんなぁ。。。

なんか色々できそうですが、、、。

いずれまた改めて勉強したいと思いますので

これ以上考えるのはとりあえずやめよう。

今回のテスト内容は一応こちら

参考
Ajax:画像を取得して表示する(Firefox): Script雑感
XMLHttpRequest2 に関する新しいヒント - HTML5 Rocks

setTimeout

第一引数 文字列又は関数オブジェクト

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);
//無名関数を渡せば問題無い

for文 条件文のiとスコープ

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);
};
//クロージャにてスコープをキープ

DOMアクセス

forで回してDOM要素にアクセスしてイベントハンドリング。 参考までに画像を見込んだ順にフェードインするスクリプト。


DEMO


css
<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>
html
<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をローカル変数に代入してクロージャで参照するって感じでしょうか。

前から思ってたけどこういうイベントハンドリングみたいなのを クラスとか使う書き方が全くもってわからん。

なので我ながら 意味不明なコードになってます。

結局クロージャです。正直クロージャってのもあまり理解できていません。

なんか検索しようとするとメモリリークとかサジェストで出てくるし。

しっかり理解した方が良さそうさな。


iOS6がリリースされiPhone5が発売されました。

いままでスマホなんてまったく興味がなかったのに。

まったく興味がなかったので4の発売直前に

3GSを買ってからだんだんとiPhoneの魅力に、、、。

それ以来この発表が楽しみになってしまいました。

すごいなapple。

現在JB4Sを使用中ですが5は見送りま〜す。

欲しいですが。

ちなみにちょっと友達の5使わせてもらったんですが、

処理がメッチャ早い!そして軽い!すごい!

iOS6よりinput type="file"が使える!fileReaderも使える!

以下fileReaderに関するメモです。。


iPhoneってinput type="file"が使えなかったんですよね。


これ結構残念な仕様だなぁとずっと思ってました。


それがついに開放!


そしてこのブログでも長いことひっぱてますお絵かきアプリ、


以前作ってみた時、撮った写真にお絵かきできたらいいな、


と思ったのですが、


まぁ、まずファイルにアクセスできないし、ブラウザだけで


完結できないし、とか考えつつあきらめていたのですが、


iOS6にて両方いけるようになったのでとりあえず試してみました。


ちなみに1点残念な事がありまして、どーやらwindows版safariの


提供が終了してしまったようで、win safariはfileReaderが使えないまま


最後を迎えてしまったようです。。。


まずはinput type="file"のデザインをCSSでこっそり隠す

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全体がクリックできた

のですが他ブラウザは(あまり確認してませんが、、、)デフォルトの

ボタン部分をちゃんとクリックしないと認識できなかった為

かなり危険なデザインです。はい。


ファイルを選択してcanvasへ描き出す


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が使えるか?

使えれば「写真にお絵かき」メニューを表示する。

onchangeイベントにて以下実行。

fileapiにてファイルにアクセスしてfileReaderで読み込む。

readAsDataURL()メソッドでDataURLスキームに変換して読み込む。

そしてonloadイベントで画像サイズを調整してcanvasに描画。

OK。以外とあっさり。よかった。

PCで確認する分には。



ここからどっぷりはまりました、、、、。

では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で描き出す際


変換マトリックスを適用する方法ご存知の方いませんでしょうか??


回転させたいだけなんですが、、、。ご存知の方コメントいただけたら


うれしいです。


いつもいつも簡単に終わるかなと思って取り掛かるんですが、


予想外の時間がかかってしまいます。


いい加減他の勉強を始めなければ、、、



 最近音楽系アプリが楽しくてしょうがない。

とりあえずielectribeとnanostudioを入れてみんだけど、

すごすぎる!昔一生懸命お金貯めて買った機材の 2割 2%くらいの値段で

同じようなことが、、、

そんでせっかくだからHTML5でBGM再生しようと思ったんだけど

どーにもループがうまく出来ない。なぜ?

途切れるんですよ、繋ぎ目で。

なんかいろいろ試したけどsetTimeoutで交互に繋げるのが

一番スムーズになったみたい。

でもiOSではまだ1音しか鳴らせないし。

なんかもっとスムーズに繋げる方法どなたかご存知ないでしょうか??


そんで全然関係ございませんが、なんとなく今更jQtouchって

どんな感じかしらと思って使ってみました。

なにを作ろうかと考えてまたもやHTML5、CANVASにてスクラッチカードもどきを作成。




safariかChromeじゃないとうまく表示できません!

4 / 6同じ絵柄です。2箇所まで削れて、絵柄が合えば貯まっていきます。

3箇所以上削る、絵柄が揃わないと消えます。

scratch card

cake_scratch
デフォルト
とりあえず普通に画像がシャッフルされます

default_scratch
カスタム
cakeがかわいい

probability
確率変動??
1箇所スクラッチで画像ごとに50%、30%、10%、8%、2%と出現確率を設定しました
社内SEにょえのブログ参考に
させていただきました。

コード

scratch.js
default_scratch.js
scratch.css
<div id="scratchBox">
        <div id="cover">
            <span id="back" class="btn">&lt;&lt;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がまぁベースになりまして、

default_scratch.jsにて各種設定を指定して実行しています。

default_scratch.jsとscratch.cssを少しいじりまして上のスクラッチを作成してみました。

引数の説明はdefault_script.jsファイルに記載してあります。

canvasを3枚重ね、1枚目にスクラッチ部分を描き、2枚目に画像を配置、3枚目にパスを描き

そこでisPointInPathにてどこが削られたか判定しています。

案の定retinaディスプレイに少々躓きました、、が大分なれてきました!

画像を倍で作成し、半分で表示ってやつですが、同じようにcanvasもscale(2,2)にて

半分表示を行っているのですが、タッチ座標を取得する3枚目もscale2倍にして

悩んでしまいました。。

勉強がてら無理してクラスを使って作ったまとまりのないコードになり、

大分前に中途半端に作成したものを、再度作り直したりしたので、

かなり無茶な部分も多いと思いますがよかったら使ってみてください。

ちょっとずるもできちゃいますし、コードに関しても責任は持てませんが、、、。

canvasとコールバックで出てくるページに背景画像を

指定して、スクラッチ分のお好きな画像を用意し、指定すれば結構簡単にカードがつくれます!

色々素材も作ろうと思ったんですが時間がなくてできませんでした!!

とりあえず作ったドットのパターン素材だけ

ドット

さみしい。いずれもっと増やしたい。

チェックのパターン素材は

Tartan Designer

この素晴らしいサイトで作成できます。

かわいいケーキのイラストは素材庭園さんよりお借りしました。

jQtouch

そんでそれをアプリの一部的な使い方ができるかなぁとか思い、jQtouchに組み込んでみました。

icon

iPhone,iPadの方はこちらからどうぞ。

一応iPhoneのフル画面に最適かしていますので

下のツールバー分ちょっと狭い感じですが、、、、。

以前jQueryMobileを使ってみたのですが、正直自分的にはjQueryMobileの方が良かったです。

いろいろカスタムもしやすそうだったし、情報も多かった。

jQtouchはあまり活発ではないようですね。

がしかし、一瞬でiPhoneサイトが完成します!

すばらしい!

スマフォ最適化の勉強中ですがアンドロイドを触ったことがない!!

うーんほしい。いろいろ試してみたい。

けどこれからはデータベースの勉強に没頭しよう。

jQueryの理解を深めようと

いつもながらほかにいくらでもありますが、 勉強がてら超シンプルな

へぼいLightbox風スライドショー?のプラグインを作ってみました。

jquery.ts.js

jquery.ts.css

こんな感じで動きます

まずjQueryは下記のような形でグーグルのAPIを利用しても読み込むことができます。 ダウンロードとかしてこなくていいからお勧めです。 jquery.ts.css このスタイルシートと、jquery.ts.js このスクリプトを保存して、 サーバーにUPして読み込みます。下記はhtmlファイルと同じフォルダに置いた場合です。 ちなみにスクリプトはjQueryの後に読み込みます。
<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>

head内などまぁどこでもいいですがjQueryとスクリプトを読み込んだ後に下のコードを記述します。
<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

GROUP

水族館 水族館 水族館 水族館 水族館 水族館

SINGLE

humberger
引数の内容は
borderW→確か画像周りの縁の太さ
underH→マウスオーバーで出る下の部分の高さ
speed→アニメーションスピード
type→アニメーションタイプ(1か2か3だけです)
auto→グループ画像の自動スライド(true 又は false)
timer→自動スライドの間隔
です。
古いIEでも一応動きそうです。それとiPhoneも崩れなそうです。でもiPhoneだけです。
画像など使ってないので、jqueryとjquery.ts.jsとjquery.ts.cssを読み込んで
後は $('a[rel^="ts"]').ts();を呼び出すだけでOK!簡単、単純!
アンカータグのrel属性にtsをセットすればOK!
tsの後ろに[group1]など任意にグループ作成ができます。
アンカーのtitle属性にセットした値がマウスオーバーの際下に表示されます。
画像のパスとかよくわからないとかそういう方にはお手軽かもしれません!

そもそも

ajaxを勉強しようと思ってはじめたのがきっかけでしたが脱線しまして、、、
jQueryの構造やprototypeなどを少し理解したいと思いましたが、やはり意味不明です。
意味不明ですがなんとか動かすことができてしまうからjQueryは凄いなぁ。。
いまだprototypeがどーやって活躍するのかいまひとつわかりません!
こんな感じのスクリプトには必要ないのでしょうか??
あるいは使うと効率やらメモリ消費やらがよくなったりするの?
仕事が終わらなくなるのであまり深く考えるのはやめよう。。。

ということで素人の、良いものではありませんが
よかったら試してみて下さい。

サイ本読みました

2011.04.20 Wednesday

ウソです。

読んでません。見ただけです。

第一部、はりっきてスタートです。
8章クロージャあたりからでしょうか、貧乏ゆすりが始まりました。
9章クラスとコンストラクタとプロトタイプで多少落ち着きを取り戻し、
が、しかしスーパークラスとサブクラス辺りで貧乏ゆすりが悪化。
10章は眺めて終わりました。

第二部のスタートは多少なじみのある単語などもでてきて希望が見えてきました。
が、しかし仕事が忙しく、ひどい睡魔に襲われまったく頭に入らず無理やり進めました。
15章辺りからは太字のみの鑑賞。英文でも読んでいるかのごとく、まぁ大体こんなことを
いってるのであろう、状態。ひどいです。

そのうち時間できたらゆっくり読みたいな。。。

サイ本を読んだ(ウソ)記念に、参考にしつつブックマークレットを作りました。

サイ本読んだ記念ブックマークレット

右クリックでリンクをブックマークしてください。
こっそり実行してPCをそのまま置いておいてください。

クリックすると要素が消えていきます。
重いサイトだと動作も思いです。

このしょーもないブックマークレットがあのサイ本を読んだ、
今の僕にできる結果となってしまいました。

はい、では仕事に専念します。


javascript入門

2011.02.07 Monday

javascriptを勉強し始めて(初プログラミング)思ったのですが、
まずオブジェクト指向というものの理解に大変苦しみまして、
いまだ理解できず。それとprototypeってのも難しい。。。
しかしjavascriptのサイトなんかみてると
javascriptはオブジェクト指向です!!
みたいな記載が最初の方にあるのでとっても遠い存在に感じつつ。

どうにか少しでも理解しよう!本を一冊買おう!
と本屋に行き目に入った入門書を何も考えずに購入。
アマゾンでもなかなか微妙な評判。
確かにこれ難しい。プログラミングの全くの初心者の私には何度読んでも
理解できませんでした。。。
が、しかしこれがプログラミング、
みんなこれを10日で理解してしまうのか、
切ない気持ちになりつつもまぁ頑張れました。

今思えばオブジェクト指向とかprototypeとかって
きっととても便利な部分かつ核になってくるのかもしれませんが、
正直ちょっとしたDHTMLみたいなのには、
はっきり言って必要ないんでない??
その辺自分ほぼ理解していませんが、、、。
イベントごとに関数並べて、グローバル変数並べて、prototypeに
挑戦するならObject.prototypeが便利そうだし、、、、。


結論
jQueryを勉強しよう!!

まず無名関数とfunction文の違いなんてあんまり考えてなかったのですが、、
無名関数を使うメリットは何ですか?
この疑問凄い同感!って思ってしまいまして。

確かにfunction文で名前付けるか、
無名関数を変数に代入するかでどっちにしても名前使うじゃん。

そんでちょっと検索して
javascript関数宣言の落とし穴
こちらのブログを見てなんだか難しいなぁと思いつつ考察してみました。

func();//func文
var func = function() {//無名関数を変数に代入
alert('無名func');
};

function func() {//function文
alert('func文');
};
func();//無名func
静的っつーのがピンっとこないのですが、
まぁfunction文は静的に解析されてグローバルオブジェクトか
callオブジェクトのプロパティに設定される。
だから定義前でも呼び出せるということにしておきました。

そんで無名関数は式なので代入時に定義される。
なんとなくわかるような。

そもそもなんで無名関数は無名なのかっつーところが
よくわからなかったのですが、無名関数は=の右側部分で
それを単に変数に代入する例をよく見かけるだけと。
なので無名関数は
変数に入れてもよし(変数名は必要だが)、
頭に(つけて即実行してもよし(これだと名前必要なし)、
その他無名関数のメリットは
関数の引数に使い捨て無名関数を入れる場合(高階関数、コールバック関数)や
(function() {})()や
変数に無名関数を代入する場合(クラス定義、オブジェクトのメソッド定義)など。
これはfunction文ではできないと。
まぁ万能選手ということで納得しました。

それと調べていたら無名コンストラクタってのもでてきましたが
これは何かメリットがあるのでしょうか???
あまり熱く語ってる方がいらっしゃらなかったので忘れます。

それともうひとつ恥ずかしながらしらなかったのが
ifなどの構文内でfunction文は定義できない!!
これ知らないでつまづきました。

var exec = function() {
if(document.getElementById('id')) {
func1();//こっちはエラー
function func1() {
alert('func1');
};
function func2() {
alert('func2');
};
func1();//こっちはOKでした
};
};

こんな書き方するのかしないのかわかりませんが、
通常だと定義前でも呼べたfunction文が
firefoxで構文内だとエラーになりますた。
ちなみに定義後は呼べました。

そこでまた無名関数はどこでも定義OKというこで
var exec = function() {
if(document.getElementById('id')) {
(function() {
func1();//エラーなし
function func1() {
alert('func1');
};
function func2() {
alert('func2');
};
func1();
})();
};
};
とりあえずこんな感じで回避。
まぁ無名関数はメリットが沢山ということで納得してみました。

参考
javascriotの関数をマスターしよう

if(navigator.userAgent.indexOf('MSIE') != -1) {
iebrows = true;
};
if(iebrows) {
imgElem.src = imgsrc[i] + "?" + new Date().getTime();
} else {
imgElem.src = imgsrc[i];
};

imgElem.onload = function() {
//処理
};
的な感じでIE6,7,8(でしょうか???)を処理しとかないと、
一度読み込むとキャッシュが残り2度目以降キチンとonloadイベントが呼ばれないようです。
悩みました。。。

参考
http://www.keyframe.co.jp/blog/archives/418


calendar

S M T W T F S
   1234
567891011
12131415161718
19202122232425
2627282930  
<< November 2017 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others