icodding愛程式

一，問題描述 在VMware裡搬移 出來的CentOS 無法連上網路。 ifconfig...沒有看到eth0.。然後重啟網卡又報下面錯誤。 故障現象： service network restart Shutting down loopback insterface: [ OK ] Bringing up loopback insterface: [ OK ] Bringing up interface eth0: Device eth0 does not seem to be present,delaying initialization. [FAILED] 二，解決辦法 1 首先，打開/etc/udev/rules.d/70-persistent-net.rules內容如下面例子所示： # vi /etc/udev/rules.d/70-persistent-net.rules # This file was automatically generated by the /lib/udev/write_net_rules # program, run by the persistent-net-generator.rules rules file. # # You can modify it, as long as you keep each rule on a single # line, and change only the value of the NAME= key. # PCI device 0x1022:0x2000 (pcnet32) SUBSYSTEM=="net", ACTION=="add", DRIVERS=="?*", ATTR{address}=="00:0c:29:8f:89:9 7", ATTR{type}=="1", KERNEL=="eth*", NAME="eth0" # PCI device 0x1022:0x2000 (pcnet32) SUBSYSTEM=="net", ACTION=="add", DRIVERS=="?*&qu

HTTP封包 講起網路，不免還是從OSI七層開始講起 OSI七層協定從下到上分別為 實體層(Physical Layer)，資料鏈結層(Data Link Layer)，網路層(Network Layer)，傳輸層(Transport Layer)，會談層(Session Layer)，展現層(Presentation Layer)，應用層(Application Layer) 在這裡，我們只要管  TCP  HTTP  在哪一層就行了 對應到我們抓到的HTTP封包 第一行，是個概覽，這個封包總共收到幾個Frame(訊框)等等 第二行，就是我們收到的Frame(訊框)，可以看到我們用Ethernet協定傳送，裡面記錄著最後傳和目標傳到的Mac位址....等等 第三行，就是TCP/IP中的IP協定(Internet Protocol)，紀錄著來源和目標的IP等等資訊 第四行，Transmission Control Protocol縮寫就是TCP協定啦，HTTP連線也是基於TCP協定的，可以看到來源和目的的port(連接埠)號 第五行，就是HTTP協定(Hypertext Transfer Protocol)啦 這裡有展開，可以看到完整的HTTP標頭，一個HTTP連線原來附著這麼多的資訊，也是等下要講的重點 第六行，沒甚麼特別的，就只是網頁原始碼 封包和傳送原理 封包大概是這樣子的 從程式的眼光來看好了，軟體要送個資料到另一台電腦 除了  實體層(Physical Layer) 之外  會依序從上往下包 每往下一層就加一些東西上去，到別人的電腦也是這樣，一層層拿掉標籤 最後得到資料 HTTP(應用層)也是如此，HTTP是基於TCP(傳輸層)的 在連線的時候也是如此 要先有TCP先連線才會可以跑HTTP的協定 先解釋TCP 看到一堆紅線了嗎 分成前三組和後三組 前三組，就是出名的三向交握 (3-way handshake 也有人翻譯三次握手) (天音：甚麼三向交握都看攏無) 看英文比中文意思比較準，意思就是 握手寒暄 啦 請設想一個情況，想你打skype給朋友 剛接起來網路電話的時候有沒有遇到這樣的情況 [SYN]              我: 哈嚕, 有沒有聽到聲音? [SYN, ACK]      A: 有聽到，那我呢?有沒有聽到聲音 [ACK]         

為了安全性或是其他原因，常常看到許多網站的 URL 將實際檔案的路徑隱藏起來，比如說下方的 URL 我們就看不出該網頁是用什麼程式寫的，PHP 或是 ASP? http://www.blogger.com/post-create.g?blogID=27977601 舉個簡單的例子，如果我們想把網址中的副檔名 php 改成 htm。 開啟 http://localhost/test.htm 實際上是連到 http://localhost/test.php 實作步驟如下:     檢察 apahce 的 httpd.conf 這一行是否開啟 ( 以xampp為例預設是開啟的 ) :         LoadModule rewrite_module modules/mod_rewrite.so     在你要改寫 URL 的檔案資料夾中，放入一個檔案取名為 .htaccess，寫入以下內容，這樣就算是完成了，不必重新啟動 apache         RewriteEngine on         RewriteRule ^(.*)\.htm$ $1.php [nc] RewriteRule 這行的語法就是源自於 Perl 的 Regular Expression (正規表達式)，在 PHP 和 Javascript 也常常用到。 $1 表示使用 RewriteRule 的第一個 Regular Expression (是否就是指 ^(.*)\.htm$ 這段?) [nc] 代表 not case sensitive (大小寫視為相同) ------------------------------ 還有其他比較複雜的範例 ，如果你也像我一樣不熟悉正規表達式，可以直接拿這些例子修改 : 1) 網址 product-12.html => 實際路徑 product.php?id=12     RewriteEngine on     RewriteRule ^product-([0-9]+)\.html$ product.php?id=$1 2) 網址 product/ipod-nano/12.html => 實際路徑 product.php?id=12     RewriteEngine on

