zoukankan      html  css  js  c++  java
  • python之路_前端基础之JS(1)

      一个完整的javascript实现是需要如下三个不同组成部分:(1)核心ECMAScript:主要描述了语法、类型、语句、关键字、保留字、运算符、对象等(注:avascript 在开发中绝大多数情况是基于对象的.也是面向对象的);(2)文档对象模型(DOM) Document object model (整合js,css,html);(3)浏览器对象模型(BOM) Broswer object model(整合js和浏览器)。

    一、javascript基础

    1、js的引入方式

      js的引入方式包含两种,介绍如下:

    1 直接编写
        <script>
            alert('hello yuan')
        </script>
    2 导入文件
        <script src="hello.js"></script>

    2、js的变量

      变量名由字母、数字、下划线及美元符组成,且不能以数字开头,字母区分大小写。

      (1)声明变量时不用声明变量类型. 全都使用var关键字;

    var a;
    a=3;

      (2)一行可以声明多个变量.并且可以是不同类型,以逗号分开;

    var a=3,name="alex",b=6;

      (3)声明变量时 可以不用var. 如果不用var 那么它是全局变量

      几种常用的命名规范介绍如下:

    /*
    Camel 标记法
    首字母是小写的,接下来的字母都以大写字符开头。例如:
    var myTestValue = 0, mySecondValue = "hi";
    Pascal 标记法
    首字母是大写的,接下来的字母都以大写字符开头。例如:
    Var MyTestValue = 0, MySecondValue = "hi";
    匈牙利类型标记法
    在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“
    Var iMyTestValue = 0, sMySecondValue = "hi";
    */

    3、数据类型

      js包括如下几种基本数据类型,强调一下,其中数字类型number不分整型和浮点型:

      (1)undefined数据类型

      Undefined 类型只有一个值,即 undefined。当声明的变量未初始化时,该变量的默认值是 undefined。当函数无明确返回值时,返回的也是值 "undefined";

      (2)另一种只有一个值的类型是 Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。

      数据类型查看实例如下:

    var a,i=10, f=3.14, s="hello", b=true, obj=[22,333,4444];
    console.log(i,typeof i);  // 10 "number"
    console.log(f,typeof f);   // 3.14 "number"
    console.log(s,typeof s);   // hello string
    console.log(a,typeof a);   // undefined 'undefined'
    console.log(b,typeof b);   // true "boolean"
    console.log(obj,typeof obj);  // [22, 333, 4444] "object"

    4、常见运算符

      基本运算符介绍如下:

    算术运算符:
        +   -    *    /     %       ++        -- 
    比较运算符:
        >   >=   <    <=    !=    ==    ===   !==
    逻辑运算符:
         &&   ||   !
    赋值运算符:
        =  +=   -=  *=   /=
    字符串运算符:
        +  连接,两边操作数有一个或两个是字符串就做连接运算

      算数运算符需要注意自加与自减符号的使用,实例如下:

    // 先赋值再计算      
    var i=10;
    var ret=i++; 
    console.log(i);                                          //结果为:11
    console.log(ret);                                       //结果为:10
    //  先计算后赋值
    var ret=++i;
    console.log(i);                                        //结果为:11
    console.log(ret);                                     //结果为:11

      等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。如下实例:

    console.log(2!="2");                                  //执行类型转换,结果为false
    console.log(2=="2");                                  //执行类型转换,结果为true
    console.log(2==="2");                                 //不执行类型转换,结果为false
    console.log(2!=="2");                                 //不执行类型转换,结果为true

    注意1:

    var bResult = "Blue" < "alpha";
    alert(bResult); //输出 true  
    在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。
    
    比较数字和字符串
    
    另一种棘手的状况发生在比较两个字符串形式的数字时,比如:
    
    var bResult = "25" < "3";
    alert(bResult); //输出 "true"
    上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。
    
    不过,如果把某个运算数该为数字,那么结果就有趣了:
    
    var bResult = "25" < 3;
    alert(bResult); //输出 "false"
    
    这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。
    
    总结:
    
    比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
    比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

    注意2:

    等性运算符:执行类型转换的规则如下:
    
    如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。 
    如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。 
    如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。 
    如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。 
    在比较时,该运算符还遵守下列规则:
    
    值 null 和 undefined 相等。 
    在检查相等性时,不能把 null 和 undefined 转换成其他值。 
    如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。 
    如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。

    二、循环语句

    1、for循环

    //   for方式1: 推荐
        for (var i=0;i<10;i++){
            console.log(i)
        }
    
    //  for方式2:
        arr=[111,222,333,444];
        for (var i in arr){
            console.log(arr[i]);                     //i为列表的索引值
        }

      上述方式2对列表的in循环也可以改成方式1的形式,具体如下:

        arr=[111,222,333,444];
        for(var i=0;i<arr.length;i++){              //arr.length求出列表的长度
            console.log(arr[i])
        }

    2、while循环

    var n=0;
    var sum=0;
    while (n<101){
                sum+=n;
                 n++;
                }
    console.log(sum)

    三、分支结构

    1、if..else

      实例如下:

    var
    score = 87;
    if (score > 90){
    alert("优秀")
    }
    else if (score > 80) {
    alert("凑合")
    }
    else{
        alert("不及格!")
    }

    2、switch

      实例如下:

    var x = 5;
    switch(x)
    {
    case1: alert("星期1");break;
    case 2: alert("星期2");break;
    case 3: alert("星期3");break;
    case 4: alert("星期4");break;
    case 5: alert("星期5");break;          #执行此满足条件的语句
    case 6: alert("星期6");break;
    case 7: alert("星期日");break;
    }

     四、函数对象

    1、函数定义

      函数由关键字function定义,返回值必须为return,定义函数的基本结构如下:

    function 函数名(参数){
 
           函数体;
          return 返回值;
          }

      除了上述定义函数的方式外,还可以通过Function类直接创建函数,语法如下:

    var 函数名 = new Function("参数1","参数n","function_body");

      上述实例如下:

    function func1(name){
        alert('hello'+name);
        return 8
    }
    
        ret=func1("yuan");
        alert(ret);
    
    
    var func2=new Function("name","alert("hello"+name);")
    func2("egon")

      注意:js的函数加载执行与python不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以。实例如下:

    foo();   //函数调用
    function foo(){
        alert(123);
        }

    2、函数的调用

          只要函数名写对即可,参数怎么填都不报错,当传入参数个数大于等于所需个数,取前两个参数进行函数执行,当所传参数小于所需个数,返回NaN

    function func1(a,b){
        alert(a+b);
    }
    func1(1,2);                                             //3
    func1(1,2,3);                                          //3
    func1(1);                                             //NaN
    func1();                                             //NaN
    
    
    -------------------面试题-----------
     function a(a,b){
        alert(a+b);
    }
       var a=1;
       var b=2;
       a(a,b)     //报错,无结果,因为a不是一个函数

    3、函数的内置对象及属性

      函数属于引用类型,所以它们也有属性和方法。比如,ECMAScript 定义的属性 length 声明了函数期望的参数个数,arguments为函数的内置对象,它将传入的参数转化成一个列表。应用实例如下:

    function add(a,b){
    
            console.log(a+b);                            //3
            console.log(arguments.length);              //2
            console.log(arguments);                    //[1,2]
    
        }
        add(1,2)
    
        ------------------arguments的用处1 ------------------
        function nxAdd(){
            var result=0;
            for (var num in arguments){
                result+=arguments[num]
            }
            alert(result)
    
        }
    
        nxAdd(1,2,3,4,5)
    
    //     ------------------arguments的用处2 ------------------
    
        function f(a,b,c){
            if (arguments.length!=3){
                throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
            }
            else {
                alert("success!")
            }
        }
    
        f(1,2,3,4,5)

    4、匿名函数

    // 匿名函数
        var func = function(arg){
            return "tony";
        }
    
    // 匿名函数的应用
        (function(){
            alert("tony");
        } )()
    
        (function(arg){
            console.log(arg);
        })('123')



      

  • 相关阅读:
    [置顶] 深入理解android之IPC机制与Binder框架
    cdn加速对门户网站产生的影响
    极客技术专题【007期】:jQuery初学者入门
    linux 下信号处理命令trap && linux下各种信号的意义
    利用ACE 自己实现的线程池
    漫谈开发前奏之编译器
    jar,war,ear区别及java基础杂七八
    java出现no XXX in java.library.path的解决办法及eclipse配置
    Windows下GNU之gcc体验方法
    防asp木马运行
  • 原文地址:https://www.cnblogs.com/seven-007/p/7805241.html
Copyright © 2011-2022 走看看