一.JS簡介

1.什么是JS

JS全稱為JavaScript, 是一門運行在瀏覽器的, 動態(tài)類型的, 弱類型的(數(shù)據(jù)類型), 基于對象的直譯者(就是不用編譯)角本語言;

2.JS的組成

ECMAScript: JS的基本語法規(guī)范
BOM: Browser Object Model, 瀏覽器對象模型, 提供了與瀏覽器交互的一些函數(shù);
DOM: Document Object Model, 文檔對象模型, 提供操作網(wǎng)頁面的一些方法;

3.JS的作用

JS代碼可以操作瀏覽器: 進行網(wǎng)址跳, 歷史記錄切換, 瀏覽器彈窗等;

JS代碼可以操作網(wǎng)頁: 操作HTML的標簽, 標簽的屬性, 樣式, 文本等等;

JS是在瀏覽器內(nèi)存中運行時操作, 并不會修改網(wǎng)頁源碼, 所在刷新頁面后網(wǎng)頁會還原;

4.JS與java的對比

對比	Java	JS
運行環(huán)境	JVM虛擬機	JS引擎，是瀏覽器的一部分
是否跨平臺運行	跨平臺	跨平臺
語言類型	強類型語言	弱類型，動態(tài)類型語言
是否需要編譯	需要編譯，是編譯型語言	不需要編譯，是解釋型語言
是否區(qū)分大小寫	區(qū)分大小寫	區(qū)分大小寫

5.JS的引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
    <!-- 第二種方式 -->
    <script src="../js/demo.js"></script>
</head>
<body>
<!--
    JS 的引入方式有兩種:
        1. 內(nèi)部腳本 (就是在當前html文檔內(nèi)部編寫 script 標簽,在這個標簽里編寫JS代碼)
        2. 外部腳本 (當前項目中編寫一個JS文件,存放到JS文件夾中,需要使用時,再將該文件引入)
-->
<!-- 第一種方式 -->
<script>
    alert("你想做什么呢?");
</script>
</body>
</html>

二.ECMAScript

1.JS中的變量與數(shù)據(jù)類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
    /*
         java中的變量聲明: 變量類型 變量 = 變量值;
         js是一門弱類型的語言: 在js里面不需要去指定類型,同一個變量可以接收不同類型的數(shù)據(jù)
            var 變量名 = 變量值;
            let 變量名 = 變量值; ecmaScript6之后,一般都使用 let 關鍵字

         js中的數(shù)據(jù)類型:
            1. 基本數(shù)據(jù)類型: number(所有的數(shù)值), string(字符串), undefined(未定義), boolean
                null: 對象類型，已經(jīng)知道了數(shù)據(jù)類型，但對象為空;
?               undefined：未定義的類型，并不知道是什么數(shù)據(jù)類型;
            2. 引用數(shù)據(jù)類型: object

         獲取某個變量的類型的關鍵字是 typeof

         string 轉(zhuǎn) number parseInt() 或者 parseFloat()
         number 轉(zhuǎn) string toString()
         number 或者 string 轉(zhuǎn) boolean
            1. 0為 false 非0為 true
            2. 空字符串為 false 非空字符串為 true
    */
    //string 轉(zhuǎn) number
    let test2 = "100";
    let test3 = parseInt(test2);
    console.log(typeof (test3));
    let test4 = "101.00";
    let test5 = parseFloat(test4);
    console.log(typeof (test5));

    // number 轉(zhuǎn) string
    let test6 = 120;
    let number = test6.toString();
    console.log(typeof (number));

    // number 或者 string 轉(zhuǎn) boolean
    let test7 = null;
    let b1 = new Boolean(test7);
    console.log(b1);
    let test8 = "test";
    let b2 = new Boolean(test8);
    console.log(b2);
</script>
</body>
</html>

2.運算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
    /*
        JS中的運算符與Java中的運算符基本相同, 不同的是js中 == ===,!= !==;
            == 比較值  != 相反
            === 即比較值又比較數(shù)據(jù)類型  !== 相反
    */
    let i = 3.14
    let str = "3.14"
    console.log(i == str);
    console.log(i === str);
</script>
</body>
</html>

