武汉瑞得软件产业有限公司JS&Jquery基础张玉243331JS目录Javascrip简介Javascript基本数据类型JavaScript程序构成事件驱动及事件处理基于对象的JavaScript语言356JavaScript对象系统Javascrip简介JavaScript是由Netscape公司开发基于对象事件驱动的编程语言,正日益受到全球的关注。因它的开发环境简单,以及与平台的无关性,他的移植性很强Javascrip简介脚本编写语言基于对象的语言简单性安全性动态性跨平台性JavaScript几个基本特点Javascrip简介解释性语言JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。(执行顺序是由上而下,如果在这个过程中出现问题,那么它下面的语句就都不再执行)Javascrip简介基于对象和面向对象一些动态语言(.net,Java等)是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象(ObjectBased)和事件驱动(EventDriver)的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。(可以模仿面向对象的方法)•函数式编程,就是我们平时所说的构造函数•事件驱动:就是指JavaScript响应用户操作的一种处理方式(比如:点击,键盘操作等),而事件处理是JavaScript响应用户操作所调用的程序代码,就是我们所编写的函数Javascrip简介强变量和弱变量与其他面向对象的变量是不一样的。动态语言(强类型)采用强类型变量检查,即所有变量在编译之前必须作声明。如:Integerx;(intx)Stringy;(stringy)x=1234;y=4321;其中X=1234说明是一个整数,Y=4321说明是一个字符串。JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型,自动判断数据类型(注:他的数据类型在程序的运行过程中是可以变动的),如:x=1234;y=4321;前者说明x为其数值型变量,而后者说明y为字符型变量如果在这之后加上如下的语句x=“123”;y=1123;这时x就变成字符串类型而Y就变成了整型(数值型)Javascrip简介JavaScript代码的加入可以直接将JavaScript脚本加入文档ScriptLanguage=JavaScriptJavaScript语言代码;JavaScript语言代码;..../Script说明:通过标识Script.../Script指明JavaScript脚本源代码将放入其间。基本数据类型基本数据类型常量(就是一个给定的固定值,不可以改变)变量(可以改变的,用户可以根据需要进行赋值)基本数据类型在JavaScript中四种基本的数据类型1.数值(整数和实数)2.字符串型(用“”号或‘’括起来的字符或数值3.布尔型(使True或False表示)4.空值(null表示什么也没有)基本数据类型运算符算术运算符(加,减,乘,除)比较运算符(,,=,=,===,!==)布尔逻辑运算符(&&,||)基本数据类型布尔逻辑运算符在JavaScript中增加了几个布尔逻辑运算符:!(取反)、?:(三目操作符)、||(或)、==(等于)、、|=(不等于)、===(恒等于)、!==(不恒等于)。其中三目操作符主要格式如下:操作数?结果1:结果2若操作数的结果为真,则表达式的结果为结果1,否则为结果2。3==2?x=5:x=6基本数据类型===(恒等于)scripttype=“text/javascript”vara=4,b=4;If(a===b){alert“equal”}If(a!==b){alert“notequal”}/script弹出的是equal看下面的实例:如果改成下面的情况基本数据类型scripttype=“text/javascript”vara=4,b=“4”;If(a===b){alert“equal”}If(a!==b){alert“notequal”}/script这时弹出的是notequal但是,如果恒等于改成等于,那么这两个实例都是返回equal,这是由于在进行比较的时候,恒等于是要检查他们的类型的,而等于是不检查的直接进行比较JavaScript程序构成控制语句(if..else)…函数(function(){})对象(js内置对象Array,Boolean,用户自定义对象,浏览器对象,文档对象)方法(其实与函数在某个程度上是相等的)属性JavaScript程序构成JavaScript函数定义function函数名(参数1,参数2,…){函数体;.return表达式;//也可以不返回值}说明:当调用函数时,所用变量或字面量均可作为变元传递。函数由关键字function定义。函数名:定义自己函数的名字。参数表,是传递给函数使用或操作的值,其值可以是常量,变量或其它表达式。通过指定函数名(实参)来调用一个函数。必须使用return将值返回。函数名对大小写是敏感的。functiontest(){}与functionTest(){}是两个不同的函数(准确的说,js中任何命名的函数名,变量名都是区分大小写的)JavaScript程序构成javascript定义函数(声明函数)可以有三种方法:正常方法、构造函数、函数直接量。/*第一种方法,使用function语句,格式如下*/functionfn(){alert(这是使用function语句进行函数定义);}fn();/*第二种方法,使用Function()构造函数克隆函数*/varF=newFunction(a,b,alert(a+b));F(a,b);其实相当于如下代码:functionF(a,b){alert(a+b);}/*第三种方法,使用函数直接量*/varzhenn=function(){alert(zhenn);}zhenn();事件驱动及事件处理JavaScript是基于对象(object-based)的语言。这与Java,.net,等动态语言不同是面向对象的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。它是在用形界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(EventDriver)。而对事件进行处理程序或函数,我们称之为事件处理程序(EventHandler)事件驱动及事件处理主要有以下几个事件单击事件onClickonChange改变事件选中事件onSelect获得焦点事件onFocus失去焦点onBlur载入文件onLoad卸载文件onUnload事件驱动及事件处理范例HTMLHEADscriptLanguage=JavaScript//!--functionloadform(){alert(这是一个自动装载例子!);}functionunloadform(){alert(这是一个卸载例子!);}//--/Script/HEADBODYOnLoad=loadform()OnUnload=unloadform()ahref=test.htm调用/a/BODY/HTML基于对象的JavaScript语言JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-oriented)。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。虽然JavaScript语言是一门基于对象的,但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象,从而进一步扩大JavaScript的应用范围,增强编写功能强大的Web文档。基于对象的JavaScript语言如何定义对象1)构造函数方式定义对象。这种方式是在构造函数内定义属性和方法。这里举个简单的例子:functionAnimal(name){this.name=name;this.introduceSelf=function(){window.alert(Iama+this.name+!);};}对象的实例化如下:vardog=newAnimal(dog);dog.introduceSelf();当然,也可以将对象的方法在构造函数外定义,如下所示:functionintroduceSelf(){window.alert(Iama+this.name+!);}functionAnimal(name){this.name=name;this.introduceSelf=introduceSelf();}基于对象的JavaScript语言常用对象的属性和方法JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。在JavaScript提供了string(字符串)、math(数值计算)和Date(日期)三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件基于对象的JavaScript语言字符串对象如用Hstring对象只有一个属性,即length。它表明了字符串中的字符个数,包括所有符号。例:mytest=“ThisisaJavaScript”mystringlength=mytest.length//最后mystringlength返回mytest字串的长度为20。string对象的方法共有19个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。其主要方法如下:锚点anchor():该方法创建如用Html文档中一样的anchor标记。使用anchortml中(AName=)一样。string.anchor(anchorName)。创建一个anchorName的超链接有关字符显示的控制方法big字体显示,italics()斜体字显示,bold()粗体字显示,blink()字符闪烁显示,small()字符用小体字显示,fixed()固定高亮字显示、fontsize(size)控制字体大小等,字体颜色方法fontcolor(color)字符串大小写转换toLowerCase()-小写转换,toUpperCase()大写转换。string=stringValue.toUpperCase()和string=stringValue.toLowerCase()。字符搜索:indexOf[charactor,fromIndex]//指定formIndtx位置开始搜索charactor第一次出现的位置。返回字串的一部分字串:substring(start,end)//从start开始到end的字符全部返回。基于对象的JavaScript语言算术函数的math对象主要属性:math中提供了6个属性,它们是数学中经常用到的常数E、以10为底的自然对数LN10、以2为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。主要方法:绝对值:abs()正弦余弦值:sin(),cos()反正弦反余弦:asin(),acos()正切反正切:tan(),atan()四舍五入:round()平方根:sqrt()基于几方次的值:Pow(base,exponent)...基于对象的JavaScript语言日期及时间对象Date对象没有提供直接访问的属性。只具有获取和设置日期和时