將 SELinux 設定 disabled 後重開機常出現的錯誤訊息 Kernel Panic - not syncing: Attempted to kill init! Pid: 1 comm: init Not tainted 2.6.32-358.6.2.e16.x86_64 #1 Call Trace: [<ffffffff8150d478>] ? panic+0xs7/0x16f [<ffffffff81073ae2>] ? do_exit+0x862/0x870 [<ffffffff81182965>] ? fput+0x25/0x30 [<ffffffff81073b48>] ? do_group_exit+0x58/0xd0 [<ffffffff81073bd7>] ? sys_exit_group+0x17/0x20 [<ffffffff8100b072>] ? system_call_fastpath+0x16/0x1b 解法如下：     找到安裝CentOS時的光碟開機，開機後選擇以 Rescue 方式啟動，回答一些有關語言及網路設定等等的問題，然後它會問要從哪裡載 image ，選擇 HDD 就對了，然後磁區我是選第一個，載入的模式要我選要能 write 。     整個完全後，選擇進到 Shell 的模式。     命令下輸入：chroot /mnt/sysimage，切換成 root 身份。     命令下輸入：vi /etc/selinux/config，進入編輯器。     鍵盤輸入 i，進入插入編輯模式，修改 set SELINUX=disable 後，再按鍵盤 ESC 退出編輯模式。     鍵盤輸入 :wq ，就可以存檔並離開。     回到命令下，鍵盤輸入 exit，再鍵盤輸入 reboot。就可以重新開機，記得 CentOS 的光碟要拿出來。一切就恢復正常了。

viewport 可以設定的屬性分別如下， width：可設定數值，或者指定為 device-width height：可設定數值，或者指定為 device-height initial-scale：第一次進入頁面的初始比例 minimum-scale：允許縮小最小比例 maximum-scale：允許放大最大比例 user-scalable：允許使用者縮放，1 or 0 (yes or no) 最初執行viewport meta加入如下 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 編譯過程會轉化成如下的語意， @viewport {     width: device-width;     initial-scale: 1.0 } 基本說明 width=device-width 先提一下幾個注意的地方，首先在 viewport 裡面的 width 通常會看到設定為device-width ，主要是為了讓整個頁面寬度與手機可視寬度相同，如此就可以簡單相容於不同機型螢幕大小，如果這邊width 沒有設定的話，就會依照 html css 給予的 width 當作預設值。 因為解析度不同，device-width 有時候不一定是 view width ，所以在類似 iphone 4 高解析度機器上，device-width=320 ，可是實際解析度為 480，這時候就需要利用javascript 針對UA 下去做動態調整。 user-scalable 從屬性名稱來看就是允許開啟、關閉的設定，使用者能否放大、縮小頁面，如果頁面不允許手機使用者縮放，就直接設定為 0，或者 no，反之要啟動縮放功能，給予 1或者是 yes。 接下來將說明幾種常用的方式，以及測試驗證提供給大家參考。 基本寬度（並不是指 html body width）， <meta name="viewport" content="width=300px"> 基本高度 <meta name="viewport" content="height=300px"> 禁

需要提供一個cache manifest文件，理出所有需要在離線狀態下使用的資源 例如 Manifest代碼 CACHE MANIFEST    #這是注釋   images/sound-icon.png   images/background.png   clock.html    clock.css    clock.js       NETWORK:    test.cgi     CACHE:    style/default.css     FALLBACK:    /files/projects /projects  在html標簽中聲明 <html manifest="clock.manifest"> HTML5離線應用更新緩存機制 分爲手動更新和自動更新2種 自動更新： 在cache manifest文件本身發生變化時更新緩存 資源文件發生變化不會觸發更新 手動更新： 使用window.applicationCache Js代碼 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛       window.applicationCache.update();   ｝   在線狀態檢測 HTML5 提供了兩種檢測是否在線的方式：navigator.online（true/false） 和 online/offline事件。 在Android中構建離線應用 Java代碼 //開啓應用程序緩存   webSettingssetAppCacheEnabled(true);   String dir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();   //設置應用緩存的路徑   webSettings.setAppCachePath(dir);   //設置緩存的模式   webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);   //設置應用緩存的最大

