JavaWeb自学之JavaScript学习笔记 Day-1

最新推荐文章于 2021-04-05 17:46:09 发布
我心好慌
最新推荐文章于 2021-04-05 17:46:09 发布
阅读量435
点赞数
分类专栏： JavaScript
本文链接：https://blog.csdn.net/u012011069/article/details/50364918
版权
JavaScript 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
1、JavaScript的简介
	*是基于对象和事件驱动的语言，应用于客户端
		-基于对象：
			**提供好了很多对象，可以直接拿过来使用
		-事件驱动
			**html做网站静态效果，JavaScript动态效果
			
		-客户端：专门指的是浏览器
	
	*js的特点
		(1)交互性
			-信息的动态交互
		(2)安全性
			-js不能访问本地磁盘的文件
		(3)跨平台性
			-Java的跨平台性用虚拟机实现
			-js是通过浏览器，只需要支持js的浏览器都可以运行
	
	*JavaScript和java的区别(就像雷锋和雷峰塔没有任何关系)
		(1)java是sun公司(现在是oracle公司);js是网景公司
		(2)JavaScript是基于对象的，java是面向对象
		(3)java是强类型的语言，js是弱类型的语言
			-比如java里面，int i="10"是错的；
			-js：var i=10;var m="10";都是可以的
		(4)JavaScript只需要解析就可以执行，而java需要先编译成字节码文件，再执行
	
	*JavaScript的组成(下面js)
		三部分组成
		(1)ECMAScript
			-ECMA:欧洲计算机协会，
				由ECMA组织制定的js的语法、语句
		(2)BOM
			-broswer object model:浏览器对象模型
		(3)DOM
			-document object model：文档对象模型
			
	2、js和html的结合方式(两种)
		第一种：
			-使用一个标签<script type="text/javascript">js代码;</script>
			
		第二种：
			-使用script标签，引入一个外部的js文件
			***创建一个js文件，写js代码
				<script type="text/javascript" src="1.js"></script>
				
		**使用第二种方式时候，就不要在script标签里面写js代码了，不会执行
		
	3、js的原始类型和声明变量
		**java的基本数据类型 byte short int long float double char boolean
		
		**定义变量 所有变量都使用关键字 var
		
		**js的原始类型(五个)
			-string:字符串
				*** var str="abc";
				
			-number:数字类型
				*** var m=123;
				
			-boolean:true和false
				*** var flag=true;
				
			-null
				***var date=new Date();
				***获取对象的引用，null表示对象引用为空，所有对象的引用也是object
				
			-undifined
				***定义一个变量，没有赋值
				***var aa;
		
		**typeof():查看当前变量的数据类型
				
	4、js的语句
		-java里面的语句
			**if判断
				***=:表示赋值
				***==:表示判断	
			**switch语句
			**循环 for while do-while
			
		-js里面的这些语句
			**if判断语句
			**switch语句
				-java里面支持数据类型  string支持吗？在jdk1.7开始支持
				-js里面都支持
				-switch(a){
					case 5:
							break;
					case 6:
							break;
					default:
							......
				}
				
			**循环语句 while for do-while
				-while循环
					var i=5;
					while(i>1){
						alert(i);
						i--;
					}
					
				-for循环
					for(var i=0;i<=5;i++){
						alert(i);
					}
			**i++和++i与java里面的相同
			
	5、js的运算符
		**+=： x+=y;===>x=x+y;
		**js里面不区分整数和小数
				var j=123;
				alert(j/1000*1000);
				//j/1000*1000 在java里面的结果是0
				//在js里面不区分整数和小数，123/1000*1000=0.123*1000=123
		
		**字符串的相加和相减操作
			*//字符串的操作
			
			**如果相加，做的是字符串连接
			
			**若果相减，做的是相减的运算
			
			var str="456";
			//alert(str+1); //在java里面操作的结果是4561，在js里面还是4561
			alert(str-1);	//相减时候，执行减法的运算
			如果将"456"改成"abc"，则相减时会提示NaN:表示不是一个数字
		
		**boolean类型也可以进行相加和相减操作
			***如果设置成true，相当于这个值是1
			***如果设置成false，相当于这个值是0
			
		** ==和===的区别
			**都是做判断
			**==比较的只是值
			**===比较的是值和类型
			
		**引入知识
			直接向页面输出的语句(可以把内容显示在页面上)
			*document.write("aaa");
			 document.write("<hr/>");
			**可以向页面输出变量，固定值和html代码
			
	6、练习：九九乘法表(输出到页面上)
	<html>
		<head>
			<title>js和html的结合方式</title>
		</head>
		<body>
			<script type="text/javascript">
				document.write("<table border='1' bordercolor='blue'>");
		
				for(var i=1;i<=9;i++){
		
				document.write("<tr>")
				for(var j=1;j<=i;j++){
					document.write("<td>");
					document.write(j+"*"+i+"="+i*j+"&nbsp;");
					document.write("</td>");
				}
				document.write("</tr>");
			}
			document.write("</table>");
			</script>
		</body>
	</html>
		***document.write里面是双引号，如果设置标签的属性需要使用单引号
		***document.write可以输出变量，还可以输出html代码
		
	7、js的数组
		*什么是数组？
			-java里面的数组 定义 int[] arr={1,2,3};
			
		*定义方式(三种)
			第一种：var arr=[1,"4",true];
			第二种：使用内置对象Array对象
					var  arr1=new Array(5);	//定义一个数组，数组的长度是5
					arr1[0]="1";
			第三种：使用内置对象Array
					var arr2=new Array(3,4,5);//定义一个数组，数组里面的元素是3 4 5
					
		*数组里面有一个属性 length：获取到数组的长度
		
		*数组可以存放不同的数据类型的数据
		
	8、js的函数
		**在java里面定义方法
			public 返回类型void/int 方法名称(参数列表){
				方法体；
				返回值；
			}
		**在js里面定义函数(方法)有三种方式
			****函数的参数列表里面，不需要var，直接写参数名称
			第一种方式：
				****使用到一个关键字function
				****function 方法名(参数列表){
					方法体；
					返回值可有可无(根据实际需要)
				}
			***代码****
			
				//使用第一种方式创建函数
				function test(){
					alert("qqqqqq");
				}
				//调用方法
				//test();
			
				//定义一个有参数的方法，实现两个数的相加
				function add1(a,b){
				var sum=a+b;
					alert(sum);
				}
				//add1(2,3);
			
				function add2(a,b,c){
					var sum1=a+b+c;
					return sum1;
				}
				alert(add2(3,4,5));
				
			第二种方式：
				****匿名函数
					function(参数列表){
						方法体和函数值；
					}
					调用的时候需要起一个名字如：var add=function()
				****代码****
					//第二种方式创建函数
					var add3=function(m,n){
						alert(m+n);
					}
					//调用方法
					add3(5,6);
					
			第三种方式：(用的少，了解)
				***动态函数
				***使用到js里面的一个内置对象Function
					var add=new Function("参数列表"，”方法体和返回值“);
					
				***方法一定要记得调用，不然不起作用
					
	9、js的全局变量和局部变量
		**全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
			-在方法外部、内部、另一个script标签都可以使用
		**局部变量：在方法内部定义一个变量，只能在方法内部使用
			-如果在方法的外部调用这个变量，提示出错
				-SCRIPT5009: “nn”未定义 
				js的全局变量和局部变量.html, 行22 字符4
				
		**ie自带了一个调试工具，ie8及其以上的版本中，键盘按F12，找到页面下方的控制台
		
	10、script标签的位置
			*建议把script标签放到</body>的后面
			*如果现在有这样一个需求：
				在js里面需要获取到input里面的值，如果把script标签放到head里面
				html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值
				因为页面还没有解析到input那一行，肯定取不到，所以会报错。
				
	11、js的函数重载