JS基础知识总结

Day01初识js
一、如何编写js
1、前端的应用:网页开发(html+css+JavaScript)、app开发、移动端开发、游戏开发、服务器开发、可视化数据开发
2、JavaScript:实现网页交互的脚本语言
3、交互:用户输入数据->程序接收并处理数据->返回处理结果 《—|
4、如何编写js:

1. 通过浏览器窗口编写

在这里插入图片描述

2. 通过html页面中的script标签内部进行JavaScript编写

在这里插入图片描述

3. 通过通过script标签的src属性引入js文件

二、js代码运行顺序
1、js如何运行
浏览器中包含2个引擎:

		1. 内容排版引擎 - 解析html和css的
		2. 脚本解释引擎 - 解释并执行JavaScript程序脚本语言的引擎
			解释执行:默认都是自上而下逐行执行的

2、当页面加载完成后,修改id为box的div的内容- 张云

1. 通过Dom(文档对象模型)的API查找到id为box的div元素对象
		api: 应用程序接口

在这里插入图片描述

2.将script写在最后,根据程序解析顺序可以在页面加载完成后修改

在这里插入图片描述

三、数据类型
1、JavaScript的数据类型:2类

1. 原始数据类型:
	string - 字符串
	number - 数字
	boolean - 布尔  true  false
	undefined - 所有仅声明,未赋值的变量的默认值! -  空(修饰原始数据类型的空)
	null   - 空  (修饰对象的空)
	*symbol
2. 引用类型对象:array(数组)  function(函数)  Math  Date

2、undefined与null

1. 所有仅声明未赋值的变量的默认值 - undefined
	undefined为空 - 修饰原始数据类型
2. null - 修饰对象的空 
	null专门表示一个变量不再指向任何对象的地址了!
null的用法有2种:
	1. var 变量 = null; - 打标记
		表示将来该变量即将指向一个对象,只是此时什么都没有指向
	2. var obj = 对象;
		把该对象使用完毕后,就把obj主动赋值null - 》 obj=null
		将来一个变量不再指向对象了,那么可以主动赋值为null	
		这么做得话,就表示主动的释放内存,节省内存空间从而提高浏览器性能
		内存中有个垃圾回收器,如果一个对象没有变量指向(引用),那么就会被垃圾回收器回收,从而释放内存
		js中的对象:内存中保存一组相关数据和功能的整体
		对象都是new操作符创建的
		new专门在内存中开辟一个空间,保存数据和功能,返回*存储地址*

2、示例
在这里插入图片描述在这里插入图片描述

注意:string类型在浏览器中字体显示为黑色,其他类型皆为蓝色
四、数据类型转换
1、数据类型转换 - 隐式转换
隐式转换:不需要程序员干预,js可以自动的完成类型转换
仅讨论算数计算时的隐式转换

		 1. 算数计算中,一切数据都默认转换为数字后,再做计算
			boolean: true ->  1      false -> 0
			null -> 0
			undefined ->  NaN -> not a number (不是一个数字)
			一些数据不能转换为数字的话,则会转换为NaN
			**NaN不等于,不大于,不小于任何值包括他自己
			只要NaN参与的运算结果永远是NaN
			NaN虽然表示不是一个数字,但是他本身属于number数据类型
		2. 在+运算中,只要碰到字符串,+就不再是+法运算符号了,而变成了字符串拼接符号了,导致另一个不是字符串类型的数据,会变成字符串类型数据

2、隐式类型转换示例
在这里插入图片描述

3、强制类型转换

1.JS强制转换:程序员主动的调用专门的函数(API)执行数据转换
何时使用:自动转换的结果不是我们想要的结果的时候
任意-> string   2个API
	x.toString()   x不能是undefined或者是null
	String(x)    -> 相当于隐式转换 -> 万能转换方式  
	typeof(x)  ->  返回的结果数据类型 
String -》 Number:2个API
	parseInt(str/num):从第一个字符开始,依次读取每个数字,只要碰到第一个非数字字符就停止,自动跳过开头的所有空字符
	parseFloat(str/num):解析规则同parseInt,只不过认识第一个小数点

4、强制类型转换示例
在这里插入图片描述在这里插入图片描述

五、运算符
1、JavaScript中的运算符:

