深入解析JavaScript变量生命周期、对象及Window相关特性
变量的生命周期
变量的生命期从它们被声明的时间开始。
函数执行完毕后，局部变量将不复存在。而当页面关闭时，全局变量则会消失。
自定义对象
对象也是一个变量，但对象可以包含多个值(多个变量)
定义对象
对象中可以有属性，也可以有方法
对象的属性
可以说 “ 对象是变量的容器”。
但是，我们通常认为 “ 对象是键值对的容器”。
键值对通常写法为 name : (键与值以冒号分割)。
键值对在 对象通常称为 对象属性。
访问对象的属性
//访问对象的属性 //方式1: var n = student.name; //方式2: var n2 = student["name"];
访问对象的方法
–浏览器对象模型
浏览器对象模型 (BOM) 使 有能力与浏览器"对话"。
BOM: ，中文浏览器对象模型。
尽管目前BOM尚未形成官方规范，然而，得益于现代浏览器对交互功能中类似的方法和特性的支持（几乎达到一致），这些方法和特性通常被视作BOM的一部分。
对象
各类浏览器普遍认可并兼容该对象，该对象代表浏览器窗口的功能。尽管针对该对象尚未制定公开的标准，但各大浏览器均对其提供了支持。
所有全局对象、函数以及变量均自然地成为对象的组成部分，而全局变量则被视为对象的特性。
全局函数是 对象的方法。
对象表示浏览器中打开的窗口。
对象属性 属性描述
对 对象的只读引用
对 对象的只读引用
用于窗口或框架的 对象
name
设置或返回窗口的名称
对象
. 对象包含浏览器的历史。
.对象在编写时可不使用 这个前缀。
常用方法:
对象
此对象旨在获取当前网页的网址，同时将浏览器导向至另一页面。
常用属性和方法:
获取当前页面的URL地址
刷新
跳转到index
跳转到百度
对象方法 方法描述
()
显示带有一段消息和一个确认按钮的警告框
()
显示带有一段消息以及确认按钮和取消按钮的对话框
()
显示可提示用户输入的对话框
open()
设置或返回窗口的名称
()
打开一个新的浏览器窗口或查找一个已命名的窗口
()
关闭浏览器窗口
()
在指定的毫秒数后调用函数或计算表达式
()
取消由 () 设置的
()
取消由 () 方法设置的
打开和关闭浏览器案例
弹框案例
定时器案例
之事件
HTML元素上所发生的行为统称为事件。在浏览HTML页面并执行特定操作时，诸如点击、按键等动作能够引发这些事件的发生。
HTML事件
HTML 事件可以是浏览器行为，也可以是用户行为。
页面一旦加载完毕、你轻触按钮、在文本框中输入文字等，均属于HTML事件的具体表现。
当事件发生之际，我们期望执行某些操作，比如在点击完“完成”按钮后期望页面跳转、在文本框内容输入完成后期望进行有效性验证等，这些操作我们便可以通过相应的实现来完成。
常用的HTML事件 事件描述
HTML 元素改变
用户点击 HTML 元素
用户在一个HTML元素上移动鼠标
用户从一个HTML元素上移开鼠标
用户按下键盘按键
浏览器已完成页面的加载
元素获取焦点时触发
元素失去焦点时触发
点击我试试
之DOM模型
借助 HTML DOM，我们可以实现对 HTML 文档中各个元素的访问。
DOM: ,文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型
HTML DOM 模型被构造为对象的树:
借助可编程的对象模型，我们得以拥有充分的能力，用以构建动态的HTML页面。
对象
当浏览器载入 HTML 文档, 它就会成为 对象
对象是 HTML 文档的根节点
通过对象，我们得以在脚本中实现对 HTML 页面中各个元素的访问。
提示：目标系目标之组成部分，可借助.属性对其进行查询。
对象常用方法 查找 HTML 元素常用方法 方法描述
.()
返回对拥有指定 id 的第一个对象的引用。
.me()
返回文档中所有指定类名的元素集合，作为 对象
.()
返回带有指定标签名的对象集合
.()
返回带有指定名称的对象集合
- li11111111111
- li11111111111
- li11111111111
- li11111111111
修改 HTML 内容和属性
修改内容
修改 HTML 内容的最简单的方法是使用 属性
修改 HTML 元素的内容的语法: 通过调用getElementById函数获取指定ID的元素，并将该元素的innerHTML属性设置为HTML内容。
请务必注意，文档（DOM）加载完毕后，切勿使用括号进行操作。这样做将会导致文档内容被替换。
修改 HTML 属性
修改 HTML 元素属性的语法: 方式1: 通过调用getElementById函数获取指定ID的元素，然后将该元素的属性值设置为新的属性值。 方式2: 通过调用getElementById函数获取指定ID的元素，然后使用setAttribute方法对元素的指定属性进行设置，赋予其相应的属性值。
hello world
获取元素ID为"myh1"的对象，为其添加"bg"类属性。 执行console.log操作，输出h1元素所拥有的class属性值。 console.log(h1.getAttribute("style"));//我们需要提取元素h1的style属性值修改 HTML 元素的css
修改 HTML 元素css的语法:
.(id)..=新样式
通过调用getElementById函数获取到id为"myli"的元素，然后设置其style属性中的color值为"blue"。 通过调用getElementById函数获取ID为"myli"的元素，并对其style属性中的fontFamily进行设置，将其值指定为“微软雅黑”。 获取元素ID为"myli"的对象，并对其样式中的字体大小属性进行设置，将其值修改为"24px"。
HTML DOM 元素 (节点) 创建新的 HTML 元素
为了构建新的 HTML 组件（节点），必须首先构造一个基础元素，随后将其嵌入到现有的元素结构之中。
动态添加一个元素-- appendChild 动态添加一个元素-- insertBefore
这是段落1
这是段落2
替换 HTML 元素
-()方法
这是一个段落。
这是另外一个段落。
删除HTML元素
-()方法
这是一个段落。
这是另外一个段落。
表单验证 表单验证意义与场景 降低服务器压力
拦截不符合标准的数据，防止其直接上传至服务器，能有效减少服务器的负担，并大幅提升用户的使用感受。
在互联网的早期阶段，表单内容繁杂，注册一个账号往往需要填写超过20个不同的信息项。一旦某个信息填写有误，用户就必须等待数十秒才能得到反馈。若采用表单验证功能，用户能够即时获得反馈，并且系统还能直接指引到填写错误的具体字段。尽管无刷新技术已经广泛使用，但仅依靠服务器端进行验证，仍存在数百毫秒的延迟，导致用户在使用过程中感受到一种不愉快的粘滞感。 表单验证常用事件与属性
表单经常需要做一些非空验证、长度验证、合法性验证等。
英雄会注册
的 对象 概念
:是正则表达式( )的简写。
正则表达式，又称RE，是编程中常用的一种表达方式，它通过一条字符串来定义和识别符合特定语法规则的字符串序列。这种模式在文本搜索与替换操作中发挥着重要作用。
语法
语法:
创建一个正则表达式对象，其主体为“正则表达式主体”，并可选地添加修饰符；或者，采用更为简便的方式。 var reg=/正则表达式主体/修饰符(可选); 案例: 定义了一个正则表达式对象，名为reg，其内容为/kaikeba/i。 此处定义了一个正则表达式，名为 reg。该表达式主体为 "kaikeba"，其作用是进行检索。 i 是一个修饰符 (搜索不区分大小写)。
修饰符 修饰符描述
执行对大小写不敏感的匹配
执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
执行多行匹配
正则表达式模式
方括号用于查找某个范围内的字符:
表达式描述
查找方括号之间的任何字符
查找任何从 0 至 9 的数字
(xIy)
查找任何以 I 分隔的选项
元字符是拥有特殊含义的字符:
元字符描述
\d
查找数字
\s
查找空白字符
\b
匹配单词边界
\
查找以十六进制数 xxxx 规定的 字符
量词:
量词描述
n+
匹配任何包含至少一个 n 的字符串
n*
匹配任何包含零个或多个 n 的字符串
匹配任何包含零个或一个 n 的字符串
正则表达式的方法test(str)
test函数旨在对字符串进行模式匹配检查，一旦发现字符串内存在与模式相吻合的文本，便输出true，若不存在则不返回任何值。
var reg = /budingCode/i; 执行结果变量res等于正则表达式reg对字符串"欢迎关注budingCode"进行匹配测试。 console.log(res);//true 定义了一个正则表达式，其模式为：以一个或多个字母开头，接着是一个汉字，后面可以跟任意数量的汉字，最后以一个数字结尾。 var str="a公司拼音为9"; 执行正则表达式对字符串进行匹配，结果为真，输出变量res的值；console.log函数显示结果为true。 在控制台输出语句中，调用正则表达式测试函数对字符串“a你好239”进行匹配，结果显示为false。
常用的正则表达式校验案例
案例 全选/全不选
| 全选 | 序号 | 名称 | 单价 | 数量 | 总计 |
|---|---|---|---|---|---|
| 1 | 小熊饼干1 | ¥125 | 1 | ¥125 | |
| 1 | 小熊饼干2 | ¥125 | 1 | ¥125 | |
| 1 | 职业生涯中，跳槽是每个人必经的阶段。不论你是偶然间发现了这篇文章，还是有意搜索得来，都希望你能珍惜在此停留的每一刻，这篇文章或许能为你的笔试或面试提供一些助力。 或许这将是互联网行业未来十年中最辉煌的一年。寒冬将至。然而，除非你亲自去探索，否则你永远无法了解市场的真实状况。经过这次求职经历，我个人觉得市场并没有想象中那么恐怖，而且我还收到了几家知名企业的录用通知。现在，我想对自己进行一番总结，同时也希望能对有需要的朋友们有所帮助。 ### 面试准备 这是一份包含大厂前端面试题解析、核心总结学习笔记、真实项目实战以及最新讲解视频的开源分享资料，链接如下：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】(https://bbs.csdn.net/topics/618166371)。 面试前的准备因人而异，所需时间也有所区别。针对前端岗位，以往可能不太注重算法部分，但如今许多企业都会进行考察。在此建议，大家不妨在闲暇时多练习LeetCode上的题目。算法的学习需要较长时间，它是一个持续的过程。在掌握前端基础知识的基础上，应有针对性地进行算法复习。在面试过程中，若能成功解决算法问题，无疑会为你加分，然而即便未能做到，也不会直接导致你被淘汰。同时，面试官还会向你提供一些解题的思路和指导。