當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript脚本基础教程

發布時間：2023/12/15 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript脚本基础教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、JavaScript簡單介紹

Javascript（簡稱js）語言誕生主要是完成頁面的數據驗證。因此它運行在客戶端，需要運行瀏覽器來解析執行 JavaScript 代碼。 JS 是 Netscape 網景公司的產品，最早取名為 LiveScript;為了吸引更多 java 程序員。更名為 JavaScript。 JS 是弱類型，Java 是強類型。

js的特點：

交互性（它可以做的就是信息的動態交互）

安全性（不允許直接訪問本地硬盤）

跨平臺性（只要是可以解釋 JS 的瀏覽器都可以執行，和平臺無關）

2、js和html結合的使用方式

1、在html頁面除了title標簽之外任何地方寫上

2、在外部定義js單獨引入
src =“js文件的路徑”

3、js變量

js的常見變量類型如下五種：
數值類型： number
字符串類型： string
對象類型： object
布爾類型： boolean
函數類型： function

js當中特殊的值：
undefined 未定義，所有 js 變量未賦于初始值的時候，默認值都是 undefined.
null 空值
NaN 全稱是：Not a Number。非數字。非數值

js定義變量的語法：var 變量名 = 值；

4、js關系比較運算和邏輯比較運算

關系運算
等于： == 比較值
全等于： === 除了做字面值的比較之外，還會比較兩個變的數據類型

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var i = "11";var j = 11;document.write( i == j);document.write("<br />")document.write(i === j)</script></body> </html>

邏輯運算
且運算： &&
或運算： ||
取反運算： !

0 、null、 undefined、””(空串) 都認為是 false；

&& 且運算。
第一種：當表達式全為真的時候。返回最后一個表達式的值。
第二種：當表達式中，有一個為假的時候。返回第一個為假的表達式的值

|| 或運算
第一種情況：當表達式全為假時，返回最后一個表達式的值第二種情況：只要有一個表達式為真。就會把回第一個為真的表達式的值

5、js當中的數組

js數組的定義：
var 數組名 = []; // 空數組
var 數組名 = [1 , ’abc’ , true]; // 定義數組同時賦值元素

arr[0] = 12; // alert( arr[0] );//12 // alert( arr.length ); // 0 // javaScript 語言中的數組，只要我們通過數組下標賦值，那么最大的下標值，就會自動的給數組做擴容操作。 arr[2] = "abc"; alert(arr.length); //3 // alert(arr[1]);// undefined // 數組的遍歷 for (var i = 0; i < arr.length; i++){ alert(arr[i]); }

6、js當中的的函數（function）

第一種方法：使用function關鍵字來定義
function 函數名(形參列表){
函數體
}

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">function fun() {document.write("我是無參函數fun");}function sum(num1, num2) {document.write("我是有參函數：")var result = num1 + num2;return result;}document.write(fun());document.write("<br />")document.write(sum(100, 50));</script></body></html>

第二種定義函數的方法
var 函數名 = function(形參列表) {
函數體
}

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var fun = function() {document.write("我是無參函數fun");}var sum = function (num1, num2) {document.write("我是有參函數：")var result = num1 + num2;return result;}document.write(fun());document.write("<br />")document.write(sum(100, 50));</script></body></html>

注意：在 Java 中函數允許重載。但是在 JS 中函數的重載會直接覆蓋掉上一次的定義。

7、js中的自定義對象

Object 形式的自定義對象對象的定義：
var 變量名 = new Object(); // 對象實例（空對象）
變量名.屬性名 = 值; // 定義一個屬性
變量名.函數名 = function(){} // 定義一個函數
對象的訪問：變量名.屬性 / 函數名();

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//創建對象var dog = new Object();//創建屬性dog.color = "白色";dog.age = 2;//創建函數dog.fun = function () {document.write("顏色："+this.color+"<br/>狗狗年齡："+this.age);}dog.fun();</script></body></html>

{}花括號形式的自定義對象
對象的定義： var 變量名 = { // 空對象
屬性名：值, // 定義一個屬性
屬性名：值, // 定義一個屬性
函數名：function(){} // 定義一個函數
};
對象的訪問：變量名.屬性 / 函數名();

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var dog = {name: "小白",color: "白色",sex: "公",show: function() {document.write("姓名：" + this.name + "顏色：" + this.color + "性別：" + this.sex)}};dog.show();document.write("<br />")document.write(dog.name)</script></body></html>

8、js事件

什么是事件？事件是電腦輸入設備與頁面進行交互的響應。我們稱之為事件。

常用的幾種事件如下：

8.1onclick 單擊事件

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><input type="button" id="" value="單擊我" onclick="show()"/><body><script type="text/javascript">var show = function () {alert("我愛學習javascript");}</script></body></html>

8.2移入移出事件

當用戶移到某個位置或者移出某個位置做出響應。
onmouseenter：鼠標移入響應
onmouseout：鼠標移出響應

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><p id="pp" onmouseenter="p1()" onmouseout="p2()">javascript</p><body><script type="text/javascript">var p1 = function(){document.getElementById("pp").style.background = "red";}var p2 = function(){document.getElementById("pp").style.background = "none";}</script></body></html>

8.3獲得焦點失去焦點事件

onfocus 獲得焦點響應
onblur失去焦點響應

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><input type="text" value="" id="text" onfocus="p1()" onblur="p2()"/><body><script type="text/javascript">var p1 = function(){document.getElementById("text").style.borderColor = "red";}var p2 = function(){document.getElementById("text").style.borderColor="white";}</script></body></html>

點擊文本框的時候邊框會變色，移開文本框的時候邊框會變沒。

8.4、onchange事件

onchange 改變后觸發。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><select name="" id="ss" onchange="color_select()"><option value="red">紅色</option><option value="blue">藍色</option><option value="black">黑色</option></select><body><script type="text/javascript">var color_select = function() {co = document.getElementById("ss").value;document.bgColor = co;}</script></body></html>

當選擇下拉框進行背景顏色改變

8.5 onlode事件

onload 事件是瀏覽器解析完頁面之后就會自動觸發的事件

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body onload="onloadFun()"><script type="text/javascript">function onloadFun() {alert('靜態注冊 onload 事件，所有代碼');}</script></body></html>

瀏覽器解析完頁面之后，觸發該事件

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">window.onload = function() {alert("動態注冊的 onload 事件");}</script></body></html>

8.6 onsubmit表單提交事件

對表單里填寫的信息進行驗證。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><form action="//www.baidu.com" method="post" onsubmit="return checkForm()"> 密碼：<input type="password" id="pwd1" value="" onkeyup="onkeyups(this)"/> <span id="spans"></span>確認密碼：<input type="password" id="pwd2" value="" onkeyup="checkpassword(this)"/><span id="spans1"></span><input type="submit" value="提交" /></form><script type="text/javascript">function checkForm() {var pwd1 = document.getElementById("pwd1").value;var pwd2 = document.getElementById("pwd2").value;if(pwd1 != "" && pwd2 != "") {return true;} else {alert('密碼不能為空！');return false;}}function onkeyups(obj){var len = obj.value.length;if(len<6){document.getElementById("spans").innerHTML="你長度不夠！";}else{document.getElementById("spans").innerHTML="你長度夠了！";}}function checkpassword(obj){var pwd2 = obj.value;var pwd1= document.getElementById("pwd1").value;if(pwd1 != pwd2){document.getElementById("spans1").innerHTML="密碼不一致！";}else{document.getElementById("spans1").innerHTML="密碼一致！";}}</script></body></html>

8.7 keydown鍵盤事件

keydown：當用戶按下鍵盤上的任意按鍵時觸發，如果按住不放，會重復觸發此事件。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">document.onkeydown = function (){document.getElementById("text1").style.color="red";}</script><input type="text" id="text1"/></body></html>

按下鍵盤任意內容輸入在文本框文本框里面的值會變成紅色。

9、操作DOM

DOM 全稱是 Document Object Model 文檔對象模型
簡單來說就是把文檔中的標簽，屬性，文本，轉換成為對象來管理。

