大数据WEB阶段（四）JavaScript

JavaScript

一、JavaScript概述

1. JavaScript简称js
2. js是干什么的？
   
   1. HTML定义了网络的内容
   2. CSS描述了网页的布局
   3. js定义了网页的行为
3. js与java的关系
   
   1. java与javaScript本质上没有任何关系 。 只是JavaScript蹭了java的热度而已 。
4. js 的特点
   
   1. js是脚本语言 ， 不需要编译 ， 世界试运行的语言 。
   2. js是可插入html页面 的编程代码 ， 可有所有的浏览器执行 。
   3. js是 基于（是基于 ， 而不是面向）对象 ，弱类型的语言 。
   4. js的学习很容易 。
5. js优点
   
   1. 交互性： 可以与用户动态交互
   2. 安全性： 只能在浏览器内运行 ， 不能访问本地硬盘或其他资源 。
   3. 跨平台： 只要有浏览器就行 ， 与操作环境没有关系 。

二、在html中引入js代码

1. 直接在html中编写js代码

   1. 一般推荐把js代码写到head中 。

   2. 引入外部文件

      1. 如果js代码非常多的情况下 ， 可以将js代码 抽取到一个独立的js文件中 ，在html中通过script标签引入js文件 。

      2. 注意：如果是用script引入外部js文件 ， 则在script便签内部你不要写js代码 ， 并且标签不要写成自闭 形式 ， 否则 可能会导致引入失败的问题 。

三、js语法

1. 注释

   1.  单行注释： //注释 内容
   2.  多行注释： /*注释内容*/
   

2. 数据类型
   
   1. 基本数据类型
      
      1. js中基本数据类型有五种： 数值型（number）、布尔型（boolean） 、 字符串类型（String） 、 undefined类型 、 null
      2. 数值类型
         
         1. 在js中 ， 所有的数值底层都是浮点型 ， 在需要时 ， 整型和 浮点型会自动进行类型转换 。
            
            1. 例如： 2.4+3.6 = 6
         2. 特殊值
            
            1. Infinity 正无穷大
            2. -Infinity 负无穷大
            3. NaN (not a number) 非数字： NaN与任何数都不相等 ， 包括他自己本身 ， 如果要判断一个数是不是一个非数字 ， 不能用NaN == xx 来判断， 而是应该用isNaN(xx)进行判断 。
         3. 在js中数值类型有对应的包装类 — Number
      3. 字符串类型
         
         1. 在js中字符串类型是基本数据类型的一种 ， 可以用单引号或双引号引起来 。
            
            1. 例如 ： var s1 = “a”; var s2 =’b’;
         2. 在 js中 ， 为string类型提供了对应的包装类对象String
      4. 布尔类型
         
         1. boolean值为true或false
         2. 在js中 ， 为boolean类提供了对应的包装类 –Boolean
      5. undefined
         
         1. undefined类型的值只有一个就是undefined ， 表示变量未定义 ， 如果声明 了一个变量但是没有初始化， 那么值就是undefined
      6. null
         
         1. null的值也是只有一个 ， 就是null 。 表示 此处的值现在为空。 常用了 作为函数的返回值 ， 便是返回值是一个空对象 。
   2. 复杂数据类型
      
      1. 对象（普通对象 、 数组 、 函数）
   3. js中数据类型的转换
      
      1. 数值类型：
         
         1. 转换字符串类型 ， 直接转换成对应值的字符串 。 3 –>“3”
         2. 转布尔类型 ， 0和NaN转换成false ， 其他值转换成true
         3. 在需要时会自动转化成对应的包装类 100–>new Number(100);
      2. 字符串类型
         
         1. 空字符串(“”)转化成数值为0 ， 转换成boolean为false。
         2. 非空纯数值字符串（“123”） ， 转换为对应 的数值， 转boolean为true
         3. 非空非数值字符串 （“adf”） ， 转数值为NaN ，转 boolean 为true
         4. 在需要的时候 ， 会自动转换成对应的包装对象 “aaa”–> new String(“aaa”);
      3. 布尔类型：
         
         1. true ： 转数值为1 ， 转字符串为”true”
         2. false ： 转数值为0 ， 转字符串为“false”
         3. 在需要时 ， 会自动转换为对应的包装对象
      4. undefined
         
         1. 转 数值为NaN ， 转字符串为“undefined” ， 转布尔为 false ， 转对象会抛异常
      5. null
         
         1. 转数值为0 ， 转字符串 为“null” ， 转布尔值为false ， 转对象对抛异常 。
