python_day14_前端_JS-重写

Posted 2020-11-08

说明

ECMA(欧洲计算机制造协会)
??ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。
??尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

   1、核心（ECMAScript） 
   2、文档对象模型（DOM） Document object model (整合js，css，html)
   3、浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.

1、js简介

1.1、简要说明

1.1.1、JavaScript 代码

• JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。

1.1.2、JavaScript 组合

JavaScript 语句通过代码块的形式进行组合。
??块由左花括号开始，由右花括号结束。
??块的作用是使语句序列一起执行。
??JavaScript 函数是将语句组合在块中的典型例子。

1.1.3、JavaScript 对大小写是敏感的。

??当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
??函数 getElementById 与 getElementbyID 是不同的。
??提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

1.1.4、注释

??单行注释以 // 开头。
??多行注释以 / 开始，以 / 结尾。

1.1.5、变量必须以字母开头

??变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
??变量名称对大小写敏感（y 和 Y 是不同的变量）
??提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。

??当您向变量分配文本值时，应该用双引号或单引号包围这个值。
??当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

1.1.6、分号

??分号用于分隔 JavaScript 语句。
??通常我们在每条可执行的语句结尾添加分号。
??使用分号的另一用处是在一行中编写多条语句。

1.2、变量

1.2.1、变量使用

声明（创建） JavaScript 变量
var carname;

变量赋值  carname="Volvo";

例， 标签页需要在script之上
    <p id="demo"> test </p>
    <script>
        var test = " first var js"
        document.getElementById(‘demo‘).innerHTML=test
    </script>

一条语句，多个变量  var name="Gates", age=56, job="CEO";

1.2.2、变量命名规则

1、Camel 标记法
??首字母是小写的，接下来的字母都以大写字符开头。例如：
?? ?? var myTestValue = 0, mySecondValue = "hi";

2、Pascal 标记法
??首字母是大写的，接下来的字母都以大写字符开头。例如：
?? ??Var MyTestValue = 0, MySecondValue = "hi";

3、匈牙利类型标记法
??在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“
?? ??Var iMyT1 = 0, sMyAbs = "hi"; 如图

1.2.3、局部 JavaScript 变量

??在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
??您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
??只要函数运行完毕，本地变量就会被删除。

1.2.4、全局 JavaScript 变量

??在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

1.2.5、JavaScript 变量的生存期

??JavaScript 变量的生命期从它们被声明的时间开始。
??局部变量会在函数运行以后被删除。
??全局变量会在页面关闭后被删除。

1.3、字符类型

字符串、数字、布尔、数组、对象、Null、Undefined

1.3.1、JavaScript 数组

??var cars=new Array("Audi","BMW","Volvo"); #下标从0开始

1.3.2、整型

??精确表达的范围是?-9007199254740992 (-253) 到 9007199254740992 (253)

1.3.3、浮点型

??例如1.1 1.2 又或者 4.1e22 = 4.1 * 1022
??16进制和8进制数的表达
??16进制数据前面加上0x，八进制前面加0
??16进制数是由0-9,A-F等16个字符组成
??8进制数由0-7等8个数字组成
??16进制和8进制与2进制的换算

1.3.4、布尔

??只能有两个值：true 或 false。

1.3.5、Null & Undefined

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

1.3.6、类型查询函数(typeof)

??ECMAScript 提供了 typeof 运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种原始类型：如果它是原始类型，还可以判断它表示哪种原始类型。

    var nNum=1111
    var sStr="abcc"
    var bBom=true
    var fh=nNum+bBom
    var fh2=sStr+bBom
    var fh3=nNum+sStr
    var fh4=bBom+bBom
    console.log("数字: "+typeof (nNum))     数字: number
    console.log("字符串: "+typeof (sStr))    字符串: string
    console.log("布尔值: "+ typeof (bBom))  布尔值: boolean

    console.log("fh: "+typeof (fh))           fh: number
    console.log("fh2: "+typeof (fh2))     fh2: string
    console.log("fh3: "+typeof (fh3))     fh3: string
    console.log("fh4: "+typeof (fh4))     fh4: number

