十四、JavaScript（1）

最新推荐文章于 2025-09-03 08:17:17 发布
原创 最新推荐文章于 2025-09-03 08:17:17 发布 · 187 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #javascript #java

本文全面介绍了JavaScript的基础知识，涵盖JavaScript概述、ECMAScript标准、DOM与BOM对象等内容，适合初学者快速入门。

文章目录

1 JavaScript的概述

1.1 什么是 JavaScript js

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript的组成部分：

  • ECMAScript（规定语法）：描述了JS的语法和基本对象
  • 文档对象模型（DOM）：描述与处理网页内容的方法和接口。
  • 浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。

1.2 JavaScript的用途

  1. 嵌入动态文本于HTML页面。
  2. 对浏览器事件做出响应。
  3. 读写HTML元素
  4. 在数据被提交到服务器之前验证数据。
  5. 检测访客的浏览器信息。
  6. 控制cookies，包括创建和修改等。
  7. ajax异步请求

1.3 JavaScript的引入方式（两种方式）

在HTML文件中引入JavaScript有两种方式

  • 一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式
  • 另一种是链接外部JavaScript脚本文件，称为外联式。

内嵌式，在HTML文档中，通过<script>标签引入，如下

<script type="text/javascript">
	//此处为JavaScript代码
</script>

外联式，在HTML文档中，通过<script src="">标签引入.js文件，如下：

<script src="1.js" type="text/javascript" ></script>

注意：如果在script标签,使用src引入了一个文件，那么当前js标签内的代码全部作废 ,不运行

2 ECMA标准（基本语法）

JS的语法规则：

  • JS严格区分大小写
  • 语句需要使用分号结尾
  • JS中的命名规则， 按照Java的标识符
  • JS中的关键字不能用来命名使用， 如 function

2.1 变量

JS是弱类型语言，Java是强制类型语言

弱类型，并不是没有数据类型，而是定义变量时不需要明确类型。

  • JS变量定义，关键字var； 格式：var 变量名 = 值;
var 变量名 = 值;	
//JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据
//JavaScript变量可以不声明，直接使用。默认值：undefined

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS的变量</title>
    <script type="text/javascript">
        /**
         *  JS语言,是弱类型语言 (PHP,Python)  定义变量,无需数据类型
         *  Java语言,强制类型语言 ,变量被定义,必须指明属性类型
         *
         *  js定义变量时候,使用关键字 var
         *
         *  对象 console.log(参数) 参数打印在控制台
         *  不是所有的浏览器都有控制台  FF Chrome 苹果有 IE9以上
         */

        var num = 1;
        console.log(num);
        var str = "abc";
        console.log(str);
        var bool = true;
        console.log(bool);

        var d ;
        console.log(d);

    </script>
</head>
<body>

</body>
</html>

2.2 数据类型

  • 数字类型 number: 表示任意数字
  • 布尔类型 boolean: 有两个值 true 和 false
  • 字符串类型 string: 字符串由双引号（"）或单引号（’）声明的。JavaScript 没有字符类型，都是字符串，所以单双引号都可以
  • 引用类型 object: 表示JS中的引用类型
    • 空值 Null ,只有一个专用值 null，表示空，属于object类型。
    • 值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
  • 未初始化 undefined: 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

写程序, 使用JS关键字 typeof(变量) 显示出变量的类型

<script type="text/javascript">
    var num = 123;
    alert( typeof(num) ); //number

    var b = true;
    alert( typeof(b) ); //boolean

    var str = "hello";
    alert( typeof(str) ); //string

    var date = new Date(); 
    alert( typeof(date) ); //object

    var n = null;
    alert( typeof(n)); // objcet

    var u;
    alert( typeof(u)); //undefined


    // 值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
    alert(undefined == null); // true
</script>

2.3 JS的三种输出方式

  • window.alert(”)，弹框效果，window可省略。弹出比较突然，用户的体验不好，基本用来测试代码使用
<script type="text/javascript"> 
    /*
     * window.alert()  把小括号里的内容，以弹窗的方式显示出来
     * window是BOM对象，指的是整个浏览器，可以省略不写
     */
    window.alert('浏览器弹框显示');
    alert("浏览器弹框显示");
</script>
  • console系列，会在控制台（一般使用F12键打开）输出内容，开发时会经常使用
<script>
    console.log('控制台.日志()');
    console.warn('控制台.警告()');
    console.error('控制台.错误()');
</script>
  • document.write()，直接在页面上输出内容
<script>
    /*
     * document 指的是我们所写的HTML文档
     * write() 把小括号里的内容输出到页面上
     */
    document.write('页面显示内容');
</script>

2.4 运算符

算术运算符 | 赋值运算符 | 比较运算符 | 逻辑运算符

JavaScript运算符与Java运算符基本一致。

  • 算术运算符：+ ，- ，* ，/ ，% ，++ ，–
  • 赋值运算符：= ，+= ，-= ，*= ，/=，%=
  • 比较运算符：== ，=== ，!= ，> ，<，>=，<=
  • 逻辑运算符：&& ， || ，!

