课程代码

045101931

课程名称

WEB程序设计

英文名称

Web Programming

课程类别

专业领域课

课程性质

选修

学时

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

学分

2.5

开课学期

第四学期

开课单位

计算机科学与工程学院实验教学中心

适用专业

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

授课语言

中文

先修课程

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

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

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

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

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

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

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

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

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

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

1、让学生了解国家的法律法规政策、设计符合国家各项法律法规政策规定、爱国爱党正确的思想观和满足祖国人民习惯的web系统；

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

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

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

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

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

课程简介

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

本门课程在专业教学计划中起着十分重要的作用。通过这门课程的学习，让学生能充分地理解web系统需要符合国家各项法律法规政策规定、爱国爱党正确的思想观和满足祖国人民习惯，拒绝传播任何非法信息，了解Web系统基本工作机制，并具有制作有专业水准网站的能力。同时该课程是后续课程的基础和手段，为学生以后学习《Asp.net》、《WEB网站开发》等课程打下良好的基础。本课程学习结束后，学生应能自行设计各种网页、开发一定规模的网站，使学生通过本课程的学习，熟练掌握其基本制作方法和技巧，数据库的系统的开发，动态页面的设计与开发，并能最终设计开发一个综合性的WEB系统。

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

教学内容与学时分配

（一）绪论课程目的、意义与内容组织、学时安排介绍1学时

教学要求：要求掌握课程的主要目的与任务，理解web系统需要符合国家各项法律法规政策规定、爱国爱党正确的思想观和满足祖国人民习惯，网上的内容需要按照国家网信办对网络系统内容的要求，传播正确的爱国爱党信息，拒绝传播非法的或者黄赌毒等信息，了解web编程用到的主要工具与编程语言，以及本课程讲授的主要内容。

（二）因特网与万维网简介    3学时

（1）因特网    1学时

（2）万维网    1学时

（3）互联网的主要协议    1学时

教学要求：要求掌握因特网与互联网及其相关协议。

重点：因特网与互联网及其相关协议

难点：互联网相关协议

（三）HTML       4学时

（1）HTML脚本语言介绍    1学时

（2）HTML语法    1学时

（3）HTML的主要元素介绍    2学时

教学要求：介绍HTML及其语法，主要元素介绍。

重点：HTML语法及其主要元素

难点：HTML语法及其主要元素。

（四）CSS基础与高级实践    4学时

（1）CSS基础    2学时

（2）高级实践    2学时

重点：CSS基础及高级实践

难点：高级实践

（五）JavaScript基础    4学时

（1）JavaScript介绍     1学时

（2）JavaScript语法     1学时

（3）JavaScript各种结构    1学时

（4）JavaScript应用    1学时

重点：JavaScript语法，各种结构及其应用

难点：JavaScript语法，各种结构

（六）DOM基础    2学时

（1）DOM介绍    0.5学时

（2）DOM接口    0.5学时

（3）DOM应用    1学时

重点：XML语法及应用

难点：XML语法及应用

（七）XML基础      2学时

（1）XML介绍     0.5学时

（2）XML语法介绍     0.5学时

（3）XML应用     1学时

重点：XML语法及应用

难点：XML语法及应用

（八）JavaScript和DOM    4学时

（1）JavaScript和DOM的主要接口    2学时

（2）利用JavaScript操纵DOM树的方法及其实践    2学时

重点：JavaScript和DOM的主要接口

难点：利用JavaScript操纵DOM树的方法及其实践

（九）JavaScript和XML    4学时

（1）利用JavaScript管理XML结构化数据的方法    2学时

（2）利用JavaScript管理XML结构化数据的实践    2学时

重点：利用JavaScript管理XML结构化数据的方法

难点：利用JavaScript管理XML结构化数据的实践

（十）Cookie与Session    2学时

（1）介绍Cookie及其追踪客户的方法与实践    2学时

（2）介绍Session及其追踪客户的方法与实践     2学时

重点：利用Cookie和Session及其追踪客户的方法与实践。

（十一）Basic HTML 5介绍    2学时

介绍新版本HTML5的最新特性   4学时

重点：新版本HTML5的最新特性。

教学方法

课程教学以课堂教学、课外作业、综合讨论、网络以及授课教师的科研项目于积累等共同实施。

考核方式

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

课堂出勤：20%

实验：20%

大作业：60%

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

现用教材：

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

主要参考资料：

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

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

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

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

 [5]白广元.Java Web整合开发完全自学手册．第一版.北京：机械工业学出版社，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 with HTML, XHTML, and CSShttp://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]XHTML 1.1 说明文档. http://www.w3.org/TR/xhtml11/

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

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

 [18]W3 CSS 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 with HTML, XHTML, and CSShttp://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]XHTML 1.1 说明. http://www.w3.org/TR/xhtml11/

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

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

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

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

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

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

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

 [33]Chapter 3, 4, 7, 8, and 11 of Beginning CSS Cascading Style Sheets for Web Design, 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]W3School DOM 节点参考http://www.w3school.com/dom/dom_node.asp/

 [39]W3School DOM 指南

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

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

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

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

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

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

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

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

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

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

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

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

 [52]How prototype extends the DOM http://www.prototypejs.org/learn/extensions

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

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

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

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

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

 [58]Quirksmode DOM 教程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]W3C XMLHttpRequest 规范
http://www.w3.org/TR/XMLHttpRequest

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

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

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

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

 [66]Developer Notes for prototype.js http://www.sergiopereira.com/articles/prototype.js.html

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

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

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

 [70]Ajax/JavaScript XML 操作实例/教程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]W3Schools JavaScript Cookies http://www.w3schools.com/JS/js_cookies.asp

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

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

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

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

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

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

制定人及发布时间

华南理工大学计算机学院颜小洋副教授和刘捷实验师编订于2017年7月8日

Course Code

045101931

Course Title

Web Programming

Course Category

Specialty-related Course

Course Nature

Elective Course

Class Hours

Total: 48laboratorial practice: 16  experiments: 0  field practice: 0

Credits

2.5

Semester

Sixth term

Institute

School of Computer Science and Technology

ProgramOriented

Computer Science and Engineering, Network Engineering, Information Science

Teaching Language

Chinese

Prerequisites

“Advanced programming”, “Data Structure”, “Data Base”, “SoftwareEngineering”

Student Outcomes

 (Special Training Ability)

This course contributes to the students’ ability from the aspects as follows:

1. Engineering knowledge: students will learn the fundamental knowledge, basic professional principles, methodologies and techniques. Students will be trained to solve the problems in web programming and process by applying mathematics and their professional knowledge in the scope of computer science. The course enhances students’ ability to develop web programming applications.

2. Problem analysis: students will learn to define, express and analyze the comprehensive problems in web programming by doing survey and applying mathematics, engineering techniques and their professional knowledge in the scope of computer science.

3. Problem solving: students will learn how to find the comprehensive solutions to the problems in big data engineering including the design of web programming, selection of critical techniques, implementation of workflows and planning. Students are promoted in innovative awareness through considering multiple factors (e.g., society, environment and security) in their designs.

4. Research ability: students will learn to do research on the problems in web programming by adopting scientific methodologies including experiments, data analysis and conclusion making.

5. Utilizing modern techniques: students will learn to select, utilize and develop tools and techniques available to anticipate and simulate problems in web programming.

Teaching Objectives

After finishing the course:

 (1) Students should master the basic knowledge of distributed computing techniques, HTML, CSS, JavaScript, DOM and XML programming techniques and be trained in problem discovering and resolving. [I, II]

 (2) Students should master the basic methods and techniques for web programming. [II, III, IV]

 (3) Students should master widely-used big data programming and be trained in designing and programming simple web programming systems. [III, V]

Course Description

This course is prepared for upperclassmen who have a good mastery of the basics of Advanced programming, Data Structure, Data Base and SoftwareEngineering as well as have capability to develop an application. The objective of this course is to introduce the basic principles and development technology of traditional distributed computing, the storage and management of web programming, platform for web programming, principles of algorithm to analyze big data and how to design a framework for web programming system as well as the application development technology. Students in this course should to read a lot of relevant literature about web programming, in order to form a perception of the technology. Besides, students need to do some experiment which is necessary to master how to use tools to analyze and program for web programming. We hope student can discover, solve and apply the technology of big data during the real work instead of just knowing the basic principles of managing big data platforms or the way to analyze. The knowledge modules of the course include basic knowledge of distributed computing, technology of distributed computing programming, technology of big data storage platform, computational model for web programming technology, technology of web programming programming development, and technology of web programming application development.

