首页 > 设计 > WEB开发 > 正文

初学JavaScript的基本语法介绍(二)

2019-11-02 18:31:06
字体:
来源:转载
供稿:网友

        上一篇博客我们简单介绍了javaScript,并介绍了Javascript的特点及用途。现在我来说一说初次认识JavaScript程序及JavaScript的基本语法。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>初识JavaScript</title><script type="text/javascript">	alert("JavaScript,你好!");	document.write("JavaScript,你好!");</script></head><body></body></html>

        上面就是一个简单的JavaScript的程序,它是嵌入在html页面内,一般嵌入在HTML页面内的JS程序片段存在两个地方:1在<head></head>标签内;2在<body></body>标签内;3在<html></html>标签内。JS程序一般以两种方式存在:1是嵌入在html页面中;2是以专门的.js文件存在。上面的JS程序是以<script type="text/javascript"></script>标签开始的。其JS程序片段都在这个标签里面。alert(“JavaScript, 你好!”)是在web浏览器页面弹出window对话框显示JavaScript,你好!。document.write(“JavaScript,你好!”)是在浏览器web页面中输出JavaScript,你好!。这就是一个简简单单的JS程序。

        下面我们来说一说JS的基本语法。

         1:注释://XXXXX单行注释;/*  XXXXXX */多行注释。它和Java的注释一样。代码如下。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript注释</title><script type="text/javascript">	document.write("下面是JS的单行注释<br/>");	//alert("我被注释掉了");	document.write("A<br/>");	//document.write("A1");	document.write("下面是JS的多行注释<br/>");	/*	document.write("B");	document.write("B1");	*/	document.write("B2<br/>");</script></head><body></body></html>

         2:JS程序片段的存在方式:1是嵌入在HTML页面内;2是由引入专门的.JS文件,其中.js文件是专门用来存储JS程序片段的。上面的JS注释就很好地演示了在HTML页面内部的JS程序片段。下面的代码是用来说明第二种情况。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS外部引入</title><script type="text/javascript" src="MyJS.js" charset="GBK"></script></head><body></body></html>MyJS.js文件,默认GBK字符集
