web编程_实验大纲.doc

《web编程》实验教学大纲 课程总学时：64学时 学分：4学分 实验学时：48学时 实验个数：8个 实验学分：3学分 课程性质：专业方向课程 适用专业：数字媒体技术 教材及参考书：《》，著译人民邮电出版社，201年版。 大纲审定人：数字媒体学院学术委员会 一、实验课的性质与任务 本课程是数字媒体技术专业专业方向课之一，是《web3D编程》的同步实验课。《web3D编程》实验课程注重解决学生在现实开发环境中可能遇到的各种问题。让学生了解web的标准、web的发展历史以及web前端设计开发的基础知识，掌握JavaScript DOM编程的知识，能够快速开发web页面，理解web开发过程中的渐进增强、平稳退化、向后兼容等思想。 二、实验目的与要求 1．实验目的 通过实验，让学生能够熟练操纵DOM元素；并要求学生整合所学知识，制作了一个完整的web站点，让学生能够基本了解web页面（前端）的开发流程，以便学生可以独立开发自己的个人网站，实验的最终目的是提升学生的实际web编程能力。 2．实验要求 （1）上机前要作好充分准备，根据实验题目编写好源程序。 （2）对上机操作过程中可能出现的问题预先分析，确定调试步骤和测试方法，对运行结果进行分析等。 （3）上机实验完成后,认真写出实验报告,对上机中出现的问题进行分析、总结。 三、实验项目及内容提要 Web编程实验（134092） 序号 实验编号 实验名称 学时 必做 选做 实验类型 内容提要 基本操作 验证 综合 设计 1 应用JavaScript语法编写函数并输出结果的实验 4 √ √ （1）下载指定浏览器和代码编辑器 （2）编写一个包含循环语句函数弹出结果 （3）编写一个能输出布尔值的函数并运行 2 根据DOM方法获取对象并设置属性的实验 4 √ √ （1）编写一个购物清单网页 （2）分别根据ID、、（3）根据getAttribute方法获得属性值并弹出 4）根据setAttribute方法改变原来属性的值，并在网页中浏览 3 根据DOM对象属性获得节点并弹出节点类型的实验 4 √ √ （1）编写图片库的网页（2）应用DOM新属性childNodes、、（3）应用nodeValue属性，获得文本节点的值并弹出。 4 根据DOM方法创新元素点和内容并插入节点树的实验 4 √ √ （1）编写一个简单的HTML网页 （2）分别根据creatElement、、、3）用insertBefore方法和insertAfter方法插入节点并观察效果 5 显示和“缩略语”“文件来源列表”的实验 8 √ √ （1）编写一个含有多个缩略语的网页（2）将displayAbbreviation和displayCitation函数写入JavaScript，引入到文档（3）用浏览器打开网页，观察效果 6 用DOM脚本设置样式的实验 8 √ √ 创建一个4行两列的表格 用CSS设置样式 （3）用stripeTables函数通过改变对象属性值来改变奇数偶数行背景颜色 （4）修改stripeTables函数，通过添加类实现同样的效果 7 用JavaScript实现动画效果的实验 8 √ √ （1） 制作一个简单的网页 （2）编写一个函数文档加载完成时，改变目标元素位置 （3）在某个时间连续调用函数，改变目标元素位置，实现动画效果 （3）改变缓动函数，实现不同的效果 8 WEB页面开发实验 8 √ √ （1）HTML5新元素及属性构建网页 （2）完成CSS设置 （3）JavaScript增强界面 （4）测试与优化 四、实验内容安排 实验一 应用JavaScript语法编写函数并输出结果的实验 （验证实验 4学时） 1. 目的要求 了解JavaScript语法结构，掌握编程方法 2．实验内容 （1）下载指定浏览器和代码编辑器 （2）编写一个包含循环语句函数弹出结果 （3）编写一个能输出布尔值的函数并运行 3．主要实验仪器设备 pc机，浏览器。 实验二 根据DOM方法获取对象并设置属性的实验 （验证实验 4学时） 1. 目的要求 了解DOM对象模型中各节点的概念及获取方法。 2．实验内容 （1）编写一个购物清单网页 （2）分别根据ID、、（3）根据getAttribute方法获得属性值并弹出 （4）根据setAttribute方法改变原来属性的值，并在网页中浏览 3．主要实验仪器设备 pc机，浏览器。 实验三 根据DOM对象属性获得节点并弹出节点类型的实验