JS客户端学习笔记二

4.补遗

       4.1在HTML中嵌入脚本

              4.1.1<script>标记

              在XHMTL使用脚本最把把代码放在CDATA部分中。

              <script><![CDATA[  //here you js code

                ]]></script>

               一个HTML可以放置任意多个脚本，这些脚本的执行顺序是它们在文档中的出现顺序。虽然这些脚本在不同的时刻执行，但是这些脚本却是同一个js程序的组成部分，因为在一个脚本中定义的变量和函数适用于随后出现的所有脚本。

              4.1.2</script>标记

              有时会用document.write()来写出脚本，但是注意：因为HTML解析器不理解JS代码，如果它看到代码中的“</script>“字符串，即使</script>出现在引号中，HTML解析器也会认为它发现了当前运行的脚本的结束标记。要避免这种问题，只需要将标记拆成片段，用表达式”</”+”script>”写出。

              <script>

              document.wirte(“<script>”);

              document.write(“document.write(‘<h2>this is the </h2>’);”);

              document.write(“</”+”script>”);

              </script>

              另外还可用转义字符\

              document.write(“<\/script>”);

              在XHTML中，脚本包含在CDATA部分中，就可以直接用         document.write(“</script>”);

       4.2JS程序的执行

              4.2.1执行脚本

              当一个文件有多个脚本时，脚本按它们出现的顺序来执行。任何不具有defer属性的<script>元素都可以调用document.write()方法。传递给这个方法的文本被插入到文档中脚本所在的位置。当脚本完成了执行以后，HTML解析器继续解析文档，从脚本所输出的任何文本开始。

              4.2.2onload事件

              在这个事件被触发时，文档已经完全的解析和载入了，因此可以在这个事件里操作文档的任何元素。

              onload事件句柄在文档完全解析之后调用的，它们必须不调用document.write()。任何这样的调用都重新打开一个新的文档并覆盖掉当前文档，而不是在当前文档后面添加内容。

5. 表单和数据完整

       5.1对<form/>元素进行脚本编写

              5.1.1访问表单字段

              var oField=oForm.elements[0];

              var oField=oForm.elements[“textbox”];

              var oField=oForm.textbox;//用名字来直接访问

              var oField=oForm.[“text box 1”]//如果名字中有空格可以用括号访问

              <form name=”form1” action=”” >

              <input type=”text” name=”textbox”/>

              <input type=”text” name=”text box 1”/>

              </form>

              5.1.2表单字段的共性

              所有的表单字段（除了隐藏字段）都包含同样的特性、方法和事件）。

              disabled特性表单控件是否可用

              form特性用来指向字段所在的表单

              blur()方法使字段失去焦点

        focus()方法使字段获得焦点

        onblur事件

        onfocus事件

        隐藏字段只支持form特性

        5.1.3提交表单和重置表单

        用表单对象的submit()方法可以在页面的任意地方使用。

        <input type=”button” value=”sumit” onclick=”document.forms[0].submit()”/>

        如果使用了submit()方法不会触发onsubmit事件。而onsubmit事件是在按下提交按钮后，会触发submit事件，并执行onsubmit事件处理函数。

        reset()方法类似submit()方法，但于submit()方法不同的是，当使用reset()方法的时仍会触发onreset事件。

        5.1.4仅提交一次

        怎么只让用户提交一次表单。解决方法：在用户点击提交按钮后，将其禁用。而且必须用一个普通按钮而不是提交按钮。

        <input type=”button” value=”submit” onclick=”this.disabled=true;this.form.submit()”/>

     5.2文本框

        <input type=”text”/><textarea></textarea>这两种

        5.2.1文本框事件和方法

        change事件―当用户更改内容，并且文本框失去焦点时发生。

        select事件―当一个或多个字符被选中时发生，无论是手工选中或用select()方法

        select()方法可选中文本框中的所有文本，但是先要文本框获得焦点。用focus()方法

       5.2.2为文本框添加特征

       在HTML中可以用文本框添加任意的特性，但在XHTML的严格版本中可能需要用DOM节点添加特性或直接为函数传递额外的信息。

       <textarea cols=”10” rows=”10” maxlength=”150”></textarea>

       注意，虽然maxlength特性不是<textarea>有效的特性，仍可以用getAttribute来获取它的值。

      5.2.3允许/阻止文本框中的字符

        1.阻止粘贴内容的验证：禁止粘贴或当文本框失去焦点时验证

         IE中，解决禁止粘贴用onpaste事件，使onpaste事件返回false。     

         为了更好的阻止粘贴，最好把右键也禁用了。使oncontextmenu返回false。

          <input type=”text” onpaste=”return false” oncontextmenu=”return false”>

          在FF中也可以只用onpaste事件就能禁止粘贴。当然也可用代码实现。但是IE中（IE6-8）都不能阻止CTRL+V按键组合。

         文本框失去焦点验证时，是把文本框中的字符串的分解为一个一个字符来判断。

    5.3列表框和组合框

       5.3.1访问选项

       oListBox.options[1].firstChild.nodeValue;

       oListBox.options[1].getAttribute(“value”);

       oListBox.options[1].text;//返回特征值

       oListBox.options[1].value;//返回特征值

       oListBox.options[1].index//显示集合中的位置。

       不论是删除或移动选项都应该从最高的索引开始，因为每一移动或删除一项整个集合的索引都会变。

      5.3.2删除选项

      用<select>元素的remove(index)方法就可以删除指定索引的选项。

      5.3.3移动选项

      从一个列表框移动到另一个列表框。使用DOM方法，可以直接从第一个列表框将一个选项移动到另一个列表框中，利用appendChild()方法。用select提供的add()方法也可以实现。

      如果将一个已经存在于文档中的元素传递给这个方法，那么会将这个元素从原来的元素父节点中删除， 一般放列表框末尾。如果用add()方法就可以指定位置。

