JavaScript

js 腳本放置的位置

在 body 下面

注意，不要寫在head中，不然，使用 getElementById的時候，會因為元素還沒有加載完成，而報錯

另寫一個 .js 文件，然后引入

js變量

類型，都是用 var 引用的

值類型

String

var str1 = 'hello js'

number

整形，浮點型，全部是number類型

var breadPrice=15.9; var gameLevel=66; //極大或極小的數(shù)字可以通過科學(xué)計數(shù)法來書寫: var myMoney1=666e5; //66600000 var myMoney2=-666e-5; //-0.00666

Boolean

var isUnderstand=true; var isSingle=false;

null

var haha = null;

未定義類型

js 中，有4種情況，會出現(xiàn) undefined

變量聲明，沒有賦值

var obj; alert(obj);

使用沒有實例化的變量的屬性

var student; alert(student.name);

函數(shù)要實參，但是調(diào)用的時候沒有傳參，形參是 undefined

函數(shù)調(diào)用沒有返回值或者return后沒有數(shù)據(jù)，接收函數(shù)返回的變量是undefined

function printNum(num){alert(num); } var result=printNum();//調(diào)用函數(shù)未傳遞參數(shù)，執(zhí)行函數(shù)的時候num的值是undefined alert(result);//result的值也是undefined，因為printNum()沒有返回值

引用類型

對象(Object)、數(shù)組(Array)、函數(shù)(Function)。稍后詳細(xì)介紹。

動態(tài)類型

不推薦這么使用

var param; param = 5; param = "John"; // param類型為 undefined // 現(xiàn)在 param 為數(shù)字 // 現(xiàn)在 param 為字符串 PS:雖然JavaScript支持這種寫法，但是我不推薦這種寫法。大家盡量開始聲明變量的時候就確定好將要 盛放什么類型的值，以后盡量不隨意改變。

運算符

幾乎和 java 里一模一樣

但是有些是 js 里特有的

var x=5; var res=(x===5); // true res=(x==='5');// false res=(x!==5); // false res=(x!=='5');// true

對象

String

Array

和 ArrayList 十分相似，但同時，有兼具數(shù)組可以使用下標(biāo)訪問的特性

相當(dāng)于一個沒有泛型檢查的ArrayList 和一個數(shù)組的結(jié)合體

<script type="text/javascript">var list = new Array();for (var i = 0; i < 10; i++) {list.push("測試數(shù)據(jù)"+(i+1));}for (var i = 0; i < list.length; i++) {document.write(list[i]+"<br/>")}</script>

<script type="text/javascript">var arr = ["測試數(shù)據(jù)1","測試數(shù)據(jù)2","測試數(shù)據(jù)3","測試數(shù)據(jù)4"];for (var i = 0; i < arr.length; i++) {document.write(arr[i]+"<br/>")}</script>

Date

• 構(gòu)造方法

var date1 = new Date(); //獲取當(dāng)前時間，用的最多 var date2 = new Date(milliseconds); var date3 = new Date(dateString); // new Date("2020-12-11 12:11:12") var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

• 常用方法

Math

類似于 java.util.Math

函數(shù)

全局函數(shù)

isNaN(params)

NaN（Not a number），表示的是非數(shù)字

console.log(isNaN(666));//false console.log(isNaN(1+2));//false console.log(isNaN("hello"));//true

parseFloat(String)

console.log(parseFloat("66"));//66 console.log(parseFloat("199.99"));//199.99 console.log(parseFloat("1024 2048 4096"));//1024 console.log(parseFloat(" 128 "));//128 console.log(parseFloat("10年"));//10 console.log(parseFloat("今天是8號"));//NaN

parseInt(string,radix)

console.log(parseInt("66"));//66 console.log(parseInt("199.99"));//199 console.log(parseInt("1024 2048 4096"));//1024 console.log(parseInt(" 128 "));//128 console.log(parseInt("10年"));//10 console.log(parseInt("今天是8號"));//NaN console.log(parseInt("10",10));//10 console.log(parseInt("010"));//10 console.log(parseInt("10",8));//8 console.log(parseInt("0x10"));//16 console.log(parseInt("10",16));//16

自定義函數(shù)

匿名函數(shù)

直接將函數(shù)，賦值給一個變量

自定義對象

<script type="text/javascript">student = {name:"faroz",age: 12,address:"kkkStreet",printInfo:function() {document.write(this.name);document.write(this.age);document.write(this.address);}}student.printInfo();</script>

BOM

瀏覽器對象模型（Broswer Object Model）

雖然現(xiàn)在BOM尚無正式標(biāo)準(zhǔn)，但是由于現(xiàn)代瀏覽器已經(jīng)(幾乎)實現(xiàn)了 JavaScript 交互性方面的相同 方法和屬性，因此window常被認(rèn)為是 BOM 的方法和屬性。

window 對象

所有 JavaScript 全局對象、函數(shù)以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數(shù)是 window 對象的方法。

Window 對象表示瀏覽器中打開的窗口。

window 對象屬性

常用屬性：

其他屬性：

window 對象方法

history 對象

就是瀏覽器的前進、后退按鈕

window.history 對象包含瀏覽器的歷史。

window.history對象在編寫時可不使用 window 這個前綴。

常用方法:

history.back() - 與在瀏覽器點擊后退按鈕相同

history.forward() - 與在瀏覽器中點擊向前按鈕相同

history.go(1/-1)-- 參數(shù)為1:等同于history.forward()，參數(shù)為-1，等同于history.back()

location 對象

window.location 對象用于獲得當(dāng)前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。 常用屬性和方法:

屬性：

window.location 對象在編寫時可不使用 window 這個前綴。
href 當(dāng)前窗口正在瀏覽的網(wǎng)頁地址

方法：

replace(url) 轉(zhuǎn)向到url網(wǎng)頁地址
reload() 重新載入當(dāng)前網(wǎng)址，如同按下刷新按鈕

<a href="javascript:alert(window.location.href)">獲取當(dāng)前頁面的URL地址</a> <a href="javascript:window.location.reload()">刷新</a><br /> <a href="javascript:window.location.replace('index.html')">跳轉(zhuǎn)到index</a><br /> <a href="javascript:location.replace('https://www.baidu.com')">跳轉(zhuǎn)到百度</a><br />

JS 事件

比如說用戶點擊等，都是JS的事件

• 常用事件

給點使用的方式：

這些事件，都是寫在標(biāo)簽里面的

<script> function fun1(){ alert('選擇的內(nèi)容發(fā)生了變化');}function fun2(){ alert("觸發(fā)了單擊事件"); } function fun3() { document.getElementById("btn").innerHTML="鼠標(biāo)移動到按鈕上了";}function fun4() { document.getElementById("btn").innerHTML="點擊我試試"; } function fun5() { alert("鍵盤按下了");}function fun6() { alert("獲取到了焦點"); } function fun7() { alert("input失去了焦點");}function myLoad(){ alert("頁面加載完畢"); } </script><body onload="myLoad()"><input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/><input id="password" type="password" /><button id="btn" type="button" onclick="fun2()" onmouseover="fun3()" onmouseout="fun4()">點擊我試試</button> <select id="month" onchange="fun1()"> <option>1月份</option> <option>2月份</option></select></body>

• 其他事件

DOM

操作DOM，真的有點java反射的意思，就是在文檔生成之后，再對文檔的內(nèi)容，進行修改

文檔對象模型（Document Object Model）

操作的，是整個文檔的內(nèi)容

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動態(tài)的 HTML。

• JavaScript 能夠改變頁面中的所有 HTML 元素
• JavaScript 能夠改變頁面中的所有 HTML 屬性
• JavaScript 能夠改變頁面中的所有 CSS 樣式
• JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

Document 對象

當(dāng)瀏覽器載入 HTML 文檔, 它就會成為 Document 對象。

Document 對象是 HTML 文檔的根節(jié)點。

Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。

提示:Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

Document 對象常用方法

添加節(jié)點

• 往后添加節(jié)點

• 往前添加節(jié)點

  只要將appendChild()，換成insertBefore()就好了。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QoMXttae-1620648827210)(/Users/faro_z/Library/Application Support/typora-user-images/image-20210510171615256.png)]

表單驗證

在前端先一步進行表單驗證，可以降低服務(wù)器壓力，也可以提升用戶體驗。

進行表單驗證，我們一般要做非空判斷，合法輸入判斷等判斷

表單驗證的思路

我們是使用 DOM 操作，獲取輸入框中的內(nèi)容，然后判斷輸入的內(nèi)容是否為空，或者輸入的內(nèi)容是否合法

將不合法的結(jié)果，通過彈窗的形式，或者其他形式，反饋給用戶

案例

具體的案例，我就不寫了，等后面講了 JQuery 再說

DOM 的操作，真的蛋疼

正則表達式

使用方法

var reg = /kaikeba/i; var res=reg.test("開課吧的漢語拼音為kaikeba"); console.log(res);//true var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/; var str="a公司拼音為9"; var res=reg.test(str); console.log(res);//true console.log(reg.test("a你好239"));//false

常用正則

<script> /*檢查輸入的身份證號是否正確*/ function checkCard(str) { 碼。 /*15位數(shù)身份證正則表達式: * 編碼規(guī)則順序從左至右依次為6位數(shù)字地址碼，6位數(shù)字出生年份后兩位及日期，3位數(shù)字順序 */ [1-9]\d{5} \d{2} ((0[1-9])|(10|11|12)) (([0-2][1-9])|10|20|30|31) \d{3} 前六位地區(qū)，非0打頭 出生年份后兩位00-99 月份，01-12月 日期，01-31天 順序碼三位，沒有校驗碼var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1- 9])|10|20|30|31)\d{3}$/;if (arg1.length == 15 && !arg1.test(arg1)) {return false; } /* * 18位數(shù)身份證正則表達式: * 編碼規(guī)則順序從左至右依次為6位數(shù)字地址碼，8位數(shù)字出生年份日期碼，3位數(shù)字順序碼，1 位數(shù)字校驗碼(可為x)。 [1-9]\d{5} */var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2] [1-9])|10|20|30|31)\d{3}[0-9Xx]$/;if (arg2.length == 18 && !arg2.test(sfzhmcode)){return false;}return true; } /*是否是小數(shù)*/ function isDecimal(strValue) {var objRegExp = /^\d+\.\d+$/;return objRegExp.test(strValue);} /*校驗是否中文名稱組成 */ function ischina(str) {var reg = /^[\u4E00-\u9FA5]{2,4}$/;return reg.test(str);} /*校驗是否全由8位數(shù)字組成 */ function isNum(str) {var reg = /^[0-9]{8}$/;return reg.test(str);} /*校驗電話碼格式 :座機和手機*/ function isTelCode(str) {var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;return reg.test(str);} /*校驗手機號*/ function isPhoneNum(str) { //如果你要精確驗證手機號碼，那個你可以使用第一個正則。這是根據(jù)電信，移動，聯(lián)通目前發(fā) 行的號碼來的。驗證比較精確。var reg = /^1[3|4|5|7|8][0-9]{9}$/; // 如果因為現(xiàn)有的號碼不能滿足市場需求，電信服務(wù)商會增大號碼范圍。所以一般情況下我們 只要驗證手機號碼為11位，且以1開頭。var reg = /^^1[0-9]{10}$$/;return reg.test(str);} /*校驗郵件地址是否合法 */ function IsEmail(str) {var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;return reg.test(str);} /*檢查輸入的URL地址是否正確 */ function checkURL(str) {if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null)return false;} else {return true;} } </script>

總結(jié)

以上是生活随笔為你收集整理的JavaScript 简明教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。