WEB 4.JS_web4.js-CSDN博客

本文链接：https://blog.csdn.net/weixin_44228228/article/details/99686758

JS

1. Javascript简介

Javascript是一个客户端脚本语言
是运行在客户端由浏览器内核来去解析
BOM 浏览器对象模型
DOM 文档对象模型
ECMAScript JS规范

2. Js特点

弱类型语言
解释型语言
基于对象
安全性高
兼容性问题
浏览器大战

3. Javascript的三种引入方式

行间事件
将js代码写入标签的行间
外链式
通过script标签的src属性引入外部的js文件
如果使用script引入外部js文件那么此标签的js代码将不会在执行
内嵌式
通过script标签将js代码嵌入到html文档

4. Javascript的输出方式

<script type="text/javascript">
		alert('将信息以弹窗的形式输出，会阻塞程序的执行')
		console.log('将信息输出到浏览器的控制台')
		document.write('将信息输出到网页当中')
	</script>

上面的综合：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 行间事件 -->
	<button onclick="alert('来啊')">点我</button>
	<a href="JavaScript:alert('快活呀')">这里</a>
	<a href="JavaScript:;"οnclick="alert('大把时光')">here</a>
	<!-- 嵌入式 
		通过script标签将js代码嵌入到html文档。
	-->
	<!-- 因为没有事件，直接就执行了 -->
	<script>
		alert('ok');
	</script>
	<!-- 外链式
			通过script标签的src属性引入外部的js文件
			如果使用script引入外部js文件 那么此标签的js代码将不会在执行
	 -->
	<script type="text/javascript" src="./1.js">
		// 不会执行
		alert('你说吧')
	</script>
	<!-- 常用的js的输出方式 -->
	<script type="text/javascript">
		alert('将信息以弹窗的形式输出，会阻塞程序的执行')
		console.log('将信息输出到浏览器的控制台')
		document.write('将信息输出到网页当中')
	</script>	
</body>
</html>

引入的js代码：

alert('我是js的外部文件');

5. Javascript的变量

使用关键字var 声明变量
变量命名规范：
由数字字母下划线组成
不能以数字开头
尽量要有意义
不能使用关键字
严格区分大小写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变量</title>
</head>
<body>
	<script>
		var a = 1;
		console.log(a);

		var b = 1,c = 2;
		console.log(b,c);

		d = '我在这里等你';
		console.log(d);

		/*
		每一行语句的结束 使用；号结尾
		 */
		// 单行注释
		var num = 1;console.log(num);
	</script>
</body>
</html>

6. Javascript的基本数据类型

数值类型数字小数 NaN（not a number）
字符串只要是使用引号引起来的都是字符串
布尔类型 true false
对象类型 var obj = {key:val,key:val}
数组： var arr = [1,2,3]
函数类型 function fun(形参){代码段}
未定义 undefined

检测数据类型的方法 typeof()
检测一个数据是否是由指定的系统实例构造而成 instanceof
注意：基本数据类型必须使用new 实例化出来的结果才能检测成功
var num1 = new Number(123);
console.log(num1 instanceof Number);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数据类型</title>
</head>
<body>
	<script type="text/javascript">
	// 数值类型 Number
	var num1 = 1;
	var num2 = 1.2;
	// 检测数据类型
	var res = typeof(num1);
	console.log(num1,res);//1 "number"

	// 字符串  String
	var str1 = '123';
	var str2 = "1223";
	var str3 = '我是你的“小心肝”';

	// 布尔值 Boolean
	var bool = true; // false
	console.log(typeof(bool));//boolean

	// 对象类型 Object
	var obj = {
		name:'小乖乖',
		age:18,
		say:function(){
			alert('我是小乖乖');
		}
	}
	var arr=['大乔','小乔','貂蝉'];
	console.log(obj,obj.name);
	console.log(obj,typeof(obj));//{name: "小乖乖", age: 18, say: ƒ} "object"
	console.log(arr,typeof(arr));//(3) ["大乔", "小乔", "貂蝉"] "object"
	console.log(null,typeof(null));//null "object"

	var func=function(){
		console.log('我是函数类型');
	}
	console.log(func,typeof(func));
	/*ƒ (){
		console.log('我是函数类型');
	} "function"*/
	// 未定义
	var v=undefined;
	var x;
	console.log(v,typeof(v));//undefined "undefined"
	console.log(x);//undefined

	// instanceof 检测是否是指定的 类 来是实例出来的对象
	//  基本数据类型必须使用new 实例化出来的结果才能检测成功
	console.log(arr instanceof Array);//true
	var num1 = new Number(123);
	console.log(num1 instanceof Number);//true
	console.log(obj instanceof Object);//true
</script>	
</body>
</html>

7. 数据类型转换

