2024年【干货分享建议收藏】1w字搞定BOM_请叫我阿ken csdn，2024年最新15个经典面试问题

大家好，我是讯享网，很高兴认识大家。

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

讯享网

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上网络安全知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以点击这里获取

在这里插入图片描述

上述代码中，代码定义了一个 timer 变量用于保存setTimeout 定时器，定时器的功能为 3000ms 后执行 fn 函数。代码定义处理函数 fn，并打印 " 广告关闭了 "。

8.3.3 [案例] 60秒内只能发送一次短信

本案例将会利用 setInterval() 和 clearInterval() 方法完成一个发送短信的案例，要求60秒内只能发送一次短信。其开发思路为，在页面中放一个文本框和一个 " 发送 " 按钮，在文本框中输人手机号码，然后单击 " 发送 " 按钮，就可以发送短信，但是短信发送后，该按钮在 60 秒以内不能再次点击，防止重复发送请求短信。并且在按钮单击之后，按钮上的文字会变为 " 还剩x秒再次单击 " 。

具体代码如下：

<body> 手机号码: <input type="number"> <button>发送</button> <script> var btn = document.querySelector('button'); var time = 60; // 定义剩下的秒数 btn.addEventListener('click', function() { btn.disabled = true; var timer = setInterval (function() { if(time == 0) { clearInterval(timer); btn.disabled = false; btn.innerHTML = '发送'; } else { btn.innerHTML = ' 还剩下 ' + time + '秒'; time--; } }, 1000); } ); </script> </body>

讯享网

在这里插入图片描述

上述代码中，代码定义了剩下的秒数。给按钮绑定单击事件，按钮被单击之后在第7行将 disabled 属性设置为 true 可以禁用按钮。按钮里面的内容需要变化，所以在 else 中通过 innerHTML 修改按钮内容，并且在第 15 行设置 time 变量不断递减。如果 time 为 0，执行 if 语句，停止定时器，复原按钮初始状态。

多学一招: this指向问题
_
this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁。一般情况下 this 的最终指向的是调用它的对象。为了使读者更好地理解，下面我们通过3个具体的场景来讲解 this 的指向问题。
(1) 在全局作用域或者普通函数中，this 指向全局对象window。示例代码如下：

讯享网console.log(this); // this指向的是window function fn() { console.log (this); } window.fn(); // this 指向的是window

在定时器方法的第 1 个参数的函数中，this 指向的也是 window 对象。

(2) 在方法中，谁调用的方法，this 就指向谁。示例代码如下：

var o = { sayHi: function() { console.log(this); } }; o.sayHi(); // sayHi中的this指向的就是o这个对象

(3) 构造函数中的 this 指向的是新创建的实例。示例代码如下：

讯享网function Fun() { console.log(this); } var fun = new Fun(); // Fun中的this指向的是新创建的实例，即fun

8.4 JavaScript 执行机制

JavaScript 的定时器可以完成一些异步操作。例如，同时设置多个定时器，每个定时器都在3秒后执行一段代码，则三秒后，这些定时器中的代码都会执行。JavaScript 的定时器虽然没有 Java 中的多线程那样强大，但在开发中也能满足大部分的需求。

本节将针对 JavaScript 的执行机制进行讲解

8.4.1 单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 JavaScript 这门脚本语言诞生的使命所致，即 JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如，对某个 DOM 元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题是，如果 Javascript 执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载有阻塞的感觉。

案例：演示，

console.log(1); setTimeout(function() { console.log(3); }, 5000); console.log(2);

执行上述代码，在控制台会看到程序先输出了1、2，等待 5 秒后输出 3。由此可见，当调用setTimeout() 方法后，该方法会立即执行完成，然后执行后面的代码，在控制台中输出 2。而为 setTimeout() 传入的函数，它会在 5 秒后执行。像这样的操作就称为异步操作。这个异步执行的函数称为回调函数，它的调用时机是由定时器来决定的。

8.4.2 同步和异步

为了更好地利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是 JavaScript 出现了同步和异步的概念。

所谓同步，就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法，烧水煮饭，等水开了之后，再去切菜，炒菜。
所谓异步，就是在做一件事件的同时，可以去处理其他的事情。还以做饭为例，异步做法是，在烧水煮饭的同时去切菜炒菜。

同步任务都是在主线程上执行的，会形成一个执行栈，而异步任务是通过回调函数实现的，一般来说，异步任务有 3 种类型，第 1 种是普通事件，如 click、resize 等；第 2 种是资源加载，如 load、error 等；第 3 种是定时器，如 setlnterval()、setTimeout()。

8.4.3 执行机制

当定时器的时间设为 0 的时候，就会产生一个问题，到底是为定时器传入的回调周函数优先执行，还是 setTimeout() 后面的代码优先执行呢?

示例代码如下：

讯享网console.log(1); setTimeout(function() { console.log(3); }, 0); for(var i = 0, str = ''; i < ; i++) { str += i; // 利用字符串拼接运算拖慢执行时间 } console.log(2);

上述代码执行后，输出顺序为1、2、3。显然，为定时器传入的回调函数是最后执行的。为了降低偶然性，第 5 ~ 7 行的代码拖慢了执行时间，但最终结果仍然是 3 最后输出。

在 JavaScript 中，同步任务是优先执行的，它们会被放入执行栈中执行，而异步任务(回调函数)则被放人任务队列中，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务就会结束等待状态，进人执行栈，开始执行。

因为 JavaScript 的主线程会不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( Event Loop)。

8.5 location 对象

location 对象比较特别，它既是 window 对象的属性，同时也是 document 对象的属性，window location 等同于document.location，它们是引用了同一个对象。location 对象不仅提供了与当前显示文档相关的信息，而且还提供了用户获取和设置窗体的 URL。

8.5.1 URL 的组成

location 对象与 URL 相关，因此在学习 location 对象前，我们先来看一下 URL 的组成。在 Internet **问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为统一资源定位符 ( Unifom Resoure Loator, URL)。

在 URL 中，包含了网络协议、服务器的主机名、端口号、资源名称字符串、参数以及锚点，具体示例如下：

// 示例1
protocol://host[:port]/path/[?query]fragment

// 示例2
http://www.example.com:80/web/index.html?a=3&b=4#res

URL 组成说明

各部分	说明
protocol	网络协议，常用的如 http、ftp、mailto 等
host	服务器的主机名，如 www.example.com
port	端口号，可选，省略时使用协议的默认端口，如 http 默认端口为 80
path	路轻，如 " /web/index.html "
query	参数为键值对的形式，通过 " & " 符导分隔，如 " a=3&b=4 "
fragment	锚点，如 " #res " ，表示页面内部的锚点

8.5.2 location 的常用属性

BOM 中 location 对象提供的方法，可以更改当前用户在浏览器中访问的 URL ，实现新文档的载入、重载以及替换等功能。

location 对象提供的 search 属性返回 URL 中的参数，通常用于在向服务器查询信息时传入一些查询条件，如页码，搜索的关键字、排序方式等。除了 search 属性外，location 对象还提供了其他的属性，用于获取或设置对应的 URL 地址的组成部分，如服务器主机名、端口号、URL 协议以及完整的 URL 地址等。

location 对象的属性

属性	说明
location.search	返回(或设置)当前 URL 的查询部分( " ? " 之后的部分)
location.hash	返回一个 URL 的锚部分( 从 " # " 开始的部分)
location.host	返回一个 URL 的主机名和端口
location.hostname	返回 URL 的主机名
location.href	返回完整的 URL
location.pathname	返回 URL 的路径名
location.port	返回一个 URL 服务器使用的端口号
location.protocol	返回一个 URL 协议

8.5.3 [ 案例 ] 获取 URL 参数

在实现登录功能时。需要在登录页面（ login.html ）进行表单提交。如果用户输入正确，则提交到 index.html 首页，并且需要把输人的用户名传递过去，这样首页中就可以获取并使用该用户名。了解了产品需求之后，接下来我们开始编写业务逻辑代码。

(1) 创建 login.html 登录页面，搭建表单结构，示例代码如下：

讯享网<form actlon="index html">
用户名: 
<input type="text" name="uname">
<input type="submit" value="登录">
</form>

上述代码中，使用 action 属性把表单提交到 index.html 页面。第4行 input 表单元素 type 属性设置为 " submit " ，表示当单击 " 登录 " 按钮时，表单自动提交。

(2) 创建 index.html 首页，示例代码如下：

<body>

<div></div>
<!-- div 元素用于展示从 login.html 页面传递过来的参数。-->

<script>
console.log (location, search);
// 结果为: ?uname=andy
// 使用 location.search 返回 URL 地址中的参数。

// 1.去掉search中的问号"?"
var params = location.search.substr(1);
console.log (params);
// 结果为: uname=andy
// 用来去掉字符串中第1个字符，也就是把参数字符串最前面的问号“?"去掉。

// 2.把字符串分割为数组
var arr = params.split('=');
console.log (arr);
// 结果为: ["uname", "andy"]
var div = document.querySelector('div');
// 利用 split() 方法把字符串分隔成数组。

// 3.把数据写人div中
div.innerHTML = arr[i] + '欢迎您';
// 为使用 innerHTML 把数据写人 div 中。
</script>

</body>

8.5.4 location 的常用方法

location 对象提供的用于改变 URL 地址的方法，所有主流的浏览器都支持，

location 对象的方法

方法	说明
assign()	载人一个新的文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档，覆盖浏览器当前记录

在上述表中，assign() 方法是比较常用的方式，使用 location.assign() 就可以立即打开一个新的浏览器位置，并生成一条新的历史记录。接收的参数为 URL 地址。

reload() 方法的唯一参数，是一个布尔类型值，将其设置为 true 时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的 " 刷新页面 " 按钮。

replace() 方法的作用就是使浏览器位置发生改变，并且禁止在浏览器历史记录中生成新的记录，它只接受一个要导航到的 URL 参数，而且在调用 replace() 方法后，用户不能返回到前一个页面。

8.6 navigator 对象

navigator 对象包含有关浏览器的信息，但是每个浏览器中的 navigator 对象中都有一套自己的属性和方法，

navigator 对象的属性和方法

分类	名称	说明
属性	appCodeName	返回浏览器的内部名称
属性	appName	返回浏览器览器的完整名称
属性	appVersion	返回浏览器的平台和版本信息
属性	cookieEnabled	返回指明浏览器中是否启用 Conkie 的布尔值
属性	platform	返回运行浏览器的操作系统平台
属性	userAgent	返回由客户端发送到服务器的 User-Agent 头部的值
方法	javaEnabled()	指定是否在浏览器中启用 Java

在上表中，最常用的属性是 userAgent，

案例：演示 userAgent 的使用，

讯享网<script> var msg = window.navigator.userAgent; console.log (msg); </script>

上述代码中，使用 window.navigator 来返回不同容户端发送到服务器的 Uset-Agent 头部的值。以 Chorme. Firefox、IE 浏览器为例，输人结果如下。

( 1 ) Chrome

Mozilla/5.0 (windows NT 6.1; win64; x64) AppleWebkit/537.36 (KHTML, like Gecko)Chrome/77.0.3865.75 Safari/537.36

(2) Firefox

讯享网Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:69.0) Gecko/ Firefox/69.0

