網頁javascript腳本注入方式方法詳情 - html,java,js代碼,JavaScript,前端開發技術極先鋒博客

今日內容

JS基本語法---->重點
JS的BOM對象--->window,location
JS的DOM對象----->重點
JS的案例------>必須練習

表單校驗
圖片輪播
二級聯動

第一章-JS基礎

1.1 JS簡介

什麼是JS

JavaScript 是一種客户端腳本語言。運行在客户端瀏覽器中，每一個瀏覽器都具備解析 JavaScript 的引擎。
腳本語言：不需要編譯(直譯)，就可以被瀏覽器直接解析執行了。
JS語言和Java語言對比：

對比	Java	JS
運行環境	JVM虛擬機	JS引擎，是瀏覽器的一部分
是否跨平台運行	跨平台	跨平台
語言類型	強類型語言	弱類型，動態類型語言
是否需要編譯	需要編譯，是編譯型語言	不需要編譯，是解釋型語言
是否區分大小寫	區分大小寫	區分大小寫

JS的作用

具體來説，有兩部分作用：

JS代碼可以操作瀏覽器：進行網址跳轉、歷史記錄切換、瀏覽器彈窗等等
JS代碼可以操作網頁標籤：操作HTML的標籤、標籤的屬性、樣式等等
注意：JS的是在瀏覽器內存中運行時操作，並不會修改網頁源碼，所以刷新頁面後網頁會還原

JS的組成

ECMAScript(核心)：是JS的基本語法規範
BOM：Browser Object Model，瀏覽器對象模型，提供了與瀏覽器進行交互的方法
DOM：Document Object Model，文檔對象模型，提供了操作網頁的方法

1.2 JS引入

內部JS

語法

在html裏增加<script>標籤，把js代碼寫在標籤體裏

<script>
	//在這裏寫js代碼
</script>

示例

創建html頁面，編寫js代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式-內部js</title>
    <script>
        //操作瀏覽器彈窗
        alert("hello, world");
    </script>
</head>
<body>

</body>
</html>

打開頁面，瀏覽器會彈窗

網頁javascript腳本注入方式方法_js代碼

外部JS

語法

把js代碼寫在單獨的js文件中，js文件後綴名是.js
在HTML裏使用<script>標籤的src屬性引入外部js文件

<script src="js文件的路徑"></script>

示例

創建一個my.js文件，編寫js代碼

第1步：創建js文件

網頁javascript腳本注入方式方法_java_02

第2步：設置js文件名稱

網頁javascript腳本注入方式方法_java_03

第3步：編寫js代碼

alert("hello, world! 來自my.js");

創建一個html，引入my.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式-外部js</title>
    <!--引入外部的my.js文件-->
    <script src="../js/my.js"></script>
</head>
<body>

</body>
</html>

打開頁面，瀏覽器會彈窗

網頁javascript腳本注入方式方法_java_04

注意事項

一個script標籤，不能既引入外部js文件，又在標籤體內寫js代碼。

錯誤演示

<script src="../js/my.js">
	alert("hello");
</script>

正確演示

<script src="../js/my.js"></script>
<script>
	alert("hello");
</script>

1.3 JS小功能和JS調試

小功能

alert(): 彈出警示框
console.log(): 向控制枱打印日誌
document.write(); 文檔打印. 向頁面輸出內容.

網頁javascript腳本注入方式方法_html_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            + alert(): 彈出警示框
            + console.log(): 向控制枱打印日誌
            + document.write(); 文檔打印. 向頁面輸出內容.
         */
        // alert作用: 1.提示  2.調試代碼
        // alert("警告");

        // console.log(): 1.提示  2.調試代碼
        // console.log("向控制枱輸出日誌信息....");

        // document.write(): 1.可以輸出文本  2.可以輸出html標籤
        document.write("Hello,World");
        document.write("<h1>標題</h1>");

    </script>
</head>
<body>

</body>
</html>

調試

按F12打開開發者工具
找到Source窗口，在左邊找到頁面，如下圖

打斷點之後，當代碼執行到斷點時，會暫停執行
在窗口右側可以查看錶達式的值、單步調試、放行等等

網頁javascript腳本注入方式方法_js代碼_06

如果代碼執行中出現異常信息，會在控制枱Console窗口顯示出來

網頁javascript腳本注入方式方法_html_07

點擊可以定位到異常位置

網頁javascript腳本注入方式方法_java_08

1.4 JS基本語法

變量

JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定。定義變量需要用關鍵字 'var'
格式: var 變量名 = 值;
舉例:

var num1 = 10;      ----->相當於java中的int num1 = 10;
var str = "itheima";----->相當於java中的String str = "itheima";
var flag = true; -------->相當於java中boolean flag = true;
var date = new Date();--->相當於java中的Date date = new Date();
var num1 = 10,num2 = 20,num3 = 30;---->相當於java中的int num1=10,num2=20,num3=30;
注意: var可以省略不寫,建議保留
num1 = 10;
str = "itheima";
flag = true;
date = new Date();

注意:

var可以省略不寫,建議保留
最後一個分號可以省略,建議保留
定義多個變量可以用","隔開，公用一個‘var’關鍵字

數據類型

1.五種原始數據類型

