javaScript_jp

1,Javascript 简介
      诞生于1995年,当时的主要目的是处理由以前服务器语言负责的一些没有填写的必填域,是否输入了无效的值。在web日益流行的同时,人们对客户端脚本语言的需求也越来越强烈,那时绝大多数因特网用户使用的速度仅为28.8kbit/s的猫上网,但网页的大小和复杂性却不断增加,为完成简单的表单验证而与服务器交换数据只会加重用户的负担。
    1995年2月 计划在Netscape Navigator2开发名为LiveSript的脚本语言,同时在浏览器和服务器中使用,为了赶在发布日期前完成LiveScript开发,Netscape和sun公司建立了一个开发联盟,在Netscape Navigator2发布的前夕,为了搭上媒体上热炒的java顺风车,临时把LiveScript改名为javaScript。在Navigator3发布不久,ie3就加入了名为JScript的javaScript的实现。这意味着有两个不同的javascript版本:javascript,jscript.当时并没有标准规定JavaScript的语法和特性。
    1997年,JavaScript1.1 为蓝本的建议被提交给了ECMA(European Computer ManufacturersAssociation欧洲计算机制造商协会)。定义了ECMAScript新脚本语言的标准(ECMA-262)。第二年,ISO/IEC(International Organization for Standardization and International Electrotechnical Commission,国标标准化组织和国际电工委员会)也采用了ECMAScript作为标准(ISO/IEC-16262),自此浏览器开发商就致力于将ECMAScript作为各自JavaScript实现的基础。

2,Javascript特点    
    1)脚本语言
        在html中执行
        
    2)解释性语言
        JS  PHP
        浏览器
            ie        js解释器  
            firefox        js解释器
            google        js解释器
        编译型语言
        Java C
            (
                .java->.class    字节码
                .c   ->.o        二进制
                    编译:语法校验
             )
    3)弱类型语言
        var a = 3;    // 数字类型
        a = false;    // 布尔类型

        强类型
        int a = 3;
        a = false;//报错
        float b = 3.0;
        boolean f = false;
    4)从上往下顺序解析执行

3,JavaScript的实现
      一个完整的JavaScript的实现应该包含:
        核心         ECMAScript
        文档对象模型    DOM
        浏览器对象模型    BOM
      1) ECMAScript
        ECMA-262 定义的EMCAScript与Web浏览器没有依赖关系。浏览器仅是ECMAScript实现可能的宿主环境之一,宿主环境不仅提供基本的ECMAScript实现同时也提供该语言的扩展,以便语言与环境之间对接交互。扩展如DOMECMA规定了这门语言的组成部分
        1,语法
        2,类型
        3,语句
        4,关键字
        5,保留字
        6,操作符
        7,对象
      2) DOM(文档对象模型)
        DOM(Document Object Model) 是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构。
          html代码:
        <html>
              <head>
                <title>hello</title>
              </head>
              <body>
                <p>nihao </p>
              </body>
        </html>
              dom模型
            html
            /    \
        head    body
         |    |
        title     p
         |     |
        'hello'    '你好'
      3) BOM(浏览器对象模型)
        BOM(Browser Object Model),开发人员可以使用BOM控制浏览器显示的页面以外的部分。弹出新浏览器窗口;移动,缩放,关闭浏览器的功能;提供浏览器详细信息的navigator对象;提供浏览器所加载页面的详细信息的location对象;提供用户显示器分辨率详细信息的screen对象;对cookies的支持;支持XMLHttpRequest,IE中的ActiveXObject自定义对象

4,兼容性
      JavaScript的三个组成部分,在当前五个主要浏览器(IE,Firefox,Chrom,Safari,Opera)中得到了不同程度支持,其中,所有浏览器对ECMAScript3支持大体都还不错,对ECMAScript支持程度越来越高,但对DOM的支持彼此相差较多,对已经正式纳入HTML5标准的BOM来说,尽管各浏览器都实现了某些总所周知的共同特性,但其他特性还因浏览器而异。

5,在HTML中使用JavaScript
    1)通过<script>元素,有如下几个属性
        type: 可看做是language的替代属性,表示编写代码使用的脚本语言的内容类型,MIME这个属性非必须,默认是text/javascript
          src: 表示包含要执行代码的外部文件

          async:立刻下载脚本,但应妨碍页面中其他操作(只针对外部脚本文件)
          charset : 指定src属性指定的代码的字符集,大多数浏览器会忽略这个值。
          defer: 表示脚本可以延迟到文档全部被解析和显示之后再执行(只针对外部脚本文件)
          language: 已废弃
          
    2)三种方式:
    1.事件定义式:作为属性值放在标签中
          2. 直接嵌入在页面中
        <script type="text/javascript">
            //javascript代码
            function(){
          
            }
        </script>
          3. 包含外部的js文件
            <script type="text/javascript" src="test.js"></script>(后标签不要省略,不符合html规范)
        【注意事项】
            1.不要在<script>标签中再填写其他js代码,否则将会忽略
            2.src 可以跨域访问 。例如:http://cdn.code.baidu.com/ 百度静态资源公共库
            3.标签位置<head>标签中:等到全部的js代码都被下载,解释和执行完成后才能开始呈现页面的内容。可将代码引用放到<body>元素放到内容后面。
            4.延迟脚本 defer="defer",延迟至浏览器遇到</html>标签后再执行。如果有多个延迟脚本,并不会按照顺序执行。最好包含一个延迟脚本,并且将其放在页面最底部,该属性适用于外部引用的js

5,<noscript>
      当浏览器不支持脚本或者浏览器支持脚本,脚本被禁用,可以让页面平稳的退化
    <noscript>
        本页面需要浏览器支持(启用)javascript
    </noscrpt>
6,基础语法
      1) 区分大小写
          typeof 关键字, typeOf 非关键字
      2) 标识符
      指变量,函数,属性的名字或者函数的参数。标识符是按照以下规则组合起来的一或多个字符:
      1.字母,数字,下划线,$组成。
      2.只能以字母,下划线,$开头。
      3.不能将关键字作为标识符。
      4.命名采用驼峰式命名
      3) 注释
        //单行注释
        /* 多行注释 */
      4) 语句
        每个语句以分号结尾,如果省略分号,由解析器确定语句的结尾,即分号可以省略,但是我们要求每个语句的末尾都应该有分号,

7,关键字保留字
    1) 关键字:(在js中有特殊功能)
        break        do         instanceof    typeof
        case        else    new,        var
        catch        finally    return,        void
        continue    for        switch,        while
        debugger    this    function    with
        default        if         throw        delete
        in             try

    2) 保留字:(将来可能成为关键字)
        abstract    enum    int            short
        boolean        export    interface    static
        byte        extends    long        super
        char        final    native        synchronized
        class        float    package        throws
        const        goto    private        transient
        debugger    double    implements    protected
        volatile    import    public
8,变量
  ECMAScript的变量是弱类型(松散类型),可以用来保存任何类型的数据。定义变量时使用var操作符
    
    var 变量名;
    声明             var message;
    初始化            message = "hello"
    声明并初始化    var message = "hello";
    定义多个变量
                    var msg1 = "hello";
                    var msg2 = "world";

                      var message= "hello",found=false, age = 29;

    局部变量与全局变量:
        1) 使用var操作符定义的变量将成为定义该变量的作用域中的局部变量。
              function test(){
                var message = "hello";  
              }
              test();
              alert(message); //错误
        2) 如果在函数中定义变量没有加var,该变量为全局变量
              function test(){
                message = "hello";  
             }
              test();
              alert(message); //可以访问
