SlideShare une entreprise Scribd logo
1  sur  53
Télécharger pour lire hors ligne
新业务新人培训课程计划
Javascript   Javascript
                           语法
  历史           实现


  变量          运算符         基本语句


         函数           对象
Javascript 历史

1992年(起源)        1995年               1996年               1997年
• 早期美国           • Javascript的第一     • Javascript 1.1在   • Javascript 1.2搭
  Nombas公司开        个正式版本,即             Netscape            载在1997年发布
  发的ScriptEase     Javascript 1.0是     Navigator 3.0中      的Netscape 
  (最初命名为           由Netscape公司         发布                  Navigator 4.0中,
  Cmm,即C‐‐语        和SUN公司联合                                但不符合在之后
  言)               开发,在                                    发布的ECMA‐
                   Netscape                                262规范第一版。
                   Navigator 2.0中
                   搭载发布
Javascript 历史
•   Javascript 1.3
    •   搭载在随后发布的NetscapeNavigator4.06中,是Netscape第一个真正符合ECMA-262规
        范第一版的脚本语言实现,但这已经落后于Microsoft公司,因为在这之前微软公司发布的
        IE4.0中搭载的JScript3.0已经做到了这一点。
•   Javascript 1.4
     – 搭载在Netscape EnterpriseServer(WebServer)中发布,而没有出现在客户端
       的浏览器中,主要原因是当时Netscape公司决定全部重写浏览器的代码。
•   Javascript 1.5
     – 搭载在NetscapeNavigator6.0和Firefox1.0中发布,这是一个相对稳定而全面
       的版本,完全符合ECMA-262规范第三版的要求。目前大多数浏览器支持的
       Javascript也是这个版本的实现。
•   Javascript 1.6
     – 搭载在Firefox1.5中发布,增加了对E4X规范的部分实现。
•   Javascript 1.7
     – 搭载在Firefox2.0中发布,仅引入了少量的新特性。
•   Javascript 1.8
     – 搭载在Firefox3.0中,引入了部分满足ECMAScript 4/JavaScript2的特性。
Javascript ?ECMAScript
Javascript 实现
核心-ECMAScript
• 与宿主环境(浏览器等)无关
• 描述了以下内容

  语法   类型   语句    关键字

   保留字   运算符     对象
ECMAScript 版本

1997年6月
• ECMA‐262 第一版


    1998年6月
    • ECMA‐262 第二版
   强大的正则表达式,更好的文字链处理,新的控制指令,异常
      处理,错误定义更加明确,数输出的格式化及其它改变

  1999年
  • ECMA‐262 第三版
DOM & BOM
• DOM
 – DOM(文档对象模型)是 HTML和 XML的
   应用程序接口(API)。DOM将把整个页面规
   划成由节点层级构成的文档。
• BOM
 – BOM(浏览器对象模型),可以对浏览器窗口
   进行访问和操作。
ECMAScript 语法
•   区分大小写
     – ECMAScript中的一切,比如变量、函数名、操作符都区分大小写。

•   注释
     – //单行注释
     – /*javascript code*/多行注释

•   语句
     – 语句以分号结尾,如果没有分号则由解析器确定结尾
     – {}表示代码块,ifelse语句在多行的时候才要求使用代码块(我们推
       荐任何时候都使用代码块)
ECMAScript 变量
• 使用var来声明变量,变量是弱类型的
 vartest="hi";
 vartest=“hi”,test2=“hello”;

• 命名变量
 – 第一个字符必须是字母、下划线(_)或美元符号($)
 – 余下的字符可以是下划线、美元符号或任何字母或数字字符
 – 关键字不能做为变量名

• 变量声明不是必须的
 – 建议大家使用变量前都进行声明
 – 否则会污染全局变量
ECMAScript 关键字&保留字
•   关键字

     break        else           new              var                 case
     finally       return         void             catch              for
     switch       while          continue         function           this
     with         default        if               throw              delete
     in           try            do               instanceof          typeof

•   保留字:不推荐用作变量名和函数名
     abstract   enum         synchronized short            boolean       export
     interface static       implements      extends long               super
     char       native       debuggerv        int            class         float
     package    throws      volvatile        goto           private      transient
     final       byte        protected       const          double       import
     public
ECMAScript 数据类型
ECMAScript 原始值和引用值

• 原始值
 – 值直接存在变量中
• 引用值
 – 存储在变量处的值
   是一个指针
   (point),指向存
   储对象的内存处。
ECMAScript 原始值
• 原始值            • 使用typeof运算符获取
 –   Undefined     原始值类型
 –   Null
 –   Boolean     • 如果变量是一种引用类
 –   Number        型或Null类型的,返回
 –   String        “object”
