JavaScript

最后更新时间：2022年07月03日

day7-JavaScript

JavaScript

什么是JavaScript？

  • JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互。

  • W3C标准：网页主要由三部分组成

    • 结构：HTML
    • 表现：CSS
    • 行为：JavaScript

JavaScript演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<h2>JavaScript 能做什么</h2>

<p id="demo">JavaScript 能够改变 HTML 内容</p>
<input type="button" onclick='changeText()' value="点击我">
<hr>
<p>JavaScript 能改变图像的 src 属性值</p>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<hr>


<p>JavaScript 能够进行表单验证</p>
用户名：<input id="username" onblur="check()" placeholder="请设置用户名（6~12位）">
<span id="msg" style="color: red"></span>
<hr>


<script>
    function changeText(){
        document.getElementById("demo").innerHTML = "Hello JavaScript!"
    }

    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }

    function check(){
        var username = document.getElementById('username').value;
        var reg = /^\w{6,12}$/;
        var msg = document.getElementById('msg');
        if (reg.test(username)){
            msg.innerHTML = "<img src='../imgs/gou.png'  width='25' height='15'  />";
        }else {
            msg.innerHTML = "用户名格式有误！";
        }
    }

</script>

</body>
</html>

JavaScript引入方式

  • 内部脚本：将JS代码定义在HTML页面中。
  • 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中。

内部脚本

  • 将JS代码定义在HTML页面中。
  • 在HTML中，JavaScript代码必须位于<script>与</script>标签之间。

实例

  • alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

提示：

  • 在HTML文档中可以在任意地方，放置任意数量的<script>。
  • 一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示。

外部脚本

  • 将JS代码定义在外部JS文件中，然后引入到HTML页面中。

  • 外部文件: demo.js

    alert("helloJS~");

  • 引入外部js文件

    <script src=" ../js/demo.js"></script>

注意：

  • 外部脚本不能包含<script>标签
  • <script>标签不能自闭合

实例（包含内部引入方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<script>
    alert("hello js1");
</script>-->
<script src="../js/demo.js"></script>
</body>
</html>

JavaScript基础语法

书写语法

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。
  • 每行结尾的分号可有可无。
  • 如果一行上写多个语句时，必须加分号用来区分多个语句。

注释

* 单行注释：// 注释内容
* 多行注释：/* 注释内容 */
  • 注意：JavaScript 没有文档注释
  • 大括号表示代码块

实例

if (count == 3) {
alert(count);
}

输出语句

实例

<script>
    window.alert("hello js~");//写入警告框

    document.write("hello js 2~");//写入html页面

    console.log("hello js 3");//写入浏览器的控制台
</script>

变量

  • JavaScript 中用 var 关键字（variable 的缩写）来声明变量。
  • 格式 var 变量名 = 数据值;。
  • 而在JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数。

实例

var test = 20;
test = "张三";

js 中的变量名命名有如下规则：

  • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
  • 数字不能开头
  • 建议使用驼峰命名

其他

  • ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
  • ECMAScript 6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型

var test = 20;

JavaScript中分为：原始类型和引用类型

5种原始类型：

* number：数字（整数、小数、NaN(Not a Number))
* string：字符、字符串，单双引皆可
* boolean：布尔。true，false
* null：对象为空
* undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

alert(typeof age);

实例

<script>
    number
    var age = 20;
    var price = 99.8;
    alert(typeof age);
    alert(typeof price);

   string
    var ch = 'a';
    var name = '张三';
    var addr = "北京";
   
    alert(typeof ch);
    alert(typeof name);
    alert(typeof addr);
   
   boolean
    var flag = true;
    var flag2 = false;
   
    alert(typeof flag);
    alert(typeof flag2);
   
   null
    var obj = null;
   
    alert(typeof obj);//object
   
   undefined
    var a ;
    alert(typeof a);

</script>

运算符

实例

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


<script>
    /*
        ==:
            1. 判断类型是否一样，如果不一样，则进行类型转换
            2. 再去比较其值

        ===:全等于
            1. 判断类型是否一样，如果不一样，直接返回false
            2. 再去比较其值

     */
    var age1 = 20;
    var age2 = "20";

    // alert(age1 == age2);// true
    // alert(age1 === age2);// false

    /*
        类型转换：
            * 其他类型转为number：
                1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt
                2. boolean: true 转为1，false转为0

            * 其他类型转为boolean：
                1. number:0和NaN转为false，其他的数字转为true
                2. string:空字符串转为false，其他的字符串转为true
                3. null:false
                4. undefined:false


     */
    // var str = +"20";
    /*var str = "20";
    alert(parseInt(str) + 1);*/

