新手学web之JavaScript快速了解及入门

一、JavaScript基础

1、JavaScript简介

    JavaScript以下简称JS，运行在客户端的基于对象和事件驱动的编程语言。
    客户端：就是指浏览器；
    基于对象：js提供了很多的对象，可以直接拿来使用；
    事件驱动：用户相关操作

2、JavaScript特点

    交互性：信息的动态交互；
    安全性：js不能访问用户的本地磁盘；
    跨平台：js是直接运行在浏览器上面，只要安装支持js语言的浏览器即可运行；

3、JavaScript和Java的区别

    两者之间没有关系。
    Java是Oracle公司的，JavaScript是网景公司；
    Java是面向对象的，JavaScript是基于对象；
    Java是强类型语言，JavaScript是弱类型语言；
    Java是先编译再执行，JavaScript可以直接运行在浏览器中；

补充

    可以浏览以下网址了解JavaScript：
    runjs.cn   
    jq22.com   
    sc.chinaz.com  
    webhek.com  
    codecombat.cn

4、JavaScript的组成

    ECMAScript：ECMA（欧洲计算机制造商协会），js是由该组织制定的语法和标准；
    BOM：browser object model浏览器对象模型；
    DOM：document object model 文档对象模型（HTML、XML）；

5、JavaScript和HTML的结合

使用标签，在HTML代码中编写js代码：

    <script>
        alert("hello");
    </script>

使用script标签中的src属性，引入外部的js文件：

    <!-- 当引入外部js文件时，该标签内不能再写js代码 -->
    <script type="text/javascript" src="js/test.js">
    </script>

6、script标签属性

    type：规定脚本类型；
    src：引入外部脚本文件，值为url；
    charset：设置编码；
    defer：当前页面的HTML代码运行完成后，再执行该js外部文件（只适用于外部引入的js文件）；
    async：异步执行（很多人做很多事）；

补充

    浏览器的工作原理：
    http://blog.csdn.net/dangnian/article/details/50876241

二、JavaScript语法

1、JavaScript输出

    alert(“”); 警告弹出框；
    document.write(“”); 将内容输出到HTML文档中；
    innerHTML(“”); 向指定的标签元素输出内容（可以输出代码）；
    console.log(“”); 向控制台输出；

2、JavaScript书写规范

    变量名和方法名的命名：（参考Java标识符）；
    所有的变量声明都使用var关键字
    所有的函数声明都是function关键字

3、注释

    单行注释：//
    多行注释： /* 注释内容 */

4、数据类型

    String字符串：可以用双引号或单引号包围；

    Number数字：包括整数和小数；

    Boolean 布尔：表示逻辑判断，值为true和false； 

    Array 数组：表示很多元素的集合； 

    Object 对象； 

    Null 空：当引用的对象为空时； 

    Undefined 未定义：当变量声明后未赋值时，默认值为undefined； 

    Null和Undefined区别：

        表示的数据类型不同：

            var a = null;//表示object类型
            var b ;//表示Undefined类型
            document.write(typeof(a));

        都可以用来清空对象：

            var a = null;//清空对象后，表示object类型
            var b = undefined;//清空对象后，表示Undefined类型

5、变量

    变量的声明，使用var；

    作用域：
        局部变量：作用在代码块或方法体内；
        全局变量：作用在整个文档的所有script标签中；

6、运算符

    参考Java运算符。
    补充：
    在字符串中操作+/-符号：
        var str = "123";
        document.write(str+1+"<br>");//做拼接操作
        document.write(str-1);//做减法运算
        当字符串的内容不是数字是，会提示”NaN”警告；

    在boolean类型中做+/-操作
        var b = true; //默认值为1
        var c = false;//默认值为0

    == 和 === 的区别
        == ：做比较判断时，只关心数据的值，不关心类型；
        === ：做比较判断时，既要考虑值又要考虑类型；

