详谈JavaScript

一、JavaScript概述

   JavaScript是什么？有什么作用？ 
        HTML：就是用来写网页的。   人的身体
        CSS：  就是用来美化页面的。 人的衣服
        JavaScript：前端大脑、灵魂。  人的大脑、灵魂

        JavaScript是WEB上强大的脚本语言。
    脚本语言：
            无法独立执行。必须嵌入到其他语言中，结合使用。
            直接被浏览器解析执行。

    Java编程语言：
            独立写程序，独立运行。 编译---执行

    作用：控制页面特效展示。
         例如： 
    a.JS可以对HTML元素进行动态控制
    b.JS可以对表单项进行校验
    c.JS可以控制CSS的样式；


2、JavaScript的语言特征及编程注意事项
    特征：
    a.JavaScript无需编译，直接被浏览器解释并执行
    b.JavaScript无法单独运行，必须嵌入到HTML代码中运行
    c.JavaScript的执行过程由上到下依次执行

    注意：
    a.JavaScript没有访问系统文件的权限（安全）
    b.由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程
    c.JavaScript和java没有任何直接关系


3、JavaScript的组成

    a.ECMAScript    (核心)：规定了JS的语法和基本对象。
    b.DOM   文档对象模型：处理网页内容的方法和接口标记型文档。HTML
    c.BOM   浏览器对象模型：与浏览器交互的方法和接口


4、内部脚本
    在当前页面内部写script标签，script内部即可书写JavaScript代码

    格式：
    <script type=”text/javascript”>
    JavaScript的代码
    </script>

    注：script标签理论上可以书写在HTML文件的任意位置

   外部引入
    在HTML文档中，通过<script src=””>标签引入.js文件

    格式：
    <script  type=”text/javascript”  src=”javascript文件路径” ></script>

    注：外部引用时script标签内不能有script代码，即使写了也不会执行。


5、script标签规范化的放置位置（了解）
    开发规范规定，script标签的放置位置为：Body结束标签前。
    优点：
    保证html展示内容优先加载，最后加载脚本。 增强用户体验性

二、JavaScript语法及规则

    1、注释
        单行注释
            //
            Hbuilder快捷键 ctrl+/

        多行注释
            /* */
            Hbuilder快捷键 ctrl+shift+/



    2、变量
        a、变量简述
            变量：标示内存中的一块空间，用于存储数据，且数据是可变的。

            变量的声明：
                var 变量名;    //变量赋予默认值，默认值为undefined   （未定义的）

            变量的声明和赋值：
                var 变量名=值;   //变量赋予对应的值

            在声明JavaScript变量时，需要遵循以下命名规范：
            1.必须以字母或下划线开头，中间可以是数字、字符或下划线
            2.变量名不能包含空格等符号
            3.不能使用JavaScript关键字作为变量名，如：function、this、class
            5.JavaScript严格区分大小写。

    3、基本数据类型
            类似于java中的基本数据类型
            a.string        字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
            b.boolean       布尔类型。  固定值为true和false
            c.number        数字类型。  任意数字
            d.null          空，一个占位符。
            e.undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未               定义具体的值。

            注：因为undefined是从null中派生出来的，所以undefined==null


            JavaScript区别于java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值。

            通过typeof运算符可以分辨变量值属于哪种基本数据类型

            ECMAScript实现之初的一个bug，null属于基本数据类型，typeof(null)--object

    4、引用数据类型
            引用类型通常叫做类（class），但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。

            标准创建方式：
                var str = new String();//和java相同
                var str = new String;  //js独有的方式



    5、运算符
            JavaScript运算符与Java运算符基本一致。
            这里我们来寻找不同点进行学习
            a.比较运算符

                ==      逻辑等。仅仅对比 值
                ===     全等。  对比值并且对比类型。
                        如果值和类型都相同，则为true；值和类型有一个不同，则为false


    6、逻辑运算符

        注：JavaScript逻辑运算符没有 &  |


    7、正则对象
        a.RegExp对象的创建方式
            a.var reg = new RegExp("表达式");（开发中基本不用）
            b.var reg = /^表达式$/;   直接量（开发中常用）
            直接量中存在边界，即^代表开始，$代表结束
            直接量方式的正则是对象，不是字符串，别用引号

        b.test方法
            正则对象.test(string);用来校验字符串是否匹配正则。
            全部字符匹配返回true；有字符不匹配返回false

        c.正则对象使用注意事项
            /^表达式$/
                    只要有无法成立正则的字符存在，即为false。
                    全部符合为true（检查严格，眼睛不揉沙子）适用于校验

            /表达式/        
                    只要有成立正则的字符存在，即为true。全部不符false
                    （检查不严格，懒人思想）适用于字符串查找、替换



    8、JS数组对象
        1、JS数组的特性
            JS数组可以看做 Java中的ArrayList 集合。
            a.数组中的每一个成员没有类型限制，及可以存放任意类型
            b.数组的长度可以自动修改 

        2、JS数组的四种创建方式
            a.var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5
            b.var arr = new Array();创建一个数组对象，数组长度默认为0

        3.var arr = new Array(4);
            数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。
            （仅在显示数组时进行处理，undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined）

        4.var arr = new Array(“a”,”b”,true);  //创建了一个数组，长度3,    数组元素是”a”,”b”,true


    9、JS数组的常用属性/方法
        a.length  设置或返回数组中元素的数目
        b.join()  把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分割
        c.pop()  删除并返回数组的最后一个元素
        d.push() 向数组的末尾添加一个或更多元素，并返回新的长度
        e.reverse() 颠倒数组中元素的顺序 物理翻转：就是把元素下标进行互换

    10、全局函数（global）
        1、执行
            作用：用于增强程序的扩展性。
            注：只可以传递原始数据类型string，传递String对象无作用。
        2、编码和解码
            URL/URI编码：中文及特殊符号   %16进制
            作用：保证数据传递的完整性。
        3、URI和URL的区别
            URI是统一资源标识符。  标识资源详细名称。
            URL是统一资源定位器。 定位资源的网络位置。
            资源：可以通过浏览器访问的信息统统称为资源。（图片、文本、HTML、CSS等等。。。。）

            URI标识资源的详细名称，包含资源名。
            URL定位资源的网络位置。包含http://
        4、字符串转数字
            parseInt(string);       string按照字面值转换为整数类型，小数点后面部分不关注。

            parseFloat(string);     string按照字面值转换为小数类型。
            注：
                a.如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。
                （例如：11.5a55，parseInt结果11，parseFloat结果11.5）

                b.如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaNNaN
                （Not A Number，一个数字类型的标识，表示不是一个正确的数字）

