首页 > 博客列表 > JavaScript 基础

博主信息

博文 5

粉丝 0

访问量 4927

专题推荐

更多>

JavaScript 基础

循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

switch

<script type="text/JavaScript">
    var myweek =1;//myweek表示星期几变量
    switch(myweek)
    {
        case 1:
        case 2:
        document.write("学习理念知识");
        break;
        case 3:
        case 4:
        document.write("到企业实践");
        break;
        case 5:
        document.write("总结经验");
        break;
        case 6:
        case 7:
        document.write("周六、日休息和娱乐");
        default:
        document.write("想干点儿啥就干点儿啥")
    }
</script>

for

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

var mymoney,sum=0;//mymoney变量存放不同面值，sum总计
for(mymoney=1;mymoney<=10;mymoney++)
{
    sum= sum + mymoney;
}
document.write("sum合计:"+sum);
// 输出结果为  "sum合计:55"

while 循环遍历

和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。

while语句结构：

while(判断条件)
{
    循环语句
}

使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //条件判断
{
    document.write("取出第"+num+"个球<br />");
    num=num+1;  //条件值更新
}
</script>

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>

退出循环break

在while、for、do…while、while循环中使用break语句退出当前循环，直接执行后面的代码。

格式如下：

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  {break;}
  循环代码
}

当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出10个数，如果数值为5，就停止输出。

<script type="text/javascript">
let num;
for(num=1;num<=10;num++){
    if(num == 5){
        break;
    }
    document.write("数值为: "+num+"</br>");
}
</script>

考试成绩输出，如果成绩及格继续输出下个成绩，如果成绩不及格，退出并且后面成绩不输出，我们使用break语句，退出循环。

<script type="text/JavaScript">
var mynum =new Array(70,80,66,90,50,100,89);//定义数组mynum并赋值
var i=0;
while(i<mynum.length)
{
  if(mynum[i]<60)
   {
    document.write("成绩"+mynum[i]+"不及格，不用循环了"+"<br>");
    break;
   }
  document.write("成绩:"+mynum[i]+"及格，继续循环"+"<br>");
  i=i+1;
}
</script>

继续循环continue

continue的作用是仅仅跳过本次循环，而整个循环体继续执行。

语句结构：

for(初始条件;判断条件;循环后条件值更新)
{
   if(特殊情况)
   { continue; }
   循环代码
}

考试成绩输出，如果成绩及格继续输出下个成绩，如果成绩不及格，则不输出该成绩，我们使用continue语句完成

<script type="text/JavaScript">
 var mynum =new Array(70,80,66,90,50,100,89);//定义数组mynum并赋值
 var i;
 for(i=0;i<mynum.length;i++)
 {
      if(mynum[i]<60)
    {
    document.write("成绩不及格，不输出！"+"<br>");
    continue;
    }
    document.write("成绩:"+mynum[i]+"及格，输出!"+"<br>");
}
</script>

在一个大学的编程选修课班里，我们得到了一组参加该班级的学生数据，分别是姓名、性别、年龄和年级.

学生信息如下：

    ('小A','女',21,'大一'),  ('小B','男',23,'大三'),
    ('小C','男',24,'大四'),  ('小D','女',21,'大一'),
    ('小E','女',22,'大四'),  ('小F','男',21,'大一'),
    ('小G','女',22,'大二'),  ('小H','女',20,'大三'),
    ('小I','女',20,'大一'),  ('小J','男',20,'大三')

接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的名字哦。

<script type="text/javascript">
let infos = new Array;
infos[0] = ['小A','女',21,'大一'];  
infos[1] = ['小B','男',23,'大三'];
infos[2] = ['小C','男',24,'大四'];
infos[3] = ['小D','女',21,'大一'];
infos[4] = ['小E','女',22,'大四'];
infos[5] = ['小F','男',21,'大一'];
infos[6] = ['小G','女',22,'大二'];
infos[7] = ['小H','女',20,'大三'];
infos[8] = ['小I','女',20,'大一'];
infos[9] = ['小J','男',20,'大三'];
let newArr = new Array;
for(let i=0;i<infos.length;i++){
    if(infos[i][3] == '大一'){
        newArr.push(infos[i]);
    }
}
let girls = new Array;
 for(t=0;t<newArr.length;t++){
    if(newArr[t][1] == '女'){
        girls.push(newArr[t]);   
    }
 }
</script>

函数

定义一个函数

function  函数名( )
{
    函数体;
}

function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。

函数调用

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

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

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

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

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

有参数的函数

上面add函数不能实现任意指定两数相加。其实，定义函数还可以如下格式：

function 函数名(参数1,参数2)
{
    函数代码
}

注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。

按照这个格式，函数实现任意两个数的和应该写成：

function add(x,y)
{
   sum = x + y;
   document.write(sum);
}

x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。

例如，计算5、8、3/7、1、4两组三个数的和。