Teaching Content and Class Hours Distribution

I. Introduction about the course                      1 hours

Main content: Knowledge about the basic tasks, main targets of the course and the application of web programming in computer science.

II. Foundation of Distributed Computing               3 hours

(1) INTERNET    1 hour

(2) WWW web     1 hour

(3) Protocols in INTERNET and WWW               1 hour

Main content: The definition of INTERNET , WWW and all of the main protocols, and how to use them in web programming.

Focus: foundations of INTERNET , WWW and all of the main protocols,.

Difficult points: understanding the difference and association between different protocols.

III. HTML                          4 hours

 (1) Introduction to HTML programming    1 hour

 (2) HTML grammar    1 hours

 (3) HTML main contents                          2 hours

Main Content: basic concepts and principles of HTML programming language, HTML grammar and HTML main contentsand so on

Focus: HTMLprogramming language.

Difficult Points: the HTML grammar and HTML main contents.

IV. CSS basics and advancedpractice                 4 hours

1. CSS basics                2 hour

2. CSS advancedpractice      2 hours

Focus: CSS basics and advancedpractice.

Difficult Points: What is CSS and how to use it in web programming.

V. JavaScriptbasics       4 hours

(1) Introduction to JavaScript         1 hour

(2) JavaScript grammar        1 hours

(3) JavaScript data structures  1 hours

(4) JavaScript applications           1 hour

Focus: Introduction to JavaScript and the difference between java and JavaScript. To understand JavaScript grammar, JavaScript data structures, etc.  

Difficult Points: JavaScript grammar and JavaScript data structures.  

VI. DOM basics      2 hours

1. Introduction to DOM     0.5 hour

2. DOM interface         0.5 hours

3. DOM application     1 hours

Focus: understand what is DOM and its interfaces and the application in web programming.

Difficult Points: DOM interface and its application.

VII. XML basics          2 hours

1. Introduction to XML       0.5 hour

2. XML grammar             0.5 hours

3. XML applications       1 hour

Focus: Introduction to XML, its grammar and applications.

Difficult Points: XML grammar and its applications in web programming.

VIII. JavaScript and DOM           4 hours

1. Main interfaces for JavaScript              1 hour

2. Main interfaces for DOM1 hour

3. How to control DOM tree by JavaScript  2 hours

Focus: Main interfaces for DOM and how to control DOM tree by JavaScript in web programming.

Difficult Points: How to control DOM tree by JavaScript.

VIII. JavaScript and DOM           4 hours

(1) Manage the XML structural data by JavaScript     2 hours

(2) Application for XML structural data by JavaScript        2 hours

Focus: How to Manage the XML structural data by JavaScript and its applications in web programming.

Difficult Points: How to Manage the XML structural data by JavaScript.

X. Cookie and Session                2 hours

（1）Introduction to Cookie          1 hour

（2）Introduction to Session    1 hour

Focus:Introduction to Cookie and Session and their applications。

Difficult Points: How to use Cookie and Session in web programming.

XI. Basic HTML 5                   2 hours

（1）Introduction to Basic HTML 5      2 hours

Focus:Introduction to HTML 5。

Difficult Points: Understand the main contents in HTML 5.

Experimental Teaching

Yes

Teaching Method

Combining lectures, assignments, laboratorial tasks, online activities and the research projects of the lecturer.

Examination Method

The final score comprises of three parts with specified weights:

Assignments and attendance: 20%

Laboratorial tasks (with reports): 20%

LargePractice: 60%

Teaching Materials and Reference Books

Suggested Textbooks:

现用教材：

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