代码演示：

  • +字符串连接， 减， 乘，除
  • ==与===的区别
<script type="text/javascript">
    // + 加法做的是字符串连接（同java）
    // 将字符串转数字，再运算：减， 乘，除
    var num = "5";
    console.log(num + "2"); //52
    console.log(num - 2); // 3
    console.log(num * 2); // 10
    console.log(num / 2); // 2.5

    /*
	==与===的区别
	==运算符： 只比较值是否相等，值相等 就为 true
	===运算符：比较值与数据类型是否都相等，都相等就为 true
	*/
    if(5 === "5"){
        console.log("相等");
    } else {
        console.log("不相等");
    }
</script>

boolean布尔类型运算

JS中的布尔类型运算 与 java不同：

  • 数字类型：非0 就是true
  • 字符串类型：非空（“”） 就是true，即：长度>0 就是true
  • 0、 null、 undefined、“” 等 需要理解成 false
<script type="text/javascript">
    // var b = 1;
    var b = "hello";
    if(b){
        console.log("真的");
    } else {
        console.log("假的");
    }
</script>

2.5 JS的流程控制语句

JS的流程控制语句 与 java一样。

js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致，此处不再一一阐述。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS中的循环</title>

    <script type="text/javascript">
        /**
         * 循环变量,不能是int,写var
         */
        for(var i = 0 ; i < 5 ;i++){
            console.log("hello");
        }
    </script>
</head>
<body>

</body>
</html>

2.6 函数（重要）

js的函数： 就是方法， 是js非常重要的组成部分，js最常用的函数的定义方式有两种：普通函数和匿名函数
1 普通函数

* 函数定义:
*   function 函数名(){}
*   函数定义上,参数不能写var
*   函数可以有返回值,也可以没有
*   需要返回值,在函数内使用return即可
*
* JS中的函数没有重载概念
* 遇到相同名字的函数,直接覆盖!!

<script type="text/javascript">
    function sum( a, b) {
       // console.log(a+b);
        return a+b;
    }

    function sum(a,b,c) {
        console.log("参数是abc");
    }

    //函数调用：函数名(实际参数);
    var a = sum(5,6);
    console.log(a);

</script>

2 匿名函数

* 匿名函数,函数没有名字
* 定义格式 :
*   function(){}
*
*  1: 免去了定义名字的烦恼
*  2: 函数可以当作参数被传递

匿名函数没有办法直接调用，一般情况下结合事件使用：

//定义函数并赋值给变量：
var fn = function(参数列表){
    js逻辑代码
}
//调用函数：fn(实际参数);

例如：求和输出的函数

<script type="text/javascript">
	//定义匿名函数并赋值给变量
    var fn = function(a, b){
        console.log(a+b);
    }
    //通过变量名调用函数
    fn(5,8);

</script>

2.7 事件（重要）

事件概述

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

  • 鼠标点击
  • 页面或图像载入
  • 鼠标悬浮于页面的某个元素之上
  • 在表单中选取输入框
  • 提交表单
  • 键盘按键

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

常用的事件

事件名描述
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件—注意事件源是表单form
onclick鼠标点击某个对象
ondblclick鼠标双击某个对象
onblur元素失去焦点
onfocus元素获得焦点
onchange用户改变域的内容
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onmousedown某个鼠标按键被按下
onmouseup某个鼠标按键被松开
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开
onmousemove鼠标被移动

js事件的四个组成部分

  • 事件源：发生事件的主体,HTML页面,很多元素都可以是事件源，按钮,提交,图片,超链接,浏览器, 用户能操作的。
  • 事件：用户怎么操作的事件源，例如：鼠标(点击,双击,悬浮,离开), 键盘操作(按下,弹起)
  • 监听器：窃听器(声音),针孔摄像头(声音,图像)
    • 为事件源 安装监听器, 鼠标监听器、键盘监听器
    • 只要有操作,就会被监听器捕获到,有对应的处理方式
    • 监听器会自动调用处理方式
  • 处理方式： 监听器捕捉到事件后,调用函数进行处理
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 匿名函数
			window.onload = function(){
				alert("页面加载完成");
			}
		
			function fn(){
				console.log("呀呀呀~~ 疼");
			}
			
			function fn_blur(){
				console.log("失去焦点");
			}
		</script>
	</head>
	<body>
		<!--
		 事件代码编写的步骤：
			1. 为标签 绑定事件监听器(鼠标点击)，添加属性 οnclick="函数名()"
			2. 编写js函数 fn()
			3. 访问浏览器页面，用户点击绑定了事件的标签，进行了事件发送--被监听器捕获--调用JS函数处理事件
		 -->
		<input type="button" value="点我点我" onclick="fn()"/>
		
		<input type="text" placeholder="请输入内容" onblur="fn_blur()" />
	</body>
</html>

3 DOM对象

