Home > List of blog posts > JavaScript 基础

Blogger Information

Blog 5

fans 0

comment 0

visits 3920

Special Recommendation

More>

Related recommendations

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字！

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

JavaScript 基础

2020-06-10 15:09:03

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial