大数据正式9

大数据正式9

JavaScript概述

• 网页中
  1. HTML定义了网页的内容
  2. css描述了网页的布局
  3. JavaScript指定了网页的行为
• JavaScript历史
  1. 1995年5月--网景公司--Brendan Eich用了10天，LiveScript
  2. 1995年12月--改名为javaScript
  3. 1996年8月--微软--JScript
  4. 1997-1999年--ECMA国际组织，ECMAAScript，基于已有的JavaScript和JScript，提出标准的Script语法规则，JavaScript和JScript都遵循这套标准
  5. 1999年以后，ECMAScript不断更新
• 与java的关系：没有关系，只是蹭了一下java的热度
• JavaScript特点
  1. 脚本语言，不需要编译，是解释运行的语言
  2. 可插入HTML的编程代码，可由所有的现代浏览器执行
  3. 基于对象，弱类型语言
  4. 很容易学习
• 优点
  1. 交互性：可以与用户进行动态交互
  2. 安全性：只能在浏览器内运行，不能访问本地硬盘或其他资源
  3. 跨平台：有浏览器即可运行，与操作环境无关

在HTML中引入JavaScript

• 直接在html中写--script标签中

• 引入外部的js文件--script标签

JavaScript语法

• 注释
  1. 单行注释//
  2. 多行注释/**/

• 数据类型

  • 基本数据类型
    • 数值类型（number）

      1. js中，所有数值的底层都是浮点型，在需要时，整型和浮点会自动转换--1.2+1.8=3
      2. 特殊值
          1. Infinity正无穷大
          2. -Infinity负无穷的
          3. NaN（not a number），和任何数值都不相等，和自己都不相等。如果要判断一个值是否为非数字，不能用NaN==x来判断，而是应该使用isNaN（x）进行判断
      3. 包装对象：Number
      

    • 字符串类型（String）

      1. 用单引号或双引号来引起来
      2. 包装对象：String
      

    • 布尔类型（boolean）

      1. true/false
      2. 包装对象：Boolean
      

    • undefined类型

      1. 值只有一个：undefined
      2. 表示变量未定义
      3. 如果声明了一个变量，但是没有初始化值，该变量就是undefined
      

    • null类型

      1. 值只有一个:null
      2. 表示现在的值为空
      3. 常用作函数的返回值，表示一个没有任何内容的空对象
      

  • 复杂数据对象：对象（普通对象，数组，函数）
  • js中的类型转换
    • 数值类型

      1. 转字符串类型：直接装换为对应值的字符串--3->"3"
      2. 转布尔类型：0和NaN转成false，其他数值转换为true
      3. 需要时，会自动转成对应的包装对象--100->new Number(100)
      

    • 字符串

      1. 空字符串“”：转数值为0；转布尔为false
      2. 非空，纯数值字符串：转数值为对应数值；转布尔值为true
      3. 非空，非数值字符串：转数值为NaN；转布尔为true
      4. 需要时，转为对应的String包装类
      

    • 布尔类型

      1. true：转数值为1，转字符串为“true”
      2. false：转数值为0，转字符串为“false”
      3. 需要时转为包装类
      

    • undefined

      转数值为NaN；转字符串“undefined”；转布尔为false；转对象会抛出异常
      

    • null

      转数值为0；转字符串“null”；转布尔为false；转对象会抛出异常
      

  • 变量的定义：
    • var可以指向任意类型的值
    • 在js中有数据类型，但变量不区分类型，弱类型语言
  • 运算符
    • 与java中的运算符大致相同
    • 其他

      1. ==和===：==先将两边的数据统一转化为一种类型在进行比较；===会比较类型和值
      2. typeof 对象：返回对象的类型
      3. delete 对象：删除对应对象 
      

  • 语句
    • 与java的语句大致相同
    • 不同

      1. if 条件语句
          如果判断条件不是布尔类型自动转化为布尔值
      2. switch语句
          语法和java大致相同，也支持字符串类型
      3. 循环语句
          js不支持增强for循环
      

  • 函数

    • 通过function关键字来定义一个函数

      function 函数名(参数列表){
          //函数体
      }
      
      //调用函数
      函数名（实参列表）；
      

    • 通过函数表达式来定义一个函数

      var fn =function(形参列表){
          //函数体
      }
      
      //调用函数
      变量名（实参列表）；
      

  • 数组
    • 通过Array（）构造函数来创建数组

      var arr1=new Array();//创建一个空数组
      var arr2=new Array(10);//创建一个长度为10的数组
      var arr3=new Array("hello",666,true);//创建一个具有指定初始值的数组
      

    • 通过数组直接量来创建数组

      var arr4=[];//创建一个空数组
      var arr5=["x",100,false];
      

    • 数组中的细节问题

      1. 数组的长度可以被任何改变
          var arr=["a","b","c"];
          arr.length=1;
          //结果为["a"]
      2. 如果数组中某一个位置没有元素，该位置的值为undefined
          var arr=["a","b","c"];
          arr[10];//undefined
      3. JS中的数组可以存放任意类型的数据
          var arr=[1,"2",true];
      

  • String

    1. 创建
        var str1=new String("xxx");
        var str2="yyy";
    2. 常用的属性和方法
        1. 返回字符串的长度
            str.lenth
        2. 返回指定索引位置的字符
            str.charAt(0)
        3. 返回子串第一次出现的位置
            str.indexOf("java",2)
        4. 返回最后出现子串的位置
            str.lastIndexOf("java",10)                  
        5. 将字符串按照指定字符分隔为字符串数组
            var arr=str.split("-")
        6. 提取字符串的某个部分
            str.slice(start,end)
        7. 返回从指定位置开始的指定长度的子字符串
            str.substr(start,length)
        8. 字符串中的字母转换为小写
            str.toLowerCase()
        9. 字符串中的字母转化为大写
            str.toUpperCase()
        10. 匹配正则表达式
            str.math(regexp)
        11. 替换指定的字符串
            str.replace(regexp,replaceText)
        12. 查找与正则表达式匹配的第一个子字符串的位置
            str.search(regexp)
    

  • RegExp对象（正则表达式）

    1. 创建
        1. var reg1=new RegExp("","");
        2. var reg2=/XXX/;
    2. 标识符
        1. g(Global)全局查找
        2. i(ignoreCase)忽略大小写
        3. 从头到尾都匹配，需要以“^”开头，以“$”结尾
    3. 函数
        1. reg.test(str);
    

  • Array对象

    1. 创建
        1. var arr1=new Array();
        2. var arr2=[];
    2. 常用的属性和方法
        1. 返回元素的个数
            arr.length
        2. 将多个数组合并为一个
            arr.concat(arr1,arr2,arr3)
        3. 将数组中的元素按指定字符拼接起来
            arr.join("-") 
        4. 反转数组
            arr.reverse()
        5. 返回数组的一段
            arr.slice(start,end)
        6. 从一个数组移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素
            arr.splice(start,deleteCount,vaule...)
        7. 移除数组的最后一个元素并返回
            arr.pop()
        8. 在数组的末尾添加一个或多个元素，并返回新数组的长度
            arr.push(value)
        9. 移除数组的第一个元素并返回该元素
            arr.shift()
        10. 返回排序后的数组
            arr.sort(sortfunction)
        11. 为数组的开始部分加上一个或多个元素并且返回该数组的新长度
            arr.unshift(value)
    

  • date对象

    1. 创建
        1. var date1=new Date();//当前时间
        2. var date2=new Date(年，月，日[时，分，秒]);//指定时间，月份从0开始
    2. 常用方法
        1. 把日期转变为一个本地日期格式字符串
            date.toLocaleString()
        2. 获取年份
            date.getFullYear()
        3. 获取月份
            date.getMonth()
        4. 获取日期值
            date.getDate()
        5. 获取星期
            date.getDay()
        6. 返回1970.1.1到现在的毫秒数
            date.getTime()
    

  • Math对象
    • 直接拿来使用

      1. 圆周率的值
          Math.PI
      2. 返回e的幂
          Math.exp(number)
      3. 绝对值
          Math.abs(number)
      4. 向上取整
          Math.ceil(number)
      5. 向下取整
          Math.floor(number)
      6. 四舍五入
          Math.round(number)
      7. 返回[0,1)之间的随机数
          Math.random()
      

  • Global(全局对象)
    • 全局对象没有语法，直接调用方法

      1. parseFloat（String）
      2. parseInt（String）
      3. isNaN（numValue）
      4. eval(codeString)//判断一个字符串并将其以脚本代码的形式执行eval("alert('1+2')")---弹出3
      

  • 定义对象

    • 方式一：构造函数定义对象

      function Person(){
          //定义了一个空的Person对象
      }
      
      function Person（参数列表){
          //对象的内容
      }
      

    • 方式二：对象直接量

      var p={
          "key1":"value1",
          "key2":"value2",
          "key3":"value3"...
      }
      

    • 对象中取值

      1. p.key1;
      2. p["key1"];
      

