zoukankan      html  css  js  c++  java
  • javascript 学习一(概述+基本语法)

    http://js.do/

    概述

    JavaScript :脚本语言

    诞生于1995年。

    javascript 1.0,发布于Netscape Navigator 2  @1996年3月

    布兰登·艾奇(Brendan Eich,1964年~),JavaScript的发明人。

    Javascript语言实际上是两种语言风格的混合产物----(简化的)函数式编程+(简化的)面向对象编程。

    总的来说,他的设计思路是这样的: 

    (1)借鉴C语言的基本语法;

    (2)借鉴Java语言的数据类型和内存管理;

    (3)借鉴Scheme语言,将函数提升到"第一等公民"(first class)的地位;

    (4)借鉴Self语言,使用基于原型(prototype)的继承机制。

     ——————————————————————————————————————

    JavaScript语言由三部分组成:ECMAScript(核心),DOM(document object model),BOM(browser object model)。

    ECMAScript

    Netscape Navigator 3 中发布了javascript1.1,不久,IE3中微软加入了JScript(javascript)。

     两个不同javascript版本使标准化问题提上了日程。

    1997年,欧洲计算机制造商协会(ECMA,European Computer Manufacturers Association)的39号技术委员会(TC39,Technical Committee #39)

    完成了ECMA-262标准(1997年6月,定义了脚本语言标准ECMAScript),目前已更新第五版(2009年12月)

    ECMAScript 与Web浏览器没有依赖关系。它不包含输入和输出的定义,但规定了语法,类型,语句,关键字,保留字,操作符,对象。

    以之为基础可构建完善规范的脚本语言。 如javascript,actionscript。它们与 ECMAScript相容,但都进行了扩展。

    ------------------------------------------------------------------------------------

    DOM:

       是针对XML但经过扩展用于HTML的API(application programming interface)。

    将整个页面映射为一个多层节点结构,页面中每个部分都是某种类型的节点,节点内包含不同类型的数据。借此可以轻松自如地访问和操作改变 HTML、XHTML 以及 XML 文档中的每一个单独的元素。

    W3C规划了DOM标准,分为 3 个不同的部分:

    1. 核心 DOM - 针对任何结构化文档的标准模型;
    2. XML DOM - 针对 XML 文档的标准模型,义了所有 XML 元素的对象和属性,以及访问它们的方法;
    3. HTML DOM - 针对 HTML 文档的标准模型, 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。

    --------------------------------------------------------------------------------------------

    BOM: 

    BOM主要处理浏览器窗口与框架,但事实上,浏览器特有的JavaScript扩展都被认作是BOM的一部分

    这些扩展包括:

    1. 弹出新浏览器窗口的能力;

    2. 移动、关闭和更改浏览器窗口大小的能力;

    3. 可提供WEB浏览器详细信息的导航对象;

    4.可提供浏览器载入页面详细信息的本地对象;

    5 .可提供用户屏幕分辨率详细信息的屏幕对象;

    6. 支持Cookies;

    7. Internet Explorer对BOM进行扩展以包括ActiveX对象类,可以通过JavaScript来实现ActiveX对象。

    由于BOM没有相关标准,每个浏览器都有其自己对BOM的实现方式。BOM有窗口对象、导航对象等一些实际上已经默认的标准,但对于这些对象和其它一些对象,每个浏览器都定义了自己的属性和方式。

     ——————

    HTML中使用JavaScript

      <script>元素有6个属性:

    1. async 表示应立即下载脚本,但不应妨碍页面中得其他操作,只对外部脚本文件有效。
    2. defer  表示脚本可以延迟到文档完全被解析和显示之后再执行,只对外部脚本文件有效。
    3. src     表示包含要执行代码的外部文件
    4. type   表示编写代码所使用的脚本语言的内容类型(MIME),非必需
    5. charset 表示通过src指定的代码的字符集(大部分浏览会忽略它,所以很少用)
    6. language 已废弃
    func sayScript(){
        alert("</script>"); 
    }
    

      字符'/'需要转义

    基本概念

    1. javascript 区分大小写
    2. 标识符第一个字符必需是字母,下划线(_)或一个美元符号($)
    3. 语句结尾的分号可以省略,但为了避免一些错误,同时增进代码的性能,原则上分号还是要保留。
    4. ECMAScript 5 引入 "strict mode",以解决ECMAScript 3 中的一些不确定行为,并对某些不安全操作抛出异常。
      1. 在整个脚本顶部 添加 "use strict";
      2. 在函数内部的上方包含这条编译指示:"use strict";

    关键字(26个)

    break,  do,  instanceof,  typeof,  case,  else,  new,  var,  catch,  

    finally,  return,  void,  continue,  for,  switch,  while,  debugger,  

    function,  this,  with,  default,  if,  throw,  delete,  in,  try

    保留字

    abstract,  enum,  int,  short,  boolean,  export,  interface,  static,  byte,

    extends,  long,  super,  char,  final,  native,  synchronized,  class,  float,

    package,  throws,  const,  goto,  private,  transient,  implements,  protected,

    volatile,  double,  import,  public

    5版新增两个 let,  yield; 同时eval和arguments在严格模式下也不能做标识符和属性名。

    变量

    1. ECMAScript的变量是松散类型的,可以用来保存任何类型的数据。
    2. 变量未初始化时保存的是一个特殊值 undefined
    3. 可以改变变量的类型,但不推荐: var message = "hi"; message = 100;
    4. javascript中没有块作用域,只有函数才能产生新的作用域。
      var x = 1; 
      document.write(x); // 1 
      if (true) { 
          var x = 2;         //可以重复申明
          document.write(x); //2 
      } 
      document.write(x);     // 2 if{}无法像C语言那样构建新的作用域
      
      // 修改版
      var x = 1; 
      document.write(x); // 1 
      if (true) { 
          (function () { 
            var x = 2; 
            document.write(x); //2 
          })(); 
      } 
      document.write(x);     // 1 通过function构建新的作用域
    5. 使用var定义的变量将成为定义该变量的作用域的局部变量,而如果省略var操作符,则会创建一个全局变量。//不推荐省略
      function test() {
          message = "hi";//全局变量
      }
      test();
      alert(message);  // "hi"
      //--------------
      function test() {
          var message = "hi";//局部变量
      }
      test();
      alert(message);  //错误
      
    6. javascript中函数和变量的声明都有一个hoisting机制:声明永远都会被提升到作用域的最顶端(只是提升变量的声明,并不会把赋值也提升上来)。
      var a = 10;
      (function () {
          document.write(a);//10
      })()
      
      var a = 10;
      (function () {
          var a = 20;
          document.write(a);//20
      })()
      
      // hoist机制
      var a = 10;
      (function () {
          document.write(a);//undefined
          var a = 20;
      })()
      
      //相当于
      var a = 10;
      (function () {
          var a; //在这里对变量hoisting,先声明
          document.write(a);
          a = 20;
      })()
      
      f();
      function f(){
          document.write("hello");
      }
      //相当于
      function f(){
          document.write("hello");
      }
      f();
      
      //下面的写法报错
      f();
      var f = function(){
          document.write("hello");
      }
      //相当于
      var f;
      f();
      f = function (){
          document.write("hello");
      }
      

    数据类型

    •    ECMAScript中数据类型分为两类:原始类型(primitive type) 和对象类型(object type)
    •    原始类型包含: boolean, number 和 string
    •    对象类型是  Object, Object本质上是由一组无序的名值对组成。
    •    另有两种特殊的数据类型 null undefinded ,它们和原始类型都属于基本数据类型
    •    不支持任何创建自定义类型的机制
    •    由于是松散类型,所以需要一种手段来检测给定变量的类型—— typeof : alert(typeof 95)

    undefined

    undefined类型只有一个值:undefined,这个值的引入是为了正式区分空对象指针与未经初始化的变量,因为Js是脚本语言,变量未赋值在编译性语言里直接无法运行的,但在脚本语言中却是可以运行的,所以需要一个在编译性语言中不存在的数据类型来表示这一状态。

    var s;
    document.write(s);//undefined
    //document.write(a);//Uncaught ReferenceError: a is not defined
    
    document.write(typeof s);//undefined
    document.write(typeof a);//undefined
    

    null

    null类型也只有一个值:null,逻辑上表示一个空对象指针,typeof 检测 null时返回object

    var s = null;
    document.write(typeof s);//object
    

    boolean

    两个值: true, false。 任意类型都可以转为一个相应的布尔值, Boolean("sd");Boolean(0)

    转换规则:

     Boolean  true  false
     String  任何非空字符串  ''(空字符串)
     Number  任何非0数字值(包括无穷大)  0和NAN
     Object  任何对象  null
     Undefined  不适用  undefined

    number

    JavaScript的数字都是双精度的浮点数(基于IEEE754 64位来表示,相当于C语言中的double)。

    JavaScript中的整数仅仅是双精度浮点数的一个子集,而不是一个单独的数据类型。

    位运算时会先隐式地转换为32位整数后进行运算。

    整数字面量

    8进制:070,  16进制: 0xA, 0x1f,  十进制:55, 08, 079

    其中, 并非所有JS实现都支持八进制字面量,所以尽量不要使用(在ECMAScript 6的严格模式下,八进制字面量是被禁止使用的)。

    var a = 123456789123456789;
    var b = 12345678912345678911;
    var c  = -123456789123456789;
    var d = -12345678912345678911;
    document.write(a);                //123456789123456780
    document.write("<br>");
    document.write(b);                //12345678912345680000
    document.write("<br>");
    document.write(c);                //-123456789123456780
    document.write("<br>");
    document.write(d);                //-12345678912345680000

    浮点数字面量

    1.1, 0.1, .1 

    科学计数法: 3.125e7,  3.125E7

    浮点数的最高精度是17位,但在进行算术运算时可能存在误差。0.1+0.2=0.30000000000000004,0.3-0.2=0.09999999999999998 

    var a = 0.1,
        b=0.2;
    if(a+b==0.3){
        document.write("ok");
    }else{
        document.write("no");  //no
    }
    

    在大多数浏览器中,Number.MIN_VALUE=5e-324,Number.MAX_VALUE=1.7976931348623157e+308

    因为浮点数计算的误差,一般使用JS做金融计算时,使用大整数而不使用小数(以分为单位,而不要以元为单位)。

    Math.*

    Math.pow(2,53)

    Math.round(.6)

    Math.ceil(.6)

    Math.floor(.6)

    Math.abs(-5)

    Math.max(x,y,z)

    Math.min(x,y,x)

    Math.random()  // 生成一个大于等于0 小于1.0的伪随机数

    Math.PI

    Math.E

    Math.sqrt(3)

    Math.pow(2,1/3)

    Math.sin(0)

    Math.log(10)    //10的自然对数

    Math.log(100)/Math.LN10  //以10为底100的对数

    Math.log(100)/Math.LN2    //以2为底100的对数

    Math.exp(3)                     //e的3次幂

    JS中的算术运算在溢出或被0整除时都不会报错

    -Infinity, Infinity

    计算时超出范围,会返回:-Infinity, Infinity.

    1. Number.NEGATIVE_INFINITY 和 Number.POSITIVE_INFINITY 这两个属性中保存有这两个值
    2. 确定一个值是否有穷的,isFinite()
      document.write(Number.NEGATIVE_INFINITY ); //-Infinity
      document.write(Number.POSITIVE_INFINITY);  //Infinity
      var result = Number.MAX_VAULE * 2
      document.write(isFinite(result));           // false
      document.write(result);                     // NaN

    NaN (Not a Number)

    这个值用于表示未如期返回数值(避免抛出异常)

    1. 任何涉及NaN的操作都会返回NaN
    2. NaN与任何值都不相等,包括NaN本身
    3. 判别方法:isNaN(a),其在接收到一个值后,会尝试转换为数值,不能转换则返回true.
    4. isNaN()方法同样适用于对象。会先后调用对象的valueOf() 和 toString()方法,并尝试将结果转为数值,如果都失败则返回true

    数值转换: Number(), parseInt(), parseFloat()

    1. number(): 布尔类型转为0或1,null转为0,undefined转为NaN, 对象则先后调用valueOf() 和 toString(),再转换结果ParseInt: 第一个字符必需是数字或符号,第一个字符通过后,会依序解析后续字符,直至解析完或遇到一个非数字字符。
    2. 0x开头的数值可以识别为16进制,但0开头的字符串会忽略其前导的零,不会识别为8进制。
      document.write(Number('0x123'));  //291
      document.write(Number('0123'));   //123
      document.write(Number(0123));     //83
      document.write(Number('0123.21'));//123.21
      document.write(Number('dsdd'));   //NaN
      document.write(Number('12dsdd')); //NaN
      document.write(Number(null));     //0
      document.write(Number(true));     //1
    3. parseInt 是将字符串转为整数,默认按10进制转换,0x开头的字符串按16进制转换,也可以明确指明按某种进制转换
      document.write(parseInt('0x123'));  //291 ,自动按16进制转换
      document.write(parseInt('0123'));   //123 (ECMAScript 3中会识别为8进制,ECMAScript 5则会过滤掉前面的0)
      document.write(parseInt('0123.21'));//123 
      document.write(parseInt('dsdd'));   //NaN
      document.write(parseInt('12dsdd')); //12
      document.write(parseInt(null));     //NaN
      document.write(parseInt(true));     //NaN
      
      document.write(parseInt('0x123',8));  //0   ,按8进制转换,遇到无效字符x终止
      document.write(parseInt('0123',8));   //83  ,8进制的123,输出为10进制是83
      document.write(parseInt(0123,8));     //NaN ,0123是10进制83,自动转为字符串,第一个字符8在8进制中是无效的
      document.write(parseInt(0123));       //83
      document.write(parseInt('123',8));    //83
      
      document.write(parseInt('AF',16));    //175
      document.write(parseInt('AF',8));     //NaN
      document.write(parseInt('AF'));        //NaN
      
      document.write(parseInt('10',2));     //2
      document.write(parseInt('3.125e7'));     //3
    4. parseFloat() 只解析10进制,且如果没有小数点或小数点后都是0 ,会返回整数。
      document.write(parseFloat('0x123'));     //0
      document.write(parseFloat('0123'));      //123
      document.write(parseFloat('0123.21'));   //123.21
      document.write(parseFloat('123.21.21')); //123.21
      document.write(parseFloat('12dsdd'));    //12
      document.write(parseFloat('3.125e7'));   //31250000
      

    String

     字符串由16位Unicode字符组成,字符串一经创建同样是不可变的。

    转义符

     字符串既可以使用双引号表示,也可以使用单引号表示。

     'xnn' 表示一个ascii字符

     'unnnn'表示一个unicode字符

    转换为字符串:toString(),String()

     number调用toString()方法时可以传入参数,指明以哪种进制格式输出  : 10.toString(2); //1010

    var a =10,
       b=true,
       c=null,
       d;
    alert(a.toString());    //10
    alert(a.toString(3));   //101
    alert(b.toString());    //true
    //alert(c.toString());  //Uncaught TypeError: Cannot read property 'toString' of null on line 8
    //alert(d.toString());  //Uncaught TypeError: Cannot read property 'toString' of undefined 
    
    alert(String(a));       //10
    alert(String(b));       //true
    alert(String(c));       //null
    alert(String(d));       //undefined
    

    Object

    ECMAScript中的对象通过集合来实现的。可以通过new 操作符来创建实例,然后再为这个实例中添加属性和方法,就可以得到自定义的对象。

    var o = new Object();   //不需要传入参数时,()可以省略,var o = new Object ; 

    var o={a:11,b:'ab'}

    操作符

    Js 的数据类型是可变的,在进行运算时会自动转换数据类型

    算术运算符

    单目运算符 : ++,-- ,-,+ 和 乘法运算符:*, / ,%  在运算前会自动将操作数转为Number类型。  

    var a = true;
    alert(+a);          //1
    alert(++a);         //2
    

    不同处在于,JS中整数也是浮点表示法,所以

    js中 1/2 不是等于0而是0.5。

          1/0不报错,而是得到Infinity

          0/0 或 Infinity/Infinity 或 Infinity * 0 结果为NAN  

    加性运算符

     加法:

     如果有一个操作数是字符串,则将另一个操作数转换为字符串(自动调用toString()或String()),然后将两个字符串串接起来。

    document.write(5+"3");                 //53
    document.write(5+null);                 //5
    document.write(5+"");                    //5
    document.write(5+undefined);       //NAN
    

      

     减法:

     如果一个操作数是非数值,则先调用Number()或ValueOf()得到数值再与另一个参数相减。

    document.write("12"-"3");         //9             
    document.write(5-null);              //0
    document.write(5-"");                //0
    document.write(5-undefined);    //NAN

    位运算符

     JS中的number都是以IEEE-754 64位的格式存储,但位运算操作时,会先把64位的值转换成32位的整数,然后执行操作,再将结果转换回64位浮点。

     其他具体运算方式与java一样,除了 ~(按位非),&(按位与),|(按位或),^(按位异或), <<(左移),>>(右移) 外,也包括>>>(无符号右移)。因为JS中同样是没有无符号整型的,甚至于它连真正的整型都没有。

    布尔运算符

    单目运算符 !    运算前会自动将操作数转为Boolean类型

    alert(!0);         //true
    alert(!1);         //false
    

    &&,||的返回类型不一定是bool类型  

    var a = {x:1,y:2};
    document.write(''||undefined);     //undefined
    document.write(undefined||1);      //1
    document.write(a&&1);              //1
    document.write(1&&a);              //[object Object]
    document.write(0&&a);              //0
    document.write(null&&a);           //null
    

    关系运算符

    1. 两个操作数都是数值时,执行数值比较
    2. 两个操作数都是字符串时,比较两个字符串中对应的字符编码值            "23"<"3"   true
    3. 一个操作数是数值,则将另一个操作数也转换为数值后,进行数值比较
      document.write("23"< 3);     //false,   "a"< 3  false(a不能转换为合理的数值,因而被转换为NaN,任何操作数和NAN比较,结果都是false.)
      
      document.write(NaN<3);       //false
      document.write(NaN>=3);     //false
      

        

    4. 如果一个操作数时对象,则调用valueOf()方法,没有valueOf则调用toString()方法,然后再依上面的原则进行比较。
    5. 如果一个操作数是布尔值,则先将其转为数值。

    相等操作符

     == 与 !=

    ===与!==

    条件运算符

    赋值运算符

    逗号运算符

  • 相关阅读:
    随机id
    vue关于父组件调用子组件的方法
    ES6——块级作用域
    在vue中引用superMap
    MSSQL备份脚本
    Ubuntu 使用命令导出数据库
    CSS before 中文乱码
    CentOS7 安装linux 网络不联通问题
    SVN update failed问题解决
    JQ实现树形菜单点击高亮
  • 原文地址:https://www.cnblogs.com/wj033/p/3536062.html
Copyright © 2011-2022 走看看