數據類型	描述	示例
`number`	數值類型	`1`, `2`, `3`, `3.14`
`boolean`	布爾類型	`true`, `false`
`string`	字符串類型	`"hello"`, 'hello'
`object`	對象類型	`new Date()`, `null`
`undefined`	未定義類型	var a;

2.typeof操作符

作用：用來判斷變量是什麼類型
寫法：typeof(變量名) 或 typeof 變量名
null與undefined的區別：
null: 對象類型，已經知道了數據類型，但對象為空。
undefined：未定義的類型，並不知道是什麼數據類型。

3.小練習

定義不同的變量,輸出類型,

網頁javascript腳本注入方式方法_java_09

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 需求:定義不同的變量,輸出類型
        // 定義number類型的變量
        var num1 = 10;
        var num2 = 3.14;
        console.log(typeof num1);// number
        console.log(typeof num2);// number

        // 定義boolean類型的變量
        var flag = true;
        console.log(typeof flag);// boolean

        // 定義string類型的變量
        var str = "itheima";
        console.log(typeof str);// string

        // 定義object類型的變量
        var obj1 = new Date();
        var obj2 = null;
        console.log(typeof obj1);// object
        console.log(typeof obj2);// object

        // 定義undefined類型的變量
        var v;
        console.log(typeof v);// undefined
    </script>
</head>
<body>

</body>
</html>

字符串轉換成數字類型

全局函數(方法)，就是可以在JS中任何的地方直接使用的函數，不用導入對象。不屬於任何一個對象

網頁javascript腳本注入方式方法_java_10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        // 字符串--->整數
        console.log(parseInt("123"));// 123
        console.log(typeof parseInt("123"));// number

        // 字符串--->小數
        console.log(parseFloat("3.14"));// 3.14
        console.log(typeof parseFloat("3.14"));// number

        // isNaN:判斷是否是一個非數字,如果是非數字就返回true,否則就返回false
        console.log(isNaN(10));// false
        console.log(isNaN("10"));// false
        console.log(isNaN("10A"));// true
        console.log(isNaN("abc"));// true
        console.log("------------");

        // 注意:
        console.log(parseInt("123a"));// 123
        console.log(typeof parseInt("123a"));// number

        console.log(parseInt("12a3"));// 12
        console.log(typeof parseInt("12a3"));// number

        console.log(parseInt("a123"));// NaN

        console.log(parseFloat("3.14A"));// 3.14
        console.log(typeof parseFloat("3.14A"));// number

        console.log(parseFloat("3.1A4A"));// 3.1
        console.log(typeof parseFloat("3.1A4A"));// number

        console.log(parseFloat("A3.1A4A"));// NaN




    </script>
</head>
<body>

</body>
</html>

運算符

關係運算符:> >= < <=,,!=, **=**
算術運算符: +,-,*,/,%
自增自減: ++,--
邏輯運算符: && , || , !
賦值運算符: =, +=,-=,*=,/=,%=
三元運算符:
注意:

number類型和字符串做-,*,/,%的時候,字符串自動的進行類型轉換,前提字符串裏面的數值要滿足number類型

// -,*,/,%
var num1 = 10;
var str = "20";
console.log(num1 - str);// -10
console.log(num1 * str);// 200
console.log(num1 / str);// 0.5
console.log(num1 % str);// 10

除法,保留小數

var i = 2;
var j = 5; 
alert(j/i);//2.5

== 比較數值, === 比較數值和類型

var i = 2;
var j = "2"; 
alert(i==j); // ==比較的僅僅是數值, true
alert(i===j); // ===比較的是數值和類型.false

流程語句

for\while\do...while循環

for (var i = 0; i < 5; i++) {
    document.write("for循環..." + i);
    document.write("<br/>");
}


var j = 0;
while (j < 5) {
    document.write("while循環..." + j);
    document.write("<br/>");
    j++;
}

var k = 0;
do {
    document.write("do...while循環..." + k);
    document.write("<br/>");
    k++;
} while (k < 5);

if... else

var num = 10;
if (num == 10) {
    document.write("num=10");
    document.write("<br/>");
} else {
    document.write("num!=10");
    document.write("<br/>");
}

switch

var str = "java";
switch (str) {
    case "php":
        document.write("php...");
        document.write("<br/>");
        break
    case "java":
        document.write("java...");
        document.write("<br/>");
        break
    case "c++":
        document.write("c++...");
        document.write("<br/>");
        break
    default:
        document.write("default...");
        document.write("<br/>");
        break
}

1.5 函數

什麼是函數

函數：是被設計為執行特定任務的代碼塊，在被調用時會執行
函數類似於Java裏的方法，用於封裝一些可重複使用的代碼塊

普通(有名)函數

語法

定義普通函數

function 函數名(形參名,形參名,...){
    函數體(代碼塊)
    [return 返回值;]
}
注意:
	1.小括號中的形參是沒有形參類型的,也就是不要寫var(寫了會報錯),只需要直接寫形參名即可
	2.js中的行數沒有重載,如果函數一樣,後面的函數會覆蓋前面的函數

調用普通函數

