Web前端最新JavaScript学习之BOM（BOM，Windows事件，JavaScript执行机制），程序员必学

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

方式二：

window.οnlοad=function(){

alert(‘页面加载事件’)

}

方式三：事件监听

window.addEventListener(‘load’,function(){

alert(‘页面加载事件’)

})

（2）document.DOMContentLoaded ： document.DOMContentLoaded加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。

调整窗口大小事件

---

window.onresize：当浏览器窗口大小发生改变时触发该事件

实现方式：

方式一：

window.οnresize=function(){

alert(‘窗口大小改变了’)

}

方式二：事件监听

window.addEventListener(‘resize’,function(){

alert(‘窗口大小改变了’)

})

定时器

======================================================================

（1）setTimeout(function(){},时间)：在给定的时间(以毫秒为单位)之后，执行函数。返回值是一个定时器对象。

变量名 = setTimeout(function(){},时间)

（2）clearTimeout(定时器对象)：清除setTimeout定时器对象。

练习

---

1.两秒后弹出消息框

法一：

setTimeout(‘alert(“javaScript”);’,2000) //2秒之后弹出消息框

法二：

setTimeout(function(){

alert(‘JavaScript’)

},2000)

法三：

function fn(){

console.log(“2秒后显示”)

}

var timer=setTimeout(fn,2000)

clearTimeout(timer) //清除定时器对象

2、3秒钟后让图片消失

function fn(){

var img=document.querySelector(‘img’) //获取图片

img.style.display=‘none’ //图片消失

}

var timer=setTimeout(fn,3000)

JavaScript执行机制

=================================================================================

（1）单线程：JavaScript程序是单线程的，即同一个时间只能做一件事

进程与线程 ：

• 进程：程序的一次动态运行，有独立的内存空间

• 线程：是进程的运行单位，一个进程可以分为若干个线程

（2）同步：就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的

（3）异步：在做一件事情的同时，可以去做其他的事情

location对象

=============================================================================

location对象：地址对象

(1)URL(Uniform Resource Locator)：统一资源定位符

URL组成：

（2）location常用属性：

• location.href : 完整url地址

• location.hostname：主机名

• location.port：端口号

• location.protocol：协议

• ocation.search：’?'之后的参数字符串

例如：

页面跳转

navigator对象

==============================================================================

navigator对象：导航对象

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-uh3sGgam-1715196092439)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-sOji5gFt-1715196092440)]