写在前面

之前上大学的时候，就已经学了这个关于前端的课程，现在也工作了快一年了。最近想前端的课程重新系统的学一遍，也用于检查自己那些地方漏掉了。我是报了开课吧的前端高级工程师的课程，所以接下来会把自己在开课吧这个基础的前端课程中学到的知识点分享出来。希望能够自勉。

1.JavaScript科普

1.1 JS到底能干点啥？

行为交互：例如点击按钮关闭弹框；
数据交互：例如注册检测用户名；
逻辑处理：进行复杂的业务逻辑处理。

1. 2 JS的组成

-ECMAScript：JavaScript语法和基本对象； -DOM：文档对象模型； -BOM：浏览器对象模型。

1.3 文档注释

// 单行注释 、/* 多行注释*/

1.4 JS代码书写位置

写在HTML行内：<div onclick = "alert('行内JS代码');"></div>
写在HTML内的Script标签内：<script> alert('内部JS代码');</script>
写在HTML外部的.js文件内：<script src = 'main.js'></script>

1.5 调试

alert(); // 弹框
console.log(); // 输出到控制台

1.6 获取页面元素

document.getElementById(); // 根据html标签的id属性获取页面元素
document.getElementByClassName(); // 根据html标签的class属性获取页面元素，通常获取到的是元素数组
document.getElementByTagName(); // 根据html标签名获取页面元素，通常获取到的是元素数组
document.querySelector();  // 根据指定的属性选择器及名字获取单个页面元素，若页面中含有多个匹配时，获取到到的是第一个匹配元素
document.querySelectorAll(); // 根据指定的属性选择器及名字获取多个页面元素，通常是一个元素数组

1.7 事件

元素el.事件名 = function（）{}; 例如：el.onclick = function(){ // 事件触发后的相应操作 }; // 点击事件 window.onload=function(){}; // 页面加载完毕后才会执行，因为js是页面加载到该位置时就会执行，故若js在页面顶部可能获取不到页面元素，可用这个事件进行规避

2. JS基础语法

2.1 数据类型

对象Object:获取到的元素；
数字Number：就是生活中常用的数字；
字符串String:由单引号或双引号引起来的0~多个字符。字符串拼接，加号遇到字符串就会执行字符串拼接操作

2.2 变量

声明:var name; 赋值：name = value； 调用：name 命名规则:不能是ECMAScript规定的关键字和保留字、不能以数字开头、只能是数组(0~9)字母(a-zA-Z)下划线(_)美元符($)。 多变量同时声明：var name1，name2,...;

2.3 函数

什么是函数？在JS中函数是第一等公民，具有很高的地位，绝大多数的逻辑处理都是通过函数实现的，当然这里也包括行为交互和数据交互。
函数是怎样声明和使用的？

// 有名声明
function funcName(形参根据需要配置，多个形参用逗号隔开){
	// 逻辑代码，有名函数通常是进行对多个逻辑处理操作的抽象
}

// 匿名声明
function(形参根据需要配置，多个形参用逗号隔开){
	// 逻辑代码，通常是对事件绑定或是作为回调函数传入
}

// 函数调用
// 对于有名函数直接用 函数名(); 即可完成调用
// 匿名函数通常只能被调用一次

2.4 属性

什么是属性？
属性都有那么操作？读操作和写操作。
操作属性的方法？ .点操作符：el.attr; []方括号操作符：el['attr']
常用的JS属性

// id
// className:通常通过操作元素类名实现特效的切换
// value：表单元素特有的属性
// style:width、backgroundColor...:行内样式，行内默认什么也没有，display控制元素的显示隐藏，默认是空不是none
// cssText：操作行内样式，会覆盖当前的所有样式，重复的样式后面的覆盖前面的
// innerHTML：普通元素的属性，包含元素标签
// href：a标签超链接属性，获取到的是绝对路径
// src：img和script等元素的属性，获取到的是绝对路径，故有时用第三方变量作为开关
// tagName：获取到的是大写字母

2.5 if语句和布尔值

if语句基本语法。比较运算符。逻辑运算符。三元运算符。数组：length、下标从0开始。

2.6 for循环和this指向

for语句的基本语法；
for语句使用场景。
变量自增自减。
for语句多个判断语句时以最后一个条件为准。
for语句在执行到语句时执行，内部的事件监听事件不能直接使用外部for语句的循环变量。
for循环的执行顺序和死循环。
this上下文环境对象：在处理函数中，表示当前调用事件的元素，通常是谁调用就指向谁，当然后面会涉及到修改this指向的操作。

2.7 classList

这一对象是用来获取和添加当前元素的class列表的，是一个伪数组。

通过下标获取当前元素对应的class；
length获取当前元素所含有的所有class的个数；
value获取当前元素的所有class，字符串；
el.classList.add(''); 为元素添加类样式，并不会覆盖之前含有的class；
el.classList.remove('');删除元素已含有的指定类样式；
el.classList.contains('');判断元素是否含有指定类样式；
el.classList.toggle('');切换元素指定的类样式，当元素含有该样式就删除，否则添加。

3.next

下一期会分享关于ECMAScript的一些理论知识和JS的第一等公民的那些事。

前端高级工程师养成之路 -001 JS基础