web day02(js)

最新推荐文章于 2025-04-11 13:47:22 发布

快乐咸鱼Y

最新推荐文章于 2025-04-11 13:47:22 发布

阅读量110

点赞数

分类专栏： web 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/yygyj/article/details/111147109

版权

web 专栏收录该内容

20 篇文章

订阅专栏

在这里插入图片描述
HTML引入js
a.第一种：在head标签中书写一个script子标签，早script子标签中书写JavaScript代码
b.第二种：引入外部js文件
在head标签中书写一个script子标签，在script起始标签身上添加src属性，指向外部js文件
c.js语句是自上而下解释执行，每次都会将一句js语句放入浏览器中内置的js解析器进行解释执行
d.js语句可以不添加分号，如果不添加分号则会在解释过程中，由js解析器自动添加（推荐手动书写，避免不必要的错误）
e.在引入script标签时，如果引入的是外部的文件，script标签的中间没有任何语句，这时不能把script标签书写为自闭标签，否则会导致js语句失效

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>js引入</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
			/*alert(123);*/
		</script>
		<script type="text/javascript" src="1.js"></script>
	</HEAD>
	<BODY>
		
	</BODY>
</HTML>

alert("abc");

js语法—数据类型、
分为两大类：基本数据类型和复杂数据类型
基本数据类型给有5种：
数值类型 Number 字符串类型String 布尔类型 Boolean 未定义类型Undefind 空类型 Null

a.数值型：
在js中数值型是一种基本数据类型，也是js的一个包装对象，其中包含属性和方法
b.字符串类型
在js中String是一个基本数据类型，同时还是一个包装对象，js中的String相关api和java相似
c.布尔类型
在js中Boolean是一个基本数据类型，同时还是js的一个包装对象，在布尔值中只包含两个值true和false
d.未定义类型Undefind
js中的一个数据类型，这个类型中只包含undefind这一个值，常用于表示一个未被初始化的变量
var a;
console.log(a);//undefind
e.空类型Null
js的一个基本数据类型，这个类型中只包含null这一个值，常用于表示一个无效的值，多数作为返回值使用
f。扩展
null 与undefined

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>js基本数据类型</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		//Number数据类型
			/*alert(Number.MAX_VALUE);
			alert(Number.MIN_VALUE);*/
			//浏览器自带的控制台
			console.log(Number.MAX_VALUE);
			console.log(Number.MIN_VALUE);
			console.log(Number.NEGATIVE_INFINITY);
			console.log(Number.POSITIVE_INFINITY);
			console.log(-Infinity);
			console.log(Infinity);
			console.log(NaN==123);
			console.log(NaN=="abc");
			console.log(NaN==NaN);
			console.log(isNaN(123));
			console.log(isNaN("abc"));
			//String字符串型
			var str="abcdefg";
			console.log(str.length);
			console.log(str.charAt(0));
			var str1="abc'efg'qwe";
			console.log(str1.split("'"));
			console.log(str1.toUpperCase());
			//布尔类型
			console.log(true||false);//true
			console.log(true&&false);//false
			console.log(true|false);//1
			console.log(true&false);//0
			console.log(!true);//false
			//undefined
			var a;
			console.log(a);//undefined
			console.log(null==undefined);//判断两者的类型。js中认为两者类型相同（null来自undefined）
			console.log(null===undefined);//判断两者的值
		</script>
	</HEAD>
	<BODY>
		
	</BODY>
</HTML>

js语法—数据类型自动转换，转换的规则
在这里插入图片描述
js语法–运算符

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>数据类型自动转换</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		console.log("123"+1);//拼接
		console.log("123"-1);//减法
		console.log(3/2);//运算过程保留浮点型数据
		console.log(3/2*1000);//运算过程保留浮点型数据
		</script>
	</HEAD>
	<BODY>
	</BODY>
</HTML>

js语句—定义变量
局部变量： var i=0;
全局变量： i=0;
js语法—语句
while do while for js没有增强for循环
switch case ----和Java的使用方式相同
if

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>数据类型自动转换</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		console.log("123"+1);//拼接
		console.log("123"-1);//减法
		console.log(3/2);//运算过程保留浮点型数据
		console.log(3/2*1000);//运算过程保留浮点型数据
		//type判断变量的类型
		var str=123;
		console.log(typeof(str));//number
		var str2="abc";
		console.log(typeof(str2)=="string");//string
		/*var a=0;
		a="abc";
		a=true;
		a=new Object();
		console.log(a);*/
		/*function mx() {
			var x=1;//局部变量
		}
		mx();
		console.log(x);*/
		/*function mx() {
			x=1;//全局变量
		}
		mx();
		console.log(x);*/
		/*//js语句---if
		var x=2;
		if(x=1){//js可以先做赋值再运算
			console.log("yes");
		}else{
			console.log("no");
		}*/
		</script>
	</HEAD>
	<BODY>
	</BODY>
</HTML>

复杂数据类型
函数数组对象
a.js函数
1）js函数是一段可执行js语句的合集，可以通过调用函数名加上一对小括号的形式来执行js函数，js函数本质上是一段字符串
2）在js中，函数调用时，可以传入比参数列表更少的数据，未传入值的参数，将会以undefined为值来使用
3）在js中，函数调用时，可以传入比参数列表更多的数据，多余的数据未被抛弃，在函数中内置的arguments属性会将用户传入的参数全部放到一个数组中。可以通过循环遍历的方式来获取。
4）函数中可以将函数名称当作参数来使用，传入方法的参数列表。在函数希望使用时只需要在函数后添加一个小括号即可。总结：函数传递，可以通过变量（函数名）实现，函数调用就是在函数名后边添加括号
5）Function类型是js中内置的一个对象类型
6）函数的定义方式
a普通函数定义方式
b动态函数定义方式
c直接量定义函数（匿名函数）

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>js函数</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		/*//1.普通函数定义方式
			function mx(a,b){
				//函数中内置的arguments属性可以获取用户传入的全部参数
				for(var i=0;i<arguments.length;i++){
					//通过循环遍历的方式将每一个参数取出
					console.log(arguments[i]);//arguments本质是一个数组，可以根据数组下标的方式获取每一个元素
				}
				//return a+b;
			}
			//console.log(mx(1,2));//3
			//console.log(mx(1));//NaN
			//console.log(mx(1,2,3));//3
			mx(1,2,3);*/
			/*//2.动态函数定义方式
			//在括号中的最后一个参数作为函数体
			//最后一个参数之前的所有参数都属于参数列表
			var mx1 = new Function("a","b","return a+b");
			console.log(mx1(1,2));//3*/
			/*//3.直接量定义函数（匿名函数）
			var mx2=function(a,b){
				return a+b;
			};
			console.log(mx2(1,2));
			*/
			/*var a=function(){
				
			}
			function(a){
				a()
			}
			q(a);*/
			function chief(meau,food){
				food=meau(food);
				return food;
			}
			function m(food){
				if("羊肉串"==food){
				return "吃"+"烤"+food;}
				else if("狗不理"==food){
				return "吃"+"蒸"+"狗不理"	
				}
			}
			console.log(chief(m,"狗不理"));
		</script>
	</HEAD>
	<BODY>
	</BODY>
</HTML>

js数组
1）在js中数组的本质是一段可执行的字符串。js数组是由一对中括号，其中包含多个元素，元素中间用逗号隔开组成的元素
2）js数组的特点，存储数据的类型是任意的，存储数据的长度是任意的
3）js数组的定义方式
普通数组定义方式
包含初始容量的数组定义方式
包含初始值的数组定义方式
直接量定义数组（匿名数组）
4）数组的操作api
push()添加元素
pop()移除最后一个元素
shift()移除第一个元素
for()遍历数组

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>js数组</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		//普通数组定义方式
		var arr=new Array();
		arr[0]=1;
		arr[1]="abc";
		//console.log(arr);
		//包含初始容量的数组定义方式
		var arr1=new Array(3);
		arr1[0]="abc";
		arr1[1]=true;
		//arr1[2]=new Object();
		arr1[2]=2;
		arr1[3]=3;
		arr1[99]=5;
		//console.log(arr1);
		//包含初始值的数组定义方式
		var arr2=new Array(1,"abc",false,new Object());
		//console.log(arr2);
		//直接量定义数组（匿名数组）
		var arr3=[1,"abc",true]
        var arr4=[3,"yes",true,6];	
        arr4.push("cy");
        console.log(arr4);	
        arr4.pop();
        console.log(arr4);
        var first=arr4.shift();
        console.log(first);
        console.log(arr4);
        for(var i=0;i<arr4.length;i++){
	        console.log(arr4[i]);
        }
		</script>
	</HEAD>
	<BODY>
	</BODY>
</HTML>

js对象
1）在js中对象的本质是一段可执行的字符串。是由一对花括号，其中包含多个键值对，键和值之间使用冒号隔开，键值对之间使用逗号隔开，这些内容组成了js对象
2）js之中没有类的概念，无法通过类创建对象，可以通过构造函数的形式创建一个类的构造函数，用它产生对象
3）对象创建的方式
a无参构造创建对象
b有参函数创建对象
c直接量定义对象（匿名对象）
d对象的api操作
删除属性
添加属性
with语句

json字符串
JSON本质上就是一个字符串，能够保存较复杂关系的数据，具有良好的数据保存格式，又极为轻量，加之多种代码平台都支持字符串的处理，所以我们可以使用json字符串进行数据的传入，甚至跨平台传输

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>js对象</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		/*//无参构造创建对象
		function Person(){
			
		}
		var p=new Person();
		p.name="lili";
		p.age=18;
		p.say=function () {
			
			return this.name+"say...";
		}
		console.log(p.say());
		console.log(p);*/
		/*//有参函数创建对象
		function Person(name,age){
			this.name=name;
			this.age=age;
		}
		var p=new Person("cy",90);
		p.addr="安徽";
		console.log(p);*/
		//直接量定义对象(匿名对象)
		var p={name:"lili",age:18,addr:"安徽"};
		p.height=180;
		console.log(p);
		//对象的api操作
		delete p.height;
		console.log(p);
		//with语句
		with(p){
			console.log(name);
		}
		//json对象
		var data={
			name:"lili",
			age:18,
			girlfridends:[
			{name:"lili",age:18,job:"吃"},
			{name:"yy",age:20,job:"玩"}
			]
		}
		console.log(data["girlfridends"][0]["job"]);
		//json字符串
		var data={
			"name":"lili",
			"age":"18",
			"girlfridends":[
			{"name":"lili","age":"18","job":"吃"},
			{"name":"yy","age":"20","job":"玩"}
			]
		}
		</script>
	</HEAD>
	<BODY>
	</BODY>
</HTML>