JavaScript课程总结复习

班号：QR2088   姓名： 宋延军

•认识并熟悉JavaScript
•掌握JavaScript    数据类型
•掌握Javascript    函数和事件的处理
•掌握JavaScript    浏览器对象
•掌握Javascript    文档对象
•掌握JavaScript    CSS样式特效
•掌握JavaScript    表单验证和正则表达式
 

由于好不容易的写完了之后，发现 超出字符限定的范围了，所以分为两部分发布出来。如果我的这个总结中还有什么没有涉及完全的地方，请帮忙在楼下追加上，有经验就 不要藏着掖着，贴出来，大家共同的分享分享，谢谢了。

 

要知道什么是脚本语言：
<1> 它是一种应用程序的 扩展语言，用于系统的扩展，是其按照用户需求去执行。
<2> 它是弱语言，JavaScript程序是由一些简单的ASCII字符构成的，可以用任何编辑器来编写。
 
JavaScript的用途：
<1> 表单验证
<2> 页面动态效果
 
JavaScript的组成–实现分为 3 部分：
<1> ECMA Script （核心 ）
<2> DOM   （文档对象模型）     
<3> BOM   （浏览器对象模型）
 
JavaScript 有 3个特点：
<1> 它是 脚本语言 （包括：嵌入 ，非嵌入）
<2> 解释语言    （和编译不同，解释型语言 不需要编译）
<3> 弱类型语言。   （它只能用于外部应用）
 
 
 
document 对象的 write 方法 ，可以将方法中的字符串输出显示。
window 对象的 alert 方法， 可以 消息框的形式输出信息。
 
JavaScript程序嵌入HTML文档的常用用法：就是将代码放在 “<script>”标签对中。
JavaScript使用 Unicode字符集编写，大小写敏感， 注释只有单行注释 和多行注释
。
 
定义脚本基本语法结构：

<script language = “JavaScript” >     <!–脚本开的开始–>     document.write( “ Hello World!!! ” );  <!–输出语句–>   alert(“ Hello World !! ”);           <!–弹出语句–> </script>                            <!–脚本结束–> 

 

JavaScript 与 Java 基本语法的相同之处：
只能说函数 与 变量 的命名规则 类似于Java，语法和Java还是有差异的。
Java 定义变量是类型，例如string ；而JavaScript定义的是 Object

 

 

 

数据类型
 
基本数据类型包括
:
 
1. 
数值
2. 
布尔
3. 
字符串
4.   null值
复合数据类型包括：
 
1. 
对象
( 例如: object、Boolean、string、Array、Number、Date…….)
2.
数组
 
构造函数原型 
   
例如：String 对象，它封装着字符串相关联的特性，主要用来处理字符串 String（[ args ]）
 
JavaScript 中调用对象的属性和方法与 Java 、C# 相同。
采用
：
对象名
. 
方法名
             对象名
.
属性名
 
  

在
JavaScript
中
 
数组与对象一样，也是一些数据的集合，
这些数据可以是字符串型、数字型、布尔型、或者是复合型。
在
JavaScript
中
数组下标是从
0
开始，
使用数组名加下标的方法，可以获取数组中的某个数据。
 
注意：
创建数组时尽管可以指定数据元素个数，但是真正为数组元素分
配内存需要等到给数组赋值的时候。
 
数学对象（
Math
）封装了与数学相关的特性。
数学函数，
直接调用
Math
对象的方法或属性的方式
：
Math .
属性名
Math .
方法名
（
注意：
Math
对象不能使用
new
关键字创建
）

 

 

 

Javascript 将与日期相关的所有特性封装进 Date 对象，
主要用于一些与时间相关的操作。
 
创建日期对象有 3 种方式：
<1>   var time = new Date();//直接创建日期对象
<2>   var time = new Date(3600);//创建毫秒数的时间对象
<3>   var time = new Date(yyyy,mm,dd);//指定日期时间的对象
 
Year年Month月Date日Day星期 Hours时Minutes分Seconds秒
 
返回日期对象方法：
toLocaleString()        //返回以地点特定格式显示 Date的日期和时间部分
toDateString()           //返回特定格式显示Date的日期部分（月.日.年）
toTimeString()           //返回特定格式显示Date的日期部分（时.分.秒）
toLoaleTimeString()  //特定格式   显示 Date 时间格式
toLoaleDateString()  //特定格式   显示 Date 日期格式

 

 

全局对象：是所有全局方法的拥有者，用来统一管理全局方法，
           全局方法也就是指全局函数。
 
注意：
该对象也不能使用 new 运算符创建对象实例，所有方法直接调用即可。
 
 
全局对象常用的方法：
<1> isFinite( numberper)         //检测一个数是否无穷大
<2> isNaN ( value )                 //检测某个值是否非数字类型的值
<3> Numbert( object per )      //返回对象的值转换成数字
<4> parseFloat ( String per)   //返回字符串转成浮点型
<5> parseInt ( String per)      //返回字符串转成×××型
<6> String ( object )               //返回对象的值转成字符串
 
类型转换：因为JavaScript是一门简单的、弱类型语言，编程时无需指定变    量的数据类型，系统会根据需要自动在类型之间转换。

 

 

类型转换分为：
<1> 隐式转换（例如，我们使用的write 和 alert 方法，无论什么类型数据最总会被自动转换成字符串）
<2> 显示转换（此过程需要手动转换到目标类型，即将某一种类型的数据转换成另一种数据的特定方法）
 
注意：
显示转换 当要转换的字符串中带有 parseInt 或 parseFloat 方法不可识别的字符时，转换结果可能没法预料！
 
 
系统的内置对象包括：
 字符串（String），数组（Array），数值（Number），日期（Date），全局（Global）对象等……….

 

 

 

函数和事件处理
 

•函数：

是将程序代码组织为可重复调用的单元。可完成特定任务并返回特定数据，它是独立主程序而存在的，拥有特定功能的程序代码块，并且这个代码块可以在主程序或其它函数中根据需要而被调用。

 

（函数可以间接性的理解为，它就是方法。）

 

 

•使用函数的优点：1.复用      2.不让其自动执行

 

•函数分为：1.系统函数     2.用户自定义函数

 

对象在自定义函数的时候，要使用 function 来进行创建函数。

 

 

