如有任何需要疑问可以添加客服微信1797209584(QQ微信同号)(学生请下载版本1)
实训一:设计系统主页 1. 题目 设计系统主页。 2. 目的 (1)熟悉Web前端项目开发环境。 (2)掌握如何建立Web前端项目,学会规划项目结构。 (3)掌握动态生成页面内容的方法。 (4)理解如何使用Flash显示图片新闻。 (5)会在应用系统中编写播放动态新闻的程序。 3. 内容 建立项目结构,并设计一个系统的主页,在主页中嵌入Flash播放新闻。 4. 要求 (1)建立Web前端项目,规划好程序结构。 (2)使用document.write()方法生成播放Flash的JavaScript代码。 (3)可以方便地增减播放的图片新闻数量。 (4)单击图片时能够打开对应的新闻页面。 实训二:显示数据列表 1. 题目 显示数据列表。 2. 目的 (1)掌握流程控制语句的使用。 (2)掌握函数的使用。 (3)理解闭包的概念。 (4)应会设计基本的应用程序。 3. 内容 在所设计的项目中,实现显示数据列表。数据以表格的方式显示,不同的行显示不同的颜色。当单击每行数据的标题时,将会弹出窗口,显示详细信息。 4. 要求 (1)数据存放在数组中,用程序实现数据显示。 (2)以闭包的方式定义工具,窗口函数封装在工具中。 (3)通过循环生成数据行,用条件判断实现不同行显示不同的颜色。
实训三:随机显示题头图片
1. 题目 随机显示题头图片。 2. 目的 (1)掌握图像显示的基本知识。 (2)掌握对象建立的方法。 (3)掌握Math的使用方法。 (3)会应利用随机函数编写应用程序。 3. 内容 结合一个具体应用的需求,设计随机显示题头的程序。 4. 要求 (1)针对一个具体应用的需求,设计界面。 (2)使用对象的方式存储图像信息,利用随机函数抽取图像。
实训四:实现日期显示
1. 题目 实现日期显示。 2. 目的 (1)掌握Date对象的使用方法。 (2)掌握通过Date获得年月日的方法。 (3)巩固对多分支结构的掌握和应用。 (3)利用Date设计应用程序。 3. 内容 结合一个具体应用的需求,实现日期的显示。 4. 要求 (1)针对一个具体应用,设计日期显示的格式。 (2)用JavaScript实现日期的显示。
实训五:设计登录和注册页
1. 题目 设计登录和注册页。 2. 目的 (1)掌握表单域的引用方法。 (2)掌握常用控件的基本方法。 (3)掌握事件的处理方法。 (4)理解Cookie的原理和应用。 3. 内容 针对所设计的系统,设计登录和注册页。 4. 要求 (1)登录界面能对输入的数据进行验证,要求非空,且符合一定的要求。 (2)登录时,用条件判断输入的数据,模拟登录判断。登录成功后,用Cookie 保存登录状态,并进入主页。 (3)主页含有注销功能。 (4)注册界面能对数据进行验证。如电子邮件、电话号码等要符合格式要求。 实训六:设计简单的购物车 1. 题目 设计简单的购物车。 2. 目的 (1)掌握JSON的使用方法。 (2)掌握数据列表的动态生成方法。 (3)掌握WebStorage的使用方法。 (4)会利用所学知识设计简单的应用程序。 3. 内容 设计产品浏览页面,用户可以单击产品的“添加到购物车”链接将产品加入购物车,同时,显示购物车。可以对购物车中的产品执行增减或删除操作。 4. 要求 (1)针对一个具体应用,设计产品列表。 (2)要动态生成产品及购物车数据列表。 (3)将购物车的数据存放在Web Storage中。
实训七:实现用户管理功能 1. 题目 实现用户管理功能。 2. 目的 (1)理解Node.js程序的基本原理。 (2)掌握利用Node.js建立服务器程序的基本方法。 (3)理解Ajax的工作原理。 (4)掌握编写Ajax程序的基本方法。 (5)会利用所学知识设计简单的应用程序。 3. 内容 设计程序能够对用户进行管理,实现查询、删除、注册、登录功能。 4. 要求 (1)用户管理界面,以列表的方式显示用户数据,并提供删除功能。数据通过Ajax 请求服务器端程序,从数据库中获取。 (2)注册界面Ajax 请求服务器端程序能够将用户信息保存到数据库。 (3)注册界面在输入用户名时能实现动态验证的唯一性。 (4)登录功能通过数据库查询进行验证。 实训八:使用jQuery技术实现企业信息展示系统的相关功能 1. 题目 使用jQuery技术实现企业信息展示系统的相关功能。 2. 目的 (1)掌握jQuery的基本知识。 (2)掌握jQuery的应用方法。 (3)进一步理解Ajax 程序的设计方法。 (4)会利用所学知识设计简单的应用程序。 3. 内容 用jQuery技术实现产品的查询、添加、修改与删除,用户的登录、注册、查询和删除。 4. 要求 (1)从jquery.com下载 jQuery库。 (2)将在客户端网页中使用的MyTools中的函数转换为jQuery函数。 (3)进一步完善功能,优化界面。
|