Web h5开发 初学总结
###h5宽泛定义
html5 = 标记+javascript api+css
HTML标记（也称为结构）
CSS样式（也称为表示）
JavaScript（也称为行为）
###h5前后对比
H4
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link type="text/css" rel="stylesheet" href="lounge.css">
<script type="text/javascript" src=”lounge.js”>script>
H5
<meta charset="utf-8">
<link rel="stylesheet" href="lounge.css">
<script src="lounge.js">script>
###h5工作方式
1.浏览器加载一个文档，其中包括HTML写的标记和CSS写的样式
2.浏览器加载页面时，还会为你的文档创建一个内部模型，其中包含HTML标记的所有元素
<1.对于html中的每个元素，浏览器会创建一个表示该元素的对象，把它与所有其他元素放在一个类似树的结构中
<2.我们把这个树称为文档对象模型（document object model），或者简称为dom。
3.浏览器加载页面时，还会加载JavaScript代码，通常页面加载之后就开始执行这些代码
4.通过这些API，你可以访问音频和视频、使用画布完成2D绘图，访问本地存储，还可以使用构建应用所需的很多其他优秀技术。要记住，要想使用所有的这些API，需要用到JavaScript
###浏览器支持h5的现状
| 视频 | 音频 | 画布 | web存储 | 地理定位 | web工作线程 | 离线web应用 |
|---|---|---|---|---|---|---|
| Firefox | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| Safari | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| Chrome | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| MobileWebKit | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| Opera | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| IE6/7 | ||||||
| IE8 | 支持 | |||||
| IE9 | 支持 | 支持 | 支持 | 支持 | 支持 |
对应浏览器输入html5test.com即可获取到当前浏览器对h5支持的程度
###JavaScript相关知识
页面中添加JavaScript
<head> 页面加载之前就会执行
<body> 页面加载时候执行
大多数情况，代码会增加到页面的head的部分，如果将代码增加到体的末尾，这会使性能稍有提升，不过只有确实需要深度优化页面性能时才有必要这么做。
一件重要的事情，页面完全加载之后再执行JavaScript代码
做法如下：
<script>
function init(){
…
}
window.onload = init;
script>
页面完全加载之前不要打扰DOM
1.浏览器加载页面创建文档的一个内部模型，包括标记的所有元素
2.Js可以与dom交互来访问元素以及元素中的内容，js可以使用dom来创建修改删除元素等
3.Js修改了dom时，浏览器会动态更新页面
页面完全加载之前，去调js，如果dom没有创建，那么
根本不存在。
window.onload = init 不加括弧是因为加了括号会调用函数，而不是使用它的值
###命名规范
JavaScript 命名规范
var thisNotAJoke;
var _myVariable;
var $importantVar;
变量名 驼峰式“camel case”记法
一个喷火的双头龙 twoHeadDragonWithFire
HTML 标签id命名规范 全小写 id=“playlist”
文件夹/文件命名规范 短线"-" basic-config-register
html标记大小写不敏感，javascript大小写敏感
###详细使用
1.javascript只有一个全局域，避免冲突，尽可能减少全局变量
2.向一个没有声明的新变量名赋值（没有var）会当做一个全局变量
3.函数可以不指定函数名
var f = function(num){
return num +1;
}
var result = f(1); //用变量来调用函数
4.创建一个对象
var fido = {
name:"Fideo",
weight:40,
breed:"Mixed",
loves:["walks", "fetching baslls"]
}
1>访问属性
fido["breed"] 或者 fido.breed
2>枚举所有属性 for-in
var prop;
for(prop in fido){
if(prop=="name"){
…
}
}
3>添加属性 只需为一个新属性名赋值
fido.age = 5; //fido会多出一个age属性
4>删除属性
delete fido.age;
5.把对象作为参数传入一个函数时候，相当于传递的是对象的指针
function loseWeight(dog){
dog.weight = dog.weight – 10;
}
fido.weight = 48;
loseWeight(fido);
fido里的weight也会减去10；
对象也可以有行为
var fido = {
name:"Fideo",
weight:40,
breed:"Mixed",
loves:["walks", "fetching baslls"]，
bark: function(){
alert("Woof woof! ");
}
}
fido. bark();调用fido的brak方法
6.this关键字
var fido = {
name:"Fideo",
weight:40,
breed:"Mixed",
loves:["walks", "fetching baslls"]，
bark: function(){
this.weight = 30;
alert("Woof woof!");
}
}
this获得fido对象引用
7.构造函数
function Dog(name,breed,weight){
this.name = name;
this.breed = breed;
this.weight = weight;
this.bark = function(){
if(this.weight>25){
alert("this.name"+"says Woof!");
}else{
alert("this.name"+"says Yip!");
}
};
}
var fido = new Dog("Fido", "Mixed",38);//调用构造函数
fido.bark();
###关键字API
window
window 对象表示你的JavaScript程序的全局环境
location 包含页面的url
status 包含将在浏览器区显示的一个串（左下角）
onload 包含完全加载时要调用的函数
document 包含DOM
alert prompt open close
setTimeout 一定时间间隔调用一个处理程序
setInterval 一个指定时间间隔反复调用一个处理程序
document
用来访问DOM的对象
domain 属性 提供文档服务器的域
title 属性 得到文档标题
URL 文档的URL
getElementById 通过id获取元素
getElementByTagName
getElementByClassName
createElement 创建新的元素
元素对象 p
innerHTML 设置或者获取标签间的html
childElementCount 有多少子元素
firstChild 第一个子元素
appendChild 向DOM插入新元素
insertBefore 插入新元素
setAttribute 设置元素中的属性 src class id等
getAttribute 获取元素中的属性
###Web工作线程
1.不能访问DOM，由单独的js控制，通过消息和主线程通信
2.实现
在主线程中创建一个web工作线程
var work = new Worker("worker.js");// worker.js是线程的实现代码
window.onload = function(){
var work = new Worker("worker.js");
work.postMessage("ping");
}
可以发送串、数组、json对象等复杂的消息，但不能发送函数
3.从工作线程接收消息
window.onload = function(){
var work = new Worker("worker.js");
work.postMessage("ping");
work.onmessage = function(event){
var message ="Worker says"+ event.data;
document.getElementById("output").innerHTML = message;
}
}
event.data 属性，包含工作线程发送的消息
event.target 工作线程的引用，可以知道消息来自哪个工作线程
postmessage 向工作线程传递一个消息
onmessage 得到工作线程提交的event事件对象
4.工作线程的消息处理
onmessage = pingPong;
function pingPong(event){
if(event.data=="ping"){
postMessage("pong");
}
}
5.importScript
Web工作线程的一个全局函数，可以使用这个函数向工作线程中导入一个或多个JavaScript文件。
importScript("http://bigscience.org/nuclear.js",//文件或者URL
"http://nasa.gov/rocket.js",
"mylibs/atomsmasher.js");
//终止工作线程
worker.terminate();//如果正在运行，那么会异常终止。终止后无法重用，只能再创建新的工作线程。
worker.onerror = function(error){//捕获工作线程中的错误
}
工作线程中还可以创建子工作线程。
###本地存储
Cookie 包含一些键值对
Web存储
1.页面可以在浏览器的本地存储中存储一个或多个键值对
2.然后使用键来获取相应的值
localStorage.setItem("sticky_0", "Pick up dry cleaning");
var sticky = localStorage.getItem("sticky_0");
var sticky = localStorage ["sticky_0"];//可以把localStorage对象看成一个关联数组
localStorage.removeItem("sticky_0");
注：浏览器每个域只有5MB的存储空间
遍历localStorage
for(var i=0;i<localStorage.length;i++){
var key = localStorage.key(i);
var value = localStorage[key];
}
localStorage只能存储字符串，但是可以利用JSON 的stringfy和parse方法，把数组或者对象转换成字符串后存进去。
###video元素
不同浏览器，视频控件外观不同
主流浏览器支持3种不同视频格式
1.MP4 H.264视频编码 AAC音频编码
2.WebM Vp8视频编码 Vorbis音频编码
3.Ogg Theora视频编码 Vorbis音频编码
浏览器从上往下查找,直到找到它能播的一种格式
具体的指向一种视频格式
<source src="video/preroll.ogv" type='video/ogg; codecs="theora,vorbis"'>
Flash作为退路