Java程序猿必学第三十二篇——JS(JavaScript)基础

1. HTML的扩展属性
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 180px;
				line-height: 50px;
				background-color: red;
				text-align: center;
				border-radius: 20px;  /* 设置圆角弧度*/
				box-shadow: 30px 20px 20px gray; /*盒子阴影*/		
			}
			
			body{
				/* 创建单个背景图 */
/*				background-image: url(../img/002.png);
				background-repeat: no-repeat;
				background-size: 100px 150px;*/
				
				/*创建多张背景图 */
				background-image: url(../img/002.png),url(../img/005.png);
				background-repeat: no-repeat;
				background-size: 100px 150px;
				background-position: 0px 0px,100px 0px;
			}
		</style>
	</head>
	<body>
		<div>创建圆角属性</div>
	</body>


2.JS的基础语法
  2.1 变量(重点)
 <head>
		<meta charset="UTF-8">
		<title></title>
		<!--<script src="../js/my.js"></script>-->
		
		<script type="text/javascript">
			/* js概述:是一种脚本语言,依附于浏览器中,进行一些触控效果 
			        网页三剑客: html是基本架构    css是美化效果    js是触控效果
			 * */
			
			/*alert("hello,js2");*/
			/* 在页面中打印输出 */
			document.write("hello,jsp3<br />");
			document.write("hello,jsp4<br />");
			
			var a;
			document.write(a+"<br />");  //undefined关键字
			/* 通过typeof求出值的类型 */
			document.write((typeof a)+"<br />");  //undefined类型
			
			//js是弱类型语言,在定义时,都是var类型   ;
             //java是强类型语言,根据值的不同使用不同数据类型约束
			var b = 1;  
			document.write(b+"<br />");  //1  和java类似,js也可以进行字符串拼接
			document.write((typeof b)+"<br />");  //number
			
			b = 3.14;
			document.write((typeof b)+"<br />");  //number
			
			b = "abc";
			document.write(b+"<br />");  //abc
			document.write((typeof b)+"<br />");  //string
			
			b = true;
			document.write(b+"<br />");  //true
			document.write((typeof b)+"<br />");  //boolean
			
			b = null;
			document.write(b+"<br />");  //null
			document.write((typeof b)+"<br />");  //object
			
			document.write(a+1); //undefined+1==NaN  not a number
			document.write(a+"1");  //undefined1.字符串拼接
			document.write("<br />");
			document.write(typeof (a+1));  //number
			document.write("<br />");
			
			/* 引用对象的操作 (在js中没有类的概念,往往直接创建对象即可)  */
			var st = {id:1001,name:"zs",age:30};  //通过json格式创建对象
			document.write(st.id+"<br />");  /* 获取对象的属性值 */
			document.write(st.name+"<br />");
			
		</script>
	</head>
	<body>
	</body>


2.2 数组
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 数组静态赋值 */
			var a = [1,2,3,4];  /* 定义数组 */
			/* 通过下标操作元素,下标从0开始 */
			document.write(a[0]+"<br />");
			for(var i=0;i<a.length;i++){ //循环遍历
				document.write(a[i]);
			}
			document.write("<br />");
			a[1]=5;  //修改元素
			document.write(a);  //直接打印对象
			document.write("<br />");
			a[5]=7;  //添加元素  a[4]未赋值,为undefined
			for(var i=0;i<a.length;i++){ //循环遍历
				document.write(a[i]);
			}
			document.write("<br />");
			delete a[5];  //删除元素
			for(var i=0;i<a.length;i++){ //循环遍历
				document.write(a[i]);
			}
			document.write("<br />");
			a.length=0; //删除所有
			for(var i=0;i<a.length;i++){ //循环遍历
				document.write(a[i]);
			}
			
			/* 数组的动态赋值  */
			var b = new Array();
			b.push(1);
			b.push(3,5,6);
			document.write("<br />");
			document.write(b);
			
			/* 数组也可以存引用类型 */
			var sts = [{name:"zs",age:30},{name:"ls",age:20}];
			document.write("<br />");
			document.write(sts[0].name+":"+sts[0].age+"<br />");
			
		</script>
	</head>
	<body>
	</body>