最近研究 HTML5 最終也是想玩玩 web app ，真是個有趣的東東，web app 是直接利用 html5 做出的跨平台行動版網頁，但又多了 app 的功能，例如可以建立在手機桌面上小圖示，點下去時會產生歡迎頁面，另外加入離線網頁技術還可以讓瀏覽器保有快取的頁面，就算無線 wifi 關閉時也能開啟網頁，這時若是整合 RWD 的技術，開發 web 專案時更可以讓使用者無感跨平台障礙使用，當然若是考量效能與手機功能使用時，或許要針對開發的規劃而選擇原生 app 或者是使用其他的混合 app (cordavo) 等技術來考量，本編則先討論 web app 的技術心得。 優化 Web Content 為了區分手機跟桌面版本不同的 content，我們可以使用 Media Queries 來區分，在加上 max-device-width 和 min-device-width 去偵測整個頁面大小 (screen size)。 舉例來說，偵測 iPhone and iPod touch 裝置，可以透過底下載入 CSS <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet"> 另外如果是 Desktop 版本可以加入底下 <link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet"> 另外或者是直接在 CSS 裡面判斷:     @media screen and (min-device-width: 481px) { ... } 另外針對 screen 或 print 可以直接在 head 裡面寫入     <link rel="stylesheet" type="text/css" media="scre

value 是能夠指定 ol li 中的列表項數字 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> <ol>    <li>第一個列表項    <li value = 3>第三個列表項    <li>第四個列表項 </ol> </body> </html>

reversed 是能在 ol li 中改變列表項的數字順序 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> <ol reversed>    <li>第一個列表項    <li>第二個列表項    <li>第三個列表項 </ol> </body> </html>

ol li tag 除了能增加 type 控制數字外，還能增加 start 指定數字排序 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> <ol start = 10>    <li>第一個列表項    <li>第二個列表項    <li>第三個列表項 </ol> </body> </html>

ol li tag 能針對清單增加表項，我們還能增加 type 控制列表項的數字 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> <ol type = "I">    <li>第一個列表項    <li>第二個列表項    <li>第三個列表項 </ol> </body> </html>

利用 ul li 可以讓文字排版成兩層的列表 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> <h4>巢狀兩層的列表：</h4> <ul>   <li>唐詩</li>   <li>宋詞     <ul>       <li>李清照          <ul>           <li>如夢令</li>           <li>菩薩蠻</li>          </ul>       </li>       <li>歐陽修</li>     </ul>   </li>   <li>元曲</li> </ul> </body> </html>

dl tag 能讓文字段落排版 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> <dl>   <dt>第一項    <dd>第一子列表項    <dd>第二子列表項    <dd>第三子列表項   <dt>第二項    <dd>第一子列表項    <dd>第二子列表項    <dd>第三子列表項    <dd>第四子列表項 </dl> </body> </html>

time tag 能讓頁面產生時間而不只是文字 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="big5"> <title>Sample</title> </head> <body> <p>我們在每天早上 <time>9:00</time> 開始營業。</p> <p>我在 <time datetime="2010-02-14">情人節</time> 有個約會。</p> </body> </html>

mark tag 能讓文字產生背景顏色，例如我們可以將文字增加螢光色註記。 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> <p><mark style="background-color:yellow;">HTML5</mark>的搜索結果如下：</p> </body> </html>

code tag 能讓程式碼 (代碼) 顯示在網頁上 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> <p>   下面是一段JavaScript程式碼：<br>   <code>      var myText = "嗨，這是JavaScript程式碼！";<br>      document.write(myText);   </code> </p> </body> </html>

sub tag 能讓文字產生上標或下標的效果 範例程式如下 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>Sample</title> </head> <body> H₂O <br> E = mc² </body> </html>

