Web h5開發 初學總結 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站，軟件還是(shì)小程序，都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值，我們在(zài)追求其視覺表現的(de)同時(shí)，更側重于(yú)功能的(de)便捷，營銷的(de)便利，運營的(de)高效，讓網站成爲(wéi / wèi)營銷工具，讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持！

您當前位置>首頁 » 新聞資訊 » 網站建設 >

Web h5開發 初學總結

發表時(shí)間：2018-7-25

發布人(rén)：融晨科技

浏覽次數：65

h5寬泛定義

html5 = 标記+javascript api+css

HTML标記（也(yě)稱爲(wéi / wèi)結構）

CSS樣式（也(yě)稱爲(wéi / wèi)表示）

JavaScript（也(yě)稱爲(wéi / wèi)行爲(wéi / wèi)）

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.浏覽器加載一個(gè)文檔，其中包括HTML寫的(de)标記和(hé / huò)CSS寫的(de)樣式
2.浏覽器加載頁面時(shí)，還會爲(wéi / wèi)你的(de)文檔創建一個(gè)内部模型，其中包含HTML标記的(de)所有元素
這(zhè)裏寫圖片描述

<1.對于(yú)html中的(de)每個(gè)元素，浏覽器會創建一個(gè)表示該元素的(de)對象，把它與所有其他(tā)元素放在(zài)一個(gè)類似樹的(de)結構中
<2.我們把這(zhè)個(gè)樹稱爲(wéi / wèi)文檔對象模型（document object model），或者簡稱爲(wéi / wèi)dom。

3.浏覽器加載頁面時(shí)，還會加載JavaScript代碼，通常頁面加載之(zhī)後就(jiù)開始執行這(zhè)些代碼
4.通過這(zhè)些API，你可以(yǐ)訪問音頻和(hé / huò)視頻、使用畫布完成2D繪圖，訪問本地(dì / de)存儲，還可以(yǐ)使用構建應用所需的(de)很多其他(tā)優秀技術。要(yào / yāo)記住，要(yào / yāo)想使用所有的(de)這(zhè)些API，需要(yào / yāo)用到(dào)JavaScript

浏覽器支持h5的(de)現狀

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

對應浏覽器輸入html5test.com即可獲取到(dào)當前浏覽器對h5支持的(de)程度

JavaScript相關知識

頁面中添加JavaScript

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

大(dà)多數情況，代碼會增加到(dào)頁面的(de)head的(de)部分，如果将代碼增加到(dào)體的(de)末尾，這(zhè)會使性能稍有提升，不(bù)過隻有确實需要(yào / yāo)深度優化頁面性能時(shí)才有必要(yào / yāo)這(zhè)麽做。

一件重要(yào / yāo)的(de)事情，頁面完全加載之(zhī)後再執行JavaScript代碼

做法如下：

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

頁面完全加載之(zhī)前不(bù)要(yào / yāo)打擾DOM

1.浏覽器加載頁面創建文檔的(de)一個(gè)内部模型，包括标記的(de)所有元素
2.Js可以(yǐ)與dom交互來(lái)訪問元素以(yǐ)及元素中的(de)内容，js可以(yǐ)使用dom來(lái)創建修改删除元素等
3.Js修改了(le／liǎo)dom時(shí)，浏覽器會動态更新頁面

頁面完全加載之(zhī)前，去調js，如果dom沒有創建，那麽<p id=“greenplanet”>根本不(bù)存在(zài)。
window.onload = init 不(bù)加括弧是(shì)因爲(wéi / wèi)加了(le／liǎo)括号會調用函數，而(ér)不(bù)是(shì)使用它的(de)值

命名規範

JavaScript 命名規範

var thisNotAJoke;
var _myVariable;
var $importantVar;

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

HTML 标簽id命名規範 全小寫 id=“playlist”
文件夾/文件命名規範 短線"-" basic-config-register

html标記大(dà)小寫不(bù)敏感，javascript大(dà)小寫敏感

詳細使用

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

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

4.創建一個(gè)對象

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>添加屬性 隻需爲(wéi / wèi)一個(gè)新屬性名賦值

fido.age = 5; //fido會多出(chū)一個(gè)age屬性

4>删除屬性

delete fido.age;

