1. 程式人生 > >JavaScript高階程式設計(第三版)學習筆記(二)JavaScript使用

JavaScript高階程式設計(第三版)學習筆記(二)JavaScript使用

JavaScript設計初衷就是能在Web瀏覽器中直接執行的指令碼語言,當然迫切想知道它是怎麼使用的?
Web瀏覽器上執行的內容就是上篇提到過HTML檔案,由XML衍生出來的超文字標記語言,由標籤和內容組成,為了能夠讓JavaScript更好的與HTML融合使用,廠商和協會調整了HTML的規則,JavaScript語句能夠直接新增HTML中並能夠被解析。

JavaScript標籤

JavaScript在HTML中的使用標籤為開始標籤<script>和結束</script>,雖然在DHTML檔案呼叫外部JS檔案可以不用</script>,但考慮程式設計的一致性,建議使用一對標籤。

JavaScript的用法

知道了在HTML中使用<script>來標識JavaScript程式碼,但具體程式碼內容寫在哪裡及怎麼寫呢?
首先說一下用法,主要有兩種方式:
第一種:直接在HTML直接內嵌JavaScript程式碼。

<script type="text/javascript">
    Javascript語法 
</script>

如上示例在<script>開始和結束標籤之間新增JavaScript的相關程式碼,其中type是標籤屬性,表示該檔案內容型別,以便訪問的伺服器返回正確型別的檔案,也可以不新增該屬性,瀏覽器會預設該值。
第二種方式:引用外部JavaScript檔案。


