JAVASCRIPT教程专业知识讲座

JavaScript教程主讲:杨薇

单位:保山师专计科系第1页JavaScript出现Internet时代，造就了我们新工作和生活方式，其互联性、开放性和共享信息模式，打破了传统信息传输方式重重壁垒，为我们带来了新机遇。伴随计算机和信息时代到来，人类社会前进脚步在逐渐加快，每一天都有新事情发生，每一天都在发明着奇迹。伴随Internet技术突飞猛进，各行各业都在加入Internet行业中来。第2页JavaScript出现通过超文本(HyperText)和超媒体(HyperMedia)技术结合超链接(Hyperlink)链接功能将多种信息组织成网络构造(web)，组成网络文档(Document)，实现Internet上“漫游”。通过HTML符号描述就能够实现文字、表格、声音、图像、动画等多媒体信息检索。第3页JavaScript出现然而采取这种超链技术存在有一定缺陷，那就是它只能提供一种静态信息资源，缺乏动态客户端与服务器端交互。而JavaScript出现，无凝为Internet网上顾客带来了一线生机。能够这样说,JavaScript出现是时代需求,是当今信息时代造就了JavaScript。第4页什么是JavaScriptJavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能脚本语言。使用它目标是与HTML超文本标识语言、Java脚本语言（Java小程序）一起实目前一种Web页面中链接多种对象，与Web客户交互作用。从而能够开发客户端应用程序等。它是通过嵌入或调入在标准HTML语言中实现。它出现弥补了HTML语言缺陷，它是Java与HTML折衷选择，具有下列几个基本特点：第5页JavaScript几个基本特点是一种脚本编写语言

JavaScript是一种脚本语言，它采取小程序段方式实现编程。像其他脚本语言同样,JavaScript同样已是一种解释性语言,它提供了一种易开发过程。

它基本构造形式与C、C++、VB、Delphi十分类似。但它不像这些语言同样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便顾客使用操作。第6页JavaScript几个基本特点基于对象语言。

JavaScript是一种基于对象语言，同步能够看作一种面向对象。这意味着它能利用自己已经创建对象。因此，许多功能能够来自于脚本环境中对象办法与脚本互相作用。

第7页JavaScript几个基本特点简单性

JavaScript简单性主要体目前：首先它是一种基于Java基本语句和控制流之上简单而紧凑设计,从而对于学习Java是一种非常好过渡。其次它变量类型是采取弱类型，并未使用严格数据类型。第8页JavaScript几个基本特点安全性

JavaScript是一种安全性语言，它不允许访问本地硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地避免数据丢失。第9页JavaScript几个基本特点动态性

JavaScript是动态，它能够直接对顾客或客户输入做出响应，无须通过Web服务程序。它对顾客反应响应，是采取以事件驱动方式进行。所谓事件驱动，就是指在主页(HomePage)中执行了某种操作所产生动作，就称为“事件”(Event)。例如按下鼠标、移动窗口、选择菜单等都能够视为事件。当事件发生后，也许会引发对应事件响应。

第10页JavaScript几个基本特点跨平台性

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器计算机，并支持JavaScript浏览器就可正确执行。从而实现了“编写一次,走遍天下”梦想。

事实上JavaScript最出色之处于于能够用很小程序做大量事。无须有高性能电脑，软件仅需一种字处理软件及一浏览器，无须WEB服务器通道，通过自己电脑即可完成所有事情。第11页JavaScript与Java综合所述JavaScript是一种新描述语言，它能够被箝入到HTML文献之中。JavaScript和Java很类似，但究竟并不同样！第12页JavaScript和Java区分虽然JavaScript与Java有紧密联系，但却是两个公司开发不一样两个产品。Java是SUN公司推出新一代面向对象程序设计语言，尤其适合于Internet应用程序开发；而JavaScript是Netscape公司产品，其目标是为了扩展NetscapeNavigator功能,而开发一种能够嵌入Web页面中基于对象和事件驱动解释性语言,它前身是LiveScript；而Java前身是Oak语言。第13页JavaScript代码加入<ScriptLanguage="JavaScript">JavaScript语言代码；JavaScript语言代码;</Script>说明：通过标识<Script>...</Script>指明JavaScript脚本源代码将放入其间。通过属性Language="JavaScript"说明标识中是使用何种语言，这里是JavaScript语言,表达在JavaScript中使用语言。第14页JavaScript基本数据构造基本数据类型体现式和运算符程序控制流函数事件驱动及事件处理第15页基本数据类型在JavaScript中四种基本数据类型：数值（整数和实数）字符串型（用“”号或‘’括起来字符或数值）布尔型（使True或False表达）空值。第16页基本数据类型在JavaScript基本类型中数据能够是常量，也能够变量。第17页常量JavaScript常量一般又称字面常量，它是不能变化数据注意：不能够使用CONST定义常量第18页变量变量主要作用是存取数据、提供寄存信息容器。对于变量必须明确变量命名、变量类型、变量申明及其变量作用域。第19页变量命名JavaScript中变量命名同其计算机语言非常相同，这里要注意下列两点：Ａ、必须是一种有效变量，即变量以字母开头，中间能够出现数字如test1、text2等。除下划线（－）作为连字符外，变量名称不能有空格、（＋）、（－）、（，）或其他符号。Ｂ、不能使用JavaScript中关键字作为变量。变量名多数是大小写敏感，但对不一样版本JavaScript也不尽然，我们使用版本是辨别大小写。一般情况下，提议坚持使用一种命名习惯并保持不变。我本人