主要参考资料：

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

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

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

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

 [5]白广元.Java Web整合开发完全自学手册．第一版.北京：机械工业学出版社，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 with HTML, XHTML, and CSShttp://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]XHTML 1.1 说明文档. http://www.w3.org/TR/xhtml11/

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

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

 [18]W3 CSS 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 with HTML, XHTML, and CSShttp://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]XHTML 1.1 说明. http://www.w3.org/TR/xhtml11/

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

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

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

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

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

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

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

 [33]Chapter 3, 4, 7, 8, and 11 of Beginning CSS Cascading Style Sheets for Web Design, 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]W3School DOM 节点参考http://www.w3school.com/dom/dom_node.asp/

 [39]W3School DOM 指南

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

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

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

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

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

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

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

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

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

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

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

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

 [52]How prototype extends the DOM http://www.prototypejs.org/learn/extensions

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

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

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

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

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

 [58]Quirksmode DOM 教程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]W3C XMLHttpRequest 规范
http://www.w3.org/TR/XMLHttpRequest

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

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

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

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

 [66]Developer Notes for prototype.js http://www.sergiopereira.com/articles/prototype.js.html

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

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

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

 [70]Ajax/JavaScript XML 操作实例/教程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]W3Schools JavaScript Cookies http://www.w3schools.com/JS/js_cookies.asp

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

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

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

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

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

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

Prepared by Whom and When

XiaoYang Yan, 8 July 2018.

实验项目编号

实验项目名称

实验学时

实验内容提要

实验类型

实验要求

每组人数

主要仪器设备与软件

1

HTML 和 CSS 基础

2

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

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

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

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

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

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

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

设计性

必做

1

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

主要软件：网页设计器（Dreamweaver、WebStorm等）、Photoshop、SketchFlow、页面插件（jQuery、Prototype、ExtJS、Telerik、ComponentOne Studio、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、在单个页面上编写一个简单的待办事项列表应用。使用<div id=“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

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

1、通过Google搜索获取我们学校的经度纬度

2、使用Google Maps JavaScript API V3

设计性

必做

1

7

大作业

课外

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

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

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

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

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

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

设计性

必做

1

No.

Experiment Item

Class Hours

Content Summary

Category

Requirements

Number of StudentsEach Group

Instruments, Equipments and Software

1

Basic of HTML and CSS

2

Wirte a web page for yourself, including

1、Self-introduction, recent photo, courses of this semester, and some favorite movies.

2、Self-introduction cannot be in one paragraph.

3、Courses should be in an ordered list.

4、Favorite movies should be in a non- ordered list.

5、Set a hyper-link to website of course 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, ComponentOne Studio, EasyUI, etc.)

2

Advanced practice programming of CSS

2

1、Write a web page listing the main contents of the course, each content should be listed specific details, including all HTML tags and CSS attributes, and explaining their use and usage, etc.

2、Write the style in a separate CSS file, and so the main content.

Design

Compulsory

1

3

Basic of JavaScriptprogramming

2

1、Practice the JavaScript foundation and write a quick sorting algorithm in JavaScript that requires to output the original input and the sorted result on the page.

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

3、Add a button to the page. When the button is clicked, it will make the movie name to reverse order, and then pop up them in a message dialog box. (requires to use DOM functions and Prototype.js functions）

Design

Compulsory

1

4

Advanced practice programming of JavaScript and XML

2

1、Writing code in the Firebug console to define classes for Employee, Manager, and Secretary, requires:

    Each Employee has name and salary.

    Each Manager is an Employee managing other Employees in the same group.

    Each Secretary is an Employee working 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 a getInferiors(0 function returning own inferiors.

    Each Secretary has a getSuperior() function returning own superior.

3、 Try to use two differentmethods to inherit, including copy and prototype.

Design

Compulsory

1

5

Cookie

4

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

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

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

    Use non-intrusive JavaScript technology.

    Use the DOM event handler function in prototype.js.

    All event handles are registered on the "to-do" div element.

    Use event.element () to find the source of the event.

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

    Use “↑” and “↓” to move 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 simple Google Map application to show location of SCUT, requires:

1、Get latitude and longitude of SCUT through Google.

2、Use Google Maps JavaScript API V3.

Design

Compulsory

1

7

The Last applicational design project

After class

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

1、Use all tags of HTML, main attibutes of CSS.

2、Use JavaScript to interact.

3、Use DOM event handle function in prototype.js.

4、Use simple cookie to save to-do list.

5、Use Maps JavaScript API V3to finish communities section.

Design

Compulsory

1