JavaScript基础

1. JS基础语法

在这里插入图片描述

1.1 JS发展历史

1.由布兰登艾奇设计
2.JS是一种运行在客户端的脚本语言
3.脚本语言:不需要编译,运行过程中由js引擎逐行来进行解释执行
4.html和css标记语言-描述类语言
5.JS脚本语言-编程类语言
在这里插入图片描述

1.2 JS作用

表单动态校验
网页特效
服务器开发
桌面程序
App
控制硬件-物联网
游戏开发
5.html和css标记语言-描述类语言,
JS脚本语言-编程类语言

1.3浏览器执行JS

1.渲染引擎:解析html和css,俗称内核
2.JS引擎:又名JS解释器,用来读取网页的JS代码
注:浏览器本身不会执行JS代码,而是通过JS引擎来执行JS代码。JS引擎执行代码时逐行解释每一句的源码(转换为机器语言),然后由计算机去执行,所以JS语言归为脚本语言,会逐行解释执行

1.4JS组成

JS语法
DOM-文档对象模型
BOM-浏览器对象模型

1.5 JS引入方式

1.行内式的JS,直接写到元素的内部

<input type="text" onclick="alert('Hello World')"/>

(在JS中推荐使用单引号)
2.内嵌式的JS

<script>
	alert('Hello World');
</script>

3.外部js双标签(双标签)

<script src="my.js"></script>

1.6 JS注释

单行注释 //
多行注释 /*

1.7 JS输入输出语句

<script>
	prompt('这是一个输入框');
	alert('弹出警示框/对话框');
	console.log('控制台,给程序员看的')</script>

2. 变量

在这里插入图片描述

在这里插入图片描述

1.变量(存放数据的容器)
本质:变量是程序在内存中申请的一块用来存放数据的空间

2.1变量使用

先声明变量再赋值 

声明方法: var 变量名称
var是一个JS关键字,用来声明变量,使用该关键字声明变量后,计算机自动为其分配内存空间

<script>

	var age=prompt('请输入年龄');
	alert(age);
</script>

2.2变量的语法扩展

1.更新变量
2.同时声明多个变量,只需要写一个var,多个变量名之间用英文逗号隔开

<script>
	var age=18,address=1;
</script>

3.声明变量的特殊情况
在这里插入图片描述

只声明不赋值-undefined
不声明不赋值-报错
不声明只赋值-可以使用

3.数据类型

在这里插入图片描述

1.JS是一种弱类型或者说是动态语言,则表示可以不用声明变量的类型,在程序运行过程中,类型会自动被确定
2.在代码运行时,变量的数据类型是由JS引擎根据=右边的变量值的类型来判断的,运行完毕之后,变量就确定了数据类型
3.一个变量的数据类型可以根据值的变化发生变化

3.1数字型Number

1.数字型进制
八进制前有0,16进制前有0x
2.数字型范围

<script>
	alert(Number.MAX_VALUE);//最大值
	alert(Number.MIN_VALUE);//最小值
</script>

3.数字型的3个特殊值

<script>
	alert(Infinity);//无穷大,大于任何数值
	alert(-Infinity);//无穷小,小于任何数值
	alert(NaN);//代表一个非数值
</script>

4.isNAN
用来判断非数字,如果是数字返回false,否则返回true

<script>
	console.log(isNaN(12));
</script>

3.2 字符串型string

是否为字符串型:
1.用单引号或者双引号括起来的任意文本
2.字符串嵌套式(外单内双或者外双内单)
3.字符串转义字符:\n \t \ ’ \b
4.字符串拼接
1.多个字符串之间可以使用“+”进行拼接,拼接方式为:字符串+任何类型=拼接之后的新字符串
2.拼接前会把与字符串相加的任何类型转换为字符串,再拼接为一个新的字符串
3.变量不要写到字符串里面,而是通过和字符串相连的方式实现的
4.变量和字符串相连的口诀:引引加加

3.3布尔型Boolean

两个值:true和false
布尔型和数字型相加是,true值为1,false值为0

3.4 Undefined和Null

1.undefined:声明未赋值
该类型和数字相加返回NaN
该类型和字符串相加会把其连接
2.Null
该类型和数字相加返回数字的大小
该类型和字符串相加会把其连接

3.5获取变量数据类型

注:prompt取过来的值是字符型的

typeof()
<script>
	console.log(typeof(要检测的数据类型))
</script>

4.数据类型转换

4.1.转换为字符串型

在这里插入图片描述

4.2转换成数字型

在这里插入图片描述

4.3转换为布尔型

在这里插入图片描述

5.关键字

5.1 关键字

在这里插入图片描述

5.2标识符

在这里插入图片描述

5.3保留字

在这里插入图片描述

6. JS运算符

6.1算术运算符

在这里插入图片描述

6.2.表达式和返回值

1.表达式:由数字,运算符,变量等能球的数值的有意义排列方法所得的组合,即由数字,运算符,变量等组成的式子
2.返回值:表达式返回的结果

6.3.递增递减运算符

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

6.4比较运算符

在这里插入图片描述

6.5逻辑运算符

在这里插入图片描述

注意短路问题

6.6赋值运算符

在这里插入图片描述

6.7运算符优先级

在这里插入图片描述

7.流程控制

在这里插入图片描述

1.顺序结构
2.分支结构
在这里插入图片描述

注意:
条件表达式?表达式1:表达式2
3.循环结构

8.数组

8.1创建数组的两种方式

在这里插入图片描述

8.2访问数组元素

数组名[索引]

8.3遍历数组

通过for循环把数组的元素从头到尾访问一次

8.4数组长度

数组名.length

8.5冒泡排序

在这里插入图片描述

8.6 遍历数组

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

9.函数

9.1函数的使用

函数的声明+函数的调用
1.声明函数
函数名经常是动词
函数不调用自己不执行
function是声明函数的关键字,全部小写
function 函数名(形参1,形参2…){
函数体
}
2.调用函数
函数名(实参);
1.3函数的封装
把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

9.2函数的参数

形参:形式上的参数
实参:函数调用时需要使用的参数
当函数形参和实参个数不匹配时,实参个数多于形参,会取到形参的个数;实参个数小于形参,多出的形参可以看作是undefined,会返回NaN

9.3函数的返回值

1.return终止函数,后面的代码不会被执行
2.return只能返回一个值,返回的结果是最后一个值
3.求任意两个数的加减乘除结果,可以利用return和数组同时返回多个数组
4.函数没有return,会返回undefined;有return返回return后面的值
5.return不仅可以退出循环,还能够返回return语句,同时还可以结束
当前函数体内的代码

9.4 arguments的使用

1.arguments对象中存储所有传递过来的实参
2.arguments展示形式是一个伪数组,具有length属性,按索引方式存储数据,不具有数组的push,pop等方法

9.5函数的两种声明方式

1.利用函数关键字自定义函数(命名函数)
2.利用函数表达式声明
var变量名=function(){};
函数表达式声明方式跟变量声明差不多,只不过变量里面存的是值,而函数表达式里面存的是函数函数表达式,也可以进行传递参数

10. JS作用域

就是代码名字在特定范围内起作用和效果,目的是提高程序的可靠性
更重要的是减少命名冲突
1.全局作用域:整个script标签或者一个单独的js文件
2.**局部作用域:**在函数内部就是局部作用域,这个名字只在函数内部起效果
3.变量的作用域
全局变量:再全局作用域下的变量,在全局下都可以使用
局部变量:在局部作用域下的变量,后者在函数内部的变量就是局部变量,当程序执行完毕后被销毁
4.js没有块级作用域
作用域链
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据
能被内部函数访问,就称为作用域链,就近原则

11. JS预解析

1.js引擎运行js分为2步:预解析 代码执行
2.预解析
变量预解析(变量提升)和函数预解析
变量提升:把所有的变量声明提升到当前作用域的最前面,不提升赋值操作
函数提升:把所有的函数声明提升到当前作用域的最前面,不提升赋值操作
js引擎把js中所有的var还有function提升到当前作用域的最前面
函数表达式的调用必须写到函数的后面
3.代码执行
按照代码书写顺序从上往下执行

12.对象

在这里插入图片描述

对象是一组无序的相关属性和方法的集合,所有的事物都是对象
对象=属性加方法
属性:事物的特征
方法:事物的行为

12.1利用字面量创建对象

对象字面量
花括号{}里面包含了表达这个具体事物的属性和方法
1.变量和属性的
相同点:都用来保存数据
不同点:变量单独声明并赋值,使用的时候直接写变量名单独存在;
属性在对象里面的不需要声明的,使用的时候必须是对象.属性
2.函数和方法的
相同点:都是实现某种功能
不同点;函数是单独声明并且调用的 函数名()单独存在;
方法 在对象里面 调用的时候 对象.方法
3.构造函数和对象区别
1.对象是一个具体的事物,通过new关键字创建出来的
2.构造函数泛指某一大类,它类似于java语言里面的类

12.2利用new object创建对象

var 对象名=new object();
注:利用等号=赋值的方法添加对象的属性
每个属性和方法之间用分号结束

12.3利用构造函数创建对象

注:可以利用函数的方法重复相同的代码,就把这个函数称为构造函数,
构造函数就是把我们对象里面的一些相同的属性和方法抽取出来并放到这个函数里面去

function 构造函数名(){
	this.属性=值;
	this.方法=fuction(){

	}
}
new 构造函数名();

注:构造函数名字的首字母要大写
2.构造函数不需要return就可以返回结果
3.要用构造函数必须用new
4.只要new 函数名()调用函数就创建一个对象
5.属性和方法前面必须添加this

12.4遍历对象

for(var 变量 in 对象)
变量常用k表示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值