《linux从入门到精通》实验指导第三讲：文件及目录操作

Size: px

Start display at page:

Download "《linux从入门到精通》实验指导第三讲：文件及目录操作"

从郑
5 years ago
Views:

1 Web 交互开发实验教学指导实验二 :JavaScript 编程应用一实验目的 (5 分 ) 1 掌握 JavaScript 内置对象的使用 ; 2 掌握 JavaScript 事件的使用 ; 3 掌握 JavaScript 图像处理的方法 ; 4 理解 JavaScript 编程的思路 ; 5 掌握 JavaScript 程序执行的过程二实验环境 (5 分 ) 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境, 并且使用固定 IP 地址三实验要求 (5 分 ) 1 完成计时器的设计; 2 完成列表的相关操作; 3 完成注册表单; 4 完成图片验证码的实现; 5 完成下拉菜单的编写四实验原理 (5 分 ) 1 Window 对象的使用 ; 2 DOM 编程原理 ; 3 JavaScript 事件机制 ; 五实验步骤 (40 分 ) 1 计时器 (1) 计时器的功能 : 单击开始计时按钮后启动计时器, 输入框会从 0 开始计时 ; 单击暂停计时后可以暂停计时代码如下 : <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script language="javascript"> var flag=0; var timeid; function beg(){ var i=form1.num.value; i++; form1.num.value=i; timeid=settimeout("beg()",1000); 本讲共计 6 页当前第 1 页

2 function sta(){ if(flag==0){ beg(); flag=1; function pau(){ cleartimeout(timeid); flag=0; </script> <form id="form1" name="form1" method="post" action=""> <input type="text" name="num" size="1" value="0" /> <input type="button" name="start" value=" 开始计时 " onclick="sta();" /> <input type="button" name="pause" value=" 暂停计时 " onclick="pau();" /> </form> (2) 请完成以下任务 : 任务一 : 代码中 settimeout 方法和 cleartimeout 方法的作用是什么?(5 分 ) 任务二 : 代码中变量 flag 的作用是什么?(2 分 ) 任务三 :window 对象的属性 width height 与 availwidth availheight 分别表示什么含义 (3 分 ) 请将上述任务的操作方法, 填写到实验报告册中 2 列表操作 (1) 列表操作代码 2-2 如下 : <!DOCTYPE html> <html> <head> <title>node List</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="page"> <h1 id="header">list</h1> <h2>buy groceries</h2> <ul> <li id="one"><em>fresh</em> figs</li> 本讲共计 6 页当前第 2 页

3 <li id="two">pine nuts</li> <li id="three">honey</li> <li id="four">balsamic vinegar</li> </ul> <input type="button" value=" 添加 " > <input type="button" value=" 删除 "> <input type="button" value=" 添加样式 "> </div> </body> </html> (2) 请完成下面的任务 : 任务一 : 编写代码, 当单击添加时为上面列表添加一项 quinoa (2 分 ) 任务二 : 当点击删除时, 删除列表中的第一项 (3 分 ) 任务三 : 定义样式, 类名为 hot, 样式为红色字体大小为 16 (2 分 ) 任务四 : 当点击添加样式按钮时, 将样式添加到最后一项 (3 分 ) 请将上述任务的操作方法, 填写到实验报告册中 3 注册表单 (1) 代码 2-3 <!DOCTYPE html> <html> <head> <title>event Listener and Event Object</title> </head> <body> <div id="page"> <h1>list King</h1> <h2>new Account</h2> <form method="post" action=" <label for="username">create a username: </label> <input type="text" id="username" /><div id="feedback"></div> <label for="password">create a password: </label> <input type="password" id="password" /><div id="feedback"></div> <input type="submit" value="sign up" /> </form> </div> <script> function checklength(e, minlength) { var el, elmsg; 本讲共计 6 页当前第 3 页

4 if (!e) { e = window.event; el = e.target e.srcelement; elmsg = el.nextsibling; if (el.value.length < minlength) { elmsg.innerhtml = 'Username must be ' + minlength + ' characters or more'; else { elmsg.innerhtml = ''; var elusername = document.getelementbyid('username'); if (elusername.addeventlistener) { elusername.addeventlistener('blur', function(e) { checklength(e, 5);, false); else { elusername.attachevent('onblur', function(e) { checklength(e, 5); ); </script> </body> </html> (2) 完成下述任务任务一 : 上述代码实现的功能是什么?(2 分 ) 任务二 : 代码 el = e.target e.srcelement 是什么意思?(3 分 ) 任务三 : 代码 elmsg = el.nextsibling 是什么意思?(2 分 ) 任务四 :JavaScript 事件流的有几种? 分别是什么?(3 分 ) 请将上述实验任务的实验结果, 填写到实验报告册中 4 图片验证码的实现 (1) 代码 2-4-1, 如下所示 : <script language="javascript"> var img=""; var strsource=[' 明 ',' 天 ',' 日 ',' 科 ',' 技 ',' 会 ',' 更 ',' 好 ',' 创 ',' 新 ']; for(var i=0;i<4;i++){ var n=math.floor(math.random()*strsource.length); 本讲共计 6 页当前第 4 页

5 img=img+"<img src='images/checkcode/"+n+".gif' width='19' height='20'> "; div1.innerhtml=img; </script> (2) 请完成下面的任务 : 任务一 : 描述图片验证码程序实现过程 (3 分 ) 任务二 : 在代码的基础上, 编写代码实现随机显示背景图片, 同时每隔一秒钟, 图片随机变换一次 (7 分 ) 请将上述任务的操作方法, 填写到实验报告册中六自主实验步骤 (20 分 ) 1 为保障密码的安全, 屏蔽除 text 类型以外的所有文本内容都不能进行选择操作 (1) 页面页面如图 2-1 所示 (2) 完成下述任务任务一 : 完成页面的编写任务二 : 密码框不允许复制和剪切请将完成上述任务的步骤, 填写到实验报告册中图 2-1 注册页面 2 下拉菜单本讲共计 6 页当前第 5 页

6 图 2-2 下拉菜单 (1) 完成下述任务任务一 : 使用 JavaScript 完成上述下拉菜单的编写请将完成上述任务的步骤, 填写到实验报告册中七思考及问答 (20 分 ) 1 定义字符串 str= JavaScript 自学视频教程, 如果将其输出为 JavaScript, 自, 学, 视, 频, 教, 程, 使用什么方法? 2 window.resizeto(300,300) 和 window.resizeby(5,x) 分别是什么意思? 3 textcontent 和 innerhtml 有什么区别? 4 JavaScript 使用哪些关键字来处理异常? 5 如何检测客户端机器上的浏览器类型? 本讲共计 6 页当前第 6 页

《linux从入门到精通》实验指导第三讲：文件及目录操作

《linux从入门到精通》实验指导第三讲：文件及目录操作 Web 交互开发实验教学指导实验六 : 文件一实验目的 (5 分 ) 1 掌握文件处理对象的相关操作; 2 了解文件打印的方法; 3 掌握 FileSystem API 的基本概念以及相关属性方法与事件 ; 4 掌握 FileReader API 读取文件的内容的方法 ; 二实验环境 (5 分 ) 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境,