整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
最近在 GitHub 上發(fā)現(xiàn)了一個(gè) vanillawebprojects[1] 開源倉(cāng)庫(kù)，里面收集了 20 個(gè) JavaScript+Html+CSS的練手項(xiàng)目，沒有使用任何框架，可以讓你從基礎(chǔ)入門到深入學(xué)習(xí)。這些項(xiàng)目原本是 Udemy 上 20 Web Projects With Vanilla JavaScript 課程的一部分，但是如果你已經(jīng)擁有了一些基礎(chǔ)，不妨試著看一下源碼，然后模仿實(shí)現(xiàn)吧
判斷輸入的表單字段是否合法
一個(gè)簡(jiǎn)單的電影座位預(yù)定演示項(xiàng)目
一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)視頻播放器
計(jì)算不同貨幣的兌換匯率
練習(xí)如何操作 DOM 數(shù)組
練習(xí)如何彈出登錄注冊(cè)窗口，以及滑動(dòng)彈出菜單
練習(xí)如何判斷隱藏字符是否正確
簡(jiǎn)單的點(diǎn)餐查詢應(yīng)用
簡(jiǎn)單的購(gòu)物車結(jié)算應(yīng)用
簡(jiǎn)單的網(wǎng)頁(yè)音樂播放器
網(wǎng)頁(yè)無限向下滾動(dòng)實(shí)現(xiàn)
簡(jiǎn)單的打字輸入游戲
文本閱讀器
測(cè)試記憶的記憶卡片
網(wǎng)頁(yè)歌詞搜索器
模擬呼吸的節(jié)奏
簡(jiǎn)單的網(wǎng)頁(yè)破冰游戲
網(wǎng)頁(yè)新年倒計(jì)時(shí)
網(wǎng)頁(yè)財(cái)富榜單
說出數(shù)字，猜測(cè)數(shù)字
今天我們給大家分享了，20 個(gè) JavaScript+Html+CSS 練手小項(xiàng)目，大家覺得哪個(gè)最簡(jiǎn)單，哪個(gè)最復(fù)雜呢？趕緊去 Github 倉(cāng)庫(kù)拉取項(xiàng)目，碼上行動(dòng)吧
歡迎關(guān)注公眾號(hào)：KnowHub 知識(shí)加油站！
[1]
vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過得還好嗎？
我們總是先揚(yáng)起塵土
然后抱怨自己看不見
- 2024.04.17 -
JavaScript是一種輕量級(jí)的編程語(yǔ)言，通常用于網(wǎng)頁(yè)開發(fā)，以增強(qiáng)用戶界面的交互性和動(dòng)態(tài)性。然而在HTML中，有多種方法可以嵌入和使用JavaScript代碼。
本文就帶大家深入了解如何在HTML中使用JavaScript。
要在HTML中使用JavaScript，我們需要使用<script>標(biāo)簽。這個(gè)標(biāo)簽可以放在<head>或<body>部分，但通常我們會(huì)將其放在<body>部分的底部，以確保在執(zhí)行JavaScript代碼時(shí)，HTML文檔已經(jīng)完全加載。
使用 <script> 標(biāo)簽有兩種方式：直接在頁(yè)面中嵌入 JavaScript 代碼和包含外部 JavaScript 文件。
包含在 <script> 標(biāo)簽內(nèi)的 JavaScript 代碼在瀏覽器總按照從上至下的順序依次解釋。
所有 <script> 標(biāo)簽都會(huì)按照他們?cè)?HTML 中出現(xiàn)的先后順序依次被解析。
HTML 為 <script> 定義了幾個(gè)屬性：
1）async：可選。表示應(yīng)該立即下載腳本，但不妨礙頁(yè)面中其他操作。該功能只對(duì)外部 JavaScript 文件有效。
如果給一個(gè)外部引入的js文件設(shè)置了這個(gè)屬性，那頁(yè)面在解析代碼的時(shí)候遇到這個(gè)<script>的時(shí)候，一邊下載該腳本文件，一邊異步加載頁(yè)面其他內(nèi)容。
2）defer：可選。表示腳本可以延遲到整個(gè)頁(yè)面完全被解析和顯示之后再執(zhí)行。該屬性只對(duì)外部 JavaScript 文件有效。
3）src：可選。表示包含要執(zhí)行代碼的外部文件。
4）type：可選。表示編寫代碼使用的腳本語(yǔ)言的內(nèi)容類型，目前在客戶端，type 屬性值一般使用 text/javascript。不過這個(gè)屬性并不是必需的，如果沒有指定這個(gè)屬性，則其默認(rèn)值仍為text/javascript。
1.1 直接在頁(yè)面中嵌入JavaScript代碼
內(nèi)部JavaScript是將JavaScript代碼放在HTML文檔的<script>標(biāo)簽中。這樣可以將JavaScript代碼與HTML代碼分離，使結(jié)構(gòu)更清晰，易于維護(hù)。
在使用<script>元素嵌入JavaScript代碼時(shí)，只須為<script>指定type屬性。然后，像下面這樣把JavaScript代碼直接放在元素內(nèi)部即可：
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>如果沒有指定script屬性，則其默認(rèn)值為text/javascript。
包含在<script>元素內(nèi)部的JavaScript代碼將被從上至下依次解釋。在解釋器對(duì)<script>元素內(nèi)部的所有代碼求值完畢以前，頁(yè)面中的其余內(nèi)容都不會(huì)被瀏覽器加載或顯示。
在使用<script>嵌入JavaScript代碼的過程中，當(dāng)代碼中出現(xiàn)"</script>"字符串時(shí)，由于解析嵌入式代碼的規(guī)則，瀏覽器會(huì)認(rèn)為這是結(jié)束的</script>標(biāo)簽。可以通過轉(zhuǎn)義字符“\”寫成<\/script>來解決這個(gè)問題。
1.2 包含外部 JavaScript 文件
外部JavaScript是將JavaScript代碼放在單獨(dú)的.js文件中，然后在HTML文檔中通過<script>標(biāo)簽的src屬性引用這個(gè)文件。這種方法可以使代碼更加模塊化，便于重用和共享。
如果要通過<script>元素來包含外部JavaScript文件，那么src屬性就是必需的。這個(gè)屬性的值是一個(gè)指向外部JavaScript文件的鏈接。
<script type="text/javascript" src="example.js"></script>與解析嵌入式JavaScript代碼一樣，在解析外部JavaScript文件（包括下載該文件）時(shí)，頁(yè)面的處理也會(huì)暫時(shí)停止。
注意：帶有src屬性的<script>元素不應(yīng)該在其<script>和</script>標(biāo)簽之間再包含額外的JavaScript代碼。如果包含了嵌入的代碼，則只會(huì)下載并執(zhí)行外部腳本文件，嵌入的代碼會(huì)被忽略。
通過<script>元素的src屬性還可以包含來自外部域的JavaScript文件。它的src屬性可以是指向當(dāng)前HTML頁(yè)面所在域之外的某個(gè)域中的完整URL。
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>于是，位于外部域中的代碼也會(huì)被加載和解析。
1.3 標(biāo)簽的位置
在HTML中，所有的<script>標(biāo)簽會(huì)按照它們出現(xiàn)的先后順序被解析。在不使用defer和async屬性的情況下，只有當(dāng)前面的<script>標(biāo)簽中的代碼解析完成后，才會(huì)開始解析后面的<script>標(biāo)簽中的代碼。
通常，所有的<script>標(biāo)簽應(yīng)該放在頁(yè)面的<head>標(biāo)簽中，這樣可以將外部文件（包括CSS和JavaScript文件）的引用集中放置。
然而，如果將所有的JavaScript文件都放在<head>標(biāo)簽中，會(huì)導(dǎo)致瀏覽器在呈現(xiàn)頁(yè)面內(nèi)容之前必須下載、解析并執(zhí)行所有JavaScript代碼，這可能會(huì)造成明顯的延遲，導(dǎo)致瀏覽器窗口在加載過程中出現(xiàn)空白。
為了避免這種延遲問題，現(xiàn)代Web應(yīng)用程序通常會(huì)將所有的JavaScript引用放置在<body>標(biāo)簽中的頁(yè)面內(nèi)容的后面。這樣做可以確保在解析JavaScript代碼之前，頁(yè)面的內(nèi)容已經(jīng)完全呈現(xiàn)在瀏覽器中，從而加快了打開網(wǎng)頁(yè)的速度。
JavaScript 解析過程包括兩個(gè)階段：預(yù)處理（也稱預(yù)編譯）和執(zhí)行。
1、執(zhí)行過程
HTML 文檔在瀏覽器中的解析過程是：按照文檔流從上到下逐步解析頁(yè)面結(jié)構(gòu)和信息。
JavaScript 代碼作為嵌入的腳本應(yīng)該也算做 HTML 文檔的組成部分，所以 JavaScript 代碼在裝載時(shí)的執(zhí)行順序也是根據(jù) <script> 標(biāo)簽出現(xiàn)的順序來確定。
你是不是厭倦了一成不變的編程模式？想要突破自我，挑戰(zhàn)新技術(shù)想要突破自我，挑戰(zhàn)新技術(shù)？卻遲遲找不到可以練手的項(xiàng)目實(shí)戰(zhàn)？是不是夢(mèng)想打造一個(gè)屬于自己的支付系統(tǒng)？那么，恭喜你，云端源想免費(fèi)實(shí)戰(zhàn)直播——《微實(shí)戰(zhàn)-使用支付寶/微信支付服務(wù)，網(wǎng)站在線支付功能大揭秘》正在進(jìn)行，點(diǎn)擊前往獲取源碼！云端源想
2、預(yù)編譯
當(dāng) JavaScript 引擎解析腳本時(shí)候，他會(huì)在與編譯期對(duì)所有聲明的變量和函數(shù)預(yù)先進(jìn)行處理。當(dāng) JavaScript 解析器執(zhí)行下面腳本時(shí)不會(huì)報(bào)錯(cuò)。
alert(a); //返回值 undefined
var a = 1;
alert(a); //返回值 1由于變量聲明是在預(yù)編譯期被處理的，在執(zhí)行期間對(duì)于所有的代碼來說，都是可見的，但是執(zhí)行上面代碼，提示的值是 undefined 而不是 1。
因?yàn)樽兞砍跏蓟^程發(fā)生在執(zhí)行期，而不是預(yù)編譯期。在執(zhí)行期，JavaScript 解析器是按照代碼先后順序進(jìn)行解析的，如果在前面代碼行中沒有為變量賦值，則 JavaScript 解析器會(huì)使用默認(rèn)值 undefined 。
由于第二行中為變量 a 賦值了，所以在第三行代碼中會(huì)提示變量 a 的值為 1，而不是 undefined。
fun(); //調(diào)用函數(shù)，返回值1
function fun(){
alert(1);
}函數(shù)聲明前調(diào)用函數(shù)也是合法的，并能夠正確解析，所以返回值是 1。但如果是下面這種方式則 JavaScript 解釋器會(huì)報(bào)錯(cuò)。
fun(); //調(diào)用函數(shù)，返回語(yǔ)法錯(cuò)誤
var fun = function(){
alert(1);
}上面的這個(gè)例子中定義的函數(shù)僅作為值賦值給變量 fun 。在預(yù)編譯期，JavaScript 解釋器只能夠?yàn)槁暶髯兞?fun 進(jìn)行處理，而對(duì)于變量 fun 的值，只能等到執(zhí)行期時(shí)按照順序進(jìn)行賦值，自然就會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤，提示找不到對(duì)象 fun。
總結(jié)：聲明變量和函數(shù)可以在文檔的任意位置，但是良好的習(xí)慣應(yīng)該是在所有 JavaScript 代碼之前聲明全局變量和函數(shù)，并對(duì)變量進(jìn)行初始化賦值。在函數(shù)內(nèi)部也是先聲明變量，后引用。
通過今天的分享，相信大家已經(jīng)對(duì)JavaScript在HTML中的應(yīng)用有了一定的了解。這只是冰山一角，JavaScript的潛力遠(yuǎn)不止于此。希望這篇文章能激發(fā)大家對(duì)編程的熱情，讓我們一起在編程的世界里探索更多的可能性！
我們下期再見！
END
文案編輯|云端學(xué)長(zhǎng)
文案配圖|云端學(xué)長(zhǎng)
內(nèi)容由：云端源想分享
多朋友可能在學(xué)習(xí)javascript的時(shí)候感覺很枯燥乏味，找不到方法跟方向，今天就給大家分享些學(xué)習(xí)javascript的方法技巧跟心得。
如今的編程行業(yè)吸引了眾多其他行業(yè)的同志加入我們程序員的行列，還有很多半路“回車”了。原因大概就以下幾種：
堅(jiān)持不下去
沒找到方法
覺得時(shí)間太久
部分人覺得有點(diǎn)難度
感覺學(xué)了不知道怎么用
那么今天就這些問題給大家一個(gè)清晰的思路，跟分享如何學(xué)好javascript，提前告訴大家一聲，學(xué)好了javascript，框架之類的都沒問題，要知道，JS框架的原生是javascript。
好了，雞湯之類的我不說，直接開工。
針對(duì)第一個(gè)原因，我想發(fā)表下自己的看法！首先問問自己，為什么當(dāng)初選擇了編程，而如今卻寸步難行？其次，你有沒有問問自己的決心，是不是非要堅(jiān)持下來，當(dāng)然了如果你是業(yè)余愛好者，小編我只能說，雞湯我干了，你隨意！
既然當(dāng)初，熱血沸騰的進(jìn)來了，咋們就不能空手而退，一定得堅(jiān)持。不是有句話說的好嘛，這個(gè)成功與失敗之間原因很簡(jiǎn)單，同樣的事情，別人堅(jiān)持了，而你只是沒堅(jiān)持而已。
額，話說，到這怎么還沒見關(guān)于javascript的事情，原諒小編話多。。。（尷尬）
來到第二個(gè)原因，也是今天的重點(diǎn)，學(xué)習(xí)方法。這里還是老規(guī)矩，先列出流程：
找一本合適自己的書
找到自己合適的編寫代碼的工具
學(xué)會(huì)找資源
學(xué)會(huì)用代碼總結(jié)
好了，我的粉絲們，大概你們知道我接下來要干啥了。對(duì)，沒錯(cuò)，開始念經(jīng)。。。
如何找到一本適合自己的javascript書籍呢？決定于你是否純小白還是半點(diǎn)兒白，純白的建議你選擇javascript權(quán)威指南，半白的建議你javascript高級(jí)程序設(shè)計(jì)，這兩本書，我多次在不同社區(qū)跟平臺(tái)給別人推薦過。因?yàn)槲艺J(rèn)為，這兩本書的過渡很好。
那么找到書了，開始學(xué)，學(xué)的時(shí)候得邊寫代碼吧！這時(shí)候找個(gè)得心應(yīng)手的工具在合適不過了。建議大家學(xué)習(xí)javascript不要用瀏覽器去看結(jié)果，不方便。來，跟著老司機(jī)動(dòng)起來
一、下載node.js，并且全局安裝
二、找到你的javascript文件目錄，運(yùn)行命令，輸入node 文件名.js 你會(huì)有大發(fā)現(xiàn)
效果圖如下：
邊寫邊看，效率高
這樣你在學(xué)方法的時(shí)候，屬性操作的時(shí)候，能夠快速清晰的看到結(jié)果。話說用命令行學(xué)習(xí)，逼格是不是高了點(diǎn)。哈哈！
當(dāng)你學(xué)的有點(diǎn)苗頭了，別想著它能干啥，想想找點(diǎn)資源來練手，網(wǎng)絡(luò)上一大堆的javascript寫的特效代碼，拿來練手不是更好？
最后，總結(jié)性的用javascript結(jié)合web前端布局，寫一個(gè)有點(diǎn)效果的靜態(tài)網(wǎng)頁(yè)，找成就感，多給自己找找成就感，學(xué)習(xí)起來倍兒輕松。
好了，前面幾個(gè)簡(jiǎn)單概括了下。現(xiàn)在重點(diǎn)講講怎么學(xué)習(xí)javascript！
當(dāng)你在看javascript書的第一天開始，你一定得分好時(shí)間，什么時(shí)間看什么部分的書！比如：簡(jiǎn)介性質(zhì)部分，概念部分，代碼示例部分。
給大家一個(gè)比較好的安排：簡(jiǎn)介可以當(dāng)小說看，在地鐵上，公交上；概念建議夜深人靜的時(shí)候看，你的世界沒人打擾你；代碼示例建議任何有空時(shí)間都要敲，不敲代碼敲什么。
當(dāng)我們開始堅(jiān)持了一段時(shí)間，然后回過頭來重復(fù)我上面說的第三跟第四部分，最終行成，成就感由小到大，慢慢的時(shí)間一長(zhǎng)，你會(huì)發(fā)現(xiàn)，原來我已經(jīng)學(xué)的差不多了！
開到這里，大家可能覺得怎么沒見一行代碼，沒錯(cuò)，今天這個(gè)就是javascript開篇，給大家一個(gè)清晰的思路，后之我在分享javascript這個(gè)腳本語(yǔ)言的時(shí)候，你會(huì)很快接受。而且學(xué)習(xí)興趣會(huì)增強(qiáng)。那么，提前跟大家說下接下來要分享的javascript文章流程。
一、javascript基礎(chǔ)知識(shí)（主要分享變量跟數(shù)據(jù)類型）
二、javascript常用語(yǔ)句（主要分享?xiàng)l件判斷循環(huán)）
三、javascript函數(shù)（函數(shù)）重點(diǎn)
四、javascript環(huán)境跟作用域（重難點(diǎn)，主要是概念）
五、javascript對(duì)象（長(zhǎng)期要講的，可知多重要）
希望接下來的這些分享，可以給學(xué)編程的你帶來幫助！
加油
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
