慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

weixin_慕先生7496245
编程练习
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1；取值：var = document.getElementById(“id”）.value；
任务
第一步：创建构建运算函数count()。
第二步：获取两个输入框中的值和获取选择框的值。
```
提示：document.getElementById( id名 ).value 获取或设置 id名的值。
```
第三步：获取通过下拉框来选择的值来改变加减乘除的运算法则。
```
提示：使用switch判断运算法则。
```
第四步：通过 = 按钮来调用创建的函数，得到结果。
注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。

<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
var x,y,z,b
//获取第一个输入框的值
var x=document.getElementById("txt1").value;
//获取第二个输入框的值
var y=document.getElementById("txt2").value;
//获取选择框的值
var b=document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
switch(b){
case"+":
z=parseFloat(x)+parseFloat(y);
break;
case"-":
z=parseFloat(x)-parseFloat(y);
break;
case"*":
z=parseFloat(x)*parseFloat(y);
break;
case"/":
z=parseFloat(x)/parseFloat(y);
break;
}
//设置结果输入框的值
document.getElementById("fruit").value=z;
}
</script>
</head>
<body>
<input type="text" id="txt1" />
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txt2" />
<input type="button" value=" = " onclick="count()"/> 
<input type="text" id="fruit" />
</body>
</html>
查看全部

0 采集收起来源：编程练习
2019-08-21
weixin_慕先生7496245

加载事件（onload）
事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。
2. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。
运行结果：

查看全部

0 采集收起来源：加载事件（onload）
2019-08-21
weixin_慕先生7496245

光标聚焦事件（onfocus）
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。
运行结果：

查看全部

0 采集收起来源：光标聚焦事件（onfocus）
2019-08-21
weixin_慕先生7496245

