zoukankan      html  css  js  c++  java
  • JavaScript语言基础

    为什么要有JavaScript

    • JavaScript最初的目的

      判断客户端的输入(以前的网速慢)

    • JavaScript现在的意义

      页面特效(PC端的网页效果)
      移动端(移动web和app)
      异步和服务器交互
      服务端开发(nodejs)

    • 演示JavaScript的炫酷

      http://www.codecombat.cn/(游戏)
      http://www.webhek.com/

    浏览器是如何工作的

    JavaScript语言

    JavaScript是世界上用的最多的脚本语言
    脚本语言:不需要编译,直接运行时边解析边执行的语言
    JavaScript是一种客户端的脚本语言

    JavaScript的历史

    当时工作于 Netscape 的 Brendan Eich,开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名为 JavaScript,目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报,JavaScript 从此变成了因特网的必备组件。

    三足鼎立
    因为 JavaScript 1.0 如此成功,Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候,微软决定进军浏览器,发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript(这样命名是为了避免与 Netscape 潜在的许可纠纷)。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉,但也成为 JavaScript 语言发展过程中的重要一步。
    在微软进入后,有 3 种不同的 JavaScript 版本同时存在:Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是,JavaScript 并没有一个标准来统一其语法或特性,而这 3 中不同的版本恰恰突出了这个问题。随着业界担心的增加,这个语言的标准化显然已经势在必行。

     JavaScript、HTML、CSS

    JavaScript、HTML、CSS各自的作用
    HTML 提供网页上显示的内容(结构)
    CSS 美化网页(样式)
    JavaScript 控制网页行为(行为)
    设计原则:
    结构、样式、行为---分离!

    JavaScript的组成

    ECMAScript
    JavaScript的语法规范
    DOM
    JavaScript操作网页上元素的API
    BOM
    JavaScript操作浏览器部分功能的API

    引入JavaScript

    HTML页面书写JavaScript

    引入外部JavaScript文件

     script标签的属性

    type
    type="text/javascript"
    可以省略
    async
    async="async"
    值可以省略,立即异步下载外部js,不影响页面其它的操作,所有js完毕执行
    defer
    defer="defer”
    值可以省略,脚本延迟到文档完全被解析和显示后再执行,只有外部脚本可以使用

    JavaScript的变量

    变量是在计算机中存储数据的一个标识符。
    变量可以在声明的时候赋值,也可以稍后赋值。
    例如:
    var number = 50;
    var name = "马户";
    或者
    var name;
    name = “张三”;
    可以在一行上定义多个变量
    var name,age,sex;

    弱类型

    JavaScript是弱类型的脚本语言
    下面这两行代码在JavaScript中是合法的,原因是JavaScript是弱类型的语言。不推荐使用。
    var age = 90;
    age = “马户”;

     变量命名规则和规范

    规则(必须遵守)
    由字母、数字、下划线、$组成
    不能是关键字和保留字
    区分大小写
    规范(建议遵守)
    变量的名称要有意义
    变量的命名遵守驼峰命名法,首字母小写,第二个单词的首字母大写
    例如:userName

    注释

    单行注释
    //单行注释
    多行注释
    /* 多行注释 */
    注释的应用
    注释一般用于解释某些复杂代码的逻辑,方便与后期的维护和开发
    注释一般用于对整个模块进行分割划分,方便于代码查找代码和维护
    注释一般用于:模块、函数、复杂逻辑注解、文件注解、维护记录等

    目标

    掌握四种常用的数据类型
    Number
    String
    Boolean
    Undefined //变量声明,但未赋值
    null

    数据类型

    计算机在存储数据的时候是有类型的
    JavaScript中的数据类型
    简单(基本、值)数据类型
    Number、String、Boolean
    Undefined、Null
    复杂(引用)数据类型(暂时了解)
    Object、Array、Date等
    查看当前变量的数据类型
    typeof name
    typeof(name)

    ☞简单数据类型

      ◆number   数字类型

      ◆string     字符串类型

            var   s1=”123”;   s1的数据类型字符串

      ◆Boolean   布尔类型

       ◆true      真 (正确的)

       ◆false     假(错误的)

       ◆undefined     变量未初始化

      var   s1; 定义了变量,但是没有给变量赋值,那么该值的数据类型就是  undefined 类型

      ◆变量取值为null的时候

        var   s1=null;  表示变量值为空,该变量在内存中是不存在的。真正的空。   s1的数据类型为 object

     ☞复杂数据类型

    ◆object    对象

    ◆Array     数组

    数值字面量

    字面量
    固定的值,让你从“字面上”理解其含义。
    数值字面量
    var age = 18; // 数值字面量,18为字面值

    Number类型
    十进制
    var num = 9;
    进行算数计算时,八进制和十六进制表示的数值最终都将被转换成十进制数值。
    十六进制
    var num = 0xA;
    数字序列范围:0~9以及A~F
    八进制
    var num1 = 07; //对应十进制的7
    var num2 = 019; //对应十进制的19
    var num3 = 08; //对应十进制的8
    数字序列范围:0~7
    如果字面值中的数值超出了范围,那么前导零将被忽略,后面的数值将被当作十进制数值解析


    Number类型

    浮点数
    var n = 5e-324;
    浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数
    var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
    console.log(0.07 * 100);
    永远不要测试某个特定的浮点数值(不要判断两个浮点数是否相等)

    数值范围

    由于内存的限制,ECMAScript 并不能保存世界上所有的数值
    最小值:Number.MIN_VALUE,这个值为: 5e-324
    最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
    无穷大:Infinity
    无穷小:-Infinity

    数值检测

    NaN 非数值(Not a Number)
    console.log(“abc”/18); //结果是NaN
    NaN 与任何值都不相等,包括 NaN 本身
    isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true
    isNaN(NaN);// true
    isNaN(“blue”); // true
    isNaN(123); // false

    String类型

    字符串字面量
    var name = "zhangsan"; //"zhangsan"字面量
    字符串要用引号引起,单引号和双引号的作用是等效的
    例如:
    var name = "zhangsan";
    var name = 'zhangsan';
    var name = 'zhangsan"; //错误,单引号和双引号要成对出现
    字符串是由一个一个字符组成的,获取一个字符串中字符的个数可以使用length
    例如:var name="zs"; alert(name.length);//2

    转义符

    要想打印"或者'怎么办?
    var str = "hello "itcast""; //打印输出hello "itcast"
    转义符

    字符串的不可变

    ECMAScript 中的字符串是不可变的,也就是说,字符串一旦创建,它们的值就不能改变。
    要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个包含新值的字符串填充该变量
    例如:
    var str = "123"; str = str + "abc";

    字符串拼接

    如果有两个字符串变量a,b,如何把这两个变量的值连接起来?
    例如:
    var a = "hello";
    var b = " itcast";
    var c = a + b;
    -思考:
    var a = “100";
    var b = 100;
    var c = a - b; //结果是什么?

    Boolean类型

    Boolean类型有两个字面量:true和false,并且区分大小写!
    虽然Boolean 类型的字面值只有两个,但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值
    例如:
    var result = Boolean("a");
    console.log(result); //结果是true

    var result = Boolean(100);
    console.log(result); //结果是true

    转换成Boolean类型

    任何类型可以转换成Boolean类型,一般使用在流程控制语句后面
    例如:
    var message = "hello";
    if(message) { alert(message + " world") };

     

    Undefined类型

    Undefined这是一种比较特殊的类型,表示变量未赋值,这种类型只有一种值就是undefined
    例如:
    var message;
    console.log(message); //结果是undefined
    undefined是Undefined类型的字面量。
    例如:
    var message = undefined;
    console.log(message);
    typeof message; 获取到的是"undefined"

    思考
    下面代码输出的结果?
    var message;
    if (message) {
    alert("有值");
    }else{
    alert("无值");
    }

    目标
    掌握三种类型的转换
    转换成字符串类型
    转换成数值类型
    转换成布尔类型

    转换成字符串

    三种转换成字符的方法
    1、几乎每一个值都有toString()方法
    例如:
    var age = 18;
    var ageString = age.toString();
    console.log(ageString); // 结果 "18"
    var result = true;
    var resultString = result.toString();
    console.log(resultString);// 结果 "true"
    数值类型的toString(),可以携带一个参数,输出对应进制的值
    var num = 10;
    console.log(num.toString()); //"10" 默认是10进制
    console.log(num.toString(10));//"10"
    console.log(num.toString(8)); //"12"
    console.log(num.toString(16));//"a"
    console.log(num.toString(2)); //"1010"

    三个把值转换成数值类型的函数:Number()、 parseInt()、 parseFloat()
    parseFloat()把字符串转换成浮点数
    parseFloat()和parseInt非常相似,不同之处在与
    parseFloat会解析第一个. 遇到第二个.或者非数字结束
    parseFloat不支持第二个参数,只能解析10进制数
    如果解析的内容里只有整数,解析成整数

    转换成布尔类型

    两种转换布尔类型的方式
    Boolean()函数
    例如:
    var b = Boolean("123"); //返回yes
    流程控制语句会把后面的值隐式转换成布尔类型
    例如:
    var message;
    if (message) { //会自动把message转换成false
    //todo...
    }
    转换为false的值:false、""、0和NaN、null、undefined

    猜猜看,下面的语句的结果
    var b = !!"123";

    第一个逻辑非操作会基于无论什么操作数返回一个布尔值
    第二个逻辑非操作则对该布尔值求反
    于是就得到了这个值真正对应的布尔值(结合性从右向左)

    目标
    算数运算符
    一元运算符
    逻辑运算符 (&& || !)
    比较运算符
    赋值运算符
    运算符的优先级

     数学运算符

    + 加法运算符
    如果运算符,有一个操作数为字符串则将另一个操作数转换成字符串然后再将两个字符串拼接
    例如:
    var str = "abc" + 123; //返回"abc123"
    - 减法运算符
    * 乘法运算符
    / 除法运算符
    % 求模(取余)运算符
    / 除0,返回Infinity
    % 取余,返回NaN

    运算符

    结果

    +

      如果是数字类型的变量相加,那么结果为数字类型

      如果是非数字类型的变量相加,结果为字符串类型

    -

      如果是非数字类型的变量相减结果为  NaN

    *

      同上

    /

      同上 ,如果0作为除数,结果为infinity(无穷大)

    %

      获取余数

    ()

      优先级  有括号先计算括号里面的值


     一元运算符

    只能操作一个值的操作符叫做一元操作符,分为:前置型和后置型
    顾名思义,前置型应该位于要操作的变量之前,而后置型则应该位于要操作的变量之后
    执行前置递增和递减操作时,变量的值都是在语句被求值以前改变的。

    ++
    前置++
    var age = 18;
    ++age; //结果 19
    执行过程
    var age = 1;
    age = age + 1;
    后置++
    var age = 18;
    age++; //结果 19
    和前置++的不同点在于,递增操作是在整个语句求值之后执行的,此处和上面的结果没有任何区别。
    练习:
    var a = 1; var b = ++a + ++a; console.log(b);
    var a = 1; var b = a++ + ++a; console.log(b);
    var a = 1; var b = a++ + a++; console.log(b);
    var a = 1; var b = ++a + a++; console.log(b);
    --和++相同

    逻辑运算符

    && 与
    属于*短路操作*,即如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值
    只有两个操作数都为true,结果为true
    只要有一个操作数为false,结果为false
    || 或
    属于*短路操作*,如果第一个操作数的求值结果为true ,就不会对第二个操作数求值了
    有一个操作数为true,结果为true
    有一个操作数false,结果为false
    ! 非
    逻辑非操作符首先会将它的操作数转换为一个布尔值,然后再对其求反
    只有一个操作数

    短路操作

    如果第一个操作数是对象,返回第二个操作数
    如果第二个操作数是对象,并且第一个操作数是true返回第二个操作数
    如果有一个操作数是null(NaN/undefined),返回null(NaN/undefined)

    如果第一个操作数是对象,返回第一个操作数
    如果第二个操作数是对象,并且第一个操作数是false返回第二个操作数
    如果两个操作数都是对象,返回第一个操作数
    如果两个操作数都是是null(NaN/undefined),返回null(NaN/undefined)

    练习:

    如果操作数是对象,返回false
    如果操作数是空字符串,返回true
    如果操作数是非空字符串,返回false
    如果操作数是0,返回true
    如果操作数是任意非0值,返回false
    如果操作数是null,undefined,NaN,返回true
    上面的规则可以简化成
    转换为false的值:false、""、0和NaN、null、undefined
    !!"abc"结果是什么

    比较运算符

     

    < <= >= >
    在比较字符串时,实际比较的是两个字符串中对应位置的每个字符的字符编码值。
    在比较数值和字符串时,字符串都会被转换成数值,然后再以数值方式与另一个数值比较
    如果一边是数子,另一边是Boolean,先把Boolearn类型的值转换成数字,再比较

    == != 相等和不相等
    === !== 全等和不全等
    相等只比较值,全等比较的是值和类型
    例如:
    var result = "55" == 55; //true
    var result = "55" === 55; //false 值相等,类型不相等
    var result = 55 === 55; //true

    赋值运算符

    = += -= *= /= %=
    例如:
    var num = 0;
    num += 5;//相当于 num = num + 5;

    运算符的优先级

    优先级从高到底
    () 优先级最高
    一元运算符 ++ -- !
    算数运算符 先* / % 后 + -
    关系运算符 > >= < <=
    相等运算符 == != === !==
    逻辑运算符 先&& 后||

    练习1
    ((4 >= 6) || ("人" != "狗")) && !(((12 * 2) == 144) && true)
    练习2
    var num = 10;
    if(5 == num / 2 && (2 + 2 * num).toString() === "22") {
    console.log(true);
    }

     Date()对象

    Date对象用于处理日期和时间。

    Math对象

    Math.ceil()   天花板函数    向上取整

    ★如果是整数,取整之后是这个数本身

    ★如果是小数,对数进行向上舍入。

    Math.floor()  地板函数

    ★如果是整数,取整之后是这个数本身

    ★如果是小数,对数进行向下舍入。

    Math.max()

     

    Math.min()

     Math.pow()

     

    Math.round() 

    Math.random()

    数据类型转换

    1.1 数字类型转字符串

      String()

     变量.toString()

    1.2 字符串转数字类型

    ◆Number

     

      ★数字类型的字符串,转换之后得到的数字。

      ★非数字字符串,转换之后得到是NaN。

      ★小数类型的字符串,转换之后得到的是原数字。

    ◆parseInt

     

    ★整数数字类型的字符串,转换之后得到的整数数字。

    ★数字开头的字符串,转换之后得到的是前边的数字。

    ★非数字开头的字符串,转换之后得到的是NaN。

    ★小数类型的字符串,转换之后取整。

    ◆parseFloat

    ★整数数字类型的字符串,转换之后得到的整数数字。

    ★数字开头的字符串,转换之后得到的是前边的数字。

    ★非数字开头的字符串,转换之后得到的是NaN。

    ★小数类型的字符串,转换之后得到的是原数字。

    1.3 转布尔类型

    Boolean()

     

    ★数字和字符串转完之后为true。

    ★undefined、null、0转完之后为false.

    1.4 隐式数据类型转换

    在运算过程中,程序自己进行的数据转换(程序员没有操作)

    1.5 逻辑运算符

    逻辑运算只有2个结果,一个为true,一个为false.

    ◆且&&

    ★两个表达式为true的时候,结果为true.

    ◆或||

    ★只要有一个表达式为true,结果为true.

    ◆非!

    ★和表达式相反的结果。

    1.6  等号运算符

    “=”赋值运算符

    “==”只判断内容是否相同,不判断数据类型。

    “===”不仅判断内容,还判断数据类型是否相同。

    !=  只判断内容是否不相同,不判断数据类型。

    !==不全等于  不仅判断内容是否不相同,还判断数据类型是否不相同。

    1.7 变量的集体声明

    程序三种基本结构

    顺序结构
    选择结构
    循环结构

    判断语句if

    语法:
    if(condition) {
    statement1
    }else if (aaa){
    statement2
    }else{
    statement3
    }

    三元(目)运算符

    性别在数据库中存储的是1和0,要求输出男或女
    var sex = 1;
    if(sex === 1) {
    console.log("男");
    }else{
    console.log("女");
    }
    简化的方式
    var sex = 1;
    sex = sex === 1 ? "男":"女";
    表达式1 ? 表达式2 : 表达式3

    判断语句switch

    语法:
    switch (expression) {
    case value:
    statement
    break; // break 关键字会导致代码执行流跳出 switch 语句
    case value:
    statement
    break;
    default:
    statement
    }
    注意:
    break可以省略,如果省略,代码会继续执行下一个case
    switch 语句在比较值时使用的是全等操作符,因此不会发生类型转换(例如,字符串 "10" 不等于数值 10)。

    案例:

         var fruit=prompt("请输入您喜欢吃的水果");
         switch(fruit){
             case "苹果":
             alert("您喜欢吃的是苹果");
             break;  //阻断代码执行
             case "香蕉":
             alert("您喜欢吃的是香蕉");
             break;
             case "葡萄":
             alert("您喜欢吃的是葡萄");
             break;
             default:
             alert("口味真重");
             break;
         }
         switch(fruit){
             case "苹果": case "香蕉": case "葡萄":// case值的集体声明
             alert("您喜欢吃水果");
             break;
             default:
             alert("口味真重");
             break;
         }

    练习:
    判断当天是星期几

        var jj=prompt("请输入月份");
        switch(jj){
            case "3": case "4": case "5":
            alert("春季");
            break;
            case "6": case "7": case "8":
            alert("夏季");
            break;
            case "9": case "10": case "11":
            alert("秋季");
            break;
            case "12": case "1": case "2":
            alert("冬季");
            break;
            default:
            alert("您在火星");
            break;
        }
    View Code

    把百分制转换成优良中可差

        var score=prompt("请输入成绩");
        switch(score){
            case "20":
            alert("成绩为20");
            break;
            case "40":
            alert("成绩为40");
            break;
            case "60":
            alert("成绩为60");
            break;
            default:
            alert("输入错误");
            break;
        }
    View Code

    循环语句for

    语法
    for (initialization; expression; post-loop-expression) statement
    initialization表示:初始化表达式
    expression表示:控制表达式
    post-loop-expression表示:循环后表达式
    三者都是可选的
    循环1-100
    执行过程
    1 首先初始化
    2 循环的判断
    3 函数体代码
    4 post-loop-expression
    5 从第2步开始向下重复进行

    练习:
    1 打印1到100

        //将1-10的数字打印到控制台
        for(var n1=1; n1<=10; n1++){
                console.log(n1);
        }
    View Code

    2 打印1到100的和

        // 计算1到100的和 
        var sum=0;
        for(var n1=1; n1<=100; n1++){
            sum=sum+n1;
    
        }
        console.log(sum);
    View Code

    3 求1-100之间所有数的和、平均值
    4 求1-100之间所有偶数的和、所有奇数的和
    5 本金10000元存入银行,年利率是千分之三,每过1年,将本金和利息相加作为新的本金。计算5年后,获得的本金是多少?
    6 有个人想知道,一年之内一对兔子能繁殖多少对?于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子,而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象,那么,一对兔子一年内(12个月)能繁殖成多少对?
    兔子的规律为数列,1,1,2,3,5,8,13,21

    2 打印正方形
    3 打印直角三角形

        // 在页面中打印一个直角三角形
        for(var j=1; j<=9;j++){
            for(var i=1; i<=j; i++){
                document.write("*");
            }document.write("<br>");
        }
    View Code

    1 打印9*9乘法表

        // 在页面中打印99乘法表
        for(var j=1; j<=9; j++){
            for(i=1;i<=j; i++){
                document.write(i+"X"+j+"="+j*i+"&nbsp;");
            }document.write("<br>");
        }
    View Code

    从1乘到100;
    计算出1—100之间所有不能被7整除的整数的数字之和。
    计算出1—100之间所有不能被3整除的整数的和大于(或等于)2000的数字。

    break和continue

    break语句

    在循环体中,只要代码遇到break,程序立马结束当前循环。

    当前循环指的是break语句所有的循环体。

    立即退出循环

    案例:

        //输出找到1-100之间的所有质数
        var flag=0;  //标识符
        for(var j=1; j<=100; j++){
            for(var i=2; i<j; i++){
                if(j%i==0){
                    flag=1;
                    break;
    
                }else{
                    flag=0;
                }
            }
            if(flag==0 && j!=1){
                console.log(j);
            }
        }


    continue语句

    continue跳出本次循环
    立即退出当前循环,但退出循环后会从循环的顶部继续执行

    案例

        //将6以外的1-10数字打印到控制台
        for(var n1=1; n1<=10; n1++){
            if(n1==6){
                continue;
            }else{
                console.log(n1);
            }
        }
        // 请将1到100之间所有数字输出,排除是3的倍数的数字
        for(var i=1; i<=100; i++){
            if(i%3==0){
                continue;
            }else{
                console.log(i);
            }
        }

    break和continue的区别:

    好比报数1到10,break语句报道6停止后面不报了(123456),continue跳过6继续报后面的数(12345 789)。

    循环语句while

    语法
    while(expression) statement
    执行顺序
    1. 先执行expression
    2. 再执行循环体中的代码

        //将1到100之间的所有是3的倍数找出来,在控制台中输出
        var n1=1;
        while(n1>=1 && n1<=10){
            if(n1%3==0){
                console.log(n1);
            }else{
    
            }
            n1++;
        }
        // 求1到100之间的数字和。在控制台中输出
         var n1=1;
         var sum=0;
         while(n1>=1 && n1<=10){
             sum=sum+n1;
             n1++;
    
         }
         //亲,请将1到50中所有的奇数找出来,并在控制台中输出!
         var n1=1;
         while(n1>=1 && n1<=50){
             if(n1%2==0){
                 
             }else{
                 console.log(n1);
             }
             n1++;
         }

    练习
    任意输入一个整数,求它的位数

    循环语句do..while

    语法
    do {statement} while (expression);
    循环体中的代码至少要被执行一次
    执行顺序
    1. 先执行statement语句
    2. 再执行expression

        var n1=1;
        var n2=5;
            do{
                alert("n1>n2");
            }while(n1>n2)
            

    为什么要学习数组

    之前学习的数据类型,只能存储一个值
    我们想存储多个值的时候可以使用数组
    比如:存储班级中所有学生的姓名

    数组

    数组:数据的有序列表,可以存放任意类型的数据,数组的大小可以动态调整。
    创建数组的两种方式
    方式1,数组字面量
    var arr1 = []; //创建一个空数组,数组字面量
    var arr2 = [1, 3, 4]; //创建一个包含3个数值的数组,多个数组项以逗号隔开
    var arr3 = ["a", "c"]; // 创建一个包含2个字符串的数组
    方式2,Array的构造函数
    var arr4 = new Array(); // 创建一个空数组
    var arr5 = new Array(10); // 创建一个长度为10的数组
    var arr6 = new Array("black", "white", "red"); // 创建一个包含3个字符串的数组

    数组的使用

    获取数组中的值
    var colors = ["black", "white", "red"];
    console.log(colors[0]); //获取第一个元素的值
    colors["1"] = "blue"; //给第2个元素重新赋值
    console.log(colors);
    colors["4"] = "yellow"; //设置第5个元素的值,此时数组中有5个元素
    console.log(colors);
    length属性,获取或设置数组中元素的个数
    console.log(colors.length);//获取数组中元素的个数
    colors.length = 1; //设置数组中元素的个数
    console.log(colors);

    数组练习

    求一组数中的所有数的和 和平均值
    求一组数中的最大值和最小值,以及所在位置
    将字符串数组用|或其他符号分割
    要求将数组中的0项去掉,将不为0的值存入一个新的数组,生成新的数组
    翻转数组
    冒泡排序,从小到大

    调试

    过去的调试
    alert
    console.log
    设置断点

    函数

    函数可以封装一段JavaScript代码,它只定义一次,但可以被执行或调用任意多次
    编程就是把需求分解成一组函数与数据结构的能力
    函数的定义
    function 函数名 (var1, var2, ..., varX) {
    //函数体
    }
    函数的调用

    函数名();

    函数函数的几种形式
    无参数无返回值
    有参数无返回值
    无参数有返回值
    有参数有返回值
    函数返回值
    如果函数体中出现return则后面的代码不执行
    当不写返回值,或者return后面没有跟内容的时候返回的也有返回值undefined,这是和其它语言不同的地方

    函数的返回值

    JavaScript中的函数比较奇葩
    1. 如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined
    2. 如果函数使用 return语句,那么跟再return后面的值,就成了函数的返回值
    3. 如果函数使用 return语句,但是return后面没有任何值,那么函数的返回值也是:undefined
    4. 函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后面的所有其他代码都不会再执行。
    5. 推荐的做法是要么让函数始终都返回一个值,要么永远都不要返回值。
    函数的参数

    函数的参数

    形参
    function f(a,b){} //a,b是形参,占位用,函数定义时形参无值
    实参
    var x= 5,y=6;
    f(x,y); //x,y实参,有具体的值,会把x,y复制一份给函数内部的a和b,函数内部的值是复制的新值,无法修改外部的x,y
    JavaScript中的函数相对于其它语言的函数比较灵(特)活(殊)
    在其它语言中实参个数必须和形参个数一致,但是JavaScript中没有函数签名的概念,实参个数和形参个数可以不相等

    没有重载(了解)
    什么是重载:方法的签名相同(函数返回值、函数名称、函数参数),其它语言(c++、Java、c#)中有方法的重载。
    JavaScript中没有方法的重载
    function f1(a,b) {
    return a + b;
    }
    function f1(a,b,c) {
    return a + b + c;
    }
    var result = f1(5,6); //NaN
    三个参数的f1把两个参数的f1覆盖,调用的是三个参数的f1
    证明JavaScript中没有重载

    函数两种定义方式

    1、函数声明
    function f(a,b) {
    return a + b;
    }
    console.log(f(5,6));
    2、函数表达式
    //myFun和f等价
    var myFun = function (a,b){
    return a + b;
    }
    console.log(myFun(6,7));

    变量的作用域

    块级作用域
    在其它语言中,任何一对花括号中的语句都属于一个块,在这之中定义的所有变量在代码块外都是不可见的
    JavaScript中没有块级作用域
    全局变量
    定义在script或者不属于某个函数的变量
    局部变量
    定义在函数内部的变量
    其它
    函数内部可以访问到该函数所属的外部作用域的变量(作用域链)
    不使用var声明的变量是全局变量,不推荐使用。
    变量退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁


    变量提升

    变量提升
    定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升。
    函数提升
    JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

    函数声明和函数表达式的区别
    函数声明
    //此处的代码执行没有问题,JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面。
    console.log(f(5,6));
    function f(a,b) {
    return a + b;
    }
    函数表达式
    //报错:myFun is not a function
    //这是为什么呢
    myFun(6,7);
    var myFun = function (a,b){
    return a + b;
    }

    匿名函数

    匿名函数:没有命名的函数
    作用:一般用在绑定事件的时候
    语法
    function () {}
    自调用函数
    (function(){alert("hello")})();

    函数练习
    求圆的面积
    求2个数中的最大值,求3个数中的最大值
    判断一个数是否是素数
    求阶乘
    求1!+2!+3!+....+n!
    求一组数中的最大值和最小值
    求斐波那契数列Fibonacci中的第n个数是多少? 1 1 2 3 5 8 13 21...
    翻转数组,返回一个新数组
    对数组排序,从小到大
    输入某年某月某日,判断这一天是这一年的第几天?

    递归

    什么是递归?
    方法自身调用,一般还要有结束的提交
    案例:
    从前有座庙,庙里有个老和尚
    求n个数的累加
    输入一个数,求这个数的各位数字之和。
    求Fibonacci的第n个数
    1 1 2 3 5 8 13 21...

    函数是一种数据类型
    typeof f1

    函数作为方法的参数
    函数作为方法的返回值

    1.1带操作的赋值运算符

  • 相关阅读:
    2018 11.15
    25 个精美的后台管理界面模板和布局
    Python3学习笔记(urllib模块的使用) brady
    Entity Framework学习
    我知道的泛型
    重温设计模式之工厂和抽象工厂
    ORM(O/R Mappping)学习
    我知道的委托
    项目中的分布式站点缓存刷新实现
    c#操作xml
  • 原文地址:https://www.cnblogs.com/qingyang-0-0/p/9456642.html
Copyright © 2011-2022 走看看