( 3 ) IE

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2;.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0;.NET4.0C; .NET4.0E; InfoPath.3)

8.7 history 对象

BOM 中提供的 history 对象，可以对用户在浏览器中访问过的 URL 历史记录进行操作。出于安全方面的考虑，history 对象不能直接获取用户浏览过的 URL ，但可以控制浏览器实现 " 后退 " 和 " 前进 " 的功能。

history 对象的属性和方法

分类	名称	说明
属性length	返回历史列表中的网址数
方法	back()	加载 history 列表中的前一个 URL
方法	forward()	加载 history 列表中的下一个 URL
方法	go()	加载 history 列表中的某个具体页面

go() 方法可根据参数的不同设置，完成历史记录的任意跳转。当参数值是一个负整数时，表示后退 " 后退 " 指定的页数；当参数值是一个正整数时，表示 " 前进 " 指定的页数。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

JavaScript学习：
挑战最短时间内带你入门 JavaScript（一）
挑战最短时间内带你入门 JavaScript（二）
挑战最短时间内带你入门 JavaScript（三）
挑战最短时间内带你入门 JavaScript（四）
【干货分享|建议收藏】2w字爆肝详解 JavaScript对象
【建议收藏|熬夜爆肝】万字文带你了解DOM，文末有彩蛋嗷!!!✨✨✨

HTML学习：
阿ken的HTML、CSS的学习笔记_HTML基础（笔记一）
阿ken的HTML、CSS的学习笔记_HTML 页面元素和属性（笔记二）
阿ken的HTML、CSS的学习笔记_文本样式属性（笔记三）
阿ken的HTML、CSS的学习笔记_CSS3选择器（笔记四）
阿ken的HTML、CSS的学习笔记_CSS盒子模型（笔记五）
阿ken的HTML、CSS的学习笔记_浮动与定位（笔记六）
阿ken的HTML、CSS的学习笔记_表单的应用（笔记七）
阿ken的HTML、CSS的学习笔记_多媒体技术（笔记八）
阿ken的HTML、CSS的学习笔记_CSS3高级应用（笔记九）

🌊🌈关于后记：

如何自学黑客&网络安全

黑客零基础入门学习路线&规划

