Web h5開發(fā) 初學總結

發(fā)表時間：2018-7-25

發(fā)布人：葵宇科技

瀏覽次數：65

h5寬泛定義

html5 = 標記+javascript api+css

HTML標記（也稱為結構）

CSS樣式（也稱為表示）

JavaScript（也稱為行為）

h5前后對比

H4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.3c.org/TR/html4/strict.dtd">
<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 
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="lounge.css">
<script src="lounge.js"></script>

h5工作方式

1.瀏覽器加載一個文檔，其中包括HTML寫的標記和CSS寫的樣式
2.瀏覽器加載頁面時，還會為你的文檔創(chuàng)建一個內部模型，其中包含HTML標記的所有元素
這里寫圖片描述

<1.對于html中的每個元素，瀏覽器會創(chuàng)建一個表示該元素的對象，把它與所有其他元素放在一個類似樹的結構中
<2.我們把這個樹稱為文檔對象模型（document object model），或者簡稱為dom。

3.瀏覽器加載頁面時，還會加載JavaScript代碼，通常頁面加載之后就開始執(zhí)行這些代碼
4.通過這些API，你可以訪問音頻和視頻、使用畫布完成2D繪圖，訪問本地存儲，還可以使用構建應用所需的很多其他優(yōu)秀技術。要記住，要想使用所有的這些API，需要用到JavaScript

瀏覽器支持h5的現狀

視頻音頻畫布web存儲地理定位web工作線程離線web應用Firefox支持支持支持支持支持支持Safari支持支持支持支持支持支持Chrome支持支持支持支持支持支持MobileWebKit支持支持支持支持支持支持Opera支持支持支持支持支持支持IE6/7IE8 支持 IE9支持支持支持支持支持

對應瀏覽器輸入html5test.com即可獲取到當前瀏覽器對h5支持的程度

JavaScript相關知識

頁面中添加JavaScript

<head> 頁面加載之前就會執(zhí)行
<body> 頁面加載時候執(zhí)行

大多數情況，代碼會增加到頁面的head的部分，如果將代碼增加到體的末尾，這會使性能稍有提升，不過只有確實需要深度優(yōu)化頁面性能時才有必要這么做。

一件重要的事情，頁面完全加載之后再執(zhí)行JavaScript代碼

做法如下：

<script>
function init(){
        …
}
window.onload = init;
</script>

頁面完全加載之前不要打擾DOM

1.瀏覽器加載頁面創(chuàng)建文檔的一個內部模型，包括標記的所有元素
2.Js可以與dom交互來訪問元素以及元素中的內容，js可以使用dom來創(chuàng)建修改刪除元素等
3.Js修改了dom時，瀏覽器會動態(tài)更新頁面

頁面完全加載之前，去調js，如果dom沒有創(chuàng)建，那么<p id=“greenplanet”>根本不存在。
window.onload = init 不加括弧是因為加了括號會調用函數，而不是使用它的值

命名規(guī)范

JavaScript 命名規(guī)范

var thisNotAJoke;
var _myVariable;
var $importantVar;

變量名駝峰式“camel case”記法
一個噴火的雙頭龍 twoHeadDragonWithFire

HTML 標簽id命名規(guī)范全小寫 id=“playlist”
文件夾/文件命名規(guī)范短線"-" basic-config-register

html標記大小寫不敏感，javascript大小寫敏感

詳細使用

1.javascript只有一個全局域，避免沖突，盡可能減少全局變量
2.向一個沒有聲明的新變量名賦值（沒有var）會當做一個全局變量
3.函數可以不指定函數名

var f = function(num){
return num +1;
}
var result = f(1); //用變量來調用函數

4.創(chuàng)建一個對象

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程序的全局環(huán)境
location 包含頁面的url
status 包含將在瀏覽器區(qū)顯示的一個串（左下角）
>var work = new Worker("worker.js");// worker.js是線程的實現代碼 window.onload = function(){ var work = new Worker("worker.js"); work.postMessage("ping"); }
可以發(fā)送串、數組、json對象等復雜的消息，但不能發(fā)送函數

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 屬性，包含工作線程發(fā)送的消息
event.target 工作線程的引用，可以知道消息來自哪個工作線程
postmessage 向工作線程傳遞一個消息
>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();//如果正在運行，那么會異常終止。終止后無法重用，只能再創(chuàng)建新的工作線程。
worker.onerror = function(error){//捕獲工作線程中的錯誤
}
工作線程中還可以創(chuàng)建子工作線程。

本地存儲

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元素
<video controls
            autoplay
            src="video/preroll.mp4”//視頻源位置
            width="480" height="360"
            poster="images/prerollposter.jpg"
            id="video"
</video>
不同瀏覽器，視頻控件外觀不同

主流瀏覽器支持3種不同視頻格式
1.MP4 H.264視頻編碼 AAC音頻編碼
2.WebM Vp8視頻編碼 Vorbis音頻編碼
3.Ogg Theora視頻編碼 Vorbis音頻編碼
<video controls src="video/preroll.mp4"//視頻源位置
            width="480" height="360"
            poster="images/prerollposter.jpg"
            id="video”
	  <source src="video/preroll.mp4">
           <source src="video/preroll.webm">
           <source src="video/preroll.ogv">
           <p>Sorry,your browser doesn't support the video element</p>
</video>
瀏覽器從上往下查找,直到找到它能播的一種格式

具體的指向一種視頻格式
<source src="video/preroll.ogv" type='video/ogg; codecs="theora,vorbis"'>
Flash作為退路
<video controls
            autoplay
            src="video/preroll.mp4"//視頻源位置
            width="480" height="360"
            poster="images/prerollposter.jpg"
            id="video”
	  <object>…</object>//如果瀏覽器不認識video元素,就會使用object
</video>