3.语句(与Java语句格式相同)
1.判断结构(if语句)
注:var x = 3;
if(x==4)//可以进行比较运算。
if(x=4)//可以进行赋值运算,而且可以同样进行判断。不报错。
因为在Js中0或者null就是false,
非0或者非null就是true(通常用1表示)。
所以if(x=4)结果是true;
可以通过if(4==y)来解决该问题。因为4=y不会进行判断,而是会报错。
2.选择结构(switch语句)
与java不同的是:因为弱类型,也可以对字符串进行选择。
3.循环结构(while语句,do…while语句,for语句)。
注:不同的是,没有了具体数据类型的限制,使用时要注意。
<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语法学习</title>
</head>
<body>
<script type="text/javascript">
//☆6.6 ?号表达式
var x=3;
document.write( x>2 ? "abc" : "nonono" );
document.write("<font color='red'> x="+ x +"</font>");
document.write("<hr/>");
//☆6.7 选择语句
if(3==x){ //if(x=3){//if(x-3){//if(x==3){
document.write("yes");
}else{
document.write("no");
}
document.write("<br/>");
x=3; //if- else if - else 多选一的结构
if(x>0){
document.write("a");
}else if(x>1){
document.write("b");
}else if(x>2){
document.write("c");
}else{
document.write("d");
}
/*
var x="aac";
switch(x){
case "aa":
alert("11"); break;
case "bb":
alert("22"); break;
case "abc":
alert("33"); break;
default:
alert("other");
}
*/
</script>
<script type="text/javascript">
//☆6.8 循环结构
//while语句
var x=1;
var sum=0;
document.write("<br/><font color='red'>");
while(x<=10){
sum +=x;
document.write("x=" + x + "<br/>");
x++;
}
document.write("</font>");
document.write("sum="+sum);
//do-while语句
x=1;
do{
document.write("x=" + x + "<br/>");
x++;
}while(x<=10);
document.write("<hr/>");
//for循环
for(var x=1;x<=10;x++){
document.write("x=" + x + "<br/>");
}
a:for(var x=0; x<3; x++){
for(var y=0; y<4; y++){
document.write(x+","+y+" ");
break a;//continue;//break;
}
document.write("<br/>");
}
</script>
</body>
</html></span>
利用JS在网页上输出九九乘法表
<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用JS输出9*9乘法表</title>
<style type="text/css">
table{
width=70%;
border: 1px solid blue;
border-collapse: collapse;
}
td{
border: 1px solid blue;
padding:5px;
}
</style>
</head>
<body>
<script type="text/javascript">
for(var x=1; x<=9; x++){
for(var y=1; y<=x; y++){
//3*4=12
document.write(x + "*" + y + "=" + x*y +" ");
}
document.write("<br/>");
}
document.write("<hr/>");
document.write("<table>");
for(var x=1; x<=9; x++){
document.write("<tr>");
for(var y=1; y<=x; y++){
//3*4=12
document.write("<td>"+x + "*" + y + "=" + x*y +"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html></span>
效果展示:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39DO0gjM1QTNxITOygDM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
4.函数
1.一般函数
格式:
function 函数名(形式参数...)
{
执行语句;
return 返回值;
}
函数是多条执行语句的封装体,只有被调用才会被运行。
注意:调用有参数的函数,但没有给其传值,函数一样可以运行,或者调用没有参数的函数,给其传值,该函数也一样运行。
说的简单点:只要写了函数名后面跟了一对小括号,该函数就会运行。那么传递的参数呢?
其实,在函数中有一个参数数组对象(arguments),该对象将传递的参数都封装在一个数组中。
例:
function demo()//定义函数。
{
alert(arguments.length);
}
demo(“hello”,123,true);//调用函数。
那么弹出的对话框结果是3,如果想得到所有的参数值,可以通过for循环遍历该数组。
for(var x=0; x<arguments.length; x++)
{
alert(arguments[x]);
}
为了增强阅读性,最好按照规范,按定义好的形式参数传递实际参数。
函数在调用时的其他写法:
var show = demo();//show变量接收demo函数的返回值。
var show = demo;//这种写法是可以的,意为show和demo代表同一个函数。
//那么该函数也可以通过show()的方式运行。
动态函数
通过Js的内置对象Function实现。
例:var demo = new Function(“x,y”,”alert(x+y);”);
demo(4,6);
如同:
function demo(x,y)
{
alert(x+y);
}
demo(4,6);
不同的是,动态函数,参数以及函数体都可以通过参数进行传递,可以动态指定。
匿名函数
格式:function(){...}
例:var demo = function(){...}
demo();
通常在定义事件属性的行为时较为常用。
例:
function test()
{
alert(“load ok”);
}
window.onload = test;
可以写成匿名函数的形式:
window.onload = function()
{
alert(“load ok”);
}
匿名函数就是一种简写格式。
<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语法学习--函数</title>
<script type="text/javascript">
/*
function aaa(){
alert("页面加载完毕!");
}
οnlοad=aaa;
*/
onload = function(){
alert("页面加载完毕!");
};
</script>
</head>
<body>
<!--
函数定义格式:
function 函数名(形式参数...)
{
执行语句;
return 返回值;
}
-->
<script type="text/javascript">
//※1 函数定义与调用
//空参、无返回值
function hello(){
alert("hello funcion...");
}//定义
//hello();//调用
//hello();//调用
//有参数、有返回值
function add(x, y){
return x+y;
}
var sum = add(12,23);
document.write( "sum="+ sum );
//1+2+...+n
function sum2( n ){
var s=0;
for(var i=1;i<=n;i++){
s +=i;
}
return s;
}
document.write( "sum2="+ sum2(10) );
</script>
<script type="text/javascript">
//※2 函数的一些细节1: js中的函数是没有重载的,参数是按顺序自动匹配,并且参数是由函数内置的arguments数组来接收值的
function show(x,y){
alert(x+ ":" + y);
}
//show(1,2);// 1:2
//show(1);// 1:undefined
//show();//undefined:undefined
//show(1,2,3);// 1:2
//有关函数参数的内部原理: 函数内部通过“内置的arguments数组”来接收外面传入的参数,如果函数声明了参数,那么会按顺序依次把arguments中的元素赋给这些参数
document.write("<hr/>");
function aa(){
for(var i=0; i<arguments.length;i++){
document.write(arguments[i]+" ");
}
document.write("<br/>");
}
aa();
aa(1);
aa(1,3);
aa(1,3,5);
</script>
<script type="text/javascript">
//※2 函数的一些细节2: 函数在内存中的存储形式:栈区中存入函数名(引用),所对应的function对象存放在堆内存中。 如果进行了引用赋值,那么多个引用都同样指向该function对象
function fun(){
return 100;
}
var x = fun();
//alert("x:"+ x );
var y= fun; //函数引用fun和y捆绑,等价
//alert( y ); //alert( fun );
//alert("y:"+ y() );
</script>
动态函数功能:<input type="text" οnblur="ac();">
<script type="text/javascript">
//动态函数---思想,类似java中的类反射
var ssum = new Function("x,y", "var sum; sum=x+y; return sum;");
var s = ssum(100,200);
//alert("s="+ s);
/*
function ssum(x,y){
var sum; sum=x+y; return sum;
}
*/
function ac(){
var obj = document.getElementsByTagName("input")[0];
var text = obj.value;
//alert(text);
var dd = new Function("x,y", text);
var s = dd(10,20);
alert("s="+ s);
}
</script>
<script type="text/javascript">
//匿名函数
var xyz = function(a,b){
return a+b;
};
alert( xyz(12,21) );
function aa(){
alert("aaa...");
}
</script>
<input type="button" value="别点我" οnclick="aa();">
</body>
</html>
</span>
5.数组
方便操作多元素的容器,可以对其中的元素进行编号。
特点:可以存任意元素,长度是可变的。
格式:
var arr = new Array();
arr[0] = “hello”;
arr[1] = 123;
var arr = [‘hello’,123,true,”abc”];
通过遍历即可对数组进行基本操作。
for(var x=0; x<arr.length; x++)
{
alert(arr[x]);
}
<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语法学习--数组</title>
</head>
<body>
<script type="text/javascript">
//7 数组
//var ar[] = {1,3,5};//错错错--这是java
var ar=[1,3,5,8]; //这里不能用“var[] ar”的方式声明数组,因为“[]”是代表数组类型,而js是弱类型,所有数据类型都是var
//alert( typeof(ar) );
//alert(ar.length); //4
for(var i=0;i<ar.length;i++){
document.write(ar[i]+" ");
}//1 3 5 8
document.write("<br/>");
ar[2] = 100;
for(var i=0;i<ar.length;i++){
document.write(ar[i]+" ");
} //1 3 100 8
document.write("<br/>");
ar[5] = 100;
for(var i=0;i<ar.length;i++){
document.write(ar[i]+" ");
} //1 3 100 8 undefined 100
//js数组知识点1: 长度可以是任意的
document.write("<br/>");
ar[1]=true;//"abc";
for(var i=0;i<ar.length;i++){
document.write(ar[i]+" ");
} //1 3 100 8 undefined 100
//js数组知识点2: 元素的数据类型也可以是任意的
//总之,js中没有集合,数组就是集合----js中的数组 等于java中的数组+集合
</script>
<script type="text/javascript">
//使用Array对象定义数组
var ar2 = new Array();//相当于: var ars=[];
ar2[0]=2;
ar2[3]=20;
document.write("<br/>");
for(var i=0;i<ar2.length;i++){
document.write(ar2[i]+" ");
}//2 undefined undefined 20
var ar3 = new Array(4); //一个参数代表的是长度。本例是声明初始长度为4的数组
document.write("<br/>");
for(var i=0;i<ar3.length;i++){
document.write(ar3[i]+" ");
}//
var ar4 = new Array(4,5,6);//如果参数个数大于1,则代表的是元素
document.write("<br/>");
for(var i=0;i<ar4.length;i++){
document.write(ar4[i]+" ");
}
</script>
<script type="text/javascript">
var arr=[];//声明一个空数组, 注意不能声明成:var arr;
//var arr;//要声明成上面的方式,才是数组
arr[0] = 1;
arr[1] = 2;
//alert(arr);
//两维数组
arr[0] = [1,3,5];//等价于: arr[0] = new Array(1,3,5);
arr[1] = [2,4,6,99];
//alert(arr[0]);//1,3,5
document.write("<hr/>");
for(var i=0;i<arr.length;i++){
for(var j=0; j<arr[i].length; j++){
document.write(arr[i][j]+" ");
}
document.write("<br/>");
}
</script>
</body>
</html></span>