Download as PDF, PPTX
More Related Content
Similar to Webページで学ぶJavaScript2013 第8回
Webページで学ぶJavaScript2013 第8回
- 1.
- 2.
- 3. 先週やったこと ● Ajaxの例としてMOCO'SキッチンAPIを叩いて みました ● どうでしたか？ ●HTTPについても軽く説明があったのですがイ メージをつかめたでしょうか
- 4.
- 5. 今日の予定 ● 今回を含めて残り二回になりました 何をしましょうか ● サーバーサイドJS（node.jsとか） ●JavaScriptについて詳しく ○ prototype based oopとかスコープとかやってないことは 多い ● ブラウザ拡張機能 ● ゲーム ● Webサイトを見る・いじる・作る
- 6. 今日の予定 ● 今回を含めて残り二回になりました 何をしましょうか ● サーバーサイドJS（node.jsとか） ●JavaScriptについて詳しく ○ prototype based oopとかスコープとかやってないことは 多い ● ブラウザ拡張機能 ● ゲーム ● Webサイトを見る・いじる・作る 他は時間が・・・（後期にやります？）
- 7.
- 8. 例えばこのサイト ● http://nep-anime.tv/ ○ falcon君の紹介 ○safariの人は注意 ● JavaScriptを見てみよう ○ HTMLソースを見て探してみるとこれが怪しい ○ http://nep-anime.tv/js/top-min.js?20130625
- 9. 例えばこのサイト ● http://nep-anime.tv/ ○ falcon君の紹介 ○safariの人は注意 ● JavaScriptを見てみよう ○ HTMLソースを見て探してみるとこれが怪しい ○ http://nep-anime.tv/js/top-min.js?20130625 ＿人人人人人人人人＿ ＞ 圧縮されてる！ ＜ ￣Y^Y^Y^Y^Y^YY￣
- 10. どうして圧縮されてるの ● 圧縮されていると送信するデータ量が少なくなる ○ →通信にかかる時間が短くなる！ ○→ページの読み込みが早くなる！ ○ →うれしい！✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌ ● 実は、HTMLとかもgzip圧縮されて送信されてる ことがあります ● 可読性を低くするため、という理由で使う場合も あります・・・
- 11. 読めないんだけど・・・ ● がんばって綺麗にしましょう ● コードを綺麗にしてくれる機能があります ○Developer ToolsのSourcesタブを開く ○ 左ペインからnep-anime.tv→js→top-min.js ○ jsファイルを開いたら右したのボタン群からPretty print ボタンを見つけて押す
- 12. 読めないんだけど・・・ ● がんばって綺麗にしましょう ● コードを綺麗にしてくれる機能があります ○Developer ToolsのSourcesタブを開く ○ 左ペインからnep-anime.tv→js→top-min.js ○ jsファイルを開いたら右したのボタン群からPretty print ボタンを見つけて押す ● が、今回はこれでも読めない・・・ ● (☝ ◞‸◟）☝
- 13. 諦めたらそこで（ry ● さて、このjsコードで圧縮に使用されてるのは packerというツールです ○ eval(function(p,a,c,k,e,r)... ● packer用decoderとかあるんですが、今回は自 分で元に戻してみよう
- 14. packerの簡単な原理 ● packerでは、元のコードを圧縮したものを文字 列として持っています ○ なので、送信するデータ量が少なくて済む ●実行時には、圧縮した文字を元のコードに戻し て、eval関数に渡し、実行しています
- 15. packerの簡単な原理 ● evalとは、引数に渡した文字列をjsプログラムと して解釈して実行する関数です ○ （非推奨関数なのであんまり使わないでね） eval("1+1;"); =>2 eval("console.log('あびゃびゃびゃびゃ');"); => あびゃびゃびゃびゃ
- 16. packerの簡単な原理 ● eval関数に渡される文字は、人が書いた圧縮前 の読みやすいコードのはずです ● じゃあ、eval関数を書き換えてしまおう！ vareval = function(code) { console.log(code); }; これを実行してeval関数を書き換えたあとに、圧縮 されたコードを実行すると・・・
- 17.
- 18.
- 19. setTimeout ● 設定時間後に関数を実行します ○ タイマーを設定する感じ ●ページを開いてしばらくしたらいろいろ落ちてく るのはこの関数を使っています（295行目） setTimeout(function() { alert("カップ麺ができました"); }, 1000); 設定する時間はms（ミリ秒）なので、1000ms = 1秒です
- 20. clearTimeout ● タイマーをなかったことにします ● setTimeoutでタイマーIDが帰ってくるのでそれ を渡します varid = setTimeout(function() { alert("カップ麺ができました"); }, 1000); //カップ麺キャンセル！！！ clearTimeout(id);
- 21. setInterval ● 設定した時間間隔で関数を実行します ● アニメーションはこれを使ってることが多い ○0.06秒ごとに1px下にずらす、とかすればアニメーション してるように見える setInterval(function() { console.log(new Date()); }, 1000);
- 22. clearInterval ● タイマーキャンセルします var id= setInterval(function() { console.log(new Date()); }, 1000); // 10秒たったらおしまい setTimeout(function() { clearInterval(id); }, 1000*10);
- 23.
- 24. 例えば もっと動かしたい！ window.setInterval(function() { $("#chara-nepgear").css({ top: "+="+(Math.random()*20-10), left:"+="+(Math.random()*20-10) }); }, 10);
- 25. 例えば まだだ！まだ動きが足りんぞ！ window.setInterval(function() { $("img").each(function() { $(this).css({ top:"+="+(Math.random()*20-10), left: "+="+(Math.random()*20-10) }); }); }, 10);
- 26. 次のターゲット： 7さんのサイト ● http://www.mizukinana.jp/ ○ yu3の紹介 ●画像が5秒おきに入れ替わります ○ →高速で入れ替えたい！！ ● Sourcesタブからjs→home.js ○ 5秒おきに画像をfadeIn, fadeOutしています
- 27. 高速にしてみませう function home_image(idx){ if(!$("#home_images >img:eq("+idx+")").length) idx = 0; next = idx+1; if(!$("#home_images > img:eq("+next+")").length) next = 0; fadeout = setTimeout( function(){ $("#navigation img").removeClass('select'); $("#navigation img:eq("+next+")").addClass('select'); $("#home_images > img:eq("+next+")").fadeIn(10); $("#home_images > img:eq("+idx+")").fadeOut(10, function(){home_image(next);}); },50); }
- 28.
- 29.