C01-JavaScript快速入门(全)

如果你学习过C/C++等高级语言，上手会超级快的，因为比C简单多了！！！

建议：学过HTML，CSS后再学JS。==》当然HTML和CSS的学习也可以看我的主页，有相关的文章。尽力做到一站式学习。

创作不易，请不要吝啬点赞收藏哦。

目录

1.JavaScript简介

2.JavaScript语句、标识符

3.变量

4.JS引入到文件

5.JS注释与常见输出方式

6.数据类型

7.运算符 

7.1 typeof运算符

7.2 运算符之算术运算符

7.3 运算符之赋值运算符

7.4 运算符之比较运算符

7.5 运算符之布尔运算符

7.6 三元运算符

8.条件语句和循环语句

8.1 if条件语句

8.2 if...else条件语句

8.3 switch语句

8.4 for循环语句

8.5 while循环语句

8.6 break和continue语句

9.字符串

9.1 字符串概念和语法

9.2 字符串方法charAt()

9.3 字符串方法concat()

9.4 字符串方法substring()

9.5 字符串方法substr()

9.6 字符串方法indexOf()

9.7 字符串方法trim()

9.8 字符串方法split()

10.数组

10.1 概念

10.2 数组的遍历

10.3 数组静态方法Array.isArray()

10.4 数组的方法push()和pop()

10.5 数组方法shift()和unshift()

10.6 数组方法join()

10.7 数组方法concat()

10.8 数组方法reverse()

10.9 数组方法indexOf()

11.函数

12.对象

13.Math对象

14.Data对象

15.DOM详讲

15.1 DOM概述

15.2 document对象_方法/获取元素

15.3 document对象_方法/创建元素

15.4 Element对象_属性

15.5 Element获取元素位置

16.CSS操作

17.事件处理程序

17.1 如何添加事件

17.2 事件类型之鼠标事件

18.event事件对象

18.1 event对象属性和方法

18.2 事件类型之键盘事件

18.3 事件类型之表单事件

18.4 事件代理（事件委托）

19.定时器timer

19.1 定时器之setTimeout

19.2 定时器之setInterval

20.防抖(debounce)

21.节流(throttle)

---

1.JavaScript简介

1.1 JavaScript介绍

1.2 为什么学习JavaScript

1.3 JavaScript与ECMAScript的关系

1.4 JavaScript版本

2.JavaScript语句、标识符

3.变量

4.JS引入到文件

5.JS注释与常见输出方式

6.数据类型

7.运算符 

7.1 typeof运算符

一般用typeof判断基本数据类型的（number string boolean) 

7.2 运算符之算术运算符

7.3 运算符之赋值运算符

7.4 运算符之比较运算符

7.5 运算符之布尔运算符

7.6 三元运算符

8.条件语句和循环语句

8.1 if条件语句

8.2 if...else条件语句

8.3 switch语句

8.4 for循环语句

8.5 while循环语句

8.6 break和continue语句

9.字符串

9.1 字符串概念和语法

9.2 字符串方法charAt()

9.3 字符串方法concat()

9.4 字符串方法substring()

9.5 字符串方法substr()

9.6 字符串方法indexOf()

9.7 字符串方法trim()

9.8 字符串方法split()

10.数组

10.1 概念

10.2 数组的遍历

10.3 数组静态方法Array.isArray()

10.4 数组的方法push()和pop()

10.5 数组方法shift()和unshift()

10.6 数组方法join()

10.7 数组方法concat()

10.8 数组方法reverse()

10.9 数组方法indexOf()

11.函数

12.对象

13.Math对象

14.Data对象

15.DOM详讲

15.1 DOM概述

15.2 document对象_方法/获取元素

15.3 document对象_方法/创建元素

只有添加属性才是setAttributeNode(),其他都是appendChild()。 

15.4 Element对象_属性

15.5 Element获取元素位置

视口高度：屏幕高度

网页总高度：页面内容有多大，总高度就有多大，没有内容的不算页面高度。

页面总高度通常小于视口高度。

真正应用当中，clientHeight和scrollHeight几乎没有差别，因为很少将内容设置未不可见的。 

16.CSS操作

17.事件处理程序

17.1 如何添加事件

事件处理程序分为:

• HTML事件处理
• DOM0级事件处理
• DOM2级事件处理

	
		
		
	
	
		
		
		HTML事件按钮1
		
		
		
		
		
		DOM0级按钮2
		
		
		
		
		DOM2级按钮3
		
		
		
	

17.2 事件类型之鼠标事件

测试代码：

	
		
		
	
	
		
		单击
		
		
		
		双击
		
		
		
		鼠标按下
		
		
		
		鼠标抬起
		
		
		
		

		
		
		

		
		
		
		

		
		
		
		

		
		
		

		
		
		
	

mouseenter和mouseover的区别：

18.event事件对象

18.1 event对象属性和方法

 

事件冒泡：点击子元素时候，也会触发父元素。

18.2 事件类型之键盘事件

18.3 事件类型之表单事件

18.4 事件代理（事件委托）

19.定时器timer

19.1 定时器之setTimeout

 

19.2 定时器之setInterval

动画效果：

20.防抖(debounce)

21.节流(throttle)

函数节流（throttle）：指定时间间隔内只会执行一次任务。
 

生活中的实例： 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。
 

       规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发click事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

 

节流和防抖之间的区别：

         函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

函数防抖应用场景：    

• 给按钮加函数防抖防止表单多次提交。
• 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
• 判断scroll是否滑到底部，滚动事件+函数防抖
• 总的来说，适合多次事件一次响应的情况。

函数节流应用场景：

• 游戏中的刷新率
• DOM元素拖拽
• Canvas画笔功能
• 总的来说，适合大量事件按时间做平均分配触发。