JavaScript的使用你知道幾種？(上)

enda 發(fā)布于2019-08-23 13:45 / 3348人閱讀

摘要：如果只是這個(gè)問題的話，好像也沒什么嘛，不就是加個(gè)嘛部分同學(xué)是不是表示，完全可以接受吖。當(dāng)然不僅僅只是這樣，我們來看下第二個(gè)問題。

往期回顧
在上一期的《JavaScript的組成 | DOM/BOM》?里，我們有對(duì)文檔對(duì)象模型-DOM、瀏覽器對(duì)象模型-BOM
這兩大部分進(jìn)行了解學(xué)習(xí)，如果有還不是很明白的小伙伴們，可以在上篇文章的下方留言給我哦，我會(huì)為大家解答的哦

很快我們就進(jìn)入了紅寶書的第二章了！這章我們來討論下在HTML中使用JavaScript的幾種方法～（別著急走，我知道這是入門知識(shí)，但是你真的掌握了嘛？）來看看吧～

在開發(fā)JavaScript的時(shí)候，Netscape公司要解決的第一個(gè)問題就是：“如何讓JavaScript既能與HTML頁面共存，又不影響頁面在其他瀏覽器的呈現(xiàn)效果？”最終的解決方案是為Web增加統(tǒng)一的腳本支持，也就是我們現(xiàn)在看到的script標(biāo)簽

當(dāng)然我們今天要討論的不是這個(gè)標(biāo)簽的誕生史，也不是長得好不好看這些問題～而是

如果你熟悉怎么在HTML內(nèi)添加CSS，那么悄悄告訴你一個(gè)訣竅～基本和CSS類似，不過也有不一樣的地方，我們來對(duì)比看一下

第一種：頁面內(nèi)部直接嵌入

添加頁面內(nèi)部直接嵌入的CSS代碼，通過以下方式（好巧都是s開頭，千萬不要弄錯(cuò)哦）

添加JS的代碼也是類似，我們來看一下




這里我們可以很明顯看到，開始產(chǎn)生了差異，那我們來總結(jié)下有哪些～
●差異

style引入外部文件的時(shí)候是通過 “href”屬性 ，js文件引入通過 “src”（像是img標(biāo)簽引入圖片也是src）
link是一個(gè)單標(biāo)簽，但是script是一個(gè)雙標(biāo)簽（有沒有不知道單標(biāo)簽和雙標(biāo)簽的吖～在評(píng)論下方留言～小姐姐給你解答喲）

除了以上兩點(diǎn)很明顯的差別以外，其實(shí)JS標(biāo)簽可以添加的位置與CSS也有不同，我們可以看到以上的案例中，我都是在標(biāo)簽中添加的，這并沒有什么問題，但是在實(shí)際工作中，我們更推薦另一種做法，接下來我們就來看一下～

●script標(biāo)簽的位置
除了最常規(guī)的在head中我們可以使用，其實(shí)在body內(nèi)部的任何地方我們都可以使用，那么這么多地方，我們到底怎么選擇呢？就讓我們來看一下日常工作中我們推薦的做法：

   隨便給個(gè)文字，表明script的立場要在body的“結(jié)束”標(biāo)簽前
   


我們會(huì)選擇把script標(biāo)簽放在之前，
那為什么這么做的？有什么好處？
添加在head標(biāo)簽中缺點(diǎn)分析
獲取元素時(shí)，因?yàn)轫撁嫖醇釉谕瓿桑瑫?huì)獲取失敗

    
    


   
 

在上面的這段代碼中，我希望可以打印oDiv這個(gè)元素，但是我們通過控制臺(tái)可以看到返回的是“null”，這是因?yàn)槭裁茨兀?/p>
瀏覽器在遇到標(biāo)簽時(shí)，才開始呈現(xiàn)內(nèi)容，計(jì)算機(jī)雖然運(yùn)行很快，但是也需要一行一行去讀取的，在我們執(zhí)行console.log打印元素的時(shí)候，這個(gè)元素還沒有生成，自然就獲取不到，想解決這個(gè)問題，我們就需要借助onload事件，將代碼修改為如下：

   


   


onload這個(gè)事件可以幫助我們等待頁面中元素加載完成之后再執(zhí)行后續(xù)操作，這樣的話，頁面中已經(jīng)有了這個(gè)元素的存在，我們的獲取操作就有效果啦。
如果只是這個(gè)問題的話，好像也沒什么嘛，不就是加個(gè)onload嘛～部分同學(xué)是不是表示，完全可以接受吖。當(dāng)然不僅僅只是這樣，我們來看下第二個(gè)問題。
●瀏覽器窗口長時(shí)間空白
正如我們上面看到的，代碼的執(zhí)行是有順序的，我們在引入一個(gè)外部JS文件的時(shí)候，需要等待全部的JS代碼都被下載、解析和執(zhí)行完成以后，才開始呈現(xiàn)頁面的內(nèi)容，對(duì)于需要很多JS文件的頁面來說，下載文件和解析的過程將會(huì)導(dǎo)致頁面無法呈現(xiàn)。這種空白的時(shí)間對(duì)于用戶來說，是非常不好的用戶體驗(yàn)，雖然很多用戶的第一反應(yīng)可能是：“今天網(wǎng)速這么差的么？？”，卻沒想到是頁面本身就存在問題。
為了避免這樣的問題，所以在實(shí)際的工作中，我們推薦寫在標(biāo)簽前面，這樣可以有更好的用戶體驗(yàn)哦～不要再甩鍋給網(wǎng)絡(luò)啦！
●注意事項(xiàng)
如果同時(shí)需要使用內(nèi)部嵌入式的引用和外部文件的引用，正確做法如下：

！！！！千萬不要合并到一起！！！！如下錯(cuò)誤示范：

如果你是初學(xué)者的話，一定一定不要這樣操作，這樣的載入方式會(huì)導(dǎo)致你內(nèi)部嵌入的代碼被忽略，也就是無效。
第三種：行間添加
其實(shí)這種的用途并不多，甚至可能沒有行間的樣式的使用來的頻繁，不過我們可以了解一下～
CSS添加行間樣式

添加行間的JS
  //點(diǎn)擊這個(gè)div會(huì)彈出一個(gè)1

當(dāng)然，關(guān)于script標(biāo)簽的使用方式不僅僅只有這些~
請大家期待下篇吧，我將帶著大家了解一下type屬性的用途等等等等的知識(shí)……