鼠标单击事件( onclick ）
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
注意: 在网页中，如使用事件，就在该元素中设置事件属性。

查看全部

0 采集收起来源：鼠标单击事件( onclick ）
2019-08-21
weixin_慕先生7496245

什么是事件
事件是可以被 JavaScript 侦测到的行为
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
主要事件表:

查看全部

0 采集收起来源：什么是事件
2019-08-21
weixin_慕先生7496245
返回值的函数
思考:上一节函数中，通过"document.write"把结果输出来，如果想对函数的结果进行处理怎么办呢？
我们只要把"document.write(sum)"这行改成如下代码：
```
function add2(x,y) {    sum = x + y;    return sum; //返回函数值,return后面的值叫做返回值。 }
```
还可以通过变量存储调用函数的返回值，代码如下:
```
result = add2(3,4);//语句执行后,result变量中的值为7。
```
注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。
查看全部

0 采集收起来源：返回值的函数
2019-08-21

weixin_慕先生7496245

函数调用

函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。

第一种情况:在<script>标签内调用。

 <script type="text/javascript">     function add2()     {          sum = 1 + 1;          alert(sum);     }   add2();//调用函数，直接写函数名。 </SCRIPT>

第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

<html>
<head><script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件，直接写函数名</form>
</body>
</html>

查看全部

0 采集收起来源：函数调用

2019-08-21

weixin_慕先生7496245
什么是函数
函数的作用，可以写一次代码，然后反复地重用这个代码。
如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。
使用函数完成:
```
function add2(a,b){
sum = a + b;
 alert(sum);
} //  只需写一次就可以add2(3,2);
add2(7,8);
....  //只需调用函数就可以
```
查看全部

0 采集收起来源：什么是函数
2019-08-21
weixin_慕先生7496245
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程控制语句</title>
<script type="text/javascript">
var infor= [['小A','女',21,'大一'],
['小B','男',23,'大三'],
['小C','男',24,'大四'],
['小D','女',21,'大一'],
['小E','女',22,'大四'],
['小F','男',21,'大一'],
['小G','女',22,'大二'],
['小H','女',20,'大三'],
['小I','女',20,'大一'],
['小J','男',20,'大三']]
//第一步把之前的数据写成一个数组的形式,定义变量为 infos
var arr=Array();
var n=0;
document.write("第一次筛选："+"<br>")
for(var i=0;i<infor.length;i++){
if(infor[i][3]=='大一'){
document.write(infor[i]+"<br>");
arr[n]=infor[i];
n++;
}//第一次筛选，找出都是大一的信息
}
document.write("第二次筛选："+"<br>")
for(var n=0;n<arr.length;n++){
if(arr[n][1]=='女'){
document.write(arr[n][0]+"<br>")
}
}


//第二次筛选，找出都是女生的信息




</script>
</head>
<body>
</body>
</html>
在一个大学的编程选修课班里，我们得到了一组参加该班级的学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
学生信息如下：
    ('小A','女',21,'大一'), ('小B','男',23,'大三'),
    ('小C','男',24,'大四'),  ('小D','女',21,'大一'),
    ('小E','女',22,'大四'), ('小F','男',21,'大一'),
    ('小G','女',22,'大二'), ('小H','女',20,'大三'),
    ('小I','女',20,'大一'), ('小J','男',20,'大三')
任务
第一步：把这些数据组成一个数组，方便我们之后操作哦。
```
提示: 使用二维数组。
```
第二步：筛选数据吧，首先找出都是大一的所有信息 ;
第三步：最后再一次筛选上一步得到的数据，打印出都是女生的姓名 ;
```
提示: 可以用switch 或 if 语句进行筛选。
```
查看全部

0 采集收起来源：编程练习
2019-08-21
weixin_慕先生7496245
退出循环break
在while、for、do...while、while循环中使用break语句退出当前循环，直接执行后面的代码。
格式如下：
```
for(初始条件;判断条件;循环后条件值更新) {   if(特殊情况)   {break;}   循环代码 }
```
当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出10个数，如果数值为5，就停止输出。

执行结果:
注:当num=5的时候循环就会结束，不会输出后面循环的内容。
查看全部

0 采集收起来源：退出循环break
2019-08-21
weixin_慕先生7496245
来来回回(Do...while循环)
do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do...while语句结构：
```
do {     循环语句  } while(判断条件)
```
我们试着输出5个数字。
```
<script type="text/javascript">    num= 1;    do    {      document.write("数值为:" +  num+"<br />");      num++; //更新条件    }    while (num<=5) </script>
```
执行结果:
为什么呢?我们来看下执行思路：
查看全部

0 采集收起来源：来来回回(Do...while循环)
2019-08-21
weixin_慕先生7496245
重复重复（for循环）
很多事情不只是做一次，要重复做。如打印10份试卷，每次打印一份，重复这个动作，直到打印完成。这些事情，我们使用循环语句来完成，循环语句，就是重复执行一段代码。
for语句结构：
```
for(初始化变量;循环条件;循环迭代) {          循环语句   }
```
假如，一个盒子里有6个球，我们每次取一个，重复从盒中取出球，直到球取完为止。
```
<script type="text/javascript"> var num=1; for (num=1;num<=6;num++)  //初始化值；循环条件；循环后条件值更新 {   document.write("取出第"+num+"个球<br />"); } </script>
```
结果:
执行思路:
查看全部

0 采集收起来源：重复重复（for循环）
2019-08-21
weixin_慕先生7496245
多重判断（if..else嵌套语句）
要在多组语句中选择一组来执行，使用if..else嵌套语句。
语法:
```
if(条件1) { 条件1成立时执行的代码} else  if(条件2) { 条件2成立时执行的代码} ... else  if(条件n) { 条件n成立时执行的代码} else { 条件1、2至n不成立时执行的代码}
```
假设数学考试，小明考了86分，给他做个评价，60分以下的不及格，60(包含60分)-75分为良好，75(包含75分)-85分为很好，85(包含85分)-100优秀。
代码表示如下:
结果:
查看全部

0 采集收起来源：多重判断（if..else嵌套语句）
2019-08-21
weixin_慕先生7496245
编程练习
任务
第一步：定义一个数组，存储要展示的图形。
```
提示:
   var  arr = ['*','##',"***","&&","****","##*"];
   arr[7] = "**";
```
第二步：预想一下arr 数组的长度是多少？
```
提示: 使用alert弹出数组的长度，看看是否跟自己的答案一样。
```
第三步：将数组内容输出，完成达到的效果。
```
 提示: 想在不同行显示不同数组内容，别忘记<br/>换行标签。
```
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数组</title>
<script type="text/javascript">
//创建数组
var arr=Array();
arr= ['*','##',"***","&&","****","##*"];

arr[7] = "**";

//显示数组长度
var len=document.write("arr.length");
alert("len");

//将数组内容输出，完成达到的效果。
document.write("arr[0]"+<br>,"arr[2]"+<br>,"arr[4]"+<br>,"arr[7]"+<br>);

</script>
</head>
<body>
</body>
</html>
查看全部

0 采集收起来源：编程练习
2019-08-21
weixin_慕先生7496245
二维数组
一维数组，我们看成一组盒子，每个盒子只能放一个内容。
```
一维数组的表示: myarray[ ]
```
二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。
```
二维数组的表示: myarray[ ][ ]
```
注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
1. 二维数组的定义方法一
```
var myarr=new Array();  //先声明一维  for(var i=0;i<2;i++){   //一维长度为2    myarr[i]=new Array();  //再声明二维     for(var j=0;j<3;j++){   //二维长度为3    myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j    }  }
```
注意: 关于for 循环语句，请看第四章4-5 。
将上面二维数组，用表格的方式表示:
2. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
说明: myarr[0][1] ,0 表示表的行，1表示表的列。
查看全部

0 采集收起来源：二维数组
2019-08-21