5.把對象作爲(wéi / wèi)參數傳入一個(gè)函數時(shí)候，相當于(yú)傳遞的(de)是(shì)對象的(de)指針

function loseWeight(dog){
	dog.weight = dog.weight – 10;
}
fido.weight = 48;
loseWeight(fido);

fido裏的(de)weight也(yě)會減去10；
對象也(yě)可以(yǐ)有行爲(wéi / wèi)

var fido = {
      name:"Fideo",
      weight:40,
      breed:"Mixed",
      loves:["walks", "fetching baslls"]，
      bark: function(){
            alert("Woof woof! ");
      }
} 
fido. bark();調用fido的(de)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 對象表示你的(de)JavaScript程序的(de)全局環境
location 包含頁面的(de)url
status 包含将在(zài)浏覽器區顯示的(de)一個(gè)串（左下角）
>var work = new Worker("worker.js");// worker.js是(shì)線程的(de)實現代碼 window.onload = function(){ var work = new Worker("worker.js"); work.postMessage("ping"); }

可以(yǐ)發送串、數組、json對象等複雜的(de)消息，但不(bù)能發送函數

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 屬性，包含工作線程發送的(de)消息
event.target 工作線程的(de)引用，可以(yǐ)知道(dào)消息來(lái)自哪個(gè)工作線程

postmessage 向工作線程傳遞一個(gè)消息
>onmessage = pingPong; function pingPong(event){ if(event.data=="ping"){ postMessage("pong"); } }

5.importScript
Web工作線程的(de)一個(gè)全局函數，可以(yǐ)使用這(zhè)個(gè)函數向工作線程中導入一個(gè)或多個(gè)JavaScript文件。

importScript("http://bigscience.org/nuclear.js",//文件或者URL
		  "http://nasa.gov/rocket.js",
                     "mylibs/atomsmasher.js");

//終止工作線程
worker.terminate();//如果正在(zài)運行，那麽會異常終止。終止後無法重用，隻能再創建新的(de)工作線程。
worker.onerror = function(error){//捕獲工作線程中的(de)錯誤
}

工作線程中還可以(yǐ)創建子(zǐ)工作線程。

本地(dì / de)存儲

Cookie 包含一些鍵值對

Web存儲
1.頁面可以(yǐ)在(zài)浏覽器的(de)本地(dì / de)存儲中存儲一個(gè)或多個(gè)鍵值對
2.然後使用鍵來(lái)獲取相應的(de)值

localStorage.setItem("sticky_0", "Pick up dry cleaning");
var sticky = localStorage.getItem("sticky_0");
var sticky = localStorage ["sticky_0"];//可以(yǐ)把localStorage對象看成一個(gè)關聯數組
localStorage.removeItem("sticky_0");

注：浏覽器每個(gè)域隻有5MB的(de)存儲空間

遍曆localStorage

for(var i=0;i<localStorage.length;i++){
    var key = localStorage.key(i);
    var value = localStorage[key];
}

localStorage隻能存儲字符串，但是(shì)可以(yǐ)利用JSON 的(de)stringfy和(hé / huò)parse方法，把數組或者對象轉換成字符串後存進去。

video元素

<video controls
            autoplay
            src="video/preroll.mp4”//視頻源位置
            width="480" height="360"
            poster="images/prerollposter.jpg"
            id="video"
</video>

不(bù)同浏覽器，視頻控件外觀不(bù)同

主流浏覽器支持3種不(bù)同視頻格式
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>

浏覽器從上(shàng)往下查找,直到(dào)找到(dào)它能播的(de)一種格式

具體的(de)指向一種視頻格式

<source src="video/preroll.ogv" type='video/ogg; codecs="theora,vorbis"'>

Flash作爲(wéi / wèi)退路

<video controls
            autoplay
            src="video/preroll.mp4"//視頻源位置
            width="480" height="360"
            poster="images/prerollposter.jpg"
            id="video”
	  <object>…</object>//如果浏覽器不(bù)認識video元素,就(jiù)會使用object
</video>

相關案例查看更多

相關閱讀

線上(shàng)服務咨詢

聯系

159-8711-8523

友情鏈接

© 2004-2025 JTBC(CMS) Ynkui.Com All Rights Reserved.

京ICP證000000号