JavaScript初探

》》JavaScript：它是将两种语言合二为一的语言。

             第一种语言是内置在Web 浏览器和其他应用程序中的、用户友好的、易于使用的脚本语言，它能提供表单验证之类的功能，

     还有下拉菜单、数据更新时的颜色渐变和及席编辑页面之类的、很酷的新玩意。因为它实现与一个特定的环境中，通常是一个带

     有一些表单的 Web 浏览器中。

            第二种语言是一种成熟的、功能完备的、限制严格的、基于对象的语言。

》》JavaScript 语言能够简化网站的开发工作，同时又提高网站的成熟度。

》》大多数跨浏览器不兼容的问题都是由于浏览器所开放的底层的文件对象模型不同，而不是因为语言本身。

》》在 Web 页面中，哪些由 JavaScript 处理，哪些又是通过使用级联样式表（CSS）来处理的。对于页面中的元素，JavaScript 所

       能做的主要是创建元素、删除元素或者更改元素的属性。而这些属性中，有一些又可以通过 CSS 样式属性来定义。

》》CSS 可以定义 Web 页面中的元素的外观，还可以定义元素的某些行为。它能够隐藏或显示元素改变颜色或字体、移动、改变大

       小或设置元素的形状等等。每种浏览器对于 CSS 的实现可能有所不同，这也导致了一些跨浏览器不兼容的问题 。然而，JavaScript

       所做的一切，就是改变一个元素的 CSS 样式属性。

》》JavaScript 最近的爆炸式流行，是因为它是 Ajax （异步 JavaScript 和 XML）的一个关键部分。

》》JavaScript 所能提供的功能：

       ---------验证表单字段

                    在把内容提交给服务器之前，验证表单中的输入。这样既节省了时间又节约了服务器的资源，还提供了及时的反馈。

       ---------设置和检索 Web cookie

                    将用户名、账户或偏好设置之类的信息持久地保存于一个受控且安全的环境中。这样，在用户下一次访问此站点时，就能

           节省用户的时间。

       ---------动态地更改页面元素的外观

                   通过突出显示不正确的表单条目来提供反馈；根据读者的请求，将某部分的字体变大。

       ---------隐藏和显示元素

                  根据用户的偏好设置或用户的操作，显示或隐藏页面的内容（比如表单元素）展开编辑框以及改变一个图片的显示大小。

       ---------在页面上移动元素

                  创建一个下拉菜单，或提供一个动画光标来突出页面元素。

       ---------捕捉用户事件并相应地调整页面

                  根据键盘或鼠标的动作，使页面的某一部分变得可编辑。

       --------滚动内容

                  对于较大的图片或内容区域，提供一种用鼠标或键盘来抓住元素的方式，并可以对其进行上下左右的滚动。

       ---------在不离开页面的情况下与服务器应用程序进行连接

                  这是 Ajax 的基础，可以用于填充选项列表、更新数据以及刷新显示，而这一切都不需要重新载入页面。这有助于减少与服

           务器的交互次数，而与服务器的交互在时间和资源方面的代价都很高。

》》JavaScript 如此流行的原因之一是：把JavaScript 加入到 Web 页面中比较简单。最少情况下，你所要做的事情，只是在页面中包含

         一个 HTML 的 script 标记，将 type 属性设置为 JavaScript 语言，然后增加想要的 JavaScript 代码：

        <script  type = "text/javascript">

               ...some JavaScript 

       </script> 

      补充：type 属性的其他允许值为：

                  *** text / ecmascript   （JavaScript 的另一种说法）

                  *** text / jscript （IE 中实现的一个  JavaScript ）

                  *** text / vbscript （这种以及最后一种，都是 VB 的）

                  *** text / vbs

》》script 通常加在文档的  head 元素中（head 标记的开始和结束之间），但也可以包含在 body 元素中，还可以包含在这两部分之中。

》》脚本语言如何加到页面上是有限制的。你不能随心所欲地在页面中加入 JS。

》》与其他语言不同，JavaScript 几乎总是嵌入到另一种语言中的环境之中，比如 HTML 和 XHTML 。对于浏览器而言，当它遇到这一标记

       时，它不应将此标记的内容处理成 HTML 或 XHTML 。从这一点开始，对于内容的控制权已转移给了另一个内置的浏览器代理，也就是

       脚本引擎。 

》》

        <script  type = "text/javascript">

               ...some JavaScript 

       </script> 

          所有的这些 type 值都描述了 MIME 类型。MIME也就是多功能邮件传递扩展标准，这是一种确定内容如何编码以及内容的特定格式是什么

      的方式。

          提供了 MIME 类型，那些能够处理这一类型的浏览器就会执行它，而不能处理这一类型的浏览器就会跳过这一部分。这确保了脚本只由那

      些能够处理它的应用程序访问。

》》目前，对象检测的方式是：测试某个特定的对象或对象的属性是否存在；如果存在，就执行 JavaScript 的一个分支，否则就执行另一个分

       支。

》》script 的其他有效属性是 src 、 defer 和 charset 。

        charset 属性定义了脚本使用的字符编码方式。

        defer 属性：如果把defer 属性的值设为 "defer" 的话，它会告诉浏览器：脚本不会生成任何文档内容，浏览器可以继续处理页面的其他部分，

                               当页面处理和显示完成之后再返回到脚本。

                               在使用一个较大的 JavaScript 语句块或引用一个较大的 JS 库时，使用这一属性有助于加快页面加载的速度。

         -------------------------

         <script  type = "text / javascript"  defer = "defer" >

               ...no content being generated

        </script>           

          -----------------

          src 属性：与加载的程序库有关。

》》对于 JS 在什么时候该包含在 head 中，什么时候应当包含在 body 中，人们有着不同的看法，但下面的规则是适用的：

       1.当JavaScript 要在页面加载过程中动态建立一些 Web 页面的内容时，应将 JavaScript 放在 body 中。

       2.定义函数并用于页面事件的  JavaScript 应当放在 head 标记中，因为它会在 body 之前加载。

       补充：有一种方法可以避免将 JavaScript 插入到 body 中 ， 即使用 DOM 生成一个新内容，再将其附加给一个页面元素。

 》》针对 JS 包含在 body 中：

        --------脚本块包含在一个 XHTML  CDATA 块之中。XHTML处理器不会解释 CDATA 块中所含的数据。

        --------使用CDATA 块的原因是：XHTML 处理器会解释诸如 header (H3)的开始和结束的等标记，即便这些标记包含在 JavaScript

                   字符串中也要解释。如果不使用 CDATA  ，虽然页面可能会显示正确，但是当你页面验证时，会看到有验证错误。

         -------那些通过使用  src 属性而导入到页面中的 JavaScript ，会被假设为与 XHTML 兼容，因而不需要用 CDATA 块。但是，内联

                  的或嵌入的 JS 应当使用 CDATA 来隔开，尤其是当它包含在 body 元素之中时。

 》》对于大多数浏览器，还需要使用 JavaScript 注释符号（//）来隐藏 CDATA 块的开始和结束标记，否则，就会得到一个 JavaScript 

        错误。

》》从页面中清除所有内联的或嵌入的 JavaScript ，将其放入独立的 JS 文件中。这么做能够防止验证和对文本的不正确解释的问题，而

       无论页面是作为 HTML 还是 XHTML 处理。

》》使用DOCTYPE 可以影响如何解释页面标记、CSS甚至 javascript ，对如何使用该页面文件也有影响。

》》要显示实际上作为一个 xhtml 来使用，需要将 xhtml MIME 类型传给浏览器，通常这由扩展名是否为 .xhtml 来触发。

         还需要对页面进行其他修改，如确保它是一个合法的  xhtml ，还要修改 html 标记的开始标记，使之包括标记的名字空间，这个名字

    空间所指的位置有所有元素的定义：

         <html  xmlns = "http://www.w3.org/1999/xhtml">

         说明：xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。不过，即使 XHTML 文档中的 <html> 没有使用此属性，W3C 的

    验证器也不会报错。这是因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，即使您没有包含它，此值也会被添加到 

    <html> 标签中。

》》我们应该尽可能养成使用  xhtml 特有标记的习惯，即使页面仍然作为 html 来使用。

》》显示为 xhtml 的文档不允许  document.write 的原因是：xhtml 文档被当做是一个合法的 xhtml ，如果不是就不会显示。如果我们可以

       使用 document.write 修改文档，浏览器就没办法知道写到页面中的内容是否合法。我们可以引入“环”标记，从而显示对于 xhtml 合法

       性的保证。

》》注意：名字空间设置（http://www.w3.org/1999/xhtml） 、扩展名（.xhtml）、还有是否出现 document.write ，都会影响那些实际被

       作为 xhtml 来使用的文档。

》》复用 JS 对象唯一有效的方法是：把它们创建在独立的文件中，然后在 Web 页面中提供文件的连接。

》》所有的 JavaScript 都建立在独立的脚本文件中，无论使用多个文件会造成什么样的额外开销，这些开销所带来的好处则更多。

        在Web 页面中引用一个  JavaScript 库或一个脚本文件时，使用这样的语法：

        <script type = "text/javascript"  src ="somejavascript.js"></script>  

       说明：脚本文件和嵌入的 JavaScript 语句块在行为上没有不同。

》》JavaScript 注释：第一种是使用双斜线（//）   ------->单行注释

                                        第二种是使用（/*      */）     -------->多行注释

》》使用 alter 函数来创建一个小弹出窗口（通常叫做对话窗口）来显示信息。

        alter 对话框是 window 对象的一个函数。

》》window 对象是浏览器对象模型（BOM）的顶级对象，

》》BOM是一组在大多数现代的浏览器中实现了的基本对象。

》》使用 document 对象向页面写信息。

》》全局函数和内置对象使用在一个用户自定义函数的环境之中。创建一个自定义函数的典型语法是：

       function    functionname(params){

      .........

      }

》》用户自定义函数封装了一段 JavaScript 代码块，可以用于以后的或重复的处理。

》》从技术上来讲，函数是另一种内置的JavaScript 对象。

》》<body onload = "hello()">

       </body>

    说明：上面的 body 开始标记中有一个  onload  属性；onload 属性就是我们所说的事件句柄。

       这个事件句柄，还有其他事件句柄，都是每种浏览器都支持的 DOM 的一部分。它们可以将一个函数

      绑定到事件上，这样当事件发生时，相应的代码就会执行。

》》在不同类型的元素中，可以捕获不同的事件，每个事件上都可以指定事件发生时应当执行的代码。

》》直接在元素的标记上增加事件句柄，是绑定事件句柄的一种方式。

       还有第二种方式：如下代码

      <script type = "text/javascript">
         document.onload = hello();
         function hello(){
             var dt = Date();
             var msg = 'hello ,World ! Today is '+ dt;
             alert(msg);
         }
            
        </script>

    说明：使用上面的第二种方法，你就不用把事件句柄为属性加入到标记中，而是将它们加入到 JS 本身中。

》》事件常常用来和 html 表单一起，在提交之前验证表单的数据。