这一周主要是看了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属性,当用户在文本框中输入“南”时,则在输入框的下方自动出现补全提示,效果如,百度的搜索框。
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集合访问样式表
这里是这个周的工作笔记:
这个周主要工作内容是手机端报表的制作与修改,实现日期与数据的联动效果,代码与效果参考: