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字符集编写,大小写敏感, 注释只有单行注释 和多行注释
 
定义脚本基本语法结构:
  1. <script language = “JavaScript” >     <!--脚本开的开始-->   
  2.   document.write( “ Hello World!!! ” );  <!--输出语句--> 
  3.   alert(“ Hello World !! ”);           <!--弹出语句--> 
  4. </script>                            <!--脚本结束--> 
 
JavaScript Java 基本语法的相同之处
只能说函数 与 变量 的命名规则 类似于Java,语法和Java还是有差异的。
Java 定义变量是类型,例如string ;而JavaScript定义的是 Object

 

 

 

数据类型
 
基本数据类型包括: 
1. 数值
2. 布尔
3. 字符串
4.   null
复合数据类型包括
 1. 对象 ( 例如: objectBooleanstringArrayNumber、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);//指定日期时间的对象
 
YearMonthDateDay星期 HoursMinutesSeconds
 
返回日期对象方法:
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. <!--普通定义方式:--> 
  3. function name (par1,par2,par3,parN){  
  4.     函数主体;  
  5.     return 表达式;  
  6. }   
  7.  
  8. <!--函数变量定义方式:--> 
  9. var name = new Function(“par1”,”parN”,”函数主体;return 表达式”)   
  10.  
  11. <!--函数表达式定义方式:--> 
  12.  
  13. var name = function(par1 , parN){  
  14.     函数主体;  
  15.     return 表达式;  
  16. }  
  17. </script> 

 

 

函数分为 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        
 
通过这七种事件,可以在浏览器窗口中装载于卸载文档,得到于失去焦点,移动和调整窗口大小,执行代码出错时,执行特定的程序。
 
 
匿名函数
  1. window . Onload = function()   
  2.                   {  
  3.                       alert(“你好!” ) ;  
  4.                   }   
 
 
为了于客户端进行基本的交互,window 对象提供了3 对话框
<1>询问对话框    window . confirm()
<2>警告对话框    window . alert()
<3>输入对话框    window . prompt()
 
 
打开普通窗口的open()方法语法:
window.open(urlnamefeaturesreplace)
 
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(urlnamefeatures) ;
 
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.    function GoToUrl(){   
  3.       window. location.href = "http://www.qq.com";   
  4.    }   
  5.    document.write("浏览器将在5秒后跳转到“腾讯”首页");   
  6.    window.setTimeout("GoToUrl()", 5000); // 设置定时器   
  7. </script> 
注意:location对象可对属性进行可赋值同时也可以读取属性值。
 
 
文档的加载方式有三种
<1> assign( )      <2> replace( )       <3> reload( )