1. 算数运算:+  -  *  /   %(模运算)   ++(递增1)   --(递减1)
2. 模运算:%不取商而是取余数
	比如:3/2 = 1.5
		  3%2 = 1
	模运算的2个用途:
		1. 判断是否能整除:比如判断奇偶性
			n%2等于0 n为偶数
			不等0 n为奇数
		2. 保证运算结果不能超过除数
3. ++ 递增1   -- 递减1
	有2种表达式:++n	n++
	这两个表达式的共同点都是将n中的值递增1后,再存回n中
	如果上述2个表达式参与输出了,那么是有区别的
		 ++n 返回表达式的新值(n递增后的值)
		 n++ 返回表达式的旧值(n递增前的值)
4. 关系运算:将两个值作比较 -> true  false
	>  <  >=  <=  ==  !=
	关系运算的比较规则:
		1. 默认将所有类型转换为数字后,再做比较
		2. 如果参与比较的两个数据都是字符串,依次取出每个字符串中的字符 PK "unicode"号
5. 扩展赋值运算: +=   -=  *=  /=  %=
	比如:n=n+m 将n中的值递增m后,再存回n中
		  n=n+m  -->   n+=m
		  n=n-m  -->   n-=m
	注意:n=m-n  能否简化成  n-=m?  不能!

2、示例
在这里插入图片描述

六、作业
1、作业1:把1539使用/ % 取出各个位数上的值,并求和
在这里插入图片描述

2、作业2:推理并描述n初始值为9,console.log(++n + n++ + ++n); 运算过程
在这里插入图片描述

Day02 逻辑运算&分支结构
一、逻辑运算
1、逻辑运算:将多个关系运算综合起来,得出一个结论(true,false)

3种: &&(且)   ||(或)   !(非)
	&&:2个条件都必须为true,才返回 true
	||:2个条件都必须为false 才返回 false

2、短路逻辑(分支结构):

&&:如果前一个条件为false,就已经得出结论->false
||: 如果前一个条件为true, 就已经得出结论->true
引申出短路逻辑:
	语法:1. 条件&&(操作)
			条件满足,执行后续操作,不满足,则不执行
		 2. 值1||值2
			如果值1有效,就用值1,否则,就用值2

3、程序中的3种结构:

1. 顺序结构
2. 分支结构:根据不同的条件,满足条件就执行,不满足就不执行
3. 循环结构

4、示例

1.输入一个年份,判断是否为闰年
闰年分为2种:
	1. 普通闰年:年份可以被4整除不能被100整除  -》 闰年
		year%4==0&&year%100!=0
	2. 世纪闰年:年份可以被400整除  -> 闰年
		year%400==0
所以:(year%4==0&&year%100!=0)||(year%400==0)

在这里插入图片描述

2.消费满500 则打八折

在这里插入图片描述

3.如果用户输入了内容,则使用输入内容回复,否则,就默认回复“这个人很懒,什么也没有留下”

在这里插入图片描述

二、三目运算
1、三目运算 三元运算 条件运算
根据不同的条件,执行不同的操作/返回不同的值

语法:
	条件1?值1或操作1:     // 满足条件1才取值1或执行操作1
	条件2?值2或操作2: 
	... ?          :
默认值或默认操作     // 上述条件都不满足则取默认值或执行默认操作
总结:多个条件,多件事,多选一执行
注意:如果操作语句比较简单,建议使用三目运算

2、示例

1.输入一个年份,判断是闰年还是平年

在这里插入图片描述

2.计算可莱托指数:
klt=体重Kg(weight)/(身高m(height)*身高)
	klt>25,输出您该减肥了
	<20,输出您该吃肉
	否则,输出正常

在这里插入图片描述

三、分支结构
1、分支结构:3种

1. if结构:一个条件一件事,满足就做,不满足就不做
	语法:
		if(条件){
			满足条件执行的操作
		}
2. if..else结构:一个条件2件事,二选一执行
	语法:
		if(条件){
			满足条件执行的操作
		}else{
			不满足条件执行的操作
		}
3. if..else if..[else]结构:多个条件多件事,多选一执行(也有可能什么都不做)
	语法:
		if(条件1){
			满足条件1执行的操作
		}else if(条件2){
			满足条件2执行的操作
		}[else{
			上述条件都不满足执行的默认操作
		}]

2、示例

1.消费满500打八折(if结构实现)