9, 数据类型
    
      1)ECMAScript不支持自定义类型,只有6种数据类型:
        5中基本数据类型(简单数据类型)
              Undefined    未定义    "undefined"
                var a ;
                var a = "undefined";//不做
              Null        空引用数据类型 "null"
                var a = null;
              Boolean        布尔类型 true/false
                var a = false;
              Number        数字类型
                整数
                浮点数
              String        字符串类型 "" ''
                var a ="true";
                var a ='hello';
                        
        1)中引用数据类型(复杂数据类型)
              Object(本质由一组无序的键值对组成)
                var person= new Object();
                person.name = "terry";
                person.age = 12;

    
      2) typeof 操作符
          返回该变量名所指向数据的类型
        语法:
            typeof 变量名  
        可有取值如下
              "undefined"        未定义
              "boolean"        布尔类型
              "string"        字符串
              "number"        数值
              "object"        对象或者null
              "function"        函数

      3) 基本数据类型
    1. Undefind
         该类型只有一个值undefined。对未声明和未初始化的变量执行typeof操作符都返回undefined
        var a;
        console.log(a);            // undefined
        console.log(typeof a);    // undefined
        console.log(b);            //ReferenceError: b is not defined
        console.log(typeof b);    // undefined
    2. Null类型
         该类型只有一个值 null ,null可以表示一个空对象的指针。
        var car = null;
        console.log(typeof car )    //object  null被认为是空对象的引用

        【使用情景】
             如果一个变量准备将来保存对象,可以将该变量初始化null而不是其他,这样可以通过检查null值就可以知道相应的变量是否已经保存了一个对象的引用。
               if(car !=null ){
                 //car对象执行某些操作
              }
         实际上 undefined 派生自null值。undefined == null 结果为 true
        null与undefined用途不同,null可以用来表示一个空对象,但是没有必要把一个变量的值显式设置为undefined

    3. Boolean类型
         该类型只有两个值,true,false虽然boolean类型的取值只有两个,但是ECMAScript中所有的类型的值都有与这两个Boolean值等价的值
           
    4. Number
         该类型用来表示整数和浮点数
         1) 表示方法:
            1. 整数:
                
                   十进制数: 55    0~9
                   八进制数: 首位为0,其他位为(0~7 如果字面值超出了范围,前导0将会被忽略)
                    070 (表示 7*8一次方 =  56)
                    079    (超过了范围,表示79)
                   十六进制: 前两位为0x,其他位为(0~9,A~F)
            2. 浮点数
                所谓浮点数值,就是该数值中必须包含一个小数点,并且小数点后必须至少有一位数字。浮点数值的最高精度是17位小数。
                    例如:    var f = 1.2;
                 科学计数法:e
                       var e = 3.125e7;        //31250000
        2) 数值范围
            由于内存的限制,ECMAScript不能保存世界上所有的数值。ECMAScript能表示的最小数值保存在Number.MIN_VALUE中,能表示的最大的数值保存在Number.MAX_VALUE中。如果某次计算的结果超过了JavaScript数值范围,将会返回Infinity(正无极)或者-Infinity(负无极)使用 isFinite()函数可以判断参数是否在最大值和最小值之间,如果在,返回true

            在绝大数浏览器中:
            Number.MIN_VALUE : 5e-324
                   Number.MAX_VALUE :    1.7976931348623157e+308
            如果某次计算返回了正的或者负的Infinity,那么该值无法继续参与下一次计算。可以使用isFinite(para)函数判断para 是否在最大数最小数之间
        3) 非数值 NaN (not a number)
               该数值表示一个本来要返回数值的操作数未返回数据的情况。
                var a = 10/'a';
                console.log(a);        //NaN
                
            任何涉及到NaN的操作都会返回NaN; NaN与任何值都不相等,包括NaN本身。
            isNaN,判断参数是否“不是数值”,当参数para不是数值的时候返回true    
                isNaN(NaN);        true
                isNaN("blue");    true    无法转换为数值
                isNaN(10);        false    10
                isNaN("10");    false    10
                isNaN(true);    fase
        注意:
               1) 默认情况下,ECMAScript会将小数点后带有6个零以上的浮点数转化为科学计数法。
                0.0000003 => 3e-7
            2) 在进行算术计算时,所有以八进制十六进制表示的数值都会被转换成十进制数值。
                   
             3) 保存浮点数需要的内存是整数的两倍,因此ECMAScript会不失时机将浮点转换为整数
                   例如:
                   var a = 1.;
                   var b = 1.0;  都将解析为1
            4) 避免测试某个特点的浮点数值,是使用IEEE754数值的浮点计算的通病
                例如:    0.1+0.2结果不是0.3,而是0.30000000000000004
            
    5. String
         该类型表示由零个或者多个16位Unicode字符组成的字符序列,即字符串。字符串可以由双引号或者单引号表示
         1)字符字面量
              \n    换行
              \t    制表
              \b    退格
              \r    回车
              \\    斜杠
              \'    单引号
              \"    双引号
         2)字符长度     
             通过length属性获取字符长度
         
    6. Object
         ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行"new 对象类型"来创建。
             var o = new Object();
        Object类型是所有它的实例的基础,换句话说,Object类型所具有的任何属性和方法,同样存在于更具体的对象。
             constructor:                    保存用户创建当前对象的函数
               hasOwnProperty(propertyName);    用于检查给定的属性是否在当前对象实例中
               toLocaleString();                返回对象的字符串表示,该字符串与执行环境的地区对应
               toString();                        返回对象的字符串表示
               valueOf();                        返回对象的字符串,数值,布尔值的表示。

  7. 类型转换
    01) 其他数据类型到Boolean类型转换
        通过Boolean() 函数转换

           【Boolean      true        false】
            String        非空字符串    ""
            Number        任何非0        0和NaN
            Object        任何对象    null
            Undefined    n/a            undefined    (n/a not applicable 不适用)
        例如:
            Boolean("");        //false
            Boolean(0);            //false
            Boolean(NaN);        //false
            Boolean(null)        //false
            Boolean(undefined)    //false
            Boolean("briup");    //true
            Boolean(1);            //true

    02) 其他数据类型到数值类型转换
        1.Number()
            1) 如果转换的值是null,undefined,boolean,number
                Number(true);        //1
                Number(false);        //0
                Number(null);        //0
                Number(undefined);    //NaN
                Number(10);            //10 如果是数字值,原样输出
        
            2) 如果是字符串:
                Number("123");  //如果仅包含数值,转换为对应的数值
                Number("234.1");//解析为对应的小数
                Number("+12.1");//首位为符号位,其余为为数值,转换为对应的数值
                NUmber("1+2.3");//NaN 符号位出现在其他位置,解析为NaN
                Number("0xa");  //如果仅包含十六进制格式,转为为对应的十进制的值
                Number("010");    //【注意!】不会当做八进制被解析,结果为10
                Number("");        //空字符串被转换为0
                Number("123ac");//包含其他字符: NaN
                Number(" 12");    //12
        2.parseInt()
            1) 如果转换的值是null,undefined,boolean,number
                parseInt(true);        //NaN
                parseInt(false);    //NaN
                parseInt(null);        //NaN
                parseInt(undefined);//NaN
                parseInt(10);        //10 如果是整数值,原样输出
                parseInt(10.3);        //10 如果是小数,舍去小数点一级后面的内容
            2) 如果是字符串:
                parseInt("123");  //123;如果仅包含数值,转换为对应的数值
                parseInt("234.1");//234;小数点后面的数值省略
                parseInt("+12.1");//12; 首位为符号位,其余为为数值,转换为整数
                parseInt("0xa");  //10; 如果仅包含十六进制格式,转为为对应的十进制的值
                parseInt("010");  //10; 【注意!】不会当做八进制被解析,结果为10
                parseInt("");      //NaN;空字符串被转换为NaN
                parseInt("1+2.3");//1;    如果首位为数值,依次向后解析,找到连续的数值,直到遇到第一个非数值的,将之前获取的数值转换为Number返回
                parseInt("123ac");//123;
           3.parseFloat()
             与parseInt() 类似,但是也有不同:
                1.字符串中的第一个小数点是有效的,而第二个小数点则无效其后的内容会被省略
                2.始终忽略前导0
                parseFloat("22.3.4")    //22.3
                parseFloat("022.34");    //22.34
                3.不能解析0x
    03) 其他数据类型到字符串类型转换
        1. toString()函数
            默认情况下,toString()是以十进制格式返回数值的字符串表示,通过传递参数,可以输入以二进制,八进制,十六进制乃至任意有效进制格式的字符串值
                var num = 10;
                num.toString();        "10"
                num.toString(2);    "1010"
                num.toString(8);    "12"
                num.toString(16);    "a"
            但是null ,undefined 没有toString() 方法
                  null.toString()            //报错 TypeError: null has no properties    
                   undefined.toString();    //报错 TypeError: undefined has no properties
        2. String() 构造函数
                   String(null)        "null"

                   String(undefined);     "undefined"


