JavaScript

合集 - 前端三剑客(3)

1.HTML2023-07-122.CSS2023-07-15

3.JavaScript2023-07-22

收起

1.JavaScript的使用方式

①内部方式:

​ 在head标签体中或者body下面书写:scrip标签

	<script>
    		//内容输入	
	</script>

②导入外部js文件:

​ script标签必须,内部src属性="js文件地址"

<script src = "js文件地址"></script>

2.JavaScript常用的内置函数

①向浏览器打印内容:document.write("浏览器输出内容");

②弹消息提示框 alert("消息框输出内容");

③内置对象(在浏览器的控制台输出内容):

​ console.log("日志函数 控制台输出内容")

---

延伸

JavaScript的注释介绍

//:单行注释
/*文字描述 (多行注释)  */  

JavaScript和java的区别

javavscript:是一个弱类型(语法结构非常不严谨)
java语言:后端语言的一种强类型语言(语法结构非常严谨)
JS中运算不会默认取整,而java语言默认取整

3.JavaScript变量定义以及数据类型划分

1)何为变量?

变量:在程序的执行过程中,其值在不断发送改变的量!

2)js定义变量的注意事项

1.定义变量三要素 var 变量名 = 初始化值;
2.定义所有变量都是var,而且var可以省略不写.
3.js中,变量可以重复定义,后面的值将覆盖钱买你的值

3)JavaScript基本数据类型划分

• 无论是整型还是小数,数据类型都是number类型
• 布尔类型boolean:用于逻辑判断,要么true(真)要么false(假)
• 字符串类型string:无论变量值"字符串"还是'字符',结果都是string
• 未定义类型:underfined(没有意义的)

---

查看一个变量的数据类型的行数:typeof(变量名)

4.JavaScript的运算符

1)算数运算符:js中不会默认取整,而java语言默认取整

+加(任何数据+"字符串"="新的字符串",运算则为整除加号运算)

-(减) *(乘) /(除) %取模(求余)

扩展算数运算符:++(自增一)或者--(自减一)

单独使用:

无论++或者--在数据的前面还是后面,都是对这个值的自增一或自减一

参与运算:

1)++或者--在数据的前面,先自增或自减,然后再运算

2)++或者--再数据的后面,先运算再自增或者自减

---

2)基本的赋值运算符 就是"="

格式: var 变量名 = 值; //将值赋给变量名

注意事项:"="不写成==

扩展的赋值运算符:

+= , -= , *= , /= , %=

将扩展的赋值运算符左边的变量和右边的数据值操作后,再赋值给左边的变量

例:a += 20 就是拿a+20后再赋值给a 等价于 a = a + 20

---

3)关系运算符(又名比较运算符)

无论这个符号的连接表达式多么复杂,结果都是输出true/false

 <		  >			<=			>=		  ==		!=
小于		大于		小于等于	大于等于	等于		不等于
注:==不能写成=

---

4)逻辑运算符

基本符号为:

逻辑单与&:并列关系,多个条件同时满足;(有0则0,有false则false,有一个满足也不成立)

逻辑单或|:多个条件只要满足一个即可成立(有1则1.有true则true)

逻辑亦或^:相同则为false(0),不同则为true(1)

逻辑非!:非true则false,非false则true

扩展的逻辑运算符:逻辑双与&&和逻辑双或||

共同点:逻辑双与&&与逻辑单效果相同

不同点:

逻辑双与&&具有短路效果,左边表达式如果为false,则右边不执行,在开发中使用较多,可以提高运行效率.

---

5)三元运算符

格式:

(表达式)?执行true的结果:执行false的结果;

特点:具有一定的落脚那段,表达式无论简单还是复杂,输出结果都是boolean类型,不是true就是flase.

---

6)位运算符

注:计算机在对于数据进行计算的时候,需要这些数据的"补码"进行操作

(正数的原码,反码,补码都相同)

位与&:有0则0

位或|:有1则1

位异或^:相同则为0,不同则为1

~:反码:全部安慰取反(不分最高符号位),0变1,1变0

5.流程控制

1)顺序结构语句(最简单)

JavaScript代码由上而下依次加载

2)选择结构语句:if/switch

if语句格式1:

if(表达式){
	语句;
}
执行流程:如果表达式成立,则执行语句,否则不执行!

if语句格式2:应用场景针对两种情况判断

if(表达式){
	语句1;
}else{
	语句2;
}
执行流程:
	如果表达式成立,则执行语句1;否则执行豫剧

if语句格式3:应用场景针对多种情况判断

if(表达式1){
	语句1;
}else if(表达式2){
	语句2;
}
	....
else{
	语句n;		//上面均不匹配,则执行else中的语句
}
执行流程:
	先判断表达式1是否成立,成立则执行语句1
	如果不成立,继续判断表达式2是否成立,成立则执行表达式2
	....
	如果都不成立,最终执行else中的语句

---

选择结构语句之switch

JavaScript中switch语句的注意事项:

1. switch语句中的case后面的值可以是常量,也可以是变量.
2. 如果case语句中没有带break语句,就会造成一种"case穿透"的现象
3. switch语句的结束条件:①遇见break(跳转控制语句 中断/结果)结束 ②程序默认执行到末尾
4. default语句可以在switch中的任意位置,不影响switch的执行流程. 如果default在语句中,break不要省略;如果default在语句的结尾,break是可以省略的(建议不要省略)