3.邏緝語句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
    /* 使用js輸出9x9乘法表 */
    // 外循環(huán)控制行數(shù)
    document.write("<table border='0px' cellspacing='0' cellpadding='4px'")
    for (let i = 1; i <= 9; i++) {
        // 內(nèi)循環(huán)控制列數(shù)
        document.write("<tr align='center'>")
        for (let j = 1; j <= i; j++) {
            document.write("<td>")
            document.write(j + "x" + i + "=" + j * i);
            document.write("</td>")
        }
        document.write("</tr>")
    }
    document.write("</talbe>")
    // if語句與java相同
    // switch語句與java相同
</script>
</body>
</html>

4.函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
    /*
        1.js的函數(shù)分為兩種
            普通函數(shù)方式
                function 函數(shù)名(參數(shù)...){}
            匿名函數(shù)
                事件名 = function(參數(shù)...){}

        2.js的函數(shù)是沒有重載的,同名的函數(shù)會覆蓋前面的 (帶參數(shù)的函數(shù),基本都有點類似java中的可變函數(shù))
        3.函數(shù)聲明時的參數(shù)個數(shù)和函數(shù)調(diào)用時傳入的參數(shù)個數(shù),可以不一樣;
     */
    function add(a, b, c) {
        console.log("arguments數(shù)組中的數(shù)據(jù):" + arguments.length);
        console.log(a + "," + b + "," + c);
        return a + b + c;
    }
    let add1 = add(1,2,3);
    console.log(add1);
    document.write(add1);
    
    let add2 = add(1,2);// 第三個參數(shù)不傳,控制臺打印出的是 undefined;
    console.log(add2);
    document.write(add2);
    
    let add3 = add(1,2,3,4);// 傳入的超過的參數(shù),沒有被處理,結(jié)果與傳入前三個參數(shù)一樣;
    console.log(add3);
    document.write(add3);
</script>
</body>
</html>

5事件

5.1兩種綁定方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<!--
    綁定事件的兩種方式:
        1. 靜態(tài)綁定, 就是直接在標簽上進行綁定
        2. 動太綁定, (匿名函數(shù)方式)使用js代碼進行事件的綁定
-->
<input type="button" value="靜態(tài)綁定按扭" onclick="staticButton(value)">
<input type="button" value="動態(tài)綁定按扭" id="btn">
<script>
    // 靜態(tài)綁定函數(shù)
    function staticButton(a) {
        alert("你想干嘛呢?")
    }

    // 動態(tài)綁定函數(shù)
    let elementById = document.getElementById("btn");
    elementById.onclick = function () {
        alert("你又想干嘛呢?")
    }
</script>
</body>
</html>

5.2常見的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
    /*
        Js中常用的點擊事件
            1. 點擊事件 onclick
            2. 焦點事件 onfocus(獲得焦瞇), onblur(失去焦點)
            3. 頁面加載完畢的事件 onload
            4. 內(nèi)容改變事件, 通常是給下拉框綁定 onchange
            5. 鼠標相關的事件 onmouseover(移入), onmouseout(移出)
            6. 鍵盤相關的事件 onkeydown(按下), onkeyup(抬起)
     */
    // 當瀏覽器加載完畢之后, 再執(zhí)行之個事件里面的代碼, 也就是布局類的標簽代可以不用寫在<script>標簽上面
    window.onload = function () {
        let textID = document.getElementById("text");
        // 給元素綁定事件
        textID.onfocus = function () {
            console.log("獲取到了焦點");
        }
        textID.onblur = function () {
            console.log("失去了焦點");
        }

        let selID = document.getElementById("sel");
        selID.onchange = function () {
            console.log(selID.value);
        }
    }
</script>
<input type="text" id="text">
<select id="sel">
    <option>小魚人</option>
    <option>敵法師</option>
    <option>小娜迦</option>
    <option>大娜迦</option>
    <option>小黑</option>
    <option>幻影刺客</option>
</select>
</body>
</html>

6.內(nèi)置對象

6.1正則對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
    // js中的正則表達式, 與java中的大同小異
    let reg1 = /[a-z]{3}/; // 模糊匹配: 只要你的字符串中出現(xiàn)了三個小寫字母都可以
    let reg2 = /^[a-z]{3}$/; // 精確匹配: 三個小寫的字母
    let b = reg2.test("abc");
    console.log(b);

    // 手機號碼: 以1開頭, 第二位是 3,4,5,6,7,8,9 的11位數(shù)字
    let regPhoneNum = /^1[3456789]\d{9}/;
    let b1 = regPhoneNum.test("13026627164");
    console.log(b1);
