javaWeb核心技术第三篇之JavaScript第一篇

- 概述
  - JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言
  - 作用:给页面添加动态效果,校验用户信息等.
- 入门案例
  - js和html的整合
    - 方式1:内联式
      "通过<script></script>标签实现,在标签体中编写js代码即可"
    - 方式2:外联式
      "编写外部的js文件,通过srcipt标签的src属性引入即可"
    - 注意事项:
      "     script标签可以放在页面的任何位置,一般放在head中
            一个页面可以有多个srcipt标签
            script标签一旦使用了src属性,它的标签体就会失效"
- 组成部分
  - ECMAScript:核心语法
    - 变量声明
      - 格式:  var 变量名称 = 初始化赋值;
      - 注意事项:
        - var可以省略,但是不建议省略
        - 末尾的分号也可以省略,但是不建议
    - 数据类型
      - 原始类型(5种)
        - Undefined:undefined
        - Null:null
        - Number:一切数字
        - String:一切被引号引起来的字符串
        - Boolean: true 或 false
        - 运算符typeof
          "用来判断给定值的数据的所属类型  例如: typeof age;"
      - 引用类型:javaScript第二天内容
    - 运算符
      - 等性运算符
        - ==   !=
          "判断数值"
        - ===    !==
          "判断数值和类型"
      - 关系运算符
        - >  <  >=  <=
      - 逻辑运算符
        - &&  ||   !
        - 非空对象 非0数字 非空字符串 都为true 其他为false
    - 语句
      "几乎和java一样"
      - if  ...   else  ...
      - for(){}方式
    - 函数
      "用来完成指定操作的代码片段,在java中叫方法,在js中叫函数"
      - 方式1: 普通函数
        " function 函数名称(参数列表){
             ...
        }"
      - 方式2(匿名函数):
        "var 函数名称 = function(参数列表){
            ...
        }"
      - 函数返回值:在函数中直接使用return返回结果即可
      - 注意事项:参数列表中的参数可以不写类型
    - 事件
      "具体的某件事情"
      - 单击事件: onclick
        "单击鼠标时触发"
      - 表单提交事件: onsubmit
        "提交form表单时触发"
      - 页面加载成功事件: onload
        "当页面加载完毕后触发"
    - 事件和事件源的绑定
      - 方式1:绑定事件
        " 实现方式:通过标签的事件属性
         例如:<xxx onclick="函数名(参数列表)"></xxx>"
      - 方式2:派发事件
        "    实现方式:获取标签对象(元素)
                    对象.事件名称=function(){}"
      - 使用步骤:
        - 1.确定事件
        - 2.编写函数
          - 获取元素
          - 处理元素
  - BOM(浏览器对象模型):操作浏览器
    - window 窗口
      - 常用属性
        "通过它获取其他的四个对象
        eg:window.history  == history
        注意:使用window的对象或属性时,window可以省略不写"
      - 常用方法
        - 定时器
          - var 定时器id = setInterval()  设置周期执行定时器
            - 格式1:setInterval(函数名称,毫秒值);
              "周期执行,每隔多少毫秒执行一次指定函数"
              - 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时.
            - 格式2:setInterval("函数名称(参数列表)",毫秒值);
              - "周期执行,每隔多少毫秒执行一次指定函数 可传递参数"
          - clearInterval() 清除周期执行定时器
            - 使用方式:clearInterval(定时器id)
              "作用:将正在使用的定时器清除"
          - setTimeout()  单次执行定时器
            - 格式1:setTimeout(函数名称,毫秒值);
              "单次执行,多少毫秒后执行指定函数,只执行一次"
            - 格式2:setTimeout("函数名称(参数列表)",毫秒值);
              "单次执行,多少毫秒后执行指定函数,只执行一次  可传递参数"
            - 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时.
          - clearTimeout()
            - 使用方式:clearTimeout(定时器id)
        - 警告框
          - alert();
        - 对话框
          - prompt();
            "可以传入两个参数,第一个为提示信息,第二个为默认值"
        - 确认框
          - confirm();
            "可以传入一个参数,为确认信息"
        - 扩展
          - 打开  open(url);
          - 关闭  colse();
    - history 历史
      - 常用方法
        - forward();  下一个页面
        - back();   返回上一个页面
        - go(Number);   ★
          - go(number);   向后跳转几个页面
          - go(-number);   向前跳转几个页面
    - location 连接  ★★
      - 常用属性
        - href
          - location.href;   得到当前页面的路径
          - location.href=url;  跳向指定的页面
    - navigator 了解
    - screen 了解
  - DOM(文档对象模型):操作文档 (明天内容)
    - 获取一个元素(标签)对象
      - var obj = document.getElementById("id值");
        "通过id获取一个标签对象"
      - 获取对象中的value值
        "通过对象的value属性    对象.value;"

