前端页面之JavaScript1

JavaScript基础

1.JavaScript:
是一种基于对象和事件驱动的脚本语言.
后缀名: .js,JavaScript也是边解释边执行的语言.
2.JavaScript的作用:
2.1:表单验证,增加网站安全.
2.2:动态特效,提高用户体验度.
2.3:驱动事件的执行,增强用户交互性.
3.JavaScript的组成:
ECMAScript(js的基础语法),
DOM(文档对象模型),
BOM(浏览器对象模型).
4.JavaScript是一种弱类型语言.
5.页面引入JavaScript的方式
5.1:行内JavaScript:只能在标签中使用.

eg:<!--行内js-->
		<h1 onclick="javascript:alert('下周马上可以学后端');">java开发人员学JS的目标			</h1>
		

5.2:内部JavaScript:可以在html里面任何地方使用.

		eg:<!--内部js-->
			<script type="text/javascript">
				alert("这是一个内部js");
		   </script>

5.3:外部JavaScript:先写外部js文件,再在html页面中引入

	eg:<!--引入外部的js-->
		  <script type="text/javascript" src="js/1.js"></script>

6.JavaScript的输出方式:

			//第一种弹出窗体输出
			alert("Hello JavaScript");
			//第二种在body中输出
			document.write("Hello china");
			//第三种在控制台输出
			console.log("Hello World");

7.JavaScript的变量
7.1:声明变量: var 变量名;
7.2:给变量赋值: 变量名=值;
7.3:声明变量的同时赋值: var 变量名=值;

eg://声明变量
			var weight;
			var name;
			//给变量赋值
			name="八戒";
			//给变量声明同时赋值
			var age=18;
			var isGF=false;
			var sex="男";
			var height=1.80;
			
			//在js中声明变量也可以用var (不推荐)
			address="千锋";
			
			document.write(weight+"<br/>");
			document.write(name+"<br/>");
			document.write(age+"<br/>");
			document.write(isGF+"<br/>");
			document.write(sex+"<br/>");
			document.write(height+"<br/>");
			document.write(address+"<br/>");

8.JavaScript的数据类型:
number,string,boolean,object,undefined,function
注意:
在javaScript中如果变量省略 value 参数，或者设置为 0、-0、null、""、 false、undefined 或 NaN，则该对象设置为 false.

		eg:var a=0;
			
			if (a) {
				document.write("a的值为true");
			}else{
				document.write("a的值为false");
			}

8.1:获得变量的数据类型: typeof(变量)
8.2:获得变量的数据类型: typeof 变量

eg://判断变量的数据类型
			document.write(typeof(weight)+"<br/>");
			document.write(typeof name+"<br/>");
			document.write(typeof(age)+"<br/>");
			document.write(typeof(isGF)+"<br/>");
			document.write(typeof(sex)+"<br/>");
			document.write(typeof(height)+"<br/>");
			document.write(typeof(address)+"<br/>");

9.javaScript中运算符(算术运算符,关系运算符,赋值运算符,逻辑运算符)与java中用法是一样的.
注意:
==比较是变量的值,与数据类型无关;
===比较是变量的值和数据类型

		eg:var num1="11";
			var num2=11;
			var num3=11;
			
			//==比较是变量的值,与数据类型无关
			//在javaScript中所有变量都可以用==比值.
			document.write(num1==num2);//true
			document.write("<br/>")
			document.write(num2==num3);//true
			document.write("<br/>")
			//===比较是变量的值和数据类型
			document.write(num1===num2);//false
			document.write("<br/>")
			document.write(num2===num3);//true
			document.write("<br/>")

10.JavaScript的数组:像java中数据和集合综合体.
10.1:数组的声明:

eg://第一种声明数组
			var arr1=["苹果","菠萝","山竹"];
			
			//第二种声明数组
			var arr2=new Array();
			//给数组每个空间赋值
			arr2[0]="看直播";
			arr2[1]="吃饭";
			arr2[2]="睡觉";
			
			//第三种声明数组
			var arr3=new Array(2);
			//给数组每个空间赋值
			arr3[0]="lol";
			arr3[1]="吃鸡";
			arr3[2]="修仙";
			
			//第四种声明数组
			var arr4=new Array("火锅","烤肉","泡馍");

10.2:向数组中添加值

		eg://第一种:向数组中添加值
			arr4[3]="烧烤"
			
			//第二种:向数组末尾添加元素
			arr4.push("啤酒","小龙虾");
			
			//第三种:向数组开头添加元素
			arr4.unshift("猪脚饭");

10.3:修改数组中值

		eg://第一种:修改数组中元素
			arr4[0]="白切鸡";
			
			//第二种:修改数组中元素,第一个参数要删除元素起始索引,
					//第二个参数要删除的元素个数,后面参数就是添加到删除位置的元素
			arr4.splice(1,2,"烤竹鼠","榨菜");
		