Undefined 类型
• Undefined类型只有一个值,即
  undefined。当声明的变量未初始化时,该
  变量的默认值是 undefined。




 值 undefined 并不同于未定义的值。但是,typeof 运算符并不
 真正区分这两种值。
Null 类型
• 另一种只有一个值的类型是 Null,它只有一个专
  用值 null,即它的字面量。
• 值 undefined实际上是从值 null派生来的,因此
  ECMAScript 把它们定义为相等的。



• 但它们的含义不同。undefined是声明了变量但
  未对其初始化时赋予该变量的值,null则用于表
  示尚未存在的对象。如果函数或方法要返回的是
  对象,那么找不到该对象时,返回的通常是 null。
Boolean 类型
• Boolean类型有两个值true和false

• 如果发生类型转换
 true->1||“true”
 false ->0||“false”
Number 类型
• 这种类型既可以表示 32位的整数,还可以
  表示 64位的浮点数。
• 整数:可以用十进制、十六进制和八进制
  定义



• 浮点数:必须包括小数点和小数点后的一
  位数字(例如,用 1.0而不是 1)
String 类型
• String类型的独特之处在于,它是唯一没
       Unicode:用四位16进制
 有固定大小的原始类型。可以用字符串存
        数字表示一个字符


 储 0或更多的 Unicode字符
ECMAScript 转义字符
ECMAScript 引用类型
• 引用类型,通常指的是对象。

                        constructor
          属性
                         prototype
                 hasOwnProperty(property)
 Object
                    isPrototypeOf(object)
          方法   propertyIsEnumerable(property)
                         toString()
                          valueOf()
ECMAScript 引用类型
• ECMAScript包含以下几种预定义的引用类
  型
                     Array   Date

            String                  Math


   Nubmer                                  RegExp



 Boolean                Object              Function
类型转换

         Undefined            • 通过运算符
                              • 通过if
                              • parseInt(),
                     Nubmer     parseFloat()
Object                        • toString()
             转换               • 有些方法的参数会
                                被强制进行类型转
                                换,如:alert()
     Boolean
                     String
ECMAScript 运算符

一元运算符   位运算符    逻辑运算符   乘性运算符



加性运算符   关系运算符   等性运算符   条件运算符



        赋值运算符   逗号运算符
一元运算符
• delete
  – 只能删除开发者自己定义的属性和方法
• void
  – 对任何值返回undefined
• 前增量、前减量运算
  – ++i --I
• 后增量、后减量运算
  – i++i—
• typeof
• instanceof
ECMAScript 逻辑运算符
• NOT(!)
• AND(&&)
• OR(||)
ECMAScript 加性运算符
加号: +
 1+1=?
 1+“1”=?
 1+“a”=?
减号: -
 1-1=?
 1-“1”=?
 1-“a”=?
ECMAScript 乘性运算符
• 乘法运算符:*
• 除法运算符:/
• 取模(求余数)运算符:%
ECMAScript 关系运算符
• 关系运算符执行的是比较运算。每个关系
  运算符都返回一个布尔值。
 >       >=
 <       <=
• 下面这几个分别都返回什么结果?
ECMAScript 等性运算符
•   == !=
•   ===(不进行类型转换)
•   执行类型转换的规则如下:
    – 如果一个运算数是 Boolean值,在检查相等性之前,把它转换成数字值。false转换成
      0,true为 1。
    – 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成
      数字。
    – 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字
      符串。
    – 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。
•   在比较时,该运算符还遵守下列规则:
    –   值 null和 undefined相等。
    –   在检查相等性时,不能把 null和 undefined转换成其他值。
    –   如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。
    –   如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,
        那么等号返回 true,否则两个运算数不等。
ECMAScript 条件运算符
•   variable =boolean_expression ?true_value :
    false_value;
• 例子:
    varresult;
    if(confirm("I'm tall?")){
       result="I'm tall";
    }else{
       result="I'm short";
    }
• 等同于:
    varresult =confirm("I'm tall?")?"I'm tall":"I'm
    short";
ECMAScript 赋值运算符
•   乘法/赋值(*=)
•   除法/赋值(/=)
•   取模/赋值(%=)
•   加法/赋值(+=)
•   减法/赋值(-=)
•   左移/赋值(<<=)
•   有符号右移/赋值(>>=)
•   无符号右移/赋值(>>>=)
ECMAScript 语句
• 条件:
  if (condition)statement1 else statement2


• Switch语句:
  switch (expression)
    case value:statement;
        break;
   ...
  case value:statement;
     break;
  default:statement;
ECMAScript 语句
• 循环:
  do {statement}while(expression);
  while (expression)statement
  for(initialization;expression;post-loop-expression)statement
  for (propertyin object)statement