3.1 什么是DOM

DOM：Document Object Model 文档对象模型，定义了访问和处理 HTML 文档的标准方法。

DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

<html>
	<head>
		<title>文档标题</title>
	</head>
	<body>
		<a href="#">我的链接</a>
		<h1>我的标题</h1>
	</body>
</html>

在这里插入图片描述
要改变页面的某个元素，就需要获得对 HTML 文档中所有元素进行访问的入口。访问入口 通过文档对象模型（DOM）获得，DOM提供了 HTML 元素进行添加、移动、改变或移除的方法和属性。

3.2 DOM文档对象的API

浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素。

元素的操作 Document

  • 元素的获取
    • 根据id获得一个元素：getElementById(id属性值)
    • 根据标签名称获得多个元素：getElementsByTagName(标签名称)
    • 根据name属性获得多个元素：getElementsByName(name属性值)
    • 根据class属性获得多个元素：getElementsByClassName(class属性值)

元素的操作 Element

  • 元素的获取
    • 获取当前元素父节点元素：parentElement
  • 元素的添加、移除、移动(替换)、克隆、
    • 判断当前元素是否有子节点元素：hasChildNodes()
    • 删除当前元素的子节点元素：removeChild(子元素)
    • 替换当前元素的子节点元素：replaceChild(新节点, 旧节点)
    • 克隆当前元素节点：cloneNode(boolean值是否同时克隆子节点)
    • 创建一个新节点元素：createElement(标签名)
    • 添加当前元素的子节点元素(在所有子元素末尾添加)：appendChild(子元素)
    • 插入当前元素的新子节点元素(在指定的子元素前面 插入新元素)：insertBefore(新元素, 原有子元素)

属性的操作 Attribute

  • 获取某个属性：元素.属性名
  • 获得属性的值：getAtrribute(属性名)
  • 设置属性的值：setAtrribute(属性名, 属性值)
  • 删除某个属性：removeAtrribute(属性名)
  • 设置标签样式：属性 style

文本的操作 Text

  • 获取某个属性：元素.属性名

  • 标签体的获取与设置

    • 识别自动解析HTML标签：innerHTML
    • 不识别HTML标签，纯文本输出： innerText

3.3 案例：表单用户名验证

案例需求：
提交表单时，判断用户名文本框是否填写了内容；若没填写内容 给出提示 并 取消表单向服务器提交数据。

案例分析：

为表单添加表单提交事件onsubmit，根据是否填写用户名，来决定是否提交表单数据到服务器
	为表单添加提交的事件onsubmit，事件源固定为form标签；事件onsubmit接收函数返回值boolean
	true：表单会提交数据到服务器
	false：表单不提交 
编写函数，获取填写的用户名，返回用户名是否为空 boolean
	true：说明用户名为空，为span标签设置显示值提醒“用户名必须填写”，设置不提交表单
	false：说明用户名不为空，设置提交表单

案例实现：
步骤一，为表单添加提交事件onsubmit；添加span标签指定id；为“用户名”文本框指定id

<form action="#" method="get" onsubmit="return fn()" >
    <table align="center">
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="user" placeholder="请输入用户名" id="user"></td>
            <td><span id="userMsg"></span></td>
        </tr>
        <tr>
            <td>密　码:</td>
            <td><input type="password" name="pass" placeholder="请输入密码"/></td>
            <td></td>
        </tr>
        <tr align="center">
            <td colspan="3"><input type="submit" value="注册"/></td>
        </tr>
    </table>
</form>

步骤二，编写js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 判断表单是否可以提交: 返回true 提交; 返回false false
        function fn() {
            var flag = false;
            // 1 校验用户名是必填项
            // 1.1 获取用户名标签对象
            var userObj = document.getElementById("user");
            // 1.2 获取用户填写的用户名的值
            var userObjVal = userObj.value;
            // 1.3 判断
            if(userObjVal==null || userObjVal.trim()=='') {
                // 如果为空, 提示错误信息
                var userMsgObj = document.getElementById("userMsg");
                userMsgObj.innerHTML = "用户名是必填项!";
                userMsgObj.style.color = "red";
                userMsgObj.style.fontSize = "20px";
            }else {
                // 如果不为空, 修改flag=true,提交表单
                flag = true;
            }
            return flag;
        }
    </script>
</head>
<body>
    <form action="../07.html" method="get" onsubmit="return fn()" >
        <table align="center">
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="user" placeholder="请输入用户名" id="user"></td>
                <td><span id="userMsg"></span></td>
            </tr>
            <tr>
                <td>密　码:</td>
                <td><input type="password" name="pass" placeholder="请输入密码"/></td>
                <td></td>
            </tr>
            <tr align="center">
                <td colspan="3"><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

4 内置对象

JS的对象也分为内置对象和自定义对象

  • 例如，Java中Object、String、System属于内置对象
  • 例如，自定义的Person、Student属于自定义的对象。

4.1 顶层函数（全局函数）