习惯使用变量间加下划线。如：user_name第20页变量类型在JavaScript中，变量能够用命令Var作申明,如：varmytest;，不需要指出数据类型（与C语言不一样，相比更简单）例如：varuser_name;varx;vary;该例子定义了一种mytest变量。但没有赋予它值。varuser_name=”yangwei”;varx=90;vary=true;该例子定义了一种mytest变量,同步赋予了它值。第21页变量使用例子ys/bianlang.html第22页体现式和运算符体现式在定义完变量后，就能够对它们进行赋值、变化、计算等一系列操作，这一过程一般又通过体现式来完成，因此体现式能够分为算术表述式、字串体现式、赋值体现式以及布尔体现式等。第23页运算符运算符完成操作一系列符号，在JavaScript中有算术运算符，如＋、-、*、/等；有比较运算符如!＝、＝＝等;有逻辑布尔运算符如！（取反）、|、||;有字串运算如＋、＋＝等。第24页算术运算符双目运算符：+（加）、-（减）、*（乘）、/（除）、%（取模）、|（按位或）、&(按位与)、<<（左移）、>>（右移）、>>>（右移，零填充）。单目运算符：-（取反）、~（取补）、++（递加1）、--（递减1）。第25页比较运算符比较运算符它基本操作过程是，首先对它操作数进行比较，尔后再返回一种true或False值，有８个比较运算符:<(不大于)、>(大于)、<=(不大于等于)、>=(大于等于)、==(等于)、!=(不等于)。第26页布尔逻辑运算符在JavaScript中增加了几个布尔逻辑运算符:!（取反)、&=（与之后赋值）、&（逻辑与）、|=（或之后赋值）、|（逻辑或）、^=（异或之后赋值）、^（逻辑异或）、?:（三目操作符）、||（或）、==(等于)、|=(不等于)。第27页三目操作符三目操作符主要格式如下：操作数？成果１：成果２若操作数成果为真，则表述式成果为成果１，不然为成果２。第28页例子ys/yunsuanfu.html第29页JavaScript程序组成程序控制流if条件语句for循环语句while循环break和continue语句

第30页if条件语句基本格式if（表述式）{语句段１；

}else{语句段２；

}功能若体现式为true，则执行语句段１；不然执行语句段２第31页for循环语句基本格式for（初始化；条件；增量）{语句集；}功能实现条件循环，当条件成立时，执行语句集，不然跳出循环体。第32页while循环基本格式while（条件）{语句集；}该语句与For语句同样，当条件为真时，反复循环，不然退出循环第33页break和continue语句与C语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩下语句而进入下一次循环。第34页函数JavaScript函数定义Function函数名（参数,变元）{函数体;.Return体现式;}第35页例子ys/hanshu.html第36页事件驱动及事件处理JavaScript是基于对象(object-based)语言。而基于对象基本特性，就是采取事件驱动(event-driven)。一般鼠标或热键动作我们称之为事件（Event），而由鼠标或热键引发一连串程序动作，称之为事件驱动（EventDriver）。而对事件进行处理程序或函数，我们称之为事件处理程序（EventHandler）。第37页事件处理程序在JavaScript中对象事件处理一般由函数(Function)担任。第38页事件驱动JavaScript事件驱动中事件是通过鼠标或热键动作引发。它主要有下列几个事件：（1）单击事件onClick当顾客单击鼠标按钮时，产生onClick事件。同步onClick指定事件处理程序或代码将被调用执行（2）onChange变化事件当利用text或texturea元素输入字符值变化时发该事件，同步当在select表格项中一种选项状态变化后也会引发该事件（3）选中事件onSelect当Text或Textarea对象中文字被加亮后，引发该事件（4）取得焦点事件onFocus当顾客单击Text或textarea以及select对象时，产生该事件（5）失去焦点onBlur（6）载入文献onLoad（7）卸载文献onUnload第39页例子ys/shijianqudong.html第40页JavaScript中对象对象是能够从JavaScript“势力范围”中划分出来一小块，能够是一段文字、一幅图片、一种表单（Form）等等。JavaScript中对象是由属性(properties)和办法(methods)两个基本元素组成。前者是对象在实行其所需要行为过程中，实现信息装载单位，从而与变量有关联；后者是指对象能够按照设计者意图而被执行，从而与特定函数相联。第41页常用基本对象Number“数字”对象String字符串对象Array数组对象Math“数学”对象Date日期对象全局对象（Global对象）第42页String字符串对象属性length使用方法：<字符串对象>.length；返回该字符串长度。办法indexOf()