安裝Ruby環境： 由於Sass是採用Ruby程式語言所寫的，因此系統需先安裝Ruby環境才能使用，因此得先到Ruby官網下載並安裝。(下載https://www.ruby-lang.org/zh_tw/documentation/installation/#rubyinstaller) 安裝Sass： 開啟命令視窗，輸入gem install sass指令，再按Enter鍵。 安裝Compass： 安裝好Sass後，接著再輸入gem install compass指令。 建立SASS專案： 首先，進到要開發專案的目錄下。 再輸入compass create project001指令。 建制完成後，會看到以下的畫面。 接著到剛所指定的專案目錄下，就會看到以下的資料夾與檔案。 Sublime Text安裝Sass： 接著開啟Sublime Text編輯器，按Ctrl + Shift +P鍵，再輸入install。 輸入sass關鍵字，再點下方的清單。 當安裝完成後，下方就會出現成功的訊息，再重覆以上步驟，分別再安裝SASS snippets、Compass二個套件。 Sublime Text使用Sass： 都完成後，就可開始來寫Sass囉!首先，進到Sublime Text後，再選擇Project / Add Folder to Project選項。 選擇剛所建立好的專案目錄。  選擇完畢後，再選擇View / Show Side Bar選項。 接著左側就會出現專案的目錄，sass是儲放原始檔的目錄，而stylesheets是轉存好的css檔。 按Alt+Shift+2，將畫面一分為二，再個別載入檔案，一個是原檔，另一個是轉出後的CSS檔。 開啟命令視窗，進入該專案的目錄下，再輸入compass watch指令，並請勿關閉此視窗，由於它會自動監控，每當Sublime Text一儲存時，就會立即轉存成css檔。 這時可看到，右邊立即就會呈現出，左邊所寫的結果。 千萬要記得，別把命令視窗給關閉了，否則會無法即時的轉檔喔! 解決中文註解發生錯誤 Error: Invalid CP950 character    參考，可以到 Ruby 的安裝

WebSocket是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協定。WebSocket通訊協定於2011年被IETF定為標準RFC 6455，WebSocketAPI被W3C定為標準。 在WebSocket API中，瀏覽器和伺服器只需要做一個交握的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。 如何進行呢? 我們提供一個範例程式來參考如下： server.php <?php ob_implicit_flush(); $addrss = '127.0.0.1'; $port = 9111; $server = socket_create(AF_INET , SOCK_STREAM , SOL_TCP); socket_set_option($server, SOL_SOCKET, SO_REUSEADDR, 1); socket_bind($server , $addrss , $port); socket_listen($server , 10); $clients[] = $server; tip("server started and listening on $port $server\n"); $blank = false; while(true){ socket_select($clients,$write=NULL,$except=NULL,NULL); //echo "e\n"; foreach($clients as $k => $sock){ //连接主机的client if($sock == $server){ $client = socket_accept($server); if($client < 0){ echo 'socket_accept() failed\n'; continue; }else{ $clients[] = $client; echo "connect client\n"; continue; } }else{ //$len = socket_recv($sock , $buffer

<meter>表示一個已知最大值最小值的計數儀表ex 剩餘電量 速度表 除了id style class hidden外還可指定 value 指定計數儀表目前值 預設為0 可指定一個浮點小數值 min 指定計數儀表最小值  預設為0 可指定一個浮點小數值 max 指定計數儀表最大值  預設為1 可指定一個浮點小數值 low 指定計數儀表 範圍的 最小值  必須大於等於min屬性指定的值 high 指定計數儀表 範圍的 最大 值   必須小 於等於max屬性指定的值 optimum 指定計數儀表 有效的 最佳 值  如果該值大於 high屬性指定的值  則意味越大越好 如果該值小於low屬性指定的值 則意味著值越小越好   <progress>用於表示進度條 可指定id class style hidden等泛用屬性外 還可指定下列屬性 max 指進度條完成的值 value 指定進度條目前完成的進度值 <!DOCTYPE html> <html> <head>     <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <title> meter progress </title> </head> <body> 當前的行車速度是:<meter value="120" min="0" max="220" low="0" high="160">     120</meter>公里/小時。<br/> 任務完成比例：<progress value="30" max="100">30/100</progress

前一篇有提到 WebRTC 功能可以達到網頁視訊，本篇我們則是要讓視訊直接秀在本機端的瀏覽器上，範例程式如下 <!DOCTYPE > <html> <head>   <meta charset="utf-8">   <meta name="description" content="WebRTC code samples">   <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">   <meta itemprop="description" content="Client-side WebRTC code samples">   <meta itemprop="image" content="webrtc-icon-192x192.png">   <meta itemprop="name" content="WebRTC code samples">   <meta name="mobile-web-app-capable" content="yes">   <meta id="theme-color" name="theme-color" content="#ffffff">   <base target="_blank">   <title>getUserMedia</title>   <link rel="icon" sizes="192x192" href="webrtc-icon-192x192.png"

WebRTC 功能嚴格說應該不算是 html5 的新功能，但 html5 支援該功能，作用於在網頁嵌入攝影機，讓兩台電腦可以透過攝影機進行對話溝通，我們寫支簡單的程式就可以做到，範例如下： <html> <head> <meta charset="utf8"> <script>     var video = document.querySelector('video');     var constraints = {         audio: false,         video: true     };     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;     function successCallback(stream) {         window.stream = stream; // stream available to console         if (window.URL) {             video.src = window.URL.createObjectURL(stream);         } else {             video.src = stream;         }     }     function errorCallback(error) {         console.log('navigator.getUserMedia error: ', error);     }     navigator.getUserMedia(constraints, successCallback, errorCallback); </script> </head>     <body>         <video id="gum-local" autoplay></video>     </body> </htm

HTML5 伺服器發送事件（server-sent event）允許網頁獲得來自伺服器的更新。 Server-Sent 事件 - 單向消息傳遞 Server-Sent 事件指的是網頁自動獲取來自伺服器的更新。 以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過伺服器發送事件，更新能夠自動到達。 例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。 範例程式如下： <!DOCTYPE html> <html> <body> <h1>自動取得伺服器更新資料</h1> <div id="result"></div> <script> if(typeof(EventSource)!=="undefined") //新增一個新的 EventSource 物件，然後規定發送更新的頁面的 URL（本例中是 "demo_sse.php"）   {   var source=new EventSource("demo_sse.php");   source.onmessage=function(event)  //每接收到一次更新，就會發生 onmessage 事件     {     document.getElementById("result").innerHTML+=event.data + "<br>"; //當 onmessage 事件發生時，把已接收的資料推入 id 為 "result" 的元素中     };   } else   {   document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";   } </script> </body> </html> 伺服器端程式碼範例 為了讓上面的例子可以執行，您還需要能夠發送資料更新的伺服器（比如 PHP 和 ASP）。 伺服器端事件流的語法是非常簡單的。把 "Co

web worker 是執行在後台的 JavaScript，不會影響頁面的性能。 什麼是 Web Worker？ 當在 HTML 頁面中執行scripts時，頁面的狀態是不可響應的，直到scripts已完成。 web worker 是執行在後台的 JavaScript，獨立於其他scripts，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在後台執行。 簡單的範例程式如下： <!DOCTYPE html> <html> <body> <p>計數 ： <output id="result"></output></p> <button onclick="startWorker()">開始</button> <button onclick="stopWorker()">停止</button> <script> var w; function startWorker() {     if(typeof(Worker) !== "undefined") {         if(typeof(w) == "undefined") {             w = new Worker("demo_workers.js");         }         w.onmessage = function(event) {             document.getElementById("result").innerHTML = event.data;         };     } else {         document.getElementById("result").innerHTML = "抱歉，你的瀏覽器不支持 Web Workers...";     } } function stopWorker() {   

HTML5的Storage儲存主要分為兩種：localStorage與sessionStorage，這兩者主要差別在於生命週期上有較明顯，localStorage的生命週期較長，原則上要等到透過Javascript將內容清掉或者使用者清空瀏覽器Cache時才會消失；而sessionStorage則是在瀏覽器或標籤頁關閉時就會被清除。其每一筆資料皆以key-value的方式存在。 與原本也可以用來儲存資料的瀏覽器Cookie不同的地方是，Storage的空間較大（至少５ＭＢ，而Cookie才４ＫＢ），而且資料永遠都不會被傳到到伺服器。同一個網域的所有網頁都可以共同存取到相同的資料。且比起Cookie，Storage安全性較高且效能也較好。 提供範例程式說明 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <meta charset="utf8">     <script src="Scripts/modernizr-2.5.3.js" type="text/javascript"></script>     <script type="text/javascript">         function onLoad() {             outputArea.value = window.localStorage.remainingSpace;             btnSave.addEventListener("click", saveToStorage);             btnLoadFromLocalStorage.addEventListener("click", loadFromLocalStorage);             btnLoadFromSessionStorage.addEventListener("click"

測試站主機效能不是很好，開發的同仁常時間連線時常發生問題，包含磁碟 I / O 效能、swap 虛擬記憶體不足、還有主機整體效能問題等等，除了換一台主機以外，救急的方式就是清除暫存記憶體，提供下列 script 讓主機可以加入cron job 中設定每分鐘自動清除暫存，程式如下： #!/bin/bash # Linux 2.6.16 之後增加 drop caches 機制 # # /proc/sys/vm/drop_caches 表示目前設定 # 0 表示開啟 cache # 1 釋放 沒在使用的 cache (一般建議) # 2 釋放 dentry, inode cache # 3 = 1 + 2 (不建議) sync;sync;echo 1 > /proc/sys/vm/drop_caches sync;sync;echo 0 > /proc/sys/vm/drop_caches sync;sync;

Canvas 和 SVG 都允許您在瀏覽器中新增圖形，但是它們在根本上是不同的。 SVG 是一種使用 XML 描述 2D 圖形的語言。 SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。 在 SVG 中，每個被繪製的圖形均被視為物件。如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。 Canvas 通過 JavaScript 來繪製 2D 圖形。 Canvas 是逐像素進行渲染的。 在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的物件。 Canvas 與 SVG 的比較以下列出了 canvas 與 SVG 之間的一些不同之處。 Canvas     依賴分辨率     不支持事件處理器     弱的文本渲染能力     能夠以 .png 或 .jpg 格式存檔結果圖像     最適合圖像密集型的遊戲，其中的許多物件會被頻繁重繪 SVG     不依賴分辨率     支持事件處理器     最適合帶有大型渲染區域的套用程式（比如谷歌地圖）     複雜度高會減慢渲染速度（任何過度使用 DOM 的套用都不快）     不適合遊戲套用

HTML5 提供一個拖放圖片的功能如下 完整程式碼： 拖放一次 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖動圖片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="images.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> 來回拖放 <!DOCTYPE HTM

一、在網頁所在資料夾下新增一檔名為.htaccess的檔案，內容如下： AddType text/cache-manifest .manifest 二、在網頁所在資料夾下新增一檔名為offline.manifest的檔案，內容如下： CACHE MANIFEST #This is a comment CACHE: index.html demo_time.js img_logo.gif PS.紅色部分為要在離線時使用的檔案列表...... 三、在一定會存取的HTML檔案中（例如：index.html）修改內容如下： 將： <html> 改成： <html manifest="offline.manifest"> 如此一來就大功告成了 四、測試 本人是使用 xampp 環境，先開啟網頁讓瀏覽器紀錄暫存，然後將 apache 關閉，神奇的事情發生了，網頁依然能開啟暫存的網頁，假如此時修改網頁的文字，reload 一下是否你也會發現，網頁依然紀錄先前的內容呢? 完整程式碼如下 index.html <!DOCTYPE html> <html manifest="offline.manifest"> <head> <meta charset="utf8"> </head> <body> <script src="demo_time.js"></script> <p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p> <p><img src="img_logo.gif" width="336" height="69"></p> <p>離線測試</p> </body>

<ruby> 標籤定義 ruby 註釋（中文注音或字元）。 在東亞使用，顯示的是東亞字元的發音。 與 <ruby> 以及 <rt> 標籤一同使用： ruby 元素由一個或多個字元（需要一個解釋/發音）和一個提供該訊息的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> </head> <body>      <ruby>漢          <rp>(</rp>            <rt>ㄏㄢ、</rt>          <rp>)</rp>      </ruby> </body> </html>

DNS 解決方案，使用 CDN，把資源檔的請求分散到多個不同域名上。 HTTP Headers (Expires, Cache-Control, If-Modified-Since )。 所有 Steve Sounders 說的規範，參考：高效能網頁 (http://shop.oreilly.com/product/9780596529307.do ) 。 如何解決所有 PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline 上列出的問題。 什麼時候要把事情交給 Server，什麼時候要交給前端。 利用快取 (cache), 預先抓取 (pre-fetching) 跟 延後載入 (post-load) 技巧。 原生 Javascript，知道何時要自己刻，何時要去找別人的程式碼來參考，同時還能夠評估出優點跟缺點再去做。 新潮的 MVC Javascript 函式庫知識跟用法 ( 例如：AngularJS, EmberJS, ReactJS )，圖形函式庫 ( 例如：D3, SnapSVG )，DOM 操作函式庫 ( 例如：JQuery, Zepto )，延遲載入 (lazy loading) 或是 package 管理函式庫 ( 例如：RequireJS, CommonJS ), 任務管理 ( 例如：Grunt, Gulp )，package 管理 ( 例如：Bower, Componentjs ) 及 測試 ( 例如：Protractor, Selenium )。 圖片格式，優點，何時使用哪一種，如何使用。圖片的優化技巧，載入的策略 ( Sprites, lazy loading 技巧, 快取刷新, PNG 交錯)。 CSS 標準的知識與用法，現代規範與策略 ( 例如：BEM, SMACSS, OOCSS )。 Javascript 在電腦科學的部分 ( memory management,single threaded nature, garbage collector algorithms, timeouts, scoping, hoisting, patterns )。

直接看範例 ajax.html　 <!DOCTYPE html> <html> <head> <meta charset="utf8"> <script> function showHint(str) {      if (str.length == 0) {          document.getElementById("txtHint").innerHTML = "";          return;      } else {          var xmlhttp = new XMLHttpRequest();          xmlhttp.onreadystatechange = function() {              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {                  document.getElementById("txtHint").innerHTML = xmlhttp.responseText;              }          }          xmlhttp.open("GET", "gethint.php?q="+str, true);          xmlhttp.send();      } } </script> </head> <body> <p><b>請輸入要查詢名字:</b></p> <form> 姓名: <input type="text" onkeyup="showHint(this.value)"> </form> <p>提示建議: <span id="txtHint"></span></p> </body> </html> gethi

什麼是 JSON JSON 是個以純文字為基底去儲存和傳送簡單結構資料，你可以透過特定的格式去儲存任何資料(字串,數字,陣列,物件)，也可以透過物件或陣列來傳送較複雜的資料。一旦建立了您的 JSON 資料，就可以非常簡單的跟其他程式溝通或交換資料，因為 JSON 就只是純文字個格式。 JSON 的優點如下:     相容性高     格式容易瞭解，閱讀及修改方便     支援許多資料格式 (number,string,booleans,nulls,array,associative array)     許多程式都支援函式庫讀取或修改 JSON 資料 JSON 應用在哪些地方 JSON 最常用用在 Web 網頁程式從 Server 端傳送資料給 browser，典型範例就是透過 AJAX 方式交換 JSON 資料，底下簡單舉個範例     使用者點選了線上產品縮圖     JavaScript 透過 AJAX 方式將產品 ID 傳送給伺服器端     伺服器端收到 ID，將產品資料 (ex 價格,描述) 編碼成 JSON 資料，並且回傳給瀏覽器     JavaScript 收到 JSON 資料，將其解碼 (decode) 並且將資料顯示在網頁上 您也可以透過網頁將 JSON 資料傳到伺服器端，這都是可以的，把 POST 或 GET 資訊編碼成 JSON 格式即可，如果有在使用 jQuery，它提供了兩個函式處理 JSON，分別是 getJSON 跟 parseJSON。 如何建立 JSON 字串 可以透過底下規則來建立 JSON 字串     JSON 字串可以包含陣列 Array 資料或者是物件 Object 資料     陣列可以用 [ ] 來寫入資料     物件可以用 { } 來寫入資料     name / value 是成對的，中間透過 (:) 來區隔 物件或陣列的 value 值可以如下:     數字 (整數或浮點數)     字串 (請用 “” 括號)     布林函數 (boolean) (true 或 false)     陣列 (請用 [ ] )     物件 (請用 { } )     NULL 一個簡單的 JSON 範例 {   "orderID": 12345,   "shopperName":

將表單的帳號與密碼用ajax的方式，傳給php處理，再將值傳回。 $.ajax 就是jQuery的用  ajax 的寫法。 check.html <html> <head>     <meta charset="utf8">     <script type="text/javascript" src="jquery-1.2.6.js"></script>     <script type="text/javascript">     $(document).ready(function(){         $("form").submit(function(){             var myhtml = $.ajax({                 type:"POST",  //傳值方式有分 post & get                 url:"bb.php",                 data:{ name:$('#name').val(),pass:$('#pass').val()  },//將表單的值設定好                 async:false             }).responseText;             alert(myhtml);         });               })     </script> </head> <body> <form id="form1" name="form1" method="post" action="">   <p>帳號：     <input name="name" type="text" id="name" />   </p>   <p>密碼：