Head First JavaScript 的知識(shí)小點(diǎn)--Chapter One

JavaScript 的代碼與CSS一樣，可以內(nèi)聯(lián)放置與外聯(lián)放置。

<strong>內(nèi)聯(lián)放置</strong>
可以放在<head>或者<body>里面，在瀏覽器中都可以執(zhí)行出來(lái)。不過(guò),當(dāng)瀏覽器運(yùn)行一個(gè)頁(yè)面時(shí)，他會(huì)在<body>執(zhí)行之前先執(zhí)行頁(yè)面的<head>里面的所有一切代碼。所以，如果JavaScript的代碼放置在<head>塊里，用戶在瀏覽你的頁(yè)面時(shí)可能需要等上一會(huì)兒（先執(zhí)行<head>的代碼，再執(zhí)行<body>來(lái)加載頁(yè)面內(nèi)容）才能看到完整的頁(yè)面內(nèi)容。
當(dāng)然，按照此說(shuō)法。若僅僅JavaScript代碼放在<body>中，比如就放在<body>中的開始位置，那是無(wú)濟(jì)于事的。
所以，JavaScript中的代碼或許可以放置在<body>塊的底部。(至少先讓可見的內(nèi)容先出現(xiàn)在用戶的視線當(dāng)中呀)

<code><!doctype html>
<html lang = "en">
head>
<meta charset='utf-8'>
<title>My First JavaScript</title>
<script>
statement;
</script>
</head>
<body>
<script>
statement;
</script>
</body>
</html></code>

除此之外，還有其它的方式來(lái)放置JavaScript的代碼[請(qǐng)繼續(xù)往下看]

<strong>外聯(lián)放置</strong>
我們的JavaScript代碼可以寫成一個(gè)以".js"為后綴名的獨(dú)立文件。于是，就可以通過(guò)<head>里面<script>標(biāo)簽的地址屬性指向你的JS文件。
<code>
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>...</title>
<script src = "myCode.js"></script>
</head>
<body>
</body>
</html>
</code>

這種外聯(lián)的方法可以很好地維護(hù)我們的頁(yè)面，并且能夠在多個(gè)html文件中使用。但是，它仍然有一點(diǎn)不足。如同上面提到，瀏覽器在執(zhí)行<body>前都會(huì)先執(zhí)行<head>里面的所有代碼。所以，仍存在不足。

接下來(lái)介紹一種方法可以避免發(fā)生上面這種問題的尷尬。

類似地，避免這個(gè)問題出現(xiàn)的方法也是將<script>標(biāo)簽放在頁(yè)面<body>的底部。

But, 但是...

課本Head First JavaScript在最后寫道：
Despite evidenceto the contrary, I still think the <head> is a great place for code.
我當(dāng)場(chǎng)就哭了。。。

如何鏈接到外部的JavaScript文件？

首先，我們來(lái)確認(rèn)一下我們會(huì)用到哪些類型的文件與工具。
　分別有：

  • 網(wǎng)頁(yè)文件 index.html
  • JavaScript文件 code.js
  • 常用瀏覽器[一般在瀏覽器運(yùn)行時(shí)，按下F12就可以看到彈出來(lái)的一個(gè)框，初學(xué)的我也不懂那個(gè)是什么梗]

相信大家都見過(guò)以".js"作為后綴名的文件，這種類型的文件是JavaScript文件。
　在這里，我按照書本準(zhǔn)備了一個(gè)"code.js"的文件。（小白，掌握得少）文件里面我只寫了一句話："console.log("Hello, China!")"，完了我將這個(gè)文件放置在與html文件同目錄中的js文件里面。
　接著，在HTML文件中的<script>標(biāo)簽顯式地引用這個(gè)"code.js"。
　需要強(qiáng)調(diào)的是，<script>標(biāo)簽必須要成對(duì)地敲出來(lái)，否則里面的代碼不會(huì)被執(zhí)行。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First JavaScript</title>
    <script>
      console.log("HelloWorld!");  <!-- 在控制臺(tái)中打印輸出HelloWorld -->
      </script>
    </head>
  <body>
    <script src = "js\code.js"></script>    <!-- 與鏈接CSS文件，在地址屬性中鏈接到j(luò)s文件，to reference the 

JavaScript file -->
    </body>
</html>

用瀏覽器打開這個(gè)html文件，可以從控制臺(tái)中看到這樣的輸出。


執(zhí)行結(jié)果

結(jié)合代碼與結(jié)果圖，我的出的結(jié)論是：這瀏覽器果真還是先load頁(yè)面<head>的代碼，完了再來(lái)執(zhí)行<body>的代碼。

