《Web系统与技术》 教案第2部分

课 程 教 案

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节

作    业

简单介绍JavaScript技术。

比较网页中使用JavaScript的几种方法。

说明JavaScript 的”==“和”===“之间的区别。

使用JavaScript向Web页面输出99乘法表。

使用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.2window.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章

作    业

什么是HTML文档对象模型,具有何功能?

对比几种自动刷新页面方法。

使用DOM实现判断点击了鼠标的左键、右键、还是中键。

教学后记

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
国家级实验教学示范中心联席会计算机学科规划教材 教育部高等学校计算机类专业教学指导委员会推荐教材 面向“工程教育认证”计算机系列课程规划教材 谢从华,高蕴梅,黄晓华.Web系统技术[M],清华大学出版社,2018年6月 第1章 Web系统技术的基础知识... 1 1.1 Internet介绍... 1 1.1.1 Internet含义... 1 1.1.2 TCP/IP协议... 1 1.1.3 域名... 2 1.1.4 URL. 3 1.1.5 MIME. 3 1.1.6 HTTP协议... 4 1.2 Web浏览器... 5 1.3 Web服务器... 5 1.3.1 Web服务器... 5 1.3.2 Apache服务器... 5 1.3.3 IIS服务器... 6 1.4系统的主要技术概述... 7 1.4.1 HTML 概述... 7 1.4.2 JavaScript概述... 8 1.4.3 XML概述... 8 1.4.4 PHP概述... 8 1.4.5 Ajax概述... 9 1.5习题... 9 第2章 HTML网页设计基础... 10 2.1 HTML 网页... 10 2.1.1 简介... 10 2.1.2 HTML文件结构... 10 2.1.3 文件编辑器... 12 2.2 HTML基本标签... 13 2.2.1 元信息标签<Meta>. 13 2.2.2 文本标签... 18 2.2.3 列表标签... 20 2.2.4 表格标签... 24 2.2.5 超级链接标签... 27 2.2.6 图像标签... 29 2.2.7 背景声音标签... 29 2.2.8 视频标签... 29 2.3 网页表单和控件... 30 2.3.1 表单标签<form>. 30 2.3.2 表单的控件... 31 2.3.3 获取表单数据... 37 2.4 框架标签... 39 2.4.1 帧标记<frame>. 39 2.4.2 IFRAME标记... 40 2.5 习题... 40 第3章 CSS样式设计... 43 3.1 CSS 简介... 43 3.2 CSS 语法与使用... 43 3.2.1 CSS定义语法... 43 3.2.2 CSS的使用... 44 3.2.3 选择符... 48 3.3 CSS样式设计... 51 3.3.1字体样式... 51 3.3.2文本样式... 53 3.3.3颜色样式... 56 3.3.4 列表样式... 57 3.3.5表格样式... 60 3.4.6 鼠标样式... 64 3.4.7 滤镜样式... 67 3.4 CSS页面布局... 78 3.4.1 文本对齐... 78 3.4.2盒子模型... 81 3.4.3文字环绕float样式... 85 3.4.4 元素定位... 86 3.6 习题... 88 第4章 网页数据的有效性验证... 92 4.1验证控件... 92 4.1.1 验证控件分类... 92 4.1.2 ASP页面验证控件... 92 4.2 正则表达式... 102 4.2.1常用的元字符... 102 4.2.2 复杂的正则表达式... 102 4.3 正则表达式应用... 104 4.3.1 RegExp对象... 104 4.3.2 String 对象的正则表达式方法... 106 4.4 常见的正则表达式... 107 4.5 习题... 108 第5章 JavaScript编程技术... 109 5.1 JavaScript编程基础... 109 5.1.1 JavaScript简介... 109 5.1.2 Javascript的使用方法... 109 5.1.3 语法规则... 111 5.1.4 运算符和表达式... 112 5.1.5 函数... 117 5.1.6流程控制... 121 5.1.7 事件处理... 128 5.2 JavaScript对象编程... 130 5.2.1 Object 类型... 131 5.2.2 Array对象... 131 5.2.3 String对象... 133 5.2.4 Math对象... 138 5.2.5 Number对象... 142 5.2.6 Data对象... 143 5.3 JavaScript ActiveX编程技术... 145 5.3.1 FileSystemO
### 回答1: 《分布式系统概念与设计》是一本著名的计算机科学教材,主要讲解了分布式系统的基本概念和设计原理。第五版的内容较之前版本有所更新,更贴近当今的分布式系统技术发展趋势。 分布式系统是由多个独立计算机节点构成的系统,节点之间通过网络进行通信和协作。与传统的集中式系统相比,分布式系统具有更好的可扩展性、容错性和灵活性。本书以理论与实践相结合的方式,深入介绍了分布式系统设计的思想与方法。 第五版的内容涵盖了分布式计算基础、分布式一致性、分布式对象和分布式文件系统等方面。其中,作者对一致性问题进行了详细的剖析,介绍了各种一致性模型和算法,如Paxos算法、Raft算法等。此外,本书还介绍了分布式系统中的并发控制、故障恢复、安全和性能优化等关键技术。 与之前版本相比,第五版在内容上更加全面且前沿。对于分布式系统的设计和实现有着重要的指导作用。此外,本书还提供了大量的案例研究和实践练习,帮助读者深入理解和掌握分布式系统的设计方法和技术。 通过阅读《分布式系统概念与设计》第五版,读者可以全面了解分布式系统的基本概念和关键技术,掌握分布式系统的设计原理和实践经验。它适用于计算机科学与技术、软件工程等相关专业的学生和从业人员,也可以作为分布式系统领域的参考书籍。 总之,这本书是一本值得深入学习的经典教材,读者通过学习可以加深对分布式系统的理解,并在实践中应用于解决实际问题。 ### 回答2: 《分布式系统概念与设计》是一本经典的分布式系统教材,第五版发行于2011年。本书作者是George Coulouris、Jean Dollimore和Tim Kindberg。 《分布式系统概念与设计》主要介绍了分布式系统的概念、原理、设计和实现等方面的知识。该书首先介绍了分布式系统的基本概念,如进程通信、一致性、容错和可靠性等,为后续内容打下基础。 接着,书中详细讲解了常见的分布式系统模型与技术,例如客户端/服务器体系结构、对等体架构、消息传递和远程过程调用等。这些模型和技术都是分布式系统开发中常用的工具和方法。 在设计部分,书中介绍了分布式系统的设计原则、模式和方法。作者结合了丰富的实例,从不同角度讲解了如何设计出高效可靠的分布式系统。此外,分布式系统的性能和安全问题也被充分讨论。 最后,书中还涵盖了一些新兴的研究领域,如面向服务的体系结构、Web服务和云计算等,这些技术在当今的分布式系统中越来越重要。 《分布式系统概念与设计》第五版具有全面、系统和深入的特点,适合作为大学本科和研究生分布式系统相关课程教材。该书可以帮助读者全面了解分布式系统的基本原理和设计思想,并且有助于读者在实际开发中应用这些知识。 ### 回答3: 《分布式系统概念与设计》是一本由美国加州大学圣塔巴巴拉分校教授George Coulouris等人合著的经典教材,目前最新版本是第五版。 该教材主要介绍了分布式系统的概念和设计原理。分布式系统是由多台计算机组成的网络系统,其运行在不同位置的计算机上,相互通过网络进行通信和协作。 第五版的《分布式系统概念与设计》全面介绍了分布式系统的架构、通信、一致性、容错、安全等方面的知识。其中包括了分布式计算模型、分布式对象和组件、分布式操作系统、分布式文件系统、分布式数据库系统等内容。 这本教材的设计目标是帮助读者深入了解分布式系统的设计和工作原理,提供相关技术和概念的全面解释,同时提供实际案例和示例代码,帮助读者掌握实际应用和开发分布式系统所需的工具和技术。 在当前云计算和大数据时代,分布式系统已成为一种重要的计算模型和架构,广泛应用于各个领域。学习和掌握分布式系统的概念与设计原理,对于系统架构师、软件工程师、研发人员等具有重要的意义。 通过阅读《分布式系统概念与设计》第五版,读者可以深入了解分布式系统的工作原理和技术,掌握分布式系统的设计思想和开发方法,提升自己在分布式系统领域的技术能力和专业水平。 总之,《分布式系统概念与设计》第五版是一本重要且有价值的分布式系统教材,它为读者提供了深入了解和应用分布式系统的重要资料和指导。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值