• 使用continue跳出一次循环
• 使用break跳出一层循环
ECMAScript 语句

• 结构化错误处理
• try{}catch(err){}finally{}
• 也通过throw()抛出异常

• 使用场景:
   1. 屏蔽代码块中的错误
   2. 实现模块中的错误处理机制
ECMAScript 函数
• 定义,两种方式有何不同?
 – var fun1=function(arg1){}
 – functionfun1(arg1){}
• 调用 fun1(arg1)              arguments.callee
• 参数对象:arguments
• 返回值:return
ECMAScript 函数
• 闭包:函数可以使用函数之外定义的变量。
ECMAScript 函数
• this 指向函数运行的上下文环境,也就是
  调用该函数的对象
 functiontest(){alert(this)}
 test() this-> window

 var obj1={};obj1.test=function(){alert(this)}
 obj1.test()this->obj1
ECMAScript 函数
•   改变this的指向
•   定义一个函数Fun,一个对象obj
•   Fun.call(obj,arg1,arg2)
•   Fun.apply(obj,[arg1,arg2])
ECMAScript 面向对象
• 对象的定义:属性的无序集合,每个属性
  存放一个原始值、对象或函数

• ECMAScript支持封装,继承,多态,可以
  被看作是面向对象的
类
• 在ECMAScript中并没有真正的类,它使用
  函数来描述一个对象,解释器可以根据一
  个函数的描述来构建对象。因此在功能上
  讲函数和类是等价的。
       function Foo1(){
         alert(“hello!”);
       }
       var obj = new Foo1();
结果会是啥?
functionFoo1(){
   alert(“hello!”)
}
alert(Foo1.prototype.constructor)
prototype &constructor
创建类的方法
functionmyFunc(par1){
   this.prop1=par1;
   this.prop2=xxx;
}
myFunc.prototype.method1=function(){}
myFunc.prototype.method2=function(){}


     var obj=new myFunc(par1)
创建一个对象(实例)
                                 • 使用new关键字
obj1=newMyFunc()




obj1指向一个新的对象



MyFunc的prototype如果是对
象,则将它复制给obj1的内部
属性_proto_


执行(构造函数)
MyFunc.call(obj1,arg1,arg2...)
ECMAScript的原型链继承


                         method1
method1                  method2
method2


                         method1
                         method2
继承
functionClassA(sColor){
  this.color =sColor;
}

ClassA.prototype.sayColor =function()
{
   alert(this.color);
};

functionClassB(sColor,sName){
  ClassA.call(this,sColor);
  this.name =sName;
}
                                           var objA = new ClassA("blue");
ClassB.prototype =newClassA();           var objB = new ClassB("red", "John");
ClassB.prototype.constructor=ClassB;       objA.sayColor();   //输出 "blue"
ClassB.prototype.sayName =function       objB.sayColor();   //输出 "red"
(){                                       objB.sayName(); //输出 "John"
    alert(this.name);
};
关于在JS中使用面向对象?
•   维护
•   复用
•   模块
•   组件
Ecmascript
Ecmascript

Contenu connexe

Tendances

千呼萬喚始出來的 Java SE 7
千呼萬喚始出來的 Java SE 7千呼萬喚始出來的 Java SE 7
千呼萬喚始出來的 Java SE 7Justin Lin
 
Javascript share
Javascript shareJavascript share
Javascript shareXu Mac
 
2, object oriented programming
2, object oriented programming2, object oriented programming
2, object oriented programmingted-xu
 
Java 開發者的函數式程式設計
Java 開發者的函數式程式設計Java 開發者的函數式程式設計
Java 開發者的函數式程式設計Justin Lin
 
Js的国(转载)
Js的国(转载)Js的国(转载)
Js的国(转载)Leo Hui
 
OpenEJB - 另一個選擇
OpenEJB - 另一個選擇OpenEJB - 另一個選擇
OpenEJB - 另一個選擇Justin Lin
 
Java华为面试题
Java华为面试题Java华为面试题
Java华为面试题yiditushe
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型keelii
 
Java SE 8 的 Lambda 連鎖效應 - 語法、風格與程式庫
Java SE 8 的 Lambda 連鎖效應 - 語法、風格與程式庫Java SE 8 的 Lambda 連鎖效應 - 語法、風格與程式庫
Java SE 8 的 Lambda 連鎖效應 - 語法、風格與程式庫Justin Lin
 
深入剖析Concurrent hashmap中的同步机制(上)
深入剖析Concurrent hashmap中的同步机制(上)深入剖析Concurrent hashmap中的同步机制(上)
深入剖析Concurrent hashmap中的同步机制(上)wang hongjiang
 
