001 概述

概述：一门客户端脚本语言
    运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
    脚本语言：不需要编译，直接就可以被浏览器解析执行了

002 功能

　　可以来增强用户和html页面的交互过程
       可以控制html元素
       能够让页面有一些动态的效果
      增强用户的体验

003 发展史

    1. 1992年 NNombase公司了，开发出第一门客户端脚本语言，专门用于表单的校验 命名为C--，后来更名为ScriptEase
    2. 1995年 Netscape（网景）公司，开发了一门客户端脚本语言：livescript，后来请了SUN公司的专家，修改之后命名为JavaScript
    3. 1996年，微软抄袭JavaScript，并开发了JScript
    4. 1997年，ECMA（欧洲计算机制造商协会），ECMAScript，即使所有客户端脚本语言的标准

    JavaScript = ECMAScript + JavaScript特有的东西（BOM+DOM）

004 ECMAScript基本语法

　　ECMAScript：客户端脚本语言的标准

4.1 与html结合方式

       01 内部js
                定义

4.2 注释

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

4.3 数据类型

                1. 原始数据类型（基本数据类型）
                    1） number： 数字。整数/小数/NaN(not a number 一个不是睡着的数字类型)
                    2） string： 字符串。 字符串“abc”, "a",'abc'
                    3） boolean： true和false
                    4） null： 一个对象为空的占位符
                    5） undefined： 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
                2. 应用数据类型：对象

4.4 变量

                    变量：一小块存储数据的内存空间（被命名的内存空间，用来存储数据）
                    java原因是强类型语言，JavaScript是弱类型语言
                        强类型：在开辟变量存储空间时，定义了空间将来存储数据的数据类型，只能存储固定类型的数据
                        弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
                    语法：
                        var 变量名 = 初始化值;
                        var a = 10;

                    查询变量的数据类型 typeof(a);

4.5 运算符

                1. 一元运算符： 只有一个运算数的运算符
                    ++(自增)，--（自减），+（正号）,-(负号)
                        ++（--）在前，先自增（自减），再运算
                        ++（--）在后，先运算，再自增（自减）
                    注意：
                        1. 在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转换
                         其他类型转换为number
                             string转number，按照字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字）
                                 alert(typeof(+"abc"))  //NaN
                             boolean转number：true转为1，false转为0；
                2. 算数运算符：
                    +, -, *, /, % ...
                3. 赋值运算符
                    = += -= ...
                4. 比较运算符
                    >, <, >=, <=, ==, ===(全等于)
                    比较方式：
                        1. 类型相同，直接比较
                            * 字符串：按照字典顺序比较，按位逐一比较，知道得出大小为止（ASCII）
                            如： "abc" > "acd"  -->false
                        2. 类型不同呢，先进行类型转换，然后再比较
                            “112” < 123---->true
                        3. "==="全等于：在比较之前，先判断类型，如果类型不一样，则直接返回false
                            “123” === 123 ----> false
                5. 逻辑运算符
                    &&, ||, !
                    &&: 与（短路效果），短路,只要前面的表达式为假，那么后面的表达式就不执行了，直接返回假
                    ||: 或（短路效果）。 短路，只要前面的表达式为真，那么后面的表达式就不执行了，直接返回真
                    ！： 非
                        其他类型转boolean
                            1. number: 0或NaN为假，其它为真
                            2. string: 除了空字符串("")，其他都是true
                            3. null&undefined:都是false
                            4. 对象:所有对象都是true（例如： var date = new Date();）
                            例如：
                                //js中可以这样来简化书写
                                if(obj){}//防止空指针异常，如果是对象，正常执行；如果不是对象，直接返回false
                6. 三元运算符
                    ? :
                        语法：
                            表达式?值1:值2；
                            判断表达式的值，如果是true则取值1，如果是false则取值2；
                        例如：
                            var a = 3;
                            var b = 1;
                            var c = a > b ? 1:0；
                7. JS特殊语法(都不建议使用，最好还是按照正常的逻辑来写)：
                    1. 语句以“;”结尾，如果一行只有一条语句则“;”可以省略（不用知道，不建议使用）
                    2. 变量的定义需使用关键字var，也可以不用
                        使用var，定义的变量是局部变量        如：var a = 4;
                        不使用var，定义的变量是全局变量    如： a = 5;(不建议使用)