var result = 函數名(實參列表);

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 定義函數
        function f1() {
            document.write("無參數無返回值的函數");
            document.write("<br/>");
        }

        function f2(num, str) {
            document.write("有參數無返回值的函數,參數1:" + num + ",參數2:" + str);
            document.write("<br/>");
        }

        function f3() {
            document.write("無參數有返回值的函數");
            document.write("<br/>");
            return 10;
        }

        function f4(num, str) {
            document.write("有參數有返回值的函數,參數1:" + num + ",參數2:" + str);
            document.write("<br/>");
            return "java";
        }

        // 調用函數
        f1();
        f2(100, "itheima");
        var res1 = f3();
        console.log("返回值:" + res1);
        var res2 = f4(200, "itcast");
        console.log("返回值:" + res2);

        // 注意: js函數沒有重載,如果函數一樣,後面的函數會覆蓋前面的函數
        function f1(num) {
            document.write("無參數無返回值的函數-----後定義,num:"+num);
            document.write("<br/>");
        }

    </script>
</head>
<body>

</body>
</html>

匿名函數

匿名函數，也叫回調函數，類似於Java裏的函數式接口裏的方法

function (形參列表){
    函數體
    [return 返回值;]
}

1.6 JS事件

事件介紹

HTML 事件是發生在 HTML 元素上的“事情”，是瀏覽器或用户做的某些事情
事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行。

常見事件

屬性	此事件發生在何時...
onclick	當用户點擊某個對象時調用的事件句柄。
ondblclick	當用户雙擊某個對象時調用的事件句柄。
onchange	域的內容被改變。
onblur	元素失去焦點。
onfocus	元素獲得焦點。
onload	一張頁面或一幅圖像完成加載。
onsubmit	確認按鈕被點擊；表單被提交。
onkeydown	某個鍵盤按鍵被按下。
onkeypress	某個鍵盤按鍵被按住。
onkeyup	某個鍵盤按鍵被鬆開。
onmousedown	鼠標按鈕被按下。
onmouseup	鼠標按鍵被鬆開。
onmouseout	鼠標從某元素移開。
omouseover	鼠標移到某元素之上。
onmousemove	鼠標被移動。

事件綁定

普通函數方式

説白了設置標籤的屬性

<標籤 事件屬性="調用js函數"></標籤>
屬性: 根事件名一致
屬性值: 調用js函數代碼

匿名函數方式

<script>
    標籤對象.事件屬性 = function(){
        //執行一段代碼
    }
</script>

事件使用

重要的事件

點擊事件
需求: 每點擊一次按鈕彈出hello...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--需求: 每點擊一次按鈕 彈出hello...-->
<!--普通函數方式綁定事件---通過標籤的事件屬性-->
<input type="button" value="點擊事件1" onclick="f1()"><br/>
<!--匿名函數方式綁定事件-->
<input id="btn" type="button" value="點擊事件2"><br/>
</body>
<script>
    function f1() {
        alert("hello...")
    }

    // 獲得按鈕標籤
    document.getElementById("btn").onclick = function () {
        alert("hello,world...")
    }
</script>
</html>

獲得焦點(onfocus)和失去焦點(onblur)
需求:給輸入框設置獲得和失去焦點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--需求:給輸入框設置獲得和失去焦點-->
<input type="text" onfocus="f1()"  onblur="f2(this)">
</body>
<script>
    function f1() {
        console.log("獲得焦點");
    }

    function f2(obj) {
        console.log("失去焦點,用户輸入的數據是:"+obj.value);
    }
</script>
</html>

內容改變(onchange)
需求: 給select設置內容改變事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--需求: 給select設置內容改變事件-->
<select onchange="f1(this)">
    <option value="sz">深圳</option>
    <option value="gz">廣州</option>
    <option value="hz">惠州</option>
    <option value="dg">東莞</option>
</select>
</body>
<script>
    function f1(obj) {
        console.log("下拉框選擇的值:"+obj.value);
    }
</script>
</html>

等xx加載完成(onload) 可以把script放在body的後面/下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="f1()">
    <h1>標題</h1>
</body>
<script>
    function f1() {
        alert("頁面加載完畢....");
    }
</script>
</html>

掌握的事件

鍵盤相關的, 鍵盤按下(onkeydown) 鍵盤抬起(onkeyup)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--鍵盤相關的, 鍵盤按下(onkeydown)  鍵盤抬起(onkeyup)-->
<input type="text" onkeydown="f1()"  onkeypress="f2()" onkeyup="f3()">
</body>
<script>
    function f1() {
        console.log("鍵盤按下...");
    }

    function f2() {
        console.log("鍵盤按住...");
    }

    function f3() {
        console.log("鍵盤抬起...");
    }
</script>
</html>

鼠標相關的, 鼠標在xx之上(onmouseover ), 鼠標按下(onmousedown),鼠標離開(onmouseout)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--鼠標相關的, 鼠標在xx之上(onmouseover ), 鼠標按下(onmousedown),鼠標離開(onmouseout)-->
<input type="button" value="按鈕" onmouseover="f1()" onmousemove="f2()" onmousedown="f3()" onmouseout="f4()">
</body>
<script>
    function f1() {
        console.log("鼠標在按鈕之上...");
    }

    function f2() {
        console.log("鼠標在按鈕之上移動...");
    }

    function f3() {
        console.log("鼠標按下...");
    }

    function f4() {
        console.log("鼠標離開...");
    }