函数的3种定义方式 


    

  1. <script language=“javascript”> 
    2. 

  2. <!–普通定义方式:–> 
    3. 

  3. function name （par1,par2,par3,parN）{  
    4. 

  4.     函数主体；  
    5. 

  5.     return 表达式；  
    6. 

  6. }   
    7. 

  7.  
    8. 

  8. <!–函数变量定义方式:–> 
    9. 

  9. var name = new Function(“par1”,”parN”,”函数主体；return 表达式”)   
    10. 

  10.  
    11. 

  11. <!–函数表达式定义方式:–> 
    12. 

  12.  
    13. 

  13. var name = function(par1 , parN){  
    14. 

  14.     函数主体；  
    15. 

  15.     return 表达式；  
    16. 

  16. }  
    17. 

  17. </script> 
    18. 



 


 





    •

    函数分为 3 类： 
   



    <1> 构造函数（函数的名字都大写） 
   



    <2> 有返回值函数（加 return） 
   



    <3> 无返回值函数（不加 return） 
   



      
   



    函数的作用域：

    指该函数当前所处位置被其它对象访问范围，就是作用域。 
   



    this关键字：this变量的值，如果没有指定的话，默认调用的是函数当前对象Global 全局对象作用域。 
   



      
   



      
   



    公有函数：就是每一行代码都可以调用到该函数。 
   



      
   



    私有函数：是指函数处于局部作用域中的函数。 
   



      
   



    JavaScript 中函数参数都由Arguments对象来管理。 
   



      
   



    Arguments 的作用：主要用来判断函数中的实际个数是否与传进去的个数相同。 
   




 


 





    •

    JavaScript 和 HTML 之间的交互通过用户和浏览器操作页面时引发的事件（Event）来处理的。 
   



      
   



    •在JavaScript 中对象事件的处理通常由函数（Function）担任。 
   



      
   



    •语法：
   



    function 事件处理名（参数名） 
   



    { 
   



      事件处理语句集合 ; 
   



    } 
   



      
   



      
   




 





    响应事件的两种方式： 
   



    <1>将函数作为事件处理程序。 
   



    <2>直接在事件属性中编写函数代码。 
   



      
   



      
   



    JavaScript 事件驱动中的事件： 
   



    是通过鼠标 或 热键 的动作引发的。 
   



      
   



      
   



    实现使用特效，只有 2 步： 
   



    1. 编写函数。 
   



    2. 对应事件中调用函数。 
   




 


 


 





    •

    JavaScript 事件都是 on 开头 
   



      
   



    •文档的层次关系：
   



          document . 表单名 . 元素名 . Value ; 
   



      
   



    Event 对象是一个全局属性，这个属性（变量）提供了事件的细节。 
   



      
   



    注意： 
   



    在IE中，不能把 Event对象 作为参数 传给事件处理程序， 
   



    只能用window.event或者event来引用Event 对象。 
   



    因为在 IE中，Event是 window 的一个属性， 
   



    也就是说Event 是一个全局变量，这个变量提供了事件的细节。
   




 


 


 





    •

    事件起泡的概念： 
   



    IE事件中的起泡：

    IE

    中的事件可以

    沿着

    包容层次

    一点点起泡

    到上层，也就是

    说，

    下层的

     DOM 

    节点定义的事件处理函数

    ，到了上层的节点，

    如果还有和下层

    相同事件处理函数

    ，那么

    上层的事件

    处理函数

    也会执行

    。 
   



      
   



    例如：
   



    <div>

    标签中包含了

    <a>

    ，两个标签中都有

     onClick 

    事件处理函数，

    先执行

    <a>

    后执行

    <div>
   




 


 





    浏览器对象 
   



      
   



    JavaScript的对象包括 4 个部分：
   



    <1>语言核心 
   



    <2>基本内置对象 
   



    <3>浏览器对象 
   



    <4>文档对象 
   



      
   



    window 是所有对象模型中的顶级对象。（即全局对象） 
   



      
   



    window 对象下的常用属性： 
   



    document     文档对象 
   



    history          历史 
   



    location        地址 
   



    status           状态 
   



    screen          有关客户端的屏幕和显示性能的信息 
   




 


 





    需要注意的是： 
   



    window 的方法和属性的调用和其他方法一样， 

    区别是 window 对象不需要创建即可使用，还有就是 window 对象名称是小写。 
   



      
   



    window 作为对象的一种，也有着自己的方法和属性。 
   



    调用格式如下： 
   



    window . 属性名 
   



    window . 方法名（参数列表）
   



      
   



      
   



    •window 对象中的属性比较多，这些属性大多都是浏览器窗口中所有的属性，并不可移植。
   




 


 


 





    window 对象常用方法： 
   



    Open              //打开一个窗口 
   



    Alert               //显示一个带提示信息和确定按钮的对话框 
   



    Confirm         //显示一个确认框 
   



    Prompt           //显示一个输入框 
   



    setTimeout     //定时设置 
   



    setInterval      //设定延迟时间 
   



    clearTimeout  //取消定时设置 
   



      
   



      
   



    window 对象常用的事件有 7 种： 
   




    

  1. onblur    onerror    onfocus        
    2. 




      
   



    •通过这七种事件，可以在浏览器窗口中装载于卸载文档，得到于失去焦点，移动和调整窗口大小，执行代码出错时，执行特定的程序。 
   



      
   



      
   



    •匿名函数 
   




    

  1. window . Onload = function()   
    2. 

  2.                   {  
    3. 

  3.                       alert(“你好！” ) ;  
    4. 

  4.                   }   
    5. 




      
   



       



       



      •为了于客户端进行基本的交互，window 对象提供了3 种对话框： 
     


       



      <1>询问对话框    window . confirm() 
     


       



      <2>警告对话框    window . alert() 
     


       



      <3>输入对话框    window . prompt() 
     


       



       
     


       



         



         



        •打开普通窗口的open()方法语法： 
       


         



        •window.open(url，name，features，replace)
       


         



         
       


         



        –url：可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。 
       


         



         
       


         



        –name：可选的字符串，新窗口的名称，用HTML链接的target属性进行定位时会有用。 
       


         



         
       


         



        –features：可选字符串，列举窗口的特征。 
       


         



         
       


         



        –replace：可选布尔值，指明是否允许URL替换窗口的内容
       


         



         
       


         



         
       


              
            
       



      •状态栏的类型有 2 种： 
     


       



      <1> 默认状态栏信息 
     


       



      <2> 瞬间状态栏信息 
     


          
        
         


 


 





    •

    窗口的特征如下，可以任意组合： 
   



    •fullscreen = yes | no | 1 | 0      是否使用全屏模式显示浏览器。 
   



    •height = pixels                        窗口文档显示区的高度。 
   



    •left = pixels                            窗口距离屏幕左侧的像素值
   



    •location = yes | no | 1 | 0        是否显示地址字段。 
   



    •menubar = yes | no | 1 | 0      是否显示菜单栏。 
   



    •resizable = yes | no | 1 | 0      窗口是否可调节尺寸。 
   



    •scrollbars = yes | no | 1 | 0    是否显示滚动条。 
   



    •status = yes | no | 1 | 0          是否添加状态栏。 
   



    •titlebar = yes | no | 1 | 0        是否显示标题栏。 
   



    •Toolbar = yes| no | 1 | 0        是否显示浏览器的工具栏。 
   



    •top = pixels                           窗口距离屏幕顶部的像素值
   



    •width = pixels                       窗口的文档显示区的宽度。
   




 


 


 





    •

    模式窗口打开方法showModalDialog()
   



    •其语法： 
   



    • window.showModalDialog(url，name，features) ; 
   



      
   



    –url：

    字符串，新窗口的文档URL
   



      
   



    –name：字符串，新窗口的名称，用HTML链接的 target属性 进行定位时会有用。 
   



      
   



    –features：字符串，列举窗口的特征。 
   



      
   



      
   



    •窗口的特征如下，可以任意组合：
   



    •dialogWidth        对话框宽度。 
   



    •dialogHeight           对话框高度
   



    •dialogLeft                    距离屏幕左侧的距离。 
   



    •dialogTop                         距离屏幕上方的距离。 
   



    •center: {yes | no | 1 | 0 }        窗口是否居中。
   



    •resizable: {yes | no | 1 | 0 }        是否可被改变大小。 
   



    •status: {yes | no | 1 | 0 }                 是否显示状态栏。 
   



    •scroll:{ yes | no | 1 | 0 | on | off }        指明对话框是否显示滚动条。
   




 





    •

    使用window对象的 setTimeout 函数解决可以指定一个延时及延时之后执行的时间。也可以使用window对象的setInterval 函数进行定时循环执行。 
   



      
   



      
   



    •history对象，也称历史对象，该对象用来存储客户端浏览器窗口最近所浏览过的历史网址。
   



      
   



    •通过History对象的方法，可以完成类似与浏览器窗口中的前进、后退等按钮的功能。 
   



      
   



    •出于安全方面的考虑，在 history对象中，不能访问到客户端浏览器窗口最近所浏览过的网页URL。
   



      
   



      
   



       





      •

      Histoy

      常用方法： 
     



      •

      back

      （）     

      后退 
     



      •

      forward

      （）  

      前进 
     



      •

      length      

      历史记录列表中的元素个数 
     



      •

      go()       

      可以前进，也可以后退

      （推荐使用） 
     



        
     



      例如： 
     



      在历史的范围内去到指定的一个地址。如果 x < 0，则后退x 个地址， 
     



      如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页 
     



      [

      这种方式

      是最常用的

      ] 
     








 


 


 





    •

    history.go() 的使用例子：
   



    <input type=”button” value=”history.go(-1)” onClick=”history.go(-1)”> 
   



    <input type=”button” value=”history.go(1)” onClick=”history.go(1)”>
   



      
   



      
   



    •Location对象也是JavaScript中的一种默认对象，该对象代表了当前显示的文档的URL。通过Location对象可以访问当前文档的URL的各个不同部分。 
   



      
   



      
   



    •Location 对象的常用属性和方法： 
   



    •
   



    <1>
   



    host 描述url的主机名和端口，只有端口号是url的一个明确部分时，值中才包括端口号。
   



    <2>
   



    •Href该属性提供一个指定窗口对象的整个url的字符串。
   



    <3>
   



    •hostname典型的url的主机名是网络上服务器的名字，该网络存储有你浏览器上可查看的文档.
   



      
   



      
   



    •reload()     重新加载新文档，可以刷新当前文档 
   



      
   



    •replace()   当用户从当前网页，跳转到别的网页(就是替换，在历史中不存在你替换掉的那页) 
   



      
   



    •assign()     assign(“url”)通过这个方法可以实现把一个新的url赋给location对象。(相当于href) 
   




 


 


 


 



   •

   加载新的URL例子： 
  



     
  




    

  1. <script language=“javascript”>   
    2. 

  2.    function GoToUrl(){   
    3. 

  3.       window. location.href = “http://www.qq.com”;   
    4. 

  4.    }   
    5. 

  5.    document.write(“浏览器将在5秒后跳转到“腾讯”首页”);   
    6. 

  6.    window.setTimeout(“GoToUrl()”, 5000); // 设置定时器   
    7. 

  7. </script> 
    8. 




   •
  



   •注意：location对象可对属性进行可赋值同时也可以读取属性值。 
  



     
  



     
  



   •文档的加载方式有三种： 
  



   <1> assign( )      <2> replace( )       <3> reload( )