JavaScript簡介與使用方法

時間 2019-11-30

標籤 javascript 簡介使用方法欄目 JavaScript 简体版

原文原文鏈接

1.JavaScript簡介

1.1.JavaScript簡史

最初：網絡通訊很慢，網頁上的數據要傳送到數據庫驗證，而後再返回錯誤結果，找客觀過程要等好久，因而，網景公司開發出一門新語言，當時Java很是熱，因而就起名叫JavaScript。javascript

微軟加入：因爲JavaScript發展的特別好，軟件決定加入，爲了避免在名字上侵權，就叫JScripthtml

標準肯定：軟件加入後，市場上就有兩個版本了，爲了統一ECMA協會組織了網景，微軟等公司，共同肯定了基本語法，叫作ECMAScript，各家公司在這個叫作ECMAScript的基本語法上作各自的JavaScript實現。java

1.2.JavaScript的實現

雖然有了基本的語法ECMAScript，可是JavaScript一共包含了三部分的內容，分別是：ECMAScript語法+DOM+BOM
ECMAScript：
ECMAScript：提供了核心語言支持，這個規定了JavaScript的語法，類型，語句，關鍵字，保留字，操做符，對象等核心類型和語法。
文檔對象模型：DOM
文檔對象模型：Mocument Object Model提供訪問和操做頁面內的方法和接口是針對XML但通過擴展用於HTML的應用程序編程接口。DOM把整個頁面映射爲一個多層次的節點結構，經過DOM建立的這個表示文檔的樹形圖，開發人員得到了控制頁面內容和結構的主動權，藉助DOM提供的API，開發人員能夠輕鬆自如的刪除，添加，替換或修改任何節點
瀏覽對象模型：BOM
瀏覽器對象模型：BOM Browser ObjectModel，提供與瀏覽器交互的方法和接口。開發人員使用BOM能夠控制瀏覽器顯示的頁面之外的部分，即處理瀏覽器窗口和框架。廣泛認爲瀏覽器彈出新窗口，移動，縮放，關閉瀏覽器，對Cookie的支持等等。都算在BOM裏面數據庫

2.在HTML中使用JavaScript

2.1.`<Script>`元素

<script>元素常見的屬性有6個，都是可選的編程

async：表示要當即下載腳本，但不該妨礙頁面中的其餘操做。好比加載其餘資源
charset：經過src指定的代碼字符集，通常不用
defer：表示腳本能夠延遲到文檔徹底被解析和顯示以後再執行，只對外部文件有效
language:已廢棄，原表示編寫代碼使用的腳本語言
src：表示包含要執行的外部js文件。
type：一般設置text/javascript,表示編寫代碼使用的腳本語言的內容類型。

在沒有async和defer屬性時，頁面中的JavaScript是按照從上到下來執行的。JavaScript沒有執行完是不會解析頁面的。
不推薦使用<script type="text/javascript" src="example.js"/>沒有</script>的方式，這樣有些遊覽器會不認識瀏覽器

2.2.標籤的位置

通常標籤都放在<head>裏面，這樣便於集中管理，可是按照HTML解析的順序，此時的JavaScript要先解析才能解析頁面。因此如今更多的是將<script>元素放在<body>元素裏面的最後面，這樣只有當頁面解析完以後，纔會執行JavaScript。緩存

2.3.延遲腳本

在<script>元素中使用使用defer屬性，使JavaScript腳本會被延遲到整個頁面都解析完畢以後再運行，所以使用此屬性就是告訴瀏覽器，當即下載，可是延遲執行。
<script type="text/javascript" src="example.js" defer="defer"></script>
可是這個屬性是以前給早期的瀏覽器的，其餘瀏覽器可能會忽略這個屬性，就像日常同樣執行，因此最好的作法仍是將<script>放在腳本底部網絡

2.4.異步腳本

HTML5給<script>定義了async屬性，該屬性可讓腳本不按照順序執行，指定async屬性屬性的目的是不讓頁面等待兩個腳本下載執行，從而異步加載其餘頁面,不過建議異步腳本不要在加載期間修改DOM框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" async src="example1.js"></script>
    <script type="text/javascript" async src="example2.js"></script>
</head>
<body>

</body>
</html>

上面兩個<script>前後執行的順序不必定。異步

在XHTM中使用async要設置成：async=「async」

3.使用外部文件的優勢

<script>元素能夠內嵌，也能夠外部調用，可是通常推薦外部調用，優勢是

可維護性
可緩存，瀏覽器緩存
適應將來

4.`<noscript>`元素

<noscript>元素能夠在指定不支持腳本的瀏覽器中顯示替代內容，但在啓用了腳本的狀況下，瀏覽器不會顯示<noscript>元素內任何內容。<noscript>元素能夠放在<body>中
當出現如下兩種狀況時，瀏覽器會把<noscript>元素顯示出來

瀏覽器不支持腳本
瀏覽器支持腳本，但腳本被禁用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" async src="example1.js"></script>
    <script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<noscript>
    <p>本頁面須要瀏覽器支持（啓用），JavaScript。</p>
</noscript>
</body>
</html>