作用：从字符串对象中指定位置搜索子字符串如：varuser_name=“yangwei”;user_name.indexof(“wei”,1);substring()

作用：返回字符串一部分子字符串

如：user_name.substring(0,5);//返回user_name对象中第0个位置到第5个位置值。成果为：yangwsubstr()

作用：返回字符串一部分子字符串

第43页例子ys/stringduixiang.html第44页Array数组对象数组对象是一种对象集合，里边对象能够是不一样类型。数组每一种组员对象都有一种“下标”，用来表达它在数组中位置。数组定义办法：var<数组名>=newArray();这样就定义了一种空数组。后来要添加数组元素，就用：<数组名>[<下标>]=...;假如想在定义数组时候直接初始化数据，请用：var<数组名>=newArray(<元素1>,<元素2>,<元素3>...);例如：vara=newArray();a[0]=1;a[1]=2;a[2]=3;或者：vara=newArray(1,2,3);第45页Array数组对象属性length使用方法：<数组对象>.length；作用：返回数组长度，即数组里有多少个元素。

办法join()使用方法：<数组对象>.join(<分隔符>)；作用：返回一种字符串，该字符串把数组中各个元素串起来，用<分隔符>置于元素与元素之间。这个办法不影响数组原本内容。

第46页例子ys/arrayduixiang.html第47页Math“数学”对象功能：提供除加、减、乘、除以外一引些自述运算。如对数，平方根等。属性E返回常数e(2.718281828...)。

LN2返回2自然对数(ln2)。

LN10返回10自然对数(ln10)。

LOG2E返回以2为低e对数(log2e)。

LOG10E返回以10为低e对数(log10e)。

PI返回π（3.1415926535...)。

SQRT1_2返回1/2平方根。

SQRT2返回2平方根。主要办法

绝对值：abs()

正弦余弦值：sin(),cos()

反正弦反余弦:asin(),acos()

正切反正切：tan(),atan()

四舍五入：round()

平方根：sqrt()

基于几方次值：Pow(base,exponent)

第48页Date日期对象个对象能够储存任意一种日期定义一种日期对象：vard=newDate();//这个办法使d成为日期对象，并且已有初始值：目前时间。第49页Date日期对象获取日期和时间办法

getYear():返回年数

getMonth():返回当月号数

getDate():返回当天号数

getDay():返回星期几

getHours():返回小时数

getMintes(:返回分钟数

getSeconds():返回秒数

getTime():返回毫秒数设置日期和时间：

setYear();设置年

setDate():设置当月号数

setMonth():设置当月份数

setHours():设置小时数

setMintes():设置分钟数

setSeconds():设置秒数

setTime():设置毫秒数

第50页例子ys/Dateduixiang.html第51页有关对象操作语句

JavaScript不是一纯面向对象语言，它设有提供面向对象语言许多功能，因此JavaScript设计者之因此把它你“基于对象”而不是面向对象语言，在JavaScript中提供了几个用于操作对象语句和关键字及运算符。

（1）For...in语句

（2）with语句

（3）this关键字

（4）New运算符第52页1、For...in语句For（对象属性名in已知对象名）

说明：

o该语句功能是用于对已知对象所有属性进行操作控制循环。它是将一种已知对象所有属性反复置给一种变量；而不是使用计数器来实现。

o该语句长处就是无需懂得对象中属性个数即可进行操作。例如:FunctionshowData(object)

for(varpropinobject)

document.write(object[prop])；

第53页2、with语句

使用该语句意思是：在该语句体内，任何对变量引用被以为是这个对象属性，以节省某些代码。

withobject{

...}

所有在with语句后花括号中语句，都是在背面object对象作用域。第54页3、this关键字this是对目前引用，在JavaScript由于对象引用是多层次，多方位，往往一种对象引用又需要对另一种对象引用，而另一种对象有也许又要引用另一种对象，这样有也许造成混乱，最后自己已不懂得目前引用那一种对象，为此JavaScript提供了一种用于将对象指定目前对象语句this。

第55页4、New运算符虽然在JavaScript中对象功能已经是非常强大了。但更强大是设计人员能够按照需求来创建自己对象，以满足某一特定要求。使用New运算符能够创建一种新对象。其创建对象使用如下格式：

Newobject=NEWObject(Parameterstable);

其中Newobject创建新对象：object是已经存在对象；parameterstable参数表；new是JavaScript中命令语句。

如创建一种日期新对象

newData=NewData()

birthday=NewData(December12.1998)

之后就可使NewData、birthday作为一种新日期对象了。

第56页对象属性引用对象属性引用可由下列三种方式之一实现：

（1）使用点（.）运算符

university.Name=“云南省”

university.city=“昆明市”

university.Date="1999"

其中university是一种已经存在对