6.错误处理

6.1 onerror事件处理函数

window对象和图像对象上都有onerror事件，当页面发生异常时，这个window.onerror事件就会触发。而对图像当没有找到图片时onerror事件就会被触发。

如果要隐藏所有异常信息，onerror事件处理函数必须返回true。

window.onerror=function() {

             return true;

};

1.取出错误信息

   还可以给事件处理函数传递参数以确定发生的错误信息和URL,行号等。

window.onerror=function(sMessage,sUrl,sLine) {

        alert("An Error occurent:\n"+sMessage+"\nUrl:"+sUrl+"\nLine:"+sLine);

        return true;

};

2.处理语法错误

 onerror事件处理函数不仅能处理异常，还可以处理语法错误，也只有它才能处理。

 首先，事件处理函数必须是页面中第一个出现的代码，为什么？因为语法错误出现在设置事件处理函数之前就出现，事件处理函数就没用了，语法错误会完全停止代码的执行。

 （没发现有什么不同，FF和IE都是一样的反应，没发现能处理语法错误，只有浏览器能捕获处理，所以上面那段话是屁话）

 window.onerror=function(sMessage,sUrl,sLine) {

        alert("An Error occurent:\n"+sMessage+"\nUrl:"+sUrl+"\nLine:"+sLine);

        return true;

};

