JavaScript基础语法

序言

JavaScript发展历史（JS）

JavaScript能干什么

JavaScript的组成

JavaScript代码的书写位置

行内式 JS 代码（不推荐）

内嵌式 JS 代码

外链式 JS 代码（推荐）

JS 中的注释

单行注释

多行注释

变量（重点）

定义变量及赋值

变量的命名规则和命名规范

数据类型（重点）

基本数据类型

复杂数据类型（暂时先不讲）

判断数据类型

判断一个变量是不是数字

数据类型转换

其他数据类型转成数值

其他数据类型转成字符串

其他数据类型转成布尔

运算符

数学运算符

赋值运算符

比较运算符

逻辑运算符

自增自减运算符（一元运算符）

分支结构

IF 条件分支结构（重点）

if 语句

if else 语句

if else if ... 语句

if else if … else 语句

SWITCH 条件分支结构（重点）

三元运算（扩展）

循环结构（重点）

WHILE 循环

DO WHILE 循环

FOR 循环

BREAK 终止循环

CONTINUE 结束本次循环

函数（上）

函数的概念

函数的两个阶段（重点）

函数定义阶段

函数调用阶段

函数的参数（重点）

行参和实参的作用

参数个数的关系

函数的return（重点）

终断函数

返回值

函数的优点

预解析（重点）

解释代码

函数（下）

作用域（重点）

全局作用域

局部作用域

变量使用规则（重点）

访问规则

赋值规则

递归函数

简单实现一个递归

简单了解对象

创建一个对象

数组

数据类型分类

创建一个数组

字面量创建一个数组

内置构造函数创建数组

数组的 length

数组的索引

数据类型之间存储的区别（重点）

基本数据类型在内存中的存储情况

复杂数据类型在内存中的存储情况

数据类型之间的比较

数组的常用方法

数组常用方法之 push

数组常用方法之 pop

数组常用方法之 unshift

数组常用方法之 shift

数组常用方法之 splice

数组常用方法之 reverse

数组常用方法之 sort

数组常用方法之 concat

数组常用方法之 join

for 和 for in 循环

数组的排序

冒泡排序

选择排序

函数参数传递基本数据类型和复杂数据类型的区别

函数的参数

ES5/String

严格模式（了解）

开启严格模式

严格模式的规则

ES5 中常见的数组常用方法

indexOf

forEach

map

filter

创建字符串（了解）

ASCII 字符集（了解）

unicode 编码

字符串的常用方法

charAt

charCodeAt

indexOf

substring

substr

toLowerCase 和 toUpperCase

Math 和 Date

Math

random

round

abs

ceil

floor

max

min

数字转换进制

Date

new Date()

将日期字符串格式化成指定内容

getFullYear

getMonth

getDate

getHours

getMinutes

getSeconds

getDay

getTime

获取时间差

计算时间差

BOM 和 DOM（上）

BOM

获取浏览器窗口的尺寸

浏览器的弹出层

浏览器的地址信息

浏览器的历史记录

浏览器的版本信息（了解）

浏览器的 onload 事件

浏览器的 onscroll 事件

浏览器滚动的距离

定时器

DOM（上）

获取一个元素

操作属性

DOM（下）

DOM节点

元素节点

属性节点

文本节点

获取节点

节点属性

操作 DOM 节点

创建一个节点

向页面中加入一个节点

删除页面中的某一个节点

修改页面中的某一个节点

获取元素的非行间样式

getComputedStyle（非IE使用）

currentStyle（IE使用）

获取元素的偏移量

offsetParent

offsetLeft 和 offsetTop

获取元素尺寸

offsetWith 和 offsetHeight

clientWidth 和 clientHeight

注意

获取浏览器窗口尺寸

EVENT（上）

什么是事件

事件对象

点击事件的光标坐标点获取

相对于你点击的元素来说

相对于浏览器窗口你点击的坐标点

相对于页面你点击的坐标点

点击按键信息（了解）

常见的事件（了解）

