1、第第3章章 JavaScript脚本语言脚本语言01 JavaScript简介简介02 JavaScript语言基础语言基础03 函数函数04事件事件05常用对象常用对象06Ajax技术技术07jQuery技术技术1 JavaScript对象、类、实例化什么是什么是JavaScript？JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言。它不需要进行编译，而是直接嵌入在HTTP页面中，把静态页面转变成支持用户交互并响应应用事件的动态页面。JavaScript的特点解释性基于对象事件驱动安全性跨平台JavaScript的特点JavaScript与Java的区别基于对象和面
2、向对象JavaScript是一种基于对象和事件驱动的脚本语言，它本身提供了非常丰富的内部对象供设计人员使用；而Java是一种真正的面向对象的语言，即使是开发简单的程序，也必须设计对象。解释和编译JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行；而Java的源代码在传递到客户端执行之前，必须经过编译才可以执行。弱变量和强变量JavaScript采用弱变量，即变量在使用前无须声明，解释器在运行时将检查其数据类型；而Java则使用强类型变量检查，即所有变量在编译之前必须声明。在Web页面中使用JavaScript
3、 var now=new Date(); var hour=now.getHours(); var minu=now.getMinutes(); alert(您好！现在是+hour+:+minu+r欢迎访问我公司网站！);在页面中直接嵌入JavaScript在Web页面中使用JavaScript链接外部JavaScript2 JavaScript语言基础语言基础JavaScript的语法JavaScript区分大小写每行结尾的分号可有可无alert(您好！欢迎访问我公司网站！)alert(您好！欢迎访问我公司网站！);username userNameJavaScript中的关键字abstra
4、ctcontinuefinallyinstanceofprivatethisbooleandefaultfloatintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticvarcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwith变量的定义及使用var variable ;var now , year , mo
5、nth , date ;用于指定变量名，该变量名必须遵守变量的命名规则可以使用一个关键字var同时声明多个变量var now=2009-05-12,year=2009, month=5,date=12;可以在声明变量的同时对其进行赋值，即初始化数据类型类型类型说明说明举例举例数值型JavaScript的数值型数据又可以分为整型和浮点型两种7293.1415926字符型字符型数据是使用单引号或双引号括起来的一个或多个字符。a布尔型布尔型数据只有两个值，即true或false，主要用来说明或代表一种状态或标志。在JavaScript中，也可以使用整数0表示false，使用非0的整数表示true。t
6、rue,false,0,1转义字符以反斜杠开头的不可显示的特殊字符通常称为控制字符，也被称为转义字符。b n f t r ” 空值JavaScript中有一个空值（null），用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，则返回一个null值。var tmp = null;未定义值当使用了一个并未声明的变量，或者使用了一个已经声明但没有赋值的变量时，将返回未定义值（undefined）。var tmp ;运算符的应用运算符运算符描描 述述示示 例例=将右边表达式的值赋给左边的变量userName=mr+=将运算符左边的变量加上右边表达式的值赋给左边的变量a+=b /相当于a=a+
7、b-=将运算符左边的变量减去右边表达式的值赋给左边的变量a-=b /相当于a=a-b*=将运算符左边的变量乘以右边表达式的值赋给左边的变量a*=b /相当于a=a*b/=将运算符左边的变量除以右边表达式的值赋给左边的变量a/=b /相当于a=a/b%=将运算符左边的变量用右边表达式的值求模，并将结果赋给左边的变量a%=b /相当于a=a%b&=将运算符左边的变量与右边表达式的值进行逻辑与运算，并将结果赋给左边的变量a&=b /相当于a=a&b|=将运算符左边的变量与右边表达式的值进行逻辑或运算，并将结果赋给左边的变量a|=b /相当于a=a|b=将运算符左边的变量与右边表达式的值进行异或运算，
8、并将结果赋给左边的变量a=b /相当于a=abJavaScript中的赋值运算符运算符的应用运运 算算 符符描描 述述示示 例例+加运算符4+6 /返回值为10-减运算符7-2 /返回值为5*乘运算符7*3 /返回值为21/除运算符12/3 返回值为4%求模运算符7%4 返回值为3+自增运算符。该运算符有两种情况：i+（在使用i之后，使i的值加1）；+i（在使用i之前，先使i的值加1）i=1; j=i+ /j的值为1，i的值为2i=1; j=+i /j的值为2，i的值为2-自减运算符。该运算符有两种情况：i-（在使用i之后，使i的值减1）；-i（在使用i之前，先使i的值减1）i=6; j=i-
9、 /j的值为6，i的值为5i=6; j=-i /j的值为5，i的值为5JavaScript中的算术运算符3 函数函数函数的定义function function functionName(parameter 1, parameter 2,)statements;return expression;函数的调用请输入真实姓名：function checkRealName() var str=form1.realName.value; if(str=) alert(请输入真实姓名！); form1.realName.focus(); return; else var objExp=/u4E00-u9
10、FA52,/; if(objExp.test(str)=true)/判断是否匹配 alert(您输入的真实姓名正确！); else alert(您输入的真实姓名不正确！); 4 事件事件什么是事件和事件处理程序JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件来实现的。例如，在页面载入完毕时将触发onload（载入）事件、当用户单击按钮时将触发按钮的onclick事件等。事件处理程序则是用于响应某个事件而执行的处理程序。事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数（Function）来对事件进行处理。JavaScript的常用事件事事
11、 件件何何 时时 触触 发发事事 件件何何 时时 触触 发发onabort对象载入被中断时触发onmousedown单击任何一个鼠标按键时触发onblur元素或窗口本身失去焦点时触发onmousemove鼠标在某个元素上移动时持续触发onchange改变元素中的选项或其他表单元素失去焦点，并且在其获取焦点后内容发生过改变时触发onmouseout将鼠标从指定的元素上移开时触发onclick单击鼠标左键时触发。当光标的焦点在按钮上，并按下回车键时，也会触发该事件onmouseover鼠标移到某个元素上时触发ondblclick双击鼠标左键时触发onmouseup释放任意一个鼠标按键时触发oner
12、ror出现错误时触发onreset单击重置按钮时，在上触发onfocus任何元素或窗口本身获得焦点时触发onresize窗口或框架的大小发生改变时触发onkeydown键盘上的按键（包括Shift或Alt等键）被按下时触发，如果一直按着某键，则会不断触发。当返回false时，取消默认动作onscroll在任何带滚动条的元素或窗口上滚动时触发onkeypress键盘上的按键被按下，并产生一个字符时发生。也就是说，当按下Shift或Alt等键时不触发。如果一直按下某键时，会不断触发。当返回false时，取消默认动作onselect选中文本时触发onkeyup释放键盘上的按键时触发onsubmit单
13、击提交按钮时，在上触发onload页面完全载入后，在Window对象上触发；所有框架都载入后，在框架集上触发；标记指定的图像完全载入后，在其上触发；或标记指定的对象完全载入后，在其上触发onunload页面完全卸载后，在Window对象上触发；或者所有框架都卸载后，在框架集上触发事件处理程序的调用 var b_save=document.getElementById(bt_save); b_save.onclick=function() alert(单击了保存按钮); 5 常用对象常用对象String对象方法名方法名说明说明string.indexOf(subString, startInde
14、x)返回String对象内第一次出现子字符串的字符位置。string.substr(start,length)返回指定字符串的一个子串string.replace(regExp,substring);替换一个与正则表达式匹配的子串string.split(delimiter,limit);将字符串分割为字符串数组属性名属性名说明说明string.length返回String对象的长度属性方法Math对象属性属属 性性描描 述述E欧拉常量（2.718281828459045）LN2 2的自然对数（0.6931471805599453）LN1010的自然对数（2.3025850994046）SQR
15、T22的平方根（1.4142135623730951）LOG2E以2为底数的e的对数（1.4426950408889633）LOG10E以 1 0 为 底 数 的 e 的 对 数（0.4342944819032518）PI圆周率常数（3.141592653589793）SQRT1-20.5的平方根（0.7071067811865476）属属 性性描描 述述示示 例例abs(x)返回x的绝对值Math.abs(-10);ceil(x)返回大于或等于x的最小整数Math.ceil(1.05); Math.ceil(-1.05); cos(x)返回x的余弦值Math.cos(0);exp(x)返回e
16、的x乘方Math.exp(4);floor(x)返回小于或等于x的最大整数Math.floor(1.05);Math.floor(-1.05);log(x)返回x的自然对数Math.log(1);max(x,y)返回x和y中的最大数Math.max(2,4);min(x,y)返回x和y中的最小数Math.min(2,4);pow(x,y)返回x对y的次方Math.pow(2,4);random()返回0和1之间的随机数Math.random();round(x)返回最接近x的整数，即四舍五入函数Math.round(1.05);Math.round(-1.05);sqrt(x)返回x的平方根M
17、ath.sqrt(2);方法Date对象方方 法法描描 述述示示 例例方方 法法描描 述述示示 例例getTimezoneOffset()返回日期的本地时间和UTC表示之间的时差，以分钟为单位new Date().getTimezoneOffset(); toLocaleDateString()返回日期部分的字符串，采用本地日期new Date().toLocaleDateString(); getTime()返回Date对象的内部毫秒表示。注意，该值独立于时区，所以没有单独的getUTCtime()方法new Date().getTime(); toLocaleTimeString()返回时
18、间部分的字符串，采用本地时间new Date().toLocaleTimeString(); toDateString()返回日期部分的字符串表示，采用本地时间new Date().toDateString(); toTimeString()返回时间部分的字符串表示，采用本地时间new Date().toTimeString(); toUTCString()将Date对象转换成一个字符串，采用世界时new Date().toUTCString(); valueOf()将Date对象转换成其内部毫秒格式new Date().valueOf(); 方法Window对象属属 性性描描 述述docum
19、ent对窗口或框架中含有文档的Document对象的只读引用defaultStatus一个可读写的字符，用于指定状态栏中的默认消息frames表示当前窗口中所有Frame对象的集合location用于代表窗口或框架的Location对象。如果将一个URL赋予该属性，则浏览器将加载并显示该URL指定的文档length窗口或框架包含的框架个数history对窗口或框架的history对象的只读引用name用于存放窗口对象的名称status一个可读写的字符，用于指定状态栏中的当前信息top表示最顶层的浏览器窗口parent表示包含当前窗口的父窗口opener表示打开当前窗口的父窗口closed一个只
20、读的布尔值，表示当前窗口是否关闭。当浏览器窗口关闭时，表示该窗口的Window对象并不会消失，不过其closed属性被设置为trueself表示当前窗口screen对窗口或框架的screen对象的只读引用，提供屏幕尺寸、颜色深度等信息navigator对窗口或框架的navigator对象的只读引用，通过navigator对象可以获得与浏览器相关的信息属性Window对象方方 法法描描 述述方方 法法描描 述述alert()弹出一个警告对话框setTimeout(timer)在经过指定的时间后执行代码confirm()显示一个确认对话框，单击“确认”按钮时返回true，否则返回falseclea
21、rTimeout()取消对指定代码的延迟执行prompt()弹出一个提示对话框，并要求输入一个简单的字符串moveTo(x,y)将窗口移动到一个绝对位置blur()将键盘焦点从顶层浏览器窗口中移走。在多数平台上，这将使窗口移到最后面moveBy(offsetx,offsety)将窗口移动到指定的位移量处close()关闭窗口resizeTo(x,y)设置窗口的大小focus()将键盘焦点赋予顶层浏览器窗口。在多数平台上，这将使窗口移到最前边resizeBy(offsetx,offsety)按照指定的位移量设置窗口的大小open()打开一个新窗口print()相当于浏览器工具栏中的“打印”按钮s
22、crollTo(x,y)把窗口滚动到x,y坐标指定的位置setInterval()周期执行指定的代码scrollBy(offsetx,offsety)按照指定的位移量滚动窗口clearInterval()停止周期性地执行代码方法6 Ajax技术技术什么是Ajax以以XMLHttpRequestXMLHttpRequest作为核心技术作为核心技术Ajax的开发模式Web应用的传统模型 Ajax的开发模式Web应用的Ajax模型Ajax的优点1 减轻服务器的负担。Ajax的原则是“按需求获取数据”，这可以最大程度地减少冗余请求和响应对服务器造成的负担。2 可以把一部分以前由服务器负担的工作转移到客
23、户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本。 3 无刷新更新页面，从而使用户不用再像以前一样在服务器处理数据时，只能在死板的白屏前焦急地等待。4 可以调用XML等外部数据，进一步促进页面显示和数据的分离。5 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。7 jQuery技术技术什么是jQuery配置jQuery引入jQuery或jQuery的工厂函数从一个从一个$符号和一对符号和一对()开始开始在参数中使用标记名$(div)：用于获取文档中全部的。在参数中使用ID$(#username)：用于获取文档中ID属性值为username的一个元素。在参数中
24、使用CSS类名$(.btn_grey)：用于获取文档中使用CSS类名为btn_grey的所有元素jQuery的工厂函数我的第一个jQuery脚本$(document).ready(function() $(a).click(function() alert(我的第一个我的第一个jQuery脚本！脚本！); );); 弹出提示对话框弹出提示对话框上机指导上机指导创建一个用户注册的页面，让用户输入用户名、密码、电话和邮箱，使用Javascript脚本完成密码校验、电话号码校验、邮箱校验和空内容校验。小结小结本章首先对什么是本章首先对什么是JavaScriptJavaScript、JavaScrip
25、tJavaScript的主要特点，以及的主要特点，以及JavaScriptJavaScript与与JavaJava的区别作了简要介绍；然后介绍了如何在的区别作了简要介绍；然后介绍了如何在WebWeb页面中使用页面中使用JavaScriptJavaScript，以及，以及JavaScriptJavaScript的基本语法；的基本语法；JavaScriptJavaScript的常用对象作了详细介绍，最后也对常用的的常用对象作了详细介绍，最后也对常用的AjaxAjax技术和技术和jQueryjQuery技术做了简单的介绍并举例，希望大家能在我们讲解的基础之技术做了简单的介绍并举例，希望大家能在我们讲解的基础之上扩展的学习，多看一些课外的例子，多学习最新的上扩展的学习，多看一些课外的例子，多学习最新的JSJS技术。技术。
