关键词：
Web前端基础：
Web前端工具：
Web前端：JavaScript最强总结
- 基本概念
- JavaScript显示数据
- JavaScript的注释
- JavaScript基本语法
- JavaScript对象
- JavaScript的函数
- JavaScript变量的作用域
- JavaScript自定义对象
- JavaScript Window--浏览器对象模型
- JavaScript之事件
- JavaScript之DOM模型
- 表单验证
- JavaScript的 RegExp 对象
- JavaScript案例
基本概念
概念
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
JavaScript 很容易入门
作用
- 为网页添加各式各样的动态功能,
- 为用户提供更流畅美观的浏览效果。 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
用法
HTML页面中的JavaScript
在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以， 放在最后也可以，对位置要求不严格
我们可以在 HTML 文档中放入不限数量的script标签，通常的做法是把内容统一放入head或者页 面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容
PS：有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已经 是所有现代浏览器以及 HTML5 中的默认脚本语言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript的用法</title>
<script>
alert("hello JavaScript1-1");
</script>
<script>
alert("hello JavaScript1-2");
</script>
</head>
<body>
<script>
alert("hello JavaScript2-1");
</script>
<script>
alert("hello JavaScript2-2");
</script>
</body>
</html>
<script>
alert("hello JavaScript3-1");
</script>
<script>
alert("hello JavaScript3-2");
</script>
外部的JavaScript
可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。
当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件:
myScript.js文件 //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可 function fun1()
alert("hello JavaScript");
.html文件
<!DOCTYPE html>
<html>
<head>
<script src="js/myScript.js"/>
</head>
<body>
<script>
fun1();//调用脚本中的内容s
</script>
</body>
</html>
外部文件引入一次即可，在head或者body中都可以。
PS:外部脚本不能包含 script 标签。
标签属性中的JavaScript
直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。
<a href="javascript:alert('ok')">登录</a>
JavaScript显示数据
使用window.alert()弹出框
PS:这里的window可以省略，等价于alert(“hello world”);
使用document.write()将内容写入到html文档
使用innerHTML写入到html元素
JavaScript的注释
JavaScript注释与java的单行和多行注释相同。
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。
JavaScript基本语法
JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。
JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运行，但是依然推荐大家按照规范去编写代码，语言弱，程序员不能弱。
变量
声明变量的关键字:var
语法:var 变量名称;
var myCompany; //声明变量
myCompany='开课吧';//赋值
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
变量的命名规则
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头
- 变量名称对大小写敏感(y 和 Y 是不同的变量) 不能使用关键字保留字
变量的命名规范:
- 见名知意 。例如:breadPirce,userService等，避免无意义的a,b,c等
- 推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName
JavaScript的语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执 行前对所有代码进行编译。
JavaScript中也有分支结构和循环结构，语法与java类似，此处就不再深入讲解。细节上的内容等我们 后面使用过的时候再给大家单独指出。
PS:一般一行只写一条语句，每句结尾编写分号结束。
JavaScript的数据类型
值类型(基本类型)
字符串String
字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号;
var myCompany; //声明变量 myCompany='开课吧'; //赋值 var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
var gameName="英雄联盟";
var hairstylist='tony'; //PS:注意引号嵌套
var message1='我的发型师是"tony"老师';
var message2="我的发型师是'tony'老师";
布尔Boolean
只能有两个值:true 或 false。
var isUnderstand = true;
var isSingle = false;
空Null
var email = null;
未定义Undefined
表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
共有4中情况会出现undefined的值
- 变量声明且没有赋值
var obj;
alert(obj);//obj值为undefined
- 获取对象中不存在的属性时
var obj;
alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of undefined"
-
函数需要实参，但是调用时没有传值，形参是undefined;
-
函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined
function printNum(num)
alert(num);
var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined alert(result);
//result的值也是undefined，因为printNum()没有返回值
引用数据类型
对象(Object)、数组(Array)、函数(Function)，后续章节详细介绍。
JavaScript拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类
var param; // param类型为 undefined
param = 5; // 现在 param 为数字
param = "John"; // 现在 param 为字符串
PS:虽然JavaScript支持这种写法，但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要 盛放什么类型的值，以后尽量不随意改变。
JavaScript中的运算符
| 运算符类型 | 符号 |
|---|---|
| 算数运算符 | ±* /%、++、 – |
| 赋值运算符 | :=、 +=、-=、*=、 /=、%= |
| 字符串的连接符 | + |
| 逻辑运算符 | && |
| 条件运算符 | ?: |
| 比较运算符 | == 、!=、> 、<、 >=、 <= |
比较特殊的运算符：
| 比较运算 | 描述 |
|---|---|
| === | 绝对等于(值和类型均相等) |
| !== | 不绝对等于(值和类型有一个不相等，或两个都不相等) |
var x=5;
var res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true
JavaScript对象
JavaScript的String对象
String对象属性–长度属性
var str="我喜欢看NBA,最喜欢的球员是\\'小学生\\'库里"; //注意:字符串中出现的\\'是一个字符，转义为一个单引号
console.log(str); //获取字符串的长度:，切记:所有转移符号的长度都算一个，即\\'长度为1
console.log("字符串的长度="+str.length);//22
JavaScript的Array对象
Array 对象用于在变量中存储多个值，也就是数组
声明数组
数组的长度 length属性
var nameArr=["宝玉","黛玉","湘云"];
var len=nameArr.length; //获取数组的长度，因为是属所以不是length()
JavaScript的Date对象
创建日期对象
var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
日期对象的常用方法
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31) |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6) |
| getFullYear() | 从 Date 对象以四位数字返回年份 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23) |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59) |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11) |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59) |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31) |
| setFullYear() | 设置 Date 对象中的年份(四位数字) |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23) |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59) |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59) |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11) |
JavaScript的Math对象
Math常用属性
var pi=Math.PI;//返回圆周率
Math常用方法
var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。
JavaScript的函数
JavaScript的常用全局函数
JavaScript中有个常用的全局属性NaN,即非数值(Not a Number)，NaN 属性用于引用特殊的非数字 值，该属性指定的并不是不合法的数字
isNaN(param)
用于检查其参数是否是非数值字
是数值的返回false，不是数值返回true
console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true
parseFloat(String)
可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
console.log(parseFloat("66"));//66
console.log(parseFloat("199.99"));//199.99
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat("10年"));//10
console.log(parseFloat("今天是8号"));//NaN
- 字符串中只返回第一个数字。
- 开头和结尾的空格是允许的。
- 如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
parseInt(string,radix)
可解析一个字符串，并返回一个整数
| 参数 | 描述 |
|---|---|
| string | 必需，要被解析的字符串。 |
| radix | 可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间 |
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
当忽略参数 radix , JavaScript 默认数字的基数如下:
- 如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数
- 如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进 制或十六进制的数字
- 如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数
console.log(parseInt("66"));//66
console.log(parseInt("199.99"));//199
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16
PS:旧浏览器由于使用旧版本的ECMAScript(ECMAScript版本小于ECMAScript 5，当字符串以"0"开 头时默认使用八进制，ECMAScript 5使用的是十进制)，所以在解析("010") 将输出8。
- 只有字符串中的第一个数字会被返回。
- 开头和结尾的空格是允许的。
- 如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。 在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制 的基数。
JavaScript的自定义函数
自定义函数语法
使用function关键字定义函数
function 自定义函数名称(参数列表)
//函数体
自定义函数实例
注意:1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.
2、函数的返回取决于函数体中是否有return关键字。
JavaScript的匿名函数
JavaScript变量的作用域
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是 变量，所以只能在函数内部访问。
在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。
全局 JavaScript 变量
在函数外声明的变量是 变量，网页上的所有脚本和函数都能访问它。
<script>
var userId = 1001; //全局变量:整个script脚本中都可用,要注意先后顺序
function printMessage()
var userName = "李白";//局部变量:只在当前函数中生效
document.write(userId);//使用全局变量的时候，保证使用(方法被调用)之前定义并赋值
document.write(message);
printMessage();
</script>
<script>
function printMessage2()
var userName2 = "李白2";
document.write(userId);//这里也可以使用userId
//document.write(userName1);//错误:调用不到printMessage函数中的局部变量
document.write(userName2);//正确:可以使用自己函数中的局部变量
</script>
变量的生命周期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
JavaScript自定义对象
对象也是一个变量，但对象可以包含多个值(多个变量)
定义对象
对象中可以有属性，也可以有方法
对象的属性
可以说 “JavaScript 对象是变量的容器”。
但是，我们通常认为 “JavaScript 对象是键值对的容器”。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
访问对象的属性
//访问对象的属性
//方式1:
var n = student.name;
//方式2:
var n2 = student["name"];
访问对象的方法
JavaScript Window–浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
BOM:Browser Object Model，中文浏览器对象模型。
虽然现在BOM尚无正式标准，但是由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同 方法和属性，因此window常被认为是 BOM 的方法和属性。
window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。( 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象)。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
Window 对象表示浏览器中打开的窗口。
window对象属性
| 属性 | 描述 |
|---|---|
| document | 对 Document 对象的只读引用 |
| history | 对 History 对象的只读引用 |
| location | 用于窗口或框架的 Location 对象 |
| name | 设置或返回窗口的名称 |
history对象
window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
常用方法:
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同
- history.go(1/-1)
参数为1:等同于 history.forward()，
参数为-1，等同于 history.back()
<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前进go</a>
<a href="javascript:window.history.go(-1)">后退go</a>
location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法:
- window.location 对象在编写时可不使用 window 这个前缀。
- href 当前窗口正在浏览的网页地址
- replace(url) 转向到url网页地址
- reload() 重新载入当前网址，如同按下刷新按钮
<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a><br />
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />
window对象方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| prompt() | 显示可提示用户输入的对话框 |
| open() | 设置或返回窗口的名称 |
| close() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| setTimeout() | 关闭浏览器窗口 |
| setInterval() | 在指定的毫秒数后调用函数或计算表达式 |
| clearInterval() | 取消由 setInterval() 设置的 timeout |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout |
打开和关闭浏览器案例
<a href="javascript:window.open('https://www.baidu.com')">打开百度</a>
<a href="javascript:window.open('index.html')">打开-index</a>
<a href="javascript:window.close()">关闭当前页面</a>
弹框案例
<script>
//window对象常用的弹框方法
//1、基本弹框
window.alert("只有一个确定按钮的对话框");
//2、对话框:有确定和取消两个看你，点击确定返回true，点击取消返回false
var res=window.confirm("确认要关闭吗?");
if(res)
alert("点击了确定按钮");
else
alert("点击取消按钮");
//3、输入框:prompt(提示信息，默认值)
var age=prompt("请输入年龄:",19);
alert("输入的年龄信息是:"+age);
</script>
定时器案例
<div id="today1">
div--显示时间1
</div>
<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
<div id="today2">
div--显示时间2
</div>
<a href="javascweb前端：html最强总结附详细代码(代码片段)
...细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结（附上详细代码）Web前端：Bootstrap最强总结附详细代码HTML最强总结附详细 查看详情
web前端：css最强总结附详细代码(代码片段)
...细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结（附上详细代码）Web前端：Bootstrap最强总结附详细代码Web前端 查看详情
web前端：bootstrap最强总结附详细代码（带常用案例！）(代码片段)
...细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代码Web前端：Bootstrap最强总结B 查看详情
web前端：jquery最强总结（每个要点都附带完全案例详细代码！）(代码片段)
...细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附详细代码Web前端：Bootstrap最强总结附详细代码JQuery最强总结概念知识框架安装版本问题下载jQue 查看详情
web前端：bootstrap最强总结附详细代码（带常用案例！）(代码片段)
...细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代码Web前端：Bootstrap最强总结Bootstrap基础Bootstra... 查看详情
web前端：jquery最强总结（每个要点都附带完全案例详细代码！）(代码片段)
...细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附详细代码Web前端：Bootstrap最强总结附详细代码JQuery最强总结概念知识框架安装版本问题下载jQue... 查看详情
xss最强知识体系漏洞万字总结(代码片段)
...体系漏洞总结一.XSSI漏洞原理二.XSSI漏洞利用以及POC动态JavaScript非JavaScript三.XSSI漏洞实例四.XSSI漏洞防御【点我资料领取】一.XSSI漏洞原理同源策略同源策略是Web应用程序安全模型中最基本也是最核心的策略。现在所有支持JavaScrip... 查看详情
前端必学——用javascript实现电商图片放大镜效果（附代码）(代码片段)
...代码思想及代码实现效果图展示整体思想HTML部分CSS部分JavaScript部分完整代码 总结 前言 放大镜可以说是前端人必须学会的程序之一！今天本美女就用京东距离为大家展示一下怎么实现放大镜的效果！相比较html... 查看详情
javascript的一些基础语法和常用方法（附代码）(代码片段)
...字典4.数组与对象5.类型与转换6.生成随机数数组总结前言JavaScript是前端经常要用的脚本语言，用过好多次。还是需要总结一下方便以后copy。一、运行环境一般都是嵌在HTML里面，在HTML中写个里面就可以写Jav 查看详情
万字spring框架学习总结（附核心代码详细注释）(代码片段)
Spring学习笔记总结学习视频地址：动力节点视频1.Spring概述1.1Spring框架是什么？Spring框架是一个开放源代码的J2EE应用程序框架，由[RodJohnson](https://baike.baidu.com/item/RodJohnson/1423612)发起，是针对bean的生命周期进行管... 查看详情
js实现悬浮导航的制作（附源码）--web前端
...状态、一种是固定布局状态。实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态，主要是对两种状态成立条件的判断，明确了这些，实现起来就不会太难。1、基础页面（HTML+CSS）效果图：代码如下： <!DOCTYPEht... 查看详情
全网最详细中英文chatgpt-gpt-4示例文档-最强js助手聊天机器人应用从0到1快速入门——官网推荐的48种最佳应用场景（附python/node.js/curl命令源代码，小白也能学）(代码片
ChatGPT绝对可以成为你使用JavaScript的最强助手，无论我们在编写JavaScript代码时遇到什么困难，它都可以快速为我们提供解决方案，帮助我们更快地完成任务，提高JavaScript的编写效率和代码质量，节省时间和精力，让我们的工作... 查看详情
sql知识点详细总结（附操作图解）(代码片段)
目录查询已有数据库和表SELECT语句+列名称查询列SELECT语句+AS关键字设定别名SELECT语句+常数SELECT语句+DISTINCT删除重复行SELECT语句+LIMIT限制返回行数SELECT语句+WHERE条件选取SELECT语句+算数运算符SELECT语句+比较... 查看详情
javascript面试题总结（附答案）-蛙课网
...答案，以供有面试需要的java程序员学习使用。1、什么是JavaScript？答：JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，Jav 查看详情
最强面试题整理第二弹：python进阶面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶（已完成）Python后台开发爬虫机器学习对每道面试题会附带详细 查看详情
最强面试题整理第二弹：python进阶面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶（已完成）Python后台开发爬虫机器学习对每道面试题会附带详细 查看详情
最强面试题整理第二弹：python进阶面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶（已完成）Python后台开发爬虫机器学习对每道面试题会附带详细 查看详情
最强面试题整理第一弹：python基础面试题（附答案）(代码片段)
...到很多的八股文，我结合自己的经验，整理Python最强面试题。Python最强面试题主要包括以下几方面：Python基础（已完成）Python进阶Python后台开发爬虫机器学习对每道面试题会附带详细的答案，无论是准备面... 查看详情