alert("JavaScript,你好!");

         3:JavaScript的变量,由于JS是弱类型语言,故其用var来统一定义变量(数值型,字符型,数组型)。程序如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript的类型</title><script type="text/javascript">	var num = 1;	document.write("数值类型变量:num="+num+"<br/>");	var str = "JavaScript,你好!";	document.write("字符串类型变量:str="+str+"<br/>");</script></head><body></body></html>

       4:JavaScript的基本数据类型。基本数值类型有5类:数值类型,字符串类型,布尔类型,未定义类型(undefined),置空类型(null)。程序如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript基本类型</title><script type="text/javascript">	var num = 1;	document.write("整型:num="+num+"<br/>");	var fnum = 3.14;	document.write("浮点类型:fnum="+fnum+"<br/>");	var str="JavaScript,你好!";	document.write("字符串类型:str="+str+"<br/>");	var boolean1 = true;	document.write("boolean类型:boolean1="+boolean1+"<br/>");	var no1;	document.write("未定义:no1="+no1+"<br/>");	var nu1 = null;	document.write("置空:nu1="+nu1+"<br/>");	var nu2 = "";	document.write("空值:nu2="+nu2+"<br/>");</script></head><body>	</body></html>

       5:JS运算符。JS的运算符和Java的运算符几乎一样。JS运算符有6大类:算术运算符,比较运算符,逻辑运算符,赋值运算符,连接运算符,三目运算符。具体代码如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS运算符</title><script type="text/javascript">	//与Java语言的类似	//算术运算符	var num1 = 2, num2 = 1;	document.write("num1+num2="+(num1+num2)+"<br/>");	document.write("num1-num2="+(num1-num2)+"<br/>");	document.write("num1*num2="+(num1*num2)+"<br/>");	document.write("num1/num2="+(num1/num2)+"<br/>");	document.write("num1%num2="+(num1%num2)+"<br/>");	document.write("num1++="+(num1++)+"<br/>");	document.write("--num2="+(--num2)+"<br/>");	document.write("===========================<br/>");		//赋值运算符	var n1 = 6, n2 = 1;	document.write("n1+=n2, n1="+(n1+=n2)+"<br/>");	var n1 = 6, n2 = 1;	document.write("n1-=n2, n1="+(n1-=n2)+"<br/>");	document.write("===========================<br/>");		//比较运算符	var x = 10, y = 4;	document.write("x="+x+",y="+y+"<br/>");	document.write("x==10结果为"+(x==10)+"<br/>");		document.write("x=='10'结果为"+(x=='10')+"<br/>");	document.write("x===10结果为"+(x===10)+"<br/>");	document.write("x==='10'结果为"+(x==='10')+"<br/>");	document.write("x!=10结果为"+(x!=10)+"<br/>");	document.write("x!='10'结果为"+(x!='10')+"<br/>");	document.write("x!==10结果为"+(x!==10)+"<br/>");	document.write("x!=='10'结果为"+(x!=='10')+"<br/>");	document.write("x>y结果为"+(x > y)+"<br/>");	document.write("x<y结果为"+(x < y)+"<br/>");	document.write("x>=y结果为"+(x>=y)+"<br/>");	document.write("x<=y结果为"+(x<=y)+"<br/>");	document.write("===========================<br/>");		//逻辑运算符	var x = 10, y = 4;	document.write("x="+x+",y="+y+"<br/>");	document.write("(x<11&&y>4),结果为:"+(x<11&&y>5)+"<br/>");	document.write("(x<11||y>4),结果为:"+(x<11||y>5)+"<br/>");	document.write("!(x<11),结果为:"+!(x<11)+"<br/>");	document.write("===========================<br/>");		//三目元算符	var x = 10, y = 4;	document.write("(x>y?x:y)结果为"+(x>y?x:y)+"<br>");	document.write("===========================<br/>");		//字符串连接	var str1 = 2017, str2 = '0208';	document.write("str+str2="+(str1+str2)+"<br/>");</script></head><body></body></html>

        6:JS的循环语句。和Java类似有for循环,for...each循环:到数组时再介绍, while循环,do...while循环。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>循环语句</title></head><body>	<script type="text/javascript">		var i = 0;		while(i < 10){			document.write("i="+i+"<br/>");			i++;		}		for(var i = 0; i < 10; i++){			document.write("i="+i+"<br/>");		}		var j = 0;		do{			document.write("j="+j+"<br/>");			j++;		}while(j<10)	</script></body></html>

        7:JS的判断语句。和Java类似,if...else...语句。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>if...else语句</title></head><body>	<script type="text/javascript">		var num = 10;		document.write("num="+num+"<br/>");		if(num > 9){			document.write("num大于9<br/>");		}else{			document.write("num小于9<br/>");		}		</script></body></html>

         8:JS的swicth...case语句。和JAVA类似。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>switch语句</title></head><body>	<script type="text/javascript">		var day = 3;		switch(day){			case 1:alert("周一"); break;			case 2:alert("周二"); break;			case 3:alert("周三"); break;			case 4:alert("周四"); break;			case 5:alert("周五"); break;			case 6:alert("周六"); break;			case 7:alert("周日"); break;			default :alert("输入错误!");break;		}	</script></body></html>

        9:break语句和continue语句。break跳出当前循环,执行下面的语句;continue跳出当前循环,执行下一次循环。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>break VS continue</title></head><body>	<script type="text/javascript">		document.write("break:"+"<br/>");		for(var num = 0; num < 10; num++){			if(num==6){				break;			}			document.write("num="+num+"<br/>");		}		document.write("continue:"+"<br/>");		for(var num1 = 0; num1 < 10; num1++){			if(num1==6){				continue;			}			document.write("num1="+num1+"<br/>");		}		</script></body></html>

         10:JavaScript函数。与Java类似,有不带参数函数,有带一个参数函数,有带多个参数函数。但因为其为弱类型,故不需要再函数参数列表声明参数类型,因为JS的参数类型都是var来表示的。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript函数</title><script type="text/javascript">	function fun1(){		alert("我的第一个方法!");	}	function fun2(f1){		alert(f1);	}	function fun3(f1, f2){		alert(f1+" "+f2);	}		function fun4(f1, f2){		return f1+" "+f2;	}	fun1();	fun2("我的");	fun3("我的","第三个程序");	var result = fun4("我的","第四个程序");	alert(result);</script></head><body></body></html>         上面对JS基本语法的介绍你看懂了么?建议用手打一遍代码比较好!

         

        

        


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表