《（中职）JavaScript项目式实例教程项目六ppt课件.pptx》由会员分享，可在线阅读，更多相关《（中职）JavaScript项目式实例教程项目六ppt课件.pptx（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、（中职）JavaScript项目式实例教程项目六电子课件工信版 JavaScriptJavaScript项目式实例教程项目式实例教程项目六多功能相册多功能相册 文档对象文档对象 JavaScriptJavaScript项目式实例教程项目式实例教程设计一个多功能相册，具体需求如下：如图6.1所示，是相册用户登录的页面。用户输入用户名、密码正确才能进入如图6.2所示的相册页面。如果选择了“记住密码”复选框，则重新打开此页面时，用户名、密码已经被填入文本框中，用户直接点击“进入看相册”按钮就可以查看相册。项目情境 图6.1 登录 图6.2 相册 JavaScriptJavaScript项目式实例教程
2、项目式实例教程如图6.2所示，是进入的相册页面。相册中的图片在一行显示，当鼠标放置到小图上时，在下方显示对应的大图。当点击小图时，打开如图6.3所示的对话框。在该对话框中，显示该图的详细信息。项目情境 图6.3 详细介绍 JavaScriptJavaScript项目式实例教程项目式实例教程在图6.3所示的对话框中，不仅显示图片的详细介绍，还可以通过点击图片介绍下方的导航链接浏览其他图片及其详细介绍。项目情境 JavaScriptJavaScript项目式实例教程项目式实例教程掌握文档对象Document的常用属性和方法。掌握Cookie对象的使用方法。掌握图像对象的使用方法。掌握超级链接对象的
3、使用方法。掌握利用JavaScript设置样式的方法。学习目标 JavaScriptJavaScript项目式实例教程项目式实例教程任务1 用JAVASCRIPT设置属性和样式在如图6.4的窗口上显示4张大小比例相同的图片，每张图片加红色实线边框，且在一行显示。要求必须用JavaScript实现属性和样式的设置。图6.4 设置属性和样式 JavaScriptJavaScript项目式实例教程项目式实例教程1、文档、文档对象对象DocumentWindow对象的一个子对象，代表整个HTML文档。通过Document对象可以操作HTML文档中的内容及其他对象。Document对象有许多属性和方法，
4、还有子对象。【相关知识】属性属性描述描述 all 返回对象所包含的元素集合的引用。（IE支持）alinkColor设置或获取元素中所有激活链接的颜色。bgColor不赞成。设置或获取表明对象后面的背景颜色的值。cookie设置或获取 cookie 的字符串值。documentElement获取对文档根结点的引用。domain设置或获取文档的安全域名。expand设置或获取表明是否可对象内创建任意变量的值。fgColor设置或获取文档的前景(文本)颜色。forms返回一个数组，数组中的元素为Form表单对象。images返回一个数组，数组中的元素为Image图像对象。linkColor设置或获取
5、对象文档链接的颜色。links返回一个数组，数组中的元素为Link超级链接对象。referrer获取将用户引入当前页面的位置 URL。URL设置或获取当前文档的 URL。vlinkColor设置或获取用户已访问过的链接颜色。XMLDocument获取对由对象引出的的 XML 文档对象模型(DOM)的引用。XSLDocument获取对 XSL 文档的顶层结点的引用。JavaScriptJavaScript项目式实例教程项目式实例教程【相关知识】方法方法描述描述close关闭输出流并强制将数据发送到显示。open此方法以两种方式工作。该方法打开一个文档用于收集 write 和 writeln 方法
6、的输出。在这种情况下，只使用前两个参数 url 和 name。若指定了附加参数，此方法将打开一个窗口，这与 window 对象的 window.open 方法相同。write在指定窗口的文档中写入一个或多个 HTML 表达式。writeln在指定窗口的文档中写入一个或多个 HTML 表达式，后面追加一个换行符。JavaScriptJavaScript项目式实例教程项目式实例教程2、图像对象、图像对象文档对象Document的images属性返回的是一个数组，数组中的每一个元素都是一个图像对象，即Image对象。JavaScript加载HTML文档时，会自动创建一个images数组，数组中的元素
7、个数由HTML文档中的标签决定，每一个标签就是images数组的一个元素，也就是一个图像对象。引用images数组中的元素方法有三种，分别是：document.imagesidocument.images图片的名字document.图片的名字【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程3、在、在JavaScript中设置对象的属性或样式中设置对象的属性或样式1）设置属性）设置属性通常，在通常，在HTML文档中，可以直接在该标签内部设置一个文档中，可以直接在该标签内部设置一个标签的属性，例如：标签的属性，例如：其中，src就是标签的一个属性，但是，有时为了动态
8、的改变某个标签的属性，就可以借助JavaScript，在程序内部设置，方法是：标签对象.属性=属性的值;【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程2）设置样式在HTML文档中，设置样式通常用CSS样式表，但是有时候也需要在JavaScript中进行动态的设置，方法是：标签对象.style.样式=样式的值;其中，样式的书写原则上与CSS样式表的书写方式一致。但是，如果样式中有短横线”-”，则在JavaScript中省略此短横线，而采用“驼峰”法书写原则，原因是在JavaScript中短横线会被当作减号来处理从而导致错误，例如，CSS样式表中设置字体大小用fo
9、nt-size,在JavaScipt中则写成fontSize。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程1、在标签对中创建一个项目列表ul，每个列表项li中放置一个空的img图片标签，代码如下：【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程2、在标签对中输入以下代码：window.onload=function()var imgCount=document.images.length;for(i=0;iimgCount;i+)document.imagesi.src=images/+(i+1)+.jpg;document.
10、imagesi.style.height=75+px;document.imagesi.style.width=105+px;document.imagesi.style.border=1px red solid;document.all.tags(ul)0.style.listStyle=none;/IE支持allvar lists=document.all.tags(li);for(i=0;ilists.length;i+)listsi.style.display=inline;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程在如图6.5所示的页面中，有两种
11、样式可供选择，每种样式下图片的来源和外边框都不同。当用户选择了某一种样式，例如选择了“样式一”，关闭浏览器后，重新打开页面，则该页面图片默认使用“样式一”。任务2 用COOKIE记住样式图6.5 用COOKIE记住样式 JavaScriptJavaScript项目式实例教程项目式实例教程1、cookie的概念的概念cookie是以文件的形式存储在客户端磁盘上的一些信息，这些信息用来保存状态或者用户身份识别。为了安全，浏览器只会让创建cookie的网站访问该cookie。用户可以通过设置浏览器配置从而阻止cookie的使用。【相关知识】JavaScriptJavaScript项目式实例教程项目式
12、实例教程2、创建与读取、创建与读取cookie在JavaScript中，cookie可以通过cookie名和值的方式来创建。用Document对象的cookie属性就可以用来设置和读取cookie。创建cookie的语法如下：document.cookie=cookie的名称=cookie的值“一个网站可以创建多个cookie，不同的cookie可以拥有不同的值。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程3、获取、获取cookie的值的值用Document对象的cookie属性就可以获得一个网站下所有的cookie，实际上是获取了cookie文件的内容。【
13、相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程4、cookie的有效期的有效期cookie被创建后，一般来说，只要浏览器不关闭，就一直有效，一旦浏览器被关闭了，cookie就自动失效了。如果希望在关闭浏览器后还能继续使用，就必须为cookie设置一个有效期，也就是生存期。在有效期内，cookie都可以使用，一旦超过了，该cookie就自动失效，cookie文件就会被自动删除。可以在设置cookie值的同时定义cookie的有效期，使用方式如下：document.cookie=cookie的名称=cookie的值;expires=日期【相关知识】JavaScrip
14、tJavaScript项目式实例教程项目式实例教程注意，这里的日期必须是GMT格式或者UTC格式的日期型字符串。GMT(Greenwich Mean Time)是格林尼治时;UTC(Universal Time Coordinated)是协调世界时。其值的格式形如：Tue,20 May 2014 10:46:08 GMT由于这种格式使用不方便，所以，可以使用方法toGMTString()或者toUTCString()将日期进行转换。一般来说，cookie的有效期都设置为从当前时间开始向后延续的毫秒数，再将这个毫秒数转换为GMT或者UTC日期格式。【相关知识】JavaScriptJavaScri
15、pt项目式实例教程项目式实例教程5、cookie的可访问的可访问路径路径cookie被某个页面创建后，并不是只有这个页面才能访问，与该页面处在同一个目录或者其子目录下的页面都可以访问该cookie，除此之外的其他目录下的页面就无法访问了。一个能使得网站中所有的页面都能访问该cookie的方法是在创建cookie的同时，设置其path参数值为根目录“/”。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程1、在标签对中创建两个单选按钮和一个图像标签，代码如下：样式一样式二【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程2、在标签对中输
16、入以下代码：window.onload=function()var expires=new Date();expires.setTime(expires.getTime()+24*3600000);style1.onclick=function()sampleImage.src=images/1.jpg;sampleImage.style.border=4px red solid;document.cookie=style=1;expires=+expires.toUTCString()+;path=/;style2.onclick=function()sampleImage.src=imag
17、es/2.jpg;sampleImage.style.border=4px blue solid;document.cookie=style=2;expires=+expires.toUTCString()+;path=/;var cookie=document.cookie.split(=)1;if(cookie=1)sampleImage.src=images/1.jpg;sampleImage.style.border=4px red solid;style1.checked=true;elsesampleImage.src=images/2.jpg;sampleImage.style.
18、border=4px blue solid;style2.checked=true;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程if(cookie=1)sampleImage.src=images/1.jpg;sampleImage.style.border=4px red solid;style1.checked=true;elsesampleImage.src=images/2.jpg;sampleImage.style.border=4px blue solid;style2.checked=true;【任务实现】JavaScriptJavaScrip
19、t项目式实例教程项目式实例教程在如图6.6所示的页面中，有一些超级链接，点击“显示链接地址”按钮，显示页面上已有的所有超级链接的内容和链接到的页面地址。任务3 找出所有超级链接地址图6.6 找出所有超级链接地址 JavaScriptJavaScript项目式实例教程项目式实例教程1、链接对象、链接对象Document对象的links属性可以返回一个数组，数组中的每个元素就是一个链接（Link）对象。可以使用以下的方法来引用links数组中的元素：document.linksi【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程2、链接对象的、链接对象的属性属性【相关
20、知识】属性属性描述描述hash设置或返回从井号(#)开始的 URL（锚）。Host设置或返回主机名和当前 URL 的端口号。Hostname设置或返回当前 URL 的主机名。Href设置或返回完整的 URL。Pathname设置或返回当前 URL 的路径部分。Port设置或返回当前 URL 的端口号。Protocol设置或返回当前 URL 的协议。Search设置或返回从问号(?)开始的 URL（查询部分）。target设置或返回超级链接打开的目标窗口。innerHTML返回Link对象中的超级链接文字。也可以用text（Netscape浏览器支持）或者innerText（IE浏览器支持）。J
21、avaScriptJavaScript项目式实例教程项目式实例教程1、在标签对中创建一些超级链接、一个按钮和一个用于显示结果的div，代码如下：百度Google雅虎淘宝【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程2、在标签对中输入以下代码：window.onload=function()showBtn.onclick=function()allLinksDiv.innerHTML=;for(i=0;idocument.links.length;i+)var thisLink=document.linksi;allLinksDiv.innerHTML+=thi
22、sLink.innerHTML+：+thisLink.href+;【任务实现】JavaScriptJavaScript项目式实例教程项目式实例教程任务4“项目项目六六”的实现的实现 JavaScriptJavaScript项目式实例教程项目式实例教程cookie值的编码和解码值的编码和解码一般情况下，cookie中是不允许出现空格、分号、逗号等特殊符号的，如果需要将这些符号写入cookie，就必须使用escape()函数对cookie进行编码，在读取cookie时再用unescape()函数对cookie进行解码以便还原cookie的值。escape()函数返回一个包含 charstring
23、内容的字符串值（Unicode 格式）。所有空格、标点、重音符号以及其他非 ASCII 字符都用“%xx”编码代替，其中“xx”等于表示该字符的十六进制数。例如，空格返回的是“%20”。字符值大于 255的以“%uxxxx”格式存储。注意，escape()函数不能够用来对统一资源标示码(URI)进行编码，编码应使用encodeURI函数。unescape()函数返回一个包含 charstring 内容的字符串值。所有以“%xx”十六进制形式编码的字符都用 ASCII 字符集中等价的字符代替。以“%uxxxx”格式（Unicode 字符）编码的字符用十六进制编码“xxxx”的 Unicode 字
24、符代替。注意，unescape()函数不能用于解码统一资源标识码(URI)，解该码可使用decodeURI函数。【相关知识】JavaScriptJavaScript项目式实例教程项目式实例教程1、在本项目中，需要建立三张页面，分别为：登录（login.html）、相册（photo.html）、相片详细（detail.html）。2、在登录（login.html）页面中要实现记住密码的功能可以使用cookie保存用户输入的用户名和密码。3、在相册（photo.html）页面中要导入多张相片，并且设置显示格式，点击图片触发相关事件，可以考虑使用图片对象的属性、样式和事件。点击某一张图片打开对话框显
25、示图片详细介绍可以使用Window对象打开模态对话框技术。4、在相片详细（detail.html）页面中，要实现导航功能，可以考虑使用链接对象的属性和事件来实现。5、考虑到代码的模块化和可重用性，本项目中将设置和读取cookie的功能独立为一个函数，并放置在一个单独的文件“func.js”中。【任务分析】JavaScriptJavaScript项目式实例教程项目式实例教程在文件中创建一个设置cookie的函数setCookie和一个读取cookie的函数getCookie。代码如下：function setCookie(cookieName,value,hours,path)var expir
26、es=new Date();expires.setTime(expires.getTime()+hours*3600000);document.cookie=cookieName+=+escape(value)+;expires=+expires.toUTCString()+;path=+path;function getCookie(cookieName)var allCookies=document.cookie;var startPos=allCookies.indexOf(cookieName);var cookieValStartPos=startPos+cookieName.len
27、gth+1;var cookieValEndPos=allCookies.indexOf(;,startPos);if(cookieValEndPos=-1)cookieValEndPos=allCookies.length+1;var cookieValue=allCookies.substring(cookieValStartPos,cookieValEndPos);return unescape(cookieValue);【任务实现一】设置和读取cookie的代码文件“func.js”。JavaScriptJavaScript项目式实例教程项目式实例教程1、在标签对中建立一个表单，表单元
28、素为两个文本框、一个复选框和一个按钮。代码如下：用户名：密码：记住密码【任务实现二】登录页面文件“login.html”。JavaScriptJavaScript项目式实例教程项目式实例教程2、在标签对中输入以下代码：window.onload=function()form1.nameText.value=getCookie(username);form1.pswText.value=getCookie(password);form1.submitBtn.onclick=function()if(form1.nameText.value=abc&form1.pswText.value=123)
29、window.location.replace(photo.html);elsealert(用户名或密码错误！);if(form1.saveCookie.checked)setCookie(username,form1.nameText.value,24,/);setCookie(password,form1.pswText.value,24,/);【任务实现二】登录页面文件“login.html”。JavaScriptJavaScript项目式实例教程项目式实例教程1、在标签对中建立一个可以返回登录页面的超级链接；一个项目列表，每个列表项中创建一个空的图像标签；一个含有空的图像标签的标签，用
30、来显示大图。代码如下：返回登录页 【任务实现三】相册页面文件“photo.html”。JavaScriptJavaScript项目式实例教程项目式实例教程2、在标签对中输入以下代码：window.onload=function()var imgCount=document.images.length;var divImg=document.imagesimgCount-1;divImg.style.display=none;for(i=0;iimgCount-1;i+)document.imagesi.src=./images/+(i+1)+.jpg;document.imagesi.styl
31、e.height=75+px;document.imagesi.style.width=105+px;document.all.tags(ul)0.style.listStyle=none;/IE支持allvar lists=document.all.tags(li);【任务实现三】相册页面文件“photo.html”。JavaScriptJavaScript项目式实例教程项目式实例教程for(i=0;ilists.length;i+)listsi.style.display=inline;document.imagesi.onmouseover=function()this.style.cu
32、rsor=pointer;divImg.style.display=block;divImg.src=this.src;document.imagesi.onmouseout=function()divImg.style.display=none;document.imagesi.index=i+1;document.imagesi.onclick=function()window.showModalDialog(detail.html,this.index,dialogHeight:340px;dialogWidth:350px);【任务实现三】相册页面文件“photo.html”。Java
33、ScriptJavaScript项目式实例教程项目式实例教程1、在标签对中建立一个含有空的图像标签的标签，用来显示当前要显示的图片；一个空的标签，用来显示介绍图片的文字信息；四个链接地址为空的超级链接，用来导航图片。代码如下：首页-上一页-下一页-末页【任务实现四】详细介绍页面文件“detail.html”。JavaScriptJavaScript项目式实例教程项目式实例教程2、在标签对中输入以下代码：window.onload=function()function showImg(index)document.images0.src=./images/+index+.jpg;detailDi
34、v.innerHTML=这是第+index+张图片的详细介绍;var index=window.dialogArguments;showImg(index);document.links0.onclick=function()index=1;showImg(index);document.links1.onclick=function()if(index=1)alert(已经是第一页);else【任务实现四】详细介绍页面文件“detail.html”。JavaScriptJavaScript项目式实例教程项目式实例教程index-;showImg(index);document.links2.onclick=function()if(index=4)alert(已经是最后一页);elseindex+;showImg(index);document.links3.onclick=function()index=4;showImg(index);【任务实现四】详细介绍页面文件“detail.html”。