第三阶段-js

一、javascript的简介

    1.基于对象和事件驱动的语言,应用与客户端

        a.基于对象:

        提供好了很多对象,可以直接拿过来使用

        b.事情驱动:

        html做静态效果,javascript做动态效果

        c.客户端:专门指的是浏览器

    2.js的特点

        a.交互性

        信息的动态交互

        b.安全性

        js不能访问本地磁盘的文件

        c.跨平台性

        java里面跨平台性,虚拟机,能够支持js的浏览器,都可以运行 

       d.javascript和java的区别:

        java是sun公司,现在是oracle,js网景公司

        javascript是基于对象的,jiava是面向对象

        java是强类型的语言,js是弱类型的语言

        java: int i = 10;

        js: var i = 10; var m = "10";

        javascript只需要解析就可以执行,而java需要先编译,再执行

    3.javascript的组成部分

        a.ECMAScript

        ECMA:欧洲计算机协会

        专门制定的js语法、语句

        b.BOM

        broswer object model:浏览器对象模型

        c.DOM

        document object model:文档对象模型

二、js和html的结合方式

    第一种:使用一个标签<script type="text/javascript"></script>

    第二种:引用外部Js文件<script type="text/javascript" src=".js">

    注意:用引入就不要在js标签写代码了

三、js的数据类型

    1.java的基本类型    

    2.定义变量都使用关键字var

    3.js的原始类型

        a.string: 字符串

        b.number: 数字类型

        c.Boolean:true和false

        d.null: 空

        e.undifined: 定义一个变量,没有赋值

    4.typeof() 查看当前变量的数据类型

四、js基本语句

    1.跟java一样:if、switch、while、for

五、js的运算符

    1. js里面不区分整数和小数

        var j = 123;

        alert(j/1000*1000);

        Java里面是0,而js123/1000=0.123*1000=123;

    2. 字符串的相加和相减操作

        a.如果相加时候,做的字符串拼接

        b.如果相减是数字类的字符串类型会进行相减运算,如果是字母其他类型的会提示NaN

    3. boolean类型也可以操作

        a.如果设置成true,相当于这个值是1

        b.如果设置成false,相当于这个值是0

    4. ==和===区别

        ==:比较的只是值

        ===:比较的是值和类型

    5.i++/++i和java里面一样

        i++:先执行后+1

        ++i:先+1后执行

    6.引入知识

        a.直接向页面输出语句(可以把内容显示在页面上)

         document.white("aaaa")

         document.white("<hr/>")

        b.可以向页面输出变量,固定值和html代码

六、js的数组

    1.定义方式(3种)

        a.var arr =[1,2,3]; var arr = [1,"d",true];

        b.使用内置对象Array对象

        var arr = new Array(5);

        c.使用内置对象 Array

       var  arr2 = new Array(3,4,5);

        d.可以存放不同的数据类型

七、js的函数

    1.第一种方式

        a.使用到一个关键字function

        function 方式名(参数列表){

                方法体;

            返回值可又可无

        }

    2.第二种方式

        a.匿名函数

        var add = function(参数列表){

            方式体和返回值;

        }

    3.第一种方式(用得少,了解)

        a.动态函数

        使用到js里面的一个内置对象Function

        var add = new Function("参数列表",“方法和返回值“)

八、js的全局变量和局部变量

    1.全局变量:在script标签里面定义个变量,这个变量在页面中的js部分都可以使用

    2.局部变量: 在方法内部定义个变量,只有内在方法内部可以使用

九、script标签存放的位置

    1.建议script标签放到</body>后面

十、js的String对象

    1.与HTML相似的使用方法(查看手册)

    2.与JAVA相似的使用方法

十一、js的Array对象

    1.创建数组

    2.属性

    3.方法

十二、js的Date对象

    1.在Java里面获取当前时间

    Date date = new Date()

    格式化:toLocaleString()

    2.js里面获取当前时间

    Var date = new Date();        

    document.write(date)

    //转换格式化

    document.write(“<hr/>”);

    document.write(date.toLocaleString());

    3.Date使用方法(查看手册)

十三、js的Math对象

    1.都是静态方法,使用直接调用Math.方法()

十四、js函数的重载(模拟)

    1.重载的定义:方法名相同,参数不同

    2.js不存在重载,但通过其他方式重载

    3.把传递的参数保存到arguments数字里

十五、js的bom浏览器对象模型

    1.navigator:获取浏览器的信息

    2.screen:获取屏幕信息

    3.location: 请求url地址

        a.获取到请求url地址

        b.设置url地址

      -页面上安置一个按钮,按钮绑定一个事件,点击触发按钮

          例:点击跳转页面

        <input type=“button” value="tiaozhuan" onclick="herf1()";/>

        function herf1(){

            location.href = "hello.html";

        }

    4.history:请求的url的历史记录

        a.访问到上一个页面

        history.back();

        history.go(-1)

        b.访问到下一个页面

        history.forward();

        history.go(1)

    5.window(***)

        a.window.alert(): 页面弹出一个框,显示内容

        简写alert()

        b.confirm(): 确认框

        var flag = window.confirm("显示内容")

        c.prompt(): 输入的对话框

        window.prompt("在显示内容","输入框里面的默认值")

        window.prompt("please input: ","0")

        d.open(): 打开一个新的窗口

        open("打开一个新的窗口的url","","窗口的特征")

        e.close(): 关闭窗口

        f.做定时器

        表示每三秒,执行一次alert方法

        *setInterval("js代码",毫秒数);

        表示在毫秒之后执行,只会执行一次

        *setTimeout("js代码",毫秒数)

        *clearInterval():清除setInterval

        *clearTimeout(): 清除setTimeout

