1. 入门
1.1 JavaScript介绍
- JavaScript是一种客户端脚本语言,运行在客户端浏览器中,每一个浏览器都具备解析JavaScript的引擎
- 脚本语言:不需要编译,就可以被浏览器直接解析执行了
- 核心功能就是增强用户和HTML页面的交互过程,让页面有一些动态效果,以次来增强用户的体验
- 1995年,NetScape(网景)公司,开发的一门客户端脚本语言:LiveScript,后来,请SUN公司的专家来进行修改,后命名为:JavaScript
- 1996年,微软抄袭JavaSpript开发出JScript脚本语言
- 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户端脚本语言的编码方式
1.2 组成部分
- ECMAScript
- JavaScript的核心,描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义),ECMAScript是一套标准,定义了一种语言(比如JS)是什么样子。
- DOM(文档对象模型)
- HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
- BOM(浏览器对象模型)
1.3 基本使用
- 内部方式
- 外部方式
注意
- 在引入外部js的script标签中不能写其他的js代码了
- script标签必须有结束标签,不能是自闭合标签
1.4 开发环境搭建
- Node.js:JavaScript运行环境
- 傻瓜式安装,下一步即可
- 安装完成之后,打开dos命令符窗口,输入
node -v
,出现npm的版本信息则说明安装成功
- VSCode:编写前端技术的开发工具
2. 基本语法
2.1 注释
2.2 输入输出语句
2.3 变量和常量
- JavaScript属于弱类型的语言,定义变量时不区分具体的数据类型
- 定义局部变量
- 定义全局变量
- 定义常量
2.4 数据类型
2.5 运算符
- 算术运算符
运算符 | 说明 |
---|
+ | 加法运算 |
- | 减法运算 |
* | 乘法运算 |
/ | 除法运算 |
% | 取余数 |
++ | 自增 |
– | 自减 |
- 赋值运算符
运算符 | 说明 |
---|
= | 将等号右边的值赋值给等号左边的变量 |
+= | 相加后赋值 |
-= | 相减后赋值 |
*= | 相乘后赋值 |
/= | 相除后赋值 |
%= | 取余数后赋值 |
- 比较运算符
运算符 | 说明 |
---|
== | 判断值是否相等 |
=== | 判断数据类型和值是否相等 |
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
!= | 不等于 |
- 逻辑运算符
运算符 | 说明 |
---|
&& | 逻辑与,并且的功能 |
|| | 逻辑或,或者的功能 |
! | 取反 |
- 三元运算符
- 格式
- 执行流程
- 如果比较表达式为true,则取表达式1
- 如果比较表达式为false,则取表达式2
2.6 流程控制和循环语句
- if语句
let month = 3;
if(month >= 3 && month <= 5) {
document.write("春季");
}else if(month >= 6 && month <= 8) {
document.write("夏季");
}else if(month >= 9 && month <= 11) {
document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
document.write("冬季");
}else {
document.write("月份有误");
}
document.write("<br>");
- switch语句
switch(month){
case 3:
case 4:
case 5:
document.write("春季");
break;
case 6:
case 7:
case 8:
document.write("夏季");
break;
case 9:
case 10:
case 11:
document.write("秋季");
break;
case 12:
case 1:
case 2:
document.write("冬季");
break;
default:
document.write("月份有误");
break;
}
document.write("<br>");
- for语句
for(let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}
- while语句
let n = 6;
while(n <= 10) {
document.write(n + "<br>");
n++;
}
2.7 数组
- 数组的使用和java中的数组基本一致,但是在JavaScript中的数组更加灵活,数据类型和长度都没有限制
- 定义格式
let 数组名 = [元素1,元素2...];
let 数组名 = new Array();
- 添加元素
数组名[索引] = 值;
数组名.push(元素);
- 索引范围
- 数组长度
- 数组高级运算符…
2.8 函数
注意
- 函数不调用就不会执行
- js中的函数没有重载的概念,只有覆盖的概念
- 在调用方法时,只判断函数名,和参数没有关系
3. DOM
3.1 介绍
- DOM(Document Object Model):文档对象模型
- 将HTML文档的各个组成部分,封装为对象,借助这些对象,可以对HTML文档进行增删改查的动态操作
![](https://i-blog.csdnimg.cn/blog_migrate/c69c7a12a0973a1a8dcc04b9014ffc0d.png)
3.2 Element元素的操作
方法名 | 说明 |
---|
getElementById(id属性值) | 根据id获得一个元素 |
getElementsByTagName(标签名称) | 根据标签名称获得多个元素 |
getElementsByName(name属性值) | 根据name属性获得多个元素 |
getElementsByClassName(class属性值) | 根据class属性获得多个元素 |
子元素对象.parentElement属性 | 获取当前元素的父元素 |
createElement(标签名) | 创建一个新元素 |
appendChild(子元素) | 将指定子元素添加到父元素中 |
removeChild(子元素) | 用父元素删除指定子元素 |
replaceChild(新元素,旧元素) | 用新元素替换子元素 |
3.3 Attribute属性的操作
方法名 | 说明 |
---|
setAttribute(属性名,属性值) | 设置属性 |
getAttribute(属性名) | 根据属性名获取属性值 |
removeAttribute(属性名) | 根据属性名移除指定的属性 |
style属性 | 为元素添加样式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性的操作</title>
<style>
.aColor{
color: blue;
}
</style>
</head>
<body>
<a>点我呀</a>
</body>
<script>
let a = document.getElementsByTagName("a")[0];
a.setAttribute("href","https://www.baidu.com");
let value = a.getAttribute("href");
a.className = "aColor";
</script>
</html>
3.4 Text文本的操作
属性名 | 说明 |
---|
innerText | 添加文本内容,不解析标签 |
innerHTML | 添加文本内容,解析标签 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本的操作</title>
</head>
<body>
<div id="div"></div>
</body>
<script>
let div = document.getElementById("div");
div.innerText = "我是div";
div.innerHTML = "<b>我是div</b>";
</script>
</html>
4. 事件
4.1 介绍
- 事件指的就是当某些组件执行了某些操作后,会触发某些代码的执行
4.2 常用的事件
事件名 | 说明 |
---|
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onclick | 鼠标单击事件 |
ondblclick | 鼠标双击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onchange | 用户改变域的内容 |
4.3 了解的事件
事件名 | 说明 |
---|
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或按住 |
onkeyup | 某个键盘的键被松开 |
onmousedown | 某个鼠标按键被按下 |
onmouseup | 某个鼠标按键被松开 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
4.4 绑定事件
- 方式一
- 通过标签中的事件属性进行绑定
<button id="btn" onclick="执行的功能"></button>
- 方式二
- 通过DOM元素属性绑定
document.getElementById("btn").onclick = 执行的功能
5. 自定义对象
5.1 介绍
- 在JavaScript中同样也有面向对象,思想与Java中的类似
5.2 定义和使用对象
class 类名{
constructor(变量列表){
变量赋值;
}
方法名(参数列表){
方法体;
return 返回值;
}
}
let 对象名 = new 类名(实际变量值);
对象名.方法名();
5.3 字面量定义类和使用
let 对象名 = {
变量名 : 变量值,
变量名 : 变量值,
...
方法名 : function(参数列表){
方法体;
return 返回值;
},
...
};
对象名.变量名
对象名.方法名(实际参数);
5.4 继承
- 继承
- 让类与类产生子父类的关系,子类可以使用父类有权限的成员
- 继承关键字
- 顶级父类
6. 基本对象
6.1 Number
方法名 | 说明 |
---|
parseFloat() | 将传入的字符串浮点数转为浮点数 |
parseInt() | 将传入的字符串整数转为整数 |
isNaN() | 判断传入的值是不是NaN |
- NaN
- not a number :不是一个数字,非数字的类型
6.2 Math
方法名 | 说明 |
---|
ceil() | 向上取整 |
floor(x) | 向下取整 |
round(x) | 把数四舍五入为最接近的整数 |
random() | 随机数,返回的是0.0-1.0之间范围(含头不含尾) |
pow(x,y) | 幂运算,x的y次方 |
6.3 Date
- 构造方法
构造方法 | 说明 |
---|
Date() | 根据当前时间创建对象 |
Date(value) | 根据指定毫秒值创建对象 |
Date(year,month,[day,hours,minutes,seconds,milliseconds]) | 根据指定字段创建对象(月份是0-11) |
- 成员方法
成员方法 | 说明 |
---|
getFullYear() | 获取年份 |
getMonth() | 获取月份 |
getDate() | 获取天数 |
getHours() | 获取小时 |
getMinutes() | 获取分钟 |
getSeconds() | 获取秒数 |
getTime() | 返回从1970年1月1日至今的毫秒数 |
toLocaleString() | 返回本地日期格式的字符串 |
6.4 String
- 构造方法
构造方法 | 说明 |
---|
String(value) | 根据指定字符串创建对象 |
let s = “字符串” | 直接赋值 |
- 成员方法
成员方法 | 说明 |
---|
length属性 | 获取字符串长度 |
charAt(index) | 获取指定索引处的字符 |
indexOf(value) | 获取指定字符串出现的索引位置,找不到为-1 |
substring(start,end) | 根据指定索引范围截取字符串(含头不含尾) |
split(value) | 根据指定规则切割字符串,返回数组 |
replace(old,new) | 使用新字符串替代老字符串 |
6.5 RegExp(正则对象)
- 正则表达式
- 构造方法
构造方法 | 说明 |
---|
RegExp(规则) | 根据指定规则创建对象 |
let reg = /^规则$/ | 直接赋值 |
- 成员方法
成员方法 | 说明 |
---|
test(匹配的字符串) | 根据指定规则验证字符串是否符合 |
- 规则
表达式 | 说明 |
---|
[a] | 只能是a |
[abc] | 只能是abc中的某一个 |
[1] | 只能是1 |
[123] | 只能是123中的某一个 |
[a-z] | 可以是a到z中的某一个 |
[A-Z] | 可以是A到Z中的某一个 |
[0-9] | 可以是0到9中的某一个 |
- 数量词
表达式 | 说明 |
---|
* | 0次或者多次 |
+ | 1次或者多次 |
? | 0次或者一次 |
{m} | m次 |
{m,n} | 至少m次,最多n次 |
{m,} | 至少m次 |
{,n} | 最多n次 |
- 预定义字符
表达式 | 说明 |
---|
\d | 单个数字字符[0-9] |
\w | 单个单词字符[a-zA-Z_0-9] |
\s | 单个空白字符 |
- 示例代码
<script>
let reg1 = /^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888")+"<br/>");
let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zhangsan"));
</script>
6.6 Array
成员方法 | 说明 |
---|
push(元素) | 添加元素到数组的末尾 |
pop() | 删除数组末尾的元素 |
shift() | 删除数组最前面的元素 |
includes(元素) | 判断数组是否包含给定的值 |
reverse() | 反转数组中的元素 |
sort() | 对数组元素进行排序 |
6.7 Set
- JavaScript中的Set集合,元素唯一,存取顺序一致
- 构造方法
- 成员方法
成员方法 | 说明 |
---|
add(元素) | 向集合中添加元素 |
size属性 | 获取集合长度 |
keys() | 获取迭代器对象 |
delete(元素) | 删除指定元素 |
6.8 Map
- JavaScript中的Map集合,key唯一,存取顺序一致
- 构造方法
- 成员方法
成员方法 | 说明 |
---|
set(key,value) | 向集合中添加元素 |
size属性 | 获取集合长度 |
get(key) | 根据key获取value |
entries() | 获取迭代器对象 |
delete(key) | 根据key删除键值对 |
6.9 JSON
- JSON(JavaScript Object Notation):是一种轻量级的数据交换格式
- 它是基于ECMAScript规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言,易于人阅读和编写,同时也易于计算机解析和生成,并有效的提升网络传输效率
- 常用方法
成员方法 | 说明 |
---|
strinngify(对象) | 将指定对象转换为json格式的字符串 |
parse(字符串) | 将指定json格式的字符串解析成对象 |
- 代码示例
<script>
let weather = {
city : "北京",
date : "2088-08-08",
wendu : "10° ~ 23°",
shidu : "22%"
};
let str = JSON.stringify(weather);
document.write(str + "<br>");
let weather2 = JSON.parse(str);
document.write("城市:" + weather2.city + "<br>");
document.write("日期:" + weather2.date + "<br>");
document.write("温度:" + weather2.wendu + "<br>");
document.write("湿度:" + weather2.shidu + "<br>");
</script>
注意
- 所有的键必须使用双引号括起来
- 所有的值如果是数字类型则可以不加双引号
7. 表单校验案例
- 步骤分析
- 为表单绑定提交事件
- 获取填写的用户名和密码
- 判断用户名是否符合规则
- 判断密码是否符合规则
- 如果有一个条件不符合,则弹出提示消息,重新输入
- 如果所有的条件都满足,则提交表单
- 代码实现
<body>
<div class="login-form-wrap">
<h1>注册页面</h1>
<form class="login-form" action="#" id="regist" method="get" autocomplete="off">
<label>
<input type="text" id="username" name="username" placeholder="Username..." value="">
</label>
<label>
<input type="password" id="password" name="password" placeholder="Password..." value="">
</label>
<input type="submit" value="注册">
</form>
</div>
</body>
<script>
document.getElementById("regist").onsubmit = function(){
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let reg1 = /^[a-zA-Z]{4,16}$/;
if(!reg1.test(username)){
alert("用户名不符合,请输入4到16为纯字母");
return false;
}
let reg2 = /^[0-9]{6}$/;
if(!reg2.test(password)){
alert("密码不符合,请输入6位数字密码");
return false;
}
return true;
}
</script>
8. BOM
8.1 介绍
- BOM(Browser Object Model)
- 将浏览器的各个组成部分封装成不同的对象,方便我们进行操作
- Navigator:浏览器对象
- Window:窗口对象
- Location:地址栏对象
- History:历史记录对象
- Screen:显示器屏幕对象
8.2 Window窗口对象
- 定时器
- 一次性定时器
- 唯一标识setTimeout(功能,毫秒值):设置一次性定时器
- clearTimeout(标识):取消一次性定时器
- 循环定时器
- 唯一标识setInterval(功能,毫秒值):设置循环定时器
- clearInterval(标识):取消循环定时器
- 加载事件
- window.onload:在页面加载完毕后触发此事件的功能
8.3 Location地址栏对象