10.4:删除数组中值

		eg://第一种:删除数组中指定索引的元素的值,位置还在
			arr4[0]=undefined;
			
			//第二种:删除数组中最后一个元素.
			arr4.pop();
			
			//第三种:删除数组中第一个元素
			arr4.shift();
			
			//第四种:删除数组中指定索引处,指定个数的元素,第一个参数要删除元素的起始索引,第二个参数要删除的元素个数
			arr4.splice(1,2);
			
			//第五种:删除指定元素的值,位置还留着
			delete arr4[0];
			
			//第六种:删除数组中所有元素
			arr4.length=0;

10.5:遍历数组:

	eg:for(var i=0;i<arr4.length;i++){
				document.write(arr4[i]+"<br/>");
			}

11.JavaScript中选择结构和while,do-while,for与Java中用法一样.
注意:
JavaScript中没有foreach结构,但是有for-in
11.1:JavaScript中,for-in遍历数组,遍历的是数组索引;for-in遍历对象,
遍历的是对象的属性

/*//声明一个数组
			var arr1=["耳朵到","眼到","心到"];
			//for-in遍历数组,遍历的是数组索引
			for(var i in arr1){
				document.write(i+"\t"+arr1[i]+"<br/>");
			}*/
			
			//for-in遍历对象,遍历的是对象的属性
			var ob={"name":"张三","age":18};
			for(var i in ob){
				document.write(i+"<br/>");
			}

12.函数:相当于java中方法.
12.1:自定义普通函数:function 函数名(参数1,参数2…){
[return 返回结果;]
}

		eg://第一种:声明无参无返回值的方法
			function show1(){
				alert("这是一个无参无返回值的方法");
			}
			
			//第二种:声明有参无返回值的方法
			function show2(a,b){
				alert("这是一个有参无返回值的方法,方法的参数为:"+a+","+b);
			}
			
			//第三种:声明无参有返回值的方法
			function show3(){
				var word="这是一个无参有返回值的方法";
				return word;
			}
			
			//第四种:声明有参有返回值的方法
			function show4(a,b){
				var word="这是一个有参有返回值的方法,参数为:"+a+","+b;
				return word;
			}

12.2:自定义匿名函数:var 变量名= function(参数1,参数2…){
[return 结果;]
}

		eg://第五种:声明匿名函数
			var a=function(c,d){
				var word="这是一个匿名函数,参数为:"+c+","+d;
				return word;
			}

12.3:函数的调用:
12.3.1:普通函数调用:函数名(实参1,实参2…);
var 变量=函数名(实参1,实参2…);
12.3.2:匿名函数的调用: 变量名(实参1,实参2…);

		eg:<input type="button" value="调用无参无返回值的方法" onclick="show1()"/>
			<br />
		<input type="button" value="调用有参无返回值的方法" 
				onclick="show2('孙星',18)"/><br />
		<input type="button" value="调用无参有返回值的方法" 
				onclick="alert(show3())"/><br />
		<input type="button" value="调用有参有返回值的方法" 
			onclick="javascript:alert(show4(11,12))"/><br />
		<input type="button" value="调用匿名函数" 
			onclick="alert(a(17,18))"/><br />

12.4:系统函数:

	isNaN():判断变量是否是数字,不是数字就返回true,反之就返回false
		  eg://isNaN():判断变量是否是数字,不是数字就返回true,反之就返回false
			var num1="abc";
			var num2=11;
			var num3="11";
			document.write(isNaN(num1)+"<br/>");//true
			document.write(isNaN(num2)+"<br/>");//false
			//注意:isNaN()只判断变量的值,与数据类型无关
			document.write(isNaN(num3)+"<br/>");//false
			
	parseFloat():将变量转换为带小数的数字
	parseInt();将变量转换为整数的数字
			eg://parseFloat():将变量转换为带小数的数字
			//parseInt();将变量转换为整数的数字
			var num4="11";
			var num5="3.14";
			//将两个变量进行字符串的连接作用
			document.write(num4+num5+"<br/>");
			//进行数学运算
			document.write(parseInt(num4)+parseFloat(num5)+"<br/>");
			document.write(parseInt(num5)+"<br/>");//3
			document.write(parseFloat(num4)+"<br/>");//11

	eval();可以js字符串转换js代码执行
		 eg://eval();可以js字符串转换js代码执行
			var ob1="{'name':'胡青松','age':18}";
			document.write(typeof ob1);//string
			document.write("<br/>");
			var ob2=eval("("+ob1+")");
			document.write(typeof ob2);//object
			document.write("<br/>");
			document.write(ob2.name+","+ob2.age);
			document.write("<br/>");