7、事件

    鼠标事件：
        onclick：鼠标点击事件； 

        ondblclick：鼠标双击事件； 

        onmousedown：鼠标按下时（未释放）； 

        onmouseup：鼠标释放后； 

        onmousemove：鼠标在某元素上移动； 

        onmouseenter：鼠标移入某元素之上（没有事件冒泡）； 

        onmouseleave：鼠标离开某元素； 

        onmouseover：鼠标移到某元素之上（事件冒泡）； 

        onmouseout：鼠标移出某元素； 

        clientX：鼠标移动的x轴； 

        clientY：鼠标移动的y轴；


    键盘事件：
        onkeyup：当输入一个键时触发；

8、流程控制

    参考Java。
    分支语句：if-else，switch；
    循环语句：while，do-while，for

三、数组

1、数组的声明

    方法一：
        var arr = new Array(3); // 指定数组长度
    方法二：
        var arr = [1,3.14,"hello",'world',true];
    方法三：
        var arr = new Array(1,"hello",true);

2、常用属性

    length：返回数组元素的个数；

3、常用函数

    join()：在数组的每个元素中间添加一个用来分割的字符串；

    concat()：连接数组， arr.concat(arr2); 

    push()：向数组的末尾添加元素，并返回新的长度 

    unshift()：向数组的开头添加元素，并返回新的长度 

    pop()：删除并返回数组的最后一个元素 

    shift()：删除并返回数组的第一个元素 

    reverse()：倒置数组元素 

    sort()：对数组元素进行排序 

    toString()：把数组转为字符串，并返回结果

四、函数

1、函数的声明

    方法一：
        function method(x,y){
        alert(x+y);
        }
        method(1,2);    
    方法二：
        var method =  function(x,y){
        alert(x+y);
        }
        method(1,2);
    方法三：
        //参数1：函数的参数列表，参数2：方法体
        var method = new Function("x,y","alert(x+y);");
        method(2,3);

2、方法重载

    在JavaScript中没有方法重载概念，当script标签中出现多个重名的方法，会执行最后一个。

    js中的每个函数接收到的参数会被存到一个arguments的数组中。我们可以利用arguments数组来间接实现方法的重载。

3、闭包

    官方解释：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。


    解释：JavaScript的函数中还可以声明函数，内部函数可以访问外部函数中声明的变量、参数，如果我们在外部函数的外部调用该内部函数，那么这个内部函数就可以成为是闭包。 

    通过访问一个method函数的内部函数来操作method函数中声明的变量或参数，使该变量私有化，被访问的内部函数就成为闭包。

4、回调函数

    function a(){
        alert("hello");
    }
    function b(hello){
            hello();
    }
    b(a); //函数a就是回调函数，函数b就是调用函数
        带参数的回调函数
    function a(x){
        alert("hello "+x);
    }
    function b(hello){
        hello();
    }
    b(function(){a("tom");});

5、创建对象

    方法一：
        var person = {
        name:"tom",
        age:20,
        hobby:["篮球","足球"],
        print:function (){
                alert("hello");
        }
        }
    方法二：
        var person = new Object();
        person.name = "jack";
        person.age = 10;
    方法三：
        function person(name,age){
        this.name = name;
        this.age = age;
        }
        var p = new person("tom",20); 

操作对象的属性：

    constructor：返回对象的构造函数；
    prototype：往对象中添加新的属性或方法；

五、JavaScript对象

1、String对象
创建对象：
var str = “hello”;
var str2 = new String(“world”);

属性：
    length：表示字符串的长度


对象方法：
    concat()：连接字符串 str1.concat(str2); 

    charAt()：返回指定位置的字符串，当字符位置不存在，返回空字符串 

    indexOf()：返回字符串位置，当字符不存在时返回-1 

    split()：把字符串分割为数组 

    replace()：替换字符串 

    substr(x,y); 从下标x开始，向后截取y个字符 

        substring(x,y); 从下标x开始，截取到下标y，包含x不包含y  


HTML包装方法：
    bold()：文字加粗 

    fontcolor()：设置文字颜色 

    fontsize()：设置文字尺寸 

    link()：将字符串显示为链接 

    sub()：把字符串显示为上标 

    sup()：把字符串显示为下标

