桃子汉化组移植游戏大全

课程代码

045101931

课程名称

WEB程序设计（Google）

英文名称

WebProgramming(Google)

课程类别

专业领域课

课程性质

选修

学时

总学时：48实验：0上机：16

学分

2.5

开课学期

第六学期，第四学期

开课单位

计算机科学与工程桃子汉化组移植游戏大全实验教学中心

适用专业

计算机科学与技术、信息安全、网络工程

授课语言

中文

先修课程

高级语言程序设计、数据结构、数据库、软件工程

毕业要求（专业培养能力）

本课程对学生达到如下毕业要求有如下贡献：

1、理解网站维护管理的意义及重要性，掌握网站设计和发布的流程。理解服务器、客户端、浏览器的概念和作用；

2、理解HTML语言中的各种文本字符格式、列表、表格、框架、表单等各种标记的作用；

3、理解在网页中添加CSS的方法，掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式，理解CSS的高级应用；

4、理解JavaScript语句在浏览器中的执行过程.理解JavaScript的开发使用；

5、深入理解HTML语言、css和JavaScript脚本的语法和应用。

课程培养学生的能力（教学目标）

完成课程后，学生将具备以下能力：

1、具备一定的网页布局设计能力；

2、掌握HTML语言、css和JavaScript脚本的语法和应用；

3、具备一定的站点建立维护能力；

4、具备一定的动态网页设计能力；

5、能独立设计制作一般的网站。

课程简介

《WEB编程设计》是我院根据GOOGLE针对计算机科学与技术、信息安全和网络工程专业学生的专业培训课程而开设的一门专业选修课，它是计算机类各专业的一门重要的实践环节课程，也是一门操作性和实践性很强的专业技术课程。

本门课程在专业教学计划中起着十分重要的作用。通过这门课程，学生能充分地了解Web基本工作机制，并具有制作有专业水准网站的能力。同时该课程是后续课程的基础和手段，为学生以后学习《Asp.net》、《WEB网站开发》等课程打下良好的基础。本课程学习结束后，学生应能自行设计各种网页、开发一定规模的网站，使学生通过本课程的学习，熟练掌握其基本制作方法和技巧，数据库的系统的开发，动态页面的设计与开发，并能最终设计开发一个综合性的WEB系统。

本课程的主要内容为系统介绍因特网与万维网简介HTML与CSS、网页区域和CSS盒子模型、JavaScript和DOM、Cookie、Web安全基础、HTML5、XML、Mashup等内容，通过对这些内容的基本语法及高级应用的学习，从而掌握WEB程序设计的最新技术和工具，并能较为熟练地完成出有专业水准的WEB系统设计与开发。

主要仪器设备与软件

主要仪器设备：可以上网的计算机

主要软件：网页设计器（Dreamweaver、WebStorm等）、Photoshop、SketchFlow、页面插件（jQuery、Prototype、ExtJS、Telerik、ComponentOneStudio、EasyUI等）

实验报告

按照大阳城娱乐43335报告格式完成各个实验报告。

考核方式

本课程考核方式为课堂出勤、实验和大作业，成绩比例为：

课堂出勤：20%

实验：20%

大作业：60%

教材、实验指导书及教学参考书目

现用教材：

清华大学出版社《WEB程序设计与应用》编者：曾斌孙远光等人

主要参考资料：

[1]Bruce Eckel．Thinkingin Java.Fourth Edition.Prentice Hall Ptr,2006

[2]Cay S Horstmann,Gary Comell.Core JavaVolume I .Sun Microsoft Company,2006

[3] 郑莉，王行言．Java语言程序设计．第一版．北京：清华大学出版社，2005

[4]封超，晁阳.Tomcat与JavaWeb开发祥解.第一版.北京：清华大学出版社，2008

[5]白广元.JavaWeb整合开发完全自学手册．第一版.北京：机械工业学出版社，2008

[6]飞思科技编.JSP开发详解．第一版．北京：电子工业出版社，2000

[7]因特网简史http://www.isoc.org/internet/history/brief.shtml

[8]http://en.wikipedia.org/wiki/Web_2.0

[9]http://oreilly.com/web2/archive/what-is-web-20.html

[10]http://en.wikipedia.org/wiki/XHTML

[11]http://en.wikipedia.org/wiki/Cascading_Style_Sheets

[12]章节1~8,Web Programming withHTML, XHTML, andCSShttp://my.ss.sysu.edu.cn:8080/display/W2PSC/References+and+Books

[13]HTML标签列表:http://www.w3schools.com/tags/default.asp

[14]HTML字符集列表:http://www.w3schools.com/tags/ref_entities.asp

