Archive

Archive for the ‘Javascript’ Category

Bookmarklets on Android

March 8, 2013 1 comment

Bookmarklet是輕量級JavaScript程式,由於以網址(URL)的形式被存為瀏覽器中的書籤,因此被稱為Bookmarklet。桌面瀏覽器大多支援Bookmarklet,但支援Bookmarklet的手機瀏覽器不算多,蘋果的手機版Safari就是其中之一。以往一直沒在手機上用過,但最近使用Naked Browser,預載了Translate以及Clear Cache兩個Bookmarklet,就重拾起用Bookmarklet的樂趣,隨後發現原來Chrome以及Dolphin都支援Bookmarklet,只是自己一直沒有留意罷了。

利用不同搜尋引擎搜尋 

桌面版Chrome其中之一大特點是Omnibar,可以在網址搜尋列「輸入搜尋引擎+Tab+關鍵字」,就會在該搜尋引擎中搜尋關鍵字,例如「”Youtube”+Tab+”Dogs”」就會在Youtube中搜尋有關狗的影片。而且,在設定(chrome://settings/searchEngines)中可管理搜尋引擎。搜尋引擎無所不包,上至Youtube、Yahoo,下至某個人博客,Chrome都可以自動加入,完成毋須用戶操勞。

不過我用得更多的,其實是功能類似,之前介紹過的Mulit Search,選取頁面上的文字後,只要右按滑鼠再選取搜尋引擎,就可以在該搜尋引擎中搜尋選取的文字,極之方便,不過加入搜尋引擎的方式比較麻煩,要用家自己處理一堆程式碼。

來到手機,沒有了OmniBar以及Multi Search,確實不慣,不過透過Bookmarklet實現接近功能!

更新:實際試用後發現不是每個瀏覽器用每個Bookmarklet都可以。搜尋類Bookmarklets似乎只在Chrome成功,但Dolphin和Naked瀏覽器都不成功;後來嘗試修改原本的Javascript,成功令Youtube/Wikipedia搜尋的Bookmarklet在Naked Browser上運行,後者更加入中文版。至於Pocket,就三個都成功,不過Chrome要巧妙地在Omnibar輸入關鍵字方式點選,否則Chrome只會在新分頁開啟書籤,令Add to Pocket失效。

更新2:後來又發現Bookmarklet搜尋英文可以,但中文會出現亂碼,原來問題出於escape()上,只要改為encodeURIComponent()就可以解決。

Google Search

  • javascript:q=”+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);if(!q)q=prompt(‘Enter your search here’,”);if(q!=null)location=’http://google.com/search?query=’+encodeURIComponent(q).replace(/ /g,’+’)+’&num=10′;void 0

Google In Site Search

Youtube Search

Wikipedia Search

其實其餘網站的搜尋功能,都可輕易製作Bookmarklet,不過個人沒有需要,常用的其實只有Google/Youtube/Wikipedia幾個,需要的時候再製作吧!

其他實用功能

除了用其他搜尋引擎進行搜尋外,Bookmarklet尚有很多意想不到的功能,實用程度媲美桌面瀏覽器的Extensions以及Greasemonkey。

眾多功能中,個人最看重「Add to Pocket」,因為透過「分享」再選擇「Pocket」,不會將記錄網頁標題,而會直接將網址當作標題,以致在閱覽未讀清單時,常常不知某連結的內容是甚麼,大為費解。在桌面版Chrome一直直接使用Bookmarklet,可以在手機版直接用實在太好了。