</script>
</body>
</html>

常見js正則表達示規(guī)則, 與java基本相同, 可能就是轉(zhuǎn)義方式不一樣

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

6.2數(shù)組對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
    /*
        js中數(shù)組的特點:
            1. 數(shù)組的長度是可變的
            2. 數(shù)組中的元素類型可以是任意類型
     */
    let arr = [1,2,3,4,"a","b"]
    /*for (var i = 0; i < arr.length; i++) {
        //獲取數(shù)組中的每一個元素
        var arrElement = arr[i];
        console.log(arrElement)
    }*/
    arr[6] = true;
    arr[7] = "你好世界"

    //js的數(shù)組里面常用的一些方法:
    //1. concat(),將多個數(shù)組合并成一個數(shù)組
    let strList = ["hello","jay","aoBaMa"]

    // let newArr = arr.concat(strList);
    // for (let i = 0; i < newArr.length; i++) {
    //     let newArrElement = newArr[i];
    //     console.log(newArrElement)
    // }

    //2. join()方法，將數(shù)組中的每一個元素，通過分隔符進行拼接字符串
    let str = arr.join(",");
    console.log(str)

    //3. reverse()方法，反轉(zhuǎn)數(shù)組
    let newArr = arr.reverse();
    for (let i = 0; i < newArr.length; i++) {
        let newArrElement = newArr[i];
        console.log(newArrElement)
    }
</script>
</body>
</html>

6.3日期對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
    //創(chuàng)建當前時間的date
    let date = new Date();
    console.log(date);

    //創(chuàng)建指定年月日的date，注意:月是從0-11
    let date01 = new Date(2020, 6, 11)
    console.log(date01);

    //創(chuàng)建指定年月日時分秒的date
    let date02 = new Date(2020, 6, 11, 23, 11, 50)
    console.log(date02);

    //創(chuàng)建指定時間戳的date，什么是時間戳:格林威治時間從1970年1月1日0時0分0秒到現(xiàn)在的毫秒數(shù)
    //獲取某個時間的時間戳
    let date03 = date.getTime();

    //通過時間戳創(chuàng)建date
    let date04 = new Date(date03 + 60 * 60 * 1000);
    console.log(date04);

    //需求:計算到十一放假還有多少天
    let date5 = new Date(2020,9,1);
    let date6 = new Date(2020,6,9);
    console.log((date5.getTime()-date6.getTime())/1000/60/60/24);

</script>
</body>
</html>

三.BOM (window對象)

JS中的window代表整個瀏覽器, 但是通常window對象可以省略;

1.三種彈窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window對象</title>
</head>
<body>
    <!--
        一、三種彈框
        1. alter()警告框,只能點確定，不點確定頁面就沒法繼續(xù)運行
        2. confirm()確認框,可以點擊確定或者取消，通常用于詢問是否要執(zhí)行某個操作
           這個方法的返回值是boolean類型，如果點擊確定則為true，否則為false
        3. prompt()輸入框,彈出一個可以讓用戶進行輸入的框,這個方法有返回值，返回值
           就是輸入的內(nèi)容，如果點擊取消則返回null
    -->
    <script>
        //1. 警告框
        //window.alert("hello")

        //2. 確認框
        /*let flag = confirm("你確定要刪除嗎?");
        console.log(flag)*/

        //3. 輸入框
        let age = prompt("請輸入你的年齡");

        if (parseInt(age) >= 18) {
            alert("可以訪問")
        } else {
            alert("請大一點了再訪問")
        }
    </script>
</body>
</html>

2.兩種定時方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
<script>
/*
    定時器的話就是隔一段時間執(zhí)行一個任務
        1. setTimeout(), 只執(zhí)行一次,也就相當于是一個延時器
        2. setInterval(), 這個是循環(huán)執(zhí)行的, 也就是真的定時器
            第一個參數(shù)是要執(zhí)行的匿名函數(shù)
            第二個參數(shù)是間隔時間
            該方法的返回值是這個定時器id
 */
    let id = 0;
    // window 對象可省略
    let times = window.setInterval(function () {
        id++;
        if (id>=5){
            // 清除定時器,需要指定清除的是哪一個定時器,也就是 setInterval 函數(shù)的返回值;
            window.clearInterval(times);
        }
        console.log("活是不想活了,死又怕疼,就這么著吧!")
    },3000);