Introduction to C++ over CLI
Introduction to C++ over CLIIntroduction to C++ over CLI
Introduction to C++ over CLI建興 王
 
ES5 introduction
ES5 introductionES5 introduction
ES5 introductionotakustay
 
5, initialization & cleanup
5, initialization & cleanup5, initialization & cleanup
5, initialization & cleanupted-xu
 
認識 C++11 新標準及使用 AMP 函式庫作平行運算
認識 C++11 新標準及使用 AMP 函式庫作平行運算認識 C++11 新標準及使用 AMP 函式庫作平行運算
認識 C++11 新標準及使用 AMP 函式庫作平行運算建興 王
 
如何在 Java App 中導入 Scala
如何在 Java App 中導入 Scala如何在 Java App 中導入 Scala
如何在 Java App 中導入 Scalajavatwo2011
 
Java SE 7 技術手冊第六章草稿 - 何謂繼承?
Java SE 7 技術手冊第六章草稿 - 何謂繼承?Java SE 7 技術手冊第六章草稿 - 何謂繼承?
Java SE 7 技術手冊第六章草稿 - 何謂繼承?Justin Lin
 
深入剖析Concurrent hashmap中的同步机制(下)
深入剖析Concurrent hashmap中的同步机制(下)深入剖析Concurrent hashmap中的同步机制(下)
深入剖析Concurrent hashmap中的同步机制(下)wang hongjiang
 

Tendances (20)

千呼萬喚始出來的 Java SE 7
千呼萬喚始出來的 Java SE 7千呼萬喚始出來的 Java SE 7
千呼萬喚始出來的 Java SE 7
 
Sun java
Sun javaSun java
Sun java
 
Javascript share
Javascript shareJavascript share
Javascript share
 
2, object oriented programming
2, object oriented programming2, object oriented programming
2, object oriented programming
 
前端测试
前端测试前端测试
前端测试
 
Java 開發者的函數式程式設計
Java 開發者的函數式程式設計Java 開發者的函數式程式設計
Java 開發者的函數式程式設計
 
Js的国(转载)
Js的国(转载)Js的国(转载)
Js的国(转载)
 
OpenEJB - 另一個選擇
OpenEJB - 另一個選擇OpenEJB - 另一個選擇
OpenEJB - 另一個選擇
 
Java华为面试题
Java华为面试题Java华为面试题
Java华为面试题
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型
 
Java SE 8 的 Lambda 連鎖效應 - 語法、風格與程式庫
Java SE 8 的 Lambda 連鎖效應 - 語法、風格與程式庫Java SE 8 的 Lambda 連鎖效應 - 語法、風格與程式庫
Java SE 8 的 Lambda 連鎖效應 - 語法、風格與程式庫
 
深入剖析Concurrent hashmap中的同步机制(上)
深入剖析Concurrent hashmap中的同步机制(上)深入剖析Concurrent hashmap中的同步机制(上)
深入剖析Concurrent hashmap中的同步机制(上)
 
Introduction to C++ over CLI
Introduction to C++ over CLIIntroduction to C++ over CLI
Introduction to C++ over CLI
 
ES5 introduction
ES5 introductionES5 introduction
ES5 introduction
 
5, initialization & cleanup
5, initialization & cleanup5, initialization & cleanup
5, initialization & cleanup
 
Js培训
Js培训Js培训
Js培训
 
認識 C++11 新標準及使用 AMP 函式庫作平行運算
認識 C++11 新標準及使用 AMP 函式庫作平行運算認識 C++11 新標準及使用 AMP 函式庫作平行運算
認識 C++11 新標準及使用 AMP 函式庫作平行運算
 
如何在 Java App 中導入 Scala
如何在 Java App 中導入 Scala如何在 Java App 中導入 Scala
如何在 Java App 中導入 Scala
 
Java SE 7 技術手冊第六章草稿 - 何謂繼承?
Java SE 7 技術手冊第六章草稿 - 何謂繼承?Java SE 7 技術手冊第六章草稿 - 何謂繼承?
Java SE 7 技術手冊第六章草稿 - 何謂繼承?
 
深入剖析Concurrent hashmap中的同步机制(下)
深入剖析Concurrent hashmap中的同步机制(下)深入剖析Concurrent hashmap中的同步机制(下)
深入剖析Concurrent hashmap中的同步机制(下)
 

Similaire à Ecmascript

IOS入门分享
IOS入门分享IOS入门分享
IOS入门分享zenyuhao
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技Will Huang
 
Javascript 培训第二节 基础上
Javascript 培训第二节 基础上Javascript 培训第二节 基础上
Javascript 培训第二节 基础上liziqi7
 
12, string
12, string12, string
12, stringted-xu
 
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)Will Huang
 
