Java Web程序设计 课件 第4章 Javascript_第1页
Java Web程序设计 课件 第4章 Javascript_第2页
Java Web程序设计 课件 第4章 Javascript_第3页
Java Web程序设计 课件 第4章 Javascript_第4页
Java Web程序设计 课件 第4章 Javascript_第5页
已阅读5页，还剩55页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章Javascript主讲人：2025/2/61主要内容2025/2/6《Web程序设计》21Javascript简介2Javascript语法3流程控制4函数5对象6文档对象模型7事件处理本章课程目标知识目标掌握Javascript的基本语法、DOM对象以及事件处理方法；能力要求：能够认识到解决问题有多种解决方案，并运用文献资料检索研究寻找可替代的方案，具备多方案比较选择能力；能够理解并掌握Web程序设计中的基础知识与工作原理，将知识与原理应用于开发过程中的问题分析；2025/2/6《Web程序设计》34.1Javascript简介Javascript是一种动态类型、弱类型、基于原型的脚本语言。是一种解释性脚本语言，代码不进行预编译而直接执行。JavaScript也有自己的基本语法、数据类型、运算符和流程控制语句。它的解释器通常被称为JavaScript引擎。JavaScript与Java语言在命名上有些相似，但与Java不是同一公司的产品，它是Netscape（网景）公司为扩充NetscapeNavigator浏览器的功能而开发的一种可以嵌入Web网页的编程语言，前身叫LiveScript。2025/2/6《Web程序设计》4JavaScript脚本语言具有以下特点：

脚本语言。JavaScript是一种解释型的脚本语言,不需要编译，它是在程序的运行过程中逐行进行解释的。

基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

弱数据类型。JavaScript脚本语言中采用的是弱类型的变量类型。动态性。JavaScript是一种采用事件驱动的脚本语言，它可以在浏览器端不需要经过Web服务器直接对用户的输入做出响应。跨平台性。JavaScript脚本语言仅需要浏览器的支持，不依赖于操作系统。2025/2/6《Web程序设计》5主要内容2025/2/6《Web程序设计》61Javascript简介2Javascript语法3流程控制4函数5对象6文档对象模型7事件处理语法Javascript代码一般嵌入到网页中的<script></script>标签之内，或保存一个单独的js文件中。2025/2/6《Web程序设计》7<scripttype=”text/javascript”>vari,sum=0;for(i=0;i<=100;i++){sum+=i;}window.alert(‘总和为：’+sum);</script>JavaScript在编写时，仍需注意以下事项：JavaScript区分大小写。例如，变量Number与变量number是两个不同的变量。Javascript中变量是弱类型的，因此在定义变量的时，只使用关键字var就可以将变量初始化任意的值。JavaScript可以使用双斜线“//”开头的单行注释，也可以使用“/*”开头，以“*/”结尾的多行注释。JavaScript的变量名不能是系统的保留字（或关键字，如var、for、null等）数据类型Javascript虽然是弱数据类型，但仍然有数据类型及其运算规则。Javascript有6种数据类型，它们分别是：int（整型）float（浮点型）string（字符串类型）boolean（布尔型）object（对象类型）null（空类型）undefined（未定义类型）其中int型和float型为数值型。2025/2/6《Web程序设计》8字符串类型字符串是用双引号（“”）或单引号（‘’）作为分界符的，字符的个数为字符串的长度。单双引号也可嵌套使用。例如，“He’sakindman！”转义字符用反斜杠“\”开头2025/2/6《Web程序设计》9转义字符含义转义字符含义\b退格\t表示TAB符号\f换页\'单引号\n换行\"双引号\r回车\\反斜杠空类型与未定义类型空类型的值就是null，表示空值，这种空值通常是人为赋予的，例如在初始化时将该变量设置为null。未定义类型即undefined，指变量被声明，但未给该变量赋值。undefined与null不同的是，undefined是变量声明后自动具有的值，null是人为赋值的。2025/2/6《Web程序设计》10变量JavaScript中变量的命名规则如下：

必须以字母或下划线开头

变量名不能包含空格、加号或减号等一些特殊符号

