JavaScript 基础讲解

>>JavaScript 是嵌入HTML中在浏览器中的脚本语言，具备与java和C语言相似的语法。
>>特色：    
    <1>由浏览器解释逐行执行代码，不进行预编译。
    <2>基于对象，内置有大量现成对象
>>使用方式：
    <1>在事件定义时直接写JS
    <2>嵌入式：使用<script>标签
    <3>HTML页面引用.JS文件
    *注*：script标签要么用来写JS，要么用来引入JS。script标签必须写成双标签，不管有无内容 
>>注释与JAVA相同
>>单引号和双引号做用相同
>>定义变量使用var关键字
>>JavaScript数据类型分为四类：
    <1>特殊类型：null 空  undefined 未定义
    <2>基本类型（内置对象）：
        number 数字 string 字符串 Boolean 布尔 Function 函数 Array 数组
    <3>外部对象：Window 浏览器对象 document 文档对象
    <4>自定义对象
>>数据的隐式转换
    字符串+数字 ：数字转换为字符串
    字符串+布尔值：布尔值转换为字符串
    数字+布尔值：布尔值转换为数值 true：1   false：0
    布尔值+布尔值：数值相加
>>当使用其余值作条件时，表明空的值等价于false，表明非空的值等价于true。
    空：null/""/undefined/0/NaN

>>>>>>>>>>>>>>>1.内置对象<<<<<<<<<<<<<<<<<<<<
1）    String
    ---JS的string有length属性，而JAVA中是length（）方法
    ---JS中多了一个方法，X.charCodeAt(index):返回指定位置字符的Unicode编码
    ---JS中少了一个方法。S.replaceAll().
    ---JS中的String和JAVA差很少，以了解为主。
2) Number
    ---toFixed(m) m为须要保留的小数位数
        将数字转换为字符串，并保留相应的小数位数
3) Array（*）
    >>>JS中的数组都是Object数组，例：var a1 = ["zhangsan",23,false];
    ---建立:
        //已知数据时这样建立
        var a1 = ["zhangsan",23,false];
        //未知数据时这样建立
        var a2 = new Array();
        //放数据
        a2.push("list");
        a2.push(26);
        a2.push(true);
    ---数组倒转：x.reverse()
    ---数组排序: x.sort([SortFunc]):sortFunc为比较方法
        JS中的数组都是Object数组，因此它默认将全部元素的转换为toString，而后进行排序。
4) Math
    >>与JAVA中的Math类似，了解。
5）Date
    ----建立：
        var now = new Date();(获取客户端时间)
        var now2 = new Date("2016/8/31 11:55:23");
    ----方法：
        toLocaleTimeString();
        toLocaleDateString();
6） 正则：RegExp对象 **重要**
    \d：表示任意一个数字
    \w：表示任意一个单词字符（只能是 数字，字母，下划线）
    \s：表示任意一个空白字符(\t \r \n \f \x0B)
    \D：表示任意一个非数字字符
    \W：表示任意一个非单词字符
    \S：表示任意一个非空白字符
    <1>建立正则对象
    ----var reg = /\d/g;
    ----var reg = new RegExp("\d",g);
    <2>检测模式
     1.  i:ignore 忽略大小写
     2.  g:globle 全局模式

    <3>正则对象的检测方法
    ---reg.test(str) **重要**
        检查Str中，是否包含与reg匹配的字串,返回Boolean值。
    ---reg.exec(str)
        >>在非全局模式下，从str中找出和reg匹配的第一个字串
          >>在全局模式下，第N次调用此方法，就是，从str中找出第N个和reg    匹配的字串
    <4>字符串支持正则的方法
    ---str.replace(reg,"目标") **重要**
        >>>>将str中和reg匹配的子串替换成目标，并返回新的字符串
        ◆修改字符串的API都是产生新字符串，原来的字符串是不变的
    ---str.match()
        从str中找出和正则匹配的全部字串
    ---str.sereach()
        从str中找出和reg首次匹配的字串的索引
7)Function对象
    --关键字function 用于定义函数
    ---返回值 默认为undefined 也可以使用return返回具体值
    ---JS中函数没有重载
        >>>>arguments数组对象：函数的参数数组   **重要**
            没有收到实参的参数值是undefined
    <1>匿名函数
        建立匿名函数：function(arg1,...,argN){函数体};
        用于特殊环境，如数组排序。
    <2>全局函数：
    --parseInt/parseFloat
        字符串转换为数字
    --isNaN
        判断字符串是否为非数字，非数字：true 数字：false
    --eval   **重要**
        用于计算表达式字符串；如eval("2+4");//6
    --typeof
        查询当前值的类型

>>>>>>>>>>>>>>>2.外部对象 **重要**<<<<<<<<<<<<<<<<
    >>外部对象就是浏览器提供的API
      >>BOM和DOM
      <a>BOM:Browser Object Model 浏览器对象模型
      --用来访问和操纵浏览器窗口，使JS有能力与浏览器"对话"
      --可移动窗口，更改状态栏文本、执行其余不予页面内容发生直接联系的操做
      <b>DOM:Document Object Model 文档对象模型
      --用来操做文档(网页)
      --定义了访问和操做HTML文档的表中方法。
      **注：** BOM包含了DOM