Javascript 培训第三节 基础下
Javascript 培训第三节 基础下Javascript 培训第三节 基础下
Javascript 培训第三节 基础下liziqi7
 
Java SE 7 技術手冊投影片第 16 章 - 自訂泛型、列舉與標註
Java SE 7 技術手冊投影片第 16 章 - 自訂泛型、列舉與標註Java SE 7 技術手冊投影片第 16 章 - 自訂泛型、列舉與標註
Java SE 7 技術手冊投影片第 16 章 - 自訂泛型、列舉與標註Justin Lin
 
[圣思园][Java SE]Io 3
[圣思园][Java SE]Io 3[圣思园][Java SE]Io 3
[圣思园][Java SE]Io 3ArBing Xie
 
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)jeffz
 
02 Objective-C
02 Objective-C02 Objective-C
02 Objective-CTom Fan
 
JavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization SkillsJavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization SkillsHo Kim
 
Java Jdk6学习笔记[Ppt]
Java Jdk6学习笔记[Ppt]Java Jdk6学习笔记[Ppt]
Java Jdk6学习笔记[Ppt]yiditushe
 
Learning notes ruby
Learning notes rubyLearning notes ruby
Learning notes rubyRoger Xia
 
看似比較簡單的推坑教學 C語言從崩潰到崩潰Ex(二)
看似比較簡單的推坑教學 C語言從崩潰到崩潰Ex(二)看似比較簡單的推坑教學 C語言從崩潰到崩潰Ex(二)
看似比較簡單的推坑教學 C語言從崩潰到崩潰Ex(二)永立 連
 
模块一-Go语言特性.pdf
模块一-Go语言特性.pdf模块一-Go语言特性.pdf
模块一-Go语言特性.pdfczzz1
 
JS and NG - ntut iLab 2015/07/14
JS and NG - ntut iLab 2015/07/14JS and NG - ntut iLab 2015/07/14
JS and NG - ntut iLab 2015/07/14BO Hong LI
 
Java SE 7 技術手冊投影片第 06 章 - 繼承與多型
Java SE 7 技術手冊投影片第 06 章 - 繼承與多型Java SE 7 技術手冊投影片第 06 章 - 繼承與多型
Java SE 7 技術手冊投影片第 06 章 - 繼承與多型Justin Lin
 
千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7javatwo2011
 

Similaire à Ecmascript (20)

IOS入门分享
IOS入门分享IOS入门分享
IOS入门分享
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
 
Javascript 培训第二节 基础上
Javascript 培训第二节 基础上Javascript 培训第二节 基础上
Javascript 培训第二节 基础上
 
12, string
12, string12, string
12, string
 
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
 
Javascript 培训第三节 基础下
Javascript 培训第三节 基础下Javascript 培训第三节 基础下
Javascript 培训第三节 基础下
 
RSpec & TDD Tutorial
RSpec & TDD TutorialRSpec & TDD Tutorial
RSpec & TDD Tutorial
 
Java SE 7 技術手冊投影片第 16 章 - 自訂泛型、列舉與標註
Java SE 7 技術手冊投影片第 16 章 - 自訂泛型、列舉與標註Java SE 7 技術手冊投影片第 16 章 - 自訂泛型、列舉與標註
Java SE 7 技術手冊投影片第 16 章 - 自訂泛型、列舉與標註
 
[圣思园][Java SE]Io 3
[圣思园][Java SE]Io 3[圣思园][Java SE]Io 3
[圣思园][Java SE]Io 3
 
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)
 
02 Objective-C
02 Objective-C02 Objective-C
02 Objective-C
 
Scala
ScalaScala
Scala
 
JavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization SkillsJavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization Skills
 
Java Jdk6学习笔记[Ppt]
Java Jdk6学习笔记[Ppt]Java Jdk6学习笔记[Ppt]
Java Jdk6学习笔记[Ppt]
 
Learning notes ruby
Learning notes rubyLearning notes ruby
Learning notes ruby
 
看似比較簡單的推坑教學 C語言從崩潰到崩潰Ex(二)
看似比較簡單的推坑教學 C語言從崩潰到崩潰Ex(二)看似比較簡單的推坑教學 C語言從崩潰到崩潰Ex(二)
看似比較簡單的推坑教學 C語言從崩潰到崩潰Ex(二)
 
模块一-Go语言特性.pdf
模块一-Go语言特性.pdf模块一-Go语言特性.pdf
模块一-Go语言特性.pdf
 
JS and NG - ntut iLab 2015/07/14
JS and NG - ntut iLab 2015/07/14JS and NG - ntut iLab 2015/07/14
JS and NG - ntut iLab 2015/07/14
 
