這一周主要是看了html5網頁開發實例與javascript 高級程式設計，供以後翻閱查找。html5網頁開發實例第1章與第二章的2.1部分：第1章內容：html5在w3c的發展史、瀏覽器的相容問題、搭建開發h5的瀏覽器環境、h5在移動應用開發領域的前景我主要看了【搭建開發h5的瀏覽器環境】， 因為...
這一周主要是看了html5網頁開發實例與javascript 高級程式設計，供以後翻閱查找。
html5網頁開發實例第1章與第二章的2.1部分：
第1章內容：
html5在w3c的發展史、
瀏覽器的相容問題、
搭建開發h5的瀏覽器環境、
h5在移動應用開發領域的前景
我主要看了【搭建開發h5的瀏覽器環境】， 因為工作中主要的用來調試代碼的工具是chrome，而這篇文章也在講解這款瀏覽器強大的開發工具，講解了chrome提供的8大組工具：
Elements: 這個工具主要是用於查看chrome渲染頁面所需要的的HTML、CSS和DOM(Document Object Model)對象。此外，還可以編輯這些內容更改頁面顯示效果，我通常用來調試CSS樣式；
Network: 可以看到頁面向伺服器請求了哪些資源，花了多少時間以及資源大小，是否請求成功，請求成功後的返回值；
Sources： 幾乎是我最常用到的Chrome功能面板，也是在我看來決解一般問題的主要功能面板。我主要是使用斷點功能來調試JS的報錯問題，可以使用一些快捷鍵：
- 快速確定某一行：ctrl+G;
- 快速查找文本：ctrl+F;
- JS的路徑一步步走下去的話，不過這個快捷健不會跳進函數內部，按 F10;
- 如果一個函數包含著另一個函數的話，可以按 F11 進入函數包去查看代碼，也可以點擊圖標對代碼進行跟蹤;
Watch : 它的作用是為目前斷點添加表達式，我主要用來查找斷點中是否有值。需要註意的是這個功能必須謹慎使用，因為這可能會導致你寫下的監控代碼段會不斷地被執行，所以要把調試後的代碼要刪除。
第2章 2.1內容：
最新的交互元素、
頁面結構、
其它標簽元素
我主要瞭解在【其它標簽元素】中的datalist元素，它與input元素配合使用，文本框使用datalist的數據進行提示時，將input的list屬性設置為指向datalist的id屬性，當用戶在文本框中輸入“南”時，則在輸入框的下方自動出現補全提示，效果如，百度的搜索框。
<input list = 'province' /> <datalist id = 'province'> <option value='背景'> <option value='南湖社區'> <option value='上海市'> </datalist>
mark 元素用於標記文本，比如高亮顯示，和span用法相似：<mark>南湖社區</mark>
video 元素，視頻元素，在網頁中加入一段視頻： <video src='視頻地址' controls='controls' preload='preload'></video>
controls 是否顯示vidio的預設控制項，如前進、停止、聲音控制等；
preload 頁面載入時自動進行視頻載入；
javascript 高級程式設計 第11章 第12章
第11章 DOM擴展 內容
selector()方法、
html5 數據屬性 焦點方法、
專有擴展 滾動
我主要瞭解了selector()方法與滾動。
selector()方法 調用它時，會在文檔元素中查找匹配的元素，而通過Element調用queryselector()方法時，只會在該元素的後代查找匹配的元素。這個匹配的元素是一個CSS選擇符。
selector()方法屬於selectorAPI，它讓開發人員能夠基於css選擇器從Dom中取得元素。
//取得類為btn的所有的元素
var btns = document.querySelectorAll('btn');
//取得類為btn的第一個元素
var btns = document.querySelector('.btn');
比較詳細的瞭解滾動scrollIntoView()，是因為最近在做手機端報表，圖表大於2個，就會產生滾動效果。需要註意的是：scrollIntoView() 、 scrollIntoViewIfNeeded()是作用於對象元素的容器，而scrollByLines() 、 scrollByPages()是作用於元素本身。
而上面的這四種方法中，只有scrollIntoView()是唯一一個所有瀏覽器都支持的方法，也是最常用的方法。
DOM的滾動 scrollIntoView()
DOM規範中並沒有規定各瀏覽器需要實現怎樣的滾動頁面區域,各瀏覽器為了實現相應的效果，作為ElementHTML擴展的存在，定義瞭如下的方法：
- scrollIntoView() 滾動瀏覽器容器或容器，以方便在當前容器的可見區域內看見該元素，參數為alignWithTop，如果alignWithTop結果為true或者省略它，元素本身會儘可能的滾動到與容器頂部齊平的位置；
- scrollByLines(lineCount) 將元素內容滾動到指定的行數的高度，lineCount的值可以為正值或是負值。大部分瀏覽器不支持，不過chrome是支持的；
- scrollByPages(pageCount) 將元素滾動到指定的頁面高度，具體的高度由元素的高度決定；
第12章 DOM2和DOM3 內容
DOM2和DOM3的變化、
操作樣式的DOM API、
DOM的遍歷與範圍
這節的內容大概的瀏覽了一下，文章的內容在理解上有點困難，總結為DOM2定義了一些模塊，是為了增加DOM1，DOM2的核心內容與HTML文檔沒有實際的意義；DOM2的樣式模塊主要針對操作元素的樣式信息而開發，總結為：
- 每個樣式都有一個關聯的style對象，用於修改行內樣式
- 要確定每個元素的計算樣式，可以使用getComputedStyle()方法，但是IE不支持
- 可以通過document.styleSheets集合訪問樣式表
這裡是這個周的工作筆記：
這個周主要工作內容是手機端報表的製作與修改,實現日期與數據的聯動效果，代碼與效果參考：
