第五模組 WEB開發基礎之JavaScript
阿新 • • 發佈：2020-09-14
1. JavaScript介紹
ECMAScript是一種語言標準, JavaScript是對ECMAScript的一種實現.
可以將ECMAScript看作JavaScript.
現在, 大部分瀏覽器上執行的是2011年(ES5)和2015年(ES6)釋出的版本.
主要學習ES5, 然後完善補充ES6.
2. 如何在網頁中插入JavaScript
<!DOCTYPE html>
<html>
<head>
<title>js檔案的引入</title>
<!-- 方式一(內部js):
通過script引入, 可以放在head標籤中,
也可以放在body標籤中,也可以放在外面,
只要它在當前的整個文件中就行.
3. 變數
<!DOCTYPE html>
<html>
<head>
<title>變數</title>
</head>
<body>
<script type="
4. 基本變數型別
<!DOCTYPE html>
<html>
<head>
<title>
基本變數型別
</title>
</head>
<body>
<script type="text/javascript">
// 變數型別
// 基本的資料型別
// number, string, boolean, undefined, null
// 引用的資料型別
// object, array, function
// 小數,整數,正數和負數都屬於number型別
var a = 3;
var b = 1.23;
var c = -1;
// typeof來檢查當前變數的資料型別
alert(typeof a);
alert(typeof b);
alert(typeof c);
// 字串 'abc123' "cds78"
// boolean 0(假 false) 1(真 true)
var c = 3 < 4;
alert(c);
alert(typeof c);
// undefined
// 聲明瞭變數, 但是未賦值, 就是undefined.
var x;
// null
var y = null;
</script>
</body>
</html>
5. 算數運算子
<!DOCTYPE html>
<html>
<head>
<title>運算子-算數運算子</title>
</head>
<body>
<script type="text/javascript">
var x = 10;
var y = 4;
var sum = x + y;
var en = x - y;
var or = x * y;
var ll = x / y;
// 取餘
var op = x % y;
</script>
</body>
</html>
6. 賦值運算子
<!DOCTYPE html>
<html>
<head>
<title>運算子-遞增,遞減,賦值運算子</title>
</head>
<body>
<script type="text/javascript">
// ++
// --
var x = 10;
x++;
alert(x);
// 賦值運算子
var a = 4;
var b = 5;
a = b;
var c = 10;
c = c + 5;
c += 5;
c -= 5;
c *= 5;
c /= 5;
</script>
</body>
</html>
7. 字串
<!DOCTYPE html>
<html>
<head>
<title>字串</title>
</head>
<body>
<script type="text/javascript">
// 注意字串的巢狀問題
// 可以加\進行轉譯
var str = "I'm \"MJJ\"";
// 字串的拼接
var one = "hello";
var two = "world";
var both = one + " " + two;
</script>
</body>
</html>
8. 數字和字串轉換
<!DOCTYPE html>
<html>
<head>
<title>數字和字串轉換</title>
</head>
<body>
<script type="text/javascript">
// 隱式轉換: 數值轉為字串
/*當字串和數字相加時, 不會報錯, 會自動將數字轉化為字串.*/
var a = "mjj" + 521;
// 結果: mjj520, 型別是string
// 字串轉數字
var num = "" + 234;
var nNum = Number(num);
alert(typeof nNum);
// 數字轉字串
var nnNum = num.toString();
//注意: '2323fff'不能轉化為數字.
//雖然用Number()轉化後得到number型別的資料, 但結果為NaN(not a number).
</script>
</body>
</html>
9. 陣列
<!DOCTYPE html>
<html>
<head>
<title>陣列array</title>
</head>
<body>
<script type="text/javascript">
// 1. 建立
var shopping = ['香蕉','蘋果','橘子']
// 型別是object. array屬於object.
// array中可以存放各種型別的資料. 存在索引: 0, 1, 2...
//檢查>>>console中可以列印結果
// console.log(shopping);
// 2. 訪問
var lst = ['tree', 1, 5, 'good'];
var item1 = lst[0];
console.log(item1);
// 3. 修改
lst[0] = '大樹';
// 4. 訪問陣列的長度
console.log("陣列的長度是:" + lst.length);
</script>
</body>
</html>
10. 條件
<!DOCTYPE html>
<html>
<head>
<title>條件判斷</title>
</head>
<body>
<script type="text/javascript">
if(true){
do onething
}
else{
do another thing
}
</script>
</body>
</html>
11. if...else...語句
<!DOCTYPE html>
<html>
<head>
<title>if...else...</title>
</head>
<body>
<script type="text/javascript">
//單條件
var distance = 10;
var nowDistance = 5
if (nowDistance <= distance){
console.log("自動駕駛");
}else{
console.log("人為駕駛");
}
//多條件
var weather = "snow";
if (weather === "sunny"){
console.log('出去玩');
}else if (weather === "rain"){
console.log("呆在家裡");
}else if (weather==="snow"){
console.log('滑雪');
}else{
console.log("輸入的天氣有錯");
}
</script>
</body>
</html>
12. 邏輯運算子
<!DOCTYPE html>
<html>
<head>
<title>比較運算子</title>
</head>
<body>
<script type="text/javascript">
// === 和 !==
// === 同時比較值和資料型別
// == 和 !=
// == 僅比較數值
// 推薦使用 ===
// > < >= <=
</script>
</body>
</html>
13. 邏輯運算子
<!DOCTYPE html>
<html>
<head>
<title>邏輯運算子</title>
</head>
<body>
<script type="text/javascript">
var weather = "sunny";
var temp = 32;
if (weather === "sunny" && temp > 30){
console.log("在家吹空調, 吃西瓜.")
}
// 邏輯運算子: &&(and) //(or) !(not)
</script>
</body>
</html>
14. switch語句
<!DOCTYPE html>
<html>
<head>
<title>switch語句</title>
</head>
<body>
<script type="text/javascript">
// 在多個條件進行判斷時建議使用switch語句.
// switch後的變數與case後的值進行匹配, 匹配成功後執行後面的程式碼.
// 如果沒有寫break, 則會繼續執行後面的程式碼.
var weather = "sunny";
switch(weather){
case 'sunny':
alert(1);
break;
case 'rain':
alert(2);
break;
default:
alert(3);
break;
}
</script>
</body>
</html>
15. 三元運算子
<!DOCTYPE html>
<html>
<head>
<title>三元運算子</title>
</head>
<body>
<script type="text/javascript">
// if...else...
/*if(true){
...
}else{
...
}*/
// 以上程式碼比較繁瑣, 可以使用三元運算進行簡化
// 條件 ? run this code : run another code;
var result = 1>2 ? '真的':'假的';
console.log(result);
</script>
</body>
</html>
16. for迴圈介紹和應用
<!DOCTYPE html>
<html>
<head>
<title>for迴圈</title>
</head>
<body>
<script type="text/javascript">
/*for(初始化條件;結束的條件;遞增的條件){
run code
}*/
var i;
var sum = 0;
for(i = 1; i <= 10000; i++){
sum += i;
}
console.log(sum);
var shopping = ['香蕉', '蘋果', '牛奶']
var j;
for(j=0;j<shopping.length;j++){
var str = '<h1>' + shopping[j] +'</h1>';
document.write(str);
}
</script>
</body>
</html>
17. break和continue
<!DOCTYPE html>
<html>
<head>
<title>break和continue語句</title>
</head>
<body>
<script type="text/javascript">
//break可以跳出當前迴圈
var x = 0;
for(;;){
if(x > 100){
break;
}
x++;
}
// continue 跳出當前迴圈, 下次迴圈繼續執行.
var sum = 0;
for(var i = 1;i <= 10; i++){
if(i === 8){
continue;
}
sum += i;
}
</script>
</body>
</html>
18. while迴圈
<!DOCTYPE html>
<html>
<head>
<title>while迴圈</title>
</head>
<body>
<script type="text/javascript">
/*初始化條件
while(判斷迴圈結束條件){
run code
遞增條件
}*/
var i = 1;
var sum = 0;
while(i < 100){
sum += i;
i += 2;
}
document.write(sum);
</script>
</body>
</html>
19. do-while
<!DOCTYPE html>
<html>
<head>
<title>do-while迴圈</title>
</head>
<body>
<script type="text/javascript">
//先執行後判斷
var sum = 0;
var i = 1;
do{
sum += i;
i++;
}while(i <= 100);
</script>
</body>
</html>
20. 函式的定義
<!DOCTYPE html>
<html>
<head>
<title>函式的定義</title>
</head>
<body>
<script type="text/javascript">
// 函式: 封裝程式碼, 解決反覆重複的問題
function f(){
xxx;
xxx;
xxx;
}
f();
</script>
</body>
</html>
21. 函式傳參
<!DOCTYPE html>
<html>
<head>
<title>函式傳參</title>
</head>
<body>
<script type="text/javascript">
// 函式: 封裝程式碼, 解決反覆重複的問題
function f(引數1, 引數2, 引數3){
xxx;
xxx;
xxx;
}
f(引數1, 引數2, 引數3);
// 如果不傳引數, 則引數就是undefinded.
</script>
</body>
</html>
22. 函式返回值和函式表示式
<!DOCTYPE html>
<html>
<head>
<title>函式返回值</title>
</head>
<body>
<script type="text/javascript">
function addition(a,b){
var sum = a + b;
return sum;
}
var sum = addition(3,2);
console.log(sum);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>函式表示式</title>
</head>
<body>
<script type="text/javascript">
var division = function(a, b){
return a / b;
}
var result = division(6,2);
console.log(result);
</script>
</body>
</html>
23. 函式作用域和全域性汙染
<!DOCTYPE html>
<html>
<head>
<title>函式作用域</title>
</head>
<body>
<script type="text/javascript">
// 定義在函式外部的變數稱為全域性作用域
// 定義在函式內部的變數稱為區域性作用域
var a = 1;
console.log(a);
function add(){
var b = 3;
console.log(a);
}
add();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>全域性汙染</title>
</head>
<body>
<script type="text/javascript" src="js/first.js"></script>
<script type="text/javascript" src="js/second.js"></script>
<script type="text/javascript">
/*first.js或second.js中的程式碼如下:
var name = "mjj";
function hello(){
alert("hello " + name);
}*/
hello();
// 如果引入的兩個js中, 同時存在相同的函式, 且使用相同的全域性變數, 後面的會覆蓋掉前面的, 則會導致全域性汙染.
// 為了防止出現全域性汙染的問題, 則應在函式內部定義變數.
(function(){
var name = "mjj";
var hello = function(){
alert("hello" + name);
}
})
// 這種情況下, hello是區域性變數, 如果在全域性呼叫的話, 則呼叫不到, 如果想進行呼叫, 則需要使用以下方法:
(function(){
var name = 'mjj';
var hello = function(){
alert ("hello" + name);
}
window.first = hello;
})
// 呼叫方式如下:
first();
</script>
</body>
</html>
24. 物件object講解
<!DOCTYPE html>
<html>
<head>
<title>object</title>
</head>
<body>
<script type="text/javascript">
// 萬事萬物皆物件(屬性和方法)
// 字面量建立
var person = {
name : "mjj",
age: 18,
gender: "female",
fav: function(){
alert("愛好打球");
}
}
console.log(person.name);
console.log(person.fav());
</script>
</body>
</html>
25. 內建物件array
<!DOCTYPE html>
<html>
<head>
<title>內建物件array</title>
</head>
<body>
<script type="text/javascript">
// array的建立方式1:
var arr = [1, 2, 3, 4]
// array的建立方式2(建構函式):
var colors = new Array();
// 這種建立方式等價於以下方式:
var colors2 = [];
// 以下方法可以提高準確性.
if (Array.isArray(colors)){
colors[0] = 'red';
console.log(colors[0]);
console.log(colors.length);
}
if (Array.isArray(colors)){
colors[0] = "red";
colors[1] = "blue";
colors[2] = "green";
// 將array轉化為string
var a = colors.toString();
console.log(a);
console.log(colors);
}
</script>
</body>
</html>
26. 陣列的join方法
<!DOCTYPE html>
<html>
<head>
<title>陣列的join方法</title>
</head>
<body>
<script type="text/javascript">
// 將陣列轉化為字串的三種方法: toString toLocaleString join('分隔符')
var arr = [1,2,3];
var a = arr.toString();
var b = arr.toLocaleString();
console.log(a);
// 結果:1,2,3
console.log(b);
// 結果:1,2,3
// 如果陣列中存放的是函式物件, 那麼toString和toLocaleString方法得到的結果則不同. 通常使用的是toString來實現陣列轉字串.
// 使用指定的分隔符分隔字串.
var colors = ['red', 'blue', 'green'];
var a = colors.join(',');
console.log(a);
// 結果為字串, 以逗號分隔: red,blue,green
// toString和toLocalString方法預設使用逗號將元素隔開, join方法可以指定分隔符, 例如|等.
</script>
</body>
</html>
27. 陣列的棧方法和佇列方法
<!DOCTYPE html>
<html>
<head>
<title>陣列的棧方法和佇列方法</title>
</head>
<body>
<script type="text/javascript">
// 棧: 後進先出
// push() 在末尾追加, 返回陣列的長度
// pop() 刪除最後一項元素, 返回刪除的最後一項元素
var colors = ['red','blue','green']
var newlength = colors.push('purple');
// 返回的是列表的長度.
console.log(newlength);
// 結果: 4
console.log(colors);
// 結果: ["red", "blue", "green", "purple"]
var lastItem = colors.pop();
console.log(lastItem);
// 結果: purple
console.log(colors);
// 結果: ["red", "blue", "green"]
// 佇列: 先進先出
// shift() 刪除陣列的第一個元素, 返回刪除的元素
// unshift() 往陣列的第一項新增元素, 返回新增後的陣列的長度
var newlength2 = colors.unshift('yellow');
console.log(newlength2);
// 結果: 4
console.log(colors);
// 結果: ["yellow", "red", "blue", "green"]
var firstItem = colors.shift();
console.log(firstItem);
// 結果: yellow
console.log(colors);
// 結果: ["red", "blue", "green"]
</script>
</body>
</html>
28. 陣列排序
<!DOCTYPE html>
<html>
<head>
<title>陣列排序</title>
</head>
<script type="text/javascript">
var values = [1, 2, 3, 4, 5,10, 18];
// 將陣列中值的順序進行反轉
values.reverse();
console.log(values);
// 結果： [5, 4, 3, 2, 1]
// 陣列排序，預設按照ascii碼升序，使用reverse進行降序排序
// 陣列在排序之前，會將數值轉化為字串，然後進行排序
values.sort();
console.log(values);
// 結果： [1, 10, 18, 2, 3, 4, 5]
// 如果要比較兩個數值的大小，則應採用以下方法：
function compare1(a,b){
if(a<b){
return -1;
}else if(a>b){
return 1;
}else{
return 0;
}
}
values.sort(compare1); //升序
console.log(values); // 結果： [1, 2, 3, 4, 5, 10, 18]
// 將以上程式碼簡寫：
function compare11(a,b){
return a-b;
}
function compare2(a,b){
if(a>b){
return -1;
}else if(a<b){
return 1
}else{
return 0;
}
}
values.sort(compare2);
console.log(values); // 結果： [18, 10, 5, 4, 3, 2, 1]
// 將以上程式碼簡寫：
function compare22(a,b){
return b-a;
}
</script>
</body>
</html>
29. 陣列的操作方法
<!DOCTYPE html>
<html>
<head>
<title>陣列的操作方法</title>
</head>
<script type="text/javascript">
//1. concat() 對陣列進行合併，得到新的陣列，不會影響原來的陣列
var colors = ['red','blue'];
colors.concat() // concat()中可以是一個數組或多個數組， 或者不是陣列。
var newColors1 = colors.concat('green');
console.log(newColors1); //結果： ["red", "blue", "green"]
var newColors2 = colors.concat({"name":"張三"});
console.log(newColors2); // 結果：["red", "blue", Object]
var newColors3 = colors.concat({"name":"lisa"},[1,2]);
console.log(newColors3); // 結果：["red", "blue", Object, 1, 2]
//2. slice() 對陣列進行分割，不會影響原來的陣列，會返回新的陣列.
var names = ['tom', 'sara','sunny','rita'];
// 一個引數，表示切割的步長
newNames1 = names.slice(1);
console.log(newNames1); // 結果：["sara", "sunny", "rita"]
//兩個引數，第一個是起始位置，第二個是結束位置，且顧頭不顧尾
newNames2 = names.slice(2,3);
console.log(newNames2); // 結果：["sunny"]
newNames3 = names.slice(-2, -1);
console.log(newNames3); // ["sunny"]
// 三個引數，第一個表示起始位置，第二個表示結束位置，第三個表示步長。
newNames4 = names.slice()
//3. splice() 對陣列進行新增，刪除或替換
//3.1 刪除，兩個引數
var fruits = ['apple', 'banana', 'orange'];
// 從0開始刪除兩個元素，會影響原來的陣列。
fruits.splice(0,2);
//3.2 插入, 三個引數
// 1表示從1開始，0表示不去刪除元素，後面的表示插入的元素
fruits.splice(1,0,'sara','sunny');
//3.3 替換
// 刪除一個元素，索引為1，然後新增第三個引數，表示替換。
fruits.splice(1,1,'rita');
</script>
</body>
</html>
30. 陣列的位置方法
<!DOCTYPE html>
<html>
<head>
<title>陣列的位置方法</title>
</head>
<script type="text/javascript">
// 位置方法
// indexOf() 從前往後找
// lastIndexOf() 從後往前找
var names = ['alex', 'sunny', 'tom', 'alex', 'rita']
var ind = names.indexOf('sunny');
console.log(ind); // 1
var ind2 = names.lastIndexOf('alex');
console.log(ind2); // 3
// 下面的引數2表示從索引為2的位置進行查詢
var ind3 = names.indexOf('alex',2);
console.log(ind3); // 3
var ind4 = names.lastIndexOf('alex',2);
console.log(ind4); // 0
// 注意：如果查不到結果就返回-1，查到結果就返回當前項的索引
</script>
</body>
</html>
31. 陣列的迭代方法
<!DOCTYPE html>
<html>
<head>
<title>陣列的迭代方法</title>
</head>
<script type="text/javascript">
//1. filter() 將陣列的元素進行過濾, 其中傳入匿名函式
var numbers = [1,2,3,4,5,6,20]
var filterResult = numbers.filter(function(item,index,array){
return item > 10;
});
console.log(filterResult); // [20]
//2. map() 對陣列的每一項進行操作， 其中傳入匿名函式
var mapResult = numbers.map(function(item, index, array){
return item*2;
});
console.log(mapResult);// [2, 4, 6, 8, 10, 12, 40]
// 遍歷
for(var i = 0; i < mapResult.length; i++){
console.log(mapResult[i]);
}
//3. forEach()，其中傳入匿名函式
mapResult.forEach(function(item,index,array){
console.log(item);
});
</script>
</body>
</html>
32. map方法的應用
<!DOCTYPE html>
<html>
<head>
<title>map方法的應用</title>
</head>
<script type="text/javascript">
var people = [
{
'name':"alex",
"age":18
},
{
'name':'apple',
'age':20
},
{
'name':'sunny',
'age':30
}
]
var names = people.map(
function(item,index,array){
return item.name;
}
)
console.log(names); // ["alex", "apple", "sunny"]
var ages = people.map(
function(item,index,array){
return item.age;
}
)
console.log(ages); // [18, 20, 30]
</script>
</body>
</html>
33. 字串的字元方法
<!DOCTYPE html>
<html>
<head>
<title>字串的字元方法</title>
</head>
<script type="text/javascript">
/*
屬性
length 獲取字串的長度
方法
charAt() 獲取某個索引處的字元
charCodeAt() 獲取某個索引處字元對應的編碼(ascii碼)
concat() 字串拼接, 可以傳多個引數,通常不使用這種方法. 通常使用+來做多個字元的拼接.
slice()
substr()
substring()
indexOf()
lastIndexOf()
trim()
toLowerCase()
toLocaleLowerCase()
toUpperCase()
toLocaleUpperCase()
*/
var str = 'hello world';
console.log(str.length); //11
console.log(str.charAt(1)); //e
console.log(str.charCodeAt(1)); //101
console.log(str.concat('!')); //hello world!
</script>
</body>
</html>
34. 字串的切片方法
<!DOCTYPE html>
<html>
<head>
<title>字串的切片方法</title>
</head>
<script type="text/javascript">
/*
屬性
length 獲取字串的長度
方法
charAt() 獲取某個索引處的字元
charCodeAt() 獲取某個索引處字元對應的編碼(ascii碼)
concat() 字串拼接, 可以傳多個引數,通常不使用這種方法. 通常使用+來做多個字元的拼接.
slice()
substr()
substring()
indexOf()
lastIndexOf()
trim()
toLowerCase()
toLocaleLowerCase()
toUpperCase()
toLocaleUpperCase()
*/
var str = 'hello world';
console.log(str.length); //11
console.log(str.charAt(1)); //e
console.log(str.charCodeAt(1)); //101
console.log(str.concat('!')); //hello world!
//如果只傳一個引數,slice(),substr()和substring()的效果一樣, 不同的是第二個引數. 一個引數表示起始位置, 一直截到字串末尾.
console.log(str.slice(2)); //llo world
console.log(str.substr(2));//llo world
console.log(str.substring(2)); //llo world
console.log(str.slice(2,4)); //ll 第一個引數是起始位置, 第二個引數是結束位置, 且顧頭不顧尾.
console.log(str.substr(2,6)); //llo wo, 第一個引數是起始位置, 第二個引數表示返回的字元的個數, 第二個引數一定是個正數.
console.log(str.substring(2,4)); //ll 第一個引數是起始位置, 第二個引數是結束位置, 且顧頭不顧尾.
</script>
</body>
</html>
35. 字串的其他方法
<!DOCTYPE html>
<html>
<head>
<title>字串的切片方法</title>
</head>
<script type="text/javascript">
/*
屬性
length 獲取字串的長度
方法
charAt() 獲取某個索引處的字元
charCodeAt() 獲取某個索引處字元對應的編碼(ascii碼)
concat() 字串拼接, 可以傳多個引數,通常不使用這種方法. 通常使用+來做多個字元的拼接.
slice()
substr()
substring()
indexOf()
lastIndexOf()
trim() 清除字串前後的空格
toLowerCase() 全部轉成小寫, 常用
toLocaleLowerCase() 在特定地區有用
toUpperCase() 全部轉成大寫, 常用
toLocaleUpperCase() 在特定地區有用
*/
var str = 'hello world';
console.log(str.length); //11
console.log(str.charAt(1)); //e
console.log(str.charCodeAt(1)); //101
console.log(str.concat('!')); //hello world!
//如果只傳一個引數,slice(),substr()和substring()的效果一樣, 不同的是第二個引數. 一個引數表示起始位置, 一直截到字串末尾.
console.log(str.slice(2)); //llo world
console.log(str.substr(2));//llo world
console.log(str.substring(2)); //llo world
console.log(str.slice(2,4)); //ll 第一個引數是起始位置, 第二個引數是結束位置, 且顧頭不顧尾.
console.log(str.substr(2,6)); //llo wo, 第一個引數是起始位置, 第二個引數表示返回的字元的個數, 第二個引數一定是個正數.
console.log(str.substring(2,4)); //ll 第一個引數是起始位置, 第二個引數是結束位置, 且顧頭不顧尾.
console.log(str.indexOf('o')); //4
console.log(str.lastIndexOf('o')); //7 從後往前找
console.log(str.indexOf('o',6)); //7, 從6開始往後找
console.log(str.lastIndexOf('o',6));//4, 從6往前找
var str1 = ' hello world ';
console.log(str.trim()); //hello world
console.log(str.toUpperCase()); //HELLO WORLD
</script>
</body>
</html>
36. 如何查詢當前字元的所有位置
<!DOCTYPE html>
<html>
<head>
<title>如何查詢當前字元的所有位置</title>
</head>
<script type="text/javascript">
//查詢e在str中的所有位置
var str = 'He unfolded the map and set it on the floor.'
var arr = [];
for(i=0; i<str.length; i++){
if(str[i]==='e'){
arr.push(i);
}
}
console.log(arr);
// [1, 9, 14, 25, 36]
</script>
</body>
</html>
37. date日期物件的建立方式
<!DOCTYPE html>
<html>
<head>
<title>date日期物件的建立方式</title>
</head>
<script type="text/javascript">
// UTC 1970.1.1 - 285616年
// Date日期物件, 其中可以傳引數, 也可以不傳引數.
// 方式1(常用)
var now = new Date();
console.log(now);
// Sun Sep 13 2020 12:05:39 GMT+0800 (中國標準時間)
//方式2
var xmas = new Date('December 25,1995 13:30:00');
console.log(xmas);
// Mon Dec 25 1995 13:30:00 GMT+0800 (中國標準時間)
//方式3
// 月份0-11
var xmas1 = new Date(1995,11,25);
console.log(xmas1);
//Mon Dec 25 1995 00:00:00 GMT+0800 (中國標準時間)
//方式4
var xmas2 = new Date(1995,11,25,14,30,0);
console.log(xmas2);
//Mon Dec 25 1995 14:30:00 GMT+0800 (中國標準時間)
</script>
</body>
</html>
38. Date的常用方法
<!DOCTYPE html>
<html>
<head>
<title>Date的常用方法</title>
</head>
<script type="text/javascript">
var now = new Date();
console.log(now.getDate());//13 獲取日期(1-31)
console.log(now.getMonth());//9 獲取月份(0-11)
console.log(now.getFullYear());//2020 獲取年份
console.log(now.getDay());//0(星期天) 獲取一星期中的第幾天(0-6)
console.log(now.getHours()); //12 獲取小時(0-23)
console.log(now.getMinutes());//28 獲取分鐘數(0-59)
console.log(now.getSeconds());//49 獲取秒數(0-59)
</script>
</body>
</html>
39. 日期格式化方法
<!DOCTYPE html>
<html>
<head>
<title>日期格式化方法</title>
</head>
<script type="text/javascript">
var now = new Date();
console.log(now.toDateString());
// Sun Sep 13 2020
console.log(now.toTimeString());
// 16:39:30 GMT+0800 (中國標準時間)
console.log(now.toLocaleDateString());
// 2020-9-13 常用
console.log(now.toLocaleTimeString());
// 16:42:17 常用
console.log(now.toLocaleString());
// 2020-9-13 16:43:24 常用
console.log(now.toUTCString());
// Sun, 13 Sep 2020 08:45:02 GMT
</script>
</body>
</html>
40. 如何顯示數字時鐘的格式時間
<!DOCTYPE html>
<html>
<head>
<title>如何顯示數字時鐘的格式時間</title>
</head>
<script type="text/javascript">
function nowNumTime(){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var temp = "" + (hour>12 ? hour-12 : hour);
if(hour === 0){
temp = "12";
}
temp = temp + (minute<10 ? ':0' : ':') + minute;
temp = temp + (second<10 ? ':0' : ':') + second;
temp = temp + (hour >= 12 ? ' P.M.' : ' A.M.');
return temp;
}
var time = nowNumTime();
console.log(time);
// 5:15:04 P.M.
</script>
</body>
</html>
41. 字串和數值型別相互轉換
<!DOCTYPE html>
<html>
<head>
<title>字串和數值型別相互轉換</title>
</head>
<script type="text/javascript">
//1. 將數字字串轉化為整型
var str1 = '1.234555';
console.log(parseInt(str1));
// 1
var str2 = '1344dxdfdf009';
console.log(parseInt(str2));
// 1344
//2. 將數字字串轉化為浮點型
var str3 = '325.45667';
console.log(parseFloat(str3));
// 325.45667
console.log(Number(str3));
// 325.45667
var str4 = '3434dsfsg.543';
console.log(Number(str4));
// NaN
console.log(isNaN(Number(str4))); //檢測結果是否為NaN
// true
//3. 將數值轉化為字串(強制型別轉換)
var num1 = 124.34;
console.log(num1.toString());
//124.34
console.log(String(num1));
//124.34
//4. 隱式轉換
console.log(''+ num1);
//124.34
console.log(''.concat(num1));
//124.34
//5. 按小數點後固定位數轉換
console.log(num1.toFixed()); //124 四捨五入只保留整數
console.log(num1.toFixed(2));// 124.34
</script>
</body>
</html>
42. global物件的編碼和解碼方式
<!DOCTYPE html>
<html>
<head>
<title>global物件的編碼和解碼方法</title>
</head>
<script type="text/javascript">
//編碼
// URI:統一資源識別符號
var uri = 'http://www.aplend.cn/web index.html?name=alex';
console.log(encodeURI(uri));//對空格進行解析
//http://www.aplend.cn/web%20index.html?name=alex
console.log(encodeURIComponent(uri));//對空格,問號,冒號,斜槓等進行解析, 這種方法使用較多
//http%3A%2F%2Fwww.aplend.cn%2Fweb%20index.html%3Fname%3Dalex
//解碼
var encodeuri1 = 'http://www.aplend.cn/web%20index.html?name=alex';
console.log(decodeURI(encodeuri1));// 只能解析空格
// http://www.aplend.cn/web index.html?name=alex
var encodeuri2 = 'http%3A%2F%2Fwww.aplend.cn%2Fweb%20index.html%3Fname%3Dalex';
console.log(decodeURIComponent(encodeuri2));
// http://www.aplend.cn/web index.html?name=alex
</script>
</body>
</html>
43. window物件講解
<!DOCTYPE html>
<html>
<head>
<title>window物件講解</title>
</head>
<script type="text/javascript">
// js提供了一個window物件, 在目前的環境下, window物件就相當於global物件. 全域性作用域下宣告的變數或函式都成為了window物件的屬性或方法.
var a = 3;
console.log(window.a);
function hello(){
alert(window.a);
}
window.hello();
// 在當前瀏覽器環境下, window物件等價於global物件. 全域性作用域下宣告的變數或函式都掛在window物件下. 在ECMAScript或JS中, 頂層物件就是window.
</script>
</body>
</html>
44. Math數學物件
<!DOCTYPE html>
<html>
<head>
<title>Math數學物件</title>
</head>
<script type="text/javascript">
// 屬性(使用較少)
console.log(Math.E);
// 2.718281828459045
console.log(Math.LN2);
// 0.6931471805599453
console.log(Math.LN10);
// 2.302585092994046
console.log(Math.LOG2E);
// 1.4426950408889634
console.log(Math.LOG10E);
// 0.4342944819032518
console.log(Math.PI);
// 3.141592653589793
console.log(Math.SQRT2); //2的平方根
// 1.4142135623730951
console.log(Math.SQRT1_2); //2的平方根的倒數
// 0.7071067811865476
//方法
//1.max() min()
var max = Math.max(1,3,45,56,21);
console.log(max);
// 56
var min = Math.min(1,2,3,5,78);
console.log(min);
// 1
var arr = [1,23,45,67,87];
var max1 = Math.max.apply(null,arr);
console.log(max1);
// 87
//2.ceil() floor() round()
var num = 24.3;
console.log(Math.ceil(num)); //往前進一位, 向上取整
// 25
console.log(Math.floor(num)); //捨棄小數點後數字, 向下取整
// 24
console.log(Math.round(num)); //標準的四捨五入
//24
//3.隨機數 random() 0=<random<1
console.log(Math.random());
// 0.5704137720924052
//3.1 獲取min到max之間的整數(獲取某個範圍的隨機整數)
function random(min,max){
return rint = Math.floor(Math.random() * (max-min) + min);
}
//3.2 獲取隨機顏色 rgba(0-255,0-255,0-255);
function randomColor(){
var r = random(0,256), g = random(0,256), b = random(0,256);
// 模板字串``(位於tab鍵上方)
var result = `rgb(${r},${g},${b})`;
return result;
}
var rc = randomColor();
console.log(rc);
// document.body.style.backgroundColor = rc;
//3.3 隨機驗證碼
function createCode(){
var code = '';
var codeLength = 4;
var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
for(var i = 0; i < codeLength; i++){
var index = random(0,36);
code += randomCode[index];
}
return code;
}
var randomCode = createCode();
console.log(randomCode);
</script>
</body>
</html>
45. 隨機物件
<!DOCTYPE html>
<html>
<head>
<title>隨機物件</title>
</head>
<script type="text/javascript">
//3.隨機數 random() 0=<random<1
console.log(Math.random());
// 0.5704137720924052
//3.1 獲取min到max之間的整數(獲取某個範圍的隨機整數)
function random(min,max){
return rint = Math.floor(Math.random() * (max-min) + min);
}
//3.2 獲取隨機顏色 rgba(0-255,0-255,0-255);
function randomColor(){
var r = random(0,256), g = random(0,256), b = random(0,256);
// 模板字串``(位於tab鍵上方)
var result = `rgb(${r},${g},${b})`;
return result;
}
var rc = randomColor();
console.log(rc);
// document.body.style.backgroundColor = rc;
//3.3 隨機驗證碼
function createCode(){
var code = '';
var codeLength = 4;
var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
for(var i = 0; i < codeLength; i++){
var index = random(0,36);
code += randomCode[index];
}
return code;
}
var randomCode = createCode();
console.log(randomCode);
</script>
</body>
</html>