这一周主要是看了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集合访问样式表
这里是这个周的工作笔记：
这个周主要工作内容是手机端报表的制作与修改,实现日期与数据的联动效果，代码与效果参考：