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种定义方式
- <script language="javascript">
- <!--普通定义方式:-->
- function name (par1,par2,par3,parN){
- 函数主体;
- return 表达式;
- }
- <!--函数变量定义方式:-->
- var name = new Function(“par1”,”parN”,”函数主体;return 表达式”)
- <!--函数表达式定义方式:-->
- var name = function(par1 , parN){
- 函数主体;
- return 表达式;
- }
- </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 种:
- onblur onerror onfocus
•通过这七种事件,可以在浏览器窗口中装载于卸载文档,得到于失去焦点,移动和调整窗口大小,执行代码出错时,执行特定的程序。
•匿名函数
- window . Onload = function()
- {
- alert(“你好!” ) ;
- }
•为了于客户端进行基本的交互,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例子:
- <script language="javascript">
- function GoToUrl(){
- window. location.href = "http://www.qq.com";
- }
- document.write("浏览器将在5秒后跳转到“腾讯”首页");
- window.setTimeout("GoToUrl()", 5000); // 设置定时器
- </script>
•
•注意:location对象可对属性进行可赋值同时也可以读取属性值。
•文档的加载方式有三种:
<1> assign( ) <2> replace( ) <3> reload( )
转载于:https://blog.51cto.com/songyanjun/520206