</script>
</html>

1.7 正則表達式

正則表達式概述

正則表達式是對字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個“規則字符串”，這個“規則字符串”用來表達對字符串的一種過濾邏輯。

用我們自己的話來説: 正則表達式用來校驗字符串是否滿足一定的規則的公式

正則表達式的語法

創建對象

對象形式：var reg = new RegExp("正則表達式")
直接量形式：var reg = /^正則表達式$/;

常用函數

方法	描述	參數	返回值
`boolean test(string)`	校驗字符串的格式	要校驗的字符串	boolean，校驗通過返回true

常見正則表達式規則

符號	作用
\d	數字
\D	非數字
\w	單詞：a-zA-Z0-9_
\W	非單詞
.	通配符，匹配任意字符
	匹配n次
	大於或等於n次
	在n次和m次之間
+	1~n次
*	0~n次
?	0~1次
^	匹配開頭
$	匹配結尾
[a-zA-Z]	英文字母
[a-zA-Z0-9]	英文字母和數字
[xyz]	字符集合, 匹配所包含的任意一個字符

使用示例

需求:

出現任意數字3次
只能是英文字母的, 出現6~10次之間
只能由英文字母和數字組成，長度為4～16個字符，並且以英文字母開頭
手機號碼: 以1開頭, 第二位是3,4,5,6,7,8,9的11位數字

步驟:

創建正則表達式
調用test()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 1. 出現任意數字3次
        var reg = /^\d{3}$/;
        console.log(reg.test("123"));// true
        console.log(reg.test("12a"));// false
        console.log(reg.test("1234"));// false
        console.log("----------");

        // 2. 只能是英文字母的, 出現6~10次之間
        var reg1 = /^[a-zA-Z]{6,10}$/;
        console.log(reg1.test("abcdefg"));// true
        console.log(reg1.test("abc1defg"));// false
        console.log("----------");

        // 3. 只能由英文字母和數字組成，長度為4～16個字符，並且以英文字母開頭
        var reg2 = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        console.log(reg2.test("abcdefg"));// true
        console.log(reg2.test("1abc1defg"));// false
        console.log("----------");

        // 4. 手機號碼: 以1開頭, 第二位是3,4,5,6,7,8,9的11位數字
        var reg3 = /^1[3456789]\d{9}$/;
        console.log(reg3.test("13566668888"));// true
        console.log(reg3.test("135666688889"));// false
        console.log(reg3.test("1356666888"));// false
        console.log(reg3.test("135666688a8"));// false
        console.log(reg3.test("2356666888"));// false
        console.log("----------");

    </script>
</head>
<body>

</body>
</html>

1.8 內置對象之Array數組【重點】

創建數組對象

語法

var arr = new Array(size)
var arr = new Array(element1, element2, element3, ...)
var arr = [element1, element2, element3, ...];

數組的特點

數組中的每個元素可以是任意類型
數組的長度是可變的，更加類似於Java裏的集合List

示例

創建數組，並把數組輸出到瀏覽器控制枱上

説明：把數據輸出到控制枱：console.log(value)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //* `var arr = new Array(size)`
        // * `var arr = new Array(element1, element2, element3, ...)`
        // * `var arr = [element1, element2, element3, ...];`
        // 創建一個長度為3的數組
        var arr1 = new Array(3);
        arr1[0] = "php";
        arr1[1] = "java";
        arr1[2] = "c++";
        arr1[3] = "go";
        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }
        console.log("------------");

        // 創建數組的同時賦值
        var arr2 = new Array("110","120","119");
        for (var i = 0; i < arr2.length; i++) {
            console.log(arr2[i]);
        }
        console.log("------------");

        // 直接創建數組並賦值
        var arr3 = ["深圳","廣州","惠州","東莞"];
        for (var i = 0; i < arr3.length; i++) {
            console.log(arr3[i]);
        }

    </script>
</head>
<body>

</body>
</html>

數組常見的函數

API介紹

concat(arr) 連接兩個或更多的數組，並返回結果。
join(str) 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
reverse() 顛倒數組中元素的順序。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // concat(arr) 連接兩個或更多的數組，並返回結果。
        // join(str) 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
        // reverse() 顛倒數組中元素的順序。
        var arr1 = new Array(3);
        arr1[0] = "php";
        arr1[1] = "java";
        arr1[2] = "c++";
        var arr2 = ["深圳","廣州","惠州","東莞"];

        // 數組拼接
        var arr = arr1.concat(arr2);
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

        // 數組元素拼接
        var s = arr1.join("-");
        console.log(s);

        // 數組元素反轉
        var arr3 = arr1.reverse();
        for (var i = 0; i < arr3.length; i++) {
            console.log(arr3[i]);// c++,java,php
        }

        console.log("----------");

        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);// c++,java,php
        }



    </script>
</head>
<body>

</body>
</html>

二維數組