1.3.7、逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。
如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：
如果某个运算数是 null，返回 null。 
如果某个运算数是 NaN，返回 NaN。 
如果某个运算数是 undefined，返回undefined。 

例一
var na=NaN;    
    var nb=1233;
    var nc=3333;
    console.log(na&&nb);      //NaN
    console.log(nb&&nc);     //3333

例二
    && and    # 两个值都必须一样才是true
    || or     # 只有一个值为true 那就是true，
    !  not    # 不等于

    var x = 3;
    var y = 5;
    var z = 10
    if (x > y || z > y){
        document.write(‘yes‘)
    }else {
        document.write(‘no‘)
    }     # 结果为真  yes

1.3.8、对象

??对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：例

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
??在 JavaScript 中，对象是拥有属性和方法的数据。

1.3.9、属性和方法

??属性是与对象相关的值。
??方法是能够在对象上执行的动作。

1.3.9.1、访问对象的属性

1、访问对象属性的语法是：
objectName.propertyName
    var message = "hello world!";
    var x = message.length;
    alert(x)
    length就是message的属性了 长度为12

2、访问对象的方法
objectName.methodName()
    var message = "hello world!";
    var y = message.toUpperCase()
    alert(y)
    toUpperCase就是message的方法了，全都转成大写 结果为 HELLO WORLD 

提示：在面向对象的语言中，使用 camel-case 标记法的函数是很常见的。您会经常看到 someMethod() 这样的函数名，而不是 some_method()。

1.3.10、作用域

??作用域指的是变量的适用范围。
?? 作用域又分成公用、私有和受保护作用域

??公用作用域中的对象属性可以从对象外部访问，即开发者创建对象的实例后，就可使用它的公用属性；
??私有作用域中的属性只能在对象内部访问，
??ECMAScript 只有公用作用域 建议性的解决办法： 属性前后加下划线就意味着为私有作用域
??注意，下划线并不改变属性是公用属性的事实，它只是告诉其他开发者，应该把该属性看作私有的。

1.3.11、关键字 this

??在 ECMAScript 中，要掌握的最重要的概念之一是关键字 this 的用法，它用在对象的方法中。关键字 this 总是指向调用该方法的对象，例如：

<script type="text/javascript">
    var oac = new Object();
    oac.color = "red";
    oac.showColor = function () {
        alert(this.color)
    }
    oac.showColor()
</script>    # 输出red 

关键字 this 用在对象的 showColor() 方法中。在此环境中，this 等于 oac 。下面的代码与上面的代码的功能相同：
<script type="text/javascript">
    var oac = new Object();
    oac.color = "red";
    oac.showColor = function () {
        alert(oac.color)
    }
    oac.showColor()
</script>

1.13.11.1、使用 this 的原因
??为什么使用 this 呢？因为在实例化对象时，总是不能确定开发者会使用什么样的变量名。使用 this，即可在任何多个地方重用同一个函数

<script>
    function showColor() {
        alert(this.color);
    };
    var oCar1 = new Object;
    oCar1.color = "red";
    oCar1.showColor = showColor;

    var oCar2 = new Object;
    oCar2.color = "blue";
    oCar2.showColor = showColor;

    oCar1.showColor();      //输出 "red"
    oCar2.showColor();      //输出 "blue"
</script>

注意，引用对象的属性时，必须使用 this 关键字

1.3.12、构造函数方式

??创建构造函数就像创建工厂函数一样容易。第一步选择类名，即构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂函数。

<script>
    function Car(a1,b1,c1) {
        this.color = a1;
        this.doors = b1;
        this.mpg = c1;
        this.showColor = function () {
            document.write(this.color);
            document.write(this.doors);
            document.write(this.mpg);
        };
    }

    var oCar1 = new Car("red");
    var oCar2 = new Car("yellow",22,232);

    oCar1.showColor();
    document.write(‘<br />‘)
    oCar2.showColor()

</script>

构造函数内没有创建对象，而是使用 this 关键字。使用 new 运算符构造函数时， 在执行第一行代码前先创建一个对象，只有用 this 才能访问该对象。然后可以直接赋予 this 属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）、如图所示