parseInt() 方法：parseInt() 函数可解析一个字符串，并返回一个整数。

var value = parseInt(string)

parseFloat() 函数：可解析一个字符串，并返回一个浮点数。

var value = parseFloat(string)

提示：该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止.

提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。Not a Number

提示：如果只想解析数字的整数部分，请使用 parseInt() 方法。

代码演示:

<script type="text/javascript">

    var num = parseFloat("10.33");
    console.log(num); //10.33
    console.log(typeof(num)); // number

    num = parseFloat("10.33hello");
    console.log(num); //10.33
    console.log(typeof(num)); // number

    num = parseFloat("hello10.33");
    console.log(num); //NaN
    console.log(typeof(num)); // number

    var num = parseInt("10.33hello");
    console.log(num); //10
    console.log(typeof(num)); // number
</script>

4.2 JS内置对象 String

String 对象用于处理文本（字符串）。

String 对象属性

属性描述
length字符串的长度

String 对象方法

方法描述
charAt(index)传递索引,返回字符
indexOf(x)传递字符串,返回第一次出现的索引,找不到返回-1
substring(startIndex, endIndex)截取字符串,包含开始索引,不包含结束索引
substr(startIndex, count)截取字符串,包含开始索引,后面的参数是要几个

案例：

<script type="text/javascript">
    /**
     * 字符串对象创建方法
     * var str = "";
     */

    //字符串长度 length属性,Java使用的是length()

    var str = "HelloWorld";
    console.log(str.length);

    //截取字符串 substring(开始索引,结束索引) 包含开头,不包含结尾
    console.log( str.substring(1,5) );

    //截取字符串 substr(开始索引,截取的个数)
    console.log( str.substr(1,7));

    console.log( str.charAt(25));
</script>

4.3 JS内置对象 Date

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate = new Date();

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date 对象方法

方法描述
getFullYear()从 Date 对象以四位数字返回年份。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getTime()返回 1970 年 1 月 1 日至今的毫秒数。
toLocaleString()根据本地时间格式，把 Date 对象转换为字符串。

案例：

<script type="text/javascript">
    /**
     * 日期对象 Date
     * 关键字 new创建对象
     */
    var date = new Date();
    //console.log(date);

    console.log( date.getFullYear()+"年" +(date.getMonth()+1)+"月"+date.getDate()+"日 "+
        date.getHours()+"点"+date.getMinutes()+"分"+date.getSeconds()+"秒"+date.getMilliseconds()+"毫秒");

    console.log(date.getTime()); // 1970年的毫米至
</script>

4.4 JS内置对象 Math

Math是数学计算的对象,此对象无需创建,直接Math.调用

Math 对象方法

方法描述
ceil(x)向上取整
floor(x)向下取整
round(x)把数四舍五入为最接近的整数。
random()随机数,返回的是小数范围 0.0-1.0之间,可能是0.0,不会到1.0
pow(x,y)幂运算 pow(2,3) ,代表2的3次方

案例：

 <script type="text/javascript">
     /**
      *  内置对象Math,数学计算
      *  使用方法,和Java一模一样
      *  Math对象名.方法()
      */

     //圆周率
     console.log( Math.PI );

     //随机数 范围0-0 -- 1.0之间的随机数,可能是0.0,不会到1.0
     for(var i=0;i<10;i++)
     console.log( Math.random());

     //平方根
     console.log( Math.sqrt(-4) );
 </script>

4.5 JS内置对象 Array(重点)

Array 对象，就是JS数组，用于存储多个值，存储的元素类型可以是任意类型。

创建 Array 对象的语法

var arr1 = new Array();
var arr2 = new Array(size);
var arr3 = new Array(element0, element0, ..., elementn);
var arr4 = [1,2,3,4,"a","b","c"]; // 重点

参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

Array 对象属性

属性描述
length返回数组中元素的数目。

案例：

<script type="text/javascript">
    /**
     * JS内置对象数组
     * 是JS唯一容器
     *
     *  new Array();  创建空的数组 int[] arr = {}
        new Array(size); 创建指定长度的数组 int[] arr = new int[3]
        new Array(element0, element1, ..., elementn); 创建数组,同时存储元素  int[] arr = {1,2,3,4}
     */

  /*  var arr1 = new Array();
    console.log(arr1);

    var  arr2 = new Array(5);
    console.log(arr2);

    var arr3 = new Array(1,2,3,4,5,6);
    console.log(arr3);*/

  //JS数组可以随便存储数据 ,无限制
    //数组可变长度数组
    var arr4 = new Array("a",1,2,3,true);
    arr4[5] = "qq";
    arr4[9] = "xixi";
    // console.log(arr4);

    //数组创建,直接赋值方式
    var arr5 = [1,2,3,4,5,1.5,true,"hehe"];
    for(var i=0;i<arr5.length;i++){
        console.log(arr5[i]);
    }

   /* for(var a in arr5){
        console.log(arr5[a]);
    }*/

   //二维数组
    //一个二维数组中,存储了多个一维数组
   var  arr6 = [ [1,2,3],[4,5,6],[7,8,9,0] ];
   for(var i=0;i<arr6.length;i++){
       for(var j=0; j<arr6[i].length;j++){
           console.log(arr6[i][j]);
       }
   }