<script type="text/JavaScript">
    function add(x,y,z)     
    {
       sum = x + y +z;
       document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
    }
    add(5,8,3);
    add(7,1,4);
</script>

函数的返回值

上面函数中，通过”document.write”把结果输出来，如果想对函数的结果进行处理怎么办呢？我们只要把”document.write(sum)”这行改成如下代码

<script type="text/JavaScript">
    function add(x,y,z)     
    {
       sum = x + y +z;
       return sum;
    }
    console.log(add(5,8,3));
    console.log(add(7,1,4));
</script>

函数实例

<script type="text/javascript">
//定义函数
function add(x,y){
    return x-y;
}
//函数体，判断两个整数比较的三种情况
function compare(m,n){
    let res = add(m,n);
    if(res == 0){
        return "一样大";
    }else if(res > 0){
        return m;
    }else{
        return n;
    }
}
let show1 = compare(5,4);
let show2 = compare(6,3);
//调用函数，实现下面两组数中，返回较大值。
  document.write(" 5 和 4 的较大值是:"+show1+"<br>");
  document.write(" 6 和 3 的较大值是:"+show2); 
</script>

事件

鼠标点击事件

onclick=”funcName()”

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：

<html>
<head>
   <script type="text/javascript">
      function add2(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="点击提交" onclick="add2()" />
   </form>
</body>
</html>

鼠标经过事件

onmouseover=”funcName()”

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

现实鼠标经过”确定”按钮时，触发onmouseover事件，调用函数info()，弹出消息框，代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 鼠标经过事件 </title>
    <script type="text/javascript">
        function message() {
            let info = document.getElementById("password").value;
            if (isEmpty(info)) {
                confirm("请输入密码后，再单击确定!");
            }
        }
        /**
         * 判断变量是否为空，
         * @param  {[type]}  param 变量
         * @return {Boolean}      为空返回true，否则返回false。
         */
        function isEmpty(param) {
            if (param) {
                var param_type = typeof (param);
                if (param_type == 'object') {
                    //要判断的是【对象】或【数组】或【null】等
                    if (typeof (param.length) == 'undefined') {
                        if (JSON.stringify(param) == "{}") {
                            return true;//空值，空对象
                        }
                    } else if (param.length == 0) {
                        return true;//空值，空数组
                    }
                } else if (param_type == 'string') {
                    //如果要过滤空格等字符
                    var new_param = param.trim();
                    if (new_param.length == 0) {
                        //空值，例如:带有空格的字符串" "。
                        return true;
                    }
                } else if (param_type == 'boolean') {
                    if (!param) {
                        return true;
                    }
                } else if (param_type == 'number') {
                    if (!param) {
                        return true;
                    }
                }
                return false;//非空值
            } else {
                //空值,例如：
                //(1)null
                //(2)可能使用了js的内置的名称，例如：var name=[],这个打印类型是字符串类型。
                //(3)空字符串''、""。
                //(4)数字0、00等，如果可以只输入0，则需要另外判断。
                return true;
            }
        }
    </script>
</head>
<body>
    <form>
        密码:<input id="password" name="password" type="password">
        <input name="确定" type="button" value="确定" onmouseover="message()" />
    </form>
</body>
</html>

鼠标移开事件

onmouseout = funcName()

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

当把鼠标移动到”登录”按钮上，然后再移开时，触发onmouseout事件，调用函数message()，代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 鼠标移出事件 </title>
    <script type="text/javascript">
        function message() {
            let info = document.getElementById("password").value;
            console.log(123);
            console.log(info.length);
            if (info.length < 1) {
                confirm("请输入密码后，再单击确定!");
            }
        }
    </script>
</head>
<body>
    <form>
        密码:<input id="password" name="password" type="password">
        <input name="确定" type="button" value="确定" onmouseout=message() />
    </form>
</body>
</html>

获取焦点事件

onfocus=funcName()

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取焦点事件</title>
    <script type="text/javascript">
        function message(){
            console.log("在此输入姓名!");
        }
    </script>
</head>
<body>
    <form>
        姓名: <input type="text" class="username" value="请输入姓名" onfocus=message()>
    </form>
</body>
</html>

失去焦点事件

onblur = funcName()

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>失去焦点事件</title>
    <script type="text/javascript">
        function message(){
            let name = document.getElementsByClassName("username")[0].value;
            if(name.length <1){
                alert("姓名不能为空!");
            }
        }
    </script>
</head>
<body>
    <form>
        姓名: <input type="text" class="username" placeholder="请输入姓名" onblur=message()>
    </form>
</body>
</html>

内容选中事件

onselect = funcName()

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

如下代码,当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 内容选中事件 </title>
    <script type="text/javascript">
        function message() {
            alert("您触发了选中事件！");
        }
    </script>
</head>
<body>
    <form>
        个人简介：<br>
        <textarea onselect=message() name="summary" cols="60" rows="5">请写入个人简介，不少于200字！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

JavaScript 基础

2020-06-10 15:09:03