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

写在前面

以前上大学的时候，就已经学了这个关于前端的课程，如今也工做了快一年了。最近想前端的课程从新系统的学一遍，也用于检查本身那些地方漏掉了。我是报了开课吧的前端高级工程师的课程，因此接下来会把本身在开课吧这个基础的前端课程中学到的知识点分享出来。但愿可以自勉。

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的第一等公民的那些事。