2、Date对象

创建对象：
    //方法一
        var date = new Date();
    //方法二
        var date2 = new Date(0);//参数是时间戳
    //方法三
        var date3 = new Date("2012-12-12");//参数是时间日期字符串
    //方法四
        var date4 = new Date("2013","11","12","11","23","22","999"); 


把时间日期元素做为参数
    常用方法：
        getFullYear()：获得当前的年  

        getMonth()：获得当前的月份，月份值是0-11 

        getDay()：获得星期，值为0-6 

        getDate()：获得当前的日，值为1-31 

        getHours()：小时，值为0-23 

        getMinutes()：分钟，值为0-59 

        getSeconds()：秒，值为0-59 

        getMilliseconds()：毫秒，值为0-999 

        getTime()：时间戳，毫秒为单位 

        toLocaleString()：把Date对象转为本地格式字符串 

        toLocaleDateString()：把Date对象中的日期部分转为本地格式字符串 

        toLocaleTimeString()：把Date对象中的时间部分转为本地格式字符串

3、Math对象

    用来操作数学运算，该对象没有构造函数，对象内的方法都是静态的，直接可以用Math对象名调用。 

    属性
        PI：圆周率，值约为3,14159
    方法
        ceil()：向上取整 

        floor()：向下取整 

        round()：四舍五入 

        random()：返回一个伪随机数，值为0-1，包含0不包1 

        pow(x,y)：返回x的y次方

4、Number对象

    属性：
        NaN：非数字值； 

        MAX_VALUE：可表示的最大值； 

        MIN_VALUE：可表示的最小值； 

    方法：
        toFixed(x)：把数字转为字符串，结果的小数点后面有指定位数的数字； 

        toPrecision(x)：把数字格式化为指定的长度； 

        toString()：把数字格式化为字符串；

5、全局属性和函数

    属性：
        NaN：指示某个值是不是数字； 

        undefined：指示未定义的值； 

    方法：
        parseFloat()：解析字符串，并返回浮点数； 

        parseInt()：解析字符串，并返回整数； 

        eval()：如果字符串是一个js代码，可以使用该方法直接执行 

        encodeURI()：对字符进行编码 

        decodeURI()：对字符进行解码 

        isNaN()：检查某个值是否为数字，不是数字返回true，是数字返回false 

        Number()：把对象的值转为数字； 

        String()：把对象的值转为字符串；

六、BOM对象

1、window对象

    该对象表示当前浏览器窗口，是JavaScript中的顶层对象，所有bom对象都是在window对象中操作的，在调用其他bom对象是，window可以省略。
    属性
        opener：返回创建此窗口的窗口的引用 

    方法
        alert()：弹出警告框 

        confirm()：弹出确认/取消对话框 

        prompt()：弹出用户输入对话框 

        close()：关闭当前窗口 

        open(url,name,”窗口样式”)：打开新窗口 

        setInterval(“js代码”,毫秒)：按照指定的周期循环执行 

        setTimeout(“js代码”,毫秒)：在指定时间后执行一次 

        clearInterval(id)：取消计时器，把要取消的计时器id作为参数 

        clearTimeout(id)：取消计时器

2、navigator对象

    关于浏览器信息的对象。
    appName：返回浏览器名字

3、screen对象

    该对象是有关于客户端显示屏幕的信息。

    availHeight：返回屏幕高度（不包任务栏） 

    availWidth：返回屏幕宽度（不包含任务栏） 

    height：返回屏幕总高度 

    width：返回屏幕总宽度

4、history对象

记录用户的浏览历史。

    属性
        length：返回浏览历史列表的URL数量
    方法
        back()：返回上一步URL
        forward()：载入下一步URL
        go()：跳转到指定的URL历史，负数表示上一步，正数表示下一步

5、location对象

该对象包含了URL信息

    属性
        href：返回当前文档的完整URL
    方法
        assign()：载入一个新的文档（可返回）
        replace()：用新的文档替换当前文档（不可返回）
        reload()：重新载入当前文档（用于页面刷新）

