JavaScript實戰訓練小項目
文章目錄
- JavaScript實戰訓練小項目 & WebAPI
- 1. JS操作DOM樹
- 1.1 獲得HTML控件/元素標簽
- 1.2 操縱控件
-
- 1.3 實現一個猜數字的功能
- 2. JQuery
- 3. 簡單計算器
- 4. 聚合搜索
- 5. 表白墻
JavaScript實戰訓練小項目 & WebAPI
1. JS操作DOM樹
在上一篇文章中，其實我們并沒有學JS和HTML的互動，而是各干各的
文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標準編程接口。它是一種與平臺和語言無關的應用程序接口(API),它可以動態地訪問程序和腳本,更新其內容、結構和www文檔的風格(HTML和XML文檔是通過說明部分定義的)。文檔可以進一步被處理，處理的結果可以加入到當前的頁面。DOM是一種基于樹的API文檔，它要求在處理過程中整個文檔都表示在存儲器中。另外一種簡單的API是基于事件的SAX，它可以用于處理很大的XML文檔，由于大，所以不適合全部放在存儲器中處理。
你可以簡單的理解為，jS操作DOM樹就是在獲得HTML的標簽元素并有一些動作
1.1 獲得HTML控件/元素標簽
- 根據id來獲取對象
- document就是本文件對應的對象！
- 可以通過name…等等去獲取
- 但是最常用的是id，因為id是有唯一性的
document.getElementById("標簽的id名");
1.2 操縱控件
1.2.1 獲取屬性值
document.getElementById("id").value;
1.2.1 修改屬性值
例子：
不加js代碼的html代碼：
效果：
加了之后的代碼：
效果：
解釋：
1.3 實現一個猜數字的功能
js中任何產生隨機數呢？
生成一個1到10的隨機數
注意：js中有一些是默認的內置函數，比如select…，所以如果發現運行不了，可能是因為你的函數與內置函數重名了~
<div><h3>猜數字游戲</h3>玩家請輸入一個 1 - 10 的數字： <input type="text" id="input_number"><br><input type="button" value="查看結果" onclick="select1()"><div id="result"></div><script>function select1() {//產生隨機數var number = parseInt(Math.random() * 10) + 1;var inputNumber = document.getElementById("input_number").value;var msg;if(number == parseInt(inputNumber)) {msg = "<h4>恭喜你，猜對了</h4>";}else {msg = "<h4>猜錯了，正確的數字是" + number + "</h4>";}document.getElementById("result").innerHTML = msg;}</script>
</div>
獲取到div對象，可以向里面添加html代碼或者文本
innerHTML，添加html代碼塊，并被瀏覽器編譯innerText，添加文本，不被瀏覽器編譯
innerHTML效果：
innerText效果：
document.getElementById("result").innerText = msg;
2. JQuery
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?fromModule=lemma_inlink)發布。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
簡而言之，它就是一個工具js，是一個很好的外部資源，它提供了很多簡潔高效的API
下載jquery的js文件 - 馬HTML/jquery.min.js · 游離態/馬拉圈2023年5月 - 碼云 - 開源中國 (gitee.com)
使用jquery的網絡地址訪問 - https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js
然后用script標簽引入外部資源就行了
- 寫在head里，保證后續的js代碼都能夠使用jquery的API
上面的猜數字游戲是原生的js代碼，現在是使用jquery的代碼：
- 這些API需要通過jQuery這個對象去調用，有一個別名“$”，但是不建議使用，因為其他的一些js框架，也會使用到這個別名，所以會沖突~
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WebAPI Test</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script></head><body id="body"><div><h3>猜數字游戲</h3>玩家請輸入一個 1 - 10 的數字： <input type="text" id="input_number"><br><input type="button" value="查看結果" onclick="selectByJQuery()"><div id="result"></div><script>function selectByJQuery() {var number = parseInt(Math.random() * 10) + 1;var inputNUmber = jQuery("#input_number").val();var msg;if(number == parseInt(inputNumber)) {msg = "<h4>恭喜你，猜對了</h4>";}else {msg = "<h4>猜錯了，正確的數字是" + number + "</h4>";}jQuery("#result").html(msg);}</script></div></body>
</html>
效果更剛才一致，不做展示
- 你可能會覺得，這也簡約不到哪里去啊
- 這是因為我們的代碼很簡單，代碼一多或者一些場景就會很簡約~
- 前提是你熟悉那些API，不過，不會的查一下就行了唄~
前面的更換背景的代碼可更改為：
- jQuery獲取標簽對象可以參考CSS的標簽選擇器~
function change() {jQuery("body").css("background-image", "url(https://img0.baidu.com/it/u=3007501660,4148393477&fm=253&fmt=auto&app=138&f=JPEG?w=563&h=500)");
}
jQuery的賦值不是等號賦值，而是傳值給對應的函數
效果一致
val方法既可以獲取值，也可以修改值
- 不傳參，返回對應值
- 傳參，value修改成對應的值，返回修改前的值
function selectByJQuery() {var number = parseInt(Math.random() * 10) + 1;jQuery("#input_number").val(number);var inputNumber = jQuery("#input_number").val();var msg;if(number == parseInt(inputNumber)) {msg = "<h4>恭喜你，猜對了</h4>";}else {msg = "<h4>猜錯了，正確的數字是" + number + "</h4>";}jQuery("#result").html(msg);
}
接下來，我們將用js和jquery去實現幾個小項目：
計算器聚合搜索表白墻
3. 簡單計算器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>簡單計算器</title><link rel="stylesheet" href="cal.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body></body>
</html>
<div class="calculator"><div class="cal"><form action="#"><h2>簡單計算器</h2><div class="row">數字一：<input type="text" id="c1"></div> <div class="row">數字二：<input type="text" id="c2"></div><div class="option"><input type="button" value="相加" onclick="add()" id="a"><!-- id不能與函數重復，否則會誤判 --><input type="button" value="相減" onclick="sub()" id="s"><input type="button" value="相乘" onclick="mul()" id="m"><input type="button" value="相除" onclick="div()" id="d"></div><div class="clear"><div class="reset"><input type="reset" value="清空" id="up" onclick="update()"></div></div></form></div>
</div>
<script>function add() {var numb1 = jQuery("#c1").val();var numb2 = jQuery("#c2").val();var sum = parseInt(numb1) + parseInt(numb2);jQuery("#a").val(sum);}function sub() {var numb1 = jQuery("#c1").val();var numb2 = jQuery("#c2").val();var sum = parseInt(numb1) - parseInt(numb2);jQuery("#s").val(sum);}function mul() {var numb1 = jQuery("#c1").val();var numb2 = jQuery("#c2").val();var sum = parseInt(numb1) * parseInt(numb2);jQuery("#m").val(sum);}function div() {var numb1 = jQuery("#c1").val();var numb2 = jQuery("#c2").val();var sum = parseFloat(numb1) / parseInt(numb2);jQuery("#d").val(sum);}function update() {jQuery("#a").val("相加");jQuery("#s").val("相減");jQuery("#m").val("相乘");jQuery("#d").val("相除");}</script>
html {width: 100%;height: 100%;
}
body {width: 100%;height: 100%;background-image: url("海.jpg");background-position: center center;background-repeat: no-repeat;background-size: cover;
}
.calculator {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
.cal {width: 600px;height: 400px;background-color: rgba(255, 255, 255, 0.5);border-radius: 20px;
}
.cal h2 {font-size: 24px;text-align: center;margin-top: 60px;margin-bottom: 40px;
}.cal .row {height: 50px;width: 100%;display: flex;justify-content: space-around;/*設置flex的原因就是要用這個*/align-items: center;font-size: 25px;font-weight: 900;margin: 10px;
}
#c1 {width: 400px;height: 45px;font-size: 23px;text-indent: 10px;border-radius: 10px;
}
#c2 {width: 400px;height: 45px;font-size: 23px;text-indent: 10px;border-radius: 10px;
}.option input {display: block;font-weight: 900;font-size: 20px;width: 100px;height: 70px;color: rgba(255, 255, 255, 0.618);border-radius: 20px;background-color: rgba(251,114,153, 0.7);
}
.option {margin-top: 20px;display: flex;justify-content: space-around;
}
.clear {display: flex;justify-content: center;align-items: center;
}
.reset #up {width: 200px;height: 30px;background-color:rgba(0, 0, 0, 0.4);color: white;font-weight: 900;line-height: 30px;text-align: center;border-radius: 2010px;border:none;margin-top: 20px;transition: all 0.618s;
}
#up:hover{background-color: rgba(251,114,153, 0.7);
}
效果：
4. 聚合搜索
- 聚合搜索就是一個頁面，上面有一欄按鈕，按一下就跳轉到對應的網址，欄下的頁面轉換為對應的網址，但是選擇欄還在
- 主要是為了提高體驗感~
html：
- 嵌入頁面用iframe標簽
- 我們只需要點擊按鈕的時候，改變iframe的src屬性即可
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="AS.css" /><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><title>聚合搜索</title></head><body><!-- 這里是我比較常用的
網站，可以實際更換 --><!-- 值得一提的是，有些網址不支持“嵌套” --><div id="option"><input type="button" value="b站" onclick="toBilibili()" /><input type="button" value="CSDN" onclick="toCSDN()" /><input type="button" value="碼云" onclick="toGit()" /></div><hr /><!-- 嵌入網頁的框架iframe標簽 --><!-- 給一個初始頁面 --><div class="ifm"><iframe src="#" id="frame"></iframe></div><script>function toBilibili() {jQuery("#frame").attr("src", "https://www.bilibili.com/");}function toCSDN() {jQuery("#frame").attr("src","https://blog.csdn.net/?spm=1000.2115.3001.4477");}function toGit() {jQuery("#frame").attr("src", "https://gitee.com/carefree-state");}</script></body>
</html>
CSS修飾：
html {width: 100%;height: 100%;
}
body {width: 100%;height: 100%;background-image: url("海.jpg");background-position: center center;background-repeat: no-repeat;background-size: cover;
}
#option {width: 100%;height: 30px;display: flex;justify-content: space-around;
}
#option input {display: block;font-weight: 900;font-size: 15px;color: rgba(255, 255, 255, 0.618);border-radius: 9px;background-color: rgba(251,114,153, 0.7);
}
.ifm {height: calc(100% - 30px);display: flex;justify-content: center;align-items: center;
}
iframe {width: 1200px;height: 600px;
}
效果：
一開始出現了“套娃”現象，其實#號代表就是當前的頁面了，所以它將頁面套了進去 可能會有一些網站拒絕被嵌入的
5. 表白墻
- 這是個簡陋的表白墻
- 輸入發起者，輸入接收者，輸入表白話語，然后顯示在表白墻上
想法：
- 左上角是輸入框，為”表白“
- 右邊為表白詳細，為”墻“
script行為：
- 獲取三個信息
- 進行非空校驗
- 通過trim去掉空格后，看看是不是空字符串
- 用alert提醒
- 用focus聚焦到對應的文本框
- 發送成功情況數據
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="pursue.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><title>表白墻</title></head><body><div class="container"><div class="container-left"><div class="card"><form action="#"><h1>表白</h1><div class="row">誰： <input type="text" id="c1"></div> <div class="row">想對誰：<input type="text" id="c2"></div> <div class="row">說： <input type="text" id="c3"></div><div class="print"><div class="s"><input type="button" value="發送" id="go" onclick="send()"></div></div></form></div></div><div class="container-right"><div class="article" id="a"><h1 style="font-size: 50px;">墻</h1></div></div> </div><script> function send() {var text1 = jQuery("#c1");var text2 = jQuery("#c2");var text3 = jQuery("#c3");if(text1.val().trim() == "") {alert("請輸入是誰！");text1.focus();return;}if(text2.val().trim() == "") {alert("請輸入想對誰說！");text2.focus();return;}if(text3.val().trim() == "") {alert("請輸入想說什么！");text3.focus();return;}var loveWords = "<br><h2>" + text1.val() + " 想對 " + text2.val() + " 說 " + text3.val() + "！</h2>";jQuery("#a").append(loveWords);text1.val("");text2.val("");text3.val("");}</script></body>
</html>
css修飾：
* {box-sizing: border-box;padding: 0;margin: 0;
}
html {height: 100%;
}
body {background-image: url(海.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;height: 100%;
}
.container {/* 固定寬度 */width: 1000px;margin: 0 auto;height: 100%;display: flex;justify-content: space-between;
}/* 增加可讀性 */
.container .container-left {height: 100%;width: 25%;
}.container .container-right {height: 100%;width: 74%;
}
.card {margin-top: 10px;height: 245px;width: 100%;background-color: rgba(255, 255, 255, 0.8);border-radius: 25px;
}
.article {margin-top: 10px;height: calc(100% - 10px);width: 100%;background-color: rgba(255, 255, 255, 0.8);border-radius: 15px;padding: 5px 20px;overflow: auto;/* 內容溢出，滾動條放入這里 */
}
.article h2 {color: rgba(251, 114, 153, 0.8);
}.card h1 {font-size: 50px;text-align: center;margin-top: 15px;margin-bottom: 15px;
}
.row {height: 30px;width: 100%;display: flex;justify-content: space-around; /*設置flex的原因就是要用這個*/align-items: center;font-size: 15px;margin: 5px;font-weight: 900;
}
#c1 {width: 120px;height: 19px;font-size: 12px;text-indent: 4px;border-radius: 4px;font-weight: 900;color: rgba(251, 114, 153, 0.7);
}
#c2 {width: 120px;height: 19px;font-size: 12px;text-indent: 4px;border-radius: 4px;font-weight: 900;color: rgba(251, 114, 153, 0.7);
}
#c3 {width: 120px;height: 19px;font-size: 12px;text-indent: 4px;font-weight: 900;border-radius: 4px;font-weight: 900;color: rgba(251, 114, 153, 0.7);
}
.print {display: flex;justify-content: center;align-items: center;
}
.s #go {width: 150px;height: 25px;background-color: rgba(0, 0, 0, 0.4);color: white;font-weight: 900;line-height: 25px;text-align: center;border-radius: 10px;border: none;margin-top: 10px;transition: all 0.618s;
}
#go:hover {background-color: rgba(251, 114, 153, 0.7);
}
效果：
非空校驗：
文章到此結束！謝謝觀看
可以叫我 小馬，我可能寫的不好或者有錯誤，但是一起加油鴨🦆！
前端知識就講解這么多了！
- 我們只是了解而已，沒必要去背，不會的忘了的，去查文檔就行了！
- 邊查邊用！
后續的后端知識非常重要！敬請期待我的講解！
color: rgba(251, 114, 153, 0.7);
}
.print {
display: flex;
justify-content: center;
align-items: center;
}
.s #go {
width: 150px;
height: 25px;
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-weight: 900;
line-height: 25px;
text-align: center;
border-radius: 10px;
border: none;
margin-top: 10px;
transition: all 0.618s;
}
#go:hover {
background-color: rgba(251, 114, 153, 0.7);
}
> 效果：
>
> [外鏈圖片轉存中...(img-O1nG4DKE-1684658676673)]
>
> > 非空校驗：
> >
> > [外鏈圖片轉存中...(img-XHBChGsF-1684658676674)]---
>**文章到此結束！謝謝觀看**
>可以叫我 ***小馬***，我可能寫的不好或者有錯誤，但是一起加油鴨*🦆*！
>>前端知識就講解這么多了！
>>
>>* 我們只是了解而已，沒必要去背，不會的忘了的，去查文檔就行了！
>>* 邊查邊用！
>>
>>后續的后端知識非常重要！敬請期待我的講解！---
