qop's notes: JavaScript

顯示具有 JavaScript 標籤的文章。顯示所有文章

2019-02-21

JavaScript 在 for 迴圈內使用 let

for(let i=0; i<10; i++){
    setTimeout(function(){
        console.log(i);
    }, 100*i);
}

雖然只用了一個 let ，但實際上卻是依據迴圈的執行次數，宣告了 10 個區域變數。每個匿名函式所在的區域，都有一個 i 。

下面的例子可以說明這種情況：

let funcs = [];
for(let i=0; i<10; i++){
    funcs.unshift(function(){
        return i;
    });
}
for(let s in funcs){
    console.log( funcs[s]() );
}

但這個例子，由於函式不位於變數的區域內，因此會造成問題。

const f = ()=>{
    console.log(i);
}
for(let i=0; i<10; i++){
    setTimeout(f, 100*i);
}

2014-05-19

JavaScript 載入資源時的 Sync 和 Async 作法

1. 同步執行 JavaScript (Sync)
在現有的 <script> 之後加入另一個 <script> 標籤 (嚴格講起來, 不算真的 sync)

var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "js-url.js";
document.write(s.outerHTML);

2. 非同步執行 JavaScript (Async)
在 <head> 裡加入 <script> 標籤

var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "js-url.js";
document.getElementsByTagName("head")[0].appendChild(s);

3. 使用 XMLHttpRequest 同步取得 JSON (Sync)

var jsonFile = 'test.json';
var req = new XMLHttpRequest();
req.open("GET", jsonFile, false); // "false": synchronous
req.send();
console.log(req.responseText);

4. 使用 jQuery 同步取得 JSON (Sync)

$.ajax({
    url: appInfoUrl,
    async: false,  // synchronous
    datatype: "json",
    success: function(res){
        if(typeof(res)==='string') {
            res = $.parseJSON( res );
        }
    }
});

5. 使用 XMLHttpRequest 在載入文字檔資源前, 先判斷檔案是否存在

var jsonFile = 'test.json';
var req = new XMLHttpRequest();
req.open("GET", jsonFile, false); // "false": synchronous
req.send();
if(req.status === 404){
 console.log('檔案不存在');
} else {
 
}

2014-04-10

Grunt.js 入門講義

●● Grunt 入門　　　◎ 林新德編 ( shinder.lin@gmail.com ) 2014.4