[15]XHTML1.1 说明文档.http://www.w3.org/TR/xhtml11/

[16]XHTML1.1 元素参考:http://www.w3.org/2007/07/xhtml-basic-ref.html

[17]W3 CSS 所有属性列表:http://www.w3.org/TR/CSS21/propidx.html

[18]W3CSS 2.1 说明文档:http://www.w3.org/TR/CSS21/

[19]各操作系统支持的字体:http://www.apaddedcell.com/web-fonts

[20]http://en.wikipedia.org/wiki/XHTML

[21]http://en.wikipedia.org/wiki/Cascading_Style_Sheets

[22]第1~8章,Web Programming withHTML, XHTML, andCSShttp://my.ss.sysu.edu.cn:8080/display/W2PSC/References+and+Books

[23]所有HTML标签的列表:http://www.w3schools.com/tags/default.asp

[24]HTML字符实体的列表:http://www.w3schools.com/tags/ref_entities.asp

[25]XHTML1.1 说明.http://www.w3.org/TR/xhtml11/

[26]XHTML1.1 元素参考:http://www.w3.org/2007/07/xhtml-basic-ref.html

[27]W3所有CSS 属性的列表:http://www.w3.org/TR/CSS21/propidx.html

[28]W3CSS 2.1 规格:http://www.w3.org/TR/CSS21/

[29]各种操作系统的字体:http://www.apaddedcell.com/web-fonts

[30]W3CCSS2 Specification:  http://www.w3.org/TR/REC-CSS2/

[31]W3SchoolsCSS2 Reference: http://www.w3schools.com/css/css_reference.asp

[32]W3SchoolsCSS Tutorial: http://www.w3schools.com/css/default.asp

[33]Chapter3, 4, 7, 8, and 11 of Beginning CSS Cascading Style Sheets for WebDesign, second edition

[34]http://www.barelyfitz.com/screencast/html-training/css/positioning/

[35]http://www.quirksmode.org/css/display.html

[36]http://en.wikipedia.org/wiki/User-centered_design

[37]http://www.stcsig.org/usability/newsletter/9807-webguide.html

[38]W3SchoolDOM 节点参考http://www.w3school.com/dom/dom_node.asp/

[39]W3SchoolDOM 指南

[40]http://www.w3schools.com/htmldom/

[41]QuirksmodeDOM 指南http://www.quirksmode.org/dom/intro.html

[42]PrototypeLearning Center http://www.prototypejs.org/learn

[43]Prototype如何扩展DOMhttp://www.prototypejs.org/learn/extensions

[44]JavaScript介绍http://en.wikipedia.org/wiki/JavaScript

[45]W3SchoolsJavaScript 教程http://www.w3schools.com/js/default.asp

[46]MozillaDeveloper Center JavaScript文档https://developer.mozilla.org/en/javascript

[47]JavaScript面向对象编程，作者MikeKoss http://mckoss.com/jscript/object.htm

[48]JavaScript面向对象编程Part 1http://articles.sitepoint.com/article/oriented-programming-1

[49]JavaScript面向对象编程Part 2http://articles.sitepoint.com/article/oriented-programming-2

[50]QuirksmodeDOM 指南http://www.quirksmode.org/dom/intro.html

[5]PrototypeLearning Center http://www.prototypejs.org/learn

[52]Howprototype extends the DOMhttp://www.prototypejs.org/learn/extensions

[53]Prototype学习中心http://www.prototypejs.org/learn

[54]prototype如何扩展DOMhttp://www.prototypejs.org/learn/extensions

[55]W3CDOM  说明文档http://www.w3.org/TR/DOM-Level-2-Events/events.html

[56]W3SchoolDOM 事件索引http://www.w3school.com/dom/dom_events.asp/

[57]W3SchoolDOM 教程http://www.w3schools.com/htmldom/

[58]QuirksmodeDOM 教程http://www.quirksmode.org/dom/intro.html

[59]Prototype学习中心http://www.prototypejs.org/learn

[60]prototype.js开发者笔记http://www.sergiopereira.com/articles/prototype.js.html

[61]W3CXMLHttpRequest 规范
http://www.w3.org/TR/XMLHttpRequest

[62]W3SchoolXMLHttpRequest 参考http://www.w3schools.com/dom/dom_http.asp

[63]W3SchoolAjax 指南http://www.w3schools.com/ajax/default.asp

[64]GoogleCode University Ajax指南http://code.google.com/edu/ajax/tutorials/ajax-tutorial.html

[65]PrototypeLearning Center http://www.prototypejs.org/learn

