Toggle navigation
CSCI 571
Home
Lectures
Homeworks
Grades
Software
More
Course Info
Additional Resources
Academic Integrity Policy
Piazza
Student Testimonials
CSCI571 - Web Technologies
Fall 2018
HTML
CSS
XML
JavaScript
DOM
PHP
Cookies
Ajax
jQuery
JavaScript Frameworks
HTML5
JavaScript App Builders
HTML Examples
Example 1
Adding Markup
Browsers are Tolerant
Preformatted Text
Definition Lists
Unordered Lists
Ordered Lists
3 rows x 2 Cols
Rowspan and Colspan
Cell Alignment
Cell Padding and Spacing
Table Pop Quiz
Character References
Anchors using id Attribute
CSS Examples
Setting the Center Tag
H1 Styles
Heading Styles
Inheritance
Style
Setting the Style of Body Tag
Example of a Multilingual Web Page
Using Inline Style Attribute
Using the STYLE tag
Center Entire Document
Class Attribute
ID Attribute
Specific Styles
Setting Link Colors
Clipping
Examples of margins, padding, and borders
Let's Have Fun
Headlines with Graphic Backgrounds
Creating Drop Caps
Multiple Columns
XML Examples
Example 1 - Song Description in HTML
Example 2 - Song Description in XML
Example 3 - song.css Style Sheet
Example 3 - Attaching style sheets to documents
Example 4 - (Another) Song Descriptionin XML
Example 4 - A DTD for Songs (song.dtd)
Example 4 - A Valid Song Document (with DTD)
Example 5 - Composing DTDs - Child Elements
Catalog Example - The Root Element
Catalog Example - Child Element of Catalog
Catalog Example - A Child of Category Composer
Catalog Example - Grand Children of Composer
Catalog Example - Music Catalog with Category
Composition Example - (HTML)
Composition Example - (XML)
Composition Example - Division of Composition and Description (HTML)
Composition Example - Division of Composition and Description (XML)
Composition Example - Attaching Composer Attribute (HTML)
Composition Example - Attaching Composer Attribute (XML)
Composition Example - Adding Keyword Tag (XML)
Composition Example - Finished Style Sheet (CSS)
Composition Example - Finished Document
JavaScript Examples
JavaScript Basics
First Example of JavaScript
Factorial Table
Button Alert
Date and Time
Button Example
JavaScript Browsers
Browser Check
Browser Redirect
Varying Banners
JavaScript Speed Trend Lines
JavaScript Menus
Rollover Images
Multiple Image Menu Bars
JavaScript Cookies
Setting Cookies
Testing escape() and unescape()
Getting Cookies
Full Cookie Example
JavaScript Hit Counter
Firebug
Firebug Tutorial (PDF)
Firebug Tutorial (PPT)
JavaScript Objects
Creating a New Window
Using the Document Object
Using the Browser History Object
Beatle Picker Example
Checking For Empty Form Fields
Pre-setting Form Fields
Sample Help Window
Selecting Using Radio Buttons
Selecting Using Selection Lists
Selecting Using Multiple Selection Lists
Using Date Objects
Franklin Example
Regular Expressions
Regular Expression Patterns
Password Validation Using Regular Expressions and HTML5
More JavaScript Examples
Drop Down List Plus URL
Marquee for both browsers
Follow the mouse cursor (IE only)
Rotating Ads
Change inline text Example
Select Row Data Example
Password Check Example
Email Address Example
Open Window Example
Open Window Example II
JavaScript To Avoid
Add 3 Events to a Document
DOM Examples
Example 1
document.getElementById.style.color
Example 2
document.getElementsByTagName
Example 3
document.getElementById().innerHTML
Example 4
Moving Objects Horizontally
Example 5
Reversing Nodes in a Document
Example 6
DOM and Three innerhtml Examples
Example 7
DOM setting CSS Background Property
Example 8
DOM setting CSS Background Image Property
Example 9
DOM used for switching stylesheets
Example 10
Change Letter Spacing
Example 11
Manipulating Character Data
Example 12
Retrieving Attributes
Example 13
Setting Attributes
Example 14
Aircraft Example
Example 15
Displaying the Bookstore XML File using DOM childNodes
Example 16
Displaying the Bookstore XML File using DOM children
Example 17
DOM Test Web Page
PHP Examples
show_vars.php (Print Environment Variables)
show_vars.php Source Code
$_POST Example
$_GET Example
Counter Example (File I/O)
fgetcsv Example
Survey Example (fgetcsv and fputcsv)
Regular Expressions Example (preg_match)
Movies Example (XML)
Movies Example (JSON)
Login Example ($_SESSION)
Download the Source Code for all of the Examples Above (zip file)
Simple Example of a Counter in PHP
Simple Example of Handling Form Data in PHP
Translated PHP Examples from Perl
Cookies Examples
Setting Barney Rubble Cookie Using PHP
Testing escape() and unescape() in JavaScript
A More Complete Cookie Example Using JavaScript
JavaScript Hit Counter Using Cookies
Ajax Examples
Download Two Files
Downloading Pictures from Flickr
Refreshing the Page
Previewing Links
AutoCompletion
jQuery Examples
DOM
Example 1
document.getElementById.style.color
$.fadeOut(), $.delay(), $.fadeIn()
Example 2
document.getElementsByTagName
$.length;
Example 3
document.getElementById().innerHTML
$.html();
Example 4
Uses innerhtml
$.change() and $.html();
Example 5
document.getElementById().style.left
$.css();
Example 6
document.getElementById(), parseint()
$.css();, parseInt();
Example 7
Uses childnNodes, removechild, appendChild
$.children(), $.remove(), $.append();
Example 8
Setting stylesheet properties
jQuery is just JavaScript, $("link [*rel=style][title]").each(), $.inArray();
Snippet to detect browser width
Ajax
Example 1
Example 2
Example 3
Example 4
JavaScript App Builders Examples
React
Calculator (3-part tutorial)
Calculator source (zip)
Firebase
ChatRoom
ChatRoom source (zip)
JavaScript Frameworks Examples
Angular.js (from angularjs.org)
Hello World
Todo List
Advanced Single Page App
Angular.js (local samples)
Data Binding
External Plugins
Getting Started
Populating Data
Sort and Search
Manipulate DOM
Angular 2 & 4
Binding
Populating Static Data
Populating External Data
External Plugins
Manipulate DOM
Node.js Modules
npm
nodemon
jshint
express
fastify
hono
ElysiaJS
cors
body-parser
request (DEPRECATED)
xml2js
async
q
underscore
socket.io
minimist
mocha
http-server
mongodb
mongoose
node-fetch
axios
superagent
hapi
passport
HTML5 Examples
HTML5 Document Editing API Examples
Simple Editable Area
More Complicated Editable Area
HTML5 Geolocation API Examples
Detecting if Geolocation API is supported
Simple Geolocation Example
Getting latitude and longitude
HTML5 Session History and Navigation API Examples
Session History and Navigation API Example
Detecting if the Browser Supports Session History