CS2550 Web Programming I
Study Guide for Test 3
The third (and last) test will cover the topics listed below.
The format will be similar to the first two tests, with about thirty
to forty multiple-choice, true/false, and fill-in-the-blank questions.
To study for the test you should review the lesson notes and the
reading assignments for each lesson.
Below is a list of topics that you should know for the test.
This list is meant to be helpful, but it isn't an exhaustive list.
Synchronous versus asynchronous requests, including advantages and
disadvantages of each.
In particular be sure you understand how call-back functions are used
with asynchronous requests.
Advantages and disadvantages of using Ajax (and XMLHttpRequest in general)
XMLHttpRequest objects and their use, including important methods and
You should also know which readyState values are most commonly used.
How JS code sends data to a server and how it accesses data sent from
Lesson 10--Web Storage and Cookies
Web storage, local storage, session storage
Life time and scope of web storage
How to store and retrieve data from web storage
Cookie attributes: secure, max-age, expires,
Limit on size of cookies
Default life of a cookie
Default accessibility of a cookie
Lesson 11--XML and JSON
Wikipedia XML article
The last part of my Ajax demo (Synchronous POST) shows an example of
using JSON.parse(), and Assignment 6 has a link to a short XML example
based on sample code from the 5th edition of JS:TDG.
Rules for well-formed XML and differences between XML and HTML:
proper nesting, requirements for closing tags, case sensitivity
Valid XML and the basic concepts of XML DTDs and schemas.
Use of commas, pipes, stars, and question marks in DTDs.
Using DOM functions and getElementsByTagName() with XML
Basic concept of JSON
JSON structure: objects and arrays
JSON library: JSON.parse(), JSON.stringify()
Recent browser versions have incorporated the JSON library so that you
don't need to download it.
JSON libraries have been written for many programming languages, including
Java, C#, C++, C, Python, PHP, and Ruby.
(JSON is included in standard libraries for PHP as of version 5.2 and for
Python as of version 2.6.)
Lesson 12--HTML5 Media
about.com on HTML5 video formats
<audio> and <video> tags
-- controls and preload attributes
-- source elements
-- Theora (ogg), H.264 (mp4), VP8 (WebM)
-- commercial vs. non-commercial codecs, submarine patents
-- which browsers use which codecs (Safari, IE, Firefox, Chrome)
Determining whether a media element can play in the browser
Important methods and properties of media elements:
-- play(), pause()
-- currentTime property: can skip to a desired location by setting
-- volume, muted
-- controls, loop, preload, autoplay
--According to this web page, Chrome and Android are the only browsers that
can use all three of the codecs that are most commonly used with HTML5 media),
but recent versions of Chrome (and probably Android) will not play H.264
video without a plug-in.
--This page also has some good comments about Flash video (FLV) versus HTML5
diveintohtml5.info Video on the Web
This chapter of Dive into HTML 5 has information about the various
containers and codecs, including software that can be used to convert from
one format to another.
Lesson 12--Canvas graphics
Testing to see if the browser supports canvas graphics
Canvas element is now supported by all major browsers, including Internet
Getting a drawing context
Paths, stroke, fill
Coordinate system and transformations
-- translating, rotating, and scaling
Working with bitmap images
This is a very good tutorial on using the HTML 5 canvas element.
It also includes some links to other good web sites.
This is a good web site for seeing what is possible with HTML 5 and the canvas element.
This is a web site where you can download a plug-in that exports Adobe Illustrator
documents to code that can be used with an HTML 5 canvas element.
Section 21.3 of JS:TDG talks about SVG.
The only thing you need to know about SVG for this term (Fall 2011) is the difference
between vector graphics and bitmap images.
Lesson 13--Mobile Browsing and offline web applications
Rethinking the Mobile Web by Yiibu
Some of the main points from "Rethinking the Mobile Web":
• number of mobile Internet users today: 1.3 billion
Options for designing web sites to accomodate mobile browsers:
• 1/3 of global Internet users access the Internet only via mobile devices
• iPhones (and smart phones) are not the only phones used to access the
• Webkit is not the only browser used on phones: Opera Mini, Nokia, UC
(China), NetFront, Fennec (Firefox), ovi, etc.
• proxy browsers
• The "first @media query" is lack of support for media queries.
In other words, using @media queries is not helpful for phones that don't
You should assume that they are not supported, and then adjust
if they are.
Guidelines from "Rethinking the Mobile Web"
Make mobile-specific sites
What is mobile? handheld consoles, laptops/netbooks, TVs (similar
interfaces to phones), etc.
"Create an adaptive experience"
Might not work when the viewport is much smaller than the content
"mobile first" http://www.lukew.com/ff/entry.asp?933
traditional: full desktop site + @media queries = mobile site
problem: @media queries fail on many phones
mobile first: mobile site + @media queries = full desktop site
"Use well structured, meaningful markup"
well-sructured: li vs. div
meaningful: descriptive id attributes
"the absence of support for @media queries is in fact the first @media
"adapt content (especially images) appropriately for each device"
"compress content where possible, and avoid sending unnecessary data"
"display:none still loads resources"
Make sure you understand what media queries are and how they relate to
CSS and mobile browsers.
Application cache for offline web-apps
This part of Dive into HTML 5 has information about offline
jQuery basic concepts, especially the $ function
Names and basic concepts of the three frameworks described in Chapter 20
of Fundamentals of Web Development: Node.js, MongoDB, Angular
Lesson 15--Server-Side Scripts and Databases
CGI as described in the notes, including advantages and disadvantages
Web servers (Apache, IIS) and web server modules for PHP and other languages.
Ruby on Rails, Java servlets and JSP, ASP .NET--Be able to recognize these
as commonly used Web technologies
Basic concept of Content management systems (CMS)
Structured Query Language (SQL) used with many database systems such as
Oracle, MySQL, Microsoft SQL Server, SQLite