目前分類:程式設計 (46)

瀏覽方式: 標題列表 簡短摘要
以HTML + jQuery開發可以跨不同的平台系統,輔以Cordova編譯可以轉成Android、iOS、Windows Phone的APP程式。

Android版本(Play商店): https://play.google.com/store/apps/details?id=com.twtnn.puzzle_sample

原始碼(GitHub): https://github.com/lyhpcha/puzzle_sample

keven 發表在 痞客邦 留言(0) 人氣()

Google Fonts有許多的英文字型可以讓網頁文字有更多的變化。
而在Google的Web Font Early Access中,已經有五種中文字型了,
只要以CSS的語法就直接可以套用在網頁上,也有提供字型下載。
網址:https://www.google.com/fonts/earlyaccess

keven 發表在 痞客邦 留言(0) 人氣()

node-webkit是一個整合Chrome瀏覽器與node.js的專案,採用V8 JavaScript編譯引擎。
可以開發桌面型的HTML+js的程式,而且還支援跨平台。
Node-webkit目前支援了Linux、Windows與MacOS等三大平台,還可以用npm安裝node.js。

Node-Webkit下載:https://github.com/nwjs/nw.js/

keven 發表在 痞客邦 留言(0) 人氣()

如果網址列中帶有中文,雖然在瀏覽器上可以正確看到中文,但是複製網址到記事本上卻出現亂碼。

其實它不是亂碼,因為URL在網路上只能以ASCII碼傳送,而ASCII就只有英、數字及特殊符號,
當然中文就不再支援之列,所以必須將中文以UTF8轉成16進位,傳送到瀏覽器之後,再解碼回來,
就可以得到正確的中文,所以在瀏覽器看到的中文是解碼後的結果。

keven 發表在 痞客邦 留言(1) 人氣()

URL的編碼格式是採用ASCII碼,不是Unicode,而中文並非ASCII碼。
因此在瀏覽器上看到的中文網址都是經過UTF8的解碼後得到的結果。
所以當我們把瀏覽器的網址複製下來貼到記事本後,就會看到好像亂碼的URL。

例如:

keven 發表在 痞客邦 留言(0) 人氣()

node.js不像其他語言,如PHP、JSP需要有HTTP伺服器才可以
因為node.js本身自己就是一個伺服器。

下面是一個實作的範例,假設存儲為test01.js,以node執行:
D:\project> node test01.js

keven 發表在 痞客邦 留言(0) 人氣()

先以npm安裝sqlite3的相關模組:

1、初始化專案
npm init

keven 發表在 痞客邦 留言(0) 人氣()

在網路上看到一個前端的JS框架:Angular,是由Google維護。
透過「宣告」(Directives Syntax) 來達成JS的動作。

Angular有幾項優點:
宣告式語法 (Directives)
DOM Templates

keven 發表在 痞客邦 留言(0) 人氣()

本想以jQuery直接取得政府Opendata的資料,但是卻失敗了,
錯誤訊息:No 'Access-Control-Allow-Origin' header,
這是因為新版的瀏覽器為了安全性,已經不允許跨網域的取存,
而jQuery的解決方式是改以jsonp來取得JSON的資料。
上次在測試台南市政府的Opendata就是以此方式取得資料,

keven 發表在 痞客邦 留言(0) 人氣()

以台南市公廁地址的開啟資料為例
執行結果如下圖:
Image006

程式碼如下:

keven 發表在 痞客邦 留言(0) 人氣()

上次發現ajax在存取上有跨網域的問題後,就一直想試看看解決的方法,
為了安全性考量,在跨網域存取時,必須得到對方網域的同意才能存取。
所以到網路下載一個免安裝的Apache+MySQL的程式:UniServerZ
解壓縮後,直接執行就可以開啟Apache Web Site,很方便測試。

先寫一個簡單PHP網頁test01.php:

keven 發表在 痞客邦 留言(0) 人氣()

使用的瀏覽器:Google Chrome
版本:40.0.2214.115 m

學習jquery的ajax時,設計了一個簡單的測試ajax的網頁,
直接以file的方式透過瀏覽器測試:file:///E:/test07/www/index.html

結果我在Google Chrome上瀏覽測試時卻出現錯誤:

keven 發表在 痞客邦 留言(0) 人氣()

剛好有需要知道一個沒有固定,但是為2的x次方的數y,要如何找出x:
公式:2^x=y,例如:2的3次方為8(2x2x2)

在Excel中,可以用log對數函數來找到答案,如下圖:
Image013

keven 發表在 痞客邦 留言(0) 人氣()

上次利用jQuery來操作canvas的試次還算順利,所以也想用jQuery來操作CSS3 animation。
可是這次就沒有上次那麼幸運了,無論用選擇器或函數,就是無法操作CSS3 animation。

經google大神的幫助,找到一個jQuery的外掛程式:jQuery-Keyframes
下載網址:https://github.com/jQueryKeyframes/jQuery.Keyframes

另外還要下載一個js:prefixfree

keven 發表在 痞客邦 留言(0) 人氣()

在學習css3的過程中,看到有一個animate.css的說明,有數十種特效動畫可以引用,
所以就下載來試用,果然使用上非常的方便,也可以藉此學習css3的語法。

下載網址有兩個位置,其中一個可以線上觀看特效如下:
http://daneden.github.io/animate.css/

選擇想要的特效,按下旁邊的按鈕就可以由標題知道效果。

keven 發表在 痞客邦 留言(0) 人氣()

我使用的jQuery版本是2.1.1、網頁是HTML5,在取得canvas物件時,卻沒有反應。
原來在jQuery取得canvas物件需要有一點「眉角」

Javascript的語法如下:
var canvas = document.getElementById('canvasTEST');

keven 發表在 痞客邦 留言(0) 人氣()





Analog Clock using Canvas

keven 發表在 痞客邦 留言(0) 人氣()

今天在HTML5的測試網頁中加入一段語法,試著讓SVG可以使用免費的王漢宗中文字型。
語法主要是以CSS宣告使用的字型,再以CSS重設SVG的Tag「text」

keven 發表在 痞客邦 留言(0) 人氣()

SVG是一種以XML定義二維向量圖現的圖形格式,由W3C制定,是一個開啟的標準。
例如有一個001.svg的圖片如下:
Image002

以記事本開啟001.svg,可以發現是以一般文字來定義圖形。

keven 發表在 痞客邦 留言(0) 人氣()

文字框在輸入時,如果有按下「Enter」,會讓文字有斷行的情形。
此時如果取出文字框資料(或從資料庫中)放到「Lable」或「HTML」時,斷行就不見了。
其實並不是斷行不見了,只是斷行的特殊符號無法被識別。
所以我們可以用Replace來替換這些特殊符號為可以識別的語法。
VB的斷行符號是vbCrLf

keven 發表在 痞客邦 留言(0) 人氣()

1 23