● Grunt ( http://gruntjs.com/ )

名稱來自於 grunt work (單調的工作)，它的功能是使用設定來執行常做的動作，例如最小化 JavaScript 和 CSS 檔等。

● Grunt 在 0.3 版時提供常用的功能，設定檔使用 grunt.js。到 0.4 版時做了些調整，使用外掛的架構，設定檔為 Gruntfile.js。

● 本講義以 Windows 7 為作業系統為例，各軟體的安裝皆在 Windows 7 底下安裝，請注意使用的軟體版本，例如 NodeJS 有 32-bit 和 64-bit 之分。

◎ Windows Command Prompt 使用 PowerShell

◎ 範例專案 shinder_maze.zip 和 shinder_circle_menu.zip (** blog 不提供專案包 zip 檔 )

● Web server，使用 Python3 內建的簡易 web server ( 非必要 )

安裝 Python 3 ( https://www.python.org/downloads/ )

在 Command prompt，到專案目錄使用下式啟動 server

> python -m http.server [埠號]

使用「Ctrl + C」停止 server

● 在安裝 Grunt 之前需先安裝 Git 和 NodeJS

◎ 1. NodeJS ( http://nodejs.org/ )

– 直接從官網按「 INSTALL 」，下載 msi 檔並安裝。

◎ 2. Git

– 安裝 Git for Windows ( http://git-scm.com/download/win )

– 安裝過程中請勾選「Run Git from the Windows Command Prompt」

2013-12-09

JavaScript 實作類別的方式

參考

定義類 (class) 的三種方式 (簡中)

Object oriented programming in Javascript

Online Workshop Object Oriented Design in Javascript

2013-12-03

JavaScript UI: Gumby Framework

Gumby Framework 整個架構和 Twitter Bootstrap 其實差不多, 算是 Twitter Bootstrap 的另一種選擇。Gumby 的 CSS preprocessor 是使用 SASS。

2013-09-18

A deep-linking tool: Simrou

之前介紹過用 jQuery Address 實現「深連結」。
Simrou 的功能也是相同的，但個人覺得 Simrou 更為方便，看一下它的說明立即就能上手。

// 建立實體
window.simrou = new Simrou();

// 設定 deep-linking 規則
var postRoute = window.simrou.addRoute('/post/:id');

// 定義某 deep-linking 規則的事件處理
postRoute.get(function(event, params){
    // alert(params.id);
});

window.simrou.start();

連結寫法（同一般用法）：

<a href="#/post/12">第 12 則<</a>

觸發的方式：

window.simrou.navigate('/post/'+myid);

2013-05-20

JavaScript 簡單版的 sprintf

隨手寫了個 JS 版的 sprintf(), 只處理 %s, 沒處理 %% 和其它用法。

function sprintf(t_str) {
  var t_ar = t_str.split('%s');
  var r_str = '';
  var i;
  for(i=0; i < t_ar.length-1; i++) {
    if(arguments[i+1]!==undefined) {
      r_str += t_ar[i] + arguments[i+1];
    } else {
      r_str += t_ar[i];
    }
  }
  r_str += t_ar[i];
  return r_str;
}

2012-11-11

console.log fallback

上次遇到 console.log 在 IE 上的問題, stackoverflow 上有不錯的解法。
「console.log is only available after you have opened the Developer Tools」只能說花熱發...

練習打包成小工具 console_log_fallback.js

(function(){
  'use strict';
  var _scripts = document.getElementsByTagName('script');
  var _script = _scripts[_scripts.length-1];
  var _url = _script.src;
  var _qi = _url ? _url.indexOf('?') : -1;
  var alertStead = false;
  var i, param, params = _url.substr(_qi + 1).split('&');
  for (i = 0; i < params.length; i++) {
      param = params[i].split('=');
      if (param[0]=='alert' && parseInt(param[1])) {
          alertStead = true;
      }
  }

  if (typeof console === "undefined" || typeof console.log === "undefined") {
    console = {};
    if (alertStead) {
      console.log = function(msg) {
        alert(msg);
      };
    } else {
      console.log = function() {};
    }
  }
})();

使用以下方式時, 在 IE 可以用 alert 來替代 console.log 除錯:

<script src="console_log_fallback.js?alert=1" type="text/javascript"></script>

2012-11-10

用 Highlight.js 美化網頁上的程式碼

Highlight.js 能讓網頁上的程式碼更容易閱讀, 支援數十種程式語言, 而且可以自動判斷程式語言, 無需指定。
缺點是, 程式碼若太短判斷可能不正確。
官網: http://softwaremaniacs.org/soft/highlight/en/
Demo: http://softwaremaniacs.org/media/soft/highlight/test.html
Download: http://softwaremaniacs.org/soft/highlight/en/download/
Github: https://github.com/isagalaev/highlight.js

使用方式, 請看 Github 上專案首頁的 readme.

2012-04-05

require-cs 是使用 RequireJS 的 CoffeeScript Loader Plugin。
其實就是把 RequireJS 和 coffee-script.js 的功能加在一起, 而在沒編譯的情況下可以引入 *.coffee 檔執行。
其 Demo 將 CoffeeScript 分成幾個檔案, 然而皆以 RequireJS 的 module 方式撰寫, 個人比較不喜歡。
RequireJS 其實廣受使用, 排斥 module 寫法純粹是個人喜惡 :P

2012-04-04

JavaScript ( AJAX ) 的跨網域存取

JavaScript 的跨網域存取是透過 XMLHttpRequest 物件。標準為 Cross-Origin Resource Sharing ( CORS ) , 參考資料為: XMLHttpRequest 執行 AJAX 跨網域存取。
方式是在被存取的資源設定 HTTP Header 屬性 Access-Control-Allow-Origin, 其值設定為允許存取的網域, 或以 * 表示所有網域。
以下是個 PHP 的例子:

<?php
header("Access-Control-Allow-Origin: http://www.riarock.com");
?>
Hello JavaScript Cross Domain!

2012-03-16

在 Chrome 開發人員工具裡動態載入外部 JS libs

如何在 Google Chrome 開發人員工具裡, 動態載入外部 JS libs ?
qop 在 StackOverFlow 找到這篇 how to: dynamically load google ajax api into chrome extension content script 。
打開 Developer tools [ Ctrl + Shift + i ], 於 Console 內貼上以下的程式碼就可以在 Console 做些 Underscore/Backbone 練習 ^_^

var headElement = document.getElementsByTagName("head")[0];
var jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
headElement.appendChild(jsElement);
// ---
jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://documentcloud.github.com/underscore/underscore-min.js';
headElement.appendChild(jsElement);
// ---
jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://documentcloud.github.com/backbone/backbone-min.js';
headElement.appendChild(jsElement);

2012-02-28

Backbone.js 與 CoffeeScript

參考了一些 Backbone 搭配 CoffeeScript 的文章:

之後, 將 Backbone 範例 Todos 改用 CoffeeScript 重寫練習, 果然一開始就踩到地雷。
改寫之後, 是完全不會動的, 後來發現 initialize 方法根本沒被觸發, 但 constructor 有被觸發, 把 constructor 註解後就可以了。也就是使用 initialize 方法, 而不用 constructor。

另外, Backbone 原本的繼承寫法是呼叫 extend 方法, 除了改用 extends 繼承寫法之外, 其初設物件 (第一個參數), 可以放到 initialize 方法裡做初始化的動作。

CoffeeScript.js

感覺最近一兩年, JavaScript lib 發展的速度相當快, 在 Nodejs 問世之後, JS 更是如虎添翼。但個人對 JS 的 OO 寫法相當不適應, 因此看上了 CoffeeScript, 最近就學點基本語法。在還沒有接觸 CoffeeScript 之前, 會覺得寫某種程式語言再編譯成 JS, 有脫褲子放屁之疑慮。試用後發現, CoffeeScript 真的比較易讀易寫, 代價就是要學點新語法, 當然這問題是見仁見智, 因人而異。

一開始我會在網頁裡使用 <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script> , 如此一來就可以在 <script type="text/coffeescript"></script> 裡寫 CoffeeScript (或者 <script type="text/coffeescript" src="my.coffee"></script> )。

單單學語法其實很無聊的, 試著改 Backbone.js 上的 todos 範例, 先將 backbone-localstorage.js 改寫成 backbone-localstorage.coffee, 結果發現一直抓不到 Store 類別, 裡面包括了兩個問題:

混用 todos.js 和 backbone-localstorage.coffee, 但 backbone-localstorage.coffee 被編譯成 JS 是比較慢的, 因此 .coffee 的內容是比較慢執行的。解決的方式是, 先編譯成 JS。
CoffeeScript 的所有變數都會被包在 local 裡, 所以類別要定義為 global 時可以使用 '@' 或 'window.'。原來的 Store 類別要使用 window.Store 或 @Store 去定義。

2010-08-26

JavaScript 的 Lazy Function

Lazy Function Definition Pattern
中文解說連結

JavaScript 的一些寫法真是深奧，常常讓我水土不服～

2010-08-22

SWFAddress 和 SWFObject 還得配對了才行 ?!

用SWFAddress時，瀏覽器的 back 和 forward 按鈕老是失效。JS 和 AS 都是再三檢查，寫的都是對的。索性把 swfaddress.js 和 swfobject.js 換成 SWFAddress cs3 範例裡的 js，結果就 OK 了。這會不會太瞎了 :-&

2010-08-18

Flash 可以透過 JavaScript 取得 Facebook 的 session

Flash 可以透過 ExternalInterface (JavaScript) 取得 Facebook 的 session，
只要取得 session 裡的 access_token 就可以在 Flash 呼叫 Facebook 的 Graph API。

以下程式碼的要點：
1. 使用 swfobject 顯示 Flash 內容。
2. JavaScript 都載入後再顯示 Flash。
3. Flash 先呼叫 JS function，JS function 呼叫 FB function，callback function 呼叫 Flash function。
4. JS function 裡，swf movie name 和 callback function name 以傳入的方式設定。
5. access_token 以 get 方式傳送。
6. Graph API 回傳的內容是格式化過的 JSON 字串。
Code 參考

2010-08-12

從 AS3 改寫的 JavaScript JSON Formatter

參考　http://qops.blogspot.com/2010/04/json-formatter.html
用法

var jf = new JsonFormatter(JSON.stringify(response));
jQuery("#show1").html("<pre>" + jf.getResult() + "</pre>");

2010-08-11

JavaScript JSON Formatter

Blog: http://joncom.be/code/javascript-json-formatter/
Source file: http://static.joncom.be/script/jsonformatter.js

FaceBook 的 JavaScript 和 jQuery 混用

FaceBook 的 JavaScript 和 jQuery 混用時，Chrome 執行是正常的（如預期），但是 FireFox 和 IE8 卻看不到東西，也沒有錯誤提示。
後來想說會不會是 $ 衝到，不使用 $ 而以 jQuery 替代之後，執行就正常了。
難道 FB 的 JavaScript API 裡使用 $ 當變數，嘖！
Code 參考

訂閱：文章 (Atom)

2019-02-21

2014-05-19

2014-04-10

2013-12-09

2013-12-03

2013-09-18

2013-05-20

2012-11-11

2012-11-10

2012-04-05

2012-04-04

2012-03-16

2012-02-28

2010-08-26

2010-08-22

2010-08-18

2010-08-12

2010-08-11

FB 留言