一、DHTML
        DHTML----Dynamic HTML,就是动态的html,是相对传统的静态的html而言
    的一种制作网页的概念
        所谓动态HTML,即一个页面中包括html+css+javascript(或其它客户端脚本)
        不是W3C的标准,是netspace和microsoft指定的4.x代浏览器应当支持的技术。
        将HTML标记、属性和CSS样式都对象化
        可以动态存取HTML文档中的所有元素
        可以使用属性name或id来存取或标记对象
        改变元素内容或样式后浏览器中显示效果即时更新
        事件处理
        DHTML对象模型包括浏览器对象模型(BOM)和文档对象模型(DOM)
        DOM
            document
                getElement_x_x;
            
        BOM(window)  
            对话框 alert confirm prompt
            定时器 setTimeout setInterval


    1.document对象  ,代表窗口中显示的html文档
        三个重要函数:
                1.document.getElementById();通过元素id去得到这个元素
                2.document.getElementsByName();通过元素的name值,获取页面
            中所有指定的这个name值的元素的一个集合
                3.document.getElementsByTagName();通过元素的标签名称,获得
            页面中所有指定标签的元素对象的集合

            总结:
                通过这些函数,可以获得页面中的一个或一批元素对象,获得对象
             之后我们可以去拿到标签元素中的值,或是给这些标签元素赋值,或
             者修改该标签元素的属性值(style属性等)
                需要用户输入的元素,我们获得它里面的值或者给它赋值都是用.value,
            比如说input输入框,select下拉列表等。
                还有一些标签元素的值时要写在开始和结束标签之间的,比如div,span,
            td,font等,这些标签我们给它赋值或是获得值使用.innerHTML
        
    2.窗口的打开和关闭
        1).window.open(url,name,config);
           window.close();
           eg:
               var win = window.open(url,name,config);
               win.close();
        2).对话框
        3).状态栏
            window.status="hello";
二:Dom节点的方法
   childNodes子节点,数组,不同的浏览器效果不同
   nodeType节点类型,所有浏览器都适用
         返回1是元素节点
     返回3是文本节点
   children:只包含元素,不包含文本,
        所有浏览器都使用
   parentNode:父节点
首尾节点: firstChild IE6-8使用的,除去第一个空白字符
          firstElementChild 更高级版本的使用的
      lastChild:包含后面的空白字符
      lastElementChild:不包含后面的空白字符
      nextSibling
      nextElementSibling
      previousSibling
      previousElementSibling
三:操作元素属性
  第一种:oDiv.style.display='block';
      oDiv.style.color
      oDiv.style.fontSize
  第二种:oDiv.style['display']=
  第三种:Dom方式 很少用
     setAttribute('value','edas')
    第一个参数是属性的名字
    第二个参数是属性的值
    removeAttribute(名称)
    getAttribute(名称)

    DomTest.html

四:Dom操作和应用  例如:ul中添加li
1)创建Dom元素
     createElement(标签名)
     appendChild(节点)
     赋值:innerHTML=input.value;
           innerText=
2)插入元素
    insertBefore(newchild,refchild);
3)删除元素
     removeChild(节点)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值