三、自定义函数/自定义方法

1、函数简述及作用
    如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中。

    作用：增强代码的复用性
2、函数格式


    a.JavaScript函数定义必须用小写的function；
    b.JavaScript函数无需定义返回值类型，直接在function后面书写 方法名；
    c.参数的定义无需使用var关键字，否则报错；
    d.JavaScript函数体中，return可以不写，也可以return 具体值，或者仅仅写return；

3、函数使用的注意事项
    JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined；
    JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；
    因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用；
    如果形参未赋值，就使用默认值undefined



4、自定义对象
    a.function构造函数
        我们知道，JavaScript中的引用数据类型都是对象，而对象在JavaScript中可以用函数来表示。

        相当于java中创建某个class类

    b.无形参格式：
        function 对象名(){
            函数体
        }


    c.带参数格式：
        function 对象名(参数列表){
            函数体
        }


    d.有属性格式：
        function 对象名(){
                this.属性名1=属性值1;
                this.属性名2=属性值2;
                …….
        }
    this表示当前对象。

5、对象直接量
        开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式称为“对象直接量”。

        格式：
            var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};

        注：该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象，直接使用即可

四、BOM对象

1、BOM对象简述
    a.BOM对象是什么？有什么用？
        BOM（Browser Object Model）浏览器对象模型
        浏览器：IE、火狐、谷歌等
        作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）

          一般情况下，window代表了BOM对象。
          window对象是JavaScript的内置对象，使用window对象调用方法时可以省略window不写。
2、消息框
    a、alert()警告框，用来弹出警告消息。
    注：不同浏览器显示的组件样式不同，这里我们无需关注组件样式。
    b、confirm()
    确认框，用于告知用户信息并收集用户的选择


3、定时器
    a、循环定时器的设置和取消
    b、启动循环定时器-setInterval()
        循环定时器，调用一次就会创建并循环执行一个定时器。

        格式：
            setInterval(调用方法,毫秒值);
            //毫秒值：  循环周期    

    c、停止循环定时器-clearInterval()
        setInterval方法在创建一个定时器的同时，还会返回一个的定时器的ID，该ID就代表这个定时器。此定时器ID在当前页面是不重复的。
        我们可以通过clearInterval方法，指定某个循环定时器 停止

        格式：
            clearInterval(定时器ID);


4、一次性定时器的设置和取消
    a、启动一次性定时器-setTimeout()
        一次性定时器，调用一次就会创建并执行一个定时器一次。

        格式：
            setTimeout(调用方法,毫秒值);

    b、停止一次性定时器clearTimeout()
        setTimeout方法在创建一个定时器的同时，还会返回一个的定时器的ID，该ID就代表这个定时器。
        此定时器ID在当前页面是不重复的。
        我们可以通过clearTimeout方法，指定某个一次性定时器 停止

        格式：
            clearTimeout (定时器ID);



5、location对象
    location 对象包含浏览器 地址栏 的信息。
    常用属性：href    设置或返回完整的URL
    设置href属性，浏览器就会跳转到对应的路径

五、DOM对象