</script>
</body>
</html>

3.history

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location對象</title>
</head>
<body>
   <script>
    // 瀏覽器的后退功能
    // history.back();
    window.history.go(-1);
    // 瀏覽器的前進功能
    // history.forward();
    // window.history.go(1);
</script>
</body>
</html>

4.location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location對象</title>
</head>
<body>
    <script>
        //location對象其實就代表瀏覽器的地址欄
        //location對象的href屬性，就表示地址欄中的地址
        //let href = location.href; //獲取地址欄的地址,用的不多
        //console.log(href)

        //設置地址欄的地址，訪問改地址: 使用js代碼訪問某個地址
        window.location.
    </script>
</body>
</html>

四.DOM (document對象)

1.操作標簽

方法	描述	返回值
`document.getElementById(id)`	根據(jù)id獲取標簽	`Element`對象
`document.getElementsByName(name)`	根據(jù)標簽name獲取一批標簽	`Element`類數(shù)組
`document.getElementsByTagName(tagName)`	根據(jù)標簽名稱獲取一批標簽	`Element`類數(shù)組
`document.getElementsByClassName(className)`	根據(jù)類名獲取一批標簽	`Element`類數(shù)組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<body>
    <div id="d1" name="n1">hello div1</div>
    <div class="c1">hello div2</div>
    <span class="c1">hello span1</span>
    <span name="n1">hello span2</span>
    <script>
        // 1.document.getElementById(id) 示例
        let elementById = document.getElementById("d1");
        console.log(elementById);

        // 2.document.getElementsByName(id) 示例
        let elementsByName = document.getElementsByName("n1");
        // for (let elementsByNameKey in elementsByName) {
        //     console.log(elementsByNameKey)
        // }
        for (let elementsByNameElement of elementsByName) {
            console.log(elementsByNameElement);
        }

        // 3.document.getElementsByTagName(id)
        // 4.document.getElementsByClassName(id)
    </script>
</body>
</html>

2.操作標簽體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
    <div id="city"><h2>北京</h2></div>
    <input type="button" value="改變城市1" placeholder="BJ" onclick="getCity(placeholder) "/>
    <br>
    <br>
    <input type="button" value="改變城市2" placeholder="SZ" onclick="changeCity(placeholder)"/>
<script>
    function getCity(a) {
        let elementById = document.getElementById("city");
        // innerText只能設置純文件
        elementById.innerText = a;
    }

    function changeCity(b) {
        // innerHTML是設標簽里面的所以內(nèi)容,包括子標簽
        let elementById = document.getElementById("city");
        elementById.innerHTML = "<h2>" + b + "</h2>";
    }
</script>
</body>
</html>

3.操作標簽的屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<input id="password" type="password">
<input type="button" value="顯示密碼" onmousedown="showPassword()" onmouseup="unShowPassword()">
<script>
    //需求:按住顯示密碼按鈕的時候，就顯示密碼框中的密碼; 按鍵松開的時候，就隱藏密碼
    let elementById = document.getElementById("password");
    function showPassword() {
        // 操作其 type 屬性
        elementById.setAttribute("type","text");
    }
    function unShowPassword() {
        // 操作其 type 屬性
        elementById.setAttribute("type","password");
    }
</script>
</body>
</html>

五.JS案例

1.表單提交案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<table>
    <tr>
        <td align="left">請輸入帳戶</td>
        <td><input type="text" name="name" onfocus="tips()" onblur="checkName(this.value)"></input>
            <span style="color: red;size: A5" id="username">請輸入4-16個字符,以字母開頭</span>
        </td>
    </tr>
    <tr>
        <td align="left">請輸入電話號碼</td>
        <td><input type="text" name="pv" onfocus="phoneTips()" onblur="checkPhone(this.value)"></input>
            <span style="color: red;size: A5" id="phone">請輸入電話號碼,以1開頭,第2位為3579</span>
        </td>
    </tr>
</table>