switch(表达式或者某个变量){
case 值1:
		语句1;
		break;
case 值2:
		语句2;
		break;
	........
default:
		语句n;
		break;
}
执行流程:
	使用switch后面的变量值和case的值1进行匹配,如果皮皮额执行语句1,break语句结束,不匹配向下判断值2是否与switch后面的值是否匹配....最终都不匹配,则执行default语句n.

3)循环结构语句:for/while/do-while

for循环

for(初始化语句;条件判断语句;控制体语句){
		循环体语句;
}

执行流程:
	1)初始化语句对变量进行初始赋值(执行一次)
	2)判断条件语句是否成立,如果成立,则执行循环体语句
	3)执行控制体语句(步长语句)这个变量自增或者自减
	4)判断条件是否成立,成立继续执行循环体语言
	再次回到3)继续操作
	5)当条件表达式不成立,循环结束
	
	
for循环嵌套
for(初始化语句1;条件表达式1;控制体语句1){
		循环体语句;
		for(初始化语句2;条件表达式2;控制体语句2){
			循环体语句
		}
}

while循环

初始化语句;
while(条件表达式){
	循环体语句;
	控制提语句;(步长语句)
}

执行流程:
1)初始化语句先执行,进行赋值
2)判断条件表达式是否成立,成立执行循环体语句
3)继续回到2)过程....如果不成立,结束.

for循环和while循环的区别

1.格式不同

2.内存角度考虑,优先使用for

​ for循环结束,里面的变量就会从内存中释放掉,节省内存资源

​ while循环结束,依然能访问这个变量,初始化语句在外面定义的

3.从应用场景:

​ 明确循环次数使用for

​ 不明确循环次数使用while

do-while循环

do{
	循环体语句;
	控制体语句;(步长语句)
}while(条件表达式);

流程:
	初始化语句赋值
	执行循环体
	控制提语句进行自增或者自减
	判断条件表达式是否成立,成立,继续执行循环体,不成立,结束
	
do-while和for,while最大的区别是
	循环体至少执行一次(开发中用的很少)

---

4)跳转流程控制语句

break:中断,结束 不能单独使用

两种使用场景:①switch语句,本身格式就携带break;②循环语句中使用

continue:继续(结束当前循环,立即进入下一次循环) 不能单独使用

return:结束一个函数(方法);一般在函数(方法)中使用 不能单独使用

6.函数(方法)

1)定义函数

在js中定义函数的格式:

function 函数名(参数名1,参数名2...){//函数声明上定义的变量---形式参数
	完成函数的逻辑
	return 结果;  //返回结果
}

调用函数:赋值调用

var 变量名 = 函数名(实际参数1,实际参数2...);

2)函数名注意事项

①函数名以及变量名遵循小驼峰命名法

单个单词:字母全部小写

多个单词:第一个单词全部小写,后续单词首字母大写其余小写,不能有空格

②定义函数的时候,形式参数上不能携带var

③函数定义的格式不能省略{},否则不是一个函数,浏览器中的js引擎无法识别

④如果这个函数没有返回结果,那么赋值调用的是undefined(未被定义)

⑤没有函数体的方法是没有意义的

7.数组

1)数组的介绍

可以存储多个同一类型元素的一个容器 ;(在JavaScript语言中,数组可以存储不同类型的元素)

2)创建数组的格式

动态初始化: 不给定元素内容,已知数组长度

var 数组名称 = new Array();			//不给定长度
var 数组名称 = new Array(长度);		//给定长度

给数组分配:
数组的元素:数组名称[索引值(下标)]:值	//索引值从0开始
数组名[0] = 元素1;
数组名[1] = 元素2;
.....


//数组的长度属性:length
alert(arr.length)	//浏览器弹窗 数组名.length 获取数组长度

静态初始化----给定了元素的内容

var 对象名 = new Array([元素1,元素2,....]);	//等价于下面的格式
var 对象名 = [元素1,元素2,....]];

3)数组的最值问题

//已知数组,获取数组中的最大值
			var arr = [20,13,24,56,44] ;
			//定义一个参照物,认为它就是最大值
			var max = arr[0] ;
			//遍历后面角标对应的元素(一一获取)
			for(var i = 1 ; i < arr.length;i++){
				//判断:如果后面的元素都比max大,参照物arr[0]就不是最大值
				if(arr[i] > max){
					max = arr[i] ; //将后面的元素赋值给max
				}
			}
			document.write("数组中的最大值是:"+max) ;
			document.write("<hr/>") ;
			//使用函数改进
			//赋值调用
			var max2 = getArrayMax(arr) ;
			document.write("数组中的最大值是:"+max2) ;
			
			function getArrayMax(arr){
				//定义参照物,将第一个元素作为最大值
				var arrayMax = arr[0] ;
				//遍历后面角标对应的元素(一一获取)
				for(var i = 1 ; i < arr.length;i++){
					
					//判断:如果后面的元素都比max大,参照物arr[0]就不是最大值
					if(arr[i] > arrayMax){
						arrayMax = arr[i] ; //将后面的元素赋值给max
					}
				}
				return arrayMax;
			}