1、DOM对象的简述
    a、DOM对象是什么？有什么作用？
    DOM（Document Object Model） 文档对象模型
     文档：标记型文档（HTML等）
    DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象，
    通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

2、DOM树介绍
    HTML文档会被浏览器 由上到下依次 加载并解析。加载到浏览器的内存
    加载并解析到内存中，会生成一张DOM树

    其中：
    a.每个标签会被加载成 DOM树上的一个元素节点对象。
    b.每个标签的属性会被加载成DOM树上的一个属性节点对象
    c.每个标签的内容体会被加载成DOM树上的一个文本节点对象
    d.整个DOM树，是一个文档节点对象，即DOM对象。
    e.一个HTML文档加载到内存中就会形成一个DOM对象

    DOM树的特点：
    a.必定会有一个根节点
    b.每个节点都是节点对象
    c.常见的节点关系：父子节点关系
    d.文本节点对象没有子节点---叶子节点
    e.每个节点都有一个父节点，零到多个子节点
    f.只有根节点没有父节点
3、获取元素对象的四种方式
    在JavaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象：
    a.getElementById();   ---通过元素ID获取对应元素对象
    可以通过ID获取对应的元素对象，如果找不到，返回null

    b.getElementsByName();   ---通过元素的name属性获取符合要求的所有元素
    c.getElementsByTagName();   ---通过元素的元素名属性获取符合要求的所有元素
    d.getElementsByClassName();   ---通过元素的class属性获取符合要求的所有元素
    可以获取到元素节点对象 数组；如果找不到，返回 空数组

    注：获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中

4、元素对象常见属性
    a、value
        元素对象.value， 获取元素对象的value属性值。
        元素对象.value=属性值  设置元素对象的value属性值。修改元素的值
    b、className
        元素对象.className， 获取元素对象的class属性值。
        元素对象. className =属性值  设置元素对象的class属性值。修改元素样式
5、checked
    元素对象.checked， 获取元素对象的checked属性值。
    元素对象. checked =属性值     设置元素对象的checked属性值。

    注：HTML中checked=”checked”，JavaScript中返回true，false

    修改单选/复选的 选中与否
6、innerHTML
    元素对象.innerHTML，  获取元素对象的内容体
    元素对象.innerHTML=值     设置元素对象的内容体 操作元素的内容体

六、JS事件

1、JS事件是什么？有什么作用？
    通常鼠标或热键的动作我们称之为事件(Event) 

    事件包括：点击、表单提交、值发生改变、鼠标移入、鼠标移出等等

    通过JS事件，我们可以完成页面的指定特效。

2、JS事件驱动机制简述
    页面上的特效，我们可以理解在JS事件驱动机制下进行。
    JS事件驱动机制：

    警察抓小偷
    事件源        小偷
    事件     偷东西
    监听器        警察
    注册/绑定监听器       让警察时刻盯着小偷

    事件源：专门产生事件的组件。

    事件：由事件源所产生的动作或者事情。

    监听器：专门处理 事件源 所产生的事件。

    注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理。



3、常见的JS事件
    a、点击事件（onclick）
       点击事件：由鼠标或热键点击元素组件时触发

    b、焦点事件（onblur、onfoucs）

4、获取焦点事件(onfocus)
    焦点：即整个页面的注意力。
    默认一个正常页面最多仅有一个焦点。

    例如：文本框中闪烁的小竖线。

    通常焦点也能反映出用户目前的关注点，或者正在操作的组件。
    获取焦点事件：当元素组件获取焦点时触发

5、失去焦点事件（onblur）
   失去焦点事件：元素组件失去焦点时触发

6、域内容改变事件（onchange）
    域内容改变事件： 元素组件的值发生改变时触发

7、加载完毕事件（onload）
    加载完毕事件：元素组件加载完毕时触发。

8、表单提交事件（onsubmit）
    表单提交事件：表单的提交按钮被点击时触发

    注意：该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作。
    a.事件得到true，提交表单数据
    b.事件得到false，阻止表单数据提交

9、键位弹起事件（onkeyup）
   键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件

10、常用鼠标事件
    a、鼠标移入事件（onmouseover）
       鼠标移入事件：鼠标移入某个元素组件时触发

    b、鼠标移出事件（onmouseout）
       鼠标移出事件：鼠标移出某元素时触发

11、JS事件的两种绑定方式
    a、元素事件句柄绑定
       将事件以元素属性的方式写到标签内部，进而绑定对应函数。
       事件句柄绑定方式-
                优点：①开发快捷
                      ②传参方便
                      ③可以绑定多个函数
                缺点：JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护



12、DOM绑定方式
    使用DOM的属性方式绑定事件

    DOM绑定方式-
            优点：使得HTML代码和JS代码完全分离
            缺点：①不能传递参数。  解决：匿名函数是可以的
                 ②一个事件只能绑定一个函数  解决：匿名函数内部是可以绑定多个函数。