JavaScript基础

JavaScript一款网路脚本语言,具有很多的用途,用来改进设计网页、验证表单、检测浏览器、创建cookies等。

JavaScript是什么?

1.被用来向HTML页面添加交互行为

2.是一种脚本语言,即轻量级的编程语言

3.通常被嵌入到HTML页面中

4.是一种解释型语言,代码不进行预编译

JavaScript有哪些功能?

1.为HTML页面提供了一种编程工具

2.可以将动态的文本放入的HTML页面中

3.可以对事件做出响应

4.可以读写HTML元素

5.可以被用来验证数据,例如使用正则表达式检测字符串、验证用户提交是否为空字符串

6.可以检测浏览器,并根据检测到的浏览器载入相应的页面

7.创建cookies,存储和取出位于访问者计算机中的信息

JavaScript真正的名称为ECMAScript,JavaScript语句是给浏览器执行的命令,告诉浏览器要执行的操作。

1、JavaScript的编写

JavaScript的代码放在<script type="text/javascript">代码片段</script>中,原则上可以嵌入到HTML页面的任何地方,即便是在HTML元素内。

实际上,JavaScript代码段一般放在HTML的body或者head元素中。

区别就是HTML页面被浏览器加载的时候 ,按顺序加载JavaScript代码,加载并不代表执行,JavaScript的函数就是先加载,在事件触发调用时执行。

先加载head中的JavaScript代码,后加载body中的代码

一般对于事件触发的JavaScript响应函数,都写在head中,在Html页面加载时就把这些JavaScript函数加载,在后期body中可调用这些函数。

JavaScript的注释使用”//“对单行注释,使用/*注释段*/对多行进行注释。

2、变量

JavaScript使用var语句来声明变量,对大小写敏感,var y;和var Y是不同的变量

可以在声明时或者声明之后对变量赋值,为变量赋值文本值时,要使用"abcd"引起。

注意:

1.可以向未声明的变量赋值,该变量会自动声明

	<script type="text/javascript">
		x=6;
		alert(x);//6
	</script>
2.对于声明了的变量再次声明,该变量也不会丢失原始值
	<script type="text/javascript">
		var x=6;
		x=x+7;
		var x;
		alert(x);//13
	</script>

3、运算

JavaScript也定义了变量之间的运算操作:加减乘除+-*/,求余%,累加++,累减--,赋值=,还有赋值运算符与其他运算符的结合。

注意:

1.加号+,可以把字符串连接起来

	<script type="text/javascript">
		var x="abcd";
		var y="ef";
		alert(x+y);//abcdef
	</script>
2.加号把数字和字符串相加,结果为字符串

	<script type="text/javascript">
		var x=23;
		var y="ef";
		alert(x+y);//23ef
	</script>

4、比较和逻辑运算符

JavaScript的比较运算符和逻辑运算符都基本和java语言一样,只有个别注意全等运算符===与等于==的区别。

===全等运算符:比较变量的值和类型,两者不但值相等,类型也一样,才返回true

	<script type="text/javascript">
		var x=23;
		var y="23";
		alert(x===y);//fasle
		
		var z=23;
		alert(x===z);//true
	</script>
==等于运算符:只比较值是否相等,不比较类型

	<script type="text/javascript">
		var x=23;
		var y="23";
		alert(x==y);//true
	</script>

5、消息框

消息框主要是增强界面与用户的交互能力,根据用户的选择返回相应的值。

1.警告框

警告框经常用于确保用户得到某些信息,当警告框出现后,用户需要点击确定按钮才能继续操作

语法:使用alert(警告内容)语句,警告内容如果是字符串,需用使用"内容"引起,警告内容为数值时,可以直接填写。

	<script type="text/javascript">
		alert("abcd");
		alert(22); 
	</script>
2.确认框

使用户验证确认或者得到某些信息。根据用户的选择,返回true或fasle

语法:confirm(确认内容)

	<script type="text/javascript">
		var f = confirm("您确定继续执行吗?");//根据用户选择返回true或false
		alert(f);//true或false
	</script>
