JavaScript學習筆記（一）在Html中如何使用Javascript

時間 2019-11-29

標籤 javascript 學習筆記 html 如何使用欄目 JavaScript 简体版

原文原文鏈接

這是我學習javascript的第一篇學習日記，一開始寫這篇bolg的時候感受很基礎以致於無處可寫，無非就是把javascript代碼放到<script>元素標籤中，運行文件時可讓javascript代碼被加載解析就好了。但細細思考，其實還有不少細節的地方須要注意，好比script標籤放的位置不一樣會有不一樣的效果，爲何會出現<script>放置位置不一樣效果不一樣、script同步加載與異步加載的有何不一樣等等。因此寫了這篇博客，算是本身學習javascript的第一步吧 ( ^_^ )。其實學習一門語言不會須要太長的時間，很快會入門，但同時也會很快忘記。這就須要把重要的知識點記錄下來，我本身用的是有道雲筆記，新學到的知識或者不會的問題，經過查閱資料解決的都把他們記錄下來。效果也不錯，每週均可以回顧查看。另外寫了這篇博客後，本身也有了一些新的感悟，咱們往往感嘆許多技術大牛，博客名人如何厲害，其實咱們本身就能夠成爲技術上的leader，其一就是知識及項目經驗的不斷積累，其二，我認爲就是學習知識時對細節的把握，其三，能夠鍥而不捨，不斷的學習新技術，平時不斷的回顧，「溫故而知新」。好了，說的有點偏題，開始進入正題咯。對了，本人也是小白一枚，正在學習的路上，寫博客是爲了總結每日所學，反思自身。古人說「吾日三省吾身」是頗有道理的喔。javascript

在Html中如何使用Javascript

主要內容：css

1.1　　javascript簡介html
1.2　　<script>元素java
1.3　　延遲腳本和異步腳本web

JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可普遍用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。 JavaScript 是可插入 HTML 頁面的編程代碼。 JavaScript 很容易學習。JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。編程

javascript由下面三種不一樣的部分組成：瀏覽器

ECMAScript，提供核心語言功能。服務器
　　文檔對象模型（DOM），提供訪問和操做網頁內容的方法和接口。app
瀏覽器對象模型（BOM），提供與瀏覽器交互的方法和節課。異步

HTML DOM （文檔對象模型）

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造爲對象的樹。

HTML DOM 樹

經過可編程的對象模型，JavaScript 得到了足夠的能力來建立動態的 HTML。

JavaScript 可以改變頁面中的全部 HTML 元素
JavaScript 可以改變頁面中的全部 HTML 屬性
JavaScript 可以改變頁面中的全部 CSS 樣式
JavaScript 可以對頁面中的全部事件作出反應

關於JavaScripthe、BOM和DOM能夠參考 javascript的參考手冊。

<script>

HTML 中的腳本必須位於 <script> 與 </script> 標籤之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

<script> alert("My First JavaScript"); </script>

您無需理解上面的代碼。只需明白，瀏覽器會解釋並執行位於 <script> 和 </script> 之間的 JavaScript。那些老舊的實例可能會在 <script> 標籤中使用 type="text/javascript"。如今已經沒必要這樣作了。JavaScript 是全部現代瀏覽器以及 HTML5 中的默認腳本語言。

使用<script>的方式有兩種，一種是直接在頁面中嵌入Javascript代碼，另外一種是包含外部JavaScript文件。包含在<script>內的javascript代碼將被自上而下的依次解釋。也能夠把腳本保存到外部文件中。外部文件一般包含被多個網頁使用的代碼。外部 JavaScript 文件的文件擴展名是 .js。如需使用外部文件，請在 <script> 標籤的 "src" 屬性中設置該 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

另外經過<script>元素的src屬性還能夠設置來自外部域的javascript文件，這一點讓<script>倍顯強大，這與<img>元素有點類似，它的src屬性能夠指向HTML頁面之外的某個域的完整URL；通俗的說就是<script>元素的src屬性能夠某個網站的javascript代碼文件。

<!DOCTYPE html>
<html>
<body>
<p>welcome my blog ----MasterHanBlog</p>
<script src="myScript.js" src="http://www.somewhere.com.afile.js"></script>
</body>
</html>

這樣位於外部域的代碼也會被加載解析，不管如何，只要不存在 defer 和 async 屬性（後面會講解），瀏覽器就會按照<script>元素中的代碼前後順序進行依次解析。換句話說，第一個<script>中的代碼解析完後，第二個<script>包含的代碼纔會被解析到，而後第三個。。。。

標籤的位置

按照傳統作法，全部的<script>元素都應放在<head>標籤裏面，這樣作的目的是把全部的外部文件（css文件和javascript文件）都放在相同的地方，便於管理。但是放在<head>中就意味着必須等全部的javascript代碼下載、解析、執行完以後，頁面要呈現的內容纔會被加載（瀏覽器在遇到<body>元素的時候纔會加載呈現頁面內容）。對於那些要執行不少javascript代碼的頁面來講，這無疑會致使瀏覽器在呈現頁面時會出現很明顯的延時，而延時期間頁面一片空白，（等待javascript加載，未執行到<body>元素），這對於用戶體驗來講是沒法容忍的，爲避免這個問題，現代web程序通常都把javascript用於放到<body>元素中頁面內容的最後面，即結束標籤</body>以前。如上個程序代碼所示。

延遲腳本和異步腳本

HTML腳本的執行只在默認狀況下是同步和阻塞的。<script>標籤中可有defer和async屬性，這能夠改變腳本的執行方式。這些都是布爾屬性，沒有值；只須要出如今標籤裏便可。

defer屬性使得瀏覽器延遲腳本的執行，直到文檔的載入和解析完成，才能夠操做。即腳本被延遲到整個頁面解析完畢後在運行。所以設置這個屬性至關於告訴瀏覽器當即下載javascript文件，但延遲執行。HTML5規定defer只使用於外部腳本文件，對於內嵌腳本會忽略給嵌入腳本設置的defer屬性。

async屬性使得瀏覽器能夠儘快地執行腳本，而不用在下載腳本時阻塞文檔解析。指定async的目的是不讓頁面等待腳本的下載與執行，從而異步加載頁面其餘內容。所以，建議異步腳本不要在加載期間修改DOM。一樣，HTML5規定async只使用於外部腳本文件，對於內嵌腳本會忽略給嵌入腳本設置的async屬性。

若是瀏覽器同時支持兩個屬性，會聽從async屬性而忽略defer屬性。注意延遲的腳本會按他們在文檔裏出現的順序執行。而異步在它們載入後執行，這意味着它們可能會無序執行。在不支持async屬性的瀏覽器裏，經過動態建立<script>元素並把它插入到文檔中，來實現腳本的異步載入和執行。

function loadasync(url){ varhead = document.getElementsByTagName("head")[0]; vars = document.createElement("script"); s.src = url; head.appendChild(s); }

本第二天記小結：

知識延伸：