浏览器事件

鼠标事件

键盘事件

表单事件

触摸事件

键盘事件

确定按键

组合按键

事件的绑定方式

事件监听

两个方式的区别

EVENT（下）

事件的传播

冒泡、捕获、目标

目标

冒泡

捕获

冒泡和捕获的区别

事件委托

事件触发

target

委托

总结

默认行为

阻止默认行为

正则

创建一个正则表达式

字面量创建

构造函数创建

正则表达式里面的符号

元字符

限定符

边界符

特殊符号

标识符

正则表达式的方法

test

exec

字符串的方法

match

replace

面向对象

创建对象的方式

调用系统内置的构造函数创建对象

字面量的方式创建一个对象

使用工厂函数的方式创建对象

使用自定义构造函数创建对象

构造函数详解

构造函数的基本使用

使用构造函数创建一个对象

原型

prototype

__proto__

原型链

一个对象所属的构造函数

constructor

链状结构

原型链的访问原则

对象的赋值

总结

原型/原型链

栈和堆

封装异步代码

PHP

基本组织架构

服务器的简单理解

服务器的认识

到底什么是服务器

服务器是怎么访问的呢

PHP 基础语法

php文件

php文件的书写

简单了解 php 的语法

MYSQL

数据库的数据类型

操作数据库

常用的 sql 语句

闭包

函数的两个阶段

函数定义阶段

函数调用阶段

重新定义函数调用阶段

函数执行空间

函数执行空间不销毁

闭包

不销毁的空间

内部函数引用外部函数中的变量

闭包的特点

闭包概念（熟读并背诵全文）

继承

一个小例子

继承的作用

常见的继承方式

ES6 的继承

设计模式

单例模式

核心代码

应用

组合模式

观察者模式

一个例子

addEventListener

书写代码

单例模式

原型继承

jQuery

jQuery 的使用

选择器和筛选器

选择器

筛选器

属性操作

操作样式

jQuery

元素操作

元素尺寸

元素位置

元素事件

可以直接使用的常见事件

动画

jQuery

发送 ajax 请求

全局 ajax 函数

ajaxStart

ajaxSend

ajaxSuccess

ajaxError

ajaxComplete

ajaxStop

jQuery 的多库共存

JQuery 的插件扩展

扩展给他自己本身

扩展给元素集

SASS

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

安装 sass 环境

编译 sass

实时编译

实时监控目录

sass 语法

变量

嵌套

混入

继承

注释

导入文件

GULP

什么是自动化打包工具

安装 GULP 环境

为什么要使用 gulp

使用 GULP

1. 创建一个项目

2. 在项目里面下载 gulp

3. GULP的几个常用 API

4. 创建一个压缩 css 的任务

5. 创建一个压缩 sass 的任务

6. 创建一个压缩 JavaScript 的任务

7. 创建一个压缩 HTML 的任务

8. 创建一个压缩图片的任务

9. 其他资源和静态资源的任务

10. 创建一个默认任务

11. 创建一个 DEL 的任务

12. 逐步执行任务

13. 创建一个监控的任务

14. 自动打开浏览器和热刷新的任务

完整版配置文件

GIT 和 GITHUB

什么是 GIT

什么是 GITHUB

GIT 使用

GIT 安装

GIT 使用

GIT 克隆

GIT 下拉

GIT 冲突

JavaScript基础语法

HTML ：标记语言
JavaScript ：编程语言

JavaScript的组成

1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. BOM (Browser Object Model): 浏览器对象模型- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等
3. DOM (Document Object Model): 文档对象模型- 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等

总结： JS 就是通过固定的语法去操作浏览器和标签结构来实现网页上的各种效果

JS 中的注释

单行注释

可以直接写两个 / ，也可以按 ctrl + /

// 我是一个单行注释

多行注释

可以直接写 /**/ 然后在两个星号中间写注释
- 各个编辑器的快捷键不一样，vscode 是 ctrl + shift + a

