cgb2108-day10

一,JS语句

–1,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js语句</title>
		<script>
			// 2.js的循环语句
				//练习3:假设你有1个亿,每天花500w,能花多少天
				var days = 0; //记录天
				var money = 100000000 ;//记录钱
				while(money>0){
					money -= 5000000 ;//花钱
					days++;//天数++
				}
				console.log(days);
				
				//练习2:统计1~100的偶数和
				var sum = 0;//记录和
				for(let i=1;i<=100;i++){
					if(i % 2 == 0){ //过滤偶数
						sum = sum + i;//修改变量
						// sum += i;
					}
				}
				console.log(sum);
				//练习1:打印1~100
				for(let i=1;i<=100;i++){
					console.log(i);
				}
			// 1.js的变量和常量
				var a = 2; //变量
				a = 'hello';
				console.log(a);//hello
				
				const b = 10; //常量,值不能再改
				// b = 20;
				console.log(b);
				
				let c = 10;//变量,有作用域
				c = 20;
				console.log(c);
				
				var x = 10;
				{
					let x = 20;  //只在{}内有效,出去就无效了
					console.log("x="+x);//20
				}
				console.log("x="+x);//10
		</script>
	</head>
	<body>
	</body>
</html>

二,JS数组

–1,概述

JS的数组和java一样,可以存储多个数据.
区别:
1, java严格区分数据类型,整型数组只能存整数…
2, JS里的数组可以存放各种类型的数据(JS弱类型) – 灵活!!!

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js数组</title>
		
		<script>
			// 1.创建js数组: 数据类型丰富 + 长度可变
				//方式1:
				let a = new Array();
				//存入数据--丰富的类型
				a = new Array(1,1.6,true,'hello',null);
				a[99]=0;
				console.log(a);
				console.log(a.length);//获取数组的长度
				console.log(a[2]);//获取下标为2的数据
				console.log(a[a.length-1]);//获取null元素
				
				//方式2:
				let b = [];
				//存入数据
				b = [1,1.6,true,'hello',null];
				console.log(b);
				console.log(b.length);
				console.log(b[3]);
			// 2.遍历js数组:	
				//普通for循环
				for (let i = 0; i < b.length; i++) {
					console.log(b[i]+"========");//i是下标
				}
				//增强for循环..foreach--for in
				//java的写法 for(var i : b){}
				for(var i in b){
					console.log(i);//i是下标
					console.log(b[i]);
				}
		</script>
	</head>
	<body>
	</body>
</html>

三,JS函数

–1,概述

类似于java里的方法,用来封装一段代码,为了提高代码的复用性.
步骤: 1,定义函数 2,调用函数
定义函数使用function关键字

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js函数</title>
		<script>
			//方式1:
				// 1,定义函数
				function print(){
					console.log("调用成功");
				}
				// 2,调用函数
				print();
			//方式2:
				// 1,定义函数
				var sout = function(){
					console.log("调用成功");
				}
				// 2,调用函数
				sout();
			// 练习1:求1~10的总和
			// function add(){ 定义JS函数的第一种方式
			var add = function(){//定义JS函数的第二种方式
				//1,定义数组
				var a = [1,2,3,4,5,6,7,8,9,10] ;
				//2,遍历数组
				let b = 0;//定义变量,记录和
				for(let i=0;i<a.length;i++){
					b = b + a[i] ;//数组里的数据求和
				}
				console.log(b);
			}
			// add();//调用函数
		</script>
	</head>
	<body>
		<!-- 鼠标划入时,触发函数 -->
		<button onmouseenter="add()">点我,求和</button>
	</body>
</html>

–3,练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js函数</title>
		<script>
			//1.没有参数没有返回值 的函数
				//  求1~100的和 
				function sum(){
					var a = 0;
					for (var i = 1; i <=100; i++) {
						a += i;
					}
					console.log(a);
				}
			//2.有参数没有返回值 的函数
				//关键字 函数名(参数名,参数名){函数体}
				function save(a,b){//定义函数
					console.log(a+b);
				}
				save(1,2); //调用函数
			// 练习1:求1~10的总和	
				// function add(a){//定义函数的第一种方式
				var add = function(a){//定义函数的第二种方式
					var b = 0;//记录和
					for (var i in a){//遍历a数组,i是下标
						b += a[i];
					}
					console.log(b);
				}
				add(new Array(1,2,3,4));//调用函数
			//3.有参数有返回值 的函数	
				//定义函数 return
				var add = function(a){//定义函数的第二种方式
					var b = 0;//记录和
					for (var i in a){//遍历a数组,i是下标
						b += a[i];
					}
					return b;//把计算的结果返回给调用者
				}	
				//调用函数
				var x = add(new Array(1,2,3,4,5,6));
				console.log(x);
			//练习:	求1~100里的偶数和
				function fun(){ //定义函数
					var y = 0;//记录和
					for (var i = 1; i < 101; i++) {
						if(i % 2 == 0){//过滤偶数
							y += i ;//求和
						}
					}
					return y;//把求和的结果返回给调用者
				}
				var z = fun();//调用函数
				console.log(z+100);
		</script>
	</head>
	<body>
		<button onclick="sum()">点我,求和</button>
	</body>
</html>

四,JS对象

–1,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS对象</title>
		
		<script>
			// 2,创建JS对象的方式2: 比方式1简洁
				let car = {
					// 资源名 : 资源的值
					//设置属性
					name : "BMW" ,
					price : 9.9  ,
					//设置函数
					start : function(){
						console.log('调用成功!');
					}
				}
				console.log(car);//{name: 'BMW', price: 9.9}
				console.log(car.name+car.price);//调用属性
				car.start();//调用函数
			// 1,创建你JS对象的方式1:比java灵活
				function Person(){} //声明对象
				let p = new Person();//创建对象
				//动态设置属性
				p.name='tony';
				p.addr='北京';
				//动态获取属性
				console.log(p.name+p.addr);
				//动态设置函数
				p.eat=function(){
					console.log("吃大餐");
				}
				console.log(p);
				//调用函数
				p.eat();
				
			function a(){
				// 1,内置对象--window对象
					window.alert('100');//弹出框
					window.confirm('确认');//确认框
					window.prompt("请输入");//输入框
					// window.document //属性,获取网页文档
					//string对象
					var x='hello';
					console.log( x.length );//求长度
					console.log( x.charAt(0) );//根据下标查找数据
					console.log( x.concat(123) );//拼接字符串
					console.log( x.substring(1,3) );//截取字符串[1,3)
			}
			a();
		</script>
	</head>
	<body>
	</body>
</html>

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值