zoukankan      html  css  js  c++  java
  • 前端开发之JavaScript基础篇二

    主要内容:

      1、流程控制条件语句和switch语句

      2、for循环和while循环

      3、Break语句和Continue语句

      4、数组和数组常用方法

      5、函数

      6、对象

    一、流程控制条件语句和switch语句

      1、条件语句(用于基于不同的条件来执行不同的动作)  

    if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
    if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
    if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
    switch 语句 - 使用该语句来选择多个代码块之一来执行

      (1)if语句

        只有当指定条件为 true 时,该语句才会执行代码。

        语法如下:   

    if (condition)
    {
        当条件为 true 时执行的代码
    }

       注意:请使用小写的 if。使用大写字母(IF)会生成 JavaScript 错误!

        实例:  

    // 当年龄小于18岁时,禁止入内!
    if(age<18)
    {
        alert("你未满18周岁,不得入内!");
    }    

      (2)if...else 语句

        使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。

        语法:  

    if (condition)
    {
        当条件为 true 时执行的代码
    }
    else
    {
        当条件不为 true 时执行的代码
    }

        实例:  

    //当年龄小于18岁时,打印“禁止入内!”,否则,打印“允许入内!”
    
    if(age<18)
    {
        alert("禁止入内!");  
    }
    else
    {
        alert("允许入内!");
    }

      (3)if...else if...else语句

        使用if...else if...else语句来选择多个代码块之一来执行。

        语法:   

    if (condition1)
    {
        当条件 1 为 true 时执行的代码
    }
    else if (condition2)
    {
        当条件 2 为 true 时执行的代码
    }
    else
    {
      当条件 1 和 条件 2 都不为 true 时执行的代码
    }

          实例:

    // 如果年龄小于18岁,打印“未成年人!”;年龄大于18,小于40岁,打印“青年人!”;否则打印“中老年人!”
    if(age<18)
    {
         document.write("<b>未成年人!</b>")  
    }
    else if(age>=18 && age<=40)
    {
        document.write("<b>青年人!</b>");
    }
    else
    {
        document.write("<b>中老年人!</b>");
    }

     2、switch语句(switch 语句用于基于不同的条件来执行不同的动作)

      使用 switch 语句来选择要执行的多个代码块之一。

      语法: 

    switch(n)
    {
        case 1:    
            执行代码块 1    
            break;
        case 2:
            执行代码块 2
            break;
        default:
            执行与case 1和case 2 不同时的代码    
    }
    工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个
    case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。


    注意记得使用 break 来阻止代码自动地向下一个 case 运行。

      实例: 

    //显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等:
    var d=new Date().getDay(); 
    switch (d) 
    { 
      case 1:document.write("今天是星期一" );
      break; 
      case 2:document.write("今天是星期二" );
      break; 
      case 3:document.write("今天是星期三" ); 
      break; 
      case 4:document.write("今天是星期四" );
      break; 
      case 5:document.write("今天是星期五" );; 
      break; 
      default:
       document.write("哈哈!今天是周末(^-^)")
    }

      default关键词( default 关键词来规定匹配不存在时做的事情)

      实例: 

    //如果今天不是星期六或星期日,则会输出默认的消息:
    var d=new Date().getDay();
    switch (d)
    {
        case 6:x="今天是星期六";
        break;
        case 0:x="今天是星期日";
        break;
        default:
        x="期待周末";
    }
    document.getElementById("demo").innerHTML=x;

      几种特殊情况:

      (1)当两种情况相同时,switch 语句的使用,当两种情况相同时,可以只在第二种情况中写要执行的代码。

        案例如下:

    //测试 switch语句,当 两种情况相同时,比如下面的10或者11,都会走 alert("10或者11") 这里        
    function testSwich() {
          var number = document.getElementById("test").value;
          number=parseInt(number);
          switch (number){
                case 1: alert(1);
                break;
                case 10:
                case 11:alert("10或者11"); //number = 10 或者 = 11执行相同的操作
                break;
                default :alert("既不是1,10,11");
          }
    }
    View Code

      (2)忘记写 break 时的情况。当忘记写 break 时,代码将会执行后面所有 case 分支里面的代码,前面的 case 会跳过。

        案例如下:

    // 测试不使用break跳出循环
    function testSwichNotBreak() {
          var number = document.getElementById("test").value;
          number=parseInt(number);
          switch (number){
                case 1: document.write(number);
                case 2: document.write(number)
                case 3:document.write(number);
                case 4:document.write(number);
                case 5:document.write(number);
                default :document.write(number);
          }
    }
    View Code

    二、for循环和while循环

      1、while循环(在指定条件为真时循环执行代码块)

        while循环执行的流程分三个步骤:     

    (1)初始化循环变量
    (2)判断循环条件
    (3)更新循环变量

        语法:  

    while(条件)
    {
         需要执行的代码  
    }

          实例:

    var a = 1;
    while(a<=9)
    {
        if(a%3==0)
            {
              console.log(a);
            }
    }

      2、do...while循环

        do/while 循环是 while 循环的变体。在检查条件是否为真之前,该循环会执行一次代码块;然后如果条件为真的话,就会重复这个循环。

        语法:   

    do {
            需要执行的代码
        }while(条件);

        实例:   

    var i = 2do{
            console.log(i);
        }while(i<2);
    
    // 输出 2

      3、for循环(可以将代码块执行指定的次数)

        如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

        比如你想输出大于0,小于7的数:   

    // 如果不用循环的话
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    console.log(5);  
    console.log(6)
    // 使用for循环的话
    for(var i = 1;i<7;i++)
    {
        console.log(i);
    }

        for循环的语法

    for(语句1;语句2;语句3)
    {
        被执行的代码块
    }
    
    // 语句 1 在循环(代码块)开始前执行
    
    // 语句 2 定义运行循环(代码块)的条件
    
    // 语句 3 在循环(代码块)已被执行之后执行

        实例:  

    // 求出1到100以内的奇数
    for(var i=1;i<100;i++)
    {
        if(i%3==0)
        {
           console.log(i);
        }
    }

        练习1:输出正立的等边三角形

        //打印正立的等边三角形
        for( var n=1;n<=5;n++) // 行数
        {
            for( var i=5-n+1;i>=0;i--) // 空格
            {
                document.write("&nbsp");
            }
            for( var j=1;j<2*n;j++)  // 打印“*”号
            {
                document.write("*");
            }
            document.write("<br>");  // 换行
        }
    View Code

        练习2:输出倒立的等边的三角形

    // 方法一:
        for(k=5;k>0;k--) // 行数
        {
            for(i=0;i<5-k;i++)  // 空格
            {
                document.write("&nbsp");
            }
            for(j=2*k-1;j>0;j--)
            {
                document.write("#"); // 打印“*”号
            }
            document.write("<br>"); // 换行
        }
    
    // 方法二:
        for(var n=0;n<5;n++) // 行数
        {
             for(var i=0;i<n;i++)  // 空格
            {
                document.write("&nbsp");
            }
            for(var j=9-n;j>n;j--) // 打印“*”号
            {
                document.write("*");
            }
            document.write("<br>"); // 换行
    
        }
    View Code

    三、Break语句和Continue语句     

    break 语句用于跳出循环。
    
    continue 用于跳出循环后,会继续执行该循环之后的代码(如果有的话。)

      1、Break语句

      实例:

        for (i=0;i<10;i++)
    {
        if (i===3)
        {
            break;
        }
        document.write("The number is " + i + "<br>");
    } 
    
    // 输出:
    The number is 0
    The number is 1
    The number is 2

      2、Continue语句

      实例:

        for (i=0;i<10;i++)
    {
        if (i===3)
        {
            continue;
        }
        document.write("The number is " + i + "<br>");
    }
    // 输出:
    The number is 0
    The number is 1
    The number is 2
    The number is 4
    The number is 5
    The number is 6
    The number is 7
    The number is 8
    The number is 9

      3、javaScript标签(对 JavaScript 语句进行标记)

         如需标记JavaScript语句,请在语句之前加上冒号,如下所示:

    label:
    statements

        break 和 continue 语句仅仅是能够跳出代码块的语句。

        语法如下:   

    break labelname; 
     
    continue labelname;

        注意:

    continue 语句(带有或不带标签引用)只能用在循环中。
    
    break 语句(不带标签引用),只能用在循环或 switch 中。
    
    通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
    默认标签的情况(除了默认标签情况,其他时候必须要有名标签,否则会有惊喜)
    
    当 breakcontinue 同时用于循环时,没有加标签,此时默认标签为当前"循环"的代码块。
    
    当 break 用于 switch 时,默认标签为当前的 switch 代码块:  

      有名标签的实例:

    cars=["BMW","Volvo","Saab","Ford"];
    list:
    {
        document.write(cars[0] + "");
        document.write(cars[1] + "");
        document.write(cars[2] + "");
        break list;
        document.write(cars[3] + "");
        document.write(cars[4] + "");
        document.write(cars[5] + "");
    }

      上述break list;会跳出list的代码块。如果将break换成continue会有惊喜,违反了明确中的第二点,因为list只是个普通代码块,而不是循环。

      除非list写成如下形式 list: 

    for(var i=0; i<10; ++i)
    {
        continue list;
    }  

      有了标签,可以使用break和continue在多层循环的时候控制外层循环。

      例如下面:

    outerloop:
    for (var i = 0; i < 10; i++)
    {
        innerloop:
        for (var j = 0; j < 10; j++)
        {
            if (j > 3)
            {
                break;
            }
            if (i == 2)
            {
                break innerloop;
            }
            if (i == 4)
            {
                break outerloop;
            }
            document.write("i=" + i + " &nbsp j=" + j + "");
            document.write("<br><br>");
        }
    }
    View Code

    四、数组和数组常用方法

      类似python中的列表,js中数组如同一个容器,用来装东西。

      1、数组的创建方式

      (1)字面量方式创建(推荐方式)

    var colors = ['red','color','yellow'];
    console.log(colors);

        创建空数组 

    var emptyArray = [];

      (2)使用构造函数的方式创建,使用new关键字对构造函数进行创建

    var colors2 = new Array();
    var colors3 = new Array("red","green","blue");
    console.log(colors2,colors3);

      2、数组赋值

    var arr = [] ;
    arr[0] = 666;
    arr[1] = "hello";
    arr[2] = "world";
    arr[3] = "China";
    console.log(arr[1]);
    
    //通过下标取到相对应的值
    console.log[arr[2]]
    console.log(arr.length); // 4

      3、数组的遍历

    for(i=0;i<=arr.length;i++)
    {
        console.log(arr[i]);
    }

      4、数组的常用方法

      (1)数组的合并 

    var first = ['hello','everyone'];
    var last = ['I','am','congcong'];
    var FullStr = first.concat(last);
    console.log(FullStr);
    // 输出:
    ['hello','everyone','I','am','congcong']
    View Code

      (2)将数组转成字符串

    var score = [66,67,68,69,70];
    console.log(score);

      (3)toString()直接转换为字符串,每个元素之间用逗号隔开

    var str = score.toString();
    console.log(score);

      (4)join() 方法,将数组中的元素使用指定字符串(默认是逗号),连接起来,它会形成一个新的字符串。

    var arr = score.join("-");
    console.log(arr);

      (5)查找下标

        第一种:indexOf() 正向查找

    var index = score.indexOf(66);
    console.log(index); // 0 (索引从0开始)
    var index2 = score.indexOf(9);
    console.log(index2); //  -1,如果查找的数值不存在,返回-1

        第二种:lastIndexOf() 反向查找(得到的结果仍然是从左之右的顺序)

    var lastIndex = score.lastIndexOf(66);
     console.log(lastIndex); // 0

      (6)数组排序

    var names = ['frank','alen','blank','alm'];
    // reverse() 反转数组(将原数组里的元素位置倒置)
    var reverseName = names.reverse();
    console.log(reverseNames); //  ["alm", "blank", "alen", "frank"]
    console.log(names); // ["alm", "blank", "alen", "frank"]----> 特别注意:反转后,原来的数组也会被改变
    
    // sort() 按照26个字母排序
    var sortNames = names.sort();
    console.log(sortNames); // ["alen", "alm", "blank", "frank"]

      (7)从开头移除元素( shift() )和添加元素(unshift() )   

    // shift() 移除我们的第一个元素,返回的结果是移除的第一个元素
    特别注意:原来数组中的第一个元素也会被移除。
    firstName = sortNames.shift();
    console.log(firstName); // alen
    console.log(sortNames); //  ["alm", "blank", "frank"]
    
    // unshift() 向数组开头添加一个或多个元素,并返回新的长度
    var newNames = name.unshift("cc");
     console.log(names,newNames); // ["cc", "alm", "blank", "frank"]  4
    var newNames2 = names.unshift('hello','everybody');
    console.log(names,newNames2); // ["hello", "everybody", "cc", "alm", "blank", "frank"]   6

      (8)push()、pop()  

     // push() 向数组的末尾添加一个或多个元素,并返回新的长度
    var lastNames = names.push('baby');
    console.log(names,lastNames);  ["hello", "everybody", "cc", "alm", "blank", "frank", "baby"] 
    
     var lastName2 = names.push('I','comeback');
    console.log(names,lastName2) // ["hello", "everybody", "cc", "alm", "blank", "frank", "byby", "I", "comeback"] 9
    
    
    // pop() 从数组的末尾删除一个元素
    var popName= names.pop(); // popName表示被删除的元素
    console.log(popName); // comeback
    console.log(names.pop(),popName)  // I(pop()删除数组的最后一个元素)     comeback

      小练习:反转字符串

      例如输入 “there is a will,there is well” ,

        输出“well is will,there a is there”。

      解答: 

    var str = 'there is a will,there is well';
    console.log(str.split(' ').reverse().join(' ')); // well is will,there a is there
    View Code

     五、函数

      函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

      1、JavaScript 函数语法

        函数就是包裹在花括号中的代码块,前面使用了关键词 function:   

    function functionname()
    {
    执行代码
    }

    当调用该函数时,会执行函数内的代码。

    可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

      注意:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。  

      2、在javascript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像c#中或其他描述性语言那样仅仅作为一个模块来使用。

        javaScript的函数声明,有声明,就一定有调用。

        主要有下几种形式:

        (1)函数声明不带参数   

            function add() {
                alert('函数被调用了额!');
                alert(this) // 当前的this指向了windows
            }
            add(); // 函数执行
    
            或者 var add = function(){
                alert('函数被调用了的');
            }

         (2)函数声明带参数

     function add2(a,b) {
                alert(a+b);
            }
            add2(3,4);

         (3)函数声明带参数并且有返回值

            function add3(a,b) {
                return a+b;
            }
            var sum = add3(6,9);
            alert(sum);

    六、对象

      1、JavaScript 对象是拥有属性和方法的数据。

      例如:真实生活中,一辆汽车是一个对象。

         汽车这个对象有它的属性,如重量和颜色等,方法有启动停止等:

         所有汽车都有这些属性,但是每款车的属性都不尽相同。

      2、在 JavaScript中,几乎所有的事物都是对象。   

        对象也是一个变量,但对象可以包含多个值(多个变量)

        比如:   

    var car = {type:"Fiat", model:500, color:"white"};

        在以上实例中,3 个变量 (type, model, color) 赋予变量 car;3 个值 ("Fiat", 500, "white") 赋予变量 car。

        注意:定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的:   

    var person = {
        firstName:"John",
        lastName:"Doe",
        age:50,
        eyeColor:"blue"
    };

      3、对象属性

      (1)关于对象属性的几点理解:

        可以说 "JavaScript 对象是变量的容器"。

        但是,我们通常认为 "JavaScript 对象是键值对的容器"。

        键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性

        所以我们可以说JavaScript对象是属性变量的容器。

        对象键值对的写法类似于:Python中的字典,C语言的哈希表,Java中的哈希映射。

       (2)访问对象属性

        有两种方式访问对象属性,即使用 .property或者["property"]

        第一种:

    person.lastName;

        第二种: 

    person["lastName"];

        完整案例: 

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
    
    <p>
    有两种方式可以访问对象属性:
    </p>
    <p>
    你可以使用 .property 或 ["property"].
    </p>
    <p id="demo"></p>
    <script>
    var person = {
        firstName : "Jack",
        lastName : "France",
        id : 5566
    };
    document.getElementById("demo").innerHTML =
        person["firstName"]+ " " + person.lastName;
    </script>
    
    </body>
    </html>
    View Code

      (3)对象方法   

        对象的方法定义了一个函数,并作为对象的属性存储。

        对象方法通过添加 () 调用 (作为一个函数)。

        访问person对象的fullName方法,实例如下:  

    name = person.fullName(); // 必须加(),否则返回的只是返回定义函数的字符串,而函数并不执行

        完整实例:  

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
    
    <p>创建和使用对象方法。</p>
    <p>对象方法作为一个函数定义存储在对象属性中。</p>
    <p id="demo"></p>
    <script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        id : 5566,
        fullName : function() 
        {
           return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("demo").innerHTML = person.fullName();
    </script>
        
    </body>
    </html>
    View Code

      (4)访问对象方法

        创建对象方法:   

    methodName : function() { code lines }

        使用以下语法访问对象方法:

    objectName.methodName()

        注意:fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性。

      

  • 相关阅读:
    Java 联系Oracle 数据库
    android 流量统计
    [Angular] Using the Argon 2 Hashing Function In Our Sign Up Backend Service
    [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
    [Angular] Use Angular style sanitization to mark dynamic styles as trusted values
    [D3] Build a Line Chart with D3 v4
    [Angular] Style HTML elements in Angular using ngStyle
    [Firebase] Firebase Cloud Functions
    [React] Theme your application with styled-components and "ThemeProvider"
    [Angular] Component architecture and Reactive Forms
  • 原文地址:https://www.cnblogs.com/schut/p/9458167.html
Copyright © 2011-2022 走看看