數組裏面再放數組就是二維數組
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        // 創建二維數組
        // 方式1:
        var arr1 = new Array(3);
        arr1[0] = ["深圳","廣州","惠州","東莞"];
        arr1[1] = ["長沙","郴州","張家界","衡陽"];
        arr1[2] = ["瑞金","井岡山","南昌","九江"];

        // 方式2:
        var arr2 = new Array( ["深圳","廣州","惠州","東莞"],["長沙","郴州","張家界","衡陽"], ["瑞金","井岡山","南昌","九江"]);

        // 方式3:
        var arr3 = [["深圳","廣州","惠州","東莞"],["長沙","郴州","張家界","衡陽"], ["瑞金","井岡山","南昌","九江"]];

        // 遍歷
        for (var i = 0; i < arr1.length; i++) {
            var arr = arr1[i];
            for (var j = 0; j < arr.length; j++) {
                console.log(arr[j]);
            }
            console.log("-----");
        }
        console.log("--------------------------");

        for (var i = 0; i < arr2.length; i++) {
            var arr = arr2[i];
            for (var j = 0; j < arr.length; j++) {
                console.log(arr[j]);
            }
            console.log("-----");
        }
        console.log("--------------------------");

        for (var i = 0; i < arr3.length; i++) {
            var arr = arr3[i];
            for (var j = 0; j < arr.length; j++) {
                console.log(arr[j]);
            }
            console.log("-----");
        }
        console.log("--------------------------");
    </script>
</head>
<body>

</body>
</html>

1.9 內置對象之-Date日期

創建日期對象

語法

創建當前日期：var date = new Date()
創建指定日期：var date = new Date(年, 月, 日)注意：月從0開始，0表示1月
創建指定日期時間：var date = new Date(年, 月, 日, 時, 分, 秒)注意：月從0開始，0表示1月

日期常用方法

API介紹

方法	描述
Date()	返回當日的日期和時間。
getDate()	從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay()	從 Date 對象返回一週中的某一天 (0 ~ 6)。
getMonth()	從 Date 對象返回月份 (0 ~ 11)。
getFullYear()	從 Date 對象以四位數字返回年份。
getHours()	返回 Date 對象的小時 (0 ~ 23)。
getMinutes()	返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds()	返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds()	返回 Date 對象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒數。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒數。
setDate()	設置 Date 對象中月的某一天 (1 ~ 31)。
setMonth()	設置 Date 對象中月份 (0 ~ 11)。
setFullYear()	設置 Date 對象中的年份（四位數字）。
setYear()	請使用 setFullYear() 方法代替。
setHours()	設置 Date 對象中的小時 (0 ~ 23)。
setMinutes()	設置 Date 對象中的分鐘 (0 ~ 59)。
setSeconds()	設置 Date 對象中的秒鐘 (0 ~ 59)。
setMilliseconds()	設置 Date 對象中的毫秒 (0 ~ 999)。
setTime()	以毫秒設置 Date 對象。
toLocaleString()	根據本地時間格式，把 Date 對象轉換為字符串。

3.1.2示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 創建當前日期對象
        var date1 = new Date();
        console.log("當前的日期對象:" + date1);

        // 創建1999-10-11日期對象
        var date2 = new Date(1999,9,11);
        console.log("1999-10-11的日期對象:" + date2);

        // 創建1999-10-11 10:11:12日期對象
        var date3 = new Date(1999,9,11,10,11,12);
        console.log("1999-10-11 10:11:12的日期對象:" + date3);

        console.log("----------------");
        console.log("當前的年:" + date1.getFullYear());
        console.log("當前的月:" + date1.getMonth());
        console.log("當前的日:" + date1.getDate());
        console.log("當前的時:" + date1.getHours());
        console.log("當前的分:" + date1.getMinutes());
        console.log("當前的秒:" + date1.getSeconds());
        console.log("當前的毫秒:" + date1.getMilliseconds());
        console.log("當前日期對應的字符串:" + date1.toLocaleString());
        console.log("當前日期對應的字符串:" + date1.toLocaleDateString());
        console.log("當前日期對應的字符串:" + date1.toLocaleTimeString());

        document.write(date1.toLocaleString());


    </script>
</head>
<body>

</body>
</html>

第二章-JS的BOM

2.1 JS的BOM

概述

Browser Object Model ,瀏覽器對象模型. 為了便於對瀏覽器的操作，JavaScript封裝了對瀏覽器中各個對象，使得開發者可以方便的操作瀏覽器中的各個對象。

網頁javascript腳本注入方式方法_html_11

BOM裏面的五個對象

window: 窗體對象

alert() 顯示帶有一段消息和一個確認按鈕的警告框
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框,返回選擇的結果,確定(true),取消(false)
setInterval('函數名()',time) 按照指定的週期（以毫秒計）來調用函數或計算表達式
setTimeout('函數名()',time) 在指定的毫秒數後調用函數或計算表達式
clearInterval() 取消由 setInterval() 設置的 Interval()。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // alert() 顯示帶有一段消息和一個確認按鈕的警告框
        // window.alert("彈出警告框");
        // alert("彈出警告框");

        // confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框,返回選擇的結果,確定(true),取消(false)
        /*var flag = confirm("您確定要刪除嗎?");
        if (flag){
            document.write("確定刪除")
        } else{
            document.write("取消刪除!")
        }*/

        // setInterval('函數名()',time) 按照指定的週期（以毫秒計）來調用函數或計算表達式
        /*setInterval("f1()",200);

        function f1() {
            console.log("hello world");
        }*/

        // setTimeout('函數名()',time) 在指定的毫秒數後調用函數或計算表達式
        /*setTimeout("f2()",2000);

        function f2() {
            console.log("f2一次性定時器");
        }*/

        // clearInterval() 取消由 setInterval() 設置的 Interval()。
        // clearTimeout() 取消由 setTimeout() 方法設置的 timeout。

    </script>
</head>
<body>
<input type="button" value="啓動循環定時器" onclick="start()">
<input type="button" value="關閉循環定時器" onclick="end()">

</body>
<script>
    var interval;

     function start() {
        interval = setInterval("f1()",1000);
    }

    function f1() {
        console.log("hello world");
    }

    function end() {
        clearInterval(interval);
    }
</script>
</html

navigator:瀏覽器導航對象【瞭解】

屬性	作用
appName	返回瀏覽器的名稱
appVersion	返回瀏覽器的平台和版本信息

screen:屏幕對象【瞭解】

方法	作用
width	返回顯示器屏幕的分辨率寬度
height	返回顯示屏幕的分辨率高度

history:歷史對象【瞭解】

方法	作用
back()	加載 history 列表中的前一個 URL
forword()	加載 history 列表中的下一個 URL
go()	加載 history 列表中的某個具體頁面,（-1上一個頁面，1前進一個頁面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="04_歷史對象b頁面.html">從a頁面前進到b頁面</a>
<input type="button" value="前進到下一個頁面" onclick="f1()">
</body>
<script>
    function f1() {
        // history.forward();
        history.go(1);
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

    </script>
</head>
<body>
<a href="04_歷史對象a頁面.html">從b頁面回退到a頁面</a>
<input type="button" value="回退到上一個頁面" onclick="f2()">
</body>
<script>
    function f2() {
        // history.back();
        history.go(-1);
    }
</script>
</html>

location:當前路徑信息

屬性	作用
host	設置或返回主機名和當前 URL 的端口號
href	設置或返回完整的 URL
port	設置或返回當前 URL 的端口號

location.href; 獲得路徑

location.href = "http://www.baidu.com"; 設置路徑,跳轉到百度頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log("ip地址和端口號:"+location.host);
        console.log("url路徑:"+location.href);
        console.log("端口號:"+location.port);

        location.href = "http://www.itheima.com";
    </script>
</head>
<body>

</body>
</html>

第三章-JS的DOM

3.1 DOM介紹

1. 什麼是dom

DOM：Document Object Model，文檔對象模型。是js提供的，用來訪問網頁裏所有內容的(標籤,屬性,標籤的內容)

2. 什麼是dom樹

當網頁被加載時，瀏覽器會創建頁面的DOM對象。DOM對象模型是一棵樹形結構：網頁裏所有的標籤、屬性、文本都會轉換成節點對象，按照層級結構組織成一棵樹形結構。

整個網頁封裝成的對象叫document
標籤封裝成的對象叫Element
屬性封裝成的對象叫Attribute
文本封裝成的對象叫Text

網頁javascript腳本注入方式方法_java_12

一切皆節點, 一切皆對象

3.2 操作標籤

獲取標籤

document.getElementById(id) 根據id獲取標籤 返回值:Element對象
document.getElementsByTagName(tagName) 根據標籤名稱獲取一批標籤 返回值:Element類數組
document.getElementsByClassName(className) 根據class屬性值獲取一批標籤 返回值:Element類數組
document.getElementsByName(name) 根據標籤name屬性值獲取一批標籤 返回值:Element類數組

<body>

<input id="inputId1" type="text" value="admin"><br/>
<input id="inputId2" type="password" value="123456"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="checkbox" name="hobby"> 籃球<br/>
<input type="checkbox" name="hobby"> 足球<br/>
<input type="checkbox" name="hobby"> 敲代碼<br/>
</body>
<script>
    // 獲取第一個文本輸入框
    var inputE = document.getElementById("inputId1");
    console.log("值:"+inputE.value);

    // 獲取所有的input標籤
    var inputArr1 = document.getElementsByTagName("input");
    console.log(inputArr1.length);// 9

    // 獲取class屬性值為c1的input標籤
    var inputArr2 = document.getElementsByClassName("c1");
    console.log(inputArr2.length);// 4

    // 獲取name屬性值為hobby的input標籤
    var inputArr3 = document.getElementsByName("hobby");
    console.log(inputArr3.length);// 3

</script>

操作標籤

方法	描述	返回值
`document.createElement(tagName)`	創建標籤	`Element`對象
`parentElement.appendChild(sonElement)`	插入標籤
`element.remove()`	刪除標籤
`document.createTextNode()`	創建文本

<body>
<p id="pId">段落標籤</p>
<input type="button" value="添加font標籤到p標籤中" onclick="addElement()">
<input type="button" value="刪除p標籤" onclick="removeElement()">
</body>
<script>
    // 獲取p標籤對象
    var pE = document.getElementById("pId");

    function addElement() {
        // 創建font標籤
        var fontE = document.createElement("font");// <font></font>

        // 創建文本對象
        var text = document.createTextNode("字體標籤");// 字體標籤

        // 把文本對象添加到font標籤中
        fontE.appendChild(text);// <font>字體標籤</font>

        // 把font標籤對象添加到p標籤中
        pE.appendChild(fontE);
    }

    function removeElement() {
        // 刪除p標籤
        pE.remove();
    }
</script>

3.4 操作標籤體[重點]

語法

獲取標籤體內容：標籤對象.innerHTML
設置標籤體內容：

innerHTML是覆蓋式設置，原本的標籤體內容會被覆蓋掉；標籤對象.innerHTML = "新的HTML代碼";
支持標籤的可以插入標籤, 設置的html代碼會生效; 標籤對象.innerHTML += "新的HTML代碼";

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="pId">段落標籤</p>
<input type="button" value="獲取p標籤中的內容" onclick="get()">
<input type="button" value="添加font標籤到p標籤中" onclick="addElement()">

</body>
<script>
    function get() {
        // 1.獲取p標籤對象
        var pElement = document.getElementById("pId");

        // 2.獲取p標籤中的內容
        console.log(pElement.innerHTML);
    }

    function addElement() {
        // 1.獲取p標籤對象
        var pElement = document.getElementById("pId");

        // 2.添加font標籤到p標籤中
        // pElement.innerHTML = "<font>字體標籤</font>";
        pElement.innerHTML += "<font color='red'>字體標籤</font>";

    }
</script>

</html>

3.5 操作屬性

每個標籤Element對象提供了操作屬性的方法

方法名	描述	參數
`getAttribute(attrName)`	獲取屬性值	屬性名稱
`setAttribute(attrName, attrValue)`	設置屬性值	屬性名稱, 屬性值
`removeAttribute(attrName)`	刪除屬性	屬性名稱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../img/a.gif" id="imgId">
<input type="button" value="獲取img標籤src屬性的值" onclick="f1()">
<input type="button" value="修改img標籤src屬性的值" onclick="f2()">
<input type="button" value="刪除img標籤src屬性" onclick="f3()">
</body>
<script>

    // 獲取img標籤對象
    var imgE = document.getElementById("imgId");

    function f1() {
        console.log("img標籤src屬性的值:"+imgE.getAttribute("src"));
    }

    function f2() {
        imgE.setAttribute("src","../img/b.jpg");
    }

    function f3() {
        imgE.removeAttribute("src");
    }
</script>
</html>

第四章-JS案例

案例-使用JS完成表單的校驗

1. 案例需求

課堂完成: 用户名校驗
課後完成: 手機號碼,電子郵箱校驗

2.思路分析

1.為用户名輸入框綁定獲取焦點和失去焦點事件
2.獲取焦點事件的函數實現:
	2.1 獲取span標籤對象
	2.2 往span標籤對象中設置提示信息
3.失去焦點事件的函數實現:
    3.1 獲得用户輸入的用户名
	3.2 創建校驗用户名的正則表達式
	3.3 調用test函數進行校驗
	3.4 根據校驗結果,顯示提示信息到span標籤中

3.代碼實現

1.為username文本輸入框綁定獲取焦點和失去焦點事件
2.js代碼
<script>

    // 獲取span標籤對象
    var spanE = document.getElementById("usernamespan");

    // 獲取焦點事件
    function showTips() {
        // 往span標籤對象中設置提示信息
        spanE.innerHTML = "以字母開頭,由數字和英文字母組成,4-16位";
    }
    
    function checkUsername(obj) {
        //3.1 獲得用户輸入的用户名
        var username = obj.value;

        //3.2 創建校驗用户名的正則表達式
        var reg = /^[a-zA-Z][A-Za-z0-9]{3,15}$/;

        //3.3 調用test函數進行校驗
        var flag = reg.test(username);

        //3.4 根據校驗結果,顯示提示信息到span標籤中
        if (flag){
            spanE.innerHTML = "<img src='img/gou.png' width='10px' height='10px'>";
        } else{
            spanE.innerHTML = "<font color='red'>用户名輸入格式不對</font>";
        }
    }
</script>

做一下驗證手機號碼,email格式 var reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;

4,小結

事件,函數,正則表達式...

案例-使用JS完成圖片輪播效果

1.需求分析

網頁javascript腳本注入方式方法_html_13

實現每過3秒中切換一張圖片的效果，一共3張圖片，當顯示到最後1張的時候，再次顯示第1張。

2.思路分析

1.設置一個循環定時器(每隔3s調用一個函數changeImg)
2.在changeImg函數中,獲得img標籤,然後修改img標籤的src屬性

3.代碼實現

<script>
    // 設置一個循環定時器,每隔3秒調用changeImg函數
    setInterval("changeImg()",3000);

    var i = 1;

    function changeImg() {
        // 改變i的值
        i++;
        if (i > 3){
            i=1;
        }

        // 1.獲取img標籤對象
        var imgE = document.getElementById("imgId");

        // 2.修改img標籤對象的src屬性值
        imgE.setAttribute("src","../img/banner_"+i+".jpg");

    }
</script>

4.小結

定時任務

setInterval("函數名()", time);

操作屬性

setAttribute("屬性名","屬性值")

案例-JS控制二級聯動

1.需求分析

網頁javascript腳本注入方式方法_js代碼_14

在註冊頁面添加籍貫,左邊是省份的下拉列表,右邊是城市的下拉列表.右邊的select根據左邊的改變而更新數據

2.思路分析

1.創建頁面,含有2個下拉框,分別表示省份和城市
2.為省份下拉框綁定一個內容改變事件
3.內容改變事件函數的實現:
3.1 獲得選擇的省份
3.2 獲得城市下拉框對象
3.3 根據選擇的省份獲取對應的城市信息
3.4 循環遍歷城市信息
3.5 把遍歷出來的城市添加到城市下拉框中

3.代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
籍貫: <select onchange="changeCity(this)">
    <option value="-1">-請選擇-</option>
    <option value="0">廣東</option>
    <option value="1">湖南</option>
    <option value="2">江西</option>
</select>
<select id="cityId">
    <option>-請選擇-</option>
</select>
</body>
<script>
    var arr1 = new Array(3);
    arr1[0] = ["深圳", "廣州", "惠州", "東莞"];
    arr1[1] = ["長沙", "郴州", "張家界", "衡陽"];
    arr1[2] = ["瑞金", "井岡山", "南昌", "九江"];

    function changeCity(obj) {
        // 3.1 獲得選擇的省份
        var province = obj.value;

        // 3.2 獲得城市下拉框對象
        var cityE = document.getElementById("cityId");

        // 清空城市下拉框中的選項
        // cityE.innerHTML = "";
        cityE.innerHTML = "<option>-請選擇-</option>";

        if (province > -1){
            // 3.3 根據選擇的省份獲取對應的城市信息
            var citysArr = arr1[province];

            // 3.4 循環遍歷城市信息
            for (var i = 0; i < citysArr.length; i++) {
                // 3.5 把遍歷出來的城市添加到城市下拉框中
                // 3.5.1 創建option標籤對象
                var optionE = document.createElement("option");

                // 3.5.2 創建城市名稱的文本對象
                var text = document.createTextNode(citysArr[i]);

                // 3.5.3 把城市名稱添加到option標籤中
                optionE.appendChild(text);

                // 3.5.4 把option標籤添加到城市下拉框中
                cityE.appendChild(optionE);
            }
        }
    }
</script>

</html>

4.小結

內容改變事件

<select onchange="函數()"></select>

二維數組
innerHTML

會把前面的內容覆蓋掉
支持標籤的插入

父節點.appendChild(子節點)
document.createElement()
document.createTextNode()

總結

必須練習:
	1.課堂上三個js案例獨立完成
        
- 瞭解js的作用
    - JS代碼可以操作瀏覽器：進行網址跳轉、歷史記錄切換、瀏覽器彈窗等等
	- JS代碼可以操作網頁：操作HTML的標籤、標籤的屬性、樣式等等
  	注意：JS的是在瀏覽器內存中運行時操作，並不會修改網頁源碼，所以刷新頁面後網頁會還原

- 能夠在HTML裏引入js
    內聯方式:在html裏增加<script>標籤，把js代碼寫在標籤體裏
    外聯方式:把js代碼寫在單獨的js文件中，js文件後綴名是.js
		    在HTML裏使用<script>標籤引入外部js文件

- 能夠使用瀏覽器開發者工具調試js代碼
      F12  
        
- 掌握js的基本語法
    變量:var 變量名 = 值;
    數據類型: 數值類型,布爾類型,字符串類型,對象類型,未定義類型
    運算符:   
		/ 會取小數; 
		數值和字符串可以-,*,/,%操作,字符串會自動轉換為數值;
		== 比較值是否相等
        === 比較值和類型都是否相等
    循環\控制語句
        循環語句,條件判斷語句(if,switch)
- 能夠定義和調用函數
     普通函數:
			function 函數名(形參列表){
                函數體
                [return 返回值;]
            }
			注意:形參不要寫var
	  匿名函數:
			function (形參列表){
                函數體
                [return 返回值;]
            }
- 能夠使用js的內置對象
    Date日期對象,Array數組對象,常用函數
    
- 能夠綁定js事件
    方式一: <標籤 屬性="js代碼，調用函數"></標籤>
    方式二: <script>
        標籤對象.事件屬性 = function(){
            //執行一段代碼
        }
    </script>
- 能夠使用正則表達式校驗字符串格式
    var reg = /^表達式$/;
	test(str);
- 能夠使用js的bom操作瀏覽器
    windows,navigator,screen,history,location
- 能夠使用js的dom操作網頁
    獲取標籤
	document.getElementById(id) 根據id獲取標籤 返回值:Element對象
    document.getElementsByName(name) 根據標籤name獲取一批標籤 返回值:Element類數組
    document.getElementsByTagName(tagName) 根據標籤名稱獲取一批標籤 返回值:Element類數組
    document.getElementsByClassName(className) 根據類名獲取一批標籤 返回值:Element類數組
    
    操作標籤
    document.createElement(tagName) 創建標籤 Element對象
     parentElement.appendChild(sonElement) 插入標籤
	element.remove() 刪除標籤
	document.createTextNode()創建文本
	
    操作標籤體
    - 獲取標籤體內容：標籤對象.innerHTML
    - 設置標籤體內容：標籤對象.innerHTML = "新的HTML代碼";
	
	操作屬性
        1. getAttribute(attrName)  獲取屬性值 
        2. setAttribute(attrName, attrValue)  設置屬性值 
        3. removeAttribute(attrName)  刪除屬性

本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。

博客 / 詳情