<script>
    // 表單校驗賬號密碼
    function tips() {
        console.log("tips這里走了嗎?")
        // input 只能設置 value 不能使用 innerHtml 來設置值
        document.getElementById("username").innerHTML = "請輸入4-16個字符,以字母開頭";
    }

    function checkName(value) {
        console.log("checkName這里走了嗎?")
        let regStr = /^[a-z]\w{3,15}$/;
        let b = regStr.test(value);
        if (b) {
            document.getElementById("username").innerHTML = "帳戶設置ok";
        } else {
            document.getElementById("username").innerHTML = "請輸入4-16個字符,以字母開頭";
        }
    }

    function phoneTips() {
        console.log("phoneTips這里走了嗎?")
        document.getElementById("phone").innerHTML = "請輸入電話號碼,以1開頭,第2位為3579"
    }

    function checkPhone(value) {
        console.log("checkPhone這里走了嗎?")
        let regStr = /^[1][3579]\d{9}$/;
        // let regStr = /^[1][3579][1-9]{9}$/;
        let b = regStr.test(value);
        if (b) {
            document.getElementById("phone").innerHTML = "電話號碼設置ok"
        } else {
            document.getElementById("phone").innerHTML = "請輸入電話號碼,以1開頭,第2位為3579"
        }
    }
</script>
</body>
</html>

2.輪播圖案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<div>
    <img src="../img/banner_1.jpg" id="banner" width="500px">
</div>
<script>
    let banners = ["../img/banner_1.jpg", "../img/banner_2.jpg", "../img/banner_3.jpg"];
    let num = 0;
    setInterval(function () {
        if (num >= 3) {
            num = 0;
        }
        document.getElementById("banner").setAttribute("src", banners[num]);
        num++;
    }, 2000);
</script>
</body>
</html>

3.省市二級聯(lián)動案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS學習</title>
</head>
<select id="province">
    <option value="0">請選擇省份</option>
    <option value="1">廣東省</option>
    <option value="2">湖北省</option>
    <option value="3">湖南省</option>
</select>
<select id="city">
    <option>請選擇城市</option>
</select>
<script>
    let city = [
        [],
        ["廣州", "深圳", "佛山"],
        ["武漢", "荊州", "襄陽"],
        ["長沙", "常德", "鳳凰"]
    ];
    // 獲取顯示省份的元素
    let provinceElement = document.getElementById("province");
    // 獲取顯示市的元素
    let citySelect = document.getElementById("city");

    provinceElement.onchange = function () {
        // 獲取省對應下的市級列表
        let value = provinceElement.value;
        let cityNames = city[value];

        // 遍歷添加之前，先清除城市下拉框中的所有option
        citySelect.innerHTML = "<option>請選擇城市</option>"
        for (let cityName  of cityNames) {
            let optionElement = document.createElement("option");
            optionElement.innerHTML = cityName;
            citySelect.appendChild(optionElement);
        }
    };
</script>
</body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JS筆記

JS筆記

一.JS簡介

1.什么是JS

2.JS的組成

3.JS的作用

4.JS與java的對比

5.JS的引入方式

二.ECMAScript

1.JS中的變量與數(shù)據(jù)類型

2.運算符

3.邏緝語句

4.函數(shù)

5事件

5.1兩種綁定方式

5.2常見的事件

6.內(nèi)置對象

6.1正則對象

6.2數(shù)組對象

6.3日期對象

三.BOM (window對象)

1.三種彈窗

2.兩種定時方式

3.history

4.location

四.DOM (document對象)

1.操作標簽

2.操作標簽體

3.操作標簽的屬性

五.JS案例

1.表單提交案例

2.輪播圖案例

3.省市二級聯(lián)動案例

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JS筆記

一.JS簡介

1.什么是JS

2.JS的組成

3.JS的作用

4.JS與java的對比

5.JS的引入方式

二.ECMAScript

1.JS中的變量與數(shù)據(jù)類型

2.運算符

3.邏緝語句

4.函數(shù)

5事件

5.1兩種綁定方式

5.2常見的事件

6.內(nèi)置對象

6.1正則對象

6.2數(shù)組對象

6.3日期對象

三.BOM (window對象)

1.三種彈窗

2.兩種定時方式

3.history

4.location

四.DOM (document對象)

1.操作標簽

2.操作標簽體

3.操作標簽的屬性

五.JS案例

1.表單提交案例

2.輪播圖案例

3.省市二級聯(lián)動案例

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av