整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
JavaScript 語句向?yàn)g覽器發(fā)出的命令。語句的作用是告訴瀏覽器該做什么。
JavaScript 語句
JavaScript 語句是發(fā)給瀏覽器的命令。
這些命令的作用是告訴瀏覽器要做的事情。
下面的 JavaScript 語句向 id="demo" 的 HTML 元素輸出文本 "你好 Dolly" ：
實(shí)例
document.getElementById("demo").innerHTML = "你好 Dolly";
嘗試一下 ?
分號(hào) ;
分號(hào)用于分隔 JavaScript 語句。
通常我們?cè)诿織l可執(zhí)行的語句結(jié)尾添加分號(hào)。
使用分號(hào)的另一用處是在一行中編寫多條語句。
實(shí)例:
a = 5;
b = 6;
c = a + b;
以上實(shí)例也可以這么寫:
a = 5; b = 6; c = a + b;
嘗試一下 ?
| 您也可能看到不帶有分號(hào)的案例。 在 JavaScript 中，用分號(hào)來結(jié)束語句是可選的。 |
JavaScript 代碼
JavaScript 代碼是 JavaScript 語句的序列。
瀏覽器按照編寫順序依次執(zhí)行每條語句。
本例向網(wǎng)頁輸出一個(gè)標(biāo)題和兩個(gè)段落：
實(shí)例
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么樣?";
JavaScript 代碼塊
JavaScript 可以分批地組合起來。
代碼塊以左花括號(hào)開始，以右花括號(hào)結(jié)束。
代碼塊的作用是一并地執(zhí)行語句序列。
本例向網(wǎng)頁輸出一個(gè)標(biāo)題和兩個(gè)段落：
實(shí)例
function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么樣?";
}
JavaScript 語句標(biāo)識(shí)符
JavaScript 語句通常以一個(gè) 語句標(biāo)識(shí)符 為開始，并執(zhí)行該語句。
語句標(biāo)識(shí)符是保留關(guān)鍵字不能作為變量名使用。
下表列出了 JavaScript 語句標(biāo)識(shí)符 (關(guān)鍵字) ：
<table class="reference" "style="width: 100%" style="border: 0px; margin: 4px 0px; padding: 0px; width: 729px; color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px; line-height: normal; text-align: start; white-space: normal;">
| 語句 | 描述 |
|---|---|
| break | 用于跳出循環(huán)。 |
| catch | 語句塊，在 try 語句塊執(zhí)行出錯(cuò)時(shí)執(zhí)行 catch 語句塊。 |
| continue | 跳過循環(huán)中的一個(gè)迭代。 |
| do ... while | 執(zhí)行一個(gè)語句塊，在條件語句為 true 時(shí)繼續(xù)執(zhí)行該語句塊。 |
| for | 在條件語句為 true 時(shí)，可以將代碼塊執(zhí)行指定的次數(shù)。 |
| for ... in | 用于遍歷數(shù)組或者對(duì)象的屬性（對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作）。 |
| function | 定義一個(gè)函數(shù) |
| if ... else | 用于基于不同的條件來執(zhí)行不同的動(dòng)作。 |
| return | 退出函數(shù) |
| switch | 用于基于不同的條件來執(zhí)行不同的動(dòng)作。 |
| throw | 拋出（生成）錯(cuò)誤 。 |
| try | 實(shí)現(xiàn)錯(cuò)誤處理，與 catch 一同使用。 |
| var | 聲明一個(gè)變量。 |
| while | 當(dāng)條件語句為 true 時(shí)，執(zhí)行語句塊。 |
JavaScript 對(duì)大小寫敏感。
JavaScript 對(duì)大小寫是敏感的。
當(dāng)編寫 JavaScript 語句時(shí)，請(qǐng)留意是否關(guān)閉大小寫切換鍵。
函數(shù) getElementById 與 getElementbyID 是不同的。
同樣，變量 myVariable 與 MyVariable 也是不同的。
空格
JavaScript 會(huì)忽略多余的空格。您可以向腳本添加空格，來提高其可讀性。下面的兩行代碼是等效的：
var person="Hege";
var person = "Hege";
對(duì)代碼行進(jìn)行折行
您可以在文本字符串中使用反斜杠對(duì)代碼行進(jìn)行換行。下面的例子會(huì)正確地顯示：
document.write("你好 \
世界!");
不過，您不能像這樣折行：
document.write \
("你好世界!");
您知道嗎？
提示：JavaScript 是腳本語言。瀏覽器會(huì)在讀取代碼時(shí)，逐行地執(zhí)行腳本代碼。而對(duì)于傳統(tǒng)編程來說，會(huì)在執(zhí)行前對(duì)所有代碼進(jìn)行編譯。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
程序開發(fā)過程中，我們始終要謹(jǐn)記的一點(diǎn)就是：程序是寫給人看的，不是寫給機(jī)器看的。任何項(xiàng)目開發(fā)，都必須要考慮到人員迭代，我們不能讓下一個(gè)接手你代碼的人，在看到你寫的代碼時(shí)會(huì)說出這樣的話，“這個(gè)代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規(guī)范，讓代碼的可讀性更強(qiáng)。
今天，我們就一起來看下前端開發(fā)過程所能涉及到的跟HTML有關(guān)的規(guī)范問題。
HTML5
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
首先是在文件的命名上，應(yīng)當(dāng)采用駝峰式命名，首字母小寫，后面每個(gè)單詞首字母大寫，而且對(duì)于具體的文件應(yīng)當(dāng)具有語義化，能夠給人一種直觀的感受這個(gè)文件的作用是什么。現(xiàn)在前端開發(fā)開發(fā)過程中都講求模塊化開發(fā)，甚至是組件化開發(fā)，在文件命名時(shí)更應(yīng)該以模塊名或者組件名來命名。
例如在寫一個(gè)AngularJS應(yīng)用時(shí)，由于會(huì)涉及到Controller，Service，F(xiàn)ilter等概念，我們會(huì)分別建立一個(gè)文件，假如這個(gè)模塊的名字是庫存管理stockManage，我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說的語義化指的是使用具有語義化的標(biāo)簽，在H5中添加了類似于header, nav, article, section, aside, footer等標(biāo)簽，從單詞的意思上我們也很容易看出標(biāo)簽的含義。
我們不推薦使用只有div標(biāo)簽的頁面，例如
不推薦使用
而是應(yīng)該使用以下這種帶有語義化的標(biāo)簽。
推薦使用
img標(biāo)簽是網(wǎng)頁用來顯示照片的標(biāo)簽，在頁面所有標(biāo)簽中占據(jù)的比例非常之高，但是在使用img標(biāo)簽時(shí)也有下面需要注意的點(diǎn)。
給定width和height屬性
因?yàn)闉g覽器在加載圖片的過程中，需要先下載圖片，然后再解析圖片的高度和寬度，如果不給img元素設(shè)定高度和寬度，這樣在圖片加載過程中會(huì)不斷的計(jì)算，重排頁面的布局，在網(wǎng)絡(luò)不好的時(shí)候就會(huì)經(jīng)常出現(xiàn)元素出現(xiàn)不規(guī)律移動(dòng)的情況。因此給img元素設(shè)定width和height屬性是必要的。
alt屬性
img標(biāo)簽的alt屬性表示的是在圖片無法顯示時(shí)，使用文字來代替顯示，它可以用在以下幾個(gè)場(chǎng)景中：
網(wǎng)路延遲太大
src屬性指定路徑出錯(cuò)
瀏覽器禁用圖像
由于其有良好的信息提示效果，并且有助于網(wǎng)頁SEO效果，強(qiáng)烈建議在img標(biāo)簽中使用alt屬性。
而且很重要的一點(diǎn)是img標(biāo)簽的引入是需要呈現(xiàn)出與頁面相關(guān)的內(nèi)容，其他情況應(yīng)該使用CSS樣式實(shí)現(xiàn)。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
前端文件主要包括HTML頁面文件，CSS樣式文件和Javascript腳本文件。我們應(yīng)該讓三者各司其職，在HTML中不應(yīng)該出現(xiàn)CSS和JS表達(dá)式；在JS文件中，不應(yīng)該出現(xiàn)大量的HTML和CSS代碼。在HTML文檔中應(yīng)當(dāng)盡量少的引入CSS和JS文件。為了保證文件的純凈，我們應(yīng)當(dāng)遵循下面的原則。
一個(gè)HTML文件應(yīng)該只引入一個(gè)CSS文件
合理運(yùn)用JS合并技術(shù)（Gulp, Webpack插件），保證引入JS文件不多于兩個(gè)
不使用行內(nèi)腳本元素（<script>alert('Hello World')</script>）
不在標(biāo)簽上使用style內(nèi)聯(lián)樣式
不要使用style屬性
腳本加載在網(wǎng)頁加載過程中是一個(gè)很耗性能的過程，如果把JS文件放在head標(biāo)簽里，它的加載會(huì)一直阻塞DOM的解析，造成頁面延遲。
因此現(xiàn)在講求的是腳本的異步加載過程，我們會(huì)使用到async關(guān)鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點(diǎn)可以非常方便的實(shí)現(xiàn)當(dāng)前頁面間的跳轉(zhuǎn)，現(xiàn)在越來越多的教程網(wǎng)頁由于是單頁面，經(jīng)常會(huì)用到錨點(diǎn)跳轉(zhuǎn)。
對(duì)錨點(diǎn)知識(shí)還不了解的，可以看看我寫的這篇文章《神奇的html錨點(diǎn)，讓你的網(wǎng)頁在內(nèi)部自由的跳轉(zhuǎn)》。
今天這篇文章主要總結(jié)了前端開發(fā)過程中的HTML規(guī)范問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認(rèn)識(shí)。
程序開發(fā)過程中，我們始終要謹(jǐn)記的一點(diǎn)就是：程序是寫給人看的，不是寫給機(jī)器看的。任何項(xiàng)目開發(fā)，都必須要考慮到人員迭代，我們不能讓下一個(gè)接手你代碼的人，在看到你寫的代碼時(shí)會(huì)說出這樣的話，“這個(gè)代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規(guī)范，讓代碼的可讀性更強(qiáng)。
今天，我們就一起來看下前端開發(fā)過程所能涉及到的跟HTML有關(guān)的規(guī)范問題。
HTML5
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
首先是在文件的命名上，應(yīng)當(dāng)采用駝峰式命名，首字母小寫，后面每個(gè)單詞首字母大寫，而且對(duì)于具體的文件應(yīng)當(dāng)具有語義化，能夠給人一種直觀的感受這個(gè)文件的作用是什么。現(xiàn)在前端開發(fā)開發(fā)過程中都講求模塊化開發(fā)，甚至是組件化開發(fā)，在文件命名時(shí)更應(yīng)該以模塊名或者組件名來命名。
例如在寫一個(gè)AngularJS應(yīng)用時(shí)，由于會(huì)涉及到Controller，Service，F(xiàn)ilter等概念，我們會(huì)分別建立一個(gè)文件，假如這個(gè)模塊的名字是庫存管理stockManage，我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說的語義化指的是使用具有語義化的標(biāo)簽，在H5中添加了類似于header, nav, article, section, aside, footer等標(biāo)簽，從單詞的意思上我們也很容易看出標(biāo)簽的含義。
我們不推薦使用只有div標(biāo)簽的頁面，例如
不推薦使用
而是應(yīng)該使用以下這種帶有語義化的標(biāo)簽。
推薦使用
img標(biāo)簽是網(wǎng)頁用來顯示照片的標(biāo)簽，在頁面所有標(biāo)簽中占據(jù)的比例非常之高，但是在使用img標(biāo)簽時(shí)也有下面需要注意的點(diǎn)。
給定width和height屬性
因?yàn)闉g覽器在加載圖片的過程中，需要先下載圖片，然后再解析圖片的高度和寬度，如果不給img元素設(shè)定高度和寬度，這樣在圖片加載過程中會(huì)不斷的計(jì)算，重排頁面的布局，在網(wǎng)絡(luò)不好的時(shí)候就會(huì)經(jīng)常出現(xiàn)元素出現(xiàn)不規(guī)律移動(dòng)的情況。因此給img元素設(shè)定width和height屬性是必要的。
alt屬性
img標(biāo)簽的alt屬性表示的是在圖片無法顯示時(shí)，使用文字來代替顯示，它可以用在以下幾個(gè)場(chǎng)景中：
網(wǎng)路延遲太大
src屬性指定路徑出錯(cuò)
瀏覽器禁用圖像
由于其有良好的信息提示效果，并且有助于網(wǎng)頁SEO效果，強(qiáng)烈建議在img標(biāo)簽中使用alt屬性。
而且很重要的一點(diǎn)是img標(biāo)簽的引入是需要呈現(xiàn)出與頁面相關(guān)的內(nèi)容，其他情況應(yīng)該使用CSS樣式實(shí)現(xiàn)。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
前端文件主要包括HTML頁面文件，CSS樣式文件和Javascript腳本文件。我們應(yīng)該讓三者各司其職，在HTML中不應(yīng)該出現(xiàn)CSS和JS表達(dá)式；在JS文件中，不應(yīng)該出現(xiàn)大量的HTML和CSS代碼。在HTML文檔中應(yīng)當(dāng)盡量少的引入CSS和JS文件。為了保證文件的純凈，我們應(yīng)當(dāng)遵循下面的原則。
一個(gè)HTML文件應(yīng)該只引入一個(gè)CSS文件
合理運(yùn)用JS合并技術(shù)（Gulp, Webpack插件），保證引入JS文件不多于兩個(gè)
不使用行內(nèi)腳本元素（<script>alert('Hello World')</script>）
不在標(biāo)簽上使用style內(nèi)聯(lián)樣式
不要使用style屬性
腳本加載在網(wǎng)頁加載過程中是一個(gè)很耗性能的過程，如果把JS文件放在head標(biāo)簽里，它的加載會(huì)一直阻塞DOM的解析，造成頁面延遲。
因此現(xiàn)在講求的是腳本的異步加載過程，我們會(huì)使用到async關(guān)鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點(diǎn)可以非常方便的實(shí)現(xiàn)當(dāng)前頁面間的跳轉(zhuǎn)，現(xiàn)在越來越多的教程網(wǎng)頁由于是單頁面，經(jīng)常會(huì)用到錨點(diǎn)跳轉(zhuǎn)。
對(duì)錨點(diǎn)知識(shí)還不了解的，可以看看我寫的這篇文章《神奇的html錨點(diǎn)，讓你的網(wǎng)頁在內(nèi)部自由的跳轉(zhuǎn)》。
今天這篇文章主要總結(jié)了前端開發(fā)過程中的HTML規(guī)范問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認(rèn)識(shí)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
