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