不能使用JavaScript中的关键字JavaScript变量名是严格区分大小写的。例如，Nchu与nchu表示两个不同的变量在JavaScript中，使用变量之前可以先声明变量，所有的变量都由关键字var声明。2025/2/6《Web程序设计》11vara,b,c;//同时声明a，b，c三个变量由于JavaScript采用弱类型的形式，所以在定义时可以不管变量的数据类型，把任意类型的数据赋值给变量，JavaScript将根据实际的值来确定变量的类型。例如：2025/2/6《Web程序设计》12varnumber=100;//数值数据类型varstr=“南昌航空大学”;//字符串类型varstatus=true;//布尔类型number=false;//修改number中的值为布尔类型主要内容2025/2/6《Web程序设计》131Javascript简介2Javascript语法3流程控制4函数5对象6文档对象模型7事件处理一个最简单的程序是由若干条语句构成的，程序按语句位置的先后次序，逐条按顺序执行，这种程序被称为顺序结构。除了顺序结构外，还有用于判断和重复执行的控制流程，分别称为选择和循环结构，这三种结构都是用来控制程序执行的流程。Javascript与C、Java等语言类似，也提供了相同的流程控制语句。2025/2/6《Web程序设计》14if语句2025/2/6《Web程序设计》15<html><head><metacharset="UTF-8"><title>if语句的简单应用</title></head><body><script>vardate=newDate();varhour=date.getHours();if(hour>=6&&hour<8)alert("当前时间为："+date.toLocaleString()+""+"早上好！");if(hour>=8&&hour<12)alert("当前时间为："+date.toLocaleString()+""+"上午好！");if(hour>=12&&hour<18)alert("当前时间为："+date.toLocaleString()+""+"下午好！");if(hour>=18&&hour<23)alert("当前时间为："+date.toLocaleString()+""+"晚上好！");if(hour>=23&&hour<=24||hour>0&&hour<6)alert("当前时间为："+date.toLocaleString()+""+"夜深了，休息吧");</script></body></html>循环whiledo-whilefor2025/2/6《Web程序设计》16<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>while语句的应用</title><script>//求1+2+3+...+100的和varnum=1,sum=0;while(num<=100){sum=sum+num;num++;}document.write("1+2+3+...+100的和为："+sum);</script></head><body></body></html>主要内容2025/2/6《Web程序设计》171Javascript简介2Javascript语法3流程控制4函数5对象6文档对象模型7事件处理模块化在解决复杂的问题时或较大的程序一般分为若干个较小的程序模块，每一个模块实现特定的功能。在Javascript语言中，每一个模块就是一个函数。有时将常用的模块编写成函数，然后可以在程序中需要的地方重复调用，以增强代码的重用性，提高代码的可维护性。2025/2/6《Web程序设计》18模块模块模块模块模块模块函数定义参数说明如下：

函数名：函数的名称，命名规范与变量名一致，不能与系统保留字冲突；

参数1，参数2：参数的名称，可选的，是函数的形参，这里的参数只需要名称，不需要数据类型；

代码块：函数的主体，即函数中要执行的数据处理逻辑；return返回值：用于返回函数的计算结果，可选的，适用于需要返回的情形，如果不需要返回，则可省略。2025/2/6《Web程序设计》19function函数名（[参数1，参数2，…]）{代码块;[return返回值;]}<body><script>functiongetToday()//定义函数{vartoday=newDate();returntoday.toLocaleString();}</script><h3>今天是：<span><scripttype=”text/javascript”>document.write(getToday());//调用函数</script></span></h3></body>函数参数参数是函数向内部传递数据的通道。在函数定义的时候确定的参数称为形式参数（形参），而真正的参数值（称为实际参数，简称实参）是在调用该函数时，由调用方传递给所定义的函数，从而实现调用函数向被调用函数的数据传递。Javascript的函数参数不需要指定参数的类型，这是因为变量类型默认是自动识别的。2025/2/6《Web程序设计》20functionmyFunc(x,y){//判断y是否传入实际值if(y===undefined){y=0;......}}调用时，如果没有给y传入值，则y的值默认为0。这句代码也可直接写为“y=y||0”//EMCAScript6//支持默认参数functionmyFunc(x,y=0){......}JavaScript函数有个内置的对象arguments对象，包含了函数调用的参数数组。2025/2/6《Web程序设计》21functionsumAll(){vari,sum=0;for(i=0;i<arguments.length;i++){sum+=arguments[i];}returnsum;}......x=sumAll(1,123,500,115,44,88);主要内容2025/2/6《Web程序设计》221Javascript简介2Javascript语法3流程控制4函数5对象6文档对象模型7事件处理基于对象（Object-based）Javascript语言是基于对象（Object-based）的程序设计语言，采用的是对象、事件驱动的编程机制。与Java类似的是，Javascript中的对象也具有一定的属性和方法，可以根据需要进行声明。但在类的声明与实例时，与Java有较大的区别。2025/2/6《Web程序设计》23对象的定义Javascript对象是一种复合值：它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。对象也可看做是属性的无序集合，每个属性都是一个名/值对。2025/2/6《Web程序设计》24var对象名={属性名：值,属性名：值,......}对象名：要定义的对象名称；属性名：对象中的属性名称；值：为该属性设置的值。定义时属性名和值通常成对出现，也称为“属性-值”对，多个“属性-值”对之间用逗号分隔。varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};对象方法的定义Javascript中对象方法是通过函数的定义方式实现的，也可以将其看作是一个属性，这个属性是一个函数。2025/2/6《Web程序设计》25var对象名={/*属性列表*/....../*方法列表*/