在这里插入图片描述

2.输入年份,判断闰年还是平年

在这里插入图片描述

四、分支结构-switch case结构
1、switch case结构:当条件都是全等比较的时候,才可以使用switch case结构

全等比较:不仅比较值,还比较数据类型
语法:
	switch(表达式){
		case 值1:
			满足值1才执行的代码段
		case 值2:
			满足值2才执行的代码段
		...  .. :
			.....................
		default:
			如果前面的值都不满足,执行默认操作
	}
问题:经过运行我们发现switch case结构如果没有break关键词,那么会根据条件进入到满足的条件的case执行,并以此触发后续的所有case操作执行(包括default),所以,如果想要独立的执行分支,必须要在每个case之间添加break关键词
	break:"终止"当前结构执行,并跳出结构
	何时可以省略break关键词:如果上下两个case执行相同操作时

2、示例:模拟ATM机按键操作
如果用户输入1,执行查询操作
如果用户输入2,执行取款操作
如果用户输入3,执行转账操作
如果用户输入0,退出操作
否则,提示无效按键,重新输入
在这里插入图片描述

五、循环结构-while循环
1、循环结构:让程序反复执行同一段代码

循环三要素:
	1. 循环条件:让循环反复执行的条件
	2. 循环变量:循环条件中用于比较的变量
		循环变量总是向着不满足循环条件的趋势进行迭代的
	3. 循环体:循环内反复执行的代码段
循环分类:
	1. while循环:先判断循环条件,再执行循环体
		一般情况下当循环条件的变化没有规律的时候优先使用while循环

2、while循环语法

while(循环条件){
	循环体;
	迭代修改循环变量;
}

3、do…while循环:先执行循环体,再判断循环条件
语法:

do{
		循环体;
		迭代修改循环变量;
	}while(循环条件)

4、注意:while循环与do…while循环基本等效,区别在于看第一个循环条件是否满足
如果满足,则两者等效,不满足,while循环一次都不执行,而do while循环至少执行一次
5、while循环语句执行顺序
在这里插入图片描述

5、do。。while循环语句执行顺序
在这里插入图片描述

六、作业
1、作业1

输入3个数字 x,y,z
	prompt("请输入x")
要求,不论怎么输入这3个数字,最终输出x,y,z的结果永远是从大到小排列

在这里插入图片描述

2、作业2

按照输入的分数,显示等级
如果分数<0或者>100,输出“无效成绩”
否则,如果分数>=90,显示A
否则,如果分数>=80,显示B
否则,如果分数>=60,显示C
否则,显示D

在这里插入图片描述

3、作业3

输入年,月,日,输出这一天在这一年中是第几天
比如:输入2021年,8月,9日  这一天在2021年中是第几天
思路:把8月之前的7个月的满月天数+9,就得出了是第几天了 
问题1:要判断是否为闰年,如果是闰年2月为29天,否则为28天
问题2:如果根据月份把之前的满月天数进行累加?

在这里插入图片描述

Day03 循环结构&函数对象
一、for循环
1、for循环与while循环等效

语法:
	for(1.初始化循环变量;2.循环条件;3.迭代修改循环变量){
		4.循环体;
	}
	运行顺序:1->2->4->3->2->4->3

2、示例
1.计算1~100的和:1+2+3+4+5+…+100

	循环3要素:
		1. 循环变量 加数从1开始每次递增1
		2. 循环条件 加数<=100
		3. 循环体  把加数累加到sum中

在这里插入图片描述

2.求:1+1/3+1/5+1/7+…+1/999的和

1. 循环变量:分母从1开始,每次递增2
2. 循环条件:分母<1000
3. 循环体:1/i累加到sum中

在这里插入图片描述

3.打印乘法表

1*1=1
2*1=2	2*2=4
3*1=3	3*2=6	3*3=9
比如:打印第5行乘法表
	5*1=5   5*2=10	5*3=15	5*4=20	5*5=25
		1. 循环变量:乘数从1开始,每次递增1
		2. 循环条件:乘数<=5
		3. 循环体:拼接并计算出每个公式的结果

在这里插入图片描述

同理:打印第8行乘法表
在这里插入图片描述

经过我们推理发现:打印完整的乘法表,需要写9个for循环,每个for循环里面改变的是行数,所以行数也是一个循环变量
这个行数的循环变量的初始值为:1,每次递增1
循环条件:行数<=9
循环体:打印每一行的公式
在这里插入图片描述

