第一章 JavaScript简介
为什么学习javascript ？
JavaScript 是全球最流行的编程语言。
JavaScript 是属于 Web 的编程语言。
JavaScript 是 web 开发者必学的三种语言之一：
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
javascript的作用
JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式
JavaScript 能够隐藏 HTML 元素
JavaScript 能够显示 HTML 元素
javascript 的使用
1、在 HTML/Vue 中，JavaScript 代码必须位于起始和结束script 标签之间。
1️⃣script标签可以嵌入到html中，不推荐
2️⃣常用的是外部脚本：分离了 HTML 和代码；使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
Vue——JS 简介
hello
点击我看js改变Html内容
能够改变 HTML 属性
能够改变 HTML 样式
能够隐藏 HTML 属性
能够显示 HTML 属性
第二章 JS语句、标识符
JS语句
1️⃣javascript 程序单位是行，也就是一行一行执行，一般一行就是有个语句
2️⃣语句以分号结束，有个分号就表示有个语句结束，可以不加
标识符
1️⃣标识符指的是用来识别各种值的合法名称，最常见的标识符就是变量名
2️⃣标识符由字母、$、_、数字组成，不能以数字开头，不能使用保留字
保留字包含
break,case,catch,class,const,continue,debugger,default,delete,do,else,export,extends,false
finally,for,function, if,import,in,instanceof,new,null,return,super,switch,this,throw,true,try,
typeof,var,void,while,with,yield,implements,interface,let,package,private,protected,public,、static等，用到查
代码
第二章 JS语句、标识符
变量 变量声明和赋值 声明变量由两部分组成： 关键字 变量名； 变量赋值：变量名=值数据； 声明并赋值：关键字 变量名=值数据； //声明 let a; //赋值 a=1; //声明并赋值 let b = 1; 变量提升概念： 先解析代码，获取所有被声明的变量，然后再一行一行的运行，这造成的结果就是所有变量的声明语句都会被提升到代码的头部，这就被叫做变量提升 //变量提升 console.log("x", x);//这样会是什么结果呢？ undefind var x = 10; //实际上运行步骤是 // var x; // console.log("x",x); // x = 10; let和var区别 都是js的关键字 let声明的变量注意事项： 不允许重复声明， 只能在块级作用域使用， 不存在变量提升，必须声明变量后才能使用，不然报错Uncaught ReferenceError错误 js中内置的一些关键字不能被当做变量名 var声明的变量注意事项： 允许重复声明 可以在任意地方使用 可以在声明语句前使用-变量提升 大部分情况使用let和var区别不大，但是let比var更严谨，所以推荐使用let 总结： 不声明使用，程序报错 不赋值使用：undefined 不声明直接赋值：js允许，会变为全局变量，不提倡 代码 js的引入方式和输出方式 引入方式 第一种、在body标签中嵌入script标签 第二种、引入本地独立js文件 本地有js文件，在body标签中嵌入script标签，引入本地js文件，使用src属性指定js文件的路径， type属性指定js文件的类型，默认是text/javascript 第三种、引入网络来源文件 //第三种 //第一种 js数据类型 一、数据类型分为 ES5六种：🔴数值类型、🔴字符串类型、🔴布尔类型、⭕undefined类型、⭕null类型、❗对象类型 (ECMAScript 5 也称为 ES5 和 ECMAScript 2009。--可以理解为是js语言规范标准的版本) 原始数据类型（基本）：数值类型、字符串类型、布尔类型 合成类型（复合类型）：对象类型 特殊值：undefined类型、null类型 二、js类型转换 转为String： 方法一： toString() ⛳ 方法二：String()强制转换 ⛳ 方法三：加号拼接字符串⛳ 转为数字类型： 1⛳parseInt()函数 2⛳parseFloat()函数 3⛳Number()强制转换 4⛳js隐式转换（- * /） 注意：NaN 表示number类型的非数字 转为布尔类型：true/false Boolean()强制转换 只有null,undefined,NaN,"",0五种为false，其他都为true 三、typeof 判断基本数据类型 代码
第五章 数据类型
js运算符
一、算数运算符
加法运算符：+
减法运算符：-
乘法运算符：*
除法运算符：/
取余运算符：%
自增运算符：++ ++num:先自增再运算 num++:先运算再自增
自减运算符：--
二、赋值运算符
=等于运算符
+=等同于 a=a+b
-=等于 a=a-b
=等于 a=ab
/=等于 a=a/b
%=等于 a=a%b
三、比较运算符
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不等运算符
大于运算符
= 大于等于运算符
< 小于运算符
<= 小于等于运算符
四、布尔运算符
&& 与运算符 多个条件都为true 才为true
|| 或运算符 多个条件只要有一个为true 就为true
! 取反运算符
注意：非布尔取反
对于非布尔值 取反运算符会将其转为布尔 undefined null NaN 0 -0 "" false 返回true 其余都为false
五、三元运算符
表达式? 'Welcome back!' : 'Please sign in.');
//表达式true返回：前的，false返回：后的
六、运算符优先级
参考：Javascript中的运算符及其优先级顺序_js运算符优先级-CSDN博客
代码
<!DOCTYPE html>
第六章 js 运算符
js流程控制
包括：顺序、分支、循环
一、顺序流程控制
最简单的流程控制：没有特定的语法结构，按照代码的顺序执行
二、分支流程控制
if语句
三元表达式
switch 语句
if和switch语句区别
一般情况下，if语句和switch语句都可以实现分支控制，可以相互替换
switch语句通常处理case为比较确定值的情况，而if else更灵活，常用于范围判断
switch进行条件判断后直接进入程序条件语句，效率更高，而if else得判断多次
当分支比较少的时候，if else更适合，如果分支比较多，switch语句更适合
三、循环流程控制
for 循环
while 循环
do...while 循环
continue break 关键字区别
continue跳出本次循环：跳出本次循环，继续下一次循环
break跳出循环：跳出循环，不再执行循环代码(循环结束)
四、调试打断点
F12 sources 找到需要调试的文件 设置断点
代码
<!DOCTYPE html>
js字符串及方法
转义
转义字符：
转义字符：\n 换行
方法
二、length 字符串长度
三、charAt(index) 获取字符串指定位置的字符，从0开始;参数大于长度返回空字符串
四、concat() 字符串拼接
五、indexOf(str) 查找指定字符串的位置，从0开始，找不到返回-1
六、lastIndexOf(str) 查找指定字符串的位置，从后往前，找不到返回-1
七、substring(start,end) 截取字符串，start开始位置，end结束位置，不包含end
八、substr(start,length) 截取字符串，start开始位置，length截取长度
九、slice(start,end) 截取字符串，start开始位置，end结束位置，包含start，不包含end
十、trim() 去掉字符串前后空格
十一、replace(str,str1) 替换字符串
十二、toUpperCase() 字符串转大写
十三、toLowerCase() 字符串转小写
十四、split(str) 字符串分割，返回数组
代码
<!DOCTYPE html>
js数组
概念（定义与赋值）
按次序排列的一组值，每个值的位置都有编号（从0开始），整个数组用方括号表示
可以先定义再赋值 ，也可以直接定义并赋值
数组元素可以是任何数据类型
如果数组的元素还是数组，就形成多维数组
常用方法
length 数组长度
获取数组元素 数组名[索引]
数组遍历方法 for
数组的静态方法Array.isArray()
数组的方法：push 数组末端添加元素（一个或多个），并返回新数组的长度。注意：会改变原数组
数组的方法：pop 数组末端删除元素（最后一个），并返回删除的元素。注意：会改变原数组
数组的方法：shift 数组首部删除元素（第一个），并返回删除的元素。注意：会改变原数组
数组的方法：unshift 数组首部添加元素（一个或多个），并返回新数组的长度。注意：会改变原数组
数组的方法：join （指定参数作为分隔符）将数组元素连接为一个字符串，并返回该字符串。注意：不会改变原数组；如果不提供参数，默认逗号分隔
数组的方法：concat 数组合并，并返回合并后的数组。注意：不会改变原数组
数组的方法： reverse 数组反转，并返回反转后的数组。注意：会改变原数组
数组的方法：sort 数组排序，并返回排序后的数组。注意：会改变原数组
数组的方法：splice 数组删除或替换元素，并返回被删除的元素。注意：会改变原数组
数组的方法：slice 数组截取，并返回被截取的元素。注意：不会改变原数组
数组的方法：indexOf 数组查找元素，并返回元素在数组中的位置。注意：返回的是索引，找不到返回-1
代码
<!DOCTYPE html>
数组
js函数
定义：
封装了一块可被重复调用执行的代码块
使用：
函数声明和函数调用
声明函数：
function 函数名(参数1,参数2,参数3){函数体}
调用函数：函数名(参数1,参数2,参数3)
函数提升：
先调用后创建也可以，在编译代码的时候，会把函数提升到顶部 （类似变量提升）
形参和实参：
参是函数定义时定义的参数，实参是函数调用时传递的参数，多个参数逗号分隔，也可以不带参数
函数的返回值：return 值 没有返回值，默认返回undefined
函数不调用，不执行
<!DOCTYPE html>
函数
js对象
现实中的对象：万物皆对象，对象是一个具体的事物，看得见摸得着的实物，例如一本书、一辆汽车、一个 enzymes、一个网站等等。
一、概念:
对象是一组无序的相关属性和方法的集合，属性是键值对，属性名是键，属性值是值。
二、组成:
对象是由属性和方法组成的。
属性：事物的特征
方法：事物的行为
三、读取（调用）方式：
1.点语法：obj.name;
2.方括号语法：obj["name"];
四、创建对象方式：
1.字面量创建对象
2.new Object 创建对象
3.构造函数创建对象
五、构造函数:
是一种特殊函数，主要用来初始化对象，即为对象成员变量赋初始值，她总要与new运算符一起使用。我们可以把对象中的一些公共的属性和方法抽取出来，封装到这个函数里面
1、构造函数约定首字母大写
2、函数内的属性和方法前面需要添加this关键字，表示当前对象的属性和方法
3、构造函数中不需要return返回结果
4、创建对象时，必须使用new来调用构造函数
六、new关键字的作用：
1、在内存中创建一个新的空对象
2、让this指向新创建的对象
3、执行构造函数中的代码，再给这个新对象添加属性和方法
4、返回这个新的对象（所以构造函数里面不需要return）
对象遍历： for...in循环
代码
<!DOCTYPE html>
对象
内置对象
一、概念:
内置对象是js自带的一些对象，供开发者使用，提供一些常用的基本的功能（属性和方法）。
内置对象的有点是帮助我们快速开发
多种内置对象：Math、Date、String、Array、RegExp、Object、Function、Number、Boolean、Error、JSON
MDN查找内置对象：JavaScript 标准内置对象 - JavaScript | MDN (mozilla.org)
二、Math：
Math对象提供一些数学相关的常量和函数。
三、Date：
Date对象表示日期和时间
代码
<!DOCTYPE html>
内置对象
Math：Math对象提供一些数学相关的常量和函数。
Math.PI;//圆周率
Math.floor();//向下取整
Math.ceil();//向上取整
Math.random();//随机数
Math.sqrt();//平方根
Math.abs();//绝对值
Math.max();//最大值
Math.min();//最小值
Math.pow();//幂运算
Math.sqrt();//平方根
Date：Date对象表示日期和时间。
Date是一个构造函数，需要实例化才可以使用
new Date();//创建一个日期对象
new Date(dateString);//创建一个日期对象
new Date(year, month, day, hours, minutes, seconds, milliseconds);//创建一个日期对象
new Date(milliseconds);//创建一个日期对象
new Date().getFullYear();//获取年份
new Date().getMonth();//获取月份
new Date().getDate();//获取日期
new Date().getDay();//获取星期几
new Date().getHours();//获取小时
new Date().getMinutes();//获取分钟
new Date().getSeconds();//获取秒数
new Date().getTime();//获取时间戳
new Date().toLocaleString();//获取本地时间
new Date().toUTCString();//获取UTC时间
new Date().toDateString();//获取日期字符串
new Date().toTimeString();//获取时间字符串
new Date().toLocaleDateString();//获取本地日期字符串
new Date().toLocaleTimeString();//获取本地时间字符串
DOM-文档对象模型 一、DOM概念: js操作页面的中间点，操作页面的接口 DOM树 文档：页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：文档中的所有内容都是节点，节点包括元素节点、属性节点、文本节点、注释节点等 ,DOM中使用node表示 二、 document对象_方法 获取元素 document.getElementById() 获取带有ID的元素对象 document.getElementsByTagName() 获取元素标签名 document.getElementsByClassName() 获取带有class的元素对象 document.getElementsByName() 获取带有name的元素对象 document.querySelector() 获取带有css选择器的元素对象 document.querySelectorAll() 获取带有css选择器的元素对象 三、document对象_方法 创建元素 document.createElement() 创建元素 document.createTextNode() 创建文本节点 document.createAttribute() 创建属性节点 document.createComment() 创建注释节点 四、 element对象_属性 Element.id 获取id属性 Element.className 读写当前class属性，他的值是一个字符串，每个class之间用空格分割 Element.classList 添加、删除、判断class属性，他的值是一个类数组对象 add():增加一个class属性 remove():删除一个class属性 contains():判断是否包含class属性 toggle():切换class属性（如果存在删除，不存在添加） Element.innerHTML 读写当前元素内部的html内容 Element.innerText 只能识别文本，不能识别标签;会把标签识别成字符串 五、 element获取元素位置（过） Element.offsetLeft 获取元素左边到浏览器左边的距离 Element.offsetTop 获取元素上边到浏览器上边的距离 Element.offsetWidth 获取元素宽度 Element.offsetHeight 获取元素高度 Element.clientHeight 获取元素内容高度，包括padding 不包括border和margin Element.clientWidth 获取元素内容宽度，包括padding 不包括border和margin Element.scrollHeight 获取元素内容高度 Element.scrollWidth 获取元素内容宽度 代码
DOM-文档对象模型
js 事件 一、事件处理程序 1、html事件 2、DOM0级事件 3、DOM2级事件 二、鼠标事件 1、onclick 事件 按下鼠标时触发2、dblclick 事件 双击鼠标时触发
3、mounsedown 事件 按下鼠标时触发
4、mouseup 事件 松开鼠标时触发
5、mousemove 事件 鼠标移动时触发
6、mouseenter 事件 鼠标进入元素时触发
7、mouseleave 事件 鼠标离开元素时触发
8、mouseover 事件 鼠标进入元素时触发
9、mouseout 事件 鼠标离开元素时触发
10、wheel 事件 鼠标滚轮滚动时触发
三、Event事件对象 事件发生以后，会产生一个事件对象，作为参数传递给监听函数 Event事件对象属性 1、event.target 事件目标元素 2、event.type 事件类型 Event事件对象方法 1、event.preventDefault() 阻止默认行为 比如说点击按钮弹框，使用之后就不弹框了 2、event.stopPropagation() 阻止事件冒泡 四、键盘事件 键盘事件由用户击打键盘的时候触发，主要 有keydown keyup keypress 事件 keydown 事件 按下键盘时触发 keypress 事件 按下有值的键时触发（ctrl alt是无值的） keyup 事件 释放键盘时触发 五、表单事件 表单事件是在使用表单元素及输入框元素可以监听的一系列事件 1、input事件 输入框内容发生改变时触发 2、change 事件 输入框内容发生改变时触发;失去焦点时触发 3、select 事件 选择框内容发生改变时触发 4、submit 事件 提交表单时触发 5、reset 事件 重置表单时触发 代码
js 事件
文章知识点与官方知识档案匹配，可进一步学习相关知识
Vue入门技能树首页概览43334 人正在系统学习中