3.提示框

用于向用户提示,输入某个值,点击确认或取消按钮才能继续操作。

语法:prompt("提示语","默认值")

可以指定默认值,也可以不指定,指定时对话框中显示默认值。

第一个参数为提示语,用于提示用户的话语输出。

如果用户点击取消,返回null;

如果用户点击确定,返回为用户输入的值,如果用户输入为空,那么返回为空字符串,而不是null。

	<script type="text/javascript">
		var p = prompt("请输入姓名:","aaa");
		alert(p);
	</script>

6、函数

JavaScript函数的目的是为了JS代码在页面加载时不被执行,通过事件触发或者函数调用执行代码块

函数的定义:

function fun_name(x1, x2,  x3){

Js代码...

}

注意,参数无需使用var声明,也不能使用var声明,否则出错

定义好函数后,在事件页面事件触发时指定响应函数onclick="fun_name()";

可以定义多个参数的函数,也可以定义无参函数,还可以使用return语句指定函数返回值。

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
	function showHello(){
		alert("Hello World!");
	}
</script>
</head>
<body>
	<button onclick="showHello()">调用函数</button>
</body>
</html>
函数中的变量为局部变量,函数外定义的变量生存周期从声明开始到页面关闭结束,可以被所有函数访问。

1.传参调用函数

<script type="text/javascript">
	function showHello(x){
		alert(x);
	}
</script>
</head>
<body>
	<button onclick="showHello('您好!')">调用函数</button>
</body>
2.有返回值的函数

<script type="text/javascript">
	function showHello(){
		return "您好!!!"
	}
</script>
</head>
<body>
	<button onclick="alert(showHello())">调用函数</button>
</body>

7、for in 声明

for in声明是为了对数组进行遍历操作,或者遍历对象的属性(后续学习)

使用方法:

var arr=new Array();

for(var x in arr){

arr[x];

}

注意x为数组的下标值,而不是数组的元素

<script type="text/javascript">
	// var x;//两种x的声明方法都可以
	var mycars = new Array();
	mycars[0]="Saab";
	mycars[1]="Volvo";
	mycars[2]="BMW";

	//使用for in 语句遍历数组
	for(var x in mycars){
		//注意x为数组的下标值,不是数组元素
		document.write(mycars[x]+"<br/>");
	}
</script>

8、事件

事件是JS可以侦测到的行为,增加界面的交互能力,使我们有能力创建动态页面。

HTML页面中的每一个元素都可以产生某些触发Js函数的事件,事件通常与函数结合使用,当事件触发时执行函数。

一些事件举例:鼠标点击、页面或图像载入、鼠标悬浮于页面的某个热点之上、键盘按键等

onload onUnload

onload事件发生在用户进入页面时,也就是浏览器加载页面时,该事件通常被用于检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。

onUnload事件发生在用户离开页面时。

这两个事件也通常用于处理cookies

HTML页面中body元素有onload和onUnload事件

<body onunload="" onload="">
注意代码中,事件属性全部使用小写。

其他事件的使用后边学习。

9、try-catch语句

同java语言一样,try-catch语句是为了应对编程中出现的错误。try-catch语句可以在函数中使用,也可以不在函数中使用,一般经常使用在函数中。

使用方法

try{

检测代码;

}catch(err){

处理代码;

}

其中err可以写为别的名称,同样适用。

<script type="text/javascript">
function show(){
	try{
		allert("aaa");
	}catch(err1){
		alert("此页面出现错误:"+err1)
	}
}
</script>

10、throw

用于程序开发者主动创建异常并抛出,可以结合try-catch语句,以达到控制程序流并产生精确错误消息的目的。

使用方法:throw exception;

exception可以是字符串、数值,或者对象

<script type="text/javascript">
var x=prompt("请输入一个整数值:");
function message()
{
	try{
		if(x>=0)
			throw 1;
		if(x<0)
			throw -1;
	}catch(err){
		if(err==1){
			alert("err==1");
		}
		else{
			alert("err==-1");
		}
	}
}
</script>

11、对象简介