回顾:
    javaScript:直译式的脚本语言,直接嵌入html使用即可
    js和html整合:
        方式1:内联式
            通过script标签实现,直接在标签体中编写js代码即可
        方式2:外联式(首先要编写外部的js文件,后缀名以*.js结尾)
            通过script标签的src属性实现
    js组成部分:
        ECMAScript:核心语法
            变量声明
                var 变量名称 = 初始化值;
            数据类型
                原始类型:(5种)
                    Undefined: undefined   var age;
                    Number:
                    String:
                    Null: null
                    Boolean:

                    typeof 对象;
                引用类型:
            运算符
                等性运算符:
                    == !=
                    === !==
                关系运算符:
                    > < >= <=
                逻辑运算符:
                    && || !

                    "abc" || false
                    "abc" || "123"

                    "abc" && "123"
                    "abc" && false
            语句
                if("123"){}
                for(){}
            函数
                方式1:普通函数
                    function 函数名(){}
                方式2:匿名函数
                    var 函数名 = function (参数,参数){}
                调用函数:
                    函数名(参数,参数);
                返回值:
                    return 返回值;
            事件
                onclick:单击事件
                onsubmit:表单提交事件
                onload:页面加载成功事件

            事件和事件源绑定
                方式1:绑定事件
                    通过标签的事件属性
                    <xxx onclick = "func()"></xxx>
                方式2:派发事件
                    a.获取事件源(获取标签对象)
                        var 对象 = document.getElementById("id");
                    b.给事件源派发事件
                        对象.事件名称 = function(){
                            ....
                        }
        BOM:操作浏览器
            window:窗口
                属性:
                    通过window获取其他的四个对象即可.使用window的属性或方法的时候window可以省略不写
                方法:
                    定时器:
                        周期执行:
                            var interId = setInterval();
                                setInterval("函数名称()",毫秒值);
                                setInterval(函数名称,毫秒值);
                            clearInterval(id);
                        单次执行:
                            var timeId = setTimeout();

                            clearTimeout(id);
                    警告框:
                    对话框:
                    确认框:
                    打开和关闭:
            history:历史
                方法:
                    forward();
                    back();
                    go(number);
            location:连接 ★★
                属性:
                    href
                        location.href;
                        location.href = url;
        DOM:操作文档
            var 对象 = document.getElementById("id");
            对象.属性名称; 获取
            对象.属性名称 = 值; 设置
/////////////////////////////////
案例1-完善表单校验
    需求分析:
        当表单提交的时候,校验表单中的用户名和密码是否符合格式,如果不符合,则在相应的输入框后面填写提示信息且不允许表单提交,
        反之可以提交
    技术分析:
        事件
        正则表达式:
        DOM对象:
///////////////////////////
    DOM:
        操作value属性
            获取value属性的值:
                获取一个标签对象:
                    var 标签对象 = document.getElementById();
                获取value属性的值:
                    标签对象.value;
            设置value属性的值:
                获取一个标签对象:
                    var 标签对象 = document.getElementById();
                设置value属性的值
                    标签对象.value = 值;
        操作标签体:
            获取标签体内容:
                获取一个标签对象:
                    var 标签对象 = document.getElementById();
                获取标签体的内容:
                    标签对象.innerHTML;
            设置标签体内容:
                获取一个标签对象:
                    var 标签对象 = document.getElementById();
                设置标签体的内容:
                    标签对象.innerHTML = "<xxx>值</xxx>";
    正则表达式:
        1.编写正则表达式
            用户名：var zz = /^[a-z0-9_-]{3,16}$/;
            密码：var zz = /^[a-z0-9_-]{6,18}$/;
            校验为空: /^\s*$/
        2.校验
            var str = "123";
            zz.test(str);        Boolean
///////////////////////
    步骤分析:
        1.确定事件(表单提交事件)
            <form onsubmit="retrun checkForm()"></form>
            <form id="formId"></form>
        2.编写checkForm函数
            function checkForm(){
                //0/设置全局开关
                var flag = true;
                //a.获取用户名和密码输入框对象
                    var 对象 = document.getElementById("id");
                //b.获取用户名和密码的值
                    var val = 对象.value;
                //c.编写正则表达式

                //d.校验
                    if(zz.test(val)){
                        //校验不通过
                        给对应的span标签中填写提示信息
                        flag = false;
                    }else{
                        //校验通过
                        给对应的span标签中填写提示信息
                    }
                //e.返回值
                return flag;

            }

案例2-表格各行换色
    需求分析:
        当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色
    技术分析:
        事件
        DOM:
    //////////////////////
        步骤分析:
            1.确定事件(页面加载成功事件)
                onload = function(){

                }
            2.编写匿名函数
                a.获取当前页面所有行对象
                    var trObjArr = document.getElementsByTagName("tr");
                b.遍历数组对象,给计数行和偶数行添加不同的背景颜色
                    for(var i=0;i<trObjArr.length;i++){
                        if(i%2==0){
                            trObjArr[i].style.backgroundColor = "颜色";
                        }else{
                            trObjArr[i].style.backgroundColor = "颜色";
                        }
                    }

案例3-复选框全选和全不选
    需求分析:
        当点击头部的复选框的时候,要使其他复选框的状态和头部的保持一致.
    技术分析:
        单击事件
        DOM
        操作元素的checked属性
    /////////////////////////////
    步骤分析:
        1.确定事件(单击事件)
            给头部的复选框添加单击事件
        2.编写函数
            a.获取头部复选框状态
                对象.checked;
            b.获取其他的复选框对象
            c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性
案例4-省市二级联动
    需求分析:
        当省份的下拉选改变的时候,根据选中的省份查询其所对应的市,将所对应的市,展示到市的下拉选中.
    技术分析:
        改变事件
        数组
        Dom操作
    /////////////////////
    步骤分析:
        1.确定事件(改变事件)
            给省份的下拉选添加改变事件
        2.编写changePro函数
            function changePro(){
                a.获取选中省份所对应的市数组(value)
                    var cityArr = arr[value];
                b.获取市的下拉选对象
                    var cityObj = document.getElementById("cityId");

                c.遍历市数组,将每一个市拼成option追加到市的下拉选中
                    cityObj.innerHTML += "";

            }