函数名:function(){

函数体;},......};对象名：声明的对象名称；函数名：声明的函数名称，是对象的成员函数；函数体：函数的具体实现逻辑代码。varperson={fullName:“John”,lastName:“Doe”,showFullName:function(){returnfullName+lastName;}}内置对象JavaScript脚本语言提供了一些内置对象，这些内置对象通常是一些工具对象，利用这些对象以及提供的方法可以辅助完成特定的功能。常用的内置对象主要包括：Date对象String对象Math对象Array对象......2025/2/6《Web程序设计》26Date对象属性/方法说

明getDate()获取当前的日期getYear()获取当前的年份（2000年以前返回年份数后两位，2000年以后返回后四位）getFullYear()返回以4位整数表示的年份数getMonth()获取当前的月份getDay()获取当周的第几天，即星期几getHours()获取当前的小时getMinutes()获取当前的分钟getSeconds()获取当前的秒setDate()设置当前的日期setYear()设置当前的年份setMonth()设置当前的月份setHours()设置当前的小时setMinutes()设置当前的分钟setSeconds()设置当前的秒setTime()设置当前的时间（单位是毫秒）toLocaleString()以本地时区格式显示，并以字符串表示2025/2/6《Web程序设计》27String对象属性/方法说

明length求字符串的长度charAt(下标)字符对象指定位置的字符indexOf(目标字符串)目标字符串在字串对象中首次出现的位置lastIndexOf(目标字符串)目标字符串在字串对象中最后一次出现的位置substr(开始位置[,长度])截取子串substring(索引值I,索引值j)截取从索引值i到j-1的字串split(分隔符)把字符串按分隔符拆成字符串数组replace(被代替的字符串,新字符串)用新的字符串代替旧的字符串toLowerCase()变为小写字母toUpperCase()变为大写字母toString()获取String对象的字符串值2025/2/6《Web程序设计》28Math对象属性/方法说

明abs(x)返回x的绝对值max(x,y)返回两数间的较大值exp(x)返回x的e次方log(x)返回以e为底的对数值pow(x,y)返回x的y次方sqrt(x)返回x的平方根random()返回0和1之间的一个随机数round(x)返回x四舍五入后的整数sin(x)、cos(x)、tan(x)分别返回x的正弦、余弦、正切值asin(x)、acos(x)、atan(x)分别返回x的反正弦、反余弦、反正切值2025/2/6《Web程序设计》29Array对象Array对象是Javascript中一个特殊的对象，专门用于数组的声明。2025/2/6《Web程序设计》30对

象属性/方法说