JavaScript是面向对象的编程语言OOP(Object Oriented Programming),可以自己定义对象和变量类型。

同java语言一样,对象含有属性和方法。

属性:是与对象有关的值

方法:是对象可以完成的行为

JS中有字符串的String对象,数组的Array对象,日期的Date对象,布尔型Boolean对象等。

String对象用例:String对象的length属性和toUpperCase()方法

	<script type="text/javascript">
		var x="hello world!";
		//String对象的length属性
		document.write(x.length);//12
		//String对象的toUpperCase()方法
		document.write("<br/>"+x.toUpperCase());//HELLO WORLD!
	</script>

12、字符串String

String对象用于处理字符串,双引号的"abcd"就是一个String对象。使用方法见上节。

创建String对象时使用:new String(参数) 以参数,创建字符串对象返回。也可以不使用String字眼,直接使用双引号的字符串。

	<script type="text/javascript">
		//var x=new String(222);//OK,可以使用数值作为参数
		//var x=new String(abc);//错误,必须使用双引号
		var x=new String("hello world!!!")
		//String对象的length属性
		document.write(x.length);//14
		//String对象的toUpperCase()方法
		document.write("<br/>"+x.toUpperCase());//HELLO WORLD!!!
	</script>
注意,new String(参数)的参数指定,可以为数值,字符必须有双引号,否则出错。

也可以不使用new ,直接String(参数),直接把参数转化为字符串对象(不是很熟悉该方法的使用,待后续学习)

注意,JS的字符串是不可变的,String定义的方法都不能改变字符串的内容,像toUpperCase()等方法返回的是新的字符串。

字符串对象可以使用 for in 遍历。

String对象的属性主要有三个:constructor(对象构造函数的引用),length(字符串的长度),prototype(允许向对象添加属性和方法)。

prototype比较重要,length经常使用。

String对象还有大量的方法,常用的有:

indexOf()检索字符串

concat()连接字符串

link()将字符串显示为链接

replace()替换与正则表达式匹配的值

toUpperCase()、toLowerCase()字符串大小写转换

后续用到的继续学习。

13、日期Date

Date对象实现对日期的操作,使用方法new Date();返回Date对象。

Date对象只有constructor和prototype属性,有很多关于时间操作的方法

	<script type="text/javascript">
		//1.返回当前的日期的时间 new Date() 或直接Date()
		document.write(new Date());//Wed Mar 23 2016 13:13:29 GMT+0800 (中国标准时间)
		//这种Date()返回的不是Date对象,应该是个字符串,因为不具备Date对象的方法
		document.write("<br/>"+Date());//Wed Mar 23 2016 13:14:07 GMT+0800 (中国标准时间) 
		
		//2.返回从1970.1.1日起至今的毫秒数,使用getTime()方法
		document.write("<br/>"+new Date().getTime());//1458710189641 
		
		//3.设置具体的日期setFullYear(年,月-1,日),注意月份是从0开始的(实际为1月份)
		var date = new Date();
		date.setFullYear(2106,2,22);
		document.write("<br/>"+date);//Mon Mar 22 2106 13:20:22 GMT+0800 (中国标准时间) 
		
		//4.将时间以UTC格式显示toUTCString()
		document.write("<br/>"+new Date().toUTCString());//Wed, 23 Mar 2016 05:23:07 GMT 
		
		//5.getDay()显示星期几,显示结果为数值,0位星期日,1为星期一
		document.write("<br/>"+new Date().getDay());//3
	</script>
另外还有一些常用的方法:

getDate()获取一个月中的某一天;

getMonth()获取月份数,从0到11;

getFullYear()获取四位数的年份;

getHours()、getMinutes()、getSeconds()、getMilliSeconds()获取时(0~23)、分、秒(0~59)、毫秒(0~999),另外这些方法还有对应的set系列的方法

14、数组Array

创建数组:三种方法

new Array();

new Array(size);创建对象时,指定数组的大小,后期可以扩展

new Array(e0,e1,e2...);通过指定数组元素创建数组