初级黑客
1、网络安全理论知识（2天）
①了解行业相关背景，前景，确定发展方向。
②学习网络安全相关法律法规。
③网络安全运营的概念。
④等保简介、等保规定、流程和规范。（非常重要）

2、渗透测试基础（一周）
①渗透测试的流程、分类、标准
②信息收集技术：主动/被动信息搜集、Nmap工具、Google Hacking
③漏洞扫描、漏洞利用、原理，利用方法、工具（MSF）、绕过IDS和反病毒侦察
④主机攻防演练：MS17-010、MS08-067、MS10-046、MS12-20等

3、操作系统基础（一周）
①Windows系统常见功能和命令
②Kali Linux系统常见功能和命令
③操作系统安全（系统入侵排查/系统加固基础）

4、计算机网络基础（一周）
①计算机网络基础、协议和架构
②网络通信原理、OSI模型、数据转发流程
③常见协议解析（HTTP、TCP/IP、ARP等）
④网络攻击技术与网络安全防御技术
⑤Web漏洞原理与防御：主动/被动攻击、DDOS攻击、CVE漏洞复现

5、数据库基础操作（2天）
①数据库基础
②SQL语言基础
③数据库安全加固

6、Web渗透（1周）
①HTML、CSS和JavaScript简介
②OWASP Top10
③Web漏洞扫描工具
④Web渗透工具：Nmap、BurpSuite、SQLMap、其他（菜刀、漏扫等）
恭喜你，如果学到这里，你基本可以从事一份网络安全相关的工作，比如渗透测试、Web 渗透、安全服务、安全分析等岗位；如果等保模块学的好，还可以从事等保工程师。薪资区间6k-15k

到此为止，大概1个月的时间。你已经成为了一名“脚本小子”。那么你还想往下探索吗？

如果你想要入坑黑客&网络安全，笔者给大家准备了一份：282G全网最全的网络安全资料包评论区留言即可领取！

7、脚本编程（初级/中级/高级）
在网络安全领域。是否具备编程能力是“脚本小子”和真正黑客的本质区别。在实际的渗透测试过程中，面对复杂多变的网络环境，当常用工具不能满足实际需求的时候，往往需要对现有工具进行扩展，或者编写符合我们要求的工具、自动化脚本，这个时候就需要具备一定的编程能力。在分秒必争的CTF竞赛中，想要高效地使用自制的脚本工具来实现各种目的，更是需要拥有编程能力.

如果你零基础入门，笔者建议选择脚本语言Python/PHP/Go/Java中的一种，对常用库进行编程学习；搭建开发环境和选择IDE,PHP环境推荐Wamp和XAMPP， IDE强烈推荐Sublime；·Python编程学习，学习内容包含：语法、正则、文件、网络、多线程等常用库，推荐《Python核心编程》，不要看完；·用Python编写漏洞的exp,然后写一个简单的网络爬虫；·PHP基本语法学习并书写一个简单的博客系统；熟悉MVC架构，并试着学习一个PHP框架或者Python框架 (可选)；·了解Bootstrap的布局或者CSS。

8、超级黑客
这部分内容对零基础的同学来说还比较遥远，就不展开细说了，附上学习路线。

网络安全工程师企业级学习路线

如图片过大被平台压缩导致看不清的话，评论区点赞和评论区留言获取吧。我都会回复的

视频配套资料&国内外网安书籍、文档&工具

当然除了有配套的视频，同时也为大家整理了各种文档和书籍资料&工具，并且已经帮大家分好类了。

一些笔者自己买的、其他平台白嫖不到的视频教程。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

套的视频，同时也为大家整理了各种文档和书籍资料&工具，并且已经帮大家分好类了。

一些笔者自己买的、其他平台白嫖不到的视频教程。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

2024年【干货分享 建议收藏】1w字搞定BOM_请叫我阿ken csdn，2024年最新15个经典面试问题

8.3.3 [案例] 60秒内只能发送一次短信

8.4 JavaScript 执行机制

8.4.1 单线程

8.4.2 同步和异步

8.4.3 执行机制

8.5 location 对象

8.5.1 URL 的组成

8.5.2 location 的常用属性

8.5.3 [ 案例 ] 获取 URL 参数

8.5.4 location 的常用方法

8.6 navigator 对象

8.7 history 对象

🌊🌈往期回顾：

🌊🌈关于后记：

如何自学黑客&网络安全

黑客零基础入门学习路线&规划

网络安全工程师企业级学习路线

相关推荐

2024年【干货分享建议收藏】1w字搞定BOM_请叫我阿ken csdn，2024年最新15个经典面试问题