二、function的定义
1、函数:程序中封装一项专门任务的步骤清单代码段

语法:
	function 函数名([参数变量列表]){
		任务步骤代码段;
		[return 返回值;]
	}
函数名(任务名):指向函数定义的一个变量,保存的是*函数对象的引用*
	声明的时候:不执行,同时也不读取内部代码
	在程序的任意位置:函数名([参数值列表]);
	函数调用时:才开始读取内部代码,并执行

2、示例
在这里插入图片描述

三、变量的作用域
1、变量作用域:一个变量的可用范围
2种:

1. 全局作用域 - window
		全局变量 - 放在全局作用域里的变量
			可在程序的任意位置进行访问并修改
2. 局部作用域:在函数调用的时候才会动态创建的作用域
		 局部变量:2种
			1. 参数变量
			2. 在函数中var出来的变量
				仅在函数调用时,动态创建
				并且使用变量的规则是:如果局部有,就不用全局的
				调用后,局部变量会伴随着局部作用域一同销毁!

2、示例
在这里插入图片描述

四、函数的提前声明和按值传递
1、声明提前:正式开始执行程序之前,都会先将var声明的变量,和function声明的函数,提前到当前作用域的顶部,集中声明,同时赋值留在本地
注意:函数的声明比变量的声明更置顶
function rose(){} // 声明方式声明函数
var fun=function(){} // 直接量方式声明函数
2、声明提前运行:
代码书写顺序: 在这里插入图片描述
程序运行顺序:在这里插入图片描述

注意:
1.在js中不可同名,所以在内存中会按照运行顺序,同名的会覆盖值
2.注意:变量名() 是函数调用的专用语法,但是此时最后一行的fun还是函数吗?
此时的fun不再是函数的引用了!就不能使用()调用,会报错!
3、按值传递
在这里插入图片描述

五、作业
1、作业1
年利率为3%,本金10000,问几年后本金超过12000
循环变量:本金*=1.03,年数 ++
循环条件:本金<=12000
在这里插入图片描述

2、作业2
输入任意年份,输出从该年起,之后的5个闰年
循环变量:y从用户输入开始,每次+1,如果y是闰年,每次递增4
n(计算闰年的个数,从0开始),一碰到闰年才+1
循环条件:n<5
循环体:依次遍历y的每一年判断当前年份是否为闰年,如果是闰年,则输出该年份,同时n++
在这里插入图片描述

3、作业3
把下述代码的推理过程,以注释的形式写出来
在这里插入图片描述

Day04 数组
一、初识数组
1、数组:一组变量的集合,连续保存多个数据的引用类型的对象
2、如何创建数组:

1. 创建空数组   var 数组名=[]; 
	暂时不知道数组内容的时候,先创建再追加
2. 创建数组的同时直接初始化内容
	var 数组名=[值1,值2,...];
3. 创建指定个数的数组
	var 数组名=new Array(n);
	创建一个数组对象,同时初始化n个空元素
4. 创建同时直接初始化
	var 数组名=new Array(值1,值2,...);
注意:3,4创建数组方式不常用,因为有分歧
	var arr=new Array(7);
	可以解释为初始化了7个空元素,也可以解释为初始化了一个数组只放了一个元素值为7

3、数组分类:

1. 索引数组
	下标从0开始每次递增1
	length - 元素个数
2. 关联数组(哈希数组)
	下标可以自定义,而且下标不可重复
	length - 失效
3. 二维数组 - 元素又指向另一个子数组对象
	下标分为行下标和列下标,都是从0开始,每次递增1
	行 - length获得数组中有多少个子数组对象
	列 - length获得子数组中的元素个数
注意:所有的数组都有下标!只不过每种数组下标特点不同
	都有length属性,length属性表示数组的长度 - 保存了多少个元素
	如何获得某个元素值: var 变量=arr[下标]
	如何获得数组长度:	arr.length
	如何获得最后一个元素值:arr[arr.length-1]

4、示例
在这里插入图片描述

二、数组遍历
1、索引数组的下标从0开始,每次递增1的特性
这个下标天生就是一个循环变量
下标递增到<length结束 - 循环条件
在这里插入图片描述

  • 5
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值