DHTML

• DHTML概述
  • Dynamic HTML动态的HTML
  • 并不是一门洗新技术，而是将现有的HTML，css，JavaScript整合在一起，形成了DHTML技术
  • 分为BOM和DOM
    • BOM：Browser Object Model浏览器对象模型，其中封装了浏览器操作的相关对象
    • DOM：Document Object Model文档对象模型，将整个HTML文档按照文档结构组成了树形结构
• BOM
  • window对象：全局对象，可省略window
  • 常用事件

    1. onclick--窗口被点击时触发
    2. onfocus--窗口获得焦点时触发
    3. onblur--窗口失去焦点时触发
    4. onload--整个HTML文档加载完触发
    

  • 常用方法

    1. alert()消息对话框
    2. confirm()确认对话框
    

  • location对象
    • 属性：href
• DOM
  • 获取元素

    1. document.getElementById("id值");//通过id值获得指定id元素
    2. document.getElementsByname("name值");//通过name值获得指定name元素组成的数组
    3. document.getElementsByTagName("元素名");//通过标签名值获得指定标签名的集合数组
    

  • 属性

    1. value//获取和设置输入框的value值
    2. innerText//（部分浏览器不支持），获取或设置元素内的文本内容
    3. innerHTML//获取和设置元素的HTML内容
    

  • 元素的增删改

    1. document.createElement("div");//创建一个div元素
    2. body.appendChild(元素);//往body里添加一个子元素
    3. body.removeChild(元素);//删除body中的一个子元素
    4. body.replaceChild(新元素，旧元素);//替换元素
    5. body.insertBefore(添加的元素，本元素);//插入元素
    6. 元素.cloneNode(boolean);//克隆元素，参数默认为false，表示只克隆本身，不克隆子孙元素。反之全部克隆
    

补充