Web前端-JavaScript
JavaScript:
一：JavaScript基础：
一 书写：
😋 javscript代码书写在< script > < /script > 中 ，
😜 其中 < script >可放在head，body 标签中或 script.js文件下
1 | <!DOCTYPE html> |
二 变量：
1.命名：
1 | Int 整型 |
- 声明：
1 | var + 变量名（变量名类型根据变量名内容决定） |
😭 若无var声明，则默认创建全局变量
😥 未赋值的变量默认值为 underfined
三 函数：
**定义方法： **
| 静态方法 | function 函数名（参数列表）{ 函数体 ；return 函数返回值} |
|---|---|
| 动态匿名方法 | **var函数名 = new function(【“参数列表”】，”函数体“) ** |
| 直接量方法 | 函数名 = function （【“参数列表”】） { 函数体 } |
调用规则：
1.直接调用： 函数名（实参）
2.在连接中调用： < a href = “javascript: 函数名（）” > 描文字 < /a >
3.在事件中调用： 事件类型 = “函数名（）” 通常伴随< button >
4.递归调用
1 | <script> |
四 输出：
😀 JavaScript 没有任何打印或者输出的函数。
😘 JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
注：
1.其中 document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
2.innerHTML = “Paragraph changed.” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
例：
1 | <!DOCTYPE html> |
🎉 以上示例输出结果如下：
1 | <h1> 我的第一个 Web 页面 </h1> |
五 事件：
😜 样式：
1 | <some-HTML-element some-event='some JavaScript'> |
😭 常见 html 事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
例：
1 | <button onclick="this.innerHTML=Date()">现在的时间是?</button> |
🥓 示例结果如下：
1 | Sun May 23 2021 20:52:24 GMT+0800 (中国标准时间) |
六 运算符，循环，选择：
😝 运算符：关系
运算
逻辑
赋值
连接
😋 循环： for
while
break
continue
😀 选择： if
else
类似 C 语言，此处省略
七 正则表达式：
一：1.search() 方法使用正则表达式
🐷 用正则表达式搜索 “w3cschool” 字符串，且不区分大小写：
1 | var str = "Visit w3cschool"; |
输出结果： 6
2.search() 方法使用字符串
😡 检索字符串中 “w3cschool” 的子字符串：
1 | var str = "Visit w3cschool!"; |
输出结果： 6
3.replace() 方法使用正则表达式
😜 使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 w3cschool :
1 | var str = "Visit Microsoft!"; |
4.replace() 方法使用字符串
😘 replace() 方法将接收字符串作为参数：
1 | var str = "Visit Microsoft!"; |
二：1.使用 test()
👌 test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
1 | var patt = /e/; |
输出结果 ： true
2.使用 exec()
😀 exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。如果未找到匹配，则返回值为 null。
1 | /e/.exec("The best things in life are free!"); |
输出结果：e
3.使用 compile()
😡 compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
1 | var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); |
由于字符串中存在 “e”，而没有 “d”，以上代码的输出是： truefalse
三：1.正则表达式修饰符
👍 修饰符 可以在全局搜索中不区分大小写:
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
2.正则表达式模式
😭 方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
😁 元字符是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| \d | 查找数字。 |
| \s | 查找空白字符。 |
| \b | 匹配单词边界。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
😄 量词:
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
八 错误处理：
1. try 语句测试代码块的错误。
catch 语句处理错误。
1 | try |
2.throw 语句创建自定义错误。
1 | throw exception |
😡 异常可以是 JavaScript 字符串、数字、逻辑值或对象。
示例如下：
1 | <script> |
九 表单验证：
🙃 可通过JavaScript对表单数据：
- 验证表单数据是否为空
- 验证输入是否是一个正确的email地址
- 验证日期是否输入正确
- 验证表单输入内容是否为数字型
1.必填项目验证：
假如必填或必选项为空，那么警告框会弹出
1 | function validateForm() |
2. E-mail验证（是否符合邮箱格式）
要求：输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
1 | function validateForm() |
3.数字验证：
检查输入的数据是否是1~10之间的数字
1 | <script type="text/javascript"> |
十：JSON
JSON 是一种轻量级的数据交换格式。(类似于python中字典，存在关键字和值一一对应)
实例：
以下 JSON 语法定义了 employees 对象: 3 条员工记录（对象）的数组:
1 | {"employees":[ |
JSON 语法规则：
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：
1 | "firstName":"John" |
JSON 对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对：
1 | {"firstName":"John", "lastName":"Doe"} |
JSON 数组
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象：
1 | "employees":[ |
在以上实例中，对象 “employees” 是一个数组。包含了三个对象。
每个为个对象为员工的记录（姓和名）。
十一：javascript:void(0) 含义
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
例：
1 | <a href="javascript:void(0)">单此处什么也不会发生</a> |
注意：void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行
如：
1 | function getValue(){ |
执行完如上代码后b的值变为5，c的值变为7，而a未被赋值，因此a = undefined
href=”#”与href=”javascript:void(0)”的区别
# 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：**# + id**。
如果你要定义一个死链接请使用 javascript:void(0) 。
如：
1 | <a href="javascript:void(0);">点我没有反应的!</a> // 点击链接无反应 |
二：JavaScript HTML DOM
1.HTML DOM
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
1.查找 HTML 元素
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
2.HTML DOM 改变 HTML 内容
1.在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
例：
1 | <script> |
2.改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
1 | document.getElementById(id).innerHTML = new HTML |
3.改变 HTML 属性
1 | document.getElementById(id).attribute = new value |
3.HTML DOM 改变 CSS
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
1 | document.getElementById(id).style.property = new style |
4.HTML DOM 事件
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
对事件做出反应
1.onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
2.onchange 事件
onchange 事件常结合对输入字段的验证来使用。
3.onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
4.onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
5.HTML DOM EventListener
addEventListener() 方法用于向指定元素添加事件句柄。(可添加多个时间，且不会覆盖，若删除原事件需remove)
例：
1 | element.addEventListener("mouseover", myFunction); |
其中事件为针对鼠标做出的反应，function为反应做出的输出
6.HTML DOM 元素
1.创建新的 HTML 元素
（相当于在script中创建p或其他的本该属于script外其他标签里边的内容，即实现在script中对外界进行操控）
首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
如：
1 | <div id="div1"> |
以上script代码类似于在div里
1 | <p id="p3">这是一个新段落。</p> |
2.删除已有的 HTML 元素
1 | <script> |