JavaScript語言編寫的程式碼也可以單獨存放在副檔名為.js的檔案中,如HTML檔案需要引用,則需要通過<javascript> 標籤的第二個屬性src,它指向外部JS檔案的URL,可以是本地檔案也可以外部域(如http://www.google/abc.js)中的檔案,使用方法如下:
<script scr="abc.js"></script>
或者
<script scr="http://www.google/abc.js"></script>

雖然兩種方式都可以支援JS程式碼在Web瀏覽器中執行,但第二種方式存在以下優點:
1. HTML程式碼和JS程式碼分離,有助於後期的便捷維護。
2. HTML程式碼和JS程式碼分離,對於不支援JS程式碼解析的瀏覽器,不需要寫特殊的程式碼註釋從而保證瀏覽器相容性。
3. 對於不同頁面使用同一個JS的情況,可以減少程式碼量,並且前一個頁面呼叫後在瀏覽器中快取該檔案,後一個頁面可以快速調取該JS檔案,提高響應速度。

JavaScript在HTML的中位置

原來JavaScript程式碼都是放在HTML的head標籤裡面,如下所示:

<html>
    <head>
        <script type="text/javascript"> JS程式碼 </script>
    </head>
    <body> 
        瀏覽器頁面顯示內容
    </body>
</html>

由於HTML頁面常規情況下都是從上到下載入並解釋內容,而顯示內容只有進入<body>標籤才載入,之前必須先載入和解釋JS內容,如果內容過多需要長時間等待,給使用者造成系統執行緩慢的錯覺,所以現在都在</body> 結束前新增JS內容,如下所示:

    </head>
    <body> 
        瀏覽器頁面顯示內容
        <script type="text/javascript"> JS程式碼 </script>
    </body>
</html>

這樣優先顯示頁面內容,再載入和解釋JS程式碼,提高使用者體檢。

執行順序

上面提到了HTML頁面是順序執行,有什麼辦法改變JS在HTML的執行順序呢?<javascript> 還有兩個屬性async和defer,用法<script defer="defer" src="abc.js"></script><script sync src="abc.js"></script>,如上所示它們只能用在引用外部JS的情況下,
defer表示延遲執行,即頁面載入完成後再執行,可以提供頁面顯示速度;sync表示非同步,也就是與載入頁面內容同時進行,但要注意由於執行先後的隨機性,不建議在JS中修改頁面內容以便造成頁面的顯示不穩定性。

文件模式

什麼是文件模式,為什麼要介紹文件模式,學習該知識點有什麼用?
文件模式簡單來說就是Web頁面不同模式下瀏覽器的解析規則不同,如果在HTML檔案開頭不指定文件模式,則預設為混雜模式,該模式下不同瀏覽器的解析規則不一致,所有為了頁面相容性,一般需要指定標準模式,有三種方式:
HTML 4.01 嚴格型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 嚴格型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5

<!DOCTYPE html>

禁用JavaScirpt的情況

如果瀏覽器中不識別或者禁用了JavaScript有什麼解決方式?
對,提示使用者開啟支援JavaScript的設定或者提示瀏覽器不支援JavaScipt。
但是如果瀏覽器已經支援了,則不需要該提示,用<noscript></noscipt> 標籤則可以解決該問題,瀏覽器不支援JS的情況下會解析該標籤中的內容,反之則忽略,如<noscript><p>該瀏覽器不支援JavaScript</p></noscript>

相關推薦

JavaScript高階程式設計()》讀書筆記

《JavaScript高階程式設計(第三版)》讀書筆記 本文內容是關於《JavaScriptt高階程式設計(第三版)》的讀書筆記,而且只是提取個人認為每個章節比較重要或者需要注意的知識點。 第一章   JavaScript簡介 1.      一個完整的JavaScipt

JavaScript高階程式設計學習筆記JavaScript引用型別

1、引用型別 引用型別是指封裝了變數和對應函式的結構體,它是例項就是物件,類似於C++、Java中的類,但沒有類的介面等。 建立方式一: var obj = new Object();//new關鍵字 + 建構函式 obj.name = "noodles"

JavaScript高階程式設計學習筆記JavaScript使用

JavaScript設計初衷就是能在Web瀏覽器中直接執行的指令碼語言,當然迫切想知道它是怎麼使用的? Web瀏覽器上執行的內容就是上篇提到過HTML檔案,由XML衍生出來的超文字標記語言,由標籤和內容組成,為了能夠讓JavaScript更好的與HTML融合使

UNIX環境高階程式設計 五章筆記

5.2 流和物件 只有兩個函式可以改變流的定向: freopen函式清楚一個流的定向,fwide函式可用於設定一個流的定向。 #include <stdio.h> #include <wchar.h> int fwide(FILE

unix環境高階程式設計-讀書筆記2

限制 unix系統實現定義了很多幻數和常量,其中有很多已被硬編碼到程式中,或用特定的技術確定。 已下兩種型別是必須的。 (1)編譯時限制(例如,短整型的最大值是什麼?) (2)執行時限制(例如,檔名有多少個字串?) 編譯時限制可在標頭檔案中定義。程式在編譯時包含這些標頭檔案。但是執行

1012 - C語言程式設計教程課後習題6.2

1012 - C語言程式設計教程(第三版)課後習題6.2 時間限制:1秒 記憶體限制:128兆 題目描述 輸入一行字元,分別統計出其中英文字母、空格、數字和其他字元的個數。 輸入 一行字元 輸出 統計值 樣例輸入 aklsjflj123 sadf918u324 asdf91u32oa

1011 - C語言程式設計教程課後習題6.1

1011 - C語言程式設計教程(第三版)課後習題6.1 時間限制:1秒 記憶體限制:128兆 題目描述 輸入兩個正整數m和n,求其最大公約數和最小公倍數。 輸入 兩個整數 輸出 最大公約數,最小公倍數 樣例輸入 5 7 樣例輸出 1 35 最大公約數求法我是用的是輾轉相除法進行

1010 - C語言程式設計教程課後習題5.8

1010 - C語言程式設計教程(第三版)課後習題5.8 時間限制:1秒 記憶體限制:128兆 題目描述 企業發放的獎金根據利潤提成。利潤低於或等於100000元的,獎金可提10%; 利潤高於100000元,低於200000元(100000<I≤200000)時,低於100000元的部

1047 - C語言程式設計教程課後習題10.5

1047 - C語言程式設計教程(第三版)課後習題10.5 時間限制:1秒 記憶體限制:128兆 題目描述 有n人圍成一圈,順序排號。從第1個人開始報數(從1到3報數),凡報到3的人退出圈子,問最後留下的是原來的第幾號的那位。 輸入 初始人數n 輸出 最後一人的初始編號 樣例輸入

1022 - C語言程式設計教程課後習題7.1

1022 - C語言程式設計教程(第三版)課後習題7.1 時間限制:1秒 記憶體限制:128兆 題目描述 用篩法求之N內的素數。 輸入 N 輸出 0~N的素數 樣例輸入 100 樣例輸出 2 3 5 7 11 13 17 19 23 29 31 37 41 43 47

1008 - C語言程式設計教程課後習題5.6

1008 - C語言程式設計教程(第三版)課後習題5.6 時間限制:1秒 記憶體限制:128兆 題目描述 給出一百分制成績,要求輸出成績等級‘A’、‘B’、‘C’、‘D’、‘E’。 90分以上為A 80-89分為B 70-79分為C 60-69分為D 60分以下為E 輸入 一個整數0

1007 - C語言程式設計教程課後習題5.5

007 - C語言程式設計教程(第三版)課後習題5.5 時間限制:1秒 記憶體限制:128兆 描述 有一個函式 y={ x x<1 | 2x-1 1<=x<10 \ 3x-11 x>=10 寫一段程式,輸入x,輸出y 輸入 一個數x 輸出 一個數y 樣例輸

1006 - C語言程式設計教程課後習題5.4

1006 - C語言程式設計教程(第三版)課後習題5.4 時間限制:1秒 記憶體限制:128兆 描述 有三個整數a b c,由鍵盤輸入,輸出其中的最大的數。 輸入 一行陣列,分別為a b c 輸出 a b c其中最大的數 樣例輸入 10 20 30 樣例輸出 30 提示 max ?

1005 - C語言程式設計教程課後習題4.9

1005 - C語言程式設計教程(第三版)課後習題4.9 時間限制:1秒 記憶體限制:128兆 題目描述 輸入一個華氏溫度,要求輸出攝氏溫度。公式為 c=5(F-32)/9 輸出要求有文字說明,取位2小數。 輸入 一個華氏溫度,浮點數 輸出 攝氏溫度,浮點兩位小數 樣例輸入 -4

1003 - C語言程式設計教程課後習題3.7

1003 - C語言程式設計教程(第三版)課後習題3.7 時間限制:1秒 記憶體限制:128兆 提交 題目描述 要將"China"譯成密碼,譯碼規律是:用原來字母后面的第4個字母代替原來的字母.例如,字母"A"後面第4個字母是"E".“E"代替"A”。因此,“China"應譯

1002 - C語言程式設計教程課後習題1.6

1002 - C語言程式設計教程(第三版)課後習題1.6 時間限制:1秒 記憶體限制:128兆 題目描述 編寫一個程式,輸入a、b、c三個值,輸出其中最大值。 輸入 一行陣列,分別為a b c 輸出 a b c其中最大的數 樣例輸入 10 20 30 樣例輸出

1014 - C語言程式設計教程課後習題6.4

1014 - C語言程式設計教程(第三版)課後習題6.4 時間限制:1秒 記憶體限制:128兆 題目描述 求Sn=1!+2!+3!+4!+5!+…+n!之值,其中n是一個數字。 輸入 n 輸出 和 樣例輸入 5 樣例輸出 153 題求一個數的階乘和,本身並不是一個難想的思路,

《Java程式設計規範》James.Gosling等.掃描.pdf

書籍簡介: 本書由java技術的發明者編寫,是java tm程式語言的權威性技術指南。如果你想知道語言之構造的精確含義,本書是最好的資源。.   本書全面、準確而詳細地論及了java程式語言。它提供了對於自前一版以來新增的所有新特性的完整描述,包括泛型、註釋、斷言、自動裝箱、列舉、for-

1015 - C語言程式設計教程課後習題6.5

1015 - C語言程式設計教程(第三版)課後習題6.5 時間限制:1秒 記憶體限制:128兆 題目描述 求以下三數的和,保留2位小數 1~a之和 1~b的平方和 1~c的倒數和 輸入 a b c 輸出 1+2+…+a + 1 ^ 2 + 2 ^ 2+…+b ^ 2 + 1/1+1/2+…+

1013 - C語言程式設計教程課後習題6.3

1013 - C語言程式設計教程(第三版)課後習題6.3 時間限制:1秒 記憶體限制:128兆 題目描述 求Sn=2+22+222+…+22…222(有n個2)之值,其中a是一個數字。 例如:2+22+222+2222+22222(n=5),n由鍵盤輸入。 輸入 n 輸出 Sn 樣例輸入