/*注释的代码不会执行alert('我是一个弹出层')alert('我是一个弹出层')
*/

变量（重点）

变量指的是在程序中保存数据的一个容器
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
语法： var 变量名 = 值

变量的命名规则和命名规范

规则：必须遵守的，不遵守就是错
1. 一个变量名称可以由数字、字母、英文下划线（_）、美元符号（$） 组成
2. 严格区分大小写
3. 不能由数字开头
4. 不能是 保留字 或者 关键字
5. 不要出现空格
规范：建议遵守的（开发者默认），不遵守不会报错
1. 变量名尽量有意义（语义化）
2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
3. 不要使用中文

数据类型（重点）

是指我们存储在内存中的数据的类型
我们通常分为两大类 基本数据类型 和 复杂数据类型

基本数据类型

数值类型（number）
- 一切数字都是数值类型（包括二进制，十进制，十六进制等）
- NaN（not a number），一个非数字
字符串类型（string）
- 被引号包裹的所有内容（可以是单引号也可以是双引号）
布尔类型（boolean）
- 只有两个（true 或者 false）
null类型（null）
- 只有一个，就是 null，表示空的意思
undefined类型（undefined）
- 只有一个，就是 undefined，表示没有值的意思

复杂数据类型（暂时先不讲）

对象类型（object）
函数类型（function）
。。。

判断数据类型

既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据
使用 typeof 关键字来进行判断

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);

// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

判断一个变量是不是数字

可以使用 isNaN 这个方法来判断一个变量是不是数字
isNaN ：is not a number

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false

// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

数据类型转换

数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

其他数据类型转成数值

Number(变量)

可以把一个变量强制转换成数值类型

可以转换小数，会保留小数

可以转换布尔值

遇到不可转换的都会返回 NaN
parseInt(变量)

从第一位开始检查，是数字就转换，知道一个不是数字的内容

开头就不是数字，那么直接返回 NaN

不认识小数点，只能保留整数
parseFloat(变量)

从第一位开始检查，是数字就转换，知道一个不是数字的内容

开头就不是数字，那么直接返回 NaN

认识一次小数点
除了加法以外的数学运算

运算符两边都是可运算数字才行

如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN

加法不可以用

其他数据类型转成字符串

变量.toString()

有一些数据类型不能使用 toString() 方法，比如 undefined 和 null
String(变量)

所有数据类型都可以
使用加法运算

在 JS 里面，+ 由两个含义

字符串拼接：只要 + 任意一边是字符串，就会进行字符串拼接

加法运算：只有 + 两边都是数字的时候，才会进行数学运算

其他数据类型转成布尔

Boolean(变量)

在 js 中，只有 ''、0、null、undefined、NaN，这些是 false

其余都是 true

运算符

就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在 js 里面还有很多的运算方式

数学运算符

+

只有符号两边都是数字的时候才会进行加法运算

只要符号任意一边是字符串类型，就会进行字符串拼接
-

会执行减法运算

会自动把两边都转换成数字进行运算
*

会执行乘法运算

会自动把两边都转换成数字进行运算
/

会执行除法运算

会自动把两边都转换成数字进行运算
%

会执行取余运算

会自动把两边都转换成数字进行运算

赋值运算符

=

就是把 = 右边的赋值给等号左边的变量名

var num = 100

就是把 100 赋值给 num 变量

那么 num 变量的值就是 100

+=

var a = 10;
a += 10;
console.log(a); //=> 20
a += 10 等价于 a = a + 10

-=
var a = 10;
```
a -= 10;
console.log(a); //=> 0
```
a -= 10 等价于 a = a - 10

*=

var a = 10;
a *= 10;
console.log(a); //=> 100
a *= 10 等价于 a = a * 10

/+

var a = 10;
a /= 10;
console.log(a); //=> 1
a /= 10 等价于 a = a / 10

%=

var a = 10;
a %= 10;
console.log(a); //=> 0
a %= 10 等价于 a = a % 10

比较运算符