4.6 流程控制语句

                1. if...else...
                2. switch
                    在java中，Switch语句可以接收的数据类型： byte,int , short, char, 枚举(1.5), string(1.7)
                        switch(变量){case 值1: 语句; break;}
                    在JavaScript中，Switch语句可以接受任意的原始数据类型
                        例如： var a ="";
                                switch(a){
                                    case 1: alert("number"); break;
                                    case "abc": alert("string"); break;
                                    case true: alert("true"); break;
                                    case null: alert("null"); break;
                                    case undefined: alert("undefined"); break;
                                }
                3. while
                4. do...while
                5. for
                    例如：
                            var sum = 0;
                            for(var i = 1; i<=100;i++){
                                sum += i;
                            }

005 基本对象

　　5.1 Function:函数（方法）对象

                1. 创建
                    1. var fun = new Function(形式参数列表,方法体);【了解即可，现在可以忘掉了】
                    例如：
                        var fun1 = new Function("a","c","alert(a);");
                    2. function 方法名称(形式参数列表){方法体;}
                    例如：
                        function fun02(a,b){
                            alert(a+b);
                        }
                    3. var 方法名称 = function(形式参数列表){方法体;}
                    例如：
                        var fun03 = function(形式参数列表){
                            alert(a+b);
                        }

                2. 方法

                3. 属性
                    length:代表形参的格式
                    例如： alert(fnu02.length);

                4. 特点
                    1. 方法定义时，方法的形参类型可以不用写,返回值类型也可以不用写
                    2. 方法是一个对象，如果定义名称相同方法的话，会直接覆盖前一个方法；
                    3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关【重要】        如：fun02(),可以;fun02(1),也可以
                    4. 在方法声明中有一个隐藏的内置对象（数组），arguments，封装了所有的实际参数  如：fun02(1,2,3),也可以，最后一个不显示
                        例如：求任意个数的和
                        function(){
                            var sum = 0;
                            for(var i = 0; i < arguments.length; i++){
                                sum += arguments[i];
                            }
                            return sum;
                        }

                        var sum = add(1,2,3,4,5,7,9);
                        alert(sum);

                5. 调用
                    方法名称(实际参数列表);
                    例如：
                        fun1(3,4);

　　5.2 Array：数组对象

                1. 创建
                    1）var arr = new Array(元素长度);    如var arr = new Array(1,2,3,4);---->1,2,3,4
                    2) var arr = new Array(默认长度);    如var arr = new Array(5);------->,,,,
                    3) var arr = [元素列表];             如var arr = [1,2,3,4];----------->1,2,3,4


                2. 方法
                    join(参数):将数组中的元素按照指定的分隔符（参数）拼接为字符串
                    push(): 向数组的尾部添加一个或多个元素，并返回新的长度        如：arr.push(11);

                3. 属性
                    length: 数组的长度

                4. 特点
                    1) 在JS中，数组元素的类型是可变的    如var arr = [1,"abv",true];
                    2) 在JS中，数组元素的长度是可变的    如arr[10];-->undefined

　　5.3 Date:日期对象

                1. 创建
                    var date new Date();

                2. 方法
                    toLocalString():返回当前date对象对应时间的本地字符串格式
                    getTime(): 获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值之差