另一個(gè)主要結(jié)論：我們既可以在<head>標(biāo)簽中引用到JavaScript文件，同時(shí)也可以在<body>標(biāo)簽中的任何位置去引用JavaScript文件。

補(bǔ)全(JavaScript的組成元素)：
它由成對(duì)地<script>標(biāo)簽組成，像“<script></script>”.
它通過(guò)內(nèi)聯(lián)或者外聯(lián)來(lái)作用于HTML文件。
內(nèi)聯(lián)(inline)直接在html中的<script>語(yǔ)句內(nèi)編寫代碼，
而外聯(lián)(external),則需要再<script></script>的開標(biāo)簽里面的地址屬性致命要鏈接的js文件(里面存放JavaScript的代碼)。
但僅有 src="xxx.js"還不夠完整， 類似CSS一樣，我們通常用到type="text/CSS"來(lái)告訴瀏覽器自己的類型。只不過(guò)在這里，我們用到的是type="text/JavaScript"。如下所示：

<!doctype html>
<html lang="en">
<head>
   <meta charset='utf-8'>
   <title>..</title>

   <script type = "text/JavaScript" src = "xxx.js">
    </script>    <!-- 要注意，一旦引用了外部的JS文件，那么在script標(biāo)簽內(nèi)之間內(nèi)容，就不要寫代碼了，這樣做是起不到任何作用的 -->

  </head>
<body>
  ...
  </body>
</html>

認(rèn)識(shí)一下prompt —— 獲得用戶的鍵盤輸入——應(yīng)該還有其它類似地方法，只是我學(xué)到的還不夠。



　接觸了不久，知道了如何從瀏覽器中彈出一個(gè)對(duì)話框來(lái)提醒用戶相關(guān)信息。（通過(guò)alert("abcdefg...")方法）。
　那是不是也有可以獲得用戶的輸入的方法呢？答案肯定是有的。
　通過(guò) prompt("..."); 也可以從瀏覽器中彈出對(duì)話框并獲得用戶的輸入。

使用prompt方法來(lái)獲取用戶輸入.png
使用prompt需要知道的幾個(gè)小點(diǎn)：
var result;
result = prompt("請(qǐng)問您接觸JavaScript多久了？");
  1. 使用prompt方法需要提供一個(gè)字符串作為參數(shù)，哪怕什么都不想寫，也得要給個(gè)雙引號(hào)進(jìn)去。
  2. 當(dāng)用戶輸入數(shù)據(jù)信息，點(diǎn)擊確定按鈕了之后。對(duì)話框中文本框里面的全部?jī)?nèi)容都將作為prompt方法返回值（該返回值類型為string類型）。
  3. 但是，當(dāng)用戶不想輸入，點(diǎn)擊“取消”按鈕了，又或者直接點(diǎn)擊“確定”按鈕了，那么，該prompt方法的返回值為 null.
  4. JavaScript自己會(huì)進(jìn)行類型轉(zhuǎn)換（我知道這樣講還是不算準(zhǔn)確的，但是我只是還是太淺薄了，描述不了真正的情況，只能就近說(shuō)明）。往往我們可以通過(guò)用戶輸入的數(shù)據(jù)用來(lái)比較或者判斷，就講前一張圖片拿來(lái)舉個(gè)例子。
    這個(gè)對(duì)話框期望用戶輸入一個(gè)數(shù)字，然后在后臺(tái)可以進(jìn)行判斷這個(gè)數(shù)字是否超出范圍。
    如果用戶在對(duì)話框中的文本框輸入的是7，那么這個(gè)“7”要怎么來(lái)分析？
    首先要確定一點(diǎn)，“7”作為prompt方法的string型返回值。好的，假如我們的程序要判斷用戶輸入的內(nèi)容“7”是否會(huì)超出 0 - 6 的范圍，我們知道可以通過(guò)比較來(lái)判斷。但是，prompt方法將用戶的輸入以string型作為了返回值，與之做比較的卻是數(shù)值型的數(shù)字，怎么比較？憑借小白基礎(chǔ)的我只能先這么認(rèn)為JavaScript會(huì)自動(dòng)進(jìn)行類型轉(zhuǎn)換，網(wǎng)絡(luò)上也是這么說(shuō)的。【壞笑】

八月份快要結(jié)束，這段時(shí)間我經(jīng)歷了歡笑，失落。處處充滿十字路口，不做出選擇真的不行。
九月加把勁...

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容