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

时间：2021-11-29 20:28:11

        上一篇博客我们简单介绍了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基本语法的介绍你看懂了么?建议用手打一遍代码比较好！


         




        

        

标签：

相关文章