==
- 比较符号两边的值是否相等，不管数据类型
  
  1 == '1'
  
  两个的值是一样的，所以得到 true
===
- 比较符号两边的值和数据类型是否都相等
  
  1 === '1'
  
  两个值虽然一样，但是因为数据类型不一样，所以得到 false
!=
- 比较符号两边的值是否不等
  
  1 != '1'
  
  因为两边的值是相等的，所以比较他们不等的时候得到 false
!==
- 比较符号两边的数据类型和值是否不等
  
  1 !== '1'
  
  因为两边的数据类型确实不一样，所以得到 true
>=
- 比较左边的值是否 大于或等于 右边的值
  
  1 >= 1 结果是 true
  
  1 >= 0 结果是 true
  
  1 >= 2 结果是 false
<=
- 比较左边的值是否 小于或等于 右边的值
  
  1 <= 2 结果是 true
  
  1 <= 1 结果是 true
  
  1 <= 0 结果是 false
>
- 比较左边的值是否大于右边的值
  
  1 > 0 结果是 true
  
  1 > 1 结果是 false
  
  1 > 2 结果是 false
<
- 比较左边的值是否小于右边的值
  
  1 < 2 结果是 true
  
  1 < 1 结果是 false
  
  1 < 0 结果是 false

逻辑运算符

&&
- 进行且的运算
  
  符号左边必须为 true 并且右边也是 true，才会返回 true
  
  只要有一边不是 true，那么就会返回 false
  
  true && true 结果是 true
  
  true && false 结果是 false
  
  false && true 结果是 false
  
  false && false 结果是 false
||
- 进行或的运算
  
  符号的左边为 true 或者右边为 true，都会返回 true
  
  只有两边都是 false 的时候才会返回 false
  
  true || true 结果是 true
  
  true || false 结果是 true
  
  false || true 结果是 true
  
  false || false 结果是 false
!
- 进行取反运算
  
  本身是 true 的，会变成 false
  
  本身是 false 的，会变成 true
  
  !true 结果是 false
  
  !false 结果是 true

自增自减运算符（一元运算符）

++

进行自增运算
分成两种，前置++ 和 后置++

前置++，会先把值自动 +1，在返回

var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11

后置++，会先把值返回，在自动+1

var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11

--
- 进行自减运算
- 分成两种，前置-- 和 后置--
- 和 ++ 运算符道理一样

-------------------------------------------------------------------------------------------------------------------------------

分支结构

我们的 js 代码都是顺序执行的（从上到下）
逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码

IF 条件分支结构（重点）

if 语句

通过一个 if 语句来决定代码是否执行
语法： if (条件) { 要执行的代码 }

通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

// 条件为 true 的时候执行 {} 里面的代码
if (true) {alert('因为条件是 true，我会执行')
}

// 条件为 false 的时候不执行 {} 里面的代码
if (false) {alert('因为条件是 false，我不会执行')
}

if else 语句

通过 if 条件来决定，执行哪一个 {} 里面的代码
语法： if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }

两个 {} 内的代码一定有一个会执行

// 条件为 true 的时候，会执行 if 后面的 {}
if (true) {alert('因为条件是 true，我会执行')
} else {alert('因为条件是 true，我不会执行')
}

// 条件为 false 的时候，会执行 else 后面的 {}
if (false) {alert('因为条件为 false，我不会执行')
} else {alert('因为条件为 false，我会执行')
}

if else if ... 语句

可以通过 if 和 else if 来设置多个条件进行判断
语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }
会从头开始依次判断条件
- 如果第一个条件为 true 了，那么就会执行后面的 {} 里面的内容
- 如果第一个条件为 false，那么就会判断第二个条件，依次类推

多个 {} ，只会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了

// 第一个条件为 true，第二个条件为 false，最终会打印 “我是代码段1”
if (true) {alert('我是代码段1')
} else if (false) {alert('我是代码段2')
}

// 第一个条件为 true，第二个条件为 true，最终会打印 “我是代码段1”
// 因为只要前面有一个条件满足了，就不会继续判断了
if (true) {alert('我是代码段1')
} else if (true) {alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2”
// 只有前一个条件为 false 的时候才会继续向后判断
if (false) {alert('我是代码段1')
} else if (true) {alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 false，最终什么也不会发生
// 因为当所有条件都为 false 的时候，两个 {} 里面的代码都不会执行
if (false) {alert('我是代码段1')
} else if (false) {alert('我是代码段2')
}

if else if … else 语句

和之前的 if else if ... 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 {}

// 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
// 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
// 只要前面有一个条件满足了，那么后面的就都不会执行了
if (false) {alert('我是代码段1')
} else if (false) {alert('我是代码段2')
} else {alert('我是代码段3')
}

SWITCH 条件分支结构（重点）

也是条件判断语句的一种
是对于某一个变量的判断

语法：

switch (要判断的变量) {case 情况1:情况1要执行的代码breakcase 情况2:情况2要执行的代码breakcase 情况3:情况3要执行的代码breakdefault:上述情况都不满足的时候执行的代码
}

要判断某一个变量等于某一个值得时候使用

例子

JS笔记(前端小灰狼)相关推荐
1. JS笔记-前端实现验证码功能
  程序运行截图如下: 当输入错误验证码点击登录后输入正确验证码后,就可以跳转了. 这里主要是使用JS生成了验证码程序结构如下源码如下: vail.js //高.宽.字符大小.字符集 var w = ...
2. 「跨域」利用node.js实践前端各种跨域方式（上）
  前言常言道,"读万卷书,不如行万里路".技术的学习也是如此,唯有实践才能更清楚的明白原理和加深印象,因此本文会利用node.js对前端的各种跨域方式进行实践,强烈建议一步一步跟着 ...
3. 学习MSCKF笔记——前端、图像金字塔光流、Two Point Ransac
  学习MSCKF笔记--前端.图像金字塔光流.Two Point Ransac 学习MSCKF笔记--前端.图像金字塔光流.Two Point Ransac 1. 图像金字塔光流 2. Two Poin ...
4. js笔记（一）js基础、程序结构、函数
  大标题小节一.js 基础 1. javascript的组成: 2. 运行js: 3. 打印信息: 4. 关键字var: 5. js中的数据类型: 6. NaN(not a number): 7. ...
5. 使用Decimal.js解决前端计算金钱失真问题
  使用Decimal.js解决前端计算金钱失真问题参考文章: (1)使用Decimal.js解决前端计算金钱失真问题 (2)https://www.cnblogs.com/GGDong/p/10997 ...
6. JS纯前端实现文件保存
  JS纯前端实现文件保存 <body><a href="" id="a">click here to download your file ...
7. Vue.js笔记(一)
  Vue.js笔记(一) 读书笔记 Vue.js介绍内容概要 1.1 站在巨人的肩膀上 1.1.1 MVC模式 1.1.2 MVVM模式 2.1.3 异步执行脚本 2.1.4 动态加载脚本 2.2 行 ...
8. html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
  续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
9. html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
  续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里. 这些数字可以随着玩家的操作而移动我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓ 只有当grid-cell ...
最新文章
热门文章

JS笔记(前端小灰狼)

JavaScript基础语法

JavaScript的组成

JS 中的注释

单行注释

多行注释

变量（重点）

变量的命名规则和命名规范

数据类型（重点）

基本数据类型

复杂数据类型（暂时先不讲）

判断数据类型

判断一个变量是不是数字

数据类型转换

其他数据类型转成数值

其他数据类型转成字符串

其他数据类型转成布尔

运算符

数学运算符

赋值运算符

比较运算符

逻辑运算符

自增自减运算符（一元运算符）

分支结构

IF 条件分支结构（重点）

if 语句

if else 语句

if else if ... 语句

if else if … else 语句

SWITCH 条件分支结构（重点）

JS笔记(前端小灰狼)相关推荐

最新文章

热门文章