数组Array对象的属性有:constructor ,length, prototype ,还有 index, input(对这两个属性的用处未知中。。。)
常用的方法有:

concat()连接两个数组

join()将数组的所有元素组成字符串

sort()对数组元素进行排序,使用此方法后,数组内部的元素就重新进行了排序

reverse()颠倒数组中元素的顺序

pop()删除并返回数组的最后一个元素

shift()删除并返回数组的第一个元素

push()向数组的末尾添加一个元素或多个元素,并返回新的长度

	<script type="text/javascript">
		//创建数组对象new Array(); 指定大小创建数组new Array(size);new Array("aa","bb","cc")
		var arr = new Array();
		arr[0]="AA";
		arr[1]="BB";
		arr[2]="CC";
		showArr(arr);
		document.write("<br/>");
		
		//注意限定数组大小的形式创建数组后,可以扩展
		var arr2 = new Array(2);
		arr2[0]=1;
		arr2[1]=11;
		arr2[3]=111;
		showArr(arr2);
		document.write("<br/>");
		/*显示:
			1 
			11
			111
		*/
		var arr3 = new Array("aa","bb","cc");
		showArr(arr3);
		
		showArr(arr2.concat(arr3));//不同类型的数组也可以组成新的数组
		
		function showArr(arr){
			for(var x in arr){
				document.write(arr[x]+"<br/>")
			}
		}
		
	</script>

15、逻辑Boolean

用于检查逻辑对象是true还是false,其实就是布尔型的封装类。

创建对象时,如果为无参数或者参数为0,-0,false,null,空字符串"",NaN,对象都是为false

参数为字符串或者其他数值,对象为true

	<script type="text/javascript">
		//以下输出全部为false
 		document.write("无参数:"+new Boolean()+"<br/>");
 		document.write("参数为0:"+new Boolean(0)+"<br/>");
 		document.write("参数为-0:"+new Boolean(-0)+"<br/>");
 		document.write("参数为null:"+new Boolean(null)+"<br/>");
 		document.write("参数为false:"+new Boolean(false)+"<br/>");
 		document.write("参数为空字符串\"\":"+new Boolean("")+"<br/>");
 		document.write("参数为NaN:"+new Boolean(NaN)+"<br/>");
 		document.write("参数为空字符串\"\":"+new Boolean("")+"<br/>");
 		
 		//以下输出为true
 		document.write("参数为空字符串\"false\":"+new Boolean("false")+"<br/>");
 		document.write("参数为1:"+new Boolean(1)+"<br/>");
	</script>

16、算数Math

Math不能创建对象,直接使用其属性和方法,进行算数任务。

Math有8中属性,自然对数的底数E,圆周率PI,ln2,以及其他的算数中经常用到的常量

<script type="text/javascript">
	document.write("e:"+Math.E+"<br/>");
	document.write("PI:"+Math.PI+"<br/>");
	document.write("ln2:"+Math.LN2+"<br/>");
	document.write("ln10:"+Math.LN10+"<br/>");
	document.write("log2e:"+Math.LOG2E+"<br/>");
	document.write("log10e:"+Math.LOG10E+"<br/>");
	document.write("sqrt2:"+Math.SQRT2+"<br/>");
	document.write("根号2的倒数 sqrt1_2:"+Math.SQRT1_2+"<br/>");	
</script>
</head>
Math的方法有很多:

abs(x)绝对值

min(x,y)和max(x,y)大小值

pow(x,y) x的y次幂

exp(x) e的x次指数

random() 返回0-1的随机值

floor(x), ceil(x), round(x) 不同的舍入方法,都是返回整数

log(x) 求自然对数

sqrt(x) 求开根号

sin(x), cos(x), asin(x), acos(x)等

<script type="text/javascript">
	document.write("ceil(13.6):"+Math.ceil(13.6)+"<br/>");//14
	document.write("floor(13.6):"+Math.floor(13.6)+"<br/>");//13
	document.write("round(13.5):"+Math.round(13.5)+"<br/>");//14
	
</script>



你可能感兴趣的:(JavaScript基础)