JavaScript(五)

基于《JavaScript高级程序设计》


表单脚本

  1. 表单基础知识：<form>元素表示，对应js的HTMLFormElement，继承自HTMLElement。

    可以通过id属性，由getElementById(id)获得表单的引用，也可用document.forms获得页面所有的表单元素，再由索引或者name值进行访问。

    1
    2
    3
    var form  = document.getElementById("myForm");
    form.submit(); //提交表单，但不会触发submit事件
    // form.reset(); //会触发reset事件

    表单有elements属性，是表单中所有表单元素的集合。通过name或者索引可以访问。

    表单字段共有属性：

    • disabled \ form(只读的指针) \ name \ readOnly \ tabIndex \ type \ value

    还有 focus() \ blur() 两个共有方法。

  2. 文本框脚本：<input>设置为 type=text或者用<textarea>

    • select()方法，选中文本，对应的是select事件，跨浏览器文本选中：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      // 要操作的文本框，选择的第一个索引，最后一个字符的索引
      function selectText(textbox, startIndex, stopIndex){
          if (textbox.setSelectionRange){
              textbox.setSelectionRange(startIndex, stopIndex);
          }else if (textbox.createTextRange){
              var range = textbox.createTextRange();
              range.collapse(true); // 折叠到文本开始位置
              range.moveStart("character", startIndex);
              range.moveEnd("character", stopIndex - startIndex);
              range.select();
          }
          textbox.focus();
      }

    • 过滤输入：可以用正则表达式进行判断，然后对按钮进行禁用啥的。HTML5为文本字段新增pattern属性，值专门为正则表达式。

      eg: 只输入数值

      1
      <input type="text" pattern="\d+" name="count">

    checkValidity() / validity属性 可以对这些约束进行判断

  3. 选择框脚本：<select> 和 <option>

    对应的为HTMLSelectElement和HTMLOptionElement类型。

HTML5脚本编程：


  1. 跨文档消息传递：在不同域的页面传递信息(后端一般会解决跨域配置)

    postMessage()方法接受两个参数：一个消息，和一个表示消息接收方(及此时的发送方)来自哪个域

  2. 原生拖放：

    • 拖放事件：

      拖动元素触发dragstart -> drag -> dragend

      拖到有效放置目标触发dragenter -> dragover -> dragleave/drop

      与之相关还有dataTransfer及其两个属性dropEffect / effectAllowed

错误处理


  1. try-catch语句：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    try{
        // 可能会导致错误的代码，eg
        window.someNoexistentFunction();
    }catch(error){
        // 发生错误的处理，eg
        alert(error.message);
    }finally{
        // 无论怎样都会执行
    }

  2. 错误类型：

    • Error 基类
    • EvalError
    • RangeError 数值超出相应范围
    • ReferenceError 找不到对象
    • SyntaxError 语法错误
    • TypeError 变量类型不符合要求
    • URIError

    可通过instanceof判断错误类型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    try{
        someFunction();
    } catch(error){
        if (error instanceof TypeError){
            //...
        } else if(error instanceof ReferenceError){
            //...
        } else{
            // 可以对所有可能出现的错误进行判断
        }
    }

  3. 抛出错误：throw

    遇到throw操作符，代码会立即停止，仅当有try-catch语句捕获到被抛出的值，代码才会继续进行。

  4. 调试技术

    console对象向控制台写入消息，具有下列方法：

    • error(msg) / info() / log() / warn()

JSON


  • 简单值

  • 对象 ：键值对

  • 数组 ：列表

  • 序列化与解序列化

    JSON.stringfy():接收3个参数，后两个参数可选，第一个参数为js对象，第二个为过滤器可以是数组后者函数等，第三个表示缩进以及分隔符，数值为缩进空格数，返回序列成json格式的数据

    JSON.parse() 反序列，接收一个参数为json数据，还有一个可选参数为还原函数