CNIT 133 Interactive Web Pages - JavaScript and AJAX

CRN 32486, Sec 501 (3 units)

Instructor: Hans Yip

Week	Date	Lecture Notes	Homeworks	Samples
*	1/16/2012	Martin Luther King Jr. Birthday (No Class)
*	1/23/2012	Lunar New Year (No Class)
1	1/30/2012	Course Overview Course Overview Introduction 1 Introduction 2 Background JavaScript References	Install SSH client In class samples CGI get html PHP program using get method	CGI Examples (all) CGI Samples Perl form Perl CGI program Unix Korn shell form Unix Korn Shell Script PHP form PHP Script
2	1/30/2012	Review XHTML, CSS XHTML CSS HTML, CSS Publish Webpage	Create a Home page In class samples CSS 2 sample Pseudo Class (rollover effect)	XHTML Review CSS Review CSS Example 1 CSS Example 2 CSS Example 3 CSS Example 4 CSS Example 5 CSS Example 6 CSS Example 7
3	1/30/2012	Introduction to JavaScript Introduction JavaScript JavaScript How to run JavaScript	HW1 In class samples Intro to JavaScript	JavaScript Template
4	2/6/2012	JavaScript Basic Datatypes Variable JavaScript 3 Primitive Datatypes	HW2 In class samples Number problem Number solution	JavaScript String Examples JavaScript Number Examples JavaScript Build-in Number Conversion Functions JavaScript Build-in Number Function JavaScript Build-in String Function JavaScript Boolean Examples JavaScript Function Examples Typeof Examples
5	2/13/2012	JavaScript Control Statements 1 Expressions & Operators Popup Boxes	HW3 In Class Samples Input number Function Samples	Concatenation by value operator Conditional operator Delete operator New operator This operator Function - Passing Parameter Function - return data Alert box Confirm box Prompt box Passing Parameter with Prompt
*	2/20/2012	Washington's Birthday (No Class)
6	2/27/2012	JavaScript Control Statements 2 Statements	HW4	if example if else if example switch example while example do while example for example for in example break example continue example function example try throw catch finally example
7	3/5/2012	JavaScript Objects (Arrays) Objects & Arrays JavaScript Objects (Functions) Functions	HW5	Objects and Arrays Object sample Associative Arrays Review Data types control statements Review Array Object Functions setTimeout setInterval Slide Show For/in Loop Pre-written Header & Footer Header Footer header.js footer.js How to debug errors in JavaScript? Web page with JavaScript errors Reformat JavaScript codes Web page fixed Debug the following JavaScript errors? Debug program 1 Debug program 2
8	3/12/2012	Mid-term		Mid Term Review
9	3/19/2012	JavaScript Object Model Browser/Window	HW6 In class samples Form with Name	JavaScript NoScript Example JavaScript Change Border Example JavaScript Change Link Example Browser, Window Objects Window/Document Objects setTimeout method setTimeout method 2 setInterval method Navigator Information Browser Sniffering Capacity Testing Window Location Window Sample Dynamic Window
*	3/26/2012	Spring Recess (No Class)
10	4/2/2012	JavaScript DOM DOM	HW7 In class samples Dynamic Window and document Exchange data from 2 windows	A clock Document URL Reload & Print Title,URL getElementById getElementByName Change Link Image resize Update table content Display Cell content Display Cell content and last row is clickable HTML Form Product simple form Product Form Product Form loop
11	4/9/2012	JavaScript DHTML DHTML	HW8 In class samples DOM and CSS	DHTML Samples CSS Style Attributes DHTML Visibility HTML CSS only HTML CSS DHTML Enlarge Text 1 Enlarge Image Moving Objects All DHTML Page Change bgcolor Text innerHTML OnMouseMove OnMouseMove2 Onload/OnUnload Text Tooltip Typewriter Message Enlarge Text Blinking Header Shaking Link DHTML Menu All Menus HTML/CSS Menu JavaScript Menu DHTML Menu Scrolling Text Scrolling Content Scrolling Content 2
12	4/16/2012	JavaScript Event Handling Event Handler	HW9 In class samples HTML without Event HTML with Event	onBlur onChange onClick onFocus onKeyup onLoad onMousemove onSubmit onUnload More samples onLoad onUnload onChange onSubmit onBlur onfocus onMouseOver onClick onMouseMove
13	4/23/2012	JavaScript Forms Forms	HW10 In class samples Form Validation 1 Form Validation 2 Form Validation 3	Form only Form with JavaScript Form with JavaScript 2 JavaScript with CGI JavaScript with ksh JavaScript with Perl JavaScript with PHP JavaScript Form examples Change Background Color Change Text Color Change Check Box Form Validation 1 Form Validation 2 Select with JavaScript is_alpha samples is_alpha_a is_alpha_b Regular Expressions Regular Expressions Notes RegExp literal RegExp Constructor RegExp Flags Form Validation RegExp MySQL + PHP CGI (PHP) review MySQL Connection review
14	4/30/2012	AJAX AJAX	In class samples CGI review HTML CGI review php source code CGI review 2 php source code Ajax, return string data Ajax, return string data, php source code Ajax, POST method, No data to PHP Ajax, PSOT method, sent data to PHP	AJAX sample AJAX JavaScript source AJAX PHP source AJAX, PHP with XML data output AJAX - note AJAX JavaScript source AJAX PHP source AJAX - Synchronous, multiple data, XML file AJAX - contact AJAX JavaScript source xml file
*	5/7/2012	Ajax, Review	jQuery	Selecting Page Element by ID Selecting a Set of Elements Selecting Elements by Style Running Code When a Page is Ready Selecting the First of a Set of Elements Showing and Hiding Page Elements Selecting One of a Set of Elements Creating Visual Effects Creating New HTML Elements Looping over Elements in a Wrapped Set Reading Attribute Values Setting Attribute Values Rewriting Elements HTML Rewriting Elements Text Appending COntent to Elements Moving Page Elements Inserting Elements Editing the Value Attribute Binding an Event Handler to an Event Getting Mouse Coordinates Binding Event Handlers using Shortcuts Capturing Hover Events Change Background Color
15	5/14/2012	Final Exam Part 1		Final Exam Part 2 (answer two only, due next week) Final Exam Question 1 Final Exam Question 2 Final Exam Question 3 Final Exam Question 4
16	5/21/2012	Final Exam Part 2 Final Project due today	Final Project Final Project Suggested Solution 1 Final Project Suggested Solution 2 JavaScript samples - HTML/ARRAY/OBJECT/AJAX	All assignments due today

Contact me: hyip@ccsf.edu