　　5.4 Math:数学对象

                1. 创建
                    特点：Math对象不用创建，直接使用  Math.方法名();

                2. 方法
                    random():返回0~1之间的随机数;[包含0，不包含1] 如Math.randim();
                    ceil(x): 对数字进行上舍入（向上取整）Math.ceil(3.14)-->4
                    floor(x): 对数字进行下舍入(向下取整)Math.ceil(3.14)-->3
                    round(x): 把数字四舍五入为最接近的整数

                3. 属性
                    PI 圆周率 如：Math.PI;

                练习：取1~100之间的随机整数
                        1. 取随机数，然后乘以100
                        2. 舍去小数部分
                        3. +1
                    var number = Math.floor(Math.random() * 100) +1;

　　5.5 RegExp；正则表达式对象

                1. 正则表达式：定义字符串的组成规则
                    1. 单个字符：[]
                        如： [a] [ab]（表示a或b都行） [a-zA-Z0-9]
                        特殊符号代表含义的单个字符：
                        \d:单个数字字符 [0-9]
                        \w:单个单词字符[a-zA-Z0-9_] 表示：小写字母+大写字母+数字+下划线都行

                    2. 量词符号
                        ?: 表示出现0次或1次
                        *: 表示出现0次或多次
                        +: 表示出现1次或多次
                        {m,n}:表示 m <= 数量 <= n
                            m如果缺省： {,n}: 最多n次
                            n如果缺省： {m,}: 最少m次
                    3. 开始结束符号
                        ^: 开始
                        $: 结束
                2. 正则对象
                    1. 创建
                        1）var reg = new RegExp("正则表达式");
                        2) var reg = /正则表达式/;【常用】
                        注意：
                            使用第一种的时候需要多加一个“\”，不然容易转义成其他意思

                    2. 方法
                        1） test(参数):验证指定的字符串是否符合正则定义的规范
                例如：
                    var reg = new RegExp("^\\w{6,12}$");//或者var reg2 = /^\w{6,12}$/;//基本用第二种方式
                    使用第一种需要多加一个"\"，不然会直接转义成其他意思
                    var username = "sahnghai";
                    //验证
                    var flag = reg.test(username);
                    alert(flag);//-->true

　　5.6 Global: 全局对象

                1. 特点： 这个Global中封装的方法不需要对象就可以直接调用 方法名();
                2. 方法：
                    encodeURI():url编码
                    decodeURI():url解码

                    encodeURIComponent(): url编码，编码的字符更多
                    decodeURIComponent(): url解码，

                    parseInt():将字符串转为数字
                        逐一判断每一个字符是否为数字，直到不是数字为止，将前面数字部分转为number

                    isNaN: 判断一个值是不是NaN
                        NaN六亲不认，连自己都不认，NaN参与的==比较，全部都是false

                    eval():将JavaScript字符串，并把它转为脚本代码来执行
                    例如：
                        var jscode = "alert(123)";
                        eval(jscode);

006 DOM简单学习

　　为了满足案例要求

        功能：控制html文档的内容
        代码：获取页面标签（元素）对象Element
            document.getElementById("id值")：通过id值来获取元素对象
        操作Element对象
            1. 修改属性值
                1） 明确获取的对象是哪一个
                2） 查看API文档，找到其中有哪些属性可以设置
            2. 修改标签体内容
                属性：innerHTML

　　　　案例：

	
	
	
阿里巴巴
	
	

 007 事件简单学习

        功能： 某些组件被执行了某些操作后，触发某些代码的执行
            造句：XXX被XXX，我就XXX；
            我方水晶被摧毁之后，我就责备队友

        如何绑定事件
            1.直接在html标签上指定事件的属性(操作)，属性值就是js代码
                1) 事件：onclick() ---> 单击事件
            2. 通过js获取元素对象，指定事件属性，并设置一个函数;
        案例01：

 008 案例：通过点击电灯图片来实现灯的亮灭

	//1. 获取图片对象
	var light = document.getElement("light");

	var flag = false;//代表灯是灭的,off是灭灯的图片
	//2. 绑定事件
	light.onclick = function(){
		if(flag){//判断如果灯是开的，则灭掉

			light.src="off.gif";
			flag = false;
		}else{//判断如果灯是灭的，则打开
			light.src="on.gif";
			flag = true;
		}
	}