JS JavaScript入门

x33g5p2x  于2021-09-24 转载在 JavaScript  
字(3.1k)|赞(0)|评价(0)|浏览(419)

JavaScript

脚本语言 局限于浏览器可以实现动态网页

是一门 基于对象 和 事件驱动 的 脚本语言 ,通常用来提高网页与用户的交互性

概念  基于对象 事件驱动 脚本语言

特点+优势    课件 

使用位置:

行内JS  作用在一行

内部JS heat内 使用script标签

外部JS 松耦合

<!-- 行内JS -->
		<div onclick="alert('你好')">我是div1</div><!-- 单击div弹出你好 -->
		<div ondblclick="alert('你好')">我是div2</div><!-- 双击div弹出你好 -->
		<div onmouseenter="alert('你好')">我是div3</div><!-- 鼠标路过 -->
<!-- 内部JS -->
		<script >
			alert('我来了')
		</script>

基本数据类型 课件 

number  string null boolean undefined

变量

// //1.JS的变量 :变量类型 变量名=变量名
			// var a=5;
			// alert(a);
			// //修改a的类型与值
			// a=true;
			// a=5.5;
			// a='你好';
			// alert(a);
			// //2.JS的运算符
			// var b=10;
			// alert(b+1);
			// alert(b*2);
			// alert(b-8);
			// alert(b/2);
			// alert(b--);//自减 且先弹出b原来的值 10
			// alert(--b);//自减 直接弹出自减后的值 8
			// b=b++;
			// alert(b);		
			
			// b=b*2;//与java区分!!!
			// b*=2;
			
			// var c=10;
			// var d='10';
			// // alert(c==d);//T
			// // alert(c===d);//F  比较值+类型
			// alert(c!=d);//F 只比较值
			// alert(c!==d);//T //值+类型
			// // 比较两个数里的最大值
			// var e=1; var f=2;
			// var g=e>f?e:f;
			// alert(g);
			// // 比较三个数里的最大值--1
			// var a1=1; var a2=2; var a3=3;
			// var max1=a1>a2 ?a1 : a2;
			// var max2=max1>a3 ? max1 : a3;
			// alert(max2);
			// // 比较三个数里的最大值--2
			// var a1=1; var a2=2; var a3=3;
			// var max=a1>a2? (a1>a3 ? a1 : a3) : (a2>a3 ? a2 : a3);
			// alert(max);

运算符  基本同Java

//typeof运算符
			var a=3;
			console.log(typeof a);
			a=true;
			console.log(typeof a);
			a='hello';
			console.log(typeof a);
			console.log(typeof 122+'abc');
			console.log(typeof (123+'abc'));

分支结构

1.if else

// //if else 
			// var a=1;
			// if(a==4){
			// 	console.log('yes');
			// }else{
			// 	console.log('no');
			// }
			//const 修饰的量为常量 
			// const ct;
			// console.log(ct);
			
			
			//分支结构练习1 成绩情况 if else
			// var a=prompt('请输入您的成绩:');
			// console.log(a);
			// if(a>=80 && a<=100){
			// 	console.log('优秀');
			// }else if(a>=60 && a<80){
			// 	console.log('中等');
			// }else if(a>=0 && a<60){
			// 	console.log('不及格');
			// }else{
			// 	console.log('输入有误');
			// }

2.switch case

//分支结构练习2 switch case 
			// var day=4;
			// switch(day){
			// 	case 1 : console.log('今天星期一');break;
			// 	case 2 : console.log('今天星期二');break;
			// 	case 3 : console.log('今天星期三');break;
			// 	case 4 : console.log('今天星期四');break;
			// }

循环结构

1.for

//for循环
			// for(var a=0 ; a<5 ;a++){
			// 	console.log(a);
			// }
			// var b=0;
			// for(var a=0;a<=100;a++){	
			// 	if(a%2==0){
			// 		b=b+a;
			// 	}				
			// }
			// console.log(b)
			// var b=0;
			// for(var a=0 ; a<=100 ; ++a){
			// 	if(a%2 !=0){
			// 		b++;
			// 	}
			// }
			// console.log(b);

2.while

//while循环
			// var  a =100000000;
			// var day=0;
			// while(true){//几种写法...
			// 	a/=2;
			// 	day++;
			// 	if(a<=1) break;
				
			// }
			// console.log(day);

数组

//数组 创建数组并赋值
			var a=new Array();
			console.log(a);
			var b=new Array('abc',1,2.2);//方式一
			// console.log(b.length);
			// var c=[1,2.2,'abc',true];//方式二 更高效
			// // c=[1,2.2,'abc',true];
			// console.log(c);
			// console.log(c.length);
			// a[99]=100;//下标
			// console.log(a.length);
			
			//数组便利1
			// for(var i=0 ; i<b.length ; i++){
			// 	console.log(b[i]);
			// }
			//数组遍历2
			for(var o in b){//o为下标
				console.log(o);
				console.log(b[o]);
				
			}

JS函数 

方式一

定义:function 方法名(参数列表){方法体}

调用:方法名()

//函数 定义1
			function add(){
				var a=[1,2,3,4];
				var b=0;
				for(var i=0 ; i<a.length ; i++){
					b=b+a[i];
				}
				console.log(b);
			}
			add();
	        function add1( a){
				console.log(a[0]);
			}
			var b= [1,2,3];
			add1(b);
function add2(a){
				var b=0;
				for(var o in a){
					b=b+a[o];
				}
				console.log(b);
			}
			
			//设置返回值
			function add3(a){
				var b=0;
				for(var o in a){
					b=b+a[o];
				}
				return b;
			}
			var c=[1,2,34,5];
			var sum=add3(c);
			console.log(sum)

方式二

定义:var a= function(参数列表){方法体}

调用:a(参数列表);

// 函数 定义2
			var fun=function (a){
				console.log(a)
			}
			fun(1);

相关文章