3. 变量的定义
   
   1. 在js中有数据类型 ， 但是变量不区分类型 ， 所以称js是一门弱类型的语言 。
   2. 在js中通过 var关键字声明变量 ， 变量不区分类型 ， 可以指向任意类型的值

4. 运算符

   1. js中的运算符和java中运算符大致相同

   2. js中与java运算负的 不同之处：

      1. 比较运算符 “==”与“===”
         
         1. ==在进行比较时 ， 如果两端的数据类型不一样 ， 则先自动转换为同一种类型在进行比较
         2. ===在比较时更为严格 ，如果两端 数据类型不一样则 直接返回false ，， 如果数据类型一样再去比较值 。

      2. typeof：

         1. 用类返回变量\常量\表达式的数据类型

            var x = 123  ; typeof x;
            

      3. delete : 用类删除数组中的元素或者删除对象中的属性或方法

         var arr = [123,"sd",true]; delete arr[1];
         

5. 语句
   
   1. js中语句与java中的语句也大致相同 ， 不做赘述。

6. 函数

   1. 用function关键字来 定义 一个函数

      function 函数名（参数列表）{
          //函数体
      }
      

   2. 用函数表达式来定义一个函数

      var 函数名 = function（参数列表）{
          //函数体
      }
      

7. 数组

   1. 通过Array()构造函数来创建数组

      var arr1 = new Array();//创建一个空数组
      var  arr2 = new Array(10);//创建一个初始容量为10的数组
      var arr3 = new Array(11,"ddef",true);//创建一个具有指定初始值的数组
      

   2. 通过 数组直接量来创建数组

      var arr1 = [];//创建一个空数组
      var arr2 = [22,"df",,true];//创建一个具有指定初始值的数组
      

   3. 数组中的细节问题
      
      1. 数组 的长度可以任意改变
      2. 如果数组中某一位置没有元素 ， 则值为 undefined
      3. js中数组可以存放任意类型的数据

8. js内置对象

   1. String对象

      1. 创建

         var str1 = new String("df");
         var str2 = "sd";
         

      2. 常用方法和属性
         
         1. str.length 获取字符串的长度
         2. str.charAt(index); 获取指定位置的字符
         3. str.indexof(subStrng , startIndex); 获取从指定位置开始子字符串 第一次穿线的位置
         4. str.lastof(subString , startIndex); 获取从指定位置开始 ， 子字符串最后一次出现的位置 。
         5. str.spilt(delimiter) 将字符串 按照指定字符分割为字符数组 。
         6. str.slice(start ,end) 提取 字符串的某个部分 ， 含头不含尾
         7. str.substr(start , length); 返回 从指定位置开始的指定长度的字符串 。
         8. str.tolowerCase() 将字符串中的字符全部转为小写
         9. str.toUpperCase() 将字符串中的字符全部转为大写
         10. str.match(trgexp) 在字符串中查找指定匹配正则表达式 的值
         11. str.replace(regexp , replaceText) 字符串中匹配 正则表达式的值替换 为 其他值
         12. str.search(regexp) 查找与 正则表达式匹配的第一个子字符串的位置 。

   2. RegExp对象（正则表达式）

      1. 创建：

         var reg1 = new RegExp("xxxx");
         var reg2 = /xxxx/;
         

      2. 标识符
         
         1. g ：Global 全局查找
         2. i ：IgnoreCase 忽略大小写
         3. 如果证则表达式需要 从头到尾匹配 ， 需要以”^”开头 ， 以“$”结尾
      3. reg1.test(str) 检查此字符串是否否和 该正则表达式

   3. Array对象

      1. 创建：

         var arr1 =  new Array();
         var arr2 =  [];
         

      2. 常用方法和属性
         
         1. arr.length 后去 数组中元素的个数
         2. arr.concat(arr1,arr2,arr3) 将多个数组合并成一个数组
         3. arr.join(String) 将数组中的元素按照指定的字符连接起来称为一个字符串。
         4. arr.reverse() j将数组反转
         5. arr.slice(start , end) 返回数字 中的一端
         6. arr.splice(start , deleteCount ,value) 从数组中移除 一个 或多个元素 ， 如果有必要的话在所移除的位置插入新的元素 ， 并返货回所有的移除的元素 。
         7. arr.pop() 移除数组中最后一个元素 ， 并返回该元素
         8. arr.push() 在数组的末尾 添加元素 ， 并返回数组的长度
         9. arr.shift() 移除数组中的第一个元素， 并返回该元素
         10. arr.unshift() 为数组的开头添加元素 ， 并返回数组的新长度 。
         11. arr.sort() 返回排序后的数组 （默认字典排序）

   4. date对象

      1. 创建：

         var date1 = new Date();//当前时间
         var date2 =  new Date(年， 月 ，  日，[时， 分 ，  秒]);//指定时间 ， 可以只有 年月日
         注意： 指定时间时 月份是从0开始的 
         

      2. 常用方法

         1. data.toLocaleString() 把日期(一个数值)转变成本地日期格式字符串

            例如：var date2 = new Date(2008,7,8);                                  date2.toLocaleString();
            // "2008/8/8 上午12:00:00"  
            

         2. data.getFullYear() 获取日期对象中所表示时间的年份

         3. data.getMonth() 获取日期对象中所表示时间的月份，返回一个 0 到 11 之间的整数，0表示一月。
         4. data.getDate() 获取日期对象中所表示一个月的日期值，返回值是一个处于 1 到 31 之间的整数，代表了相应的日期值。
         5. data.getDay() 获取日期对象中所表示一个周的日期值。 返回的值是一个处于 0 到 6 之间的整数，0表示周日，6表示周六。
         6. data.getTime() 返回从 1970 年 1 月 1 日至指定时间的毫秒数。
   5. Math对象
      
      1. Math可以直接拿来用
      2. 常用方法和属性
         
         1. Math.PI 返回圆周率的值，约等于 3.141592653589793。
         2. Math.exp(number) 返回 e（自然对数的底）的幂。
         3. Math.abs(number) 返回数字的绝对值。
         4. Math.ceil(number) 向上取整
         5. Math.floor(number) 向下取整
         6. Math.round(number) 四舍五入到整数
         7. Math.random() 返回介于 0 和 1 之间的伪随机数。

   6. 全局对象

      1. 全局对象没有语法 直接调用其方法

      2. parseFloat(numString) 将字符串转换成浮点数。

         例如：parseFloat("13.14")    // 返回number类型的13.14
         

      3. parseInt(numString) 将字符串转成整数，非四舍五入。

         例如：parseInt("9.99")    // 返回number类型的9
         

      4. isNaN(numValue) 判断一个值是否为非数字。

         例如： isNaN("abc")    // true 
         isNaN("123")    // false
         

      5. eval(codeString) 判断一个字符串并将其以脚本代码的形式执行

         例如：eval("alert(1+2)");   //会直接将"alert(1+2)"当作代码执行，弹出3
         

9. 自定义对象

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

      function Person(){}  // 定义一个空的Person对象
      
      function Person2(参数1,参数2...){
          对象内容...
      }                                   //定义一个带参数的对象
      

   2. 方式二：对象直接量

      var p3 = {
          "key1" : "value1",
          "key2" : "value2".........
      }
      

   3. 对象中取值：

      P3.key1   或者   p3["key1"]
      

   4. 案例：

      
      

四、DHTML

1. DHTML概述
   
   1. DHTML: Dynamic HTML 动态的 html
   2. DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术
   3. DHTML分为BOM和DOM。
   4. BOM：Browse Object Modle 即浏览器对象模型，其中封装了浏览器操作相关对象。
   5. DOM：Document Object Modle 即文档对象模型，将整个HTML文档按照文档结构组织成了树形结构。

2. BOM

   1. Window对象
      
      1. 此对象为全局对象，因此，调用方法或属性时，可以省略window。
      2. 常用事件：
         
         1. onclick事件 – 当窗口被点击时触发
         2. onfocus事件 – 当窗口获得焦点时触发
         3. onblur事件 – 当窗口失去焦点时触发
         4. onload事件 – 当整个html文档加载完之后立即触发
      3. 常用方法：
         
         1. alert() – 消息对话框
         2. confirm() – 确认对话框
   2. location对象
      
      1. 属性：href 获取 或 设置 浏览器地址栏的url

   3. 案例：

3. DOM

   1. 获取元素
      
      1. document.getElementById(“id值”); 通过id值获取指定id的元素
      2. document.getElementsByName(“name属性值”); 通过name属性获取指定name值的所有元素组成的集合数组
      3. document.getElementsByTagName(“元素名”); 通过元素的名称获取指定元素名的所有元素组成的集合数组
      4. value属性： 获取或设置输入框的value值
      5. innerText： (部分浏览器不支持) 获取或设置元素内的文本内容
      6. innerHTML： 获取或设置元素的html内容
   2. 元素的增删改
      
      1. docuemnt.createElement(“div”); 创建一个div元素
      2. body.appendChild(oDiv); 往body中追加一个子元素
      3. body.removeChild(oDiv); 删除oDiv子元素
      4. body.replaceChild(oNewDiv, oDiv); 用oNewDiv替换已有的子元素oDiv
      5. body.insertBefore(oDiv1, oDiv); 往body中插入一个子元素oDiv1, 子元素是插入在oDiv的前面
      6. oDiv.cloneNode([boolean]); 克隆
      7. oDiv元素, 参数默认值为false, 表示只克隆元素本身, 不克隆oDiv内的所有子孙元素, 如果希望克隆元素还克隆元素内容所有子孙元素, 可以传入参数true！！！

   3. 案例1：

      /* --通过ID获取并弹出用户名输入框的值-- */
          function demo1(){
              //根据ID获取用户名输入框，un即代表整个输入框
              var un = document.getElementById("username");
              alert(un.value);
              //可以自己设置value值
              un.value = "兰姐";
          }
      
          /* --通过name属性获取并弹出密码输入框的值-- */
          function demo2(){
              //根据name属性获取密码输入框，因为name属性可以重复，所以获取的是一个集合数组
              var pwarr = document.getElementsByName("password");
              //在数组中获取第一个元素
              var pw = pwarr[0];
              alert(pw.value);
          }
      
          /* --通过元素名称获取并弹出确认密码输入框的值-- */
          function demo3(){
              //根据标签名获取确认密码输入框，同样，获取的是一个数组
              var inparr = document.getElementsByTagName("input");
              //获取第三个元素
              var pw2 = inparr[2];
              alert(pw2.value);
          }   
      
          /* --获取元素内容-- */
          function demo4(){
              var oP = document.getElementById("pid");
              //获取p标签中的文本内容 innerText(部分浏览器不支持)
              alert(oP.innerText);
              //获取p标签中的所有html内容 innerHTML(绝大部分浏览器都支持)
              alert(oP.innerHTML);
              //设置p标签中的html内容
              oP.innerHTML = "我要变身了...!";
          }
      

   4. 案例2：

      /* --添加节点: 添加一个div元素到body的最后面-- */
          function addNode(){
              //获取父元素 
              //var oBody = document.getElementsByTagName("body")[0];
              //body是document的子对象，所以可以直接获取
              var oBody = document.body;
      
              //创建一个游离div元素
              var oNewDiv = document.createElement("div");
              //给div中添加内容
              oNewDiv.innerHTML = "我是新来的....!";
      
              //将div元素挂载到父元素上
              oBody.appendChild(oNewDiv);
          }
      
          /* --删除节点: 删除body中id值为 div_3 的div元素-- */
          function deleteNode(){
              //获取父元素body
              var oBody = document.body;
      
              //获取要删除的元素div_3
              var oDiv_3 = document.getElementById("div_3");
      
              //解除父子关系
              oBody.removeChild(oDiv_3);
          }
      
          /* --更新节点: 用新节点替换id值为 div_2 的div元素  -- */
          function updateNode(){
              //创建一个新节点
              var oNewDiv = document.createElement("div");
              oNewDiv.innerHTML = "我是来替换的~!";
      
              //获取被替换的元素
              var oDiv_2 = document.getElementById("div_2");
      
              //获取父元素, 并通过父元素替换子元素
              var oBody = oDiv_2.parentNode;
              oBody.replaceChild(oNewDiv, oDiv_2);
          }
      
          /* --克隆节点、插入节点到指定元素的前面--*/
          function copyNode(){
              //获取指定元素
              var oDiv_4 = document.getElementById("div_4");
      
              //克隆元素
              var oCloneDiv = oDiv_4.cloneNode(true);
              //false 默认值, 只克隆元素本身, 不克隆元素内容
      
              //获取父元素body
              var oBody = document.body;
              var oDiv_2 = document.getElementById("div_2");
              //将克隆元素插入到指定位置
              oBody.insertBefore(oCloneDiv,oDiv_2);
          }