Document 對象的理解：
第一點：Document 它管理了所有的 HTML 文檔內容。
第二點：document 它是一種樹結構的文檔。有層級關系。
第三點：它讓我們把所有的標簽都對象化第四點：我們可以通過 document 訪問所有的標簽對象。

9.1Document對象中的方法介紹

document.getElementById(elementId) 通過標簽的 id 屬性查找標簽 dom 對象，elementId 是標簽的 id 屬性值

document.getElementsByName(elementName) 通過標簽的 name 屬性查找標簽 dom 對象，elementName 標簽的 name 屬性值

document.getElementsByTagName(tagname) 通過標簽名查找標簽
dom 對象。

tagname 是標簽名 document.createElement( tagName) 方法，通過給定的標簽名，創建一個標簽對象。tagName 是要創建的標簽名

document 對象的三個查詢方法，如果有 id 屬性，優先使用 getElementById 方法來進行查詢如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢如果 id 屬性和 name 屬性都沒有最后再按標簽名查 getElementsByTagName 以上三個方法，一定要在頁面加載完成之后執行，才能查詢到標簽對象。

當用戶點擊了較驗按鈕，要獲取輸出框中的內容。然后驗證其是否合法。
* 驗證的規則是：必須由字母，數字。下劃線組成。并且長度是 5 到 12 位。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body>用戶名：<input type="text" id="username" value="wzg" /> <span id="usernameSpan" style="color:red;"> </span> <button onclick="onclickFun()">較驗</button><script type="text/javascript">function onclickFun(){//首先獲得文本標簽對象var name = document.getElementById("username");//Element 是一個dom對象var nametext= name.value;// 如何驗證字符串，符合某個規則，需要使用正則表達式技術 var patt = /^\w{5,12}$/;//得到sapn標簽對象var spans=document.getElementById("usernameSpan");//test()方法用于測試某個字符串，是不是匹配我的規則，匹配返回true，不匹配返回falseif(patt.test(nametext)){//如果合法spans.innerHTML = "你好啊,名字合法！";}else{spans.innerHTML = "不合法的名字！";}}</script></body></html>

9.1getElementsByName 方法示例

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><p>請選擇您的興趣愛好：<label><input type="checkbox" id="all" />全選</label><label><input type="checkbox" id="NotAll" />反選</label></p><label><input type="checkbox" class="hobby" />游泳</label><label><input type="checkbox" class="hobby" />打游戲</label><label><input type="checkbox" class="hobby" />看電影</label><label><input type="checkbox" class="hobby" />泡妹子</label><label><input type="checkbox" class="hobby" />爬山</label><script>var all = document.getElementById("all");var NotAll = document.getElementById("NotAll");var hobby = document.getElementsByClassName("hobby");var flag = true;// 全選按鈕點擊all.onclick = function() {// 返回一個布爾值，如果選中返回true，取消選中返回falseconsole.log(all.checked);if(all.checked) { // 如果全選選中，下面的興趣就都選中for (var i = 0; i < hobby.length; i++) {hobby[i].checked = true;}}else { // 如果全選取消選中，下面的興趣就都取消選中for (var i = 0; i < hobby.length; i++) {hobby[i].checked = false;}}}// 反選按鈕點擊NotAll.onclick = function() {if(NotAll.checked) {for (var i = 0; i < hobby.length; i++) {hobby[i].checked = !hobby[i].checked;}} else {for (var i = 0; i < hobby.length; i++) {hobby[i].checked = !hobby[i].checked;}}}// 外層的for循環是給下面的每一個興趣愛好添加事件// 里面的for循環是當點擊興趣愛好復選框時，判斷是否所有的興趣愛好復選框都選中了for (var i = 0; i < hobby.length; i++) {hobby[i].onclick = function() {for (var i = 0; i < hobby.length; i++) {if(hobby[i].checked == false) {flag = false;break; // 節約性能}else{flag = true;}}// 如果flag為真就全選，否則就取消選中if(flag) {all.checked = true;}else{all.checked = false;}}}</script></body> </html>

點擊全選、反選的時候復選框全部被選中，當單獨把復選框一個個點滿了全選會自動勾上。

9.2BOM增刪改查

DOM操作思維導圖

9.3增刪改查案例

創建div標簽向div添加內容

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body><script type="text/javascript">window.onload = function () {// 創建一個html標簽對象var divObj = document.createElement("div");//divobj的內容為divObj.innerHTML = "我是一個div";//將divobj作為子節點添加到bodydocument.body.appendChild(divObj);}</script></body> </html>

效果圖：
刪除替換克隆標簽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>02-刪除替換克隆標簽.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">#one{border: 1px solid blue;background-color: green;width: 300px;height: 150px;}#two{border: 1px solid blue;background-color: aqua;width: 250px;height: 100px;}</style><script type="text/javascript">function demo(){//第一個步驟，先通過id屬性值，查找到這個div標簽對象var divOne = document.getElementById("one");//alert(divOne);// 然后通過這個div標簽對象的parentNode獲取到它的父結點對象var parentNode = divOne.parentNode;//alert(parentNode);// 通過父結點對象調用 removeChild 函數來實現刪除parentNode.removeChild(divOne);}function demo2(){//第一個步驟，先通過id屬性值，查找到這個div標簽對象var divOne = document.getElementById("one");var divTwo = document.getElementById("two");// 獲取它的父結點var parentNode = divOne.parentNode;// 通過父結點調用replaceChild方法可以替換掉孩子結點// newChild是新的結點// oldChild是被替換掉的孩子結點parentNode.replaceChild(divTwo, divOne);}function demo3(){//第一個步驟，先通過id屬性值，查找到這個div標簽對象var divOne = document.getElementById("one");var divTwo = document.getElementById("two");// 獲取它的父結點var parentNode = divOne.parentNode;// 通過父結點調用replaceChild方法可以替換掉孩子結點// newChild是新的結點// oldChild是被替換掉的孩子結點parentNode.replaceChild(divTwo.cloneNode(true), divOne);}</script></head><body><div id="one" > xxxxxx</div><div id="two" > yyyyyy</div><input type="button" value="刪除元素" onclick="demo();"/><input type="button" value="替換元素" onclick="demo2();"/><input type="button" value="克隆和替換" onclick="demo3();"/></body> </html>

加粗樣式

10、操作BOM

瀏覽器對象模型（Browser Object Model, BOM）被廣泛應用于 Web 開發之中，主要用于操作瀏覽器。

10.1全局對象window

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">window.onload = function (){alert('window.......');}</script></body> </html>

10.2 location對象

location 對象存儲了當前文檔位置（URL）相關的信息，簡單地說就是網頁地址字符串。使用 window 對象的 location 屬性可以訪問。

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><link href="css/My.css" rel="stylesheet" /></head><script type="text/javascript"></script><body><div id="main"><div><img src="img/1.jpg" onclick="window.location.href='春天.html'"/>點擊上面的圖片跳轉至“春天”頁面</div><div><img src="img/2.jpg" onclick="window.location.href='夏天.html'"/>點擊上面的圖片跳轉至“夏天”頁面</div><div><img src="img/3.jpg" onclick="window.location.href='秋天.html'"/>點擊上面的圖片跳轉至“秋天”頁面</div><div><img src="img/4.jpg" onclick="window.location.href='冬天.html'"/>點擊上面的圖片跳轉至“冬天”頁面</div></div></body> </html>

使用window.location.href = '路徑’可以跳轉頁面

location.reload()也可以刷新頁面

<!doctype html> <html> <head><meta charset="utf-8"><title></title> </head><body bgcolor="#cebeaf"><h1>春天</h1><img src="img/spring.jpg" /><button onclick="location.reload()">刷新本頁</button> </body> </html>

10.3history對象

history 對象存儲了庫互動瀏覽器的瀏覽歷史，通過 window 對象的 history 屬性可以訪問該對象，實際上 history 屬性僅存儲最近訪問的、有限條目的 URL 信息。

history.reload() 從主頁面進入到新的頁面，可以返回上一個頁面
history.forward(1) 從主頁面進入到新的頁面,可以去去下一個頁面
history.go(1) 從主頁面進入到新的頁面,可以去去下一個頁面

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript"></script><p onclick="history.reload()">返回上一個頁面</p><p onclick="history.forward(1)">去下一個頁面</p><p onclick="history.go(1)">去下一個頁面</p></body> </html>

10.4定時器

setTimeout計時器
setTimeout() 方法用于在指定的毫秒數后調用函數或計算表達式。

提示： 1000 毫秒= 1 秒。

提示：使用 clearTimeout() 方法來阻止函數的執行。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//定義變量用來接收計時器var timer = null;window.onload = function (){timer=setTimeout(function(){alert("javascript");},2000);}/*停止計時器*/window.clearTimeout(timer);</script></body> </html>

**setTimeout() **
在指定的毫秒數后重復調用函數或計算表達式。

下面的例子是使用settiumeout輪播圖

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">.box{width: 400px;height: 400px;}.box img {width: 300px;height: 300px;position: absolute;}.active{z-index: 1;}</style></head><body><div class="box"><img src="../../img/0.jpg" class="active"/><img src="../../img/1.jpg" /><img src="../../img/2.jpg"/><img src="../../img/3.jpg"/></div><script type="text/javascript">/*找到頁面中的圖片*/var imgs = document.getElementsByTagName("img");var num = 0;setInterval(function(){for (var i = 0; i < imgs.length; i++) {imgs[i].className = "";}num ++;if(num>3){num = 0;}imgs[num].className= "active";},500);</script></body> </html>

10.5定時器實現秒表

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><script type="text/javascript">// 當頁面所有元素和資源加載完成之后，在執行方法里面的代碼window.onload = function() {// 找按鈕元素var start = document.getElementById("start");var stop = document.getElementById("stop");var reload = document.getElementById("reload");// 找到頁面中對應要替換的毫秒（ms）,秒（s）,分（m）var ms = document.getElementById('ms');var s = document.getElementById('s');var m = document.getElementById('m');// num指的是操作的數字，timer指的是接定時器變量var num = 0,timer = null;var flag = true; // 設置開關// 給三個按鈕綁定對應的事件// 啟動定時器start.onclick = function() {if(flag) { // 防止重復點擊flag = false;}else {return;}// timer接收定時器的目的，為了方便清除定時器timer = setInterval(function() {// 讓在頁面中的數字顯示變化num += 21;// 顯示毫秒內容ms.innerHTML = num%1000;var sValue = parseInt(s.innerHTML);if(sValue < 10) {s.innerHTML = "0" + parseInt(num/1000);} else {s.innerHTML = parseInt(num/1000);}if(sValue >= 20) {num = 0;s.innerHTML = "00";// 設置分鐘顯示的內容var mValue = parseInt(m.innerHTML);if(mValue < 10) {m.innerHTML = "0" + parseInt(mValue + 1);} else {m.innerHTML = parseInt(mValue + 1);}}},10);}// 停止定時器stop.onclick = function() {// 清除定時器clearInterval(timer);flag = true;}}</script><style type="text/css">#main{height: 210px;}#main div{width: 200px;height: 200px;border:2px solid orange;border-radius: 100px;font-size: 90px; font-weight: 800px;text-align: center;line-height: 200px; float: left;margin-left: 20px;background: rgba(0,0,0,.8);color: white;}button{width: 100px;height: 100px;border-radius: 50px;</style><body><div id="main"><div id="m">00</div><div id="s">00</div><div id="ms">000</div></div><br /><button id="start">啟動</button><button id="stop">暫停</button><button id="reload">重置</button></body> </html>

當毫秒數大于1000秒數會+1，當秒數大于等于60的時候分鐘會加+1；

10.6計時器實現輪播圖

總結

以上是生活随笔為你收集整理的JavaScript脚本基础教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [钓鱼成就]打捞者
下一篇： SpringBoot 如何异步编程，老鸟