javascript入门第二天
typora-copy-images-to: img
今日内容
- 事件
- 综合案例：动态添加表格
- 常见的内置对象
- BOM对象
- javascript面向对象
- 综合案例：随机抽奖（抽人名），开光灯案例，轮播图案例
一.事件机制
1.常见的名词解释
-
事件
在网页里面的事件，指的触发网页的动作，比如：点击鼠标，双击鼠标，按键盘，那么这些动作称之为事件。
比如：脚踹电动车
-
事件源
在网页里面的事件源，指的网页的元素，比如：标签，属性，文本等等，这些称之为事件源
比如：电动车
-
监听
在网页里面的监听，指的通过触发网页的元素，调用事件对应的js代码，实现网页的动态效果
比如：电动车上的报警器。
监听过程： 脚踹电动车，引起报警器报警
2.事件机制概述
事件机制介绍：
回顾javascript基本概念： javascript是基于对象和事件驱动的一门客户端脚本语言。
在这里面事件机制：通过javascript的事件，触发网页的元素，调用事件对应的js代码（定义好的函数），实现网页的动态效果
<!--
1.事件源：input的普通按钮
2.事件：点击事件onclick
3.监听：事件绑定js代码，触发网页的元素，调用事件绑定的js代码，实现动态效果
-->
<input type="button" value="点击我，弹出框" onclick="fu1();" />
<script type="text/javascript">
//1.提供事件对应的js代码
function fu1 () {
alert("点我啊，啊，啊");
}
</script>
3.在html网页绑定事件的两种方式
-
方式一：直接绑定（直接在标签里面定义事件属性，绑定对应的js代码）
-
方式二：间接绑定（不在标签里面定义事件属性，在使用时在绑定）
-
代码如下：
<input type="button" value="直接绑定" onclick="f1();" /> <input type="button" value="间接绑定" id="bt2" /> <script type="text/javascript"> //1.直接绑定： function f1() { alert("直接绑定---"); } //2.间接绑定： //2.1 获取标签对象 var input2_tag = document.getElementById("bt2"); //2.2 标签对象操作事件属性 input2_tag.onclick = function(){ alert("间接绑定---"); } </script> -
细节
在事件绑定中，this表示谁？: 点击谁，谁就是this
<a href="#" id="a1">点击我，不跳转</a> <hr color="red" size="3" /> <input type="button" value="直接绑定111" οnclick="f1(this);" id="bt1" /> <script type="text/javascript"> //需求：点击按钮，获取a标签的文本内容 function f1(obj) {//定义obj=this; this表示按钮 //1.获取a标签对象 var a_tag = document.getElementById("a1"); //2.调用innerText alert(a_tag.innerText); } //需求：直接点击a标签。获取文本内容 document.getElementById("a1").οnclick=function(){ alert("标签的名称："+ this.nodeName); alert("标签的文本："+ this.innerHTML); }
4.常见的事件有那些
-
点击事件
onclick： 单击事件
ondbclick: 双击事件
-
鼠标状态事件
onmousedown： 鼠标按下事件
onmouseup：鼠标松开事件
onmousemove：鼠标移动事件（每次移动每次触发执行）
onmouseover： 鼠标悬浮事件（触发执行一次）
-
焦点事件
onfocus：获取焦点
onblur: 失去焦点
-
键盘事件
onkeydown：键盘按下事件
onkeyup:键盘松开事件
-
表单事件
onsubmit: 表单提交事件（只有提交按钮，才会触发事件）
-
内容改变事件
onchange: 在内容改变时，触发该事件
-
页面加载事件
onload: 等html网页完全加载完毕后，才执行事件里面的js代码
5.案例：演示常见的事件
-
onload: 等html网页完全加载完毕后，才执行onload事件里面的js代码
<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ //需求：获取id=d1的文本值 alert(document.getElementById("d1").innerHTML); } </script> </head> <body> <div id="d1">我是谁，我来自哪里！</div> </body> -
onfocus：获取焦点 和 onblur: 失去焦点， 通常应用与对表单的校验
获取焦点： 通常用于输入框，点击输入框，获取焦点了。
失去焦点：通常用于输入框，离开输入框，失去焦点了。
<form action="../index.html" method="get"> 用户名：<input type="text" name="username" id="uname"/><br/> <button type="submit">提交按钮</button> <button type="button">普通按钮</button> </form> <script type="text/javascript"> //1.需求：点击用户名输入框时，提示请输入用户名 document.getElementById("uname").onfocus=function(){ console.log("获取焦点："+ this.name); } //2.需求：在离开用户名输入框时，提示用户名输入符合规范吗 document.getElementById("uname").onblur=function(){ console.log("失去焦点："+ this.name); } </script> -
onchange: 在内容改变时，触发该事件
<script type="text/javascript"> //1.页面加载事件 window.onload=function(){ //2.内容改变事件 document.getElementById("province").onchange=function(){ //3.获取改变的内容: this 表示option标签对象 var province_name = this.value; console.log(province_name); } //3.作业： 点击省份，在右侧显示该省份对应的市区 } </script> </head> <body> <select id="province"> <option>--请选择--</optgroup> <option value="henan">河南</optgroup> <option value="jianghsu">江苏</optgroup> <option value="gaugndong">广东</optgroup> </select> <select id="city"> <option>--请选择--</optgroup> </select> </body> -
onsubmit: 表单提交事件（只有提交按钮，才会触发事件）
-
直接绑定的方式：必须在form标签里面加关键词return
<form action="server.html" method="get" id="formBtn" onsubmit="return checkForm11()"> --- </form> //1.直接绑定： function checkForm11(){ console.log("测试前：：："+flag) //2.需求：用户名必须输入3-6个字符，才能提交表单，否则不提交 var flag=true; if(flag==false){ console.log("用户输入的数据不满足规范----不提交表单"); }else{ console.log("用户输入的数据满足规范------提交表单"); } //3.通过 boolean： 确定表单是否提交 console.log("测试后：：："+flag) return flag; } 注意： 1. return true: 提交表单 2. return false: 不提交表单 -
间接绑定的方式
<form action="server.html" method="get" id="formBtn"> --- </form> document.getElementById("formBtn").οnsubmit=function(){ //2.需求：用户名必须输入3-6个字符，才能提交表单，否则不提交 var flag=false; if(flag==false){ console.log("用户输入的数据不满足规范----不提交表单"); }else{ console.log("用户输入的数据满足规范------提交表单"); } return flag; } 注意： 1. return true: 提交表单 2. return false: 不提交表单
-
6.作业：
-
省市区三级联动：
需求：点击省份数据，显示市区数据，点击市区数据，显示市区对应的县城和区。
-
开关灯案例：
需求：点击关灯照片，显示开灯的照片，点击开灯的照片，显示关灯的照片
核心思路：
1步： 判断什么时候开灯，什么时候关灯
2步：在开灯时，修改src属性值为：on.gif 在关灯时，修改src属性值为：off.gif
二. 综合案例：动态添加表格
需求：输入姓名，年龄，以及姓名，点击添加按钮，动态在table表格加一行数据
分析：
-
获取用户输入的：姓名，年龄，以及性别
-
点击添加按钮：
思路一：
动态创建 tr,td标签，通过innerText设置获取用户输入的内容.
通过父标签tr的appendChild(td)
通过父标签table的appendChild(tr).
缺点：需要频繁的创建标签createElement(“标签名称”)，不停通过父标签追加子标签appendChild(tr)。
思路二：
1.获取姓名，年龄，性别。
2.把上述获取的内容拼接到 td字符串里面，再拼接到tr字符串里面
3.通过table标签的innerHTML属性=拼接好的字符串
优点：不需要频繁建标签createElement(“标签名称”)，不停通过父标签追加子标签appendChild(tr)。
-
点击删除按钮，删除一行数据
通过父标签删除子标签： 父标签.removeChild(子标签)。
通过table删除tr: table.removeChild(tr)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="name" placeholder="请输入姓名" autocomplete="off"> <input type="text" id="age" placeholder="请输入年龄" autocomplete="off"> <input type="text" id="gender" placeholder="请输入性别" autocomplete="off"> <input type="button" value="添加" id="add" onclick="addRow();"> </div> <table id="tb"> <caption>学生信息表</caption> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td>男</td> <td><a href="#" onclick="drop(this)">删除</a></td> </tr> <tr> <td>李四</td> <td>24</td> <td>男</td> <td><a href="#" onclick="drop(this)">删除</a></td> </tr> </table> </body> <script> //1.添加表格： 字符串拼接的方式 function addRow(){ //1.获取用户输入的数据 let name_value = document.getElementById("name").value; let sex_value = document.getElementById("gender").value; let age_value = document.getElementById("age").value; //2.把用户输入的数据拼接到tr,td里面 let str="<tr>"+ "<td>"+name_value+"</td>"+ "<td>"+sex_value+"</td>"+ "<td>"+age_value+"</td>"+ "<td><a href='#' οnclick='dropRow(this)'>删除</a></td>"+ "</tr>"; //3.通过table标签的innerHTML属性=拼接好的字符串 document.getElementById("tb").innerHTML+=str; } //2.删除一行数据 function dropRow(obj){ //1.obj = this ,表示 a标签 //2.获取tr标签:a-->td--->tr var tr_tag = obj.parentNode.parentNode; console.log(tr_tag.nodeName) //3.获取table标签:a-->td--->tr-->table var table_tag = tr_tag.parentNode; console.log(table_tag.nodeName) //4.通过父标签删除子标签 table_tag.removeChild(tr_tag); } </script> </html>
三.常用的内置对象（javascript基于对象的脚本语言）
0.最全api
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
1.ECMAScript基本语法规范发展历程：
-
1995年12月 太阳公司(SUN)与网景通讯公司(Netscape)一起引入了JavaScript。
-
1996年03月 网景通讯公司发表了支持JavaScript的网景导航者2.0。
-
1996年08月 由于JavaScript作为网页的客户面脚本语言非常成功，微软将之引入了Internet Explorer3.0，取名JScript。
-
1996年11月 网景通讯公司将JavaScript提交给欧洲计算机制造商协会进行标准化。
-
1997年06月 ECMA-262的第一个版本于被欧洲计算机制造商协会采纳。并将 ECMA-262 标准取名为 ECMAScript1.0版本。
-
1998年6月发布：ECMAScript 2.0版发布:
主要是编辑加工的结果。这一版的内容更新是为了与ISO/IEC-16262保持严格一致，没有作任何新增、修改或删节处理。
因此，一般不使用第2版来衡量ECMAScript2.0实现的兼容性。
-
1999年12月发布：ECMAScript 3.0版发布:
是对ECMAScript标准第一次真正的修改。
新增了对正则表达式、新控制语句、try-catch异常处理的支持，修改了字符处理、错误定义和数值输出等内容。
从各方面综合来看，第3版标志着ECMAScript3.0成为了一门真正的编程语言。也成为JavaScript的通行标准，得到了广泛支持。
-
2007年10月ECMAScript 4.0版草案发布
对3.0版做了大幅升级，预计次年8月发布正式版本。
草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。
以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
-
2008年7月ECMAScript 4.0发布前被废弃
由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本）。将其中涉及现有功能改善的一小部分，发布为ECMAScript3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）会后不久，ECMAScript 3.1就改名为ECMAScript 5。
-
2009年12月发布：ECMAScript 5.0版发布:
Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。
TC39的总体考虑是，ECMAScript5与ECMAScript3基本保持兼容，较大的语法修正和新功能加入，将由JavaScript.next完成。(当时，JavaScript.next指的是ECMAScript 6。第六版发布以后，将指ECMAScript 7)该版本力求澄清第3版中的歧义，并添加了新的功能。
新功能主要包括：
JSON对象（包含parse/stringify等方法）、Array和Object增加一些方法，严格模式（use strict），函数的bind方法。
-
2011年6月发布:ECMAscript 5.1版发布:
并且成为ISO国际标准（ISO/IEC16262:2011）。到了2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能
-
2015年6月发布：ECMAscript 6版发布:
ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。
这是因为TC39委员会计划，以后每年发布一个ECMAScirpt的版本，下一个版本在2016年发布，称为“ECMAScript 2016”。
从现在开始，新版本将按照ECMAScript+年份的形式发布。
S6是继S5之后的一次主要改进，语言规范由ES5.1时代的245页扩充至600页。尽管ES6做了大量的更新，但是它依旧完全向后兼容以前的版本。
ES6增添了许多新功能包括：
模块和类以及一些实用特性，例如Map、Set、Promises、生成器（Generators）等。
-
2018年版本：ECMAscript 9版发布:
-
-----以及2021版本:
ECMAScript 永远不会被制订成一种静态规范。随着 ECMAScript 实现的发展，一些特征将被提议包括到规范的下一个版本中。人们正在开发基于 ECMAScript 的工具。ECMAScript 与其他标准和技术的结合正在引发一些新的发展方向的思想。
2.常见的内置对象
2.1 Global全局对象
-
Global全局对象概述
全局对象：javascript内置的对象（这个对象的名称是Global: 只有名称，没有”真人“）
-
调用方法
特点: 调用方法时，全局对象省略不写
-
常用方法：
- eval(): 计算 JavaScript 字符串，并把它作为脚本代码来执行。
- isNaN():检查某个值是否是数字。
- parseFloat():解析一个字符串并返回一个浮点数
- parseInt():解析一个字符串并返回一个整数。
- decodeURI():解码某个编码的 URI。
- encodeURI():把字符串编码为 URI。
- Number():把字符串对象的值转换为数字。
-
代码测试：
//4. eval(): 计算 JavaScript 字符串，并把它作为脚本代码来执行。 var strEnd = "alert('hello mjto!!!')"; eval(strEnd); //3. decodeURI():解码某个编码的 URI和encodeURI():把字符串编码为 URI。 var url="/path?username=中文abc"; //3.1 编码： var newUrl = encodeURI(url); document.write("编码："+newUrl+ "<hr/>") //3.2解码： var newUrl2 = decodeURI(newUrl); document.write("解码："+newUrl2+ "<hr/>") //1.全局对象特点: 调用方法时，直接书写就可以了 //1.1 使用转换方法：如果前面是数字后面是字母，只会把数字转成number类型 // 如果前面是字母，转换成NaN var str1 = "100";// string var num1 = parseInt(str1);//number document.write(num1+"的类型，"+(typeof num1)+"<hr/>") var str2="100.99A"//string var float2 = parseFloat(str2);//number document.write(float2+"的类型，"+(typeof float2)+"<hr/>") //2.使用Number进行强制转换，只有字符串里面包含非数字，都会转成NaN var str3 ="99.99a"; var num2 = Number(str3); document.write(num2 +"的类型，"+(typeof num2 )+"<hr/>") //3.判断该变量是不是数字 document.write("判断是不是数字---num1："+isNaN(num1)+"<hr/>") document.write("判断是不是数字---num2："+isNaN(num2)+"<hr/>")
2.2 Number数字对象
-
Number数字对象概述
在 JavaScript 中，数字是一种基本的数据类型。JavaScript 还支持 Number 对象，该对象是原始数值的包装对象。在必要时，JavaScript 会自动地在原始数据和对象之间转换。在 JavaScript 1.1 中，可以用构造函数 Number() 明确地创建一个 Number 对象，尽管这样做并没有什么必要。
-
调用方法
直接使用Number调用方法
-
常用方法：
- isNaN():检查某个值是否是数字。
- parseFloat():解析一个字符串并返回一个浮点数
- parseInt():解析一个字符串并返回一个整数。
- Number():把字符串对象的值转换为数字。
-
代码测试：
//1.创建一个number var num = new Number("100");//num=100 //2.使用方法 var flag = Number.isNaN(num); alert(flag);
2.3 Array数组对象
-
Array数组对象概述
Array可以保存任意类型任意长度的元素
-
调用方法
先创建数组对象，再调用方法
-
属性
length: 数组的长度
-
昨天已经讲的很详细了，再补充一个方法：
sort()：对数组的元素进行排序
-
代码测试
var numbers=["C++",1,4,6,2,8,"java"]; document.write("排序前："+numbers+"<hr/>"); document.write("排序后："+numbers.sort()+"<hr/>")
2.4 String对象
-
String对象概述
表示字符串类型的对象
-
调用方法
先创建字符串对象，再调用方法
-
方法一: 与html相关的方法
-
字体变大: big();
-
字体加粗:bold();
-
-
方法二:与java类似的方法
- indexOf(“字符”);获取某个字符在字符串中的位置(正着遍历),如果没有这个字符,返回-1
- lastIndexOf(“字符”);获取某个字符在字符串中的位置(倒着遍历),如果没有这个字符,返回-1
- substr(start,len);截取字符串,表示从索引start截取长度为len的字符串
- substring(start,end);截取字符串表示从索引start截取索引为end(不包含end)的字符串
- split(“字符”)： 把字符串分割为字符串数组。
-
代码测试：
<script type="text/javascript"> //1.准备一个字符串 var str2 ="我,来,自,那,里,呢,"; //2.需求：我,来,自,那,里,呢 //2.1 substr(start,len);截取字符串,表示从索引start截取长度为len的字符串 var str2_length = str2.length; var newStr2 = str2.substr(0,str2_length-1);//截取的从0--lengh的长度 document.write("方式一："+newStr2+"<hr/>") var spear_index = str2.lastIndexOf(",");//获取最后一个逗号的索引值 var newStr3 = str2.substring(0,spear_index);//截取字符串到尾巴索引：包头不报包尾 document.write("方式二："+newStr3+"<hr/>") //1.将字体变大加粗，放到div里面 var str ="我今天认真学习了吗？"; //1.1将字体变大 //str = str.big(); //str = str.bold(); str=str.big().bold().blink(); //2.设置到div document.getElementById("d1").innerHTML=str; </script>
2.5 Math对象
-
Math对象概述
表示数学对象
-
调用方法
直接通过Math调用方法，和java中一样
-
常用方法
max();求最大值
min();求最小值
floor();"地板方法"向下取整,比如: 5.9–>向下取整 5
ceil();"天花板方法"向上取整,比如:5.01–>向上取整6
random();随机数,范围[0,1);包含0,不包含1
round();四舍五入的方法
-
属性:
PI: 获取圆周率
-
测试：
<script type="text/javascript"> //1.需求：获取0-6之间的随机数 var n1 = Math.random()*7;//n1=[0,6.9999999999999] var n2 = Math.floor(n1);//n2=[0,6] document.write("0-6："+n2+"<hr/>"); //2.需求：获取1-6之间的随机数 var n3 =Math.random()*6;//n3=[0,5.9999999999999] var n4 =Math.floor(n3);//n4=[0,5] var n5 =n4+1;// document.write("1-6："+n5+"<hr/>"); </script>-
小练习：随机获取人名
<div id="d1" style="border: 1px solid red;width:80px;height: 30px;line-height: 30px;margin: auto;"> </div> <script type="text/javascript"> //需求：随机获取数组中的人名，显示到div里面 function randName(){ //1.定义一个人名数组 var names=["阿健","阿文","阿阳","阿鑫","阿芃","阿宁"];//长度6： 索引值0-5 //2.获取随机索引 var index =Math.floor(Math.random()*names.length); //3.通过随机索引获取人名：随机人名 var rand_name = names[index]; //4.把人名显示到div document.getElementById("d1").innerHTML=rand_name } //调用方法 randName(); </script>
-
2.6 Date对象
-
Date对象概述
Date表示日期,可以表示年月日，时分秒
-
调用方法
先创建Date对象，再调用方法（和java一模一样）
-
常见的方法
var longTime = date.getTime();//时间戳方法
var systemTime = date.toLocaleString();//系统时间
-
测试代码
<script type="text/javascript"> //1.先创建对象 var date = new Date(); //2.调用方法 var longTime = date.getTime(); document.write("自1970年："+longTime+"<hr/>"); var systemTime = date.toLocaleString(); document.write("计算机的时间："+systemTime+"<hr/>"); </script>
2.7 JSON对象
-
JSON对象概述
JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
- JSON作用：
- 方式一：客户端<--------------> 服务器端，进行数据交互
- 方式二：服务器端<-------------->服务器端，进行数据交互
- 总结：
- json数据量级别少，传输速度快
- json表示数据，描述的很清晰
-
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。
-
如图：JSON表示天气信息数据，清晰明确
- JSON作用：
-
JSON常见的数据格式
-
格式一：表示单个JSON对象
var json_obj = {“key”:“value”,----“keyN”:“valueN”};
-
格式二：表示json数组
var json_arr =[
{“key1”:“value1”} ,—
{“keyN”:“valueN”}
]
-
格式三：复杂的json数据格式
var json_arr=[
{
“num01”: {“key1”:“value1”}
} ,—
{
“num0N”: {“keyN”:“valueN”}
}
]
//1.表示单个JSON对象 var json_obj={"username":"jack","password":"666","age":"88"}; //1.1 解析json var name_value = json_obj.username; var psw_value = json_obj.password;//对象.属性获取：密码 document.write("单个json对象的解析："+name_value+","+psw_value+"<hr/>"); //2.表示json数组 var json_arr=[ {"username":"jack","password":"666","age":"88"},//json对象 {"username":"rose","password":"888","age":"66"}//json对象 ]; //2.1.解析json数组 ： rose ,888 var json_obj2 = json_arr[1];//{"username":"rose","password":"888","age":"66"} document.write("json数组的解析："+json_obj2.username+","+json_obj2.password+"<hr/>"); //----------------------- //复杂的json数据格式: json对象 var json_obj = { "ca":{"a":"AAA","b":"BBB","p":"PPP"} }; //1.根据key: 获取value{"a":"AAA","b":"BBB","p":"PPP"} var json_o1 = json_obj.ca;//{"a":"AAA","b":"BBB","p":"PPP"} document.write(json_o1.a);//AAA //----------------------------- //3.复杂的json数据格式:数组 var json_arr2=[ {"ca":{"a":"AAA","b":"BBB","p":"PPP"}}, {"cb":{"a":"AAA11","b":"BBB11","p":"PPP111"}}, ]; //3.1解析复杂的json var json_str = json_arr2[0];//"ca":{"a":"AAA","b":"BBB","p":"PPP"} var json_str_obj = json_str.ca;//{"a":"AAA","b","BBB","p":"PPP"} document.write("复杂的json格式："+json_str_obj.a);
-
-
调用方法
先创建json对象，再调用方法
-
常见方法
-
把JSON对象转成字符串
var str = JSON.stringify(json对象);
-
把字符串转成JSON对象
var obj = JSON.parse(json的字符串);
-
其它方法转换
//2.json字符串 var json_str = '{"key":"value1"}'; console.log("转换前类型："+(typeof json_str)); //3.eval(): 将字符串转成浏览器识别的js代码 var json_obj = eval("("+json_str+")"); console.log("转换后类型："+(typeof json_obj));
-
-
JSON数据的解析
基本语法：var value = JSON对象.JSON的属性名称
2.8 Set 对象(扩充)
-
Set 对象概述
Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。其实值，可以理解为key的集合，所以值不能重复。
特点： 值不能重复
-
调用方法
先创建对象，方式两种:
-
创建一个空的对象
var set = new Set();
-
创建一个指定值的对象
var set = new Set([“a”,“b”,“c”]);
-
<script type="text/javascript"> //1.方式一： 创建一个空的对象 var set1 = new Set(); document.write("set1的长度："+set1.size+"<hr/>"); //2.方式二：创建一个指定元素的对象 var arr=["a","b","c"]; var set2 = new Set(arr); document.write("set2的长度："+set2.size+"<hr/>"); </script>
-
-
常见属性
集合长度: set对象.size;
-
常见方法
set对象.add(*value*)
在
Set对象尾部添加一个元素。返回该Set对象。2.
set对象.clear() 移除
Set对象内的所有元素。3.
set对象.delete(*value*) 删除某个元素
-
Set对象.entries()返回一个新的迭代器对象，该对象包含
Set对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和Map对象保持相似， 每个值的键和值相等。5.
Set对象.keys()
与**
values()**方法相同，返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。Set对象.values()
返回一个新的迭代器对象，该对象包含
Set对象中的按插入顺序排列的所有元素的值。-
Set对象.has(*value*) 返回一个布尔值，表示该值在
Set中存在与否。
-
遍历方式：
- 根据entries（或者根据keys）遍历（迭代器遍历）
- 增强for遍历
-
代码测试：
-
基本方法演示
<script type="text/javascript"> //1.方式一： 创建一个空的对象 var set1 = new Set(); //2.添加方法 set1.add("a"); set1.add("b"); set1.add("c"); document.write("删除前，set1长度:"+set1.size+"<hr/>"); //3.判断set集合中是否有这个元素 var flag = set1.has("a"); document.write("set1包含a这个值:"+flag+"<hr/>"); //4.删除某个元素 var flag2 = set1.delete("a"); document.write("删除set1中的a值:"+flag2+"<hr/>"); document.write("删除后，set1长度:"+set1.size+"<hr/>"); //5.清空所有值 set1.clear(); document.write("清空后，set1长度:"+set1.size+"<hr/>"); </script> -
set集合中的元素如何遍历
set集合的底层为了迎合map的数据结构，所以ECMAScript设计人员，把set的底层设计了entry(key-value).
-
<script type="text/javascript"> //1.方式二：创建一个指定元素的对象 var arr=["a","b","c"]; var set = new Set(arr); //2.增强for for(var kk of set){ document.write(kk+" ") } document.write("<hr/>") //2.遍历数组： 迭代器 var ens = set.entries(); //3.遍历:set的值 for (var i = 0; i < set.size; i++) { document.write("值："+ens.next().value+", "); } document.write("<hr/>") //演示： set的底层： key-value for (var i = 0; i < set.size; i++) { var key_value = ens.next();//key-value //document.write(key_value+"<hr/>"); } //4.获取set的keys (其实和set的values一样) var keys = set.keys(); for (var i = 0; i < set.size; i++) { document.write("key："+keys.next().value+", "); } document.write("<hr/>") var vs = set.values(); for (var i = 0; i < set.size; i++) { document.write("value："+vs.next().value+", "); } </script>
-
2.9 Map 对象(扩充)
-
Map 对象概述
一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 [
for...of]循环在每次迭代后会返回一个形式为[key，value]的数组。特点:
map的key不能重复,key必须是string类型。
-
调用方法
先创建对象，后调用方法
-
创建一个空的对象
var map = new Map();
-
创建一个指定值的对象
let kvArray = [["key1", "value1"], ["key2", "value2"]]; var map = new Map(kvArray);<script type="text/javascript"> //1.map对象的创建 var map1 = new Map(); document.write("map1的长度："+map1.size+"<br/>"); //2.map对象指定元素 var kvArray = [["key1", "value1"], ["key2", "value2"]]; var map2 = new Map(kvArray); document.write("map2的长度："+map2.size+"<br/>"); </script>
-
-
常见属性
集合长度: map对象.size;
-
常见方法
1.添加值和获取值
map对象.set(key,value)` ：在map对象添加一个key-value元素。返回该map对象
map对象.get(key)`:返回键对应的值，如果不存在，则返回undefined。
2.map对象.clear()
移除map对象内的所有元素。
3.var flag =map象.delete(key)
删除某个元素,有的话，返回rue,没有元素返回false
4. map对象.entries()
返回一个新的迭代器对象，该对象包含`map`对象中的按插入顺序排列的所有元素的值的`[value, value]`数组。
5.map对象.keys()
与**values()**方法相同，返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。
6. map对象.values()
返回一个新的迭代器对象，该对象包含map对象中的按插入顺序排列的所有元素的值。
7… map对象.has(value)
返回一个布尔值，表示该值在`Set`中存在与否。
-
遍历方式
- 根据entries遍历（迭代器遍历）
- 增强for遍历
-
代码测试：
-
基本方法演示
<script type="text/javascript"> //1.map对象的创建 var map1 = new Map(); //2.添加数据 map1.set("a","AAA"); map1.set("b","BBB"); map1.set("c","CCC"); map1.set("c","DDD");//后面的把前面相同key: value会被替换 //3.打印长度： document.write("未删除前，map1的长度："+map1.size+"<hr/>") //4.获取数据 document.write("获取数据："+map1.get("c")+"<hr/>"); //5.删除数据 var flag = map1.delete("ff"); document.write("删除后，map1的长度："+map1.size+"， 删除成功："+flag+"<hr/>") //6.判断map是否有这个值 var flag2 = map1.has("ccc"); document.write("map1的包含这个key："+flag2+"<hr/>") </script> -
map的遍历
<script type="text/javascript"> //1.map对象的创建 var map1 = new Map(); //2.添加数据 map1.set("a","AAA"); map1.set("b","BBB"); map1.set("c","CCC"); map1.set("c","DDD");//后面的把前面相同key: value会被替换 //3.遍历： 增强for for(let[key,value] of map1){//key-value document.write(key+" : "+value+"<br/>"); } document.write("<hr/>") for(let key of map1.keys()){//key document.write(key+" : "+map1.get(key)+"<br/>"); } </script>
-
3.0 RegExp对象(扩充)
-
RegExp 对象概述
正则表达式是一串具有"特殊意义的字符串"，
作用: 正则表达式来判断用户输入的数据 是否满足定义的正则规范.
比如:
var reg=/^w{3,6}/;// 一串具有"特殊意义的字符串",就是正则表达式
用reg判断 用户输入的用户名是否满足3-6字符的规范.
-
正则表达式的基本语法:
1. 匹配任意单个字符,表示字符 d : 匹配任意单个数字 , [0-9] D: 匹配一个非数字字符。等价于[^0-9] s: 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ fnrtv]。 S: 不匹配任何空白字符， w: 匹配任意单词字符 [0-9a-zA-Z_] W: 匹配任何非单词字符。等价于 [^A-Za-z0-9_]。 un16进制: 匹配任意一个中文字符,中文字符的范围[u4e00-u9fa5],表示20902个汉字 2.量词符号,表示取几个字符 * : 表示取0到n个任意字符 + : 表示取1到n个任意字符 ? : 表示取0或者1个任意字符 {m,n}: 表示取m到n之间的任意字符(包头也包尾巴),比如:{3,6},表示取3 or 4 or 5 ir 6个任意字符 {m,}: 表示取大于等于m个任意字符 {,n}: 表示取小于等于n个任意字符 3.开始符号和结束符号 ^ : 表示以什么字符开始 $ : 表示以什么字符结束 4.特殊符号: : 转义字符,在匹配特殊符号,比如 . ,需要使用转义字符 x|y : 表示匹配x或y字符书写正则表达式
方式一: var reg=/^正则表达式$/; //不要加引号, 推荐第一种写法
方式二:var reg= new RegExp(“正则表达式”);
-
常用方法
var flag = reg.test(用户输入的数据);// reg校验输入的数据是否满足规范,满足返回true,反之 返回false.
<script type="text/javascript"> document.write("基本语法一:匹配任意一个空白字符"+"<br/>") var reg = /s/;// 创建一个正则表达式,匹配空白字符 var user_data1=" "; var flag1 = reg.test(user_data1) document.write("匹配空白的字符:"+flag1+"<br/>"); var reg11 = /S/;// 创建一个正则表达式,匹配非空白字符 var user_data11="hello"; var flag11 = reg11.test(user_data11) document.write("匹配非空白的字符:"+flag11+"<br/>"); var reg111 = /s+|S+/;//匹配空白和非空白字符串 var userData_111=" hello"; var flag111 = reg111.test(userData_111); document.write("匹配空白或者非空白的字符:"+flag111+"<br/>"); document.write("<hr color='red'>") document.write("基本语法一:匹配任意一个数字或者单词字符"+"<br/>") //var reg2 = /d+/;//表示匹配任意一个数字 //var reg2= /[^0-9]/; var reg2=/^d/;//匹配任意个数字,以数字开始 /^[0-9] var user_data2 =12345; var flag2 = reg2.test(user_data2); document.write("匹配一个数字:"+flag2+"<br/>"); var reg3=/^[a-z]{3}[0-9]{3}$/;//以英文字符开始,取3个英文字符,以数字结束,取3个数字 var user_data3= "9b66"; var flag3 = reg3.test(user_data3); document.write("匹配一个用户名:"+flag3+"<br/>"); //用户名是由英文字符加下划线加数字构成 var reg4 = /^w{3,6}$/;//定义一个正则表达式:匹配[a-zA-Z_0-9]取3-6 var user_data4= "abcA9_aaaa";//没有结束,定义的量词符号没有意义 var flag4 = reg4.test(user_data4); document.write("匹配一个用户名w:"+flag4+"<br/>"); var reg5= /^[0-9a-zA-Z_]{3,6}$/;//匹配有数字或英文字母组成,取3-6个 document.write("匹配一个用户名mm:"+reg5.test("abc_aaaaaaa")+"<br/>"); document.write("<hr color='red'>") </script> <script type="text/javascript"> //1. 定义一个正则表达式: 匹配用户名,用户名要求:数字和英文字母构成.取3-6 //var reg1 = /^w{3,6}$/; var reg1 = new RegExp("^\w{3,6}$");//很少用,因为 需要转义 document.write("一个用户:"+ reg1.test("9abc_")+"<br/>") //2. 定义一个正则表达式: 匹配用户名,用户名要求:前提,用户名必须以英文字母开头,数字和英文字母构成.取3-6 var reg2 = /^[a-z]{1}w{2,5}/; document.write("一个用,以英文开头:"+ reg2.test("abc_")+"<br/>") //3.定义一个正则表达式: 匹配一个手机号 var reg3 = /^1[3|5|7|8][0-9]{9}$/;// 1,中间:3,5,7,8取1个, 后面的0-9,取9 document.write("手机号:"+ reg3.test(131111111181111)+"<br/>"); //4.定义一个正则表达式: 匹配一个邮箱 [email protected] cn. Vip var reg4 = /^w*@w+.w{2,3}$/; document.write("邮箱:"+ reg4.test("[email protected]")+"<br/>"); //5.定义一个正则表达式: 匹配一个省份证号 17位数字,18位:数字或者X var reg5 = /^[1-9]{17}[0-9]|[X]{1}$/; document.write("身份证号:"+ reg5.test("11234567891234567Z")+"<br/>"); //6.定义一个正则表达式: 匹配用户名: 带3个中文字符 var reg6 = /^[u4e00-u9fa5]{3,5}$/;//匹配3-5个中文字符 document.write("中文:"+ reg6.test("我爱学我爱学")); </script>-
案例：表单校验
需求: 输入用户名由数字和英文字母构成，长度为3-6位， 密码必须由数字构成，长度6位以上。
知识点：
- 页面提交事件： onsubmit
- 失去焦点事件：onblur
- 正则表达式： regExp
思路：
- 获取用户名，检验用户名，判断是否符合正则规范。
- 获取密码，检验密码，判断是否符合正则规范。
- 如果都符合规范，提交表单数据
- 如果不符合规范，不允许提交表单数据
- 用户名和密码输入框，在失去焦点：正确，或者 错误
-
四.BOM对象
1.BOM介绍
BOM : browser object module,浏览器对象模型(一系列对象,构成模型),操作浏览器的.
作用：操作浏览器的。
2.BOM里面包含的五个对象
-
window
表示窗口对象,同时也是bom的顶层对象(可以通过window对象获取其它四个bom对象)
-
location
表示地址栏对象,操作地址栏的地址(获取地址栏的地址或者改变地址栏的地址)
-
history
表示用户访问过的前后的历史记录,操作用户访问过的历史记录
-
screen
表示网页的屏幕带下,操作网页的大小(分辨率,比如1366*768)
-
navigator
表示浏览器对象, 获取浏览器的相关参数信息(比如:使用的是那个浏览器,版本号是多少)
3.window对象(掌握)
-
介绍
window对象表示网页打开的一个窗口(比如:在网页中打开一个窗口,表示一个window对象)
-
特点
window对象是bom的顶层对象,可以获取其它4个bom对象.
在使用window对象调用方法或者属性时,window对象可以省略不写.
-
常用方法
-
第一类方法:弹出框方法
- 警告框: alert(内容);// window.alert(内容);
- 确认框: var flag = confirm(内容);//window.confirm(内容);
- 输入框: var user_value= prompt(提示信息);//window.prompt(提示信息);
-
第二类方法:操作窗口方法
-
打开窗口: open();
-
关闭窗口:close();
<input type="button" value="开启一个新窗口" onclick="openW();"/> <input type="button" value="关闭一个新窗口" onclick="closeW();"/> <script> //1开启一个新窗口 function openW(){ //wid： 表示新的窗口对象 wid = window.open("http://www.baidu.com"); } //2.关闭一个新窗口 function closeW(){ //开谁，关闭谁 wid.close(); } </script>
-
-
第三类方法:定时器方法
-
一次性定时器:
设置定时器: var id = setTimeout(js代码,毫秒值), 清除定时器: clearTimeout(定时器标识);
比如: 定时炸弹,设置时间定时爆炸, 清除炸弹: 清除的标识
-
循环定时器:
设置定时器: var id= setInterval(js代码,毫秒值), 清除定时器: clearInterval(定时器标识);
//1.弹出框方法 <script type="text/javascript"> //window.alert("hello js"); alert("hello java"); var v = window.prompt("please input your name"); document.write("输入内容:"+v) var flag =confirm("你忍心离开我吗?"); if(flag==true){//点击确定, true document.write("离开我了"); }else{//点击取消, false document.write("没有离开"); } </script> //2.操作窗口方法 <body> <input type="button" value="打开一个新的窗口" onclick="newW();" /> <input type="button" value="关闭新打开的窗口" onclick="closenewW();"/> <input type="button" value="关闭窗口" onclick="closeW();"/> <script type="text/javascript"> //1.打开一个新的窗口 var newId=null; function newW(){ newId = window.open("https://www.baidu.com");//表示新打开的窗口对象 } //3.关闭新的窗口 function closenewW(){ newId.close(); } //2.关闭窗口 function closeW(){ window.close();//如果没有特殊指定,关闭当前窗口 } </script> </body> //3.定时器方法: <script type="text/javascript"> //1.一次性定时器: 经过5秒,爆炸一次 var id = setTimeout("alert('boom!')",5000); //2.清除: 一次性定时器, clearTimeout(id); //1.1 循环定时器 ,每3秒 爆炸一次 var id2 = setInterval("alert('boom2222!!!!!')",3000); //2.2 清除:循环定时器 clearInterval(id2); </script> -
-
-
常用属性
== 获取文档对象;
var doc = document;//window.document
== 获取其它四个bom对象:
var loc = location;// window.location;
4.location对象(掌握)
-
介绍
location表示浏览器的地址栏(url), 是窗口的一部分(是window的一部分).
直接来说: 可以通过window获取location
-
获取location
方式一: var loc = window.location;
方式二: var loc = location;
-
location使用
==获取地址栏的地址
var path = location.href;// 获取值
==改变地址栏的地址(资源会跳转)
location.href=“跳转的资源地址”;//设置值
<body> <input type="button" value="获取窗口的地址" onclick="getPath();" /> <input type="button" value="改变窗口的地址" onclick="changePath();" /> <script type="text/javascript"> //1.获取地址 function getPath(){ //var loc = window.location; //var path = loc.href; var path = location.href; document.write(path); } //2.改变地址 function changePath(){ //location.href="https://www.baidu.com";//跳转到其它网站的资源,必须书写web的绝对路径 //location.href="index.html";//本网站的资源: 可以写相对路径(也可以写绝对路径) location.href="http://127.0.0.1:8020/javascript_high1/index.html"; } </script> </body>
5.history对象(了解)
-
介绍
history表示用户访问过的历史记录,是window对象的一部分
直接来说: 可以使用window对象获取
-
常用方法
-
回退到用户的上个访问记录: back();
-
前进到用户的下个访问记录:forward();
-
回退和前进到访问的历史记录
go(参数):
- 参数是负的值: 回退到用户的上个访问记录,比如 -1 : 回退上个访问记录
- 参数是正的值,前进到用户的下个放了记录,比如 1 : 前进到下个访问记录
-
-
常用属性
length : 表示历史记录的个数.
五.JAVAScript面向对象(扩充知识点)
- 在 Java 中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。
-
类的定义和使用
- 方式一：
-
方式二：
-
继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
继承关键字：extends
顶级父类： Object
//方式一： <script> //定义Person类 class Person{ //构造方法 constructor(name,age){ this.name = name; this.age = age; } //eat方法 eat(){ document.write("吃饭..."); } } //定义Worker类继承Person class Worker extends Person{ constructor(name,age,salary){ super(name,age); this.salary = salary; } show(){ document.write(this.name + "," + this.age + "," + this.salary + "<br>"); } } //使用Worker let w = new Worker("张三",23,10000); w.show(); w.eat(); </script> //方式二： <script> //定义person let person = { name : "张三", age : 23, hobby : ["听课","学习"], eat : function() { document.write("吃饭..."); } }; //使用person document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>"); person.eat(); -
面向对象小结
把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。
1.类的定义
class 类{} 字面量定义
2.类的使用
let 对象名 = new 类名(); 对象名.变量名 对象名.方法名()
3. 继承
让类和类产生子父类关系，提高代码的复用性和维护性。
子类 extends 父类
Object 顶级父类