</script>

4.6 JS内置对象 RegExp正则表达式(重点)

RegExp 对象表示正则表达式：

  • 正则表达式意义: 对复杂字符串进行处理的技术
    • 正则表达式的本质：是一种规则, 实现了字符串和规则进行匹配,若匹配成功 返回true。

创建正则表达式对象的语法

方式一：

var reg = /pattern/; //JS中,定义正则表达式规则 写在`//`之间

方式二：

var reg = new RegExp(pattern); //JS中,定义正则表达式规则 写在()之内

写正则表达式的规则

表达式描述
[a-z]这个字符必须是小写字母
[abc]字符必须是abc
[0-9]这个字符必须是数字
[a-zA-Z0-9]这个字符必须是字母或者是数字
[^a-z]这个字符不是小写字母
[\d]等同于[0-9]
[\w]等同于[a-zA-Z_0-9] 字母、数字、下划线
[\D]等同于[^0-9]
[\W]等同于[^a-zA-Z0-9_]
.代表匹配任意字符， 若只是想代表普通数据. 需要使用转义字符来表示\.
X*X这个字符可以出现零次或者多次 [0-9]* 123123456
X?X这个字符可以出现零次或者一次 [0-9]? 2
X+X这个字符可以出现一次或者多次 [0-9]+ 2 12345678
X{m}X这个字符出现次数正好m次 [0-9]{4} 1234 1234567865432456
X{m, }X这个字符出现次数至少m次 [0-9]{4, } 1234 12345678
X{m, n}X这个字符出现次数至少m次,最多n次 [0-9]{3,5} 123 12345 12 1234567876534
(X)+()括号代表X所表示的内容作为一组数据出现；()括号后面的+号，代表这组数据可以出现一次或者多次 (.[a-z]+) + .com .cn .cn.cn.cn.cn.com.itsad
^X^匹配开头
X$$匹配结尾

RegExp 对象方法

方法描述
test()检索字符串中指定的值。返回 true 或 false。

案例：

<script type="text/javascript">
   /**
    * Java中的正则
    *  String str = "13800138000"
    *  String reg ="1[345678][0-9]{9}";
    *
    *  boolean b  str.matches(reg);
    *
    *  定义正则规则
    *  var 变量名 = /正则规则/;
    */

   var tel = "13800138000abc";
   var telReg = /^1[345678][0-9]{9}$/;
   //使用正则表达式对象,函数test(字符串)
   var bool = telReg.test(tel);
   console.log("手机号验证:"+bool)

   /*
   *  验证用户名:
   *   长度6-8 可包含字母,数字
   * */
   var username = "tomjerr#";
   var userReg = /^[0-9a-z]{6,8}$/;
   bool = userReg.test(username);
   console.log( "用户名验证::"+bool );
</script>

注意事项：var telReg = /^1[345678][0-9]{9}$/中，如果开头结尾没有，telReg = /1[345678][0-9]{9}/，此时匹配18793745652abc字符串也会匹配为true，当匹配到18793745652时就停止认为匹配成功，因为没有结束符，事实上后面还有abc，结果应该是错误的，所以开头和结尾符必须要添加。

5 BOM对象

5.1 js的BOM概述

BOM（Browser Object Model）浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出页面，通过js提供BOM对象我们可以模拟浏览器功能。

例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。再例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。
在这里插入图片描述

5.2 js的BOM对象

  1. Window对象（重点），对象表示浏览器中打开的窗口。
  2. Location对象（重点），包含有关当前 URL 的信息。用于操作浏览器的地址栏
  3. Screen对象，包含有关客户端显示屏幕的信息。。
  4. Navigator对象，包含有关浏览器的信息
  5. History对象，包含用户（在浏览器窗口中）访问过的 URL，其实就是来保存浏览器历史记录信息。

5.3 js的window对象

所有浏览器都支持 Window对象。Window 对象表示浏览器中打开的窗口。

Window对象此处学习它的两个作用：

  1. JavaScript 消息框
  2. 定时器

1 JavaScript消息框

可以在 JavaScript 中创建三种消息框：

  • alert(“指定消息”) 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
  • confirm(“指定消息”) 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
    • 点击ok按钮，返回true； 点击取消按钮，返回false
  • prompt(“提示用户”) 方法用于显示可提示用户进行输入的对话框。
    • 点击确定，返回输入的内容 “”；点击取消，返回 null

2 定时器
执行定时器

  • setTimeout(定时执行的函数, 毫秒值) 定时执行一次，方法用于在指定的毫秒数后调用函数。
  • setInterval(定时执行的函数, 毫秒值) 反复执行，方法可按照指定的周期（以毫秒计）来调用函数。
<script type="text/javascript">
    /**
     * 定时器: 在指定的时间间隔内,执行功能
     * window对象函数  setTimeout()定时执行,仅有一次
     * 函数setTimeout(要执行的功能,间隔毫秒值)
     *
     * setTimeout(直接传递匿名函数,毫秒值)
     * 时间到了,定时器函数,自动调用匿名函数
     */
    setTimeout(function(){
        console.log("匿名函数,实现定时器打印")
    } ,3000);

  /*  function func() {
        console.log("控制台打印");
    }*/

</script>

<script type="text/javascript">
    /**
     * window对象的方法定时器
     * 反复定时, setInterval(要执行人物,毫秒值)
     */
    setInterval( function(){
        console.log("反复执行的定时器");
       // alert();
    } , 500);
</script>

取消执行的定时器

  • clearInterval( ID值 ) 可取消由 setInterval() 设置的 周期性执行。
    注意：clearInterval() 方法的参数ID，必须是由 setInterval() 返回的 ID 值。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BOM对象取消定时器方法</title>

    <script type="text/javascript">
        /**
         * 取消定时器:
         *  window对象方法 clearInterval()
         *
         *  setInterval()定时器方法,返回值
         *  是什么不重要,一个页面中,所有的定时器返回值都是唯一性的
         */
      var id = setInterval(function () {
            console.log("定时器");
        },3000);

        function clearFn() {
            //点击按钮,取消定时器
            clearInterval(id);
        }
    </script>
</head>
<body>
   <button onclick="clearFn()">取消定时器</button>
</body>
</html>

5.4 js的location对象

location对象，用于操作浏览器的地址栏

  • href属性：就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
  • 格式：location.href=URL
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BOM对象location</title>

    <script type="text/javascript">
        /**
         *  location对象,表示浏览器的地址栏
         *  对象的属性 href 设置获取浏览器的地址栏
         */

        function fn() {
            //location.href = "http://www.itheima.com";
            console.log(location.href);
        }

        function fn2() {
            location.href = "http://www.itheima.com";
        }
    </script>
</head>
<body>
  <button onclick="fn()">按钮</button>

<img src="1.jpg" onclick="fn2()">
</body>
</html>

5 案例 定时弹广告

5.1 案例需求

在平日浏览网页时，页面一打开3秒后显示广告，然后3秒后再隐藏广告。

5.2 案例分析

1.设置单次执行的定时器，页面显示3秒后执行函数，用于显示广告
	获取HTML页面的DIV标签，使用DOM中的document对象的方法getElementById( 标签的ID属性值 )
	为div标签，设置显示样式为 style="display:block"
2.设置单次执行的定时器，页面显示6秒后执行函数，用于隐藏广告
	获取HTML页面的DIV标签，使用DOM中的document对象的方法getElementById( 标签的ID属性值 )
	为div标签，设置显示样式为 style="display:none"

页面打开后3s，显示广告3s，这样6s后消失，所以设置3s和6s

5.3 案例实现

修改商城首页案例.html， 加入代码

  • 步骤一，编写html代码
<div class="ad" id="ad">
    <img src="img/ad.gif" />
</div>
  • 步骤二，编写css代码
<style>
    .ad {
        width: 1200px;
        margin: 0 auto;
        display: none;
    }
</style>
  • 步骤三，编写js代码
<script type="text/javascript">
    // 1.设置单次执行的定时器，页面显示3秒后执行函数，用于显示广告
    setTimeout(function(){
        //使用document对象的getElementById方法 获取标签成为对象
        var ele = document.getElementById("ad");
        //为div标签对象，设置显示样式为 style="display:block"
        ele.style.display = "block";
    }, 3000);

    //2.设置单次执行的定时器，页面显示6秒后执行函数，用于隐藏广告
    setTimeout(function(){
        var ele = document.getElementById("ad");
        ele.style.display = "none";
    }, 6000);
</script>

6 案例 轮播图

6.1 案例需求

第一天完成首页中，“轮播图”只提供一张图片进行显示。现需要编写程序，完成自动切换图片功能。

6.2 案例分析

设置重复执行的定时器，页面显示2秒后执行函数，用于图片轮播
    获取HTML页面的轮播图标签，使用DOM中的document对象的方法getElementById( 标签的ID属性值 )
    为img标签，设置显示图片为 src="img/xx.jpg"

6.3 案例实现

步骤一：为轮播图img标签添加id属性

<img src="img/1.jpg" width="1200" id="lunbo">

步骤二：编写js代码

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.color a {
			color: white;
		}	
	</style>

	<script type="text/javascript">
           /**
			 *  定时器,实现广告轮播图
			 *  setInterval()
			 *  每隔3000秒,换一个图片
			 *  <img src="../img/2.jpg" width="1200" id="lunbo">
			 *      本质就是修改标签的属性 src
			 *   广告图片文件名 1,2,3 名字,符合变量的变化i=0 ++
            */
           function loadFn() {
				// 页面加载完默认是第一张图片，所以从第二张图片开始显示
                var i = 2;
                setInterval(function () {
	                //获取图片标签.修改属性src的值
	                var imgEle = document.getElementById("lunbo");
	                   //修改图片的路径,采用变量++
					imgEle.src = "../img/"+i+ ".jpg";
					i++;
					//只有3个图片
					if(i > 3){
						i=1;
					}
				} ,3000);
           }

	</script>