alert('ok'

6.2try…catch语句

  try{

   [break;]

  }

  catch(excpetionIdentifier(这个参数不能少)){//code

   [break;]

  }

  [finally{//code

   }]

  在ECMAScript标准中try…catch语句中指定只能有一个catch子句，但是Mozilla对标准进行了扩展，可以有多个catch子句，其它浏览器没有扩展，一般不推荐使用。

  6.2.1嵌套try…catch语句

  6.2.2Error对象

  Error是基类，它有两个特性，name，表示错误类型的字符串，message,实际的错误信息。

  这个Error基类还有一些子类，也即name特性的值。

  EvalError     错误发生在Eval()函数中

  RangeError    数字的值超出JS可表示的范围

  ReferenceError 使用了非法引用

  SyntaxError    在eval()函调用中发生了语法错误。其它的语法错误用浏览器报告，无法用try…catch语句处理

  TypeError     变量的类型不是预期的

  URIError      在encodeURI() 或者decodeURI()函数中发生了错误

  6.2.3判断错误类型

  1.try{

    }catch(e){

    if(e.name==”SyntaxError”)

    }

  2.try{

  }catch(e){

  if(e instanceof SyntaxError) 

}

  6.2.4抛出异常

   throw error_object;

   erro_object可以是字符串、数字、布尔值或实际的对象.

   throw “An Error “;

   throw 123;

   throw true;

   throw new Object();

   也可以抛出一个Error对象或其子类对象，它只有一个参数，错误信息。

   throw new Error(“over”);

   throw new SyntaxError(“over here”);等

   由于浏览器抛出的异常和开发人员抛出的异常都可以在try…catch中捕获。然而，由于浏览器不能生成Error对象（它总是生成一个精确的对象）,所以区分浏览器抛出的错误和开发人员抛出错误很正常。我们只需生成抛出Error异常，使用类型判断就可以了。

7.经验

7.1JS中事件对象event,IE事件中：无论处理函数作为HTML事件属性的值还是作为JS事件属性的值或用专门添加事件处理函数的方法加到事件中，由于这个事件是WINDOW的一个属性，所以在这两种分配的事件处理函数中都可以取到;而DOM标准中：事件对象是作为事件处理函数的一个参数传递的，处理函数作为HTML事件属性的值，那么这个事件是获取不到的，只有作为JS事件属性的值或用专门添加事件处理函数的方法加到事件中，这个事件就能够自动的作为事件处理函数的一个参数传递进去！！

7.2当我们在脚本中创建了一个script元素，设置了它的src属性，一旦把它添加到了页面中的任意一个元素的孩子节点中后，那么这个新的script元素就会立即去src指定的地址加载文件并执行，如果给script元素注册了onload事件或onreadystatechange回调事件中，就可以访问返回的数据。这就是动态加载script标签。如果用JSONP跨域（它实际用的就是动态加载script元素来访问一个服务器脚本，如PHP，ASP，JSP等），那么回调函数可以访问返回的JSON数据（一般JSON，不排序其它的形式）,这个回调一般注册为window对象的属性，并且还在这发送这个请求之前定义，不然出错;如果没有使用JSONP动态载入script元素（一般请求的JS文件），那么onload或readystatechange事件中可以访问这个JS文件里的方法和对象等

注：FireFox的script 元素不支持onreadystatechange事件，只支持onload事件

IE的 script 元素支持onreadystatechange事件，不支持onload事件，

具体看：JSONP跨域请求文件

7.3很多标记元素都是设置它的值是立即执行。如img,script,link等，一旦创建这些元素设置它要请求的文件就会立即去调用。

7.4键盘事件，onkeydown,onkeyup事件中，在DOM标准事件的浏览器中按下键时，charCode为0，keyCode为数值代码（按键脉冲码我），在onpress事件中，charCode为字符代码值(Unicode字符代码值，还是数值),keyCode为0,而which和charCode和keyCode的某个有数值的属性是一致的，即哪个属性有值就和那个属性的值一样。IE没有which 和charCode。

7.5如果在HTML事件属性中给了一个处理函数，那么再用专门的添加事件处理的方法添加事件处理函数到事件中是不会覆盖HTML事件属性的处理函数的。但是如果再用JS事件属性的方法赋值处理函数，那么HTML事件属性的处理函数会被覆盖。

7.6现在才发现：在JS高级程序程序中所说的产生的事件流，不是说每个元素都要有绑定事件那个事件才会产生事件流，子元素没有绑定事件同样会产生事件流！

   例：<div id="f1"  class="tt" onclick="test1('f1')">f1

      <div id="f2"  class="tt"  onclick="test1('f2')">f2

      <div id="f3" class="tt">f3</div>

      </div>

    </div>

   如上例所示，如果点击了f3元素，事件同样会冒泡，f2,f1都会响应！这里的f3没有分配事件处理函数！！如果f2没有分配事件处理函数f1同样会响应事件处理函数！！

   也就是说元素不管你有没有分配处理函数来响应某个事件，但是这个事件一旦产生了冒泡，必定会经过这个元素！！再精确点说，就是一个元素响不响应浏览器事件和有没有分配处理函数是没有关系的，它总是会响应浏览器事件，没有分配处理函数只是不会明显的有反应而已！

      7.7事件对象中的event.target和event.currentTarget区别是，event.target始终指向那个引发事件的元素，而event.currentTarget却是指向响应了某个事件的元素（这是指分配了处理函数，没有分配是不响应的）。一般情况下，引发事件和响应事件元素是一样的，但是有冒泡就不一样了，event.currentTarget指向的元素就是动态的改变的！！