2.3 运算符
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			/* 逻辑运算符 */
			var a = false;
			var b = true;
			document.write(!a+"<br />"); //true
			document.write((a&&b)+"<br />"); //false
			document.write((a||b)+"<br />"); //true
			
			/* 关系运算符 */
			a = 3;
			b = 4;
			document.write((a>b)+"<br />"); //false
			document.write((a>=b)+"<br />");//false
			document.write((a<b)+"<br />"); //true
			document.write((a<=b)+"<br />");//true
			document.write((a==b)+"<br />");//false
			document.write((a!=b)+"<br />"); //true
			
			/* 关于==和===的区别:
			   ==:只比较值,不比较类型
			   ===:比较值和类型
			 * */
			a = "1";
			b = 1;
			document.write((a==b)+"<br />"); //true
			document.write((a===b)+"<br />"); //false
			document.write((b===1)+"<br />"); //true
			
			/* ++ --运算符 */
			a = 3;
			document.write(a++);  //3
			document.write(++a);  //5
			document.write(a--);  //5
			document.write(--a);  //3
			
			document.write("<br />");
			
			/* 算数运算符与java一致,主要探讨数字字符串的运算
			   在进行数字字符串算数运算时,只有+是进行拼接的--拼接后为string类型
			 其他的,都会转为number,在进行运算  
			 * */
			a = "5";
			document.write((a+2)+"<br />"); //52 
			document.write((typeof (a+2))+"<br />");  //string
			document.write((a-2)+"<br />"); //3 
			document.write((typeof (a-2))+"<br />");  //number
			document.write((a*2)+"<br />"); //10
			document.write((a/2)+"<br />"); //2.5 可以得到小数
			document.write((a%2)+"<br />"); //1
			
			
			/* 三目运算符 */
			
			a=3;
			document.write((a>2)?true:false);
			
			document.write("<br />");
			
			/* 分支语句 */
			if(a>1){
				document.write(true+"<br />");
			}else{
				document.write(false+"<br />");
			}
			/* 注意:在js的if判断中除了6个值为false,其他都为true 
			   false,null,undefined,0,NaN,""
			 * */
			if("66"){
				document.write("我是成立<br />");
			}else{
				document.write("我是不成立<br />");
			}
			
			/* 案例:打印1~10  */
			for(var i=1;i<=10;i++){
				if(i%3==0){
					//continue;  //跳过3的倍数
					break;      //3的倍数则退出
				}
				document.write(i)
			}
			
		</script>
	</head>
	<body>
	</body>



3. 函数(重点)
   3.1 函数基本使用
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/* 函数:用于代码的封装
			 * 好处:使结构清晰,方便复用
			 * 函数组成:函数调用和函数实现两个部分
			 * 函数分类:
			 * 1.无参数无返回值
			 * 2.有参数无返回值
			 * 3.有参数有返回值
			 * 与java中函数的不同之处:
			 * js中参数没有类型
			 * 返回值不用写返回类型
			 */
			
			//1.无参数无返回值方法
			test();  //函数调用
			
			//函数实现
			function test(){
				console.log("无参无返回值调用");
			}
			
			//2.有参数无返回值方法
			show(666);
			
			function show(a){
				console.log(a);
			}
			
			//3.有参数有返回值方法
			console.log(max(6,8)); //注意:如果没有return,则打印undefined
			
	        function max(a,b){
	        	var m = (a>b)?a:b;
	        	return m;  //通过return返回值
	        }

			/* 扩展:函数重载: 求两个数的和,求三个数的和,求四个数的和 
	           结论:在js中函数没有重载,js执行时,只执行最后一个函数实现
	           如果要实现函数重载效果,需要使用arguments属性(数组,类似java可变参数用法)                      
	         * */
	        console.log(add(1,2));  //3
	        console.log(add(1,2,3));  //6
	        console.log(add(1,2,3,4));  //10
	        
	        /*
	        function add(a,b){
	        	return a+b;
	        }
	        function add(a,b,c){
	        	return a+b+c;
	        }
	        function add(a,b,c,d){
	        	return a+b+c+d;
	        }*/
	       
	       function add(){
	       	  var sum = 0;
	       	  for(var i=0;i<arguments.length;i++){
	       	  	sum += arguments[i];
	       	  }
	       	  return sum;
	       }
	       
	       
	       /* 另一种函数写法:类似匿名内部类 ;  注意:必须把函数实现放前面*/
	      var myTest = function(){
	      	console.log("另一种函数实现");
	      }
	      
	      myTest();
			
		</script>
	</head>