</head>
<body onload="loadFn()"> 
		<!-- 轮播图, 1x1表格 -->
		<table cellspacing="0" cellpadding="0" width="1200" align="center">
			<tr>
				<td>
					<img src="../img/1.jpg" width="1200" id="lunbo">
				</td>
			</tr>
		</table>

关于body中的onload：浏览器是边加载边执行的，先加载head 再加载body。onload事件是在网页加载完毕时执行的。当我们在JavaScript中想要操作某元素时而此元素还没有加载完成（即没有这个元素），就会出现此元素没定义。
在body中添加onload事件是指：所有的元素都加载完成时触发此事件。
轮播不添加onload有可能页面还没加载完，就开始轮播造成图片顺序混乱。

JavaScript学习手册十四：HTML DOM——文档元素的操作（二）
qq_45823118的博客
04-24 1万+
HTML DOM——文档元素的操作1.创建节点任务描述相关知识创建节点代码文件2.插入节点任务描述相关知识插入节点代码文件3.删除节点任务描述相关知识删除节点代码文件4.替换节点任务描述相关知识替换节点代码文件5.综合练习任务描述相关知识下拉列表的级联代码文件 1.创建节点 任务描述 1.本关任务：创建一个表单<form>节点。 2.具体要求如下： 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示： <form id
十一、JavaWeb之用户角色权限设置（1）
u_hcy2000的博客
10-17 2867
文章目录一、需求分析二、环境搭建2.1 数据库环境2.2 java环境：2.3 配置数据库连接池 一、需求分析 主要有三大模块,分别是权限 , 角色, 用户 。 主要针对这三部分数据进行增删改等操作。 权限模块 展示权限列表，添加权限，修改相关权限，删除权限 Tips：修改、添加、删除都依赖于查询操作（因为你添加完了，改完了，肯定要再次展示给用户看改完了的数据，这时候需要再次查询，因此查询是基本操作，先实现） 二、环境搭建 2.1 数据库环境 创建数据库、创建数据库表 创建 权限表 t_permi
习题10-2 递归求阶乘和 (15point(s)).c
xiezhg5的博客
04-06 430
本题要求实现一个计算非负整数阶乘的简单函数，并利用该函数求 1!+2!+3!+…+n! 的值。 函数接口定义： double fact( int n ); double factsum( int n ); 函数fact应返回n的阶乘，建议用递归实现。函数factsum应返回 1!+2!+…+n! 的值。题目保证输入输出在双精度范围内。 裁判测试程序样例： #include <stdio.h...
5-5 使用函数求1到10的阶乘和 
ML_GearYe的博客
04-09 1980
5-5使用函数求1到10的阶乘和 本题要求实现一个计算非负整数阶乘的简单函数，使得可以利用该函数，计算1!+2!+⋯+10!的值。 函数接口定义： double fact( int n ); 其中n是用户传入的参数，其值不超过10。如果n是非负整数，则该函数必须返回n的阶乘。 裁判测试程序样例： #include <stdio.h> double fact( i...
【狂神说Java】JavaScript学习笔记
热门推荐
pan_h1995的博客
05-10 2万+
1、前段知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 1.1、前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠...
js 数组扩充函数
syutyouki的博客
05-29 3313
javascript提供了一套数组可用的方法。这些方法是被储存在Array.prototype中的函数。这是可以被扩充的。举例来说，假设我们想要给array增加一个方法，它允许我们对数组进行计算：Array.method('reduce',function(f, value){ var i; for(i=0;i &lt; this.length;i+=1){ ...
JavaScript基础教程（四十八）javascript:void(0)含义：揭秘JavaScript中的void(0)，你所不知道的隐藏技能！
最新发布
jxf_jxfcsdn的博客
09-03 6万+
javascript:void(0)是JavaScript中一个特殊的表达式，其核心作用是计算给定表达式并始终返回undefined。它最常见于a标签的href属性中，用于阻止链接默认跳转行为同时保持语义完整性。虽然现代开发中逐渐被event.preventDefault()取代，但在特定场景下仍具有实用价值。
三十三、JavaScript
吕呵呵的博客
11-26 2682
文章目录JavaScript概念JS 的使用标识符变量数据类型typeof 运算符（获取当前值类型）Number 类型String 类型Boolean（布尔型）UnderfinedNull三大引用类型Object 类型Array 类型function 类型 JavaScript 概念 组成： 语言：解释执行（由浏览器执行） ECMAScript 语法规范： 变量、数据类型、类型转换、操作符 流程控制语句：判断、循环语句 数组、函数、作用域、预解析 对象、属性、方法、简单类型和复杂类型的区别 内置
【七十四】企业级JavaScript开发之回调函数
孙叫兽的博客
10-25 1040
JavaScript 主机（host）环境提供了许多函数，这些函数允许我们计划行为（action）—— 也就是在我们执行一段时间后才自行完成的行为。例如，setTimeout函数就是一个这样的函数。这儿有一些实际中的异步行为的示例，例如加载脚本和模块。让我们看一下函数，该函数使用给定的src它将一个新的、带有给定src的、动态创建的标签插入到文档中。浏览器将自动开始加载它，并在加载完成后执行它。脚本是“异步”调用的，因为它从现在开始加载，但是在这个加载函数执行完成后才运行。如果在。
javaScript14操作元素
2301_77187479的博客
12-10 1097
方式一：element.属性 获取属性值（获取元素自身自带的属性，例如id，href，src等）方式二：element.getAttribute('属性') 主要获取自定义的属性，我们程序员自己家的属性,也可以获取元素自带属性。
JavaScript
qq_44799103的博客
01-08 1万+
学习笔记
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
基于JavaScript和微信小程序技术的二十四节气养生馆设计源码
02-14
在这样的背景下，一款基于JavaScript和微信小程序技术的二十四节气养生馆设计源码应运而生。 该养生馆设计源码由30个文件组成，涵盖了8个JSON配置文件、7个JavaScript文件、5个微信小程序样式表文件（wxss）、4个...
JavaScript实现基于十进制的四舍五入实例
12-02
本文实例展示了如何使用JavaScript实现基于十进制的四舍五入功能。这个实现方法主要依赖于JavaScript的位操作符来完成，这是一种巧妙且高效的技巧。 函数`getRoundUpOrDown(num)`用于实现四舍五入的功能。首先，它...
javascript经典特效---二十四小时时钟2.rar
01-02
JavaScript经典特效——二十四小时时钟2是一个典型的网页交互设计，主要利用了JavaScript语言来实现一个实时更新的24小时制时钟。这个效果通常用于网页的头部或者底部，为用户提供当前时间信息，增强用户体验。 ...
十八、Maven使用（2）
u_hcy2000的博客
11-08 807
文章目录第一章 继承1 需求2 父pom文件3 子pom文件（以dao层举例）第二章 聚合工程1 创建父工程1.1 删除src目录1.2 修改pom.xml管理版本2 子模块（dao、service、web）2.1 dao层（不用骨架）2.2 service层（不用骨架）2.3 web层（使用骨架）3 注意事项第三章 Maven常用命令1 clean命令2 compile命令3 test命令4 package命令5 install命令第四章 面向接口编程 第一章 继承 1 需求 ​ a项目 需要mysql
一、MySQL数据库（单表）（2）
u_hcy2000的博客
09-22 758
文章目录1 SQL语句（DQL）1.1 简单查询1.2 条件查询1.3 排序查询1.4 聚合查询1.5 分组查询1.6 条数限制查询 1 SQL语句（DQL） 数据准备： /* 产品表,商品表 product pid 主键 pname 商品名字 price 价格 category_id 分类 c001 家电 c002 服装 c003 化妆品 c004 食品 c005 饮料 */ CREATE TABLE product( pid INT
三十一、RabbitMQ一（1）
u_hcy2000的博客
02-04 728
文章目录学习目标一、消息队列MQ概述1.1 为什么使用MQ1.2. 消息队列产品1.3. AMQP 和 JMS1.3.1. AMQP1.3.2. JMS1.3.3. AMQP 与 JMS 区别1.4. RabbitMQ**应用场景：****1、双十一商品秒杀/抢票功能实现****2、积分兑换(积分可用于多平台)****3、大平台用户注册**1.5 相关定义：二、安装及配置RabbitMQ2.1. docker中安装RabbitMq2.2. 用户以及Virtual Hosts配置2.2.1. 用户角色2.2.
十三、关于MyBatis使用的综合练习
u_hcy2000的博客
10-26 618
文章目录1 环境准备1.1 构建数据库环境1.2 JavaWeb开发环境2 查询操作（查询是基础）2.1 无条件查询所有数据（queryAll）2.2 多条件查询（queryByWhere）3 增加操作4 修改操作4.1 回显4.2 修改4.3 删除5 分页5.1 分页条件5.2 分页流程 1 环境准备 1.1 构建数据库环境 建数据库——> 建数据表 1.2 JavaWeb开发环境 web目录下拷入前端界面 web\WEB-INF\lib目录下加入需要的jar包 src下放入配置文件log4j.p
javascript学习手册十四
04-02
在《JavaScript学习手册》的章节中，第十四章主要涉及 HTML DOM 的操作以及如何通过 JavaScript 来控制和修改网页中的文档元素[^2]。这一部分内容通常会讲解如何访问、创建、删除以及更新 HTML 文档中的节点。 以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值