强制数据类转换是人为的
数值类型的强制转换 Number()
将字符串类型转换成数值类型：
Number() 只能转纯数字表示的字符串否则直接返回NaN
parseInt() 整型从前往后读，一直取到非数值表示的字符为止
如果第一字符就是非数字表示的字符直接返回NaN
parseFloat() 和parseInt()一样但是会检测第一个小数点
隐式数据类型转化是程序自发的程序人员无法干扰

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>强制转换</title>
</head>
<body>
	<script type="text/javascript">
		// 将字符串 强制转换成 属值
		// Number 只要字符串中有一个非数字的字符 就返回NaN 不包含小数点 只能有一个小数点
		var str1 = '123'; // 123
		var str1 = '123abc'; // NaN
		var str1 = '123.1'; // 123.1
		var str1 = '123.1.1'; // NaN
		var str1 = 'a123'; // NaN
		var res = Number(str1);
		console.log(res,typeof(res))
		console.log(parseInt(str1),typeof(parseInt(str1)))


		// parseInt() 
		//  从前往后读，从第一个数字取到非数字为止
		//  如果第一个字符是非数字表示的字符 直接返回NaN 			
		//   parseFloat() 和parseInt() 类似 只不过会检测第一个小数点
		// console.log(parseInt(str1),typeof(parseInt(str1)));
		// console.log(parseFloat(str1),typeof(parseFloat(str1)));
		
		// 转换成布尔类型为false  0 0.0 NaN '' null undefined
		// Boolean()
		// 数字： 0 0.0 NaN   字符串：''  对象：null  未定义：undefined
		// 
		//像{}这就是一个对象了，本身继承了object，所以不是空，Boolean也就不是False
		// ''这是一个空的，就是False，要是里面有个空格，也是true
		// 对象类型：null，是false
		var num1 = 0.0;
		var num1 = NaN;
		var num1 = '';
		var num1 = null;
		var num1 = undefined;
		console.log(Boolean(num1));
		


		console.log(Number('1'));      //1
		console.log(Number('1.2'));    //1.2
		console.log(Number('1.2px'));  //NaN  
		console.log(Number(''));       //0
		console.log(Number(true));     //1
		console.log(Number(false));    //0
		console.log(Number(null));     //0
		console.log(Number(undefined));//NaN
		console.log(null==undefined);  //true
		console.log(Number(null==undefined));//1
		console.log(Number([]));       //0
		console.log(Number([1]));      //1
		console.log(Number(['1']));    //1
		console.log(Number([1,2]));    //NaN
        console.log(Number({}));	   //NaN	
		console.log(Number(/1/));      //NaN
		console.log(Number(function(){}));//NaN		
	</script>	
</body>
</html>

8. 常用运算符

算术运算 + - * /  %  ++ --
 
字符串运算 +
 
赋 = += -= *= %=
比 > < >= <= == !=  ===全等    !==
逻   && || !

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>算数运算符</title>
</head>
<body>
	<script>
		// ++ --
		var a = 1;
		// a+=1; // a = a+1
		a++;  // 自增1
		++a;
		a--;  // a = a-1  a-=1
		--a;
		console.log(a);

		// 字符串运算 如果+号两边有一个是字符串 就做字符串拼接
		var res = 1+'我是哈哈哈';
		var res = 'abc'+123;

		var res = 1+1+'a';
		var res = 1+'a'+1;
		var res = 'a'+(1+2);
		console.log(res);

		// ===全等 不仅要比较值 还要比较类型是否相同
		console.log('1'==1);
		console.log('1'===1);	

		console.log(NaN==NaN);
		console.log(null==null);  // true
		console.log('1+1'==2);

		console.log(true&&true);
	</script>
</body>
</html>

9. 流程控制

单分支
If(条件){}
双分支
多分支

10. 循环结构

While
For in
For
Do while

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		// 单分支
		// var age = 8;
		// if(age>=18){
		// 	alert('ok你可以出入一些场所啦');
		// }else{
		// 	alert('你不能观看此影片，需要在家人陪同下观看');
		// }

		// 多分之
		var age = '25';
		if(age<12){
			console.log('骚年,你狠牛啊');
		}else if(age<18){
			console.log('青年，你好骚啊');
		}else if(age<40){
			console.log('你好强啊');
		}else{
			console.log('在家下下棋，喝喝茶');
		}

		// switch case 当判断成功后 后面的条件不在判断直接执行
		//  条件判断使用的是===
		var num = '1';
		switch(num){
			case 1:
				console.log('你刚出生啊');
				break;
			case 18:
				console.log('你终于成年啦');
				break;
			case 28:
				console.log('你终于要结婚啦');
				break;
			case 90:
				console.log('你要下课啦');
				break;
			default:
				console.log('你是神仙吗');
		}

		// 循环
		var num = 0;
		// while num<=10:
		// 	print(num)
		// 	num+=1
		while(num<=10){
			console.log(num);
			num++;
		}

		// for in  一般使用来遍历对象
		//  当便利对象时 临时变量拿到的是对象的属性
		//  如果遍历的是数组 临时变量拿到的是索引值
		var obj = {name:'澳龙',age:16,gender:'男'}
		for(i in obj){
			console.log(obj[i]);
		}

		var arr = ['鲁智深','小龙女','郭靖'];
		for(i in arr){
			console.log(arr[i]);
		}

		// 单纯的for循环
		var arr = ['叶问','李小龙','王二狗'];
		console.log(arr.length) // 检测数组的长度

		for(var i=0;i<arr.length;i++){
			if(i==0){
				// continue;
				break;
			}
			console.log(arr[i]);
		}

		// do while 不论循环条件是否成立 先执行一次 然后在去判断是否循环
		// var a = 0;
		// do{
		// 	console.log(a);
		// 	a++;
		// }while(a>10)
	</script>
</body>
</html>

九九乘法表：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.red{
			background:red;	
		}
		.yellow{
			background:yellow;
		}
	</style>
</head>
<body>
	
	<script>
		var table='<table border="1">';
		// 九九乘法表
		for(var r=1;r<=9;r++){
			if(r%2==0){
				var tr = '<tr class="yellow">';
			}else{
				var tr = '<tr class="red">';
			}
			
			for(var c=1;c<=r;c++){
				tr += '<td>'+c+'*'+r+'='+r*c+'</td>';
			}
			tr+='</tr>';
			// 拼接到table
			table+=tr;
		}
		// 把table的闭合标签拼接
		var res = table+'</table>'
		document.write(res);
	</script>
</body>
</html>