/*
    var flag = +false;
    alert(flag);*/

    // var flag = 3;
    // var flag = "";
 /*   var flag = undefined;

    if(flag){
        alert("转为true");
    }else {
        alert("转为false");
    }*/

    var str = "abc";

    //健壮性判断
    //if(str != null && str.length > 0){
    if(str){
        alert("转为true");
    }else {
        alert("转为false");
    }

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

总结

流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句。

* if 
* switch
* for
* while
* do...while

实例

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

    //1. if
    var count = 3;
    if (count == 3) {
        alert(count);
    }



    //2. switch
    var num = 3;
    switch (num) {
        case 1: {
            alert("星期一");
            break;
        }

        case 2: {
            alert("星期二");
            break;
        }

        case 3: {
            alert("星期三");
            break;
        }

        case 4: {
            alert("星期四");
            break;
        }

        case 5: {
            alert("星期五");
            break;
        }

        case 6: {
            alert("星期六");
            break;
        }

        case 7: {
            alert("星期日");
            break;
        }


        default: {
            alert("输入的星期有误");
            break;
        }
    }



    // 3. for


    var sum = 0;
    for (let i = 1; i <= 100; i++) {
        sum += i;
    }
    alert(sum);



    // 4. while

    var sum = 0;
    var i = 1;
    while (i <= 100) {
        sum += i;
        i++;
    }
    alert(sum);


    // 5. do...while

    var sum = 0;
    var i = 1;
    do {
        sum += i;
        i++;
    }
    while (i <= 100);
    alert(sum);


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

函数

  • 函数（就是Java中的方法）是被设计为执行特定任务的代码块；
  • JavaScript 函数通过 function 关键词进行定义。

实例（定义方式一）

function 函数名(参数1,参数2..){
    要执行的代码
}

注意：

  • 形式参数不需要类型。因为JavaScript是弱类型语言
  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
  • 调用：函数名称(实际参数列表);

实例（定义方式二）

实例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
   function add(a,b){
       return a + b;
   }


   var result = add(1,2);

   alert(result);

   var add = function (a,b){
       return a + b;
   }

   var result = add(1,2);

   var result1 = add(1,2,3);
   alert(result1)

   var result2 = add(1);
   alert(result2);

   alert(result);

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

JavaScript常用对象

Array

  • JavaScript Array对象用于定义数组。
  • 注意：JS数组类似于Java集合，长度，类型都可变。

实例

<script>
    // 方式一
    var arr = new Array(1,2,3);

    alert(arr);

    // 方式二
    var arr2 = [1,2,3];
    alert(arr2);

    // 访问
    arr2[0] = 10;
    alert(arr2)


    // 特点：JavaScript数组相当于Java中集合。变长变类型

    // 变长
    var arr3 = [1,2,3];
    arr3[10] = 10;
    alert(arr3[10]);
    alert(arr3[9]);

    // 变类型
    arr3[5] = "hello";
alert(arr3[5]);
alert(arr3);


    // 属性：length：数组中元素的个数
    var arr4 = [1,2,3];

    for (let i = 0; i < arr4.length; i++) {
        alert(arr4[i]);
    }

    // 方法：
    // push:添加方法
    var arr5 = [1,2,3];
   arr5.push(10);
    alert(arr5);

    // splice:删除元素
    arr5.splice(0,1);
    alert(arr5);

</script>

String

定义

属性

方法

实例

<script>
    //方式一
    var str1 = new String("abc");
    //方式二
    var str2 = "abc";
    var str3 = 'abc';


    //length
    alert(str3.length);

    //trim():去除字符串前后两端的空白字符

    var str4 = '  abc   ';

    alert(1 + str4.trim() + 1);

</script>

自定义对象

格式

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
    ...
};

实例

var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
        }
    };


alert(person.name);  //zhangsan
alert(person.age); //23

person.eat();  //干饭~

BOM

  • （Browser Object Model）浏览器对象模型
  • JavaScript将浏览器的各个组成部分封装为对象

组成

* Window：浏览器窗口对象
* Navigator：浏览器对象
* Screen：屏幕对象
* History：历史记录对象
* Location：地址栏对象

Window

实例

