课 程 教 案
2018～2019学年 第1学期
课 程 名 称 Web系统与技术
授 课 对 象
主 讲 教 师
系 部 计算机工程系
职 称 职 务
使 用 教 材 谢从华，高蕴梅，黄晓华.Web系统与技术
清华大学出版社，2018
2018年 5月 22日
课程教案（7）
第 7周 星期 第 节 年 月 日
授课章节 | 第5章 JavaScript编程技术 5.1 JavaScript编程基础 5.1.1 JavaScript简介 5.1.2 Javascript的使用方法 5.1.3 语法规则 5.1.4运算符和表达式 5.1.5 函数 5.1.6流程控制 5.1.7 事件处理 5.2 JavaScript对象编程 5.2.1 Object 类型 5.2.2 Array对象 5.2.3 String对象 5.2.4 Math对象 5.2.5 Number对象 5.2.6 Data对象 |
教学目的 | 1 熟悉和掌握JavaScript的语法和使用。 2 掌握JavaScript的常见对象。 3 了解JavaScript的发展历史。 |
教学重点 | 熟练掌握JavaScript的常见对象属性及其应用。 |
教学难点 | 熟练掌握JavaScript的事件处理、常见对象属性及其应用。 |
教学方式 | 讲授 (ppt) |
课程设计 | （1）课程导入: 向学生展示几个Javascript交互例子，分析其功能和作用，让学生对本章学习内容有个初步了解和认识。 （2）授课语言知识点。介绍JavaScript简介，Javascript的使用方法：直接在HTML中嵌入Javascript，单独的Js文件，直接在HTML的标记添加Javascript脚本。讲授JavaScript的语法、运算符、表达式、函数、语句、事件和网页中的使用方法。 （3）结合案例，Javascript的使用方法，分析JavaScript的语法、运算符、表达式、函数、语句、事件使用。 【例5-1】 HTML文件中使用脚本语言。 第1步，利用VS2013建立一个空网站项目JavaScriptWebsite。 第2步，在JavaScriptWebsite中添加HTML文件，命名5-1.HTML,设为起始页，添加代码： <HTML> <head> <Meta http-equiv=“Content-Type” content=“text/HTML; charset=gb2312”> <title>HTML中如何使用script语言--设置收藏夹实例</title> </head> <script type=“text/javascript”> <!-- alert('Hello,world'); //显示消息对话框 function SayHello(Name) { alert('Hello'+Name); //显示消息对话框 } </script> <body> <A HREF=“javascript: SayHello ('张三');”>你点我呀</A> </body> </HTML> 第3步，运行程序。 【例5-2】在HTML页面调用js文件中的函数。 第1步，在JavaScriptWebsite中添加Javascript文件，命名jsone.js. function SayHello(Name) { alert(“Hello”+Name); //显示消息对话框 } 第2步，在JavaScriptWebsite中添加HTML文件，命名5-2.HTML,设为起始页，添加代码： <HTML> <head> <Meta http-equiv=“Content-Type” content=“text/HTML; charset=gb2312”> <title>HTML中如何使用script语言</title> <script type=“text/javascript” src=“jsone.js”></script> </head> <body> <A HREF=# οnclick=“SayHello('张三');”>你点我呀</A> </body> </HTML> 第3步，运行程序。 【例5-6】数据类型。 第1步，在JavaScriptWebsite中添加HTML文件，命名5-6.HTML,设为起始页，添加代码： <scripttype=“text/javascript”> alert(Number(true)); alert(Number(25)); alert(Number(null)); alert(Number(undefined));
alert(parseInt(“456Lee”)); alert(parseInt(“Lee456Lee”)); alert(parseInt(“12Lee56Lee”)); alert(parseInt(“56.12”)); alert(parseInt(““)); </script> 第2步，运行程序，输出结果. 【例5-9】函数示例。 第1步，在JavaScriptWebsite中添加HTML文件，命名5-9.HTML,设为起始页，添加代码： <HTML> <Meta = charset = “utf-8” /> <head> <title>函数示例</title> </head> <script language=“JavaScript”> function factor(num) { var i,fact=1; for (i=1;i<num+1;i++) fact=i*fact; return fact; } </script> <body> <script language=“JavaScript”> //调用factor函数 alert(“4的阶乘=“+ factor(4)); </script> </body> </HTML> 第2步，运行程序，输出结果。 【例5-16】try 语句。 第1步，在JavaScriptWebsite中添加HTML文件，命名5-16.HTML,设为起始页，添加代码： <HTML> <head> <title>try 语句</title></head> <script language=“JavaScript”> try{ document.write (“Outer try running….</br>“); // 第1个输出 try{ document.write (“Nested try running...</br>“); // 第2个输出 throw “an error</br>“; } catch(e) { document.write (“Nested catch caught “ + e +”</br>“); //第3个输出 throw e + “ re-thrown </br>“; //第6个输出 } finally { document.write (“Nested finally is running...</br>“); // 第4个输出 } } catch(e) { document.write (“Outer catch caught “ + e +”</br>“); // 第5个输出 } finally{ document.write (“Outer finally running </br>“); // 第7个输出 } </script> </body> </HTML> 第2步，运行程序，输出结果。 【例5-19】鼠标单击(函数)。 第1步，在JavaScriptWebsite中添加HTML文件，命名5-19.HTML,设为起始页，添加代码： <HTML> <Meta charset=“utf-8”/> <head> <title>检查输入的字符串是否全由数字组成</title> </head> <body> <input id=“mytext” type=“text” value='12332'> <input id=“mybut” type=“button” value=“检查”> <script language=“javascript”> mybut.οnmοusedοwn=function() { /* mybut 为按钮的ID */ var TestResult = !/\D/.test(mytext.value); /*使用正则表达式测试字符串是否全是数字*/ alert(TestResult); } </script> </body> </HTML> 第2步，运行程序，输出结果。 (4) 互动环节。和学生一起总结Javascript和CSS引用方式的区别，总结JavaScript的语法、运算符、表达式、函数、语句、事件的知识要点。 (5）讲授JavaScript的对象。主要包括Object、 Array、String、Math、 Number和 Date等对象、属性及其应用。 (6) 结合案例分析JavaScript的 Object、 Array、String、Math、 Number和 Date对象。 【例5-20】使用自定义对象的方式创建数组对象。通过function定义一个数组，其中arrayName是数组名，size是数组长度，通过this[i]为数组赋值。定义对象后还不能马上使用，还必须使用new操作符创建一个数组示例MyArray。一旦给数组赋予了初值后，数组中就具有真正意义的数据，以后就可以在程序设计过程中直接引用。 第1步，在JavaScriptWebsite中添加HTML文件，命名5-20.HTML,设为起始页，添加代码： <script language=“javascript”> function arrayName(size) { this.length=size; for(var i=0; i<=size;i++) this[i]=0; return this; } var MyArray = new arrayName(10); MyArray[0]=1; MyArray[1]=2; MyArray[2]=3; MyArray[3]=4; MyArray[4]=5; MyArray[5]=6; MyArray[6]=7; MyArray[7]=8; MyArray[8]=9; MyArray[9]=10; alert(MyArray[7]); </script>; 第2步，运行程序，输出结果。 【例5.21】Date对象的使用。 第1步，在JavaScriptWebsite中添加HTML文件，命名5-21.HTML,设为起始页，添加代码： <HTML> <head> <Meta charset=“utf-8”/> <title>关于Date 对象的使用</title> </head> <script language=“javascript”> /* 本示例使用前面定义的月份名称数组。 第一条语句以”Day Month Date 00:00:00 Year”格式对Today 变量赋值。 */ var Today = new Date(); //获取今天的日期。 // 提取年，月，日。 thisYear = Today.getFullYear(); thisMonth = Today.getMonth(); thisDay = Today.getDate(); // 提取时，分，秒。 thisHour=Today.getHours(); thisMinutes=Today.getMinutes(); thisSeconds=Today.getSeconds();
//提取星期几 thisWeek=Today.getDay(); var x = new Array(“日”, “一”, “二”); x = x.concat(“三”,”四”, “五”, “六”); thisWeek=x[thisWeek];
nowDateTime=“现在是”+thisYear+”年”+thisMonth +”月”+thisDay+”日”; nowDateTime+=thisHour+”时”+thisMinutes+”分”+thisSeconds+”秒”; nowDateTime+=“星期”+thisWeek;
document.write(nowDateTime+”<br>“); //输出：现在是年月日时分秒
//计算两个日期相差的天数 var datestring1 = “November 1, 1997 10:15 AM”; var datestring2 = “December 1, 2007 10:15 AM”; var DayMilliseconds= 24*60*60*1000; //1天的毫秒数 var t1 = Date.parse(datestring1) ; //换算成自年月日到年月日的毫秒数 var t2 = Date.parse(datestring2) ; //换算成自年月日到年月日的毫秒数 s = “There are “ s += Math.round(Math.abs((t2-t1)/DayMilliseconds)) + “ days “ s += “between “ + datestring1 + “ and “ + datestring2 ; document.write(s); //输出：There are 3682 days between November 1, 1997 10:15 AM and December 1, 2007 10:15 AM </script> </hmtl> 第2步，运行程序，输出结果。 (7)互动环节，与学生一起总结分析Object、 Array、String、Math、 Number和 Date等对象特点，及其应用技巧。 (8)布置作业。 |
参考资源 | 教材第3章1~3节 |
作 业 | 1 简单介绍JavaScript技术。 2 比较网页中使用JavaScript的几种方法。 3 说明JavaScript 的”==“和”===“之间的区别。 4 使用JavaScript向Web页面输出99乘法表。 5 使用JavaScript在Web页面中屏蔽功能键Shift,Alt,Ctrl。 |
教学后记 |
|
课程教案（8）
第 8周 星期 第 节 年 月 日
授课章节 | 第5章 JavaScript编程技术 5.3 JavaScript ActiveX编程技术 5.3.1 FileSystemObject 控件 5.3.2 Excel.Application控件 5.3.3 Word.Application控件 |
教学目的 | 1了解FileSystemObject 控件。 2 熟悉和掌握Excel.Application控件和Word.Application控件。 |
教学重点 | 熟练掌握JavaScript编程。 |
教学难点 | 熟练掌握JavaScript编程。 |
教学方式 | 讲授 (ppt) |
课程设计 | （1）课程导入: 简要回顾JavaScript的语法、运算符、表达式、函数、语句、事件，Javascript Object、 Array、String、Math、 Number和 Date等。 （2）授课语言知识点。介绍FileSystemObject、Excel.Application和Word.Application控件。 （3）结合案例，分析JavaScript的语法、运算符、表达式、函数、语句、事件FileSystemObject、Excel.Application和Word.Application控件使用。 【例5.23】获取父文件夹名称、创建文件夹、删除文件夹、判断是否为根目录等操作： 第1步，在JavaScriptWebsite中添加HTML文件，命名5-23.HTML,设为起始页，添加代码： var fso, fldr, s = ““; // 创建FileSystemObject对象实例 fso = new ActiveXObject(“Scripting.FileSystemObject”); // 获取Drive 对象 fldr = fso.GetFolder(“c:\\”); // 显示父目录名称 alert(“Parent folder nameis: “ + fldr + “\n”); // 显示所在drive名称 alert(“Contained on drive “ + fldr.Drive + “\n”); // 判断是否为根目录 if (fldr.IsRootFolder) alert(“This is the root folder.”); else alert(“This folder isn't a root folder.”); alert(“\n\n”); // 创建新文件夹 fso.CreateFolder (“C:\\Bogus”); alert(“Created folder C:\\Bogus” + “\n”); // 显示文件夹基础名称，不包含路径名 alert(“Basename= “ + fso.GetBaseName(“c:\\bogus”) + “\n”); // 删除创建的文件夹 fso.DeleteFolder (“C:\\Bogus”); alert(“Deleted folder C:\\Bogus” + “\n”); 第2步，运行程序，输出结果。 【例5.24】利用ActiveXObject,数据导出到excel中。 第1步，在JavaScriptWebsite中添加HTML文件，命名5-23.HTML,设为起始页，添加代码： <!DOCTYPE HTML> <HTML xmlns=“http://www.w3.org/1999/xHTML”> <head> <script language=“javascript” type=“text/javascript”> function MakeExcel() { var i, j, n; try { var xls = new ActiveXObject(“Excel.Application”); } catch(e) { alert( “要打印该表，必须安装Excel电子表格软件，同时浏览器须使用”ActiveX 控件”，浏览器须允许执行控件。请点击”帮助”了解浏览器设置方法！”); return ““; } xls.visible =true; // 设置excel为可见 var xlBook = xls.Workbooks.Add; var xlsheet = xlBook.Worksheets(1); <!--合并--> xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,7)).mergecells=true; xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,7)).value=“发卡记录”; xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,3)).Interior.ColorIndex=5; // 设置底色为蓝色 xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,6)).Font.ColorIndex=4; // 设置字体色 // xlsheet.Rows(1). Interior .ColorIndex = 5 ;//设置底色为蓝色 设置背景色 Rows(1).Font.ColorIndex=4 <!--设置行高--> xlsheet.Rows(1).RowHeight = 25; <!--设置字体 ws.Range(ws.Cells(i0+1,j0), ws.Cells(i0+1,j1)). Font.Size = 13 --> xlsheet.Rows(1).Font.Size=14; <!--设置字体 设置选定区的字体 xlsheet.Range(xlsheet.Cells(i0,j0), ws.Cells(i0,j0)).Font.Name= “黑体” --> xlsheet.Rows(1).Font.Name=“黑体”; <!--设置列宽 xlsheet.Columns(2)=14;--> xlsheet.Columns(“A:D”).ColumnWidth =18; <!--设置显示字符而不是数字--> xlsheet.Columns(2).NumberForm atLocal=“@”; xlsheet.Columns(7).NumberForm atLocal=“@”; //设置单元格内容自动换行 range.WrapText = true ; //设置单元格内容水平对齐方式 range.HorizontalAlignment = Excel.XlHAlign.xlHAlignCenter;//设置单元格内容竖直堆砌方式 //range.VerticalAlignment=Excel.XlVAlign.xlVAlignCenter //range.WrapText = true; xlsheet.Rows(3).WrapText=true 自动换行 //设置标题栏 xlsheet.Cells(2, 1).Value = “卡号”; xlsheet.Cells(2, 2).Value = “密码”; xlsheet.Cells(2, 3).Value = “计费方式”; xlsheet.Cells(2, 4).Value = “有效天数”; xlsheet.Cells(2, 5).Value = “金额”; xlsheet.Cells(2, 6).Value = “所属服务项目”; xlsheet.Cells(2, 7).Value = “发卡时间”; var oTable = document.all['fors:data']; var rowNum = oTable.rows.length; for(i = 2; i <= rowNum; i++) { for (j = 1; j <= 7; j++) { //HTML table类容写到excel xlsheet.Cells(i + 1, j).Value = oTable.rows(i - 1).cells(j - 1).innerHTML; } } <!-- xlsheet.Range(xls.Cells(i+4,2),xls.Cells(rowNum,4)).Merge; --> //xlsheet.Range(xlsheet.Cells(i, 4), xlsheet.Cells(i-1, 6)).BorderAround , 4 // for(mn=1,mn<=6;mn++) . xlsheet.Range(xlsheet.Cells(1, mn), xlsheet.Cells(i1, j)).Columns.AutoFit; xlsheet.Columns.AutoFit; xlsheet.Range( xlsheet.Cells(1,1),xlsheet.Cells(rowNum+1,7)).HorizontalAlignment =-4108;//居中 xlsheet.Range( xlsheet.Cells(1,1),xlsheet.Cells(1,7)).VerticalAlignment =-4108; xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Font.Size=10; xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Borders(3).Weight = 2; //设置左边距 xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Borders(4).Weight = 2; //设置右边距 xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Borders(1).Weight = 2; //设置顶边距 xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Borders(2).Weight = 2; //设置底边距 xls.UserControl = true; //很重要,不能省略,不然会出问题 意思是excel交由用户控制 var fileDialog = xls.FileDialog(2); // 1 打开，2 保存 fileDialog.show(); var savePath = fileDialog.SelectedItems(1); //alert(savePath); var ss = xlsheet.SaveAs(savePath); xls. Quit(); } </script> <title>ziyuanweihu</title> </head> <body> <form id=“fors” method=“post” enctype=“application/x-www-form -urlencoded”> <table id=“fors:top” border=“0” cellpadding=“0” cellspacing=“0” width=“100%”> <tbody> <tr> <td class=“left”><img src=“images/jiao1.gif” alt=““ /></td> <td class=“topMiddle”></td> <td class=“right”><img src=“images/jiao2.gif” alt=““ /></td> </tr> </tbody> </table> <table border=“0” cellpadding=“0” cellspacing=“0” width=“100%”> <tbody> <tr> <td class=“middleLeft”></td> <td class=“btstyle”> <table id=“fors:sort” border=“0” cellpadding=“0” cellspacing=“0” style=“valign:center” width=“100%”> <tbody> <tr> <td class=“btstyle”> <input type=“button” name=“fors:_id7” value=“生成excel文件” οnclick=“MakeExcel()” /> </td> </tr> </tbody> </table>
<table id=“fors:data” border=“1” cellpadding=“0” cellspacing=“1” width=“100%”> <thead> <tr> <th scope=“col”><span id=“fors:data:headerText1”>卡号</span></th> <th scope=“col”><span id=“fors:data:headerText2”>密码</span></th> <th scope=“col”><span id=“fors:data:headerText3”>计费方式</span></th> <th scope=“col”><span id=“fors:data:headerText4”>有效天数</span></th> <th scope=“col”>金额</th> <th scope=“col”><span id=“fors:data:headerText6”>所属服务项目</span></th> <th scope=“col”><span id=“fors:data:headerText7”>发卡时间</span></th> </tr> </thead> <tbody> <tr> <td>h000010010</td> <td>543860</td> <td>计点</td> <td></td> <td>2.0</td> <td>测试项目</td> <td>2017-06-23 10:14:40.843</td> </tr> <tr> <td>h000010011</td> <td>683352</td> <td>计点</td> <td></td> <td>2.0</td> <td>测试项目</td> <td>2017-06-23 10:14:40.843</td> </tr> <tr> <td>h000010012</td> <td>433215</td> <td>计点</td> <td></td> <td>2.0</td> <td>测试项目</td> <td>2017-06-23 10:14:40.843</td> </tr> <tr> <td>h000010013</td> <td>393899</td> <td>计点</td> <td></td> <td>2017-06-23 10:14:40.843</td> </tr> <tr> <td>测试项目</td> <td>h000010014</td> <td>031736</td> <td>计点</td> <td></td> <td>2.0</td> <td>测试项目</td> <td>2017-06-23 10:14:40.843</td> </tr> <tr> <td>h000010015</td> <td>188600</td> <td>计点</td> <td></td> <td>2.0</td> <td>测试项目</td> <td>2017-06-23 10:14:40.843</td> </tr> <tr> <td>h000010016</td> <td>363407</td> <td>计点</td> <td> </td> <td>2.0</td> <d>测试项目</td> <d>2017-06-23 10:14:40.843</td> </tr> <tr> <td>h000010017</td> <td>175315</td> <td>计点</td> <td></td> <td>2.0</td> <td>测试项目</td> <td>2017-06-23 10:14:40.843</td> </tr> <tr> <td>h000010018</td> <td>354437</td> <td>计点</td> <td></td> <td>2.0</td> <td>测试项目</td> <td>2017-06-23 10:14:40.843</td> </tr> <tr> <td>h000010019</td> <td>234750</td> <td>计点</td> <td></td> <td>2.0</td> <td>测试项目</td> <td>2017-06-23 10:14:40.843</td> </tr> </tbody> </table> </td> <td class=“middleRight”></td> </tr> </tbody> </table> <table id=“fors:bottom” border=“0” cellpadding=“0” cellspacing=“0” width=“100%”> <tbody> <tr> <td class=“left”> <img src=“images/jiao3.gif” alt=““ /> </td> <td class=“bottomMiddle”> </td> <td class=“right”> <img src=“images/jiao4.gif” alt=““ /></td> </tr> </tbody> </table> <input type=“hidden” name=“fors” value=“fors” /> </form > </body> </HTML> 第2步，运行程序。 【例5.26】Javascript 创建word文档。 第1步，在JavaScriptWebsite中添加HTML文件，命名5-26.HTML,设为起始页，添加代码 <!DOCTYPEHTML> <HTMLxmlns=“http://www.w3.org/1999/xHTML”> <head> <Metahttp-equiv=“Content-Type”content=“text/HTML; charset=utf-8”/> <title> Javascript 创建word文档</title> <script> function wordcontorl() { var WordApp = new ActiveXObject(“Word.Application”); var wdCharacter = 1; var wdOrientLandscape = 1; WordApp.Application.Visible = true; var myDoc = WordApp.Documents.Add(); WordApp.ActiveDocument.PageSetup.Orientation = wdOrientLandscape WordApp.Selection.ParagraphForm at.Alignment = 1 //1居中对齐,0为居右 WordApp.Selection.Font.Bold = true WordApp.Selection.Font.Size = 20 WordApp.Selection.TypeText(“我的标题”); WordApp.Selection.MoveRight(wdCharacter); //光标右移字符 WordApp.Selection.TypeParagraph();//光标右移字符 WordApp.Selection.Font.Size = 12 WordApp.Selection.TypeText(“副标题”); //分行插入日期 WordApp.Selection.TypeParagraph();//插入段落 var myTable = myDoc.Tables.Add(WordApp.Selection.Range, 8, 7) //8行7列的表格 //myTable.Style=“网格型” var aa = “我的列标题” var TableRange; //以下为给表格中的单元格赋值 for (i = 0; i < 7; i++) { with (myTable.Cell(1, i + 1).Range) { font.Size = 12; InsertAfter(aa); ColumnWidth = 4 } } for (i = 0; i < 7; i++) { for (n = 0; n < 7 ; n++) { with (myTable.Cell(i + 2, n + 1).Range) { font.Size = 12; InsertAfter(“bbbb”); } } } row_count = 0; col_count = 0 myDoc.Protect(1) } wordcontorl() </script> </head> <body></body> </HTML> 第2步，运行程序。 (4) 互动环节。和学生一起总结Javascript ActiveX编程技术的主要步骤。 (5)布置作业。 |
参考资源 | 教材第5章5.3节 |
作 业 | Javascript代码读取C:\XXX.xls文件，显示在Web页面上。 |
教学后记 |
|
课程教案（9）
第 9周 星期 第 节 年 月 日
授课章节 | 第6章 HTML DOM对象编程 6.1 HTML文档对象模型 6.2 浏览器的主要对象 6.2.1 Window对象 6.2.2 Navigator对象 6.2.3 Location 对象 6.2.4 History对象 6.2.5 Event 对象 6.2.6 Document对象 6.3 基于DOM的HTML元素操作 6.3.1 访问根元素 6.3.2 访问指定Id属性的元素 6.3.3 访问节点属性 |
教学目的 | 1 了解HTML文档对象模型； 2 熟悉基于DOM的HTML元素操作的工作原理； 3 掌握Window、Navigator、Location、History、Event、Document对象。 |
教学重点 | 掌握Window、Navigator、Location、History、Event、Document对象。 |
教学难点 | 理解和利用DOM访问和操作的HTML页面元素。 |
教学方式 | 讲授 (ppt) |
课程设计 | （1）课程导入: 通过演示几个DOM程序动态访问和更新HTML文档内容、结构和样式，学生有初步认识。 （2）讲解DOM发展历史和浏览器的主要对象。介绍HTML文档对象模型(DOM，Document Object Model)的发展历史，以及:Window对象、Document对象、Location对象、Navigator对象、History对象的属性及其应用。 （3）结合案例，分析Window对象、Document对象、Location对象、Navigator对象、History对象的使用方法。 【例6.2】window.open 属性应用。 第1步，为项目DomWebsite添加一个HTML新项，命名为Ex6-2.HTML，设置为起始页，添加代码： <HTML> <body> <script type=“text/javascript”> myWindow=window.open('','myName','width=200,height=100') myWindow.document.write(“This is 'myWindow'“) myWindow.focus(); myWindow.opener.document.write(“this is the parent window”) </script> </body> </HTML> 第2步，运行程序。 【例6.7】关于浏览器的相关信息。 第1步，为项目DomWebsite添加一个HTML新项，命名为Ex6-7.HTML，设置为起始页，添加代码： <!DOCTYPE HTML> <HTML xmlns=“http://www.w3.org/1999/xHTML”> <head> <Meta http-equiv=“Content-Type” content=“text/HTML; charset=utf-8”/> <title>about navigator</title> <script type=“text/javascript”> var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); var codeName=navigator.appCodeName; var cpu=navigator.cpuClass; document.write(“浏览器名称：”+ browser); document.write(“<br />“); document.write(“浏览器版本：”+ version); document.write(“<br />“); document.write(“浏览器代码名称：”+ codeName); document.write(“<br />“); document.write(“浏览器系统使用的CPU类型：” + cpu); document.write(“<br />“); document.write(“navigator.userAgent 的值是 “ + navigator.userAgent); document.write(“<br />“); if (navigator.taintEnabled()) document.write(“浏览器启用了污点数据”) else document.write(“浏览器没有启用污点数据”) document.write(“<br />“); if (navigator.javaEnabled()) document.write(“启用了Java”) else document.write(“没有启用Java”) document.write(“<br />“); if(navigator.plugins.length>0) { for(var i=0;i<navigator.plugins.length;i++) { document.write(“浏览器中有插件” + navigator.plugins[i].name); document.write(“<br />“); } } </script> </head> </HTML> 第2步，运行程序。 【例6.11】检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。在状态栏上显示鼠标的当前位置。 第1步，为项目DomWebsite添加一个HTML新项，命名为Ex6-11.HTML，设置为起始页，添加代码： <HTML> <HEAD> <TITLE>Cancels Links</TITLE> <SCRIPT LANGUAGE=“JScript”> function cancelLink() { if(window.event.srcElement.tagName== “A” && window.event.shiftKey) window.event.returnValue = false; } </HEAD> </SCRIPT> <BODY οnclick=“cancelLink()” οnmοusemοve=“window.status = 'X=' + window.event.x + ' Y=' + window.event.y”> <a href=“http://www.baidu.com”>我是超级链接</a> </body> </HTML> 第2步，运行程序。 【例6.16】Cookie的读写应用。 第1步，为项目DomWebsite添加一个HTML新项，命名为Ex6-16.HTML，设置为起始页，添加代码： <HTML> <HEAD> <TITLE>First Document cookie</TITLE> <script type=“text/javascript”> function getCookie(sName) //从cookie中获取参数name的值 { // Cookie中的参数是以分号相隔的，例如”name=20;sex=male;color=red;” var aCookie = document.cookie.split(“; “); for (var i=0; i < aCookie.length; i++) { // 对存放在数组aCookie 中的每一个”参数名=参数值”进行循环，找到要获取参数值的参数名 var aCrumb = aCookie[i].split(“=“); if (sName== aCrumb[0]) return unescape(aCrumb[1]); //如果找到则返回参数值 } return null; // Cookie中请求的参数名不存在时返回null }
// name—参数, value—参数值, expires—失效日期, //功能：蒋参数name的值value和失效日期expires写入一个cookie中 function setCookie(name, value, expires){ var expStr = ( (expires == null) ? ““ : (“; expires=“ + expires) ); window.document.cookie = name+ “=“ + escape(value) + expStr; } </script> </HEAD> <BODY bgcolor=#FFFFCC> <Input id=“yourName” type =“text” value = “Tim”> <Input type =“button” value = “姓名保存到cookie” οnclick=“setCookie('name',yourName.value,'Sun May 27 22:04:25 UTC+0800 2008');”> <Input id=“GetName” type =“text” value = ““> <Input type =“button” value = “从cookie中得到姓名” οnclick=“GetName.value=getCookie('name');”> </BODY> </HTML> 第2步，运行程序。 （4）互动环节。与学生一起总结Window对象、Document对象、Location对象、Navigator对象、History对象的特点和使用技巧。 (5)讲授基于DOM的HTML元素操作，包括访问根元素、访问指定Id属性的元素、访问节点属性。 （6）结合案例分析基于DOM的HTML元素操作。 【例6.18】文档的根节点和body节点访问。 第1步，为项目DomWebsite添加一个HTML新项，命名为Ex6-18.HTML，设置为起始页，添加代码： <HTML xmlns=“http://www.w3.org/1999/xHTML”> <head> <title>about the root node</title> <script type=“text/javascript”> function shownode() { // 根节点 var oHTML = document.documentElement; alert(“文档根节点的名称：”+ oHTML.nodeName); alert(“文档根节点的长度：”+ oHTML.childNodes.length); // body节点 var obody = document.body; alert(“body是子节点的名称：”+ obody.nodeName); alert(“body是子节点的长度：”+ obody.childNodes.length); // head节点 var ohead = oHTML.childNodes[0]; alert(“head子节点的下一个兄弟节点名称：” + ohead.nextSibling.nodeName); } </script> </head> <body> <div id=“div1”>第一个</div> <div id=“div2”>第二个</div> <div>第三个<img src=“images/jiao.gif” /> </div> <div> 第四个<input id=“Button1” type=“button” value=“显示节点” οnclick=“shownode();”/></div> </body> </HTML> 第2步，运行程序。 【例6.19】动态改变浏览器背景颜色和浏览器窗口标题。 第1步，为项目DomWebsite添加一个HTML新项，命名为Ex6-19.HTML，设置为起始页，添加代码： <HTML> <head><title> </title> </head> <body> <input id=“myColor” type=“text” value=“red” > <input id=“mybut1” type=“button” value=“改变页面背景颜色”> <input id=“myTitle” type=“text” value=“新的窗口标题” > <input id=“mybut2” type=“button” value=“改变浏览器窗口标题”> <script language=“javascript”> window.mybut1.οnmοusedοwn= function() { window.document.bgColor = window.myColor.value ; } window.mybut2.οnmοusedοwn= function() { window.document.title=window.myTitle.value; } </script> </body> </HTML> 第2步，运行程序。 【例6.21】设置段落p的 innerHTML(HTML内容)。 第1步，为项目DomWebsite添加一个HTML新项，命名为Ex6-21.HTML，设置为起始页，添加代码： <HTML> <head> <script type=“text/javascript”> function setInnerHTML(){ document.getElementById(“test”).innerHTML = “<strong>设置标签的HTML内容</strong>“; } </script> </head> <body> <p id=“test”> <font color=“#000”>嗨豆壳 www.hi-docs.com</font> </p> <input type=“button” οnclick=“setInnerHTML()” value=“点击” /> </body> </HTML> 第2步，运行程序 (5)布置作业。 |
参考资源 | 教材第6章 |
作 业 | 1 什么是HTML文档对象模型，具有何功能？ 2 对比几种自动刷新页面方法。 3 使用DOM实现判断点击了鼠标的左键、右键、还是中键。 |
教学后记 |
|
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
