基础巩固：JavaScript基础总结(基本概念篇)

最新推荐文章于 2023-05-02 09:40:35 发布

weixin_33953384

最新推荐文章于 2023-05-02 09:40:35 发布

阅读量147

点赞数

文章标签： javascript 前端后端 ViewUI

原文链接：https://segmentfault.com/a/1190000015752795

版权

基础巩固：JavaScript基础总结

使用 JavaScript已经好几年了，由于工作主要是做服务端开发，在工作中逐渐发现 JavaScript的使用范围原来越广泛。在之前的几个项目中，公司配备了一个设计和一个前端，前端人员只会切图和排版，稍微复杂一点的功能还是的我们自己来，毕竟是要和后端交互，所以这个还是迈步过去的关口。之前只是在每次需要使用 JavaScript的时候去粗略的学习了一下，基本能完成所有的工作需求。不会的地方在 github上面找一些案例修改一下也能完美的运行。
今天， JavaScript已经到了不得不学的地步，从前用户交互到UI框架，以及今天非常流行的 VUE, jQuery， React， nodejs， H5游戏， APP等等， JavaScript的身影已经无处不在，所以我们有必要抽时间来系统的梳理一遍。

如何学习JavaScript？

对于已经掌握一两门开发语言的同学都知道，学习任何一门语言不外乎学习这几个大类：

语言本身的原理，语法，数据类型，数据的操作，控制流程，逻辑判断，使用技巧
功能函数，系统类库，扩展类库
框架，设计模式，不同宿主环境编程

我们根据上面的学习思路来整理和总结JavaScript从最基础到类库框架的使用和开发，以及一些该语言的编程思路，算法和技巧。在这里我们一定要注意一点，基础知识很关键。在这个浮躁的时代，人人都想着快速挣钱。很多人都是静不下心来进行一个系统的学习，认为我用到哪里就去看哪里。虽然JavaScript入门是非常容易，后端的同学花一天时间过一遍就能开始写出一些简单的功能。但是想要精通非数年不可及也。大家一定要相信一点，在前端几百万从业人群里面，真正技术拿得出手的真的不超过15%。我带过很多徒弟也招过新人入职，在中国的就业竞争压力下，人人都想着速成，看到某个行业火热，就想一股脑挤进去，学习编程如果不是兴趣驱动，很多人都是没有办法坚持到最后的。

JavaScript基础篇

ECMAScript是JavaScript的标准规范，我们在编写程序的时候必定要按照这个规范来操作。到目前为止，已经发展到ES6和ES7了，每一次的版本升级都会产生一些新的支持和规范和浏览器的兼容解决方案。

我们的学习和续文按照以下流程来进行总结，从而建立一个系统化的知识体系。这里要注意，务必将基础部分掌握牢靠，磨刀不误砍柴功，只有将基础部分掌握并建立起系统的知识体系，在后面学习JavaScript衍生的其他模式才能游刃有余。在学习JavaScript之前请务必先系统的学习好HTML和CSS知识。

学习JavaScript主要是学习以下几个方面：

JavaScript本身的核心语法(ECMAScript)
浏览器对象模型 (BOM)
文档对象模型（DOM）

大家在这里应该明白了，ECMAScript其实是JavaScript的子集，我们所说的JavaScript其实是在Web浏览器这个宿主环境上，JavaScript包含了基本的核心，也就是ECMAScript来标准化基本的语法，我们的宿主环境在web浏览器，所以在ECMAScript的基础上有添加了和浏览器进行交互的扩展BOM和对文档节点交互的DOM。不光在JavaScript里面才有ECMAScript，比如大家耳熟能详的Node和Adobe Flash，所以ECMAScript并不是参照web浏览器的，JavaScript实现了ECMAScript，Adobe ActionScript同样也实现了ECMAScript。

ECMAScript主要规定了以下几个方面的内容的描述：

语法
类型
语句
关键字
保留字
操作符
对象

文档对象模型（DOM)是针对XML但经过扩展于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。在DOM中，这个页面通过分层节点（元素），通过DOM创建表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如的删除、添加、替换或修改任何节点。
浏览器对象模型(BOM),开发人员使用BOM可以控制浏览器显示的页面以外的部分，但是它作为JavaScript实现的一部分去没有相关的标准。这个问题在HTML5中得到了解决，HTML5致力于把很多的BOM功能写入正是规范。从根本上将，BOM只处理浏览器窗口和框架，但人们习惯上也把所有针对浏览器的JavaScript扩展算作BOM的一部分，以下就是这样的扩展：

弹出新浏览器窗口的功能
移动、缩放和关闭浏览器窗口的功能
提供浏览器详细信息的navigator对象
提供浏览器所加载页面的详细信息的location对象
提供用户显示器分辨率详细信息的screen对象
对cookie的支持
想XMLHttpRequest 和 IE的ActiveXobject这样的自定义对象

由于没有BOM标准可以遵循，因此每个浏览器都有自己的实现。

JavaScript在HTML中的使用

// 引入外部脚本
<script type="text/javascript“ src="example.js></script>

// 执行代码段
<script>
    // 代码段
</script>

javaScript代码可以放在head标签内，但是由于JavaScript解析器是自上而下来执行代码的，所以如果你在head里面写的JavaScript代码里面包含获取元素节点，回导致找不到节点而出错，我们可以使用window.onload = function（）{代码段}来让整个文档解析完成以后再执行JavaScript代码。最好的办法就是将外部脚本引入和内部代码都写到</body>标签前后是最好的办法。当然，我们除了直接引入外部脚本以外，还可以动态的从后端来获取JavaScript执行代码和需要的Json数据。比如我们在开发游戏的时候，对游戏的每个玩法可以进行动态的预加载，在后端来获取游戏的配置信息，然后作为响应数据响应给前台浏览器，来初始化游戏界面。

基本数据类型

字符串
数字
布尔值
数组
对象

操作符

运算符
条件操作符
逻辑运算符号

语句

if else
do while
while
switch
for
for in
label
break 和 continue
with

函数

内置函数
自定义函数
匿名函数
没有重载

作用域和内存

作用域链
函数作用域
堆内存和占内存
引用计数和标记清除

引用类型

使用对象
数组对象的方法运用
字符串的方法运用
创建和操作数组
理解JavaScript类型
日期类型
正则表达式
function类型
基本包装类型

定时器相关

未完待续....

HTML属性操作