Java SE 7 技術手冊投影片第 06 章 - 繼承與多型
Java SE 7 技術手冊投影片第 06 章 - 繼承與多型Java SE 7 技術手冊投影片第 06 章 - 繼承與多型
Java SE 7 技術手冊投影片第 06 章 - 繼承與多型
 
千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7
 

Plus de jay li

犀牛书第六版
犀牛书第六版犀牛书第六版
犀牛书第六版jay li
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践jay li
 
Jswebapps
JswebappsJswebapps
Jswebappsjay li
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Designjay li
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器jay li
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础jay li
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼jay li
 
F2e security
F2e securityF2e security
F2e securityjay li
 
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟jay li
 
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎jay li
 
编码大全 拔赤
编码大全 拔赤编码大全 拔赤
编码大全 拔赤jay li
 
小控件、大学问
小控件、大学问小控件、大学问
小控件、大学问jay li
 
Mobile UI design and Developer
Mobile UI design and DeveloperMobile UI design and Developer
Mobile UI design and Developerjay li
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoloadjay li
 
Html5form
Html5formHtml5form
Html5formjay li
 
Js doc toolkit
Js doc toolkitJs doc toolkit
Js doc toolkitjay li
 
新业务新员工培训 Banner设计
新业务新员工培训   Banner设计新业务新员工培训   Banner设计
新业务新员工培训 Banner设计jay li
 
夏之 专题设计
夏之 专题设计夏之 专题设计
夏之 专题设计jay li
 
赤骥 用户研究入门
赤骥 用户研究入门赤骥 用户研究入门
赤骥 用户研究入门jay li
 

Plus de jay li (20)

犀牛书第六版
犀牛书第六版犀牛书第六版
犀牛书第六版
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
Jswebapps
JswebappsJswebapps
Jswebapps
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼
 
F2e security
F2e securityF2e security
F2e security
 
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
 
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
 
编码大全 拔赤
编码大全 拔赤编码大全 拔赤
编码大全 拔赤
 
小控件、大学问
小控件、大学问小控件、大学问
小控件、大学问
 
Mobile UI design and Developer
Mobile UI design and DeveloperMobile UI design and Developer
Mobile UI design and Developer
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
Html5form
Html5formHtml5form
Html5form
 
Slide
SlideSlide
Slide
 
Js doc toolkit
Js doc toolkitJs doc toolkit
Js doc toolkit
 
新业务新员工培训 Banner设计
新业务新员工培训   Banner设计新业务新员工培训   Banner设计
新业务新员工培训 Banner设计
 
夏之 专题设计
夏之 专题设计夏之 专题设计
夏之 专题设计
 
赤骥 用户研究入门
赤骥 用户研究入门赤骥 用户研究入门
赤骥 用户研究入门
 

