三剑客
万维网联盟（ World Wide Web Consortium ），创建于1994年10月，主要工作是对 web 进行标准化。
该组织定义了网页的开发需要如下3门技术：
- HTML:定义网页的结构
- CSS: 定义网页的表现，样式
- JavaScript: 定义网页的行为
一、HTML
★ HTML（HyperText Markup Language）：超文本标记语言。★ 超文本就是超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。★ 由标签构成的语言，HTML中的标签都是预定义好的。★ 语法规则:标签分为两种：双标签和单标签 <p></p> </br>注释：Ctrl+/ （快捷键） <!--注释内容-->
1、快速入门
第一步:创建一个名为HTML的文件夹
第二步：创建一个文本文件，然后修改文件名为hello.html
第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码:
★ html有固定的基本结构:
<!--************************************************* -->
<html><!--是根标签--><head><!--头标签--><title>网页的标题 </title><!--定义网页的标题--></head><body><!--显示在浏览器的内容区域--></body>
</html>
<!--************************************************* -->
html是超文本标记语言，还能修饰超文本，所以我们可以通过;img;来引入图片，其中该标签的src属性，用来指定图片的地址，代码如下：
<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1><img src='1.jpg'></img></body>
</html>
2、基础语法
1.标签不区分大小写
2.语法松散，大部分标签可以不要结束标签，部分结构标签也不是必须的
3.标签属性单引号双引号皆可
4.文件后缀可以是.html也可以是.htm
<!--**********************************************-->
★ 基础标签:
<h1> ~ <h6>定义标题，h1最大，h6最小
<font> 定义文本的字体，字体大小，字体颜色
<b> 定义粗体文本
<i> 定义斜体文本
<u> 定义文本下划线
HTML <i>HTML</i> <b>HTML</b> <u>HTML</u>
<hr><!--***************************************************-->
<center> 定义文本居中
<p> 定义段落
<br> 定义折行
<hr> 定义水平线
<img 图片标签 ，src=“设置图片路径” ，alt=“图片找不到显示的默认的信息”`
width =“设置宽度” heigh=“设置高度”
src 的三种路径的书写方式 ：
1、绝对磁盘：D:/img/A.png
2、绝对网络路径: https://baidu.com
3、相对路径: ../img/a.png
<audio src="" controlls autoplay loop>音频标签</audio>
contrllos显示播放按钮的控件
autoplay
loop循环播放
<!--****************************************************************-->
<!-- 标识当前文档是HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集 --><meta charset="UTF-8"><!-- 浏览器兼容问题 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-基础文本标签</title>
</head>
<body><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><!--标题标签从h1到h6，也可以自己写h0或h7这种，但是不会生效--><h0>h0</h0><h7>h7</h7>
</body>
</html>
<!--字体标签--><font> 字体标签，修饰文本的颜色、大小、样式color ：设置文本的颜色size ：设置文本的大小，取值为1-7，其中1最小，7最大face ：用来设置字体。如 "楷体"、"宋体"等★ color属性取值有3种，分别是：
● 英文单词：颜色的单词。
● rgb(值1，值2，值3)三原色表示法，取值范围为0-255之间
● #值1值2值3 还是三原色表示法，上述的简写方式，取值是16进制法，所以在00-FF之间
<!--********************************************************--><!--字体标签，主要涉及颜色、大小、样式--><font color="green">我绿了</font><font size="24px">我是24px的字体</font><font size="1">我是1号字体</font><font color="#FF00FF">我的颜色是#FF00FF</font><font face="华文琥珀">我是华文琥珀</font>
<!--******************************************************--><center>HTML</center>居中标签
<hr>
段落标签:
<p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。</p>
<p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。</p>
文本标签全部代码如下:<!-- 标识当前文档是HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集 --><meta charset="UTF-8"><!-- 浏览器兼容问题 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-基础文本标签</title>
</head>
<body><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><!-- HTML颜色描述:1. 英文单词: red, green, blue2. RGB(值1, 值2, 值3): 红色, 绿色, 蓝色 ---- 0-255 (不推荐)3. #值1值2值3 : 红色, 绿色, 蓝色 ----------- 00-FF (十六进制)--><font color="#00FF00" size="6" face="楷体">HTML,基础标签</font>
<hr>
<center>HTML</center>
<hr>
HTML <br><i>HTML</i> <br><b>HTML</b> <br><u>HTML</u> <br>
<hr>
已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。<br>
而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。
<hr>
<p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。</p>
<p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。</p></body>
</html>
3、图片音频视频标签
<img>在页面上引入图片的height:用来定义图片的高度width:用来定义图片的宽度src:规定显示图像的 url（统一资源定位符）
<audio>定义音频(支持MP3、MAV、OGG)src:规定音频的 urlcontrols:显示播放控件
<video>定义视频(支持MP4、WebM、OGG)src:规定视频的 urlcontrols:显示播放控件
第一步：首先在html目录下分别创建用于存放视频，音频，图片的video,audio,img文件夹，然后讲资料提供的视频，音频，图片分别复制到对应的目录下。
第二步：创建名为02. HTML-图片音频视频标签.html的文件。
然后把编写3个标签，分别去引入资源
第三步：使用浏览器打开后，呈现的完整效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-图片音视频标签</title>
</head>
<body><!-- 路径: 1. 绝对路径: 绝对磁盘路径 , 绝对网络路径2. 相对路径: 当前路径: . ./img/01.jpg == img/01.jpg上级目录: ..尺寸单位:1. 像素 px2. 百分比 %--><!-- <img src="C:\Users\Administrator\Pictures\Camera Roll\1.jpg" > --><!-- <img src="https://p2.img.cctvpic.com/photoworkspace/contentimg/2022/09/19/2022091919443292317.jpg" > --><img src="img/01.jpg" height="200" width="300"/>
<audio src="audio/01.mp3" controls></audio>
<video src="video/01.mp4" controls height="200" width="300"></video></body>
</html>
注意：填写视频等资源的路径，路径建议采用相对路径。
4、超链接标签
<a> 定义超链接，用于连接到另一个资源href: 指定需要访问的资源的URLtarget: _self,默认值，在当前页面打开, _blank在空白页打开
<table>定义表格broder:规定表格边框的粗细width:规定表格的宽度cellspacing:规定单元格之间的空白
<tr> 定义表格的行 align:定义表格行的内容对齐方式
<td> 定义普通单元格
<th> 定义表头单元格，会有加粗居中的效果
<!--*************************************************************************--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-超链接表格标签</title>
</head>
<body>
<a href="https://www.itcast.cn" target="_self">传智教育</a> <br>
<a href="https://www.itheima.com" target="_blank">黑马程序员</a>
</body>
</html>
5、布局标签
<div> 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面。
<span>用来组合行内元素。一般用来展示文本<!--****************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-布局标签</title>
</head>
<body>
<div>我是div1</div><div>我是div2</div>
<span>我是span1</span><span>我是span2</span>
</body>
</html>
- div占据一整行，span仅仅占据文本部分
- div的高度想要高一点，可以通过css设置高度，此处我们不做演示。
6、表单标签
<form> 定义表单的action:定义表单数据提交的服务器地址method:定义表单数据提交的方式，一般有get和post这2种
<input>定义表单项，通过type属性控制输入形式,接受用户的信息type:定义input表单项的表现形式，例如：文本框，密码框等
<select>定义下拉列表，<option>子标签定义选项
<textarea>定义文本域★ 表单项标签和表单标签是配合在一起工作的，表单项标签必须书写在表单标签<form>中。
<!--**********************************************************************--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单标签</title>
</head>
<body><form><input type="text" name="username"><input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>
当我们点击提交时,我们数据提交到哪里去呢？以什么方式去提交呢？所以我们需要指定<form>表单标签的action属性和method属性，此时我们没有服务器，action属性值为空即可。<form action="" method="get">
通过f12（或者右键检查）打开浏览器开发者工具，此处建议使用谷歌浏览器，来到network标签页进行抓包。点击提交按钮，观察抓包的结果，此处需要注意，表单提交的方式如果是get，那么提交表单时，参数会遵循url?key=value&key=value的格式跟在地址的后面，其中，value就是用户填写的内容，自习观察key，key是表单项标签name的属性值。修改<form>表单标签的method属性值为post，此时url地址的后面没有提交的参数了，我们可以去Payload页去查看post请求提交的参数。
<!--********************************************************************--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单标签</title>
</head>
<body>
<!-- action: 表单数据提交的url , 如果未指定, 默认提交到当前页面.
表单项要想被提交必须指定name属性
method: 表单提交方式 ; get: 默认值 , 表单数据在url后面拼接 ?username=java&age=22 ; url长度有限 .post：参数隐藏在请求体中，长度无限制--><form action="" method="post"><input type="text" name="username"><input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>
7、表单项标签
<input>定义表单项，通过type属性控制输入形式,接受用户的信息type:定义input表单项的表现形式，例如：文本框，密码框等
<select>定义下拉列表，<option>字标签定义选项
<textarea>定义文本域● type取值以及表现形式如下:text: 默认值，定义单行的输入字段password: 定义密码字段radio:定义单选按钮 checkbox:定义复选框file:定义文件上传按钮hidden:定义一个隐藏的表单项submit:定义提交按钮，提交按钮会把表单数据发送到服务器端reset:定义重置按钮，重置按钮会清除表单中的所有数据button: 定义可点击按钮
<!--******************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单项标签</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="http://wwww.baidu.com" method="post">姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
性别: <input type="radio" name="gender" value="1"> 男<input type="radio" name="gender" value="2"> 女 <br><br>
爱好: <input type="checkbox" name="hobby" value="java"> java <input type="checkbox" name="hobby" value="game"> game <input type="checkbox" name="hobby" value="sing"> sing <br><br>
图像: <input type="file" name="image"> <br><br>
学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">初中</option><option value="2">高中</option><option value="3">大专</option><option value="4">本科</option><option value="5">硕士</option><option value="6">博士</option></select> <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="按钮"> <br>
</form>
</body>
</html>
二、CSS
1、css的引入方式
● 内联样式：在标签内使用style属性，属性值是css属性键值对；
● 内部样式：定义<style>标签，在标签内部定义css样式
● 外部样式: 定义<link>标签，通过href属性引入外部css文件
● 1. 内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
● 2. 内部样式，通过定义css选择器，让样式作用于指定的标签上
● 3. 外部样式，html和css实现了完全的分离，企业开发常用方式。
<!--************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS-引入方式</title><!-- 内部样式 --><!-- <style>div{color: red; font-size:40px}</style> --><!-- 外部样式 --><link rel="stylesheet" href="css/demo.css">
</head>
<body>
<!-- 内联样式 --><!-- <div style="color: red; font-size:40px">CSS 引入方式</div> --><div>CSS 引入方式</div><div>CSS 引入方式</div>
</body>
</html>
2、选择器和属性
选择器是选取需设置样式的元素（标签）。
● 选择器通用语法如下：
选择器名 {css样式名：css样式值;css样式名：css样式值;
}
★ 1.元素（标签）选择器：
- 选择器的名字必须是标签的名字
- 作用：选择器中的样式会作用于所有同名的标签上
元素名称 {css样式名:css样式值；
}div{color: red;}
★ 2.id选择器:
- 选择器的名字前面需要加上#
- 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签。
#id属性值 {css样式名:css样式值；
}
#did{color: blue;
}
★ 3.类选择器：
- 选择器的名字前面需要加上.
- 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个。
.class属性值 {css样式名:css样式值；
}
.cls{color: aqua;}
/****************************************************************************/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS-选择器</title><style>div{color: red;}#did{color: blue;}.cls{color: aqua;}</style>
</head>
<body><div>Hello CSS</div><div id="did">Hello CSS id</div><div class="cls">Hello CSS class</div>
</body>
</html>
三、JavaScript
1、js引入方式
★ 第一种方式：内部脚本，将JS代码定义在HTML页面中- JavaScript代码必须位于<script></script>标签之间- 在HTML文档中，可以在任意地方，放置任意数量的<script>- 一般会把脚本置于<body>元素的底部，可改善显示速度
<script>alert("Hello JavaScript")
</script>
★ 第二种方式：外部脚本将JS代码定义在外部 JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含<script>标签
- 引入外部js的<script>标签，必须是双标签
<script src="js/demo.js"></script>
<!--*********************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title><!-- 内部脚本 --><!-- <script>alert('Hello JS');</script> -->
<!-- 外部脚本 --><script src="js/demo.js"></script>
</head>
<body>
</body>
</html>
2、基础语法
★ 语法规则如下：
- 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无
- 大括号表示代码块
- 注释：- 单行注释：// 注释内容- 多行注释：/* 注释内容 */
★ js中3种输出语句，来演示书写语法
window.alert()//警告框
document.write()//在HTML 输出内容
console.log()//写入浏览器控制台
//**************************************************************
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基本语法</title>
</head>
<body></body>
<script>/* alert("JS"); */
//方式一: 弹出警告框// window.alert("hello js");
// //方式二: 写入html页面中// document.write("hello js");
//方式三: 控制台输出console.log("hello js");
</script>
</html>
3、变量
★ js中主要通过如下3个关键字来声明变量的：
● var:早期ECMAScript5中用于变量声明的关键字，可以重复声明
● let:ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效，并且不能重复声明
● const声明常量的，常量一旦声明，不能修改
注意:- JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。- 变量名需要遵循如下规则：- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）- 数字不能开头- 建议使用驼峰命名
<!--*****************************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基础语法</title>
</head>
<body></body>
<script>
//var定义变量// var a = 10;// a = "张三";// alert(a);
//特点1 : 作用域比较大, 全局变量//特点2 : 可以重复定义的// {// var x = 1;// var x = "A";// }// alert(x);
//let : 局部变量 ; 不能重复定义 // {// let x = 1;// alert(x);// }//const: 常量 , 不能给改变的.const pi = 3.14;pi = 3.15;alert(pi);
</script>
</html>
4、数据类型
js是弱数据类型的语言，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型：
■ number ：数字（整数、小数、NaN(Not a Number)）
■ string ：字符串，单双引皆可
■ boolean：布尔。true，false
■ object：对象类型，null也是object
■ undefined：当声明的变量未初始化时，该变量的默认值是 undefined。
■ 使用typeof函数可以返回变量的数据类型
<!--****************************************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-数据类型</title>
</head>
<body>
</body>
<script>
//原始数据类型alert(typeof 3); //整数numberalert(typeof 3.14); //小数numberalert(typeof 3.14/0);//NaN（not a number）非数字alert(typeof "A"); //stringalert(typeof 'Hello');//string
alert(typeof true); //booleanalert(typeof false);//boolean
alert(typeof null); //object
var a ;alert(typeof a); //undefined</script>
</html>
<!--*************************************************************************-->
● 算术运算符: + , - , * , / , % , ++ , --
● 赋值运算符: = , += , -= , *= , /= , %=
● 比较运算符: > , < , >= , <= , != , ==,=== 注意: == 会进行类型转换，=== 不会进行类型转换
● 逻辑运算符: && , || , !
● 三元运算符条件表达式 ? true_value: false_value注意：● ==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较● ===：不光比较值，还要比较类型，如果类型不一致，直接返回false
<!--************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-运算符</title>
</head>
<body></body>
<script>var age = 20;var _age = "20";var $age = 20;alert(age == _age);//true ，只比较值alert(age === _age);//false ，类型不一样alert(age === $age);//true ，类型一样，值一样
</script>
</html>
5、函数
JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。
★ 第一种定义格式:
function 函数名(参数1,参数2..){要执行的代码
}
注意：
- 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
- 返回值也不需要声明类型，直接return即可。
- 函数需要被调用才能执行！
function add(a, b){return a + b;
}
let result = add(10,20);
alert(result);
定义的add函数有返回值，所以我们可以接受返回值。
★ 第二种定义格式
var functionName = function (参数1,参数2..){ //要执行的代码
}
<script>//定义函数-1// function add(a,b){// return a + b;// }//定义函数-2var add = function(a,b){return a + b;}//函数调用var result = add(10,20);alert(result);
</script>
调用add函数时，再添加2个参数
var result = add(10,20,30,40);
浏览器打开，发现没有错误，并且依然弹出30，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。
6、对象
大体分页3大类：第一类：基本对象,我们主要学习Array和JSON和String第二类：BOM对象,主要是和浏览器相关的几个对象。 第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象。
基本对象：
● Array对象时用来定义数组的。常用语法格式有如下2种：■ var 变量名 = new Array(元素列表); ■ var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）■ var 变量名 = [ 元素列表 ]; ■ var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）
● 通过索引来获取数组中的值■ arr[索引] = 值;
<!--**********************************************************************-->
<script>//定义数组var arr = new Array(1,2,3,4);var arr = [1,2,3,4];//获取数组中的值，索引从0开始计数console.log(arr[0]);console.log(arr[1]);
</script>
特点：JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。
Array的属性和方法：
length：设置或返回数组中元素的数量。
<!--************************************************************-->
方法：
forEach()：遍历数组中的每个有值得元素，并调用一次传入的函数
//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){console.log(e);
})
push()：将新元素添加到数组的末尾，并返回新的长度//push: 添加元素到数组末尾arr.push(7,8,9);console.log(arr);
splice()：从数组中删除元素
参数1：表示从哪个索引位置删除
参数2：表示删除元素的个数
//splice: 删除元素
arr.splice(2,2);
console.log(arr);
<!--**********************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-Array</title>
</head>
<body></body>
<script>//定义数组// var arr = new Array(1,2,3,4);//特点: 长度可变 类型可变var arr = [1,2,3,4];arr[10] = 50;// for (let i = 0; i < arr.length; i++) {// console.log(arr[i]);// }
// console.log("==================");
//forEach: 遍历数组中有值的元素// arr.forEach(function(e){// console.log(e);// })// //ES6 箭头函数: (...) => {...} -- 简化函数定义// arr.forEach((e) => {// console.log(e);// })
//push: 添加元素到数组末尾// arr.push(7,8,9);// console.log(arr);
//splice: 删除元素arr.splice(2,2);console.log(arr);
</script>
</html>★ String对象
创建方式有2种：
var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二
new String创建的是引用类型，直接引号的是值类型不仅console能看出区别，typeof也能看出区别
<script>//创建字符串对象//var str = new String("Hello String");var str = " Hello String ";console.log(str);
</script>
String对象的属性和方法：
length：字符串的长度。
方法：
charAt()：返回在指定位置的字符。
indexOf()：检索字符串。
trim()：去除字符串两边的空格
substring()：提取字符串中两个指定的索引号之间的字符。
<!--***********************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-String</title>
</head>
<body></body>
<script>//创建字符串对象//var str = new String("Hello String");var str = " Hello String ";console.log(str);//lengthconsole.log(str.length);//charAtconsole.log(str.charAt(4));//indexOfconsole.log(str.indexOf("lo"));//trimvar s = str.trim();console.log(s.length);
//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)console.log(s.substring(0,5));
</script>
</html>
★ JS对象:
自定义对象格式:var 对象名 = {属性名1: 属性值1, 属性名2: 属性值2,属性名3: 属性值3,函数名称: function(形参列表){}
};
调用方法：对象名.属性名
类似Java的创建方式（不常用）：var 对象名 = new Object();对象名.属性名="1";对象名.属性名="2";
或者自定义构造函数的方式（不常用）：
function Person(name, age){this.name = namethis.age = age
}
var p1 = new Person('Tom',18)
<!--***********************************************************-->
<script>//自定义对象var user = {name: "Tom",age: 10,gender: "male",eat: function(){console.log("用膳~");}}
console.log(user.name);user.eat();
<script>
★ json对象JSON对象：Java Script Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：
{"key":value,"key":value,"key":value
}key必须使用引号并且是双引号标记，value可以是任意数据类型。json这种数据格式的文本,经常用来作为前后台交互的数据载体,可以清晰的描述java中需要传递给前端的java对象。
★ xml格式存在如下问题：
- 标签需要编写双份，占用带宽，浪费资源
- 解析繁琐 var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);因为上述是一个json字符串，不是json对象，会使输出结果为undefined，所以我们可以使用如下函数来进行json字符串和json对象的转换。var obj = JSON.parse(jsonstr);alert(obj.name);通过如下函数将json对象再次转换成json字符串。alert(JSON.stringify(obj));
<!--**************************************************************************--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-JSON</title>
</head>
<body>
</body>
<script>//自定义对象// var user = {// name: "Tom",// age: 10,// gender: "male",// // eat: function(){// // console.log("用膳~");// // }// eat(){// console.log("用膳~");// }// }// console.log(user.name);// user.eat();// //定义jsonvar jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';//alert(jsonstr.name);// //json字符串--js对象var obj = JSON.parse(jsonstr);//alert(obj.name);// //js对象--json字符串alert(JSON.stringify(obj));
</script>
</html>
7、BOM对象
BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。
★ BOM中提供了如下5个对象：● Window: 浏览器窗口对象● Navigator:浏览器对象● Screen: 屏幕对象● History:历史记录对象● Location:地址栏对象
5个对象，我们重点学习的是Window对象、Location对象这2个。
1.window对象
window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.
window.alert('hello');可以简写为：alert('hello')
★ window对象提供了获取其他BOM对象的属性：
● history：用于获取history对象
● location：用于获取location对象
● Navigator：用于获取Navigator对象
● Screen：用于获取Screen对象
★ window常用的函数：
● alert()：显示带有一段消息和一个确认按钮的警告框。
● comfirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
● setInterval(fn,毫秒值)：按照指定的周期（以毫秒计）来调用函数或计算表达式。fn:函数，需要周期性执行的功能代码。毫秒值：间隔时间
//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){i++;console.log("定时器执行了"+i+"次");
},2000);
● setTimeout(fn,毫秒值)：在指定的毫秒数后调用函数或计算表达式。只会在一段时间后执行一次功能。
//定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){alert("JS");
},3000);
2.Location对象
location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息。//获取浏览器地址栏信息alert(location.href);//设置浏览器地址栏信息location.href = "https://www.itcast.cn";
<!--**************************************************************************************--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-BOM</title>
</head>
<body></body>
<script>//获取// window.alert("Hello BOM");// alert("Hello BOM Window");//方法//confirm - 对话框 -- 确认: true , 取消: false// var flag = confirm("您确认删除该记录吗?");// alert(flag);//定时器 - setInterval -- 周期性的执行某一个函数// var i = 0;// setInterval(function(){// i++;// console.log("定时器执行了"+i+"次");// },2000);//定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){// alert("JS");// },3000);//locationalert(location.href);location.href = "https://www.itcast.cn";
</script>
</html>
8、DOM对象
DOM：Document Object Model 文档对象模型。
JavaScript 将 HTML 文档的各个组成部分封装为对象。
HTML文档的封装对象为：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
DOM技术主要作用：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
<!--***************************************************************-->
获取DOM中的元素对象。HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api
● document.getElementById() //根据id属性值获取，返回单个Element对象
● document.getElementsByTagName()//根据标签名称获取，返回Element对象数组
● document.getElementsByName()//根据name属性值获取，返回Element对象数组
● document.getElementsByClassName()//根据class属性值获取，返回Element对象数组
<!--********************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head>
<body><img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body>
<script>//1. 获取Element元素//1.1 获取元素-根据ID获取// var img = document.getElementById('h1');// alert(img);//1.2 获取元素-根据标签获取 - div// var divs = document.getElementsByTagName('div');// for (let i = 0; i < divs.length; i++) {// alert(divs[i]);// }//1.3 获取元素-根据name属性获取// var ins = document.getElementsByName('hobby');// for (let i = 0; i < ins.length; i++) {// alert(ins[i]);// }//1.4 获取元素-根据class属性获取// var divs = document.getElementsByClassName('cls');// for (let i = 0; i < divs.length; i++) {// alert(divs[i]);// }//2. 查询参考手册, 属性、方法var divs = document.getElementsByClassName('cls');var div1 = divs[0]; div1.innerHTML = "传智教育666";
</script>
</html>
四、JavaScript事件
什么是事件呢？
- 按钮被点击
- 鼠标移到元素上
- 输入框失去焦点
- ........
我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。JavaScript事件是js非常重要的一部分。主要围绕2点来学习：
- 事件绑定
- 常用事件
1、事件绑定
JavaScript对于事件的绑定提供了2种方式：
★ - 方式1：通过html标签中的事件属性进行绑定,可以借助标签的onclick属性，属性值指向一个函数。
<input type="button" id="btn1" value="事件绑定1" οnclick="on()">
● 创建on函数
<script>function on(){alert("按钮1被点击了...");}
</script>
★ - 方式2：通过DOM中Element元素的事件属性进行绑定
● 依据DOM的知识点可以知道html中的标签会被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。
<input type="button" id="btn2" value="事件绑定2">
● 通过id属性获取按钮对象，操作对象的onclick属性来绑定事件
document.getElementById('btn2').onclick = function(){alert("按钮2被点击了...");
}
■ 注意：事件绑定的函数，只有在事件被触发时，函数才会被调用。
<!--*****************************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-事件绑定</title>
</head>
<body><input type="button" id="btn1" value="事件绑定1" οnclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body>
<script>function on(){alert("按钮1被点击了...");}document.getElementById('btn2').onclick = function(){alert("按钮2被点击了...");}
</script>
</html>
2、常用事件
★ 常用的事件属性：
onclick：鼠标单击事件
onblur：元素失去焦点。失去焦点事件，前提是输入框获取焦点的状态下，在输入框之外的地方点击，光标从输入框中消失了，这就是失去焦点。
onfocus：元素获得焦点。获取焦点事件，鼠标点击输入框，输入框中光标一闪一闪的，就是输入框获取焦点了。
onload：某个页面或图像被完成加载
onsubmit：当表单提交时触发该事件
onmouseover：鼠标被移到某元素之上
onmouseout：鼠标从某元素移开
<!--********************************************************************-->
案例要求：
1. 点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡
2. 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
3. 点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-案例</title>
</head>
<body>
<img id="light" src="img/off.gif"> <br>
<input type="button" value="点亮" οnclick="on()"> <input type="button" value="熄灭" οnclick="off()"><br> <br><input type="text" id="name" value="ITCAST" οnfοcus="lower()" οnblur="upper()"><br> <br>
<input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" οnclick="checkAll()"> <input type="button" value="反选" οnclick="reverse()">
</body>
<script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img = document.getElementById("light");
//b. 设置src属性img.src = "img/on.gif";}
function off(){//a. 获取img元素对象var img = document.getElementById("light");
//b. 设置src属性img.src = "img/off.gif";}
//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input = document.getElementById("name");
//b. 将值转为小写input.value = input.value.toLowerCase();}
function upper(){//大写//a. 获取输入框元素对象var input = document.getElementById("name");
//b. 将值转为大写input.value = input.value.toUpperCase();}
//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");
//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");
//b. 设置未选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = false;}}
</script>
</html>
五、Vue框架
1、Vue概述
为了提高前端的开发效率就需要我们使用DOM操作，通过这种开发流程就引入了：MVVM:其实是Model-View-ViewModel的前端开发思想;
- Model: 数据模型，特指前端中通过请求从后台获取的数据。
- View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据。
- ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上。
★ 使用ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，会让数据展示到视图的代码开发变得更加的简单。
★ Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计，Vue 的核心库只关注视图层而且容易与其它库或已有项目整合。
★ Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2、使用方法
★ 第一步：在VS Code中创建名为12. Vue-快速入门.html的文件，并且在html文件同级创建js目录，将资料/vue.js文件目录下得vue.js拷贝到js目录。
★ 第二步：然后编写<script></script>标签来引入vue.js文件<script src="js/vue.js"></script>
★ 第三步：在js代码区域定义vue对象，最好写在body下方，否则vue对象会找不到app这个元素。
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue"}})
</script>
Vue几个常用的属性： - el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值- data: 用来定义数据模型- methods: 用来定义函数。这个我们在后面就会用到
★ 第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的。
<body><div id="app"><input type="text" v-model="message">{{message}}</div>
</body>
<!--*******************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><script src="js/vue.js"></script>
</head>
<body>
<div id="app"><input type="text" v-model="message">{{message}}</div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue"}})
</script>
</html>
3、vue指令
<!--***************************************************************-->
★ Vue指令:HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
<!--***********************************************-->
v-bind: //为HTML标签绑定属性值，如设置 href , css样式等
v-model: //在表单元素上创建双向数据绑定
v-on: //为HTML标签绑定事件
v-if: //条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else:
v-else-if:
v-show: //根据条件展示某元素，区别在于切换的是display属性的值
v-for: //列表渲染，遍历容器的元素或者对象的属性
<!--******************************************************************-->
v-bind和v-model
v-bind: 当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-bind</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><a >链接1</a><a >链接2</a><input type="text" ></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{url: "https://www.baidu.com"}})
</script>
</html>
我们需要给<a>标签的href属性赋值，并且值应该来自于vue对象的数据模型中的url变量。<a v-bind:href="url">链接1</a>注意：html属性前面有:表示采用的vue的属性绑定！★ v-model： 在表单元素上创建双向数据绑定.
★ 双向绑定：- vue对象的data属性中的数据变化，视图展示会一起变化。- 视图数据发生变化，vue对象的data属性中的数据也会随着变化。- 只有表单项标签！所以双向绑定一定是使用在表单项标签上的<input type="text" v-model="url">
★ 双向绑定的作用：可以获取表单的数据的值，然后提交给服务器<!--************************************************************************************--> <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-bind</title><script src="js/vue.js"></script>
</head>
<body><div id="app">
<a v-bind:href="url">链接1</a><a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{url: "https://www.baidu.com"}})
</script>
</html>
v-on
v-on: 用来给html标签绑定事件的。需要注意的是如下2点：
- v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数。
- v-on语法绑定事件时，事件名相比较js中的事件名，没有on。
<input οnclick="demo()">
vue中，事件绑定demo函数
<input v-on:click="demo()">
<!--********************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-on</title><script src="js/vue.js"></script>
</head>
<body><div id="app">
<input type="button" value="点我一下"><input type="button" value="点我一下">
</div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {}})
</script>
</html>
在vue对象的methods属性中定义事件绑定时需要的handle()函数methods: {handle: function(){alert("你点我了一下...");}
}
给第一个按钮，通过v-on指令绑定单击事件<input type="button" value="点我一下" v-on:click="handle()">
v-on也存在简写方式，即v-on: 可以替换成@所以第二个按钮绑定单击事件的代码如下：
<input type="button" value="点我一下" @click="handle()">
v-if和v-show
<!--*********************************************************************-->
v-if: //条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else:
v-else-if:
v-show: //根据条件展示某元素，区别在于切换的是display属性的值
★ <!--使用条件判断age<=35,中年人我们需要使用条件判断age>35 && age<60,其他情况是老年人。所以通过v-if指令编写如下代码：-->
年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>
★ v-show和v-if的作用效果是一样的，只是原理不一样。
年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>
★ 两者的区别：v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。
<!--***************************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-if与v-show</title><script src="js/vue.js"></script>
</head>
<body><div id="app">年龄<input type="text" v-model="age">经判定,为:<span v-if="age <= 35">年轻人(35及以下)</span><span v-else-if="age > 35 && age < 60">中年人(35-60)</span><span v-else>老年人(60及以上)</span>
<br><br>
年龄<input type="text" v-model="age">经判定,为:<span v-show="age <= 35">年轻人(35及以下)</span><span v-show="age > 35 && age < 60">中年人(35-60)</span><span v-show="age >= 60">老年人(60及以上)</span>
</div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{age: 20},methods: {}})
</script>
</html>
v-for
v-for:这个指令是用来遍历的
格式如下：
<标签 v-for="变量名 in 集合模型数据">{{变量名}}
</标签>
注意：需要循环那个标签，v-for 指令就写在那个标签上。
使用索引：
<标签 v-for="(变量名,索引变量) in 集合模型数据"><!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->{{索引变量 + 1}} {{变量名}}
</标签>
<!--********************************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>
</html>
编写2种遍历语法，来遍历数组，展示数据，代码如下：<div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>
4、生命周期
vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后
重点关注的是mounted。
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后一般用于页面初始化自动的ajax请求后台数据。
创建名为18. Vue-生命周期.html的文件编写代码来演示效果。
<!--****************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app">
</div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {}})
</script>
</html>
我们编写mounted声明周期的钩子函数，与methods同级，代码如下：
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>
运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。
六、Ajax异步交互
★ Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。
★ Ajax作用：● 与服务器进行数据交互；前端通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上。● 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。如：搜索联想、用户名是否可用的校验等等。
■ 原生Ajax
jax请求是基于客户端发送请求，服务器响应数据的技术。需要提供服服务器端和编写客户端。
- 服务器端后台服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list备用地址：http://api.hhyp58.com/mock/92/emp/list
上述地址可以直接通过浏览器来访问；
- 客户端
★ 客户端的Ajax请求代码有如下4步：
● 第一步：首先我们再VS Code中创建AJAX的文件夹，并且创建名为01. Ajax-原生方式.html的文件，提供如下代码，主要是按钮绑定单击事件，我们希望点击按钮，来发送ajax请求
<!--**************************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原生Ajax</title>
</head>
<body><input type="button" value="获取数据" οnclick="getData()"><div id="div1"></div>
</body>
<script>function getData(){}
</script>
</html>
<!--**************************************************************************-->
● 第二步：创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，提供了各种方法。
//1. 创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
● 第三步：调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用send()方法向服务器发送请求。
//2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求
■ 补充:如果是GET方式，请求参数就跟在URL后面
如果是POST方式，请求参数是在调用send方法的时候传递
xmlHttpRequest.send("fname=Bill&lname=Gates");
● 第四步：我们通过绑定事件的方式，来获取服务器响应的数据。
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}
}
readyState的取值含义：
1 (载入)：已经调用open() 方法，但尚未发送请求；
2 (载入完成)： 请求已经发送完成；
3 (交互)：可以接收到部分响应数据；
4 (完成)：已经接收到了全部数据，并且连接已经关闭。
1、Axios技术
原生的Ajax请求的代码编写起来还是比较繁琐的,Axios是简单的发送Ajax请求的技术，它是对原生的AJAX进行封装，简化书写。
Axios官网是：https://www.axios-http.cn
★ Axios的基本使用，主要分为2步：
● 引入Axios文件
<script src="js/axios-0.18.0.js"></script>
使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种。
发送 get 请求:
axios({method:"get",url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){alert(resp.data);
})
发送 get 请求:
axios({method:"post",url:"http://localhost:8080/ajax-demo1/aJAXDemo1",data:"username=zhangsan"
}).then(function (resp){alert(resp.data);
});
axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：
- method属性：用来设置请求方式的。取值为 get 或者 post。
- url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为：url?参数名=参数值&参数名2=参数值2。
- data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。
回调函数就是一个被作为参数传递的函数
2、Axios快速入门
后端实现：查询所有员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list 根据员工id删除员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById
前端实现：首先在VS Code中创建js文件夹，与html同级，然后将资料/axios-0.18.0.js 文件拷贝到js目录下，然后创建名为02. Ajax-Axios.html的文件。在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发送ajax请求:
<!-- *************************************************************************** -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" οnclick="get()"><input type="button" value="删除数据POST" οnclick="post()">
</body>
<script>function get(){//通过axios发送异步请求-getaxios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result => {console.log(result.data);})}function post(){// 通过axios发送异步请求-postaxios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"}).then(result => {console.log(result.data);})}
</script>
</html>
Axios还针对不同的请求方法的别名：
方法：
axios.get(url [, config]) //发送get请求
axios.delete(url [, config])//发送delete请求
axios.post(url [, data[, config]])//发送post请求
axios.put(url [, data[, config]])//发送put请求
可以将get请求代码改写成如下：
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);
})
post请求改写成如下：
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {console.log(result.data);
})
3、案例
需求：基于Vue及Axios完成数据的动态加载展示。
其中数据是来自于后台程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
步骤：
1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
3. 拿到数据，数据需要绑定给vue的data属性
4. 在<tr>标签上通过v-for指令遍历数据，展示数据
代码实现：
1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
<!--***********************************************************-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios-案例</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后操作时间</th></tr>
<tr align="center" v-for="(emp,index) in emps"><td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new Vue({el: "#app",data: {emps:[]},mounted () {//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);this.emps = result.data.data;})}});
</script>
</html>
七、前台分离开发
★前端开发有2种方式：前后台混合开发和前后台分离开发。● 前后台混合开发，顾名思义就是前台后台代码混在一起开发。
★ 这种开发模式有如下缺点：
- 沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用
- 分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
- 不便管理：所有的代码都在一个工程中
- 不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。
★ 目前基本都是采用的前后台分离开发方式：● 将原先的工程分为前端工程和后端工程这2个工程，然后前端工程交给专业的前端人员开发，后端工程交给专业的后端人员开发。
★ 接口文档：规范前后端的数据交流的规范统一性。● 前后端开发人员必须通过接口文档统一指定一套规范数据格式，这样下来就可以实现前后端数据交流。
★ 后台开发者开发一个功能的具体流程：
1. 需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
2. 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
3. 前后台并行开发：各自按照接口文档进行开发，实现需求
4. 测试：前后台开发完了，各自按照接口文档进行测试
5. 前后段联调测试：前段工程请求后端工程，测试功能
1、YAPI
YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
- API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
- Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。
首先我们登录YAPI的官网，然后使用github或者百度账号登录，没有的话去注册一个
登录进去后，在个人空间中，选择项目列表->添加测试项目。
然后点击创建的项目，进入到项目中，紧接着先添加接口的分类。
登录进去后，在个人空间中，选择项目列表->添加测试项目。
然后点击创建的项目，进入到项目中，紧接着先添加接口的分类。
2、前端工程化
我们目前的前端开发中，当我们需要使用一些资源时,vue.js，和axios.js文件，都是直接再工程中导入的,但是上述开发模式存在如下问题：
- 每次开发都是从零开始，比较麻烦
- 多个页面中的组件共用性不好
- js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护。
现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点:
- 模块化：将js和css等，做成一个个可复用模块
- 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
- 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
- 自动化：项目的构建，测试，部署全部都是自动完成
企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。
前端工程化入门
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。
Vue-cli主要功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
NodeJS安装和Vue-cli安装网上看。
NodeJS：NodeJS 是基于Chrome V8引擎的 JavaScript 运行环境。NodeJS使用事件驱动，非阻塞型I/O。NodeJS的包管理生态是 NPM，是现在世界上最大的开源程序包库。
/************************************************************/
前端工程化的一些常见特点和实践包括：
1. 构建工具：使用构建工具如Webpack、Gulp、Grunt等来自动化处理前端资源的打包、压缩、编译等任务，以提高开发效率。
2. 模块化：采用模块化的开发方式，使用模块化标准（如ES6的import/export、CommonJS等）将代码拆分成独立模块，并使用工具进行模块依赖管理，以提高代码的可维护性和复用性。
3. 自动化测试：编写自动化测试脚本，对前端代码进行单元测试、集成测试等，以确保代码质量和功能的稳定性。
4. 版本控制：使用版本控制系统（如Git）对代码进行管理，实现多人协作开发、版本回退、代码分支等功能，以提高团队协作效率。
5. 代码规范和静态检查：制定前端代码规范，使用工具（如ESLint、Prettier等）进行代码风格检查和静态代码分析，以提高代码质量和可读性。
6. 性能优化：通过代码压缩、图片优化、资源懒加载、缓存策略等手段，优化前端性能，提升网页加载速度和用户体验。
通过前端工程化的实践，可以提高前端开发的效率，并确保项目的质量和稳定性，同时促进团队协作和知识共享。
3、创建vue项目
首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面,然后再当前目录下，直接输入命令`vue ui`进入到vue的图形化界面，点击项目管理器,然后我门选择创建按钮，在vue文件夹下创建项目，选择包管理器为npm,最下面的git不打开，然后预设模板选择手动，然后再配置页面选择语言版本和语法检查规范，选择2.0版本，语法检查规范选择ESLint with error prevention only然后创建项目。最后我们只需要等待片刻，即可进入到创建创建成功的界面。
)