>>>>> windows 对象
    --调用window的属性和方法能够省略"window."
  <1>经常使用的属性对象
  --document 文档
  --history 
  --location 地址栏
  --screen 屏幕
  --navigator 内核
  <2>经常使用的方法：
  -->对话框：
    --alert():弹出框
    --confirm():确认框，返回Boolean值
    --prompt():输入框，返回输入的字符
  -->定时器：
    一次性定时器：
    --setTimeout(exp,time):exp:须要执行的代码或函数 time：多少毫秒  返回一个ID
    --clearTimeout(tID):中止执行定时器
    周期性定时器：
    --setInterval(exp,time): exp:须要执行的代码或函数 time：多少毫秒  返回一个ID
    --clearInterval(tID):中止执行定时器
  <3>子类对象
  <<1>>location 对象
    --属性：localtion.href 更改当前网页
    --方法：location.reload() 刷新当前网页
  <<2>>history 对象
    --方法：
      --back() 后退
      --forward() 前进
      --go(num) 跳转，前进或后退取决于num的值是正或负
  <<3>>screen
    --属性：
    --screen.width 屏幕的宽
    --screen.height 屏幕的高
    --screen.availWidth 有效宽
    --screen.availHeight 有效高
  <<4>>navigator对象
    --navigator.userAgent
  <<5>>document文档节点（根节点） ----> DOM 对象  **重要**
    --DOM 操做：查找节点，读取节点信息，修改节点信息，建立新节点，删除节点
    1.读写节点的类型和名称：
      --属性：nodeType 、nodeName
    2.读写节点的内容
      --两个属性：
      --innerHTML：支持子标签 
      --innerText：不支持子标签 
    3.读写表单控件的值
      --包括：input、select、textarea
      --读：input.value
      --写：input.value=""
    4.读写节点的属性
      4.1使用方法：这些方法都是标准的API，任何版本的浏览器都支持
        --getAttribute() 获取节点的属性
        --setAttribute() 设置节点的属性
        --removeAttribute() 删除属性
    4.2使用属性
      4.2.1标准属性：这些属性是标准的API，任何版本的浏览器都支持
        标准属性包括：id/className/style 其余为非标准
      4.2.2非标准属性：这些不是标准API，低版本的浏览器不支持
    5.根据标签名查询节点
      5.1在整个文档内查询
        --var li = document.getElementsByTagName("li");
      5.2在某个节点下查询
        --var ul = document.getElementById("city");
        --var uli = ul.getElementsByTagName("li");  
    6.根据层次查询节点
      6.1查询某节点的父亲
        --xx.parentNode
      6.2查询某节点的全部孩子(带空格/回车,因此通常不用)
        --xx.childNodes
      6.3查询某节点的元素孩子
        --xx.getElementsByTagName("某个节点名");
      6.4查询某节点的兄弟
        --节点.父亲.孩子们[i]:
        gz.parentNode.getElementsByTagName("某个节点名")[i];
    7.根据name属性查询节点
      --一般用来获取一组radio或checkbox
      --document.getElementsByName("name");
    8.建立添加新节点
      --建立:document.createElement(ElementName)
      --添加：
        1>>appendChild(newNode) 添加在最后
        2>>insertBefore(newNode,已有节点) 添加在已有节点前
>>>>>>>>>>>>>>>3.自定义对象<<<<<<<<<<<<<<<<
1）直接量（JSON）
  ---var obj = {"name":"zs","age":35,"job":function(){}};
  ---{}表明一个对象，内置键值对
  ---一般key是字符串，value是任意类型数据（包括函数）
  ---特色：采用这种方式建立对象简单
2）构造器（用来new的函数就是构造器）
  2.1） JS内置的构造器
      ---特定：Date，String，Array,RegExp
      ---通用：Object
      ---优势：简单，缺点：不够直观
  2.2） 自定义构造器
      ---写一个函数来充当构造器
      ---函数名首字母大写，加参数接收传入的数据
      ----优势：直观 缺点：麻烦

  ◆注：使用建议：
      ◆若封装出来的对象给被人使用，建议用2.2
      ◆若封装的对象中没有方法，建议用1
      ◆若封装的对象中有方法，建议用2.1

>>>>>>>>>>>>>>> 4.事件 Event <<<<<<<<<<<<<<<<
  1.事件的概述
    --事件就是操做、动做
    ---事件就是JS被调用的时机
    分为：鼠标事件，键盘事件，状态事件
    >>>>>状态事件：某条件达成时自动触发的事件
  2.事件的定义
    1）直接定义
      --直接在标签上经过属性定义事件
      --标签和JS耦合度高
    2）事件后绑定
      --在页面记载以后
      --获取到要绑定事件的那个元素节点 (也是标准的)
      --input.onclick = function(){};
    3）取消事件
      -在事件函数内取消事件：return false
  3.事件对象
    1）什么是事件对象
      --事件发生时浏览器对此事件建立的一个对象
      --该对象中封装了本次事件的详细信息，如鼠标的位置
    2）如何得到事件对象
    >>直接得到
      --在调用函数时直接传入event
      onclick = "f1(event);"
      在开发f1()时须要加参数来接收这个event事件
    >>后绑定事件
      --浏览器在调用函数时会自动传入enent
      --在函数上增长参数接收event便可
  4.事件冒泡机制
   >>冒泡机制
       --多层元素都定义相同的事件
       --点击内层的则外层元素事件也会触发
       --事件触发顺序是由内向外执行，称为冒泡机制

   ----经过事件对象能够取消冒泡机制
   --根据浏览器的不一样有两种方法：
      >>event.stopPropagation();
      >>event.cancelBubble = true;
  5.事件源
    获取事件源：
      根据浏览器的不一样有两种方法：
      >>event.srcElement
      >>event.target

    ◆注：冒泡机制的做用：
        ◆用来简化事件的定义
        ◆能够在父元素上定义一次事件，经过获取事件源来获取事件