Ecmascript

  • 2.
  • 3. Javascript Javascript 语法 历史 实现 变量 运算符 基本语句 函数 对象
  • 4. Javascript 历史 1992年(起源) 1995年 1996年 1997年 • 早期美国 • Javascript的第一 • Javascript 1.1在 • Javascript 1.2搭 Nombas公司开 个正式版本,即 Netscape  载在1997年发布 发的ScriptEase Javascript 1.0是 Navigator 3.0中 的Netscape  (最初命名为 由Netscape公司 发布 Navigator 4.0中, Cmm,即C‐‐语 和SUN公司联合 但不符合在之后 言) 开发,在 发布的ECMA‐ Netscape  262规范第一版。 Navigator 2.0中 搭载发布
  • 5. Javascript 历史 • Javascript 1.3 • 搭载在随后发布的NetscapeNavigator4.06中,是Netscape第一个真正符合ECMA-262规 范第一版的脚本语言实现,但这已经落后于Microsoft公司,因为在这之前微软公司发布的 IE4.0中搭载的JScript3.0已经做到了这一点。 • Javascript 1.4 – 搭载在Netscape EnterpriseServer(WebServer)中发布,而没有出现在客户端 的浏览器中,主要原因是当时Netscape公司决定全部重写浏览器的代码。 • Javascript 1.5 – 搭载在NetscapeNavigator6.0和Firefox1.0中发布,这是一个相对稳定而全面 的版本,完全符合ECMA-262规范第三版的要求。目前大多数浏览器支持的 Javascript也是这个版本的实现。 • Javascript 1.6 – 搭载在Firefox1.5中发布,增加了对E4X规范的部分实现。 • Javascript 1.7 – 搭载在Firefox2.0中发布,仅引入了少量的新特性。 • Javascript 1.8 – 搭载在Firefox3.0中,引入了部分满足ECMAScript 4/JavaScript2的特性。
  • 7.
  • 9. 核心-ECMAScript • 与宿主环境(浏览器等)无关 • 描述了以下内容 语法 类型 语句 关键字 保留字 运算符 对象
  • 10. ECMAScript 版本 1997年6月 • ECMA‐262 第一版 1998年6月 • ECMA‐262 第二版 强大的正则表达式,更好的文字链处理,新的控制指令,异常 处理,错误定义更加明确,数输出的格式化及其它改变 1999年 • ECMA‐262 第三版
  • 11. DOM & BOM • DOM – DOM(文档对象模型)是 HTML和 XML的 应用程序接口(API)。DOM将把整个页面规 划成由节点层级构成的文档。 • BOM – BOM(浏览器对象模型),可以对浏览器窗口 进行访问和操作。
  • 12. ECMAScript 语法 • 区分大小写 – ECMAScript中的一切,比如变量、函数名、操作符都区分大小写。 • 注释 – //单行注释 – /*javascript code*/多行注释 • 语句 – 语句以分号结尾,如果没有分号则由解析器确定结尾 – {}表示代码块,ifelse语句在多行的时候才要求使用代码块(我们推 荐任何时候都使用代码块)
  • 13. ECMAScript 变量 • 使用var来声明变量,变量是弱类型的 vartest="hi"; vartest=“hi”,test2=“hello”; • 命名变量 – 第一个字符必须是字母、下划线(_)或美元符号($) – 余下的字符可以是下划线、美元符号或任何字母或数字字符 – 关键字不能做为变量名 • 变量声明不是必须的 – 建议大家使用变量前都进行声明 – 否则会污染全局变量
  • 14. ECMAScript 关键字&保留字 • 关键字 break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof • 保留字:不推荐用作变量名和函数名 abstract enum synchronized short boolean export interface static implements extends long super char native debuggerv int class float package throws volvatile goto private transient final byte protected const double import public
  • 16. ECMAScript 原始值和引用值 • 原始值 – 值直接存在变量中 • 引用值 – 存储在变量处的值 是一个指针 (point),指向存 储对象的内存处。
  • 17. ECMAScript 原始值 • 原始值 • 使用typeof运算符获取 – Undefined 原始值类型 – Null – Boolean • 如果变量是一种引用类 – Number 型或Null类型的,返回 – String “object”
  • 18. Undefined 类型 • Undefined类型只有一个值,即 undefined。当声明的变量未初始化时,该 变量的默认值是 undefined。 值 undefined 并不同于未定义的值。但是,typeof 运算符并不 真正区分这两种值。
  • 19. Null 类型 • 另一种只有一个值的类型是 Null,它只有一个专 用值 null,即它的字面量。 • 值 undefined实际上是从值 null派生来的,因此 ECMAScript 把它们定义为相等的。 • 但它们的含义不同。undefined是声明了变量但 未对其初始化时赋予该变量的值,null则用于表 示尚未存在的对象。如果函数或方法要返回的是 对象,那么找不到该对象时,返回的通常是 null。
  • 21. Number 类型 • 这种类型既可以表示 32位的整数,还可以 表示 64位的浮点数。 • 整数:可以用十进制、十六进制和八进制 定义 • 浮点数:必须包括小数点和小数点后的一 位数字(例如,用 1.0而不是 1)
  • 22. String 类型 • String类型的独特之处在于,它是唯一没 Unicode:用四位16进制 有固定大小的原始类型。可以用字符串存 数字表示一个字符 储 0或更多的 Unicode字符
  • 24. ECMAScript 引用类型 • 引用类型,通常指的是对象。 constructor 属性 prototype hasOwnProperty(property) Object isPrototypeOf(object) 方法 propertyIsEnumerable(property) toString() valueOf()
  • 25. ECMAScript 引用类型 • ECMAScript包含以下几种预定义的引用类 型 Array Date String Math Nubmer RegExp Boolean Object Function
  • 26. 类型转换 Undefined • 通过运算符 • 通过if • parseInt(), Nubmer parseFloat() Object • toString() 转换 • 有些方法的参数会 被强制进行类型转 换,如:alert() Boolean String
  • 27. ECMAScript 运算符 一元运算符 位运算符 逻辑运算符 乘性运算符 加性运算符 关系运算符 等性运算符 条件运算符 赋值运算符 逗号运算符
  • 28. 一元运算符 • delete – 只能删除开发者自己定义的属性和方法 • void – 对任何值返回undefined • 前增量、前减量运算 – ++i --I • 后增量、后减量运算 – i++i— • typeof • instanceof
  • 30. ECMAScript 加性运算符 加号: + 1+1=? 1+“1”=? 1+“a”=? 减号: - 1-1=? 1-“1”=? 1-“a”=?
  • 31. ECMAScript 乘性运算符 • 乘法运算符:* • 除法运算符:/ • 取模(求余数)运算符:%
  • 32. ECMAScript 关系运算符 • 关系运算符执行的是比较运算。每个关系 运算符都返回一个布尔值。 >       >= <       <= • 下面这几个分别都返回什么结果?
  • 33. ECMAScript 等性运算符 • == != • ===(不进行类型转换) • 执行类型转换的规则如下: – 如果一个运算数是 Boolean值,在检查相等性之前,把它转换成数字值。false转换成 0,true为 1。 – 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成 数字。 – 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字 符串。 – 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。 • 在比较时,该运算符还遵守下列规则: – 值 null和 undefined相等。 – 在检查相等性时,不能把 null和 undefined转换成其他值。 – 如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。 – 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象, 那么等号返回 true,否则两个运算数不等。
  • 34. ECMAScript 条件运算符 • variable =boolean_expression ?true_value : false_value; • 例子: varresult; if(confirm("I'm tall?")){ result="I'm tall"; }else{ result="I'm short"; } • 等同于: varresult =confirm("I'm tall?")?"I'm tall":"I'm short";
  • 35. ECMAScript 赋值运算符 • 乘法/赋值(*=) • 除法/赋值(/=) • 取模/赋值(%=) • 加法/赋值(+=) • 减法/赋值(-=) • 左移/赋值(<<=) • 有符号右移/赋值(>>=) • 无符号右移/赋值(>>>=)
  • 36. ECMAScript 语句 • 条件: if (condition)statement1 else statement2 • Switch语句: switch (expression) case value:statement; break; ... case value:statement; break; default:statement;
  • 37. ECMAScript 语句 • 循环: do {statement}while(expression); while (expression)statement for(initialization;expression;post-loop-expression)statement for (propertyin object)statement • 使用continue跳出一次循环 • 使用break跳出一层循环
  • 38. ECMAScript 语句 • 结构化错误处理 • try{}catch(err){}finally{} • 也通过throw()抛出异常 • 使用场景: 1. 屏蔽代码块中的错误 2. 实现模块中的错误处理机制
  • 39. ECMAScript 函数 • 定义,两种方式有何不同? – var fun1=function(arg1){} – functionfun1(arg1){} • 调用 fun1(arg1) arguments.callee • 参数对象:arguments • 返回值:return
  • 41. ECMAScript 函数 • this 指向函数运行的上下文环境,也就是 调用该函数的对象 functiontest(){alert(this)} test() this-> window var obj1={};obj1.test=function(){alert(this)} obj1.test()this->obj1
  • 42. ECMAScript 函数 • 改变this的指向 • 定义一个函数Fun,一个对象obj • Fun.call(obj,arg1,arg2) • Fun.apply(obj,[arg1,arg2])
  • 43. ECMAScript 面向对象 • 对象的定义:属性的无序集合,每个属性 存放一个原始值、对象或函数 • ECMAScript支持封装,继承,多态,可以 被看作是面向对象的
  • 44. 类 • 在ECMAScript中并没有真正的类,它使用 函数来描述一个对象,解释器可以根据一 个函数的描述来构建对象。因此在功能上 讲函数和类是等价的。 function Foo1(){ alert(“hello!”); } var obj = new Foo1();
  • 45. 结果会是啥? functionFoo1(){ alert(“hello!”) } alert(Foo1.prototype.constructor)
  • 47. 创建类的方法 functionmyFunc(par1){ this.prop1=par1; this.prop2=xxx; } myFunc.prototype.method1=function(){} myFunc.prototype.method2=function(){} var obj=new myFunc(par1)
  • 48. 创建一个对象(实例) • 使用new关键字 obj1=newMyFunc() obj1指向一个新的对象 MyFunc的prototype如果是对 象,则将它复制给obj1的内部 属性_proto_ 执行(构造函数) MyFunc.call(obj1,arg1,arg2...)
  • 49. ECMAScript的原型链继承 method1 method1 method2 method2 method1 method2
  • 50. 继承 functionClassA(sColor){ this.color =sColor; } ClassA.prototype.sayColor =function() { alert(this.color); }; functionClassB(sColor,sName){ ClassA.call(this,sColor); this.name =sName; } var objA = new ClassA("blue"); ClassB.prototype =newClassA(); var objB = new ClassB("red", "John"); ClassB.prototype.constructor=ClassB; objA.sayColor(); //输出 "blue" ClassB.prototype.sayName =function objB.sayColor(); //输出 "red" (){ objB.sayName(); //输出 "John" alert(this.name); };
  • 51. 关于在JS中使用面向对象? • 维护 • 复用 • 模块 • 组件