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

来源：互联网发布：windows 预览计划编辑：程序博客网时间：2024/05/01 10:44

上一篇博客我们简单介绍了JavaScript，并介绍了JavaScript的特点及用途。现在我来说一说初次认识JavaScript程序及JavaScript的基本语法。主要说的方面有1：注释;2：JS程序片段的存在方式; 3：JavaScript的变量; 4：JavaScript的基本数据类型; 5：JS运算符; 6：JS的循环语句;7：JS的判断语句;8：JS的swicth...case语句;10：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基本语法的介绍你看懂了么?建议用手打一遍代码比较好！

0 0