JavaScript学习总结(二)
在学习完了上一节的内容之后,我们接下来讲的是循环语句以及后面函数的一些问题。
循环语句
- while循环:与java中的while循环无区别
- do-while循环:与java中的do-while循环无区别
- for循环:与java中的for循环无区别
格式:
for(初始化语句; 判断的条件 ; 循环后的语句){
循环体语句;
}
下面我们以一个很常见很简单的栗子结束这一小部分:
打印九九乘法表:
<script type="text/javascript">
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+(j*i)+"  ");
}
document.write("<br/>");
}
</script>
for-in语句
- 格式:
for(var 变量名 in 遍历的目标){
}
- for-in语句的作用:
1. 可以用于遍历数组的元素。 注意: 使用for-in语句遍历数组元素的时候遍历出来是数组的下标。
<script type="text/javascript">
var arr = [12,13,16,18,22];
for(var item in arr){
document.write(item+",");//输出的结果是0,1,2,3,4,
}
</script>
//正确的使用方法如下:
<script type="text/javascript">
var arr = [12,13,16,18,22];
for(var item in arr){
document.write(arr[item]+",");//输出的结果是12,13,16,18,22,
}
</script>
//普通的遍历方式(使用for循环)
<script type="text/javascript">
var arr = [11,12,3,43,5];
for(int i=0;i<arr.length;i++){
document.write(arr[i]+",");
}
</script>
2. 可以用于遍历对象的所有属性数据。 注意: 使用for-in语句遍历对象的属性的时候,遍历出来的是对象的属性名。
<script type="text/javascript">
function Person(id,name){
this.id = id;
this.name = name;
}
var p = new Person(123,"大熊");
for(var person in p){
document.write(p[person]+",");
}
</script>
上面使用的function用法不止这一个,其他用法我们后面会介绍。
with语句
作用:使用了with语句后,在存取对象属性和调用方法时就不用重复指定对象
格式:
with(对象){
}
具体用法如下:
<script type="text/javascript">
with(document){
write("Hello world"+"<br/>");
write("Hello world"+"<br/>");
write("Hello world"+"<br/>");
}
</script>
//自定义的对象同样可以使用
<script type="text/javascript">
function Person(id,name){
this.id = id;
this.name = name;
}
var p = new Person(123,"大熊");
with(p){
document.write("ID号:"+id);//输出id123
document.write(" 姓名:"+name);//输出姓名:大熊
}
</script>
函数
- 函数的定义格式:
function 函数名(形参列表){
函数体 ;
}
看下面这个函数:
<script type="text/javascript">
function add(var a , var b){
var sum = a + b;
document.write("结果:" + sum);
}
//调用
add(2,1);
</script>
事实上,这样子调用是会出现问题的,IDE一般不会提示错误,而浏览器则会提示你var错误。也就是说,在定义形参的时候,不需要使用var关键字,直接写参数名称即可
<script type="text/javascript">
function add(a , b){
var sum = a + b;
document.write("结果:" + sum);
}
//调用
add(2,1);//输出结果为3
</script>
还有一些重要的注意事项,我们做出如下总结:
- 在 javascript中函数 定义形参时是不能使用var关键字声明变量的
- 在javascript中 的函数是没有返回值类型的,如果函数需要返回数据给调用者,直接返回即可,如果不需要返回则不返回,如果函数没有返回,而用变量接收了,则变量显示为undefined
- 在 javascript中是没有函数重载的概念的,后定义的同名函数会直接覆盖前面定义同名函数
- 在javascript中任何的函数内部都隐式的维护了一个arguments(数组)的对象,给函数传递数据的时候,是会先传递到arguments对象中,然后再由arguments数组对象分配数据给形参的
<script type="text/javascript">
function add(){
document.write("数组长度:"+arguments.length);
}
add(1,2,3);//输出的结果是3,如果传入的是两个参数,则输出的结果是2,以此类推
</script>
就是说,如果函数是有形参的,传入的实参无论是几个,都会先存在arguments数组中,然后再由该数组依次分配给各个形参。
最后,我们来一个例子作为函数部分的参考:
问题:在网页中输入一个月份(1-12),网页根据月份弹出对应月份的天数
</head>
月份:<input id="month" type="text" /><input type="button" value="查询" onClick="showDay()" />
<body>
<script type="text/javascript">
function showDay(){
//0.找到对应的月份标签对象
var inputMonth = document.getElementById("month");
var month = inputMonth.value;
//alert(inputMonth.value);
//1.用获取到的值弹出对应的天数
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
alert("本月是31天!");
}else if(month==4||month==6||month==9||month==11){
alert("本月是30天!");
}else if(month==2){
alert("闰年2月29天,非闰年28天");
}else{
alert("没有该月份(月份应为1-12)");
}
}
</script>
</body>