JS-基础知识

一.编程语言

1.编程

在这里插入图片描述

2.计算机语言

在这里插入图片描述

3.编程语言

在这里插入图片描述

4.翻译器

在这里插入图片描述

5.编程语言和标记语言的区别

在这里插入图片描述

6.总结

在这里插入图片描述

二.计算机基础

1.计算机组成

在这里插入图片描述
在这里插入图片描述

2.数据存储

在这里插入图片描述

3.数据存储单位

在这里插入图片描述

4.程序运行

在这里插入图片描述

三.认识JavaScript

1.初识JavaScript

在这里插入图片描述

2.JavaScript是什么

在这里插入图片描述

3.JavaScript作用

在这里插入图片描述

4.HTML/CSS/JS关系

在这里插入图片描述

5.浏览器执行JS简介

在这里插入图片描述

6.JS组成

在这里插入图片描述

6.1 ECMAScript

在这里插入图片描述

6.2 DOM-文档对象模型在这里插入图片描述

6.3 BOM-浏览器对象模型

在这里插入图片描述

7.JS初体验

JS分别有三种书写位置,分别是行内,内嵌和外部

7.1 行内式JS

在这里插入图片描述

7.2 内嵌式JS

在这里插入图片描述

7.3 外部JS

在这里插入图片描述

8.JS输入输出语句

在这里插入图片描述

四.JS变量

1.什么是变量

在这里插入图片描述
在这里插入图片描述

2.变量的使用

2.1 声明变量

在这里插入图片描述

2.2 赋值

在这里插入图片描述

2.3 变量初始化

在这里插入图片描述

3.变量的语法扩展

3.1 更新变量

在这里插入图片描述

3.2 同时声明多个变量

在这里插入图片描述

3.3 声明变量的特殊情况

在这里插入图片描述

4.变量命名规范

不要使用name作为变量名,name有特殊含义
在这里插入图片描述

5.变量小结

在这里插入图片描述

五.数据类型

1.数据类型简介

1.1 为什么需要数据类型

在这里插入图片描述

1.2 变量的数据类型

在这里插入图片描述

1.3 数据类型的分类

在这里插入图片描述

2.简单数据类型

2.1 简单数据类型(基本数据类型)

在这里插入图片描述

2.2 数字型Number

在这里插入图片描述

2.2.1 数字型进制

在这里插入图片描述
在这里插入图片描述

2.2.2 数字型范围

在这里插入图片描述

2.2.3 数字型三个特殊值

在这里插入图片描述

2.2.4 isNaN()

在这里插入图片描述

2.3 字符串型String

在这里插入图片描述

2.3.1 字符串引号嵌套

在这里插入图片描述

2.3.2 字符串转义符

在这里插入图片描述

2.3.3 字符串长度

在这里插入图片描述

2.3.4 字符串拼接

在这里插入图片描述

2.3.5 字符串拼接加强

在这里插入图片描述

2.4 布尔型Boolean

在这里插入图片描述

2.5 Undefined和Null

在这里插入图片描述

3.获取变量数据类型

3.1 typeof和控制台打印颜色

通过typeof获取变量的数据类型,也可以通过控制台的颜色判断(蓝色数字,深蓝色布尔,黑色字符串,浅灰色undefined和null)

3.2 字面量

在这里插入图片描述

4.数据类型转换

4.1 什么是数据类型转换

在这里插入图片描述

4.2 转换为字符串

在这里插入图片描述

4.3 转换为数字型(重点)

在这里插入图片描述

4.4 转换为布尔型

在这里插入图片描述

六.扩展

1.解释型语言和编译语言

在这里插入图片描述

在这里插入图片描述

2.标识符、关键字、保留字

2.1 标识符

在这里插入图片描述

2.2 关键字

在这里插入图片描述

2.3 保留字

在这里插入图片描述

七.JS运算符

1.运算符

在这里插入图片描述

2.算数运算符

2.1 算数运算符概述

在这里插入图片描述

2.2 浮点数的精度问题

在这里插入图片描述

2.3 提问补充

在这里插入图片描述

2.4 表达式和返回值

在这里插入图片描述

3.递增和递减运算符

此处例举递增运算符,递减运算符与之同理

3.1 递增和递减运算符概述

在这里插入图片描述

3.2 递增运算符

3.2.1 前置递增运算符在这里插入图片描述
3.2.2 后置递增运算符

在这里插入图片描述

3.2.3 递增运算符练习

在这里插入图片描述

3.3 前置递增和后置递增小结

在这里插入图片描述

4.比较运算符

4.1 比较运算符概述

在这里插入图片描述

4.2 等号运算符小结

在这里插入图片描述

5.逻辑运算符

5.1 逻辑运算符概述

在这里插入图片描述

5.2 逻辑与&&

在这里插入图片描述

5.3 逻辑或||

在这里插入图片描述

5.4 逻辑非!

在这里插入图片描述

5.5 短路运算(逻辑中断)

在这里插入图片描述

5.5.1 逻辑与(永远返回假的)

在这里插入图片描述

5.5.2 逻辑或(永远返回真的)

在这里插入图片描述
在这里插入图片描述

6.赋值运算符

在这里插入图片描述

7.运算符优先级

在这里插入图片描述

八.JS流程控制-分支

1.流程控制

在这里插入图片描述

2.顺序流程控制

在这里插入图片描述

3.分支流程控制if语句

3.1 分支结构

在这里插入图片描述

3.2 if语句

3.2.1 语法结构

在这里插入图片描述

3.2.2 执行流程

在这里插入图片描述

3.3 if-else语句(双分支语句)

3.3.1 语法结构

在这里插入图片描述

3.3.2 执行流程

在这里插入图片描述

3.4 if else if语句(多分支语句)

3.4.1 语法结构

在这里插入图片描述

3.4.2 执行流程

在这里插入图片描述

4.三元表达式

在这里插入图片描述
在这里插入图片描述

5.分支流程控制switch语句

switch执行效率要比if-else高,因为它通过匹配表达式返回值直接跳转到对应case的执行语句里,不会一行行去判断值匹不匹配。另外,判断大于小于之类带有范围的,用if-else更好,不适用switch这种特定值匹配

5.1 语法结构

在这里插入图片描述

5.2 switch注意点

在这里插入图片描述

5.3 switch语句和if else if语句的区别

在这里插入图片描述

九.JS流程控制-循环

1.循环

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.for循环

2.1 for循环语法结构

在这里插入图片描述
在这里插入图片描述

2.2 for循环执行过程

在这里插入图片描述

2.3 断点调试

在这里插入图片描述

3.双重for循环

在这里插入图片描述

3.1 双重for循环语法结构

在这里插入图片描述

3.2 案例解答

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.3 九九乘法表

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4 for循环小结

在这里插入图片描述

4.while循环

在这里插入图片描述
while与for的不同之处在于,while可以用于判断条件比较复杂的情况

5.do while循环

在这里插入图片描述

6.循环小结

在这里插入图片描述

7.continue break

7.1 continue关键字

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.2 break关键字

在这里插入图片描述
在这里插入图片描述

十.JS命名规范及语法格式

1.标识符命名规范

在这里插入图片描述

2.操作符命名规范

在这里插入图片描述

3.单行注释命名规范

在这里插入图片描述

4.其他规范

在这里插入图片描述

十一.数组

1.数组的概念

在这里插入图片描述

2.创建数组

2.1 创建数组的方式

在这里插入图片描述

2.2 利用new创建数组

在这里插入图片描述

2.3 利用数组字面量创建数组(常用)

在这里插入图片描述
在这里插入图片描述

2.4 数组元素的类型

在这里插入图片描述

3.获取数组中的元素

在这里插入图片描述

4.遍历数组

在这里插入图片描述
在这里插入图片描述

4.1 数组长度

在这里插入图片描述
在这里插入图片描述

4.2 案例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.数组中新增元素

5.1 通过修改length长度新增数组元素

在这里插入图片描述
在这里插入图片描述

5.2 通过修改数组索引新增数组元素

在这里插入图片描述
在这里插入图片描述
案例(方法1):
在这里插入图片描述
案例(方法2):
在这里插入图片描述

6.数组案例

6.1 数组去重

在这里插入图片描述

6.2 翻转数组

在这里插入图片描述

6.3 数组排序(冒泡排序)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

十二.函数

1.函数的概念

在这里插入图片描述

2.函数的使用

在这里插入图片描述

2.1 声明函数

在这里插入图片描述

2.2 调用函数

在这里插入图片描述

2.3 函数封装

在这里插入图片描述

3. 函数的参数

3.1 形参和实参

在这里插入图片描述
在这里插入图片描述

3.2 形参和实参个数不匹配问题

在这里插入图片描述
在这里插入图片描述

3.3 小结

在这里插入图片描述

4. 函数的返回值

4.1 return语句

在这里插入图片描述
案例:
在这里插入图片描述
在这里插入图片描述

4.2 return 终止函数

在这里插入图片描述

4.3 return 的返回值

在这里插入图片描述
若需要返回多个值,用数组:
在这里插入图片描述

4.4 函数没有return返回undefined

在这里插入图片描述

4.5 break、continue、return的区别

在这里插入图片描述

5. arguments的使用

在这里插入图片描述
在这里插入图片描述

6. 函数案例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
函数可以调用另外一个函数:
在这里插入图片描述

7. 函数的两种声明方式

在这里插入图片描述

十三.JS作用域

1.作用域

在这里插入图片描述
在这里插入图片描述

2.变量的作用域

2.1 变量作用域的分类

在这里插入图片描述

2.2 全局变量

在这里插入图片描述
在这里插入图片描述

2.3 局部变量

在这里插入图片描述
在这里插入图片描述

2.4 全局变量和局部变量的区别

在这里插入图片描述

3.作用域链

在这里插入图片描述
在这里插入图片描述
案例1:答案123(站在目标(console.log)出发,一层层往外找)
在这里插入图片描述
案例2:答案a=4 b=‘22’
在这里插入图片描述