<script>

    // alert
    window.alert("abc");
    alert("bbb");

    // confirm，点击确定按钮，返回true，点击取消按钮，返回false
    var flag = confirm("确认删除？");
    alert(flag);

    if(flag){
       //删除逻辑
    }


    // 定时器

    
        setTimeout(function,毫秒值): 在一定的时间间隔后执行一个function，只执行一次

        setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
     

   setTimeout(function (){
        alert("hehe");
    },3000);

    setInterval(function (){
        alert("hehe");
    },2000);

</script>

BOM案例（定时切换图片）

实例（定时切换图片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">

<script>

    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }
    var x = 0;

    // 根据一个变化的数字，产生固定个数的值； 2  x % 2     3   x % 3
    //定时器
    setInterval(function (){

        if(x % 2 == 0){
            on();
        }else {
            off();
        }

        x ++;

    },1000);

</script>

</body>
</html>

History

  • History：历史记录
  • 获取：使用window.history获取，其中window.可以省略

Location

  • Location：地址栏对象
  • 获取：使用window.location获取，其中window.可以省略

实例

<script>

    alert("要跳转了");
    location.href = "https://www.baidu.com";

    //3秒跳转到首页

    document.write("3秒跳转到首页...");
    setTimeout(function (){
        location.href = "https://www.baidu.com"
    },3000);

</script>

DOM

  • （Document Object Model）文档对象模型

  • 将标记语言的各个组成部分封装为对象

    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作了

  • 改变HTML元素的内容
  • 改变HTML元素的样式(css)
  • 对HTML DOM事件作出反应
  • 添加和删除HTML元素

DOM定义了访问HTML和XML文档的标准

W3C DOM标准被分为3个不同的部分

获取Element

实例

<script>
    /*
    获取：使用Document对象的方法来获取
        * getElementById：根据id属性值获取，返回一个Element对象
        * getElementsByTagName：根据标签名称获取，返回Element对象数组
        * getElementsByName：根据name属性值获取，返回Element对象数组
        * getElementsByClassName：根据class属性值获取，返回Element对象数组

     */

    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    alert(img);

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组

    var divs = document.getElementsByTagName("div");
    alert(divs.length);
   for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);

    }

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组

    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }

</script>

常见HTML Element对象的使用

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    // alert(img);
    img.src = "../imgs/on.gif";

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    /*
        style:设置元素css样式
        innerHTML：设置元素内容
    */

    for (let i = 0; i < divs.length; i++) {
        //divs[i].style.color = 'red';
        divs[i].innerHTML = "呵呵";
    }

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        //alert(hobbys[i]);
        hobbys[i].checked = true;
    }

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组

    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }

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

事件监听

事件

  • HTML事件是发生在HTML元素上的“事情”。
  • 比如：按钮被点击、鼠标移动到元素之上、按下键盘按键

事件监听

  • JavaScript可以在事件被侦测到时执行代码。

事件绑定

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">


<script>

    function on(){
        alert("我被点了");
    }


    document.getElementById("btn").onclick = function (){
        alert("我被点了");
    }


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

常见事件

实例

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

<form id="register" action="#" >
    <input type="text" name="username" />

    <input type="submit" value="提交">
</form>

<script>
    document.getElementById("register").onsubmit = function (){
        //onsubmit 返回true，则表单会被提交，返回false，则表单不提交
        return true;
    }
</script>

</body>
</html>

案例-表单验证

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>

    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 获取用户输入的用户名
        var username = usernameInput.value.trim();

        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);

        //var flag = username.length >= 6 && username.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("username_err").style.display = '';
        }

        return flag;
    }


    //1. 验证密码是否符合规则
    //1.1 获取密码的输入框
    var passwordInput = document.getElementById("password");

    //1.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 获取用户输入的密码
        var password = passwordInput.value.trim();

        //1.4 判断密码是否符合规则：长度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);

        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("password_err").style.display = '';
        }

        return flag;
    }


    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();

        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1

        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        }

        return flag;
    }


    //1. 获取表单对象
    var regForm = document.getElementById("reg-form");

    //2. 绑定onsubmit 事件
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }

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

正则表达式

实例（在上面的表单验证案例里也有）

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

<script>

    // 规则：单词字符，6~12

    var reg = /^\w{6,12}$/;

    var str = "abcccc";

    var flag = reg.test(str);
    alert(flag);
</script>
</body>
</html>

声明：三二一的一的二|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - JavaScript

三二一的一的二