七、DOM对象

1、DOM介绍

    document object model：文档对象模型 

    文档：是指标记型文档，HTML、XML 

    对象：提供了很多属性和方法 

    模型：使用提供的属性和方法来操作标记型文档

2、解析HTML文档

        解析过程：
            根据HTML的层级结构，在内存中分配一个树形结构，需要把HTML中的每个元素都封装成对象：
                document：整个文档 

                element：标签对象 

                attribute：属性对象 

                textNode：文本对象 

                Node：节点对象，是以上对象的父对象

3、DHTML介绍
DHTML不是一门编程语言，是HTML、CSS、DOM和JavaScript的总称。

    四种编程语言职责： 

        HTML：使用标签来封装数据； 

        CSS：通过属性和属性值来美化HTML的样式； 

        DOM：解析HTML中封装的数据，操作HTML的； 

        JavaScript：是指ECMAScript，js的基础语法 

4、document对象
document是整个HTML文档，HTML中的每个标签都是一个节点，每个属性也是一个节点，每个文本也是一个节点。

        属性
            forms：返回文档中的所有表单对象的集合 

            images：返回文档中所有image对象的引用（数组） 

            links：返回文档中所有链接的引用（数组） 

            title：返回文档的标题  



        方法
            getElementById()：通过id属性获得标签对象 

            getElementsByClassName()：通过class属性获得标签对象的集合 

            getElementsByName()：通过name属性获得标签对象的集合 

            getElementsByTagName()：通过标签名获得对象的集合 

            createElement()：创建标签对象 

            createTextNode()：创建文本对象 

            createAttribute()：创建属性对象

5、element对象
在HTML中所有的元素都是元素节点，所有的属性都是属性节点，所有的文本都是文本节点，所有的注释都是注释节点。

操作Element对象的属性（首先要获取到element） 

获取属性：getAttribute(name)方法 

设置属性：setAttribute(name,value)方法 

删除属性：removeAttribute(name)方法，不能删除value属性 

在Element对象中查找Element对象 

在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementByTagName()方法，该方法返回的是一个集合。

    属性
            attributes：返回一个元素的属性数组 

            id：设置或返回元素的id 

            childNodes：返回元素的一个子节点的数组（兼容性差） 

            classlist：返回元素的类名 

            className：设置或返回元素的class属性 

            firstChild：返回元素的第一个子节点，可以用于获取文本节点 

            lastChild：返回元素的最后一个子节点，可以用于获取文本节点 

            innerHTML：设置或返回元素的内容 



    方法
            addEventListener(“事件名”,function() )：向指定的元素添加事件 

            appendChild()：为元素添加一个新的子元素 

            removeChild()：删除一个子节点 

            focus()：设置文档或元素获取焦点 

            getAttribute()：返回指定元素的属性值 

            setAttribute()：设置或改变指定属性并指定值 

            getAttributeNode()：返回指定属性节点 


    创建标签的步骤
            a)  创建标签对象
            b)  创建文本对象
            c)  把文本添加到标签下面

6、Node对象

Node对象属性一

属性
        nodeName：节点名称
        nodeType：节点类型
        nodeValue：节点值 

标签节点对应的值：
        nodeType：1
        nodeName：大写标签名称
        nodeValue：null 

属性节点对应的值：
        nodeType：2
        nodeName：属性的名称
        nodeValue：属性的值
文本节点对应的值：
        nodeType：3
        nodeName：#text
        nodeValue：文本内容

Node对象属性二

属性
    父节点
            parentNode：返回父节点，返回的始终是一个元素节点，document节点没有父节点。


    子节点
            childNodes：获取指定节点的所有子节点的集合 

            firstChild：获取指定节点的第一个子节点 

            lastChild：获取指定节点的最后一个子节点



    同辈节点
            nextSibling：返回一个给定节点的下一个兄弟节点 

            previousSibling：返回一个给定节点的上一个兄弟节点