Add to Pocket

  • javascript:(function(){ISRIL_H=’1164′;PKT_D=’getpocket.com’;ISRIL_SCRIPT=document.createElement(‘SCRIPT’);ISRIL_SCRIPT.type=’text/javascript’;ISRIL_SCRIPT.src=’http://’+PKT_D+’/b/r.js’;document.getElementsByTagName(‘head’)[0].appendChild(ISRIL_SCRIPT)})();

Translate

Increment

  • javascript:(function(){var e,s;IB=1;function isDigit(c){return (“0″<=c&&c<=”9”)}L=location.href;LL=L.length;for(e=LL-1;e>=0;–e)if(isDigit(L.charAt(e))){for(s=e-1;s>=0;–s)if(!isDigit(L.charAt(s)))break;break;}++s;if(e<0)return;oldNum=L.substring(s,e+1);newNum=””+(parseInt(oldNum,10)+IB);while(newNum.length<oldNum.length)newNum=”0″+newNum;location.href=L.substring(0,s)+newNum+L.slice(e+1);})();

Decrement

  • javascript:(function(){var e,s;IB=-1;function isDigit(c){return (“0″<=c&&c<=”9”)}L=location.href;LL=L.length;for(e=LL-1;e>=0;–e)if(isDigit(L.charAt(e))){for(s=e-1;s>=0;–s)if(!isDigit(L.charAt(s)))break;break;}++s;if(e<0)return;oldNum=L.substring(s,e+1);newNum=””+(parseInt(oldNum,10)+IB);while(newNum.length<oldNum.length)newNum=”0″+newNum;location.href=L.substring(0,s)+newNum+L.slice(e+1);})();

View Source

  • javascript:(function(){c=unescape(document.documentElement.innerHTML);c=c.replace(/&/g,’&’);c=c.replace(//g,’>’);c=c.replace(//g,’>’);document.write(‘Source of Page<\/title><\/head><pre>’+c+'<\/pre><\/body><\/html>’);x.document.close();})();</pre>
  • javascript:window.open(”).document.write(‘<html><head><title>page source</title></head><body><pre style=”border:1px solid #099;width:80%;white-space:pre-wrap;word-wrap:break-word”>’+unescape(document.documentElement.innerHTML).replace(/</g,’&lt;’).replace(/>/g,’&gt;’)+'</pre></body></html>’)
    (由http://nakedbrowser.com/android/help.html提供)

Remove Cookies

  • javascript:(function(){C=document.cookie.split(“; “);for(d=”.”+location.host;d;d=(“”+d).substr(1).match(/\..*$/))for(sl=0;sl<2;++sl)for(p=”/”+location.pathname;p;p=p.substring(0,p.lastIndexOf(‘/’)))for(i in C)if(c=C[i]){document.cookie=c+”; domain=”+d.slice(sl)+”; path=”+p.slice(1)+”/”+”; expires=”+new Date((new Date).getTime()-1e11).toGMTString()}})()
    (由http://nakedbrowser.com/android/help.html提供)

棄用Dolphin瀏覽器

之好有好長一段時間,使用Dolphin瀏覽器,因其擁有不少Extensions,其實亦只是加了「Add to Pocket」、「Youtube Search」、「Smart Search」以及「Remember Password」罷了。既然Bookmarklet可以將以上功能全部實現(除了記憶密碼),那麼Dolphin瀏覽器就沒有留下的必要了。

而且,Dolphin瀏覽器會紀錄瀏覽蹤跡,除了私隱問題外,亦會拖慢載入速度,因為要傳送額外資料去其他伺服器。相比之下,Naked Browser實在太爽快了!

參考資料:
http://www.squarefree.com/bookmarklets/
http://www.appinn.com/bookmarklet/
http://subsimple.com/bookmarklets/jsbuilder.htm
http://nakedbrowser.com/android/help.html

Advertisements

JavaScript on the web

May 22, 2012 Leave a comment

在Head中引用Javascript文件(像引用CSS文件一樣):

  • <head><script type=”text/javascript” src=”script.js”></script></head>

HTML中表單與Javascript的交互(HTML部份):

  • <button onclick=”functionName(‘input’)”>Button Name</button>
  • <form name=”formName”>
    • <label for=”inputName”>labelName</label>
    • <input type=”text” name=”textinput”>
    • <select name=”selectName”>
      <option value=”A” selected>A</option>
      <option value=”B”>B</option>
      </select>
    • <input type=”radio” name=”radioName” value=”choice1″ checked>Choice 1<br>
      <input type=”radio” name=”radioName” value=”choice2″ checked>Choice 2<br>
    • <input type=”checkbox” name=”checkboxName” >
    • <input type=”button” value=”name” onclick=”function()”>

    </form>

HTML中表單與Javascript的交互(JS部份):

  • document.getElementById(“divID”).innerHTML += HTMLcode; //將JS結果寫入HTML
  • var variable= document.formName.textinput.value; //將網頁表單text內容寫入JS
  • for (var i=0; i < document.formName.radioName.length; i++) {
    if (document.formName.radioName[i].checked) {
    newvariable = document.formName.radioName[i].value; //將網頁表單radio內容寫入JS
    }
Categories: HTML, Javascript

JavaScript (3)

March 20, 2012 Leave a comment

轉眼到了Week 10,談及更多array,貌似Week 11之後就沒有了!

Functions related to arrays:

  • arrayName.length
  • arrayName.splice(startNum,countNum);
    //從arrayName的startNum位置開始,裁掉countNum數目
  • arrayName.slice();
    //將arrayName的所有數值複製一份
  • arrayName.push(newItem);
    //將newItem加到arrayName的新位置,等同arrayName[arrayName.length]=newItem;

Associative array:

  • var myAssoc = {“key1″:”val1″,”key2″:”val2”};
    myAssoc[key] =val3;
    //JavaScript中,所有元素都是objects,而associative array是更接近object的一種array

For-in loop:

  • for ( var name in array ) {console.log(array[name]);}

JavaScript is about reference:

  • 當用x=y的時候(x和y都另有指向),實際我們只是將x導向y,一旦y改變,x的值亦將改變,而x的值改變,y的值亦會改變

Control flow:

  • 當電腦執行JavaScript時,會由左至右,由上至上運行,當遇到function時,會暫停順序運算,先處理好function
  • 由電腦計算出的結果會儲存在Stacks中,每當function運行,其結果均會儲存在Stack中
Categories: Javascript

JavaScript (2)

March 16, 2012 Leave a comment

第五周主要學object、class和constructor。

1. Declaring objects:

  • var objName = {};   //Literal notation
  • var objName = new Object();   //Constructor notation
  • var objName = new constructorName();

2. Declaring properties in objects:

  • var objName = {
    prop1 : “123”,
    prop2 : true
    };
  • var objName = new Object();
    objName.prop1 = “123”;
    objName.prop2 = true;
  • var objName = new Object();
    objName [“prop1”] = 123;
    objName [“prop2”] = true;
  • var objName = new Object();
    var a = “prop1”;
    var b = “prop2”;
    objName[a] = 123;
    objName[b] = true;

3. Declaring methods in objects:

  • var objName = {
    method1: function(){…},
    method2: function(){…} }
    ;
  • objName.methodName = function(X){this.prop1=X;};
    //在Object中的Method,可以「this」替代Object名稱,令同一method可以套用至不同objects中

4. Using constructors to build objects:

  • var obj = new Object(); var arry = new Array();
    //以「Object」及「Array」製造新Object及Array,預設constructor「Object」及「Array」沒有parameters
  • function ABC(a,b,c){ this.a=a; this.b=b; this.c=c; } var obj = new ABC(1,2,3); //宣告Constructor「ABC」,可加任意parameters,注意最後無分號,而Constructor Notation「new」是製造新Object時的關鍵詞
    //宣告Constructor「ABC」,實際上是建立並定義一個新class「ABC」,class類似於Javascript中的type如number及string

5. Others about objects:

  • Object屬於格式的一種,可以用於Array中,譬如: var arry = new Array(); arry[0] = new Object(); arry[1] = new Object();
  • Object可以用作parameter,譬如: var ABC = function(obj){ obj.prop1 = “string”; obj.prop2 = true; };
  • Object有所謂「baggage」,隱藏的參數和properties,如objName.hasOwnProperty(‘propName’)會檢查objName有沒有propName的這個property並傳回真假值

6. For-in loop:

  • var objName = {};
    for ( var propName in objName ){console.log(propName);}
    for ( var propName in objName ){console.log(objName[propName]);}
    //前者列出所有property名稱,後者列出所有property的value

7. Object-oriented programming(OOP) and class:

  • class 可以理解為Javascript中的type,或者objects的category,如numbers和strings,constructors用於建立新的class
  • className.prototype.newMethod = function(){…};
    //宣告一個同一class通用的method
  • obj1.prototype = new obj2();
    //class之間可以「繼承」(inherit)其他class的特質,例子中obj1會繼承obj2的obj1自身沒有定義的properties和methods,如obj1自身已定義則採用obj1自身的properties和methods
    //class的「繼承」有連續性,可以不斷向上層追溯,直到找到相應的properties和methods為止

8. Hidden variables:

  • function Person(name){
    this.name = name;
    var money = 0;
    this.askPW = function(pw) {if  ( pw = “1234”) {return money;}} ;
    }
    //name是公開的,而money是隱藏的,只有透過正確的「pw」才會傳回money的值

Literal notation

Categories: Javascript

JavaScript (1)

March 13, 2012 Leave a comment

總結第一周,嗯,是第一至四周所學,因為第二三四周所學不多,多數是溫故知新及提供更多練習讓你熟習Javascript而已:

JavaScript Primitive Data Types:

  • var a = “XXX”;
    //string,以「””」雙引號標示
  • var b = 12.5;
    //number,毋須標示
  • var isOdd = function(n){if (n%2===0){return false;} else {return true;}};
    //boolean,真假值,只有true或false
    //每當有比較運算子就會傳回boolean
  • undefined
  • null(“”)
Ways of Storing Data:
  • var variable = XXX/”XXX”;
  • var array = [X, Y, Z];
    //array,以「[]」中括號標示,其中的各項目以「,」分隔,裏面可以包含numbers、strings、boolean、array和objects
  • var obj = {fuct: function(){}, var:”value”};
    var obj2 = new Object();
    //object,以「{}」大括號標示,其中的各項目以「,」分隔,裏可以有不同的properties,如numbers、strings,甚至methods
    //在object可以任意加設variable或function的properties,例子中obj兩個properties全局名稱為obj.fuct及obj.var,亦可以稱為obj[“fuct”]及obj[“var”],在obj中可以this.fuct及this.val代替

JavaScript Operators:

  • ===:if equal
  • !==:if not equal
  • !:NOT
  • ++:+1
  • –:-1
  • a+=b:a=a+b
  • a-=b:a=a-b
  • ||:OR
  • &&:AND
  • a%b:modulus(a除以b的餘數)
  • a=b>c?d:e;
    //ternary operators:var=condition?result1:result2;
    if (x>y){result=true;}else{result=false}
    可以重寫成:result=x>y?true:false;

JavaScript Common Functions:

  • var XXX = 12.5 ;
    //宣告variable XXX,值為12.5)
  • var XXX = function (parameterA,parameterB) {
    return parameterA+parameterB;
    };
    //宣告function XXX,有a和b兩個arguments或者parameters(參數),計算並傳回a+b
    //return用於「傳回」結果,同時意味function結束
  • typeof XXX
    //顯示格式,傳回”string”/”number”/”object”等
  • isNaN(XXX/”XXX”)
    //檢查是否NaN,傳回true或false

JavaScript Common functions(Printings):

  • console.log(“XXX”);
    //顯示XXX
  • alert(“XXX”);
    //彈出對話方塊XXX
  • confirm(“XXX”);
    //彈出對話方塊XXX並要求選擇Yes或No
  • prompt(“How old are you”);
    var answer = prompt(“How old are you?”);
    //彈出對話方塊「How old are you?」並要求輸入文字,answer會傳回輸入了的文字

JavaScript Common functions(Math):

  • Math.random():傳回0至1的任意數字
  • Math.round(“XXX”)
    //將XXX四寫五入至最接近整數
  • Math.floor(target)
    //將target內的數字round down
  • Math.pow(num1,num2)
    //num1 to ther power num2
  • Math.max(num1,num2)
    //find the largest number among num1 and num2

Build-in properties for strings/arrays:

  • “XXX”.length;
    //傳回一個字串的長度或array的長度
  • “XXX”.substring(1,1);
    //在”XXX”這個string中,輸出從第2個(1)起,到第2個(1)字母,即「X」
    //若未輸入第二個parameter,則會一直輸出直至字串結束
  • “XXX”.toUpperCase()
    //XXX全部轉為大楷
  • “XXX”.toLowerCase()
    //XXX全部轉為小楷
  • “XXX”.indexOf(“target”)
    //在XXX中,找第一個target的位置,第一個字母為0
  • “XXX”.replace(“original”,”new”)
    //在XXX中,尋找original並取代為new,只進行一次

Control Structures:

  • if (condition) { action A }; else{ action B }
  • for ( initialization; condition; increment ) { // code to run each iteration }
  • while (condition) {action A; action B; }
  • do {action A; action B; } while (condition)
  • switch (parameter) { case “XXX”: action A; break; … default: action X; break; }

Reminders:

  • Variables分為global variable及local variable,前者適用範圍(scope)是全局,後者適用範圍僅於function之內。若出現同名的global variable及local variable,function中優先使用local variable,但function以外不會使用local variable
  • 除了for、while這些loop structures外,使用recursion也可以令function有同樣效果
  • Strings、arrays、objects性質相近,strings可以理解為arrays of characters,因此一些arrays用的性質如array.length或array[i]等也可以用在strings上,此外,arrays中可以包括arrays
  • Functions中有「return」可以結束function,loop structures也有「break」可以結束loops
  • typeof.XXX/typeof”XXX”
    //顯示格式,傳回”string”/”number”/”object”等
  • isNaN(XXX/”XXX”)
    //檢查是否NaN,傳回true或false
  • typeof XXX
    //顯示格式,傳回”string”/”number”/”object”等
  • isNaN(XXX/”XXX”)
    //檢查是否NaN,傳回true或false
Categories: Javascript

Code Academy Progress

March 12, 2012 Leave a comment

Code Academy登記了學習JavaScript,但後來不知怎的,怎樣開也開不了,最近找到原因,原來是因為用了Chrome 17,用Firefox就會無事,真的感到很無奈。好吧,我要追回近十個星期沒有學習的進度!

最近一口氣沖擊Code Academy的課程,三天就由Week 1衝到Week 5了!

不過Code Academy的網站導航有點亂,在此整理一下相關連結:

  1. http://www.codecademy.com/curricula/code-year/units/1
    以星期為單位安排的課程,最後一個字母顯示所在星期
  2. http://www.codecademy.com/languages/javascript
    課程大綱
Categories: Javascript