JavaScript_js pig-CSDN博客

本文链接：https://blog.csdn.net/qq_40733968/article/details/107138820

一.JavaScript

1.简介

	最初,用户发送用户名和密码到后台进行校验,先进行格式校验,再进行内容校验;
当时网速慢,这样等待时间长(敲错一个字母都可能等待后台校验很长时间),用户体验差;
	为了提升用户体验,后来,校验数据格式,放在客户端校验(浏览器校验),再发往后台,进行内容的校验.
	
	JavaScript是用来校验数据格式,由浏览器的内核中JS引擎来解析执行
	浏览器的内核:渲染引擎(HTML CSS 图片)和JS引擎(解析执行JS代码)
	JS常被称为前端语言,因为解析是在浏览器中进行解析;后来加入了一种NodeJS技术,
提供了一种V8引擎,可以在服务端进行JS代码的解析

2.JS和HTML结合的方式

方式1:内部方式
	将JS代码写在HTML代码里面,即在HTML代码内部提供一对script标签,这对标签可以
放在页面的任意位置,放在上面和放在下面在加载上有区别;这样代码复用率低

方式2:外部方式
	将JS代码单独抽取到一个文件中,在页面中进行引用,这样代码复用率高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 方式1 -->
		<script type="text/javascript">
			alert("aaa");
		</script>
		<!-- 方式2:从文件中引入JS代码 -->
		<script src="./js/2.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
	</body>
</html>

------------
/* js文件中的代码,会弹出一个窗口 */
alert("芜湖")

3.JS中的数据类型

Java中的数据类型:基本数据类型+引用数据类型
	基本数据类型:
		整形:byte short int long
		浮点型:float doubble
		字符型:char
		布尔型:boolean
		
JS中的数据类型分为两种:原始数据类型和引用数据类型
	原始数据类型:
		Number数字类型:包括浮点型和整形 以及NaN(不是一个数字的数字)
		String类型:包括字符和字符串
		boolean类型:和Java中的boolean类型相同
		undefined 未定义数据类型
		null
	引用数据类型:
		对象(Object)、数组(Array)、函数(Function)。

注意事项:
1.JS是一种弱类型的语言,定义变量时不需要写出具体类型,只需要使用关键字var来定义
2.String类型可以使用单引号也可以使用双引号
3.查看定义变量的数据类型,使用typeof关键字
4.如何定义常量?使用const 关键字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS中的数据类型</title>
	
	<script type="text/javascript">
		//1.JS是一种弱类型的语言,定义变量时不需要写出具体类型,只需要使用关键字var来定义
		var num1=100;
		var num2=3.14;
		alert(num1);
		alert(num2);
		
		//2.String类型可以使用单引号也可以使用双引号
		var str1="aaa";
		var str2='bbb';
		alert(str1)
		alert(str2)
		//布尔类型
		var flag=true;
		//null类型
		var a=null;
		//未定义数据类型
		var obj;
		
		//3.如何查看定义变量的数据类型,使用typeof关键字
		alert(typeof num1)
		alert(typeof flag)
		alert(typeof obj)
		
		//定义一个常量
		const i=3.14;
		alert(typeof i)//number
	</script>
	
	</head>
	<body>
		
	</body>
</html>

4.JS中的语句

用法和Java一样:
	if语句
	switch语句
	for()循环语句
	do()...while语句
	while语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num=10;
			var num2=true;
			
			/* while(num2){
				alert(num)
			} */
			for(var i=0;i<10;i++){
				alert(i)
			}
		</script>
	</head>
	<body>
	</body>
</html>

5.JS中的运算符

运算符基本和Java相同,但是也有一些不同,存在一个自动类型转换

自动类型转换:
	当你想要的值和提供的值不一样时,会去自动类型转换

字符串转数字:
	会根据字符串字面意义上的值进行转换,如果能够转换,就转换;如果不能转换就转为NaN;
	
注意:NaN参与运算,结果还是NaN

其他类型转数字:
	true为1,false为0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 自动类型转换 */
			var num="100";
			alert(typeof num)//string
			var num2=100;
			alert(num+num2)//100100
			
			//想要的是+100,提供的是字符串,会进行自动类型转换
			var str=+"100";
			alert(typeof str)//number
			alert(100+str)//200
			
			//字符串转数字:会根据字符串字面意义上的值进行转换,能转换就直接转换;不能转换就转为NaN;
			var s=+"aaa";
			alert(s)//NaN
			//NaN参与运算,结果还是NaN
			alert(s+100)//NaN
			
			//其他类型转数字,true为1,false为0
			var flag=1*true;
			 alert(flag)
		</script>
	</head>
	<body>
	</body>
</html>

6.比较运算符

 > < >= <=
 1.只要是NaN参与的比较运算,结果都是false,除了!=
 2.JS中比较两个字符串字面内容是否相同使用==
 3.==和===的区别
 	===是全等于,先比较数据数据类型是否一致,再去比较内容,如果数据类型不同,直接false

注意:两条规则
如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值
如果有一个操作符是字符串，另一个操作数是数值，则先将字符串转换为数值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.只要是NaN参与的比较运算,结果都是false,除了!=
			var num=NaN;
			alert(num>1)//false
			alert(num==NaN)//fasle
			alert(num!=NaN)//true
			// 2.JS中比较两个字符串字面内容是否相同使用==
			alert("aaa"=="aaa")//true
			alert("芜湖"=="芜湖")//true
			alert(true==0)//false
			//3.===全等于,先比较数据类型是否一致，再比较内容,如果数据类型不一致，直接false
			//如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值
			//如果有一个操作符是字符串，另一个操作数是数值，则先将字符串转换为数值。
			alert(true===1)//false
			alert("100"==100)//true
			alert("100"===100)//false
		</script>
	</head>
	<body>
	</body>
</html>

7.逻辑运算符

&& || !

数字类型转为布尔类型:
	0转换为false,非0转换为true
	
字符串类型转换为布尔类型:
					空串转换为false	
					非空串转换为true

NaN转换为布尔类型,转成false
undefined转换为布尔类型转换为false

对象转布尔转换成true  null转换成false

!:
对于布尔类型会将其值true和false互换，
对于非布尔类型，js会将值先转换成布尔类型，而后取反。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 数字类型转换为布尔类型
				0转换为false
				非0转换为true
			 */
			/* alert(!0)//true
			alert(-10)//-10
			alert(!2)//false
			if(-1){
				alert(true)//true
			}else{
				alert(false)
			} */
			//JS中的;可写可不写
			
			/* 字符串类型转换为布尔类型:
					空串转换为false	
					非空串转换为true
			 */
			if("aaa"){
				alert(true)//true
			}else{
				alert(false)
			}
			/* NaN转换为布尔类型为false
				undefined转换为布尔类型转换为false
			 */
			var a;
			if(NaN||a){
				alert(true)
			}else{
				alert(false)//false
			}
			//对象转布尔转换成true  null转换成false
			var object=new Object();
			if(object){
				alert(true)//true
			}else{
				alert(false)
			}
			object=null;
			if(object){
				alert(true)
			}else{
				alert(false)//false
			}
			
			
		</script>
	</head>
	<body>
	</body>
</html>

8.JS打印9*9乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			for(i=1;i<=9;i++){
				for(j=1;j<=i;j++){
					document.write(j)
					document.write("*")
					document.write(i)
					document.write("=")
					document.write(i*j)
					document.write("\t")
				}
				document.write("<br>")
			}
		</script>
	</head>
	<body>
	</body>
</html>