对于web前端开发来说，javaScript是核心，说难学也不难，说简单也不简单。有时一些概念，官方文档的解释就及其难懂。对此，我分享我的学习笔记，简单粗暴，通俗易懂，看完你基本就会了！
适合人群：至少掌握HTML+CSS基础知识
分享一波学习教程：点击 web前端资源分享
来自微信公众号【前端体系】
基本概念
前端三大基础知识：
HTML：编写网页内容
CSS：设计网页样式、布局
JavaScript：网页交互的语言
什么是JavaScript：
1.专门设计网页交互的语言
2.运行在JavaScript解释器中
JavaScript特点：
纯文本；解释执行；弱类型；基于对象
JavaScript=ECMAScript+DOM（文档对象模型）+BOM（浏览器对象模型）
ECMAScript标准：JavaScript核心语法
DOM标准：专门操作HTML元素，CSS样式，事件的统一标准！
BOM：专门操作浏览器窗口的工具。没标准，由浏览器厂商自行实现
官方详细介绍：
ECMAScript 规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。
文档对象模型（DOM）——对应Document对象
浏览器对象模型（BOM) ——对应window对象
JavaScript典型用途：
1.嵌入动态文本于html页面中
2.客户端数据计算
3.客户端表单（提交到服务器之前）验证（用户注册，登录验证等）
4.增强网页动画，特效等（下拉菜单，图片轮播等）
5.基于Node.js技术进行服务器端编程
JavaScript的使用
如何编写javaScript：
01、使用浏览器自带的js解释器：
F12打开控制台，光标处写脚本代码，回车执行。
Console：指代控制台，专门调试程序输出结果的窗口。
log：控制台Console提供的一个功能，向控制台输出一行日志
多行代码输入：【shift】+【enter】→换行
02、随网页一同运行：
浏览器包含：【排版引擎】+【解释引擎】
排版引擎：专门加载HTML内容和CSS样式等
解释引擎：专门运行js脚本
放置的先后顺序影响程序结果。
优化：放在body的最后
调试js代码
写JavaScript的时候，如果期望的效果没有实现，不要抓狂，也不要泄气，作为小白，要坚信：JavaScript本身没有问题，浏览器执行也没有问题，有问题的一定是我的代码。
如何调试：bug？
只要没反应或效果没出来就是出错-->F12
查看错误原因-->定位错误位置！
脚本块中的错误，仅影响“当前脚本块”中出错“位置之后”的脚本执行。
不影响之外的其他元素加载或脚本块执行。
function中的错误：只有调用方法时才触发！
常见的JS错误类型：
SyntaxError（语法错误）
解析代码时发生的语法错误。
ReferenceError（引用错误）
引用一个不存在的变量时发生的错误
TypeError（类型错误）
1.变量或参数不是预期类型，比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数
2.调用对象不存在的方法
RangeError（范围错误）
当一个值超出有效范围时发生的错误
javaScript语法
ECMAScript（核心语法）
区分大小写
每条结尾都建议有分号(英文模式下的分号)
语句：发给浏览器的命令，如下例子：
脚本块：多行语句的序列
注释：不会被解释执行或显示的代码说明——给程序员看的
注释也占网页流量！生产环境必须去掉！
HTML注释：
CSS注释：/* */
JS注释：//单行注释 /*多行注释*/
如下例子：
变量
概念：变量用于存储数据值。一切数据必须存在变量中
何时使用变量？只要在程序中需要存储的数据，都要放在变量中
语法：var 变量名 =值；
赋值：变量名=值，使用等号赋值操作
如果未赋值：js默认赋值undefined
命名规则：见名知意
保留字/关键字不能当变量名
常见的是驼峰法的命名规则，如 lastName (而不是lastname)
保留字：js中已经占用的特殊意义的关键字
强调：只有等号可以向变量中存入新值。
常量
概念：一旦声明，常量的值就不能改变
如何使用常量：const 常量名=常量值
以上重新赋值，就是出错！
数据类型
js是弱类型：
变量本身没有类型。只有变量中的值才有类型。
一个变量，可以反复保存不同类型的数据
为什么要有数据类型：现实中所有数据根据用途不同，分为不同数据类型。
数据类型：变量中存储的数据的类型。
原始类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）
引用类型：对象(Object)
string类型：
字符串是存储字符的变量。
字符串可以是引号中的任意文本。可以使用单引号或双引号
number类型：
表示一切用于比较或数学计算的数字
程序中数字分整数、浮点数（现实中的小数）
js中一切数字都用number保存，不分整数类型和小数类型
程序中数字类型的舍入误差：程序中不能准确表示1/10，就好像现实中不能准确表示1/3一样。
如何修正：按指定位数四舍五入：数字.toFixed（小数位数）
今后计算结果小数位数超长，说明碰到舍入误差。按位四舍五入。
boolean类型：
仅有两个值的特殊数据类型：true，false
何时使用boolean？只要一个值只有真假两种情况，就用boolean类型
undefined类型：
表示一个变量仅声明过，但从未赋值。所有未赋值的变量，默认值都是undefined。
undefined类型的值还是undefined！
null类型：
可以通过将变量的值设置为 null 来清空变量。
object类型：*重点核心内容*
对象由花括号分隔。
在括号内部，对象的属性以名称和值对的形式来定义。属性由逗号分隔
／未完待续 下期再会.
作者：小精灵
原文链接： http://mp.weixin.qq.com/s/QH-OVQSM1Wf7ZfVbmtYKzA
欢迎关注本人微信公众号【前端体系】， 回复【礼物】即可获得“微信小程序”学习资料~ “领干货” 一起提升技能！
未经授权，不得转载。
网友评论