十六、js的dom文档模型对象

    1.文档:超文本文档

    2.对象:提供属性和方法

    3.模型:使用属性和方法操作超文本标记文档

    4.解析过程

        --document对象:整个文档

        --element对象:标签对象

        --属性对象

        --文本对象

        --Node结点对象:是这些对象的父对象

        如果找不到想要的方法,Node对象里面找

    5.常用的方法

        a.write():

        -向页面输出变量

        -向页面输出html代码

        b.getElementById();

        通过id得到的元素

        例子:var input1 = document.getElementById("nameid");

        alert(input.name);

        input1.value = "bbbbbb";

        c.getElementsByName();

        通过标签的name的属性值得到标签

        d.getElementsByTagName("标签名称");

        通过标签名称得到元素

        e.注意的地方

        只有一个标签,这个标签只能使用name获取,使用getElementsByName返回的是一个数组

        var inputs2 = document.getElementsByName("name11")[0];

        alert(inputs2.value);

十七、元素对象(element对象)

    1.要操作element对象,首先必须要获取到element

        a.使用document里面相应的方法获取

    2.方法

        a.获取属性里面的值

        getAttribute("属性名称")

        var input1 = document.getElementById("inputid");

        alert(input1.getAttribute("value"));

        b.设置属性的值

        input1.setAttribute("class","hahah");

        c.删除属性

        input1.removeAttribute("name");

        !不能删除value

十八、Node对象属性

    * nodeName

    * nodeType

    * nodeValue

    * 使用dom解析html,需要html里面的标签,属性和文本都封装成对象

    1.标签节对应的值

    * nodeName: 大写标签名称

    * nodeType: 1

    * nodeValue: null 

    2.属性结点对应的值

    * nodeName:  属性名称

    * nodeType: 2 

    * nodeValue:属性的值

    3.文本结点对应的值

    * nodeName:  属性名称

    * nodeType:  3

    * nodeValue: 属性的值

十九、Node对象属性之二

    1.父节点

        a.ul是li的父节点

        parentNode

        var li1 = document.getElementById("li1");

        var ul1 = li1.parentNode;

        alert(ul1.id);

    2.子节点

        a.li是ul的子节点

        childNode: 得到所有子节点,但是兼容性很差

        firstChild: 获取第一个子节点

        lastChild: 获取最后一个字节点

    3.同辈结点

        a.li直接关系是同辈结点

       b.nextSibling:返回一个给定节点的下一个兄弟节点

        c.previousSibling:返回一个给定节点的上一个兄弟节点

二十、操作dom树

        1.appendChild方法

        a.添加子节点到末尾

        b.特点:类似剪切粘贴的效果

    2.insertBefore(newNode,oldNode)方法

        a.在某个节点之前插入一个新的节点

        b.两个参数

        *要插入的节点

        *在谁之前插入

        c.插入一个节点,节点不存在,创建

            2.1 创建标签

             2.2 创建文本

             2.3 把文本添加到标签下面

        d.例子:

       1.获取到lil标签

      2.创建li

      3.创建文本

     4.把文本添加到li下面

     5.获取到ul

     6.把li添加到ul下面

        在<li>貂蝉</li>之前添加<li>詹姆斯</li>

       //获取貂蝉标签

      var lil3 = document.getElementById("lil3");

     //创建li

     var lil5 = document.createElement("li");

     //创建文本

      var text15 = document.createTextNode("詹姆斯");

     //文本添加到li下面,appendChild

     lil5.appendChild(text15);

     //获取到ul

     var ul21 = document.getElementById("ulid21");

     //在<li>貂蝉</li>之前添加<li>詹姆斯</li>

     ul21.insertBefore(lil5,lil3);

       e.removeChild方法:删除节点

        a.通过父节点删除,不能自己删除自己

    1.获取到li24标签

    2.获取父节点ul标签

    3.通过父节点执行删除

    f.replaceChild(newNodem,oldNode):替换节点

       a.通过父节点替换,不能自己替换自己

       b.步骤

    1.获取旧的节点

    2.创建标签li

    3.创建文本

    4.把文本添加到li下面

    5.获取父节点ul标签

    6.执行替换操作

    g.cloneNode(boolean):复制节点

    a.操作步骤

        1.获取ul

        2.执行复制方法cloneNode方法复制true

        3.把复制之后的内容放到div里面去

    3.1 获取到div

    3.2 appendChild方法

二十一、innerHTML属性

    1.第一作用:获取文本内容

        a. var span1 = document.getElementById("sid");

        alert(span1.innerHTML);

    2.第二作用:向标签里面设置内容

        a.例子:向div里面设置内容

            1.获取div

            2.设置内容

推荐阅读更多精彩内容

  • 介绍JavaScript的基本数据类型。 ECMAScript中有5中简单数据类型(也称为基本数据类型): Und...
    过往的雨阅读 477评论 0 1
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 1,192评论 0 7
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 6,410评论 2 17
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 577评论 0 5
  • 给你 文/修诚...
    梁伯益阅读 126评论 0 1