明Arraypush(元素1，元素2，…)添加元素，返回数组的长度reverse()倒序数组<head><metacharset="UTF-8"><title>Array对象应用示例</title></head><body><script>varapple="苹果",banana="香蕉",orange="橘子";vararray=newArray();array.push(apple,banana,orange);document.write("数组为："+array+"<br/>");varreverse_array=array.reverse();document.write("倒序数组为："+reverse_array);</script></body>浏览器对象浏览器对象也称为浏览器内置对象（BrowserObjectModel），这些内置对象是浏览器自身已定义好的，可以直接使用。BOM可实现功能主要有：弹出新的浏览器窗口，移动、关闭浏览器窗口以及调整窗口的大小，页面的前进、后退等。因此，浏览器对象主要有：window,location,history等。2025/2/6《Web程序设计》31window对象window对象表示一个浏览器窗口或一个框架。在该对象结构图中，窗口对象window是所有对象中的最高层对象。window对象会在<body>或<frameset>出现时自动创建。window对象是一个全局对象，在同一个窗口访问其他对象时，可以省略2025/2/6《Web程序设计》32方法描述alert(信息字串)显示带消息和“确定”按钮的对话框confirm(确认信息字串)确认对话框，有“确认”和“取消”两个按钮，单击“确认”返回true，单击“取消”返回falseprompt(提示字串,[默认值])提示输入信息对话框，返回用户输入信息open(URL,窗口名称[,窗口规格])打开新窗口scroll(x坐标,y坐标)窗口滚动到指定坐标位置setTimeout(函数,毫秒)指定毫秒时间后调用函数setInterval(函数,毫秒)每隔指定毫秒时间调用一次函数clearTimeout(定时器对象)清除以setTimeout定义的定时程序clearInterval(定时器对象)清除以setInterval定义的定时程序close()关闭当前浏览器窗口stop()停止加载网页moveTo(x坐标,y坐标)将窗口移动到设置的位置moveBy(水平像素值,垂直像素值)按设置的值相对地移动窗口resizeTo(宽度像素值,高度像素值)按指定的宽度和高度调整窗口resizeBy(宽度像素值,高度像素值)按指定的值相对的调整窗口大小2025/2/633属性描述document提供窗口的文档对象只读引用location包含有关当前URL的信息navigator提供窗口的浏览器对象引用history提供窗口的历史对象只读引用defaultStatus设置状态栏的默认信息status设置状态栏的临时信息screen提供窗口的屏幕对象引用frames提供窗口的框架对象引用name设置或返回存放窗口的名称event提供窗口的事件对象引用self返回对当前窗口的引用top返回最顶层的先辈窗口parent返回父窗口window对象使用示例(alert方法)2025/2/6《Web程序设计》34<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>警告对话框的应用</title><script>functioncheckPasswod(object){if(object.value.length<6)alert("密码长度不得小于6位"); }</script></head><body>//当失去焦点时发生密码：<inputtype="password"onblur="checkPasswod(this)"/></body></html>window对象使用示例(confirm方法)2025/2/6《Web程序设计》35<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><script>functionConfirm(){if(confirm("确认删除吗？"))alert("已删除");elsealert("您取消了删除");}</script></head><body><inputtype="button"value="删除"onclick="Confirm()"/></body></html>定时器应用示例2025/2/6《Web程序设计》36<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><script>functionshowtime(){document.getElementById("mytime").innerText=newDate().toLocaleString();}//每隔一秒种调用一次showtime()函数setInterval("showtime()",1000);</script></head><body><spanid="mytime"></span></body></html>location对象location对象是window对象的子对象，是浏览器内置的一个静态对象，它包含有关当前URL（统一资源定位符）信息。2025/2/6《Web程序设计》37属性/方法描述href设置或返回完整的URLhost设置或返回URL的主机名和端口号hostname设置或返回URL的主机名port设置或返回URL的端口号pathname设置或返回URL的路径部分protocol设置或返回URL的协议search设置或返回从“？”开始的URL部分（查询部分）hash设置或返回从“#”开始的URL部（锚）reload()重新加载当前网页replace(url)用url指定的网址代替当前的网页assign(url)用url指定的网址加载新的网页主要内容2025/2/6《Web程序设计》381Javascript简介2Javascript语法3流程控制4函数5对象6文档对象模型7事件处理DOM（DocumentObjectModel，文档对象模型），是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。当网页被加载时，浏览器会创建页面的文档对象模型。HTMLDOM模型被结构化为对象树如图所示。2025/2/6《Web程序设计》39DOM用途通过这个对象模型，JavaScript可以完成以下内容：JavaScript能改变页面中的所有HTML元素JavaScript能改变页面中的所有HTML属性JavaScript能改变页面中的所有CSS样式JavaScript能删除已有的HTML元素和属性JavaScript能添加新的HTML元素和属性JavaScript能对页面中所有已有的HTML事件作出反应JavaScript能在页面中创建新的HTML事件2025/2/6《Web程序设计》40节点关系DOM模型节点树中的节点通常存在一些层级关系。可以通过父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。在节点树中，顶端节点被称为根（root）。每个节点都有父节点，除了根（它没有父节点）。一个节点可拥有任意数量的子节点。同胞是拥有相同父节点的节点。2025/2/6《Web程序设计》412025/2/6《Web程序设计》42<html><head><metacharset="utf-8"><title>DOM教程</title></head><body><h1>DOM课程</h1><p>Helloworld!</p></body></html>访问方法HTMLDOM方法是可以在节点（HTML元素）上执行的动作。一些常用的HTMLDOM方法：getElementById(id)：获取带有指定id的节点（元素）appendChild(node)：插入新的子节点（元素）removeChild(node)：删除子节点（元素）2025/2/6《Web程序设计》43方法描述getElementById()返回带有指定ID的元素。getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。querySelectorAll()返回符合该CSS选择器的所有元素的节点列表，IE8以下不适用appendChild()把新的子节点添加到指定节点。removeChild()删除子节点。replaceChild()替换子节点。insertBefore()在指定的子节点前面插入新的子节点。createAttribute()创建属性节点。createElement()创建元素节点。createTextNode()创建文本节点。getAttribute()返回指定的属性值。setAttribute()把指定属性设置或修改为指定的值。getElementById()方法该方法返回带有指定ID的元素getElementsByTagName()方法该方法返回带有指定标签名的所有元素getElementsByClassName()方法该方法返回带有指定class样式名称的所有元素2025/2/6《Web程序设计》44varobj=document.getElementById(ID);varobjs=document.getElementsByTagName(tagName);varobjs=document.getElementByClassName(className);例如，以下代码实现了动态添加一个下拉框的功能2025/2/6《Web程序设计》45<html><body><pid="area"></p><script>vare=document.createElement("select");//创建下拉框节点e.options[0]=newOption("加载项1","");//添加选项e.options[1]=newOption("加载项2","");//添加下拉框document.getElementById("area").appendChild(e);</script></body></html>访问属性属性是HTML元素预先定义好的标签，涉及到HTML元素的外观、样式、文本、标签等方面的属性，通过元素属性的访问，可以实现客户端动态改变网页的效果。主要的公共属性有以下几种：innerHTML--表示元素的内容，包含HTML标签。nodeName--表示节点的标签名称，返回一个文本值。nodeValue--表示节点的值，返回一个文本值。nodeType--表示节点类型，返回一个整型值。2025/2/6《Web程序设计》46innerHTML示例2025/2/6《Web程序设计》47<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><body><pid="intro"></p><script>//修改p标签中的文本内容varobj=document.getElementById("intro");obj.innerHTML=”早上好”;</script></body></html>修改元素样式通过HTMLDOM，可以访问HTML元素的样式对象，实现动态改变HTML元素的样式。主要通过元素的style属性来完成。参数说明：obj，要访问或修改的对象名称样式名，要访问或修改的CSS样式名称2025/2/6《Web程序设计》48obj.style.样式名obj.style.fontSize="12pt";主要内容2025/2/6《Web程序设计》491Javascript简介2Javascript语法3流程控制4函数5对象6文档对象模型7事件处理Javascript事件Javascript事件实质上是发生在HTML元素上的“事件”，例如鼠标点击或键盘上有按键时，可以应用JavaScript处理这些事件。当用户点击鼠标时

当网页已加载时

当图片已加载时

当鼠标移动到元素上时

当输入字段被改变时

当HTML表单被提交时

当用户触发按键时2025/2/6《Web程序设计》50常用事件事件描述onclick鼠标单击事件ondbclick鼠标双击事件onmousedown用户按下鼠标时触发事件onmouseup用户按下鼠标后松开鼠标时触发事件onmouseover鼠标移到某个对象上onmousemove鼠标移动时触发事件onmouseout鼠标离开对象的时候onkeypress按下然后松开一个键onkeyup松开一个键onkeydown按下一个键onfocus当某个元素获得焦点时触发事件onblur当某个元素失去焦点时触发事件onchange文本框内容改变事件（text、textarea、select、password等对象）onselect文本框内容被选中事件onerror加载文件或图像发生错误时触发事件onload页面内容加载完成时触发事件onunload卸载网页或关闭窗口时触发事件onresize当窗口被调整大小时onscroll滚动条移动事件onhelp按F1键或单击浏览器Help按钮时发生onsubmit一个表单被提交时触发事件onreset一个表单被重置时触发事件2025/2/6《Web程序设计》51onclick事件示例2025/2/6《Web程序设计》52<divonclick=”show()”>显示元素</div><script>functionshow(){alert(“点击了显示元素按钮”);}</script>onload事件onload事件，当页面上所有元素都获取成功并在浏览器中加载完成后触发，可以理解为页面上所有元素都成功显示后触发。2025/2/6《Web程序设计》53<head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript">window.onload=function(){//定义onload事件处理程序document.getElementById("btn").onclick=function(){document.getElementById("box").style.width="400px";document.getElementById("box").style.height="400px";}</script></head><body><inputtype="button"name="btn"id="btn"value="确认"><divid="box"></div></body>onchange事件当某个元素的值发生变化时触发。通常可以为文本输入框或下拉框选项发生变化时，进行相应的处理。需要注

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论