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代码functionfu1(){alert("点我啊，啊，啊");}</script>

3.在html网页绑定事件的两种方式

方式一：直接绑定（直接在标签里面定义事件属性，绑定对应的js代码）
方式二：间接绑定（不在标签里面定义事件属性，在使用时在绑定）
代码如下：<input type="button" value="直接绑定" onclick="f1();"/><input type="button" value="间接绑定" id="bt2"/><script type="text/javascript">//1.直接绑定：functionf1(){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<formaction="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: 不提交表单- 间接绑定的方式<formaction="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)。<!DOCTYPEhtml><htmllang="en"><head><metacharset="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><inputtype="text"id="name"placeholder="请输入姓名"autocomplete="off"><inputtype="text"id="age"placeholder="请输入年龄"autocomplete="off"><inputtype="text"id="gender"placeholder="请输入性别"autocomplete="off"><inputtype="button"value="添加"id="add"onclick="addRow();"></div><tableid="tb"><caption>学生信息表</caption><tr><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr><tr><td>张三</td><td>23</td><td>男</td><td><ahref="#"onclick="drop(this)">删除</a></td></tr><tr><td>李四</td><td>24</td><td>男</td><td><ahref="#"onclick="drop(this)">删除</a></td></tr></table></body><script>//1.添加表格：字符串拼接的方式functionaddRow(){//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.删除一行数据functiondropRow(obj){//1.obj = this ,表示 a标签//2.获取tr标签:a-->td--->trvar tr_tag = obj.parentNode.parentNode; console.log(tr_tag.nodeName)//3.获取table标签:a-->td--->tr-->tablevar 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: 只有名称，没有”真人“）
调用方法特点: 调用方法时，全局对象省略不写
常用方法：1. eval(): 计算 JavaScript 字符串，并把它作为脚本代码来执行。2. isNaN():检查某个值是否是数字。3. parseFloat():解析一个字符串并返回一个浮点数4. parseInt():解析一个字符串并返回一个整数。5. decodeURI():解码某个编码的 URI。6. encodeURI():把字符串编码为 URI。7. 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类型// 如果前面是字母，转换成NaNvar str1 ="100";// stringvar 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进行强制转换，只有字符串里面包含非数字，都会转成NaNvar 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调用方法
常用方法：1. isNaN():检查某个值是否是数字。2. parseFloat():解析一个字符串并返回一个浮点数3. parseInt():解析一个字符串并返回一个整数。4. Number():把字符串对象的值转换为数字。
代码测试：//1.创建一个numbervar num =newNumber("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相关的方法1. 字体变大: big();2. 字体加粗:bold();
方法二:与java类似的方法1. indexOf(“字符”);获取某个字符在字符串中的位置(正着遍历),如果没有这个字符,返回-12. 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–>向下取整 5ceil();"天花板方法"向上取整,比如:5.01–>向上取整6random();随机数,范围[0,1);包含0,不包含1round();四舍五入的方法
属性: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里面functionrandName(){//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 =newDate();//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对象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 解析jsonvar 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 ,888var 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解析复杂的jsonvar 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 =newSet(); document.write("set1的长度："+set1.size+"<hr/>");//2.方式二：创建一个指定元素的对象var arr=["a","b","c"];var set2 =newSet(arr); document.write("set2的长度："+set2.size+"<hr/>");</script>
常见属性集合长度: set对象.size;
常见方法1. set对象.add(*value*) 在Set对象尾部添加一个元素。返回该Set对象。2.set对象.clear() 移除Set对象内的所有元素。3.set对象.delete(*value*) 删除某个元素1. Set对象.entries()返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和Map对象保持相似，每个值的键和值相等。5.Set对象.keys() 与**values()**方法相同，返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。1. Set对象.values() 返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。1. Set对象.has(*value*) 返回一个布尔值，表示该值在Set中存在与否。
遍历方式：- 根据entries（或者根据keys）遍历（迭代器遍历）- 增强for遍历
代码测试：1. 基本方法演示<script type="text/javascript">//1.方式一：创建一个空的对象var set1 =newSet();//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>2. set集合中的元素如何遍历set集合的底层为了迎合map的数据结构，所以ECMAScript设计人员，把set的底层设计了entry(key-value).- <script type="text/javascript">//1.方式二：创建一个指定元素的对象var arr=["a","b","c"];var set =newSet(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-valuefor(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 =newMap(kvArray);``````<script type="text/javascript">//1.map对象的创建var map1 =newMap(); document.write("map1的长度："+map1.size+"<br/>");//2.map对象指定元素var kvArray =[["key1","value1"],["key2","value2"]];var map2 =newMap(kvArray); document.write("map2的长度："+map2.size+"<br/>");</script>
常见属性集合长度: map对象.size;
常见方法

1.添加值和获取值

            map对象.set(key,value)` ：在map对象添加一个key-value元素。返回该map对象

 map对象.get(key)`:返回键对应的值，如果不存在，则返回undefined。

```
map对象.clear()
```

移除

map

对象内的所有元素。

3.var flag =

map象.delete(key)

删除某个元素,有的话，返回rue,没有元素返回false
4.

map对象.entries()

 返回一个新的迭代器对象，该对象包含`map`对象中的按插入顺序排列的所有元素的值的`[value, value]`数组。

```
map对象.keys()
```

与**

values()

**方法相同，返回一个新的迭代器对象，该对象包含

Set

对象中的按插入顺序排列的所有元素的值。
6. map对象.values()

返回一个新的迭代器对象，该对象包含

map

对象中的按插入顺序排列的所有元素的值。

7…

map对象.has(value)

         返回一个布尔值，表示该值在`Set`中存在与否。

遍历方式- 根据entries遍历（迭代器遍历）- 增强for遍历
代码测试：1. 基本方法演示<script type="text/javascript">//1.map对象的创建var map1 =newMap();//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>2. map的遍历<script type="text/javascript">//1.map对象的创建var map1 =newMap();//2.添加数据 map1.set("a","AAA"); map1.set("b","BBB"); map1.set("c","CCC"); map1.set("c","DDD");//后面的把前面相同key: value会被替换//3.遍历：增强forfor(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: 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。 \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-6var 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 =newRegExp("^\\w{3,6}$");//很少用,因为 \ 需要转义 \ document.write("一个用户:"+ reg1.test("9abc_")+"<br/>")//2. 定义一个正则表达式: 匹配用户名,用户名要求:前提,用户名必须以英文字母开头,数字和英文字母构成.取3-6var 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. Vipvar reg4 =/^\w*@\w+\.\w{2,3}$/; document.write("邮箱:"+ reg4.test("[email protected]")+"<br/>");//5.定义一个正则表达式: 匹配一个省份证号 17位数字,18位:数字或者Xvar 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思路：1. 获取用户名，检验用户名，判断是否符合正则规范。2. 获取密码，检验密码，判断是否符合正则规范。3. 如果都符合规范，提交表单数据4. 如果不符合规范，不允许提交表单数据5. 用户名和密码输入框，在失去焦点：正确，或者错误

四.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对象可以省略不写.
常用方法- 第一类方法:弹出框方法1. 警告框: alert(内容);// window.alert(内容);2. 确认框: var flag = confirm(内容);//window.confirm(内容);3. 输入框: var user_value= prompt(提示信息);//window.prompt(提示信息);- 第二类方法:操作窗口方法1. 打开窗口: open();2. 关闭窗口:close();<input type="button" value="开启一个新窗口" onclick="openW();"/><input type="button" value="关闭一个新窗口" onclick="closeW();"/><script>//1开启一个新窗口functionopenW(){//wid：表示新的窗口对象 wid = window.open("http://www.baidu.com");}//2.关闭一个新窗口functioncloseW(){//开谁，关闭谁 wid.close();}</script>- 第三类方法:定时器方法1. 一次性定时器:设置定时器: var id = setTimeout(js代码,毫秒值), 清除定时器: clearTimeout(定时器标识);比如: 定时炸弹,设置时间定时爆炸, 清除炸弹: 清除的标识2. 循环定时器:设置定时器: 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;functionnewW(){ newId = window.open("https://www.baidu.com");//表示新打开的窗口对象}//3.关闭新的窗口functionclosenewW(){ newId.close();}//2.关闭窗口functioncloseW(){ 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><inputtype="button"value="获取窗口的地址"onclick="getPath();"/><inputtype="button"value="改变窗口的地址"onclick="changePath();"/><scripttype="text/javascript">//1.获取地址functiongetPath(){//var loc = window.location;//var path = loc.href;var path = location.href; document.write(path);}//2.改变地址functionchangePath(){//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对象获取
常用方法1. 回退到用户的上个访问记录: back();2. 前进到用户的下个访问记录:forward();3. 回退和前进到访问的历史记录go(参数):- 参数是负的值: 回退到用户的上个访问记录,比如 -1 : 回退上个访问记录- 参数是正的值,前进到用户的下个放了记录,比如 1 : 前进到下个访问记录
常用属性length : 表示历史记录的个数.

五.JAVAScript面向对象(扩充知识点)

在 Java 中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。

在这里插入图片描述

类的定义和使用- 方式一：

在这里插入图片描述

方式二：

继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。继承关键字：extends顶级父类： Object//方式一： <script>//定义Person类classPerson{//构造方法constructor(name,age){this.name = name;this.age = age;}//eat方法eat(){ document.write("吃饭...");}}//定义Worker类继承PersonclassWorkerextendsPerson{constructor(name,age,salary){super(name,age);this.salary = salary;}show(){ document.write(this.name +","+this.age +","+this.salary +"<br>");}}//使用Workerlet w =newWorker("张三",23,10000); w.show(); w.eat();</script>//方式二： <script>//定义personlet 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 顶级父类

标签： javascript 前端 html5

本文转载自: https://blog.csdn.net/caozhisanguo/article/details/122408447
版权归原作者 小码哥的进阶 所有，如有侵权，请联系我们删除。

javascript入门第二天

一.事件机制

1.常见的名词解释

2.事件机制概述

3.在html网页绑定事件的两种方式

4.常见的事件有那些

5.案例：演示常见的事件

6.作业：

二. 综合案例：动态添加表格

三.常用的内置对象（javascript基于对象的脚本语言）

0.最全api

1.ECMAScript基本语法规范发展历程：

2.常见的内置对象

2.1 Global全局对象

2.2 Number数字对象

2.3 Array数组对象

2.4 String对象

2.5 Math对象

2.6 Date对象

2.7 JSON对象

2.8 Set 对象(扩充)

2.9 Map 对象(扩充)

3.0 RegExp对象(扩充)

四.BOM对象

1.BOM介绍

2.BOM里面包含的五个对象

3.window对象(掌握)

4.location对象(掌握)

5.history对象(了解)

五.JAVAScript面向对象(扩充知识点)

发表评论

“javascript入门第二天”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航