十四.JS预解析

1.预解析

在这里插入图片描述

变量提升:把所有变量声明提升到当前的作用域最前面,不提升赋值操作。
示例1:
在这里插入图片描述
图2:
在这里插入图片描述
函数提升:把所有函数声明提升到当前作用域的最前面,不调用函数
此代码执行无误,因为函数声明会自动提升到最上面,执行顺序相当于:先function fn(),再调用fn(),这样是没问题的
图3:
在这里插入图片描述
注意:图3和图2要区分开,图2是”表达式赋值”的形式,图3中的是使用”function关键字进行函数声明的形式”,所以图2不能进行函数提升(函数表达式的写法是“调用必须写在函数表达式下面”)

2.预解析案例

在这里插入图片描述
相当于以下代码:

var num
function fun(){
	var num
	console.log(num)//就近原则 离的最近的是‘var num’,所以输出结果“undefined”
	num = 20
}
num = 10
fun()

在这里插入图片描述
相当于以下代码:

var num
function fn(){
	var num
	console.log(num);//undefined
	num = 20
	console.log(num);//20
}
num = 10
fn()

在这里插入图片描述
相当于以下代码:

var a
function f1(){
	var b
	var a
	b = 9
	console.log(a)//undefined
	console.log(b)//9
	a = '123'
}
a = 18
f1()

在这里插入图片描述
相当于以下代码:

function f1(){
	//集体声明: var a = 9; var b = 0; var c = 9; 写法是var a = 9, b = 9, c = 9; 逗号隔开
	// 而 var a = b = c = 9 相当于var a = 9; b = 9; c = 9 分号隔开, b c 直接被赋值,没有var声明,当全局变量看
	var a 
	a = b = c = 9
	console.log(a)//9
	console.log(b)//9
	console.log(c)//9
}
f1()
console.log(c)//9(全局变量)
console.log(b)//9(全局变量)
console.log(a)//报错 a is not defined(局部变量 只在f1()里面被声明赋值了)

十五.JS 对象

1.对象

1.1 什么是对象

在这里插入图片描述

1.2 为什么需要对象

在这里插入图片描述

2.创建对象的三种方式

在这里插入图片描述

2.1 利用字面量创建对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

变量、属性、函数、方法的区别

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 利用new Object创建对象

在这里插入图片描述

2.3 利用构造函数创建对象

1.为什么需要使用构造函数
在这里插入图片描述
在这里插入图片描述
2.利用构造函数创建对象
在这里插入图片描述
在这里插入图片描述
3.构造函数和对象的联系
在这里插入图片描述
在这里插入图片描述

3.new 关键字

在这里插入图片描述

4.遍历对象

在这里插入图片描述

5.小结

在这里插入图片描述

十六.JS 内置对象

1.什么是内置对象

在这里插入图片描述

2.查文档

在这里插入图片描述

3.Math对象

3.1 Math的最大值、绝对值、取整方法(封装自己的数学对象)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 随机数方法random()

在这里插入图片描述
案例:猜数字
在这里插入图片描述
在这里插入图片描述

4.Date日期对象

4.1 日期对象的使用

在这里插入图片描述
获取当前时间必须实例化

var now = new Date()

在这里插入图片描述

4.2 日期及时分秒格式化

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.3 获取日期的总的毫秒形式

在这里插入图片描述
案例:倒计时
在这里插入图片描述

5.数组对象

5.1 数组创建的两种方式

在这里插入图片描述

5.2 检测是否为数组的两种方式

在这里插入图片描述
Array.isArray优先于instanceof,因为Array.isArray能检测到iframes

5.3 添加或删除数组元素方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
案例:筛选数组
在这里插入图片描述

5.4 数组排序

在这里插入图片描述

5.5 数组索引方法

在这里插入图片描述
在这里插入图片描述
案例:数组去重
在这里插入图片描述

5.6 数组转换为字符串

在这里插入图片描述
在这里插入图片描述

5.7 独自查阅文档

在这里插入图片描述

6.字符串对象

6.1 基本包装类型

在这里插入图片描述

6.2 字符串不可变

在这里插入图片描述

6.3 根据字符返回位置

在这里插入图片描述
案例:返回字符位置以及次数
在这里插入图片描述

6.4 根据位置返回字符(重点)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
案例:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.5 字符串操作方法(重点)

在这里插入图片描述
在这里插入图片描述
查阅:
toUpperCase() //转换大写
toLowerCase() //转换小写

十七.JS 简单数据类型和复杂数据类型

1.简单类型与复杂类型

在这里插入图片描述
在这里插入图片描述

2.堆和栈

在这里插入图片描述

3.简单类型的内存分配

在这里插入图片描述

4.复杂类型的内存分配

在这里插入图片描述

在这里插入图片描述

5.简单数据类型传参

在这里插入图片描述
实参x传给形参a一个10,相当于a=10,相当于创建了一个新变量a,a指向存的值10。
在这里插入图片描述

6.复杂数据类型传参

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值