a. Browser support / not support Canvas
1. IE8 not support
2. Chrome support
3. Firefox support
b. Canvas itself has no drawing ability, need using Javascript to draw it
1.以下程式碼順序不可相反
1. The following code sequences cannot be reversed
c. 滑鼠點色塊，色塊就往右移動
c. Click on the color block and the color block will move to the right.
Code:
PS：Advance reference websites
HighChars ：Provide Provide graphics such as drawing reports (提供繪製報表等圖形)
http://www.highcharts.com/
http://www.dotblogs.com.tw/lastsecret/archive/2011/01/30/21137.aspx
2. File structure element (檔案結構元素 )
a. 結構元素
1. <div> 可以分區段，但是沒有語義。
2. 利用 HTML5 新增的檔案結構元素，代替<div>，並可含有語義，使得更加易讀，也可讓搜尋引擎更好的理解頁面的內容和各部分之間的關係。
3. 文章語義：<artical>、<header>、<footer>
4. 內容區塊語義：<section>
5. 側欄和瀏覽：<aside>、<nav>
6. 當一個容器需要被直接定義樣式或通過程式定義行為時，建議使用<div>元素而非<section>。
a. Structure element
1. <div> can be divided into sections, but without semantics.
2. Use HTML5's new file structure elements instead of <div>, and can contain semantics, making it easier to read, and also let the search engine better understand the content of the page and the relationship between the parts.
3. Article semantics: <artical>, <header>, <footer>
4. Content block semantics: <section>
5. Sidebar and browse: <aside>, <nav>
6. When a container needs to be directly defined or defined by a program, it is recommended to use a <div> element instead of a <section>.
3. Offline web app (離線網路應用程式)
a. 離線瀏覽
1. 需使用 manifest 檔來輔助離線瀏覽
2. manifest 紀錄需要 cache 的資源有哪些，也就是需要下載的檔案及圖片包還那些。
3. 連結資料庫所取得的資料無法使用 manifest 來達成離線瀏覽。
a. Offline browsing
1. Use the manifest file to assist offline browsing
2. The manifest records the resources that need to be cached, that is, the files and image packages that need to be downloaded.
3. The data obtained from the linked database cannot be accessed using the manifest.
4. Focus
a. Move focus to an element (將焦點移到某個元素上)
1. 使用tab瀏覽: 按 tab 會跳到 a2
1. Use tab to browse: when press tab to jump to a2
<form id="form1" name="form1" method="post" action="">
<label for="a1">a1:</label>
<input type="text" name="a1" id="a1" />
</form>
<form id="form2" name="form2" method="post" action="">
<label for="a2">a2:</label>
<input type="text" name="a2" id="a2" />
</form>
2.一進頁面，游標就在可輸入文字的地方
2. Once in the page, the cursor is in the place where you can enter text.
<script>
document.getElementById("a1").focus();
</script>
3. Regardless of where the cursor is, press Enter to send it. (002.html sent to 001.html)
因為按鈕的 type 是submit，而且是針對一整個 form1。
Because the type of the button is submit, and it is for an entire form1.
按下 Enter 後轉至001.html
Press Enter and go to 001.html
4. 不論游標在哪裡，按 Enter 都不會送出。只有用滑鼠按 "按鈕" 才會送出。(003.html 送出到 001.html)
4. Regardless of where the cursor is, press Enter and it will not be sent. It will only be sent by pressing the "button" with the mouse. (003.html sent to 001.html)
因為按鈕的 type 僅是 button，而 submit 是寫在 on-click 事件裡面，因此只有當滑鼠按下按鈕時，才會觸發事件"送出"，然後將頁面轉至 001.html。
Because the button's type is the only button and submit is written in the on-click event, the event "send" is triggered only when the mouse is pressed, and then the page is moved to 001.html.
按下按鈕後轉至001.html
Press the button and go to 001.html
b. Drag and Drop
1. Result
2. Create CSS code
3. Create JavaScript & function events
No comments:
Post a Comment