3.2 弹窗函数
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 弹窗函数:系统已写好具体实现,只需调用即可 */
			/* 1.警告框: alert */
			//alert("hello,js");
			
			/* 2.确认框:  confirm 根据确定与取消,做一些判断处理 */
			/*if(confirm("你需要打开这个惊喜吗")){
				console.log("恭喜你,点开了这个惊喜");
			}else{
				console.log("很遗憾,你取消了这个惊喜");
			}*/
			
			/* 3.提示框:prompt  参数1:提示信息   参数2: 默认值
			      点确定,则接收输入的内容;点取消,则接收null
			 * */
			console.log(prompt("温馨提示,欢迎xxx来校参观","刘德华"));
		</script>
	</head>


3.3 系统预定义函数
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 系统预定义函数: 只需进行调用即可 */
			//parseInt 数字字符串转整数
			var a = "123";
			a = parseInt(a);
			console.log(a);  //123
			console.log(typeof a); //number
			
			a = "3.14";
			console.log(parseFloat(a))  //3.14
			console.log(parseInt(a));   //3
			
			//9进制的12,转10进制输出
			console.log(parseInt("12",9)); //9进制的12转十进制输出
			console.log(parseInt("12",8)); //8进制的12转十进制输出
			console.log(parseInt("12",7)); //7进制的12转十进制输出
			
			//isNaN: 是否为非数字  返回true或false
			console.log(isNaN(NaN));  //true
			console.log(isNaN(111));  //false
			console.log(isNaN("111")); //false
			console.log(isNaN("abc")); //true
		</script>
	</head>


4. 事件(重点)
    4.1 事件的使用
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 事件:是html与js交互的桥梁; 触发事件的用法,就是函数的调用形式 */
			//1.onchange事件
			function change(){
				alert("省份变更的触发");
			}
			
			/* onload:页面加载完毕后,系统会自动触发的方法 
			    应用场景:可以拿到html当中的值,DOM的操作就是典型案例
			 * */
			onload = function(){
				alert("页面加载完毕后的触发");
			}
		</script>
	</head>
	<body>
		<select onchange="change()">
			<option>湖南</option>
			<option>湖北</option>
			<option>广东</option>
			<option>广西</option>
		</select>
		<!-- 注意:在js中‘’也代表字符串;js中的字符串可以单引号包含双引号嵌套
			     也可以双引号包单引号嵌套; 但不能单包单,双包双
		-->
		<h1 onclick="alert('点击触发')" onmousemove="console.log('鼠标移入')">标题1</h1>
	    <h1 onmouseout="console.log('鼠标移出触发')" onmousemove="console.log('鼠标移动触发')">标题2</h1>
		
		<input type="text" onkeyup="console.log('键盘弹起')" onkeydown="console.log('键盘按下')" />
	</body>


4.2 提交事件
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* onsubmit:提交事件,用于表单提交的触发
			   应用场景:在前端js即可处理并判断;是否需要进入后台处理
			 * */
		</script>
	</head>
	<body>
		<form onsubmit="alert('xx')">
			用户名:<input type="text" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>


4.3 字符串常用函数
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			//字符串的使用,基本上与java类似的 
			var a = "hello";
		    //常用方法 
		    console.log(a.toUpperCase());  //转大写
		    console.log(a.concat("111"));  //字符串拼接
		    console.log(" he 66  ".trim()); //去除左右空格
		    console.log(a.substring(2,4));  //提取子串 
		</script>
		
	</head>




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值