[66]DeveloperNotes for prototype.jshttp://www.sergiopereira.com/articles/prototype.js.html

[67]W3CXML 说明文档http://www.w3.org/XML/

[68]W3SchoolsXML 教程http://www.w3schools.com/xml/default.asp

[69]W3SchoolsXML 例子http://www.w3schools.com/XML/xml_examples.asp

[70]Ajax/JavaScriptXML 操作实例/教程http://www.captain.at/howto-ajax-process-xml.php

[71]prototype.js开发者笔记http://www.sergiopereira.com/articles/prototype.js.html

[72]Cookie的介绍http://en.wikipedia.org/wiki/HTTP_cookie

[73]Session的介绍http://en.wikipedia.org/wiki/Session_(computer_science)

[74]W3SchoolsJavaScript Cookies http://www.w3schools.com/JS/js_cookies.asp

[75]Mashup(web混合应用程序)http://en.wikipedia.org/wiki/Mashup_%28web_application_hybrid%29

[76]可编程的Webhttp://www.programmableweb.com/

[77]GoogleAjax APIs http://code.google.com/apis/ajax/

[78]GoogleMaps API 家族http://code.google.com/apis/maps/index.html

[79]创造你的第一个地图http://code.google.com/apis/maps/articles/yourfirstmap.html

[80]GoogleMaps API 教程http://econym.org.uk/gmap/

制定人及发布时间

华南理工大学计算机桃子汉化组移植游戏大全颜小洋副教授和刘捷实验师编订于2017年7月8日

实验项目编号

实验项目名称

实验学时

实验内容提要

实验类型

实验要求

每组人数

主要仪器设备与软件

1

HTML 和CSS 基础

2

为自己写一个网页，包含：

1、自我介绍、最近图片、这学期选择的课程和一些最喜欢的电影（内容）

2、自我介绍必须超过一个段落

3、课程必须放在一个有序列表里面

4、最喜欢的电影必须放在一个无序列表里面

5、设置一个链接指向SE-805课程的网站

6、为了易读，请使用不同的字体

设计性

必做

1

主要仪器设备：可以上网的计算机

主要软件：网页设计器（Dreamweaver、WebStorm等）、Photoshop、SketchFlow、页面插件（jQuery、Prototype、ExtJS、Telerik、ComponentOneStudio、EasyUI等）

2

CSS高级实践编程

2

1、写一个网页，在其中列出课程中学过的主要内容，每个内容列出具体细节，包括所有html标签和css属性，并且解释它们的用途和用法等

2、要求把样式写在一个单独的css文件中等等主要内容

设计性

必做

1

3

JavaScript基础编程

2

1、练习JavaScript基。⒂JavaScript编写一个快速排序算法，要求在页面上输出原始输入应对列及排序后的结果。

2、再编写一个网页,展示最喜欢电影（最少3个），使这些电影名字的颜色每隔10秒逐个从黑色变成红色

3、在网页上添加一个按钮，当点击该按钮时，它将电影列表上的电影名称进行反序处理，然后在消息对话框中弹出。（要求分别使用DOM 函数和Prototype.js 函数完成）

设计性

必做

1

4

JavaScript和XML高级编程

2

1、在Firebug控制台中用JavaScript编写代码定义Employee, Manager , 和Secretary的类，要求：

·每个Employee拥有名字和薪水

·每个Manager 都是Employee, 并且管理一组其他的Employees

·每个Secretary  都是Employee,并为Manager工作

2、给这些类添加方法，要求：

·每个Employee有一个show()方法，以字符串的形式返回自己的名字和薪水

·每个Manager 有一个getInferiors()方法，返回他的下属

·每个Secretary有一个getSuperior()方法，返回他的老板

3、尝试使用两种不同的继承方式,复制和原型

设计性

必做

1

5

Cookie

4

1、在单个页面上编写一个简单的待办事项列表应用。使用<divid=“to-do”></div>元素包含这个应用所有的HTML元素

2、设计一个表单。表单使用一个textarea指定一个新待办事项,和一个“添加”按钮添加这个事项到列表中当前待办事项的列表

3、每个事项有一个checkbox以供选择，按钮“选择全部”,“删除全部”,“删除”（把所有选中的待办事项从列表中移除）

要求：

·使用所学的非侵入式JavaScript技术

·使用prototype.js 中的DOM 事件句柄函数

·所有的事件句柄注册到“to-do”div 元素上

·使用event.element() 找出事件的源头

4、为该待办事项列表添加热键，要求：

·“↑”和“↓”键用来在该列表中上下移动

·“Enter”键用于选中/取消选中当前待办事项列表

5、使用简单的cookie,把所有的待办事项保存在一个cookie里面

设计性

必做

1

6

HTML5应用编程

4

写一个简单的GoogleMap 的应用程序，显示华南理工大学的位置，要求：

1、通过Google搜索获取我们大阳城娱乐43335的经度纬度

2、使用GoogleMaps JavaScript API V3

设计性

必做

1

7

大作业

课外

写一个网页集，详细介绍自己的家乡，包括以下部分板块：风土人情、家乡风貌、家乡土特产品、家乡经济、家乡教育、文化传承、历史名人大事、历史名胜古迹、家乡社区与论坛，要求

1. 使用HTML所有标签、CSS主要属性

2. 应用JAVASCRIPT实现动态与交互

3. 使用prototype.js 中的DOM 事件句柄函数

4. 使用简单的cookie实现待办事项功能

5. 使用GoogleMaps JavaScript API V3完成社区模块。

设计性

必做

1

No.

ExperimentItem

ClassHours

ContentSummary

Category

Requirements

Numberof StudentsEach Group

Instruments,Equipments and Software

1

Basic of HTML and CSS

2

Wirte a web page foryourself, including

1. Self-introduction, recentphoto, courses of this semester, and some favorite movies.

2. Self-introduction cannot be inone paragraph.

3. Courses should be in an orderedlist.

4. Favorite movies should be in anon- ordered list.

5. Set a hyper-link to website ofcourse SE-805.

6. For easily reading, please use different font.

Design

Compulsory

1

Instruments:any computer that connected to Internet

Equipment:Web designer (Dreamweaver, WebStorm, etc.), Photoshop, SketchFlow,Web plugin (jQuery, Prototype, ExtJS, Telerik, ComponentOneStudio, EasyUI, etc.)

2

Advanced practice programming of CSS

2

1. Write a web page listing themain contents of the course, each content should be listedspecific details, including all HTML tags and CSS attributes, andexplaining their use and usage, etc.

2. Write the style in a separate CSS file, and so the maincontent.

Design

Compulsory

1

3

Basic of JavaScriptprogramming

2

1. Practice the JavaScriptfoundation and write a quick sorting algorithm in JavaScript thatrequires to output the original input and the sorted result onthe page.

2. Write a web page that shows themost favorite movies (at least 3). Maked the colors of thesemovie names changed from black to red every 10 seconds

3. Add a button to the page. When the button is clicked, itwill make the movie name to reverse order, and then pop up themin a message dialog box. (requires to use DOM functions andPrototype.js functions）

Design

Compulsory

1

4

Advanced practice programming of JavaScript andXML

2

1. Writing code in the Firebugconsole to define classes for Employee, Manager, and Secretary,requires:

• Each Employee has name andsalary.

• Each Manager is an Employeemanaging other Employees in the same group.

• Each Secretary is an Employeeworking for Manager.

2. Add functions to these classes,requires:

• Each Employee has a show()function returning own name and salary as a  string.

• Each Manager has agetInferiors(0 function returning own inferiors.

• Each Secretary has agetSuperior() function returning own superior.

3.  Try to use two differentmethods to inherit, includingcopy and prototype.

Design

Compulsory

1

5

Cookie

4

1. Write a simple to-do list in asingle page using <div id=“to-do”></div> toinclude all HTML elements.

2. Design a form using textarea tomake a new to-do matter. A “add” button which be clicked toadd this matter to to-do list.

3. Each matter has a checkbos,“choose all” button, “delete all” button, “delete”button. Requires:

• Use non-intrusive JavaScripttechnology.

• Use the DOM event handlerfunction in prototype.js.

• All event handles areregistered on the "to-do" div element.

• Use event.element () to findthe source of the event.

4. Add hot keys to to-do list,requires:

• Use “↑” and “↓” tomove in the list.

• Use “Enter” to choose /unchoose current to-do list.

5. Use simple cookie to save all to-do matters to a cookie.

Design

Compulsory

1

6

HTML5 Programming

4

Write a simpleGoogle Map application to show location of SCUT, requires:

1. Get latitude and longitude ofSCUT through Google.

2. Use Google Maps JavaScript API V3.

Design

Compulsory

1

7

The Last applicational design project

After class

Write a web site tointroduce your hometown, including these sections: localinformation, hometown style, native products, economy, education,cultural heritage, historical celebrity events, historical sites,communities and forums, requires:

1. Use all tags of HTML, mainattibutes of CSS.

2. Use JavaScript to interact.

3. Use DOM event handle functionin prototype.js.

4. Use simple cookie to save to-dolist.

5. Use Maps JavaScript API V3to finish communities section.

Design

Compulsory

1