Web开发技术试题参考答案(A)-评分标准(计算机及软件12级)

吉林建筑大学2015/2016学年一学期期末考试参考答案(A卷)科目：Web开发技术 考试班级:计算机12、软件12 考试方式：半开卷 命题人签字： 教研室主任签字： 教学院长签字：一、 简答 (每题4分，计24分)1. 客户端技术主要包括哪几方面？ 【答】【HTML、CSS、脚本语言(如Javascript)、XML】2. 解读如下URL：/newjliae/stylenew111.htm【答】【其中http是超文本传输协议；是服务器名；newjliae/是文件夹；stylenew111.htm是文件名。】3. 万维网Web架构的三处技术精华是什么？【答】【用超文本技术（HTML）实现信息与信息的连接；用统一资源定位技术（URI）实现全球信息的精确定位；用新的应用层协议（HTTP）实现分布式的信息共享。】4. 这是XML文档的序言部分，请解释其中各部分含义？【答】【声明（如果有，就必须置于第一行），版本、编码、是否需要外部文件（no表示需要）】【文档类型声明，“客户列表”是根元素；cml.dtd是外部文档的URL】【处理指令，“xml-stylesheet type=text/xsl”样式表类型；href=cml.xsl?，外部样式表文档URL】5. 简述HTML和XML的异同？【答】【同源SGML；同为置标语言；HTML是实例，不可扩展，XML可自扩展；HTML作用是表现，XML主要是数据；XML最终以HTML表现；】6. CSS中，代码“#allmargin: 0 auto; ”，起什么作用？其中“all”是某个DIV的id。【ID选择符；双属性（上下和左右）；上下间距设为0，左右间距自动，将DIV水平居中，】二、 读程序回答问题之一(计25分)1. (每空2分，计4分) （1） this.value 代表哪个对象的值？【this，当前对象，指名为“pwd2”的“input”】（2） this.form.pwd1.value 如何解释？【当前的“form”的名为“pwd1”的对象的值】2. (每空3分，计3分)如下CSS代码，其中“logoLink”是一个DIV的ID，请解读最后3行？【/*绝对定位，结合下面2条，固定相对于浏览器的位置*/】#logoLink display:block; width:320px; height:81px; background:url(./img/7-2.gif) no-repeat; position:absolute; /* */ top:20px; left:0; 3. (每空3分，计9分) function getInnertext() alert(document.getElementById(td1).innerText); function setInnertext() str1=document.getElementById(td1).innerText; document.getElementById(td11).innerText=str1; 第一格内容第二格内容 FirstnameLastname PeterGriffin inerText内容（1）第一个按钮方法点击后，执行完的结果是？【获取上面表格第一格（id=td1）内容并通过Alert显示】（2）第二个按钮方法执行完的结果是？【获取上面表格第一格（id=td1）的内容赋值给“str1”，并将内容写入第二个表格第一格（id=td11），内覆盖原内容】（3）超链接的作用是？【执行一段JavaScript代码，相当于按钮；弹出警示框，其内容是第二个表格第一行的所有文本内容，即Firstname Lastname或第一格内容Lastname】4. (每空3分，计9分) Div+CSS的网页布局（IE6不支持，请在火狐等演示） * margin:0px;padding:0px; #top,#nav,#mid,#footerwidth:500px;margin:0px auto; #topheight:80px; background-color:#DFDFDF; #navheight:25px; background-color:#FFFFCC; #midheight:300px; #leftwidth:98px;height:298px; border:1px solid #999; float:left; background-color:#CCCCCC; #rightheight:298px; background-color:#CCCCCC; .contentwidth:190px;height:198px; background-color:#FF0000; border:1px solid #999; float:left; #abackground-color:#f60; float:left; #bbackground-color:#FFCC99; float:right; #cwidth:398px;height:98px; background-color:#FFCCCC; #footerheight:80px; background-color:#E4E4E4; 顶部广告区 导航区 文章列表区 内容A 内容B 内容C 底部版权区（1） 本段代码实现效果如图，请解释一下，代码中哪部分？如何实现了“内容A”和“内容B”的这种并排显示的效果？【#a float:left;和#b float:right;；浮动属性消除了div的块状属性，可以并排了；在rightdiv中，分别向左向右浮动；或，也可答前一个向左浮动，下一个流到其并排】（2） 这种方法实现排版的好处是什么？【div布局，float属性可以实现并排等；div并排对称均匀平行布局；或，若上问答第二种，则答，DIV并排的布局效果，而且这样做可以保证没有缝隙！】（3） 这句“#left border:1px solid #999; ”代码如何解释？【3属性，线宽、线型、颜色】三、 读程序回答问题之二(计21分)1. （每空3分 计9分）解读下面xsl文档代码，在【】里对对应的代码行加注释 使用xsl:node-name输出标记名称 !-【应用模板函数，相当于调用子函数，在程序中寻找匹配调用。本题对应“ “ 】- 2. （每空4分，计8分）代码如下，运行，显示左图；当鼠标移到“贡献度”标签上时，显示右图， ，请详细解读代码，回答（1）找出哪些代码实现了这种“显示隐藏”效果？【第一个(/显示tbody上面)循环遍历表格“id=labeltable”中所有单元，即表格中各个单元格“td”；将其类名“.className”即“td”属性“class”的值都重新赋值为label-normal，也就是都统一了样式类为正常那个；循环后面的“labeltable.cellsn.className=label-select;”将实参传递过来的那个“n”对应的“td”的属性“class”的值赋值为label-select，即鼠标悬停的对象的样式类被改变】 （2）如何实现的？【在“id=labeltable”表格中，鼠标悬停在各个单元格文字上时，驱动不同参数的selCard(n)函数，结合前一个空的问题，先通过for循环将所有单元格“td”样式类都设为label-normal，再将鼠标悬停对应的那个“n”所对应的单元格“td”样式类设为label-select。当然，这都是通过“id=labeltable”表格对象下的cells集合中的对象的“.className”属性的属性值的改变实现的 】 交互式标签式表格 .label-normal background-image:url(images/labelbgselect.gif);cursor:hand;这上面这些，都是实现表头样式变化的（标签选中）！font-size:13px;color:#000000;text-align:center .label-select background-image:url(images/labelbgnormal.gif);cursor:hand;font-size:13px;第二个(/显示tbody下面)循环2行语句，以及循环后面的” table1.tBodiesn.style.display=block;”color:#FF0000;font-weight:bold;text-align:center function selCard(n) for(i=0;ilabeltable.cells.length;i+)table1（显示隐藏的那部分）有2个”tbody”，循环使所有2个的 .style.display=none（不显示）；再将实参”n”（所选择的那个，值为0、1、2）对应的样式的display属性赋值为block（显示）； labeltable.cellsi.className=label-normal; labeltable.cellsn.className=label-select; /显示tbodyfor(i=0;itable1.tBodies.length;i+) table1.tBodiesi.style.display=none; table1.tBodiesn.style.display=block; 排行榜 贡献度 其他 教育部“十二五”本科教学工程 全校核心通识课程建设项目公布 GSL5.0系统上线预告 GSL过程管理问题答疑 3. (4分)下面是一个内部DTD的XML文档，请解释其中“!ENTITY”及用法【实体，实际上起一种类似“宏”的作用，一些常用的或者不便于直接书写的文字或数据，可以用一个标识定义下来，在数据中可以直接引用，这就是实体。实体的引用通过“&”来引用，末尾加“;”。】!DOCTYPE messagejane,&hi;,&ans; 四、 编程题与计算(计14分)1. (7分)交换图像。同级目录下有文件夹“images”，里面有图片“tu.jpg”、“tu1.jpg”和“tu2.jpg”。实现，表格居中，2列，左侧2个格，右侧1个格，右侧格内原有图片“tu.jpg”，当鼠标在图片上时，图片变为“tu1.jpg”，当鼠标离开时，图片变为“tu2.jpg”。【答】【function over()document.aaa.src=images/tu1.JPG function out()document.aaa.src=images/tu2.JPG“” 】2. (7分)设计一个表单，简单前台验证。1个文本框，其中输入邮件地址，若输入的地址中不含“”，当输入结束离开文本框时，弹出警示框，说，“您的E-mail地址不合法，请重新输入！”若包含“”，则弹出警示框“验证成功！”【答】【 function CheckMail()表单（文本框），2分；事件，2分（其他事件1分）；取得输入字符串，2分；判断语句，2分；”判断，2分(其他正则表达式最多1分)；alert，1+1分；最多7+5分！var str=document.getElementById(mail).value; var n=str.indexOf(); if(n=-1) alert(您的E-mail地址不合法，请重新输入);return false; alert(验证成功！);邮箱校验 】五、 编程题与计算(计16分)3. (8分)设计一个课堂随机提问的页面：提示输入班级人数，一个文本框可输入人数；一个显示“随机提问”的按钮，点击按钮，弹出警示框，其上显示“请XX号同学回答问题！”，其中“XX”为随机生成的，范围在前面文本框中输入数字范围内的数字。【答】【function askStu()var x=do