JavaScript 參考手冊 ：https://www.w3school.com.cn/jsref/index.asp
JavaWeb 學習筆記
文章目錄
- JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)
- ECMAScript : 客戶端腳本語言的標準
基本語法 - 使用與註釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的使用</title>
<!--放的位置影響執行的順序,放在前面先執行,放在後面後執行-->
<!--如果放在前面不點擊確定是不會加載下面的內容-->
<!--內部js:定義script,寫js-->
<!--如果放在下面讓input先加載就可以獲取到input的內容-->
<!--script可以定義很多個-->
<script>
// alert("hello world!");
// alert("hello world!");
// alert("hello world!");
/**
* 多汗註釋
*/
alert("hello world!")
</script>
<!--外部js:定義script,src引入js文件-->
<script src="../js/xxx.js"></script>
</head>
<body>
<input>
<!--<script>-->
<!-- alert("hello world!")-->
<!--</script>-->
</body>
</html>
alert("外部文件")
基本語法 - 基本類型與變量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>變量</title>
<script>
// var a = "aa";
// alert(a);
// a = "123";
// alert(a)
// number類型
var num = 1;
var num1 = 1.2;
var num2 = NaN;
// 內容輸出到頁面上
document.write(num + " typeof: " + typeof(num) + "<br><br>");
document.write(num1 + " typeof: " + typeof(num1) + "<br><br>");
document.write(num2 + " typeof: " + typeof(num2) + "<br><br>");
//string類型
var str = "aaa";
var str1 = 'bbb';
document.write(str + " typeof: " + typeof(str) + "<br><br>");
document.write(str1 + " typeof: " + typeof(str1) + "<br><br>");
// boolean類型
var flag = true;
document.write(flag + " typeof: " + typeof(flag) + "<br><br>");
// null
//https://www.w3school.com.cn/js/index.asp JavaScrip
//出處:https://www.w3school.com.cn/js/index_pro.asp JavaScrip高級教程
//這個網站中的註釋有說道
var obj = null;
var obj1 = undefined;
var obj2;
document.write(obj + " typeof: " + typeof(obj) + "<br><br>");
document.write(obj1 + " typeof: " + typeof(obj1) + "<br><br>");
document.write(obj2 + " typeof: " + typeof(obj2) + "<br><br>");
// 判斷變量類型
</script>
</head>
<body>
</body>
</html>
基本語法 - 運算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>運算符</title>
<script>
// 一元運算符
var num = 1;
var num1 = num ++;
document.write(num + "<br><br>");//2
document.write(num1 + "<br><br>");//1
//+:正號
var num2 = +1;
document.write(num2 + "<br><br>");
var num3 = -1;
document.write(num3 + "<br><br>");
//如果給定的類型不是number類型就會轉成這個類型(前提是有正號)
//string轉number,如果字符串不是數字類型還是要轉換成number型,轉爲NaN
var num4 = +"11bc";
document.write(num4 + " " + typeof (num4)+ "<br><br>");
document.write(num4 + 1 + "<br><br>");//112
//boolean
var flag = +true;
var flag1 = +false;
document.write(flag + " " + typeof (flag)+ "<br><br>");//1
document.write(flag1 + " " + typeof (flag1)+ "<br><br>");//0
// 其餘的轉換出來就是NaN
// 算數運算符
var a = 3;
var b = 4;
document.write(a + b + "<br><br>");
document.write(a - b + "<br><br>");
document.write(a * b + "<br><br>");
document.write(a / b + "<br><br>");//0.75
document.write(a % b + "<br><br>");
// 賦值運算符 = += -+....
// 比較運算符 > < >= <= == ===(全等於)
// 類型相同時直接比較,不同時先進行類型轉換在進行比較
document.write((3 > 4) + "<br><br>");
document.write((3 < 4) + "<br><br>");
// 字符串按照每一個字符進行比較
document.write(("abc" > "ab") + "<br><br>");
document.write(("abc" < "ab") + "<br><br>");
// 類型不同
document.write(("123" > 100) + "<br><br>");//true
document.write(("abc" < 100) + "<br><br>");//false
document.write(("abc" > 100) + "<br><br>");//false
document.write(("123" == 123) + "<br><br>");//true 先進行類型轉換再比較
// 類型不同直接返回false
document.write(("123" === 123) + "<br><br>");//false
document.write("<hr>");
// 邏輯運算符 && || !
// 其他類型轉boolean
// number：0或NaN爲假，其他爲真
document.write(!!0 + "<br><br>");
document.write(!!NaN + "<br><br>");
document.write(!!3 + "<br><br>");
// string：除了空字符串("")，其他都是true
document.write(!!"" + "<br><br>");
document.write(!!"123" + "<br><br>");
// null&undefined:都是false
document.write(!!null + "<br><br>");
document.write(!!undefined + "<br><br>");
// 對象：所有對象都爲true
var date = new Date();
document.write(!!date + " " + typeof (date)+ "<br><br>");
// if (date != null) { // 防止空指針異常
//
// }
if (date) { // 防止空指針異常
// 對象爲 null 直接轉成 false
}
// 三元運算符
var c = a < b ? 1 : 0;
document.write(c + "<br><br>")
</script>
</head>
<body>
</body>
</html>
基本語法 - 流程控制語句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制語句</title>
<script>
// if...else...
// switch可以接收任意的原始數據類型,number,string,boolean,null,undefined
var a = 1;
switch (a) {
case 1:
document.write("1" + "<br><br>");
break;
case "abc":
document.write("abc" + "<br><br>");
break;
case true:
document.write("true" + "<br><br>");
break;
case null:
document.write("null" + "<br><br>");
break;
case undefined:
document.write("undefined" + "<br><br>");
break;
}
// where
var sum = 0;
var num = 1;
while (num <= 100) {
sum += num;
num ++;
}
document.write(sum + "<br><br>");
//for
sum = 0;
for (var i = 1; i <= 100; ++ i) {
sum += i;
}
document.write(sum + "<br><br>");
//do...while
</script>
</head>
<body>
</body>
</html>
基本語法 - 特殊語法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊語法</title>
<script>
// 一行只有一個語句時分分號可以省略
// var a = 3
// alert(a)
// 可以用var,也可以不使用,使用就是局部變量,不用就是全局變量
a = 3;
var b = 4;
</script>
</head>
<body>
</body>
</html>
基本對象 - function 對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function對象</title>
<!--JavaScript對象參考手冊:https://www.w3school.com.cn/jsref/index.asp-->
<!--JavaScript高級教程:https://www.w3school.com.cn/js/index_pro.asp-->
<script>
// Function對象
// 創建
// 方式1
// var a = 1;
// var fun = new Function("a", "b", "document.write(a + \"<br><br>\");");
// fun(3, 4);
// 方式2
function fun1(a, b) {
document.write(b + "<br><br>");
}
document.write(fun1.length + "<br><br>");//形參個數
// fun(3, 4);
// 方式3
var fun = function (a, b) {
// document.write(a + "<br><br>");
alert(b);
alert(a);
};
// js方法的調用只和方法名有關,和參數列表無關
// fun(1, 2);
// 這裏傳一個參數就可以
// fun(1);//b是undefined
// 不傳參數也可以
// fun();//a b都是undefined
// fun(1, 2, 2);
// 這裏有一個隱藏的內置對象(數組),arguments,封裝所有的實際參數
/**
* 求兩個數的和
* @param a
* @param b
* @returns {*}
*/
function add(a, b) {
return a + b;
}
// alert(add(1, 2));
/**
* 任意個數的和
* 返回值可以不寫
*/
function add1() {
// document.write(arguments[0] + "<br>");
// document.write(arguments[1] + "<br>");
var sum = 0;
for (var i = 0; i < arguments.length; ++ i) {
sum += arguments[i];
}
return sum;
}
;document.write(add1(1, 2, 3, 4, 5) + "<br>");
// 方法覆蓋 方法就是一個對象
// fun = function (a, b) {
// document.write(b + "<br><br>");
// };
// fun(3, 4);
</script>
</head>
<body>
</body>
</html>
基本對象 - Array 對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array對象</title>
<script>
// 創建
// 方式1
var arr1 = new Array(1, 2, 3); // 元素列表
// 方式2
var arr2 = new Array(5); // 默認長度
var arr4 = new Array();
// 方式3
var arr3 = [1, 2, 3, 4, "aaa", true]; // 元素列表
document.write(arr1 + "<br>");// 1,2,3
document.write(arr2 + "<br>");// ,,,,
document.write(arr3 + "<br>");// 1,2,3,4
// JavaScript 參考手冊:https://www.w3school.com.cn/jsref/index.asp
// 方法
// 將數組中的元素按照指定的分隔符拼接爲字符串
document.write("拼接:" + arr3.join() + "<br>"); // 默認,分割
document.write("拼接:" + arr3.join(" ") + "<br>"); // 默認,分割
//向數組中添加元素
arr3[10] = 6;
arr3.push("zut");
document.write("拼接:" + arr3.join(" ") + "<br>"); // 默認,分割
// 屬性
//數組長度
document.write(arr1.length + "<br>");
// 特點
// 數組元素類型可變
var array = [1, "abc", true];
document.write(array + "<br>");
document.write(array[0] + "<br>");
document.write(array[1] + "<br>");
document.write(array[2] + "<br>");
// 數組長度可變
document.write(array[3] + "<br>"); // 擴容,默認undefined
array[10] = "aa";
document.write(array + "<br>");//1,abc,true,,,,,,,,aa
</script>
</head>
<body>
</body>
</html>
基本對象 - Date 對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date對象</title>
<script>
// 日期對象:https://www.w3school.com.cn/jsref/jsref_obj_date.asp
// 創建
var date = new Date();
document.write(date + "<br>");
// 方法
// 格式化時間:語言跟隨系統
document.write(date.toLocaleString() + "<br>");
// 獲取毫秒值
document.write(date.getTime() + "<br>");
</script>
</head>
<body>
</body>
</html>
基本對象 - Math 對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math對象</title>
<script>
// Math對象:https://www.w3school.com.cn/jsref/jsref_obj_math.asp
// 不用創建直接使用,Math.方法名()
// PI是屬性
document.write(Math.PI + "<br>");
// 返回0-1之間的隨機數字(包含0,不包含1)
document.write(Math.random() + "<br>");
// 四捨五入
document.write(Math.round(3.1) + "<br>");
// 向上取整
document.write(Math.ceil(3.1) + "<br>");
// 向下取整
document.write(Math.floor(3.1) + "<br>");
/**
* 1-100之間的隨機整數
*/
document.write(Math.floor(Math.random() * 100) + 1 + "<br>");
</script>
</head>
<body>
</body>
</html>
基本對象 - RegExp 對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RegExp對象</title>
<script>
// 正則表達式對象:https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
// 用戶名要求,號碼組成,用戶名長度範圍
// []:單個字符 [a] [a,b,c] [a-zA-Z0-9_]
// \d:單個數字字符[0-9]
// \w:單個單詞字符[a-zA-Z0-9_]
// 量詞符號:* ? +
// *:出現0次或者多次
// ?:出現0次或者1次
// +:出現1次或者多次
// \w*:單個字符組成,出現0次或者多次
// {m,n} m<=數量<=n {,n}:m缺省,最多n次 {m,}:n缺省,最少m次
// \w{6,12}:單個字符組成,長度爲[6,12]
//上面是正則表達式的通用規則
//開始結束符號:^:開始,$:結束
//正則對象
//創建
var regExp = new RegExp("^\\w{8,18}$");//轉義字符
var regExp1 = /^\w{8,18}$/;
document.write(regExp + "<br>");
document.write(regExp1 + "<br>");
//方法:驗證指定的字符串是否符合正則定義的規範
//表單校驗需要使用到正則表達式
var username = "1111111111111111111111111111";
var username1 = "11111111";
var flag = regExp.test(username);
var flag1 = regExp1.test(username1);
document.write(flag + "<br>");
document.write(flag1 + "<br>");
</script>
</head>
<body>
</body>
</html>
基本對象 - Global 對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global對象</title>
<script>
// 全局對象,其中的方法不需要對象就可以直接調用.方法名();
// 全局對象:https://www.w3school.com.cn/jsref/jsref_obj_global.asp
// url編碼,做數據傳輸的時候,傳輸的時候通過了一些協議,比如http協議,協議不支持中文數據,
// 如果要把中文數據發送到服務器,就需要進行轉碼,http默認的也是url編碼
var str = "中原工學院";// %E4%B8%AD%E5%8E%9F%E5%B7%A5%E5%AD%A6%E9%99%A2
var encode = encodeURI(str);
document.write(encode + "<br>");
// url解碼
var s = decodeURI(encode);
document.write(s + "<br>");
// url編碼,編碼的字符更多(有一些字符上面的那種是不進行編碼的)
var str1 = "中原工學院";// %E4%B8%AD%E5%8E%9F%E5%B7%A5%E5%AD%A6%E9%99%A2
var encode1 = encodeURIComponent(str1);
document.write(encode1 + "<br>");
// url解碼
var s1 = decodeURIComponent(encode1);
document.write(s1 + "<br>");
// 將字符串裝換成數字:逐一判斷每一個字符是否是數字，直到不是數字爲止，將前邊數字部分轉爲number
var str = "123abc";
document.write(parseInt(str) + " typeof:" + typeof (parseInt(str)) + "<br>");//123
//所有的值都不等於NaN,NaN和NaN比較也不相等
var str1 = NaN;
document.write(isNaN(str1) + "<br>");
//把js的字符串轉換成腳本來執行,可以解析字符串
var jscode = "document.write(\"123\");";
document.write(jscode + "<br>");//document.write("123");
eval(jscode);//123
</script>
</head>
<body>
</body>
</html>