cnit 133

Week	Date	Lecture Notes	Homeworks	Samples
1	8/15/2016	Course Overview Course Overview Review HTML, CSS Review HTML Review CSS Publish Webpage CGI samples	CNIT Students access information (from Claudia) Install SSH client Download SSH Client 3.2.9 Create your Home page HW0 HTML5, CSS3 Review In class notes (pptx) Internet Background HTML Review CSS Review CGI Review In class samples HTML5/CSS HTML5 Template HTML/CSS1 review CSS 2 sample Pseudo Class (rollover effect) In class samples CGI/GET/PHP CGI get html PHP program using get method	HTML/CSS samples HTML5 Review CSS Review CSS Example 1 CSS Example 2 CSS Example 3 CSS Example 4 CSS Example 5 CSS Example 6 CSS Example 7 CGI Samples (all) CGI Examples (all) CGI Samples Perl/Unix/PHP Perl form Perl CGI program Unix Korn shell form Unix Korn Shell Script PHP form PHP Script
2	8/22/2016	Introduction to JavaScript Introduction to JavaScript How to run JavaScript JavaScript Basic Datatypes Variable Advanced topics variable JavaScript Primitive datatypes	HW1 JS Basic and Datatypes In class notes (pptx) JavaScript Basic JavaScript DataTypes and Variables In class samples - JS Basic Intro to JavaScript JS Object In class samples - JS Data Types/Variables Number problem Number solution	JavaScript Template JavaScript Datatypes 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
3	8/29/2016	JavaScript Control Statements 1 Expressions & Operators Popup Boxes	HW2 Expression/Operators In class notes (pptx) JavaScript Expressions and Operators In Class Samples Input number Function Samples This operator	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
*	9/5/2016	Holiday (Labor Day - No Class)
4	9/12/2016	JavaScript Control Statements 2 Control Structures	HW3 Control Structures In class notes (pptx) JavaScript Control Structures In Class Samples switch statement for/in loop break statement break statement 2 break statement with label continue statement with label Catch Error Object Try Catch Finally Object	if example if else if example switch example while example do while example for example for in example break example continue example try throw catch finally example
5	9/19/2016	JavaScript Objects (Arrays) JavaScript Objects JavaScript arrays JavaScript funcitons	HW4 Array/Functions In class notes (pptx) JavaScript Objects JavaScript Arrays JavaScript Functions In Class Samples Associative Object Array with For Loop Function Content Function Samples Function Literal Samples setTimeout() setInterval() Optional samples Placeholder middle Placeholder end Dynamic Array Length toString() concat() join() reverse() sort() slice()	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
6	9/26/2016	JavaScript Object Model JavaScript Environment Window Object Capability Testing	In class notes (pptx) JavaScript Environment JavaScript Window Object In class samples Form with Name Change Link onerror sample	JavaScript NoScript Example JavaScript Change Border Example JavaScript Change Border DHTML JavaScript Change Link Example Browser, Window Objects setTimeout method setTimeout method 2 setInterval method Navigator Information Browser Sniffering Capability Testing Window Location Window Sample Dynamic Window
7	10/3/2016	JavaScript DOM DOM DOM References	HW5 DOM In class notes (pptx) JavaScript Document Object Model (DOM) Dynamic HTML (DHTML) In class samples - DOM Dynamic Window and document Exchange data from 2 windows Anchors and Links	DOM 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
*	10/3/2016	JavaScript DHTML DHTML	In Class samples - DHTML 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
8	10/10/2016	Mid-term
9	10/17/2016	JavaScript Event Handling Event Handler	HW6 Event Handling In Class Notes (pptx) JavaScript Event and Event Handling 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
10	10/24/2016	JavaScript Forms Forms Regular Expressions	HW7 Form Validation In Class Notes (pptx) JavaScript Form Validation JavaScript Regular Expression In class samples CheckForm without JavaScript Form Validation Form Validation 2 CheckForm with Regular Expression	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 RegExp literal RegExp Constructor RegExp Flags Form Validation RegExp MySQL + PHP (hills server) CGI (PHP) review MySQL Connection review
11	10/31/2016	AJAX 1 AJAX	HW8 AJAX In Class Notes (pptx) Ajax Background Ajax Tutorial Ajax Template Ajax Template JavaScript External file In class samples CGI Review CGI review HTML CGI review php source code CGI review 2 php source code Ajax, Get, return string data Ajax, return string data (Easy) Ajax, return string data, php source code Ajax, return string data (Advanced) Ajax, Post, no data to PHP, return string data Ajax, POST method, No data to PHP (Easy) Ajax, POST method, no data to PHP, PHP source code Ajax, POST method, No data to PHP (Advanced) Ajax, Post, data send to PHP, return string data Ajax, POST method, sent data to PHP (Easy) Ajax, POST method, sent data to PHP, PHP source code Ajax, POST method, sent data to PHP (Advanced)	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
12	11/7/2016	AJAX 2	In Class Notes (pptx) Ajax Tutorial XML DOM AJAX, PHP with XML data output AJAX - note (Easy) AJAX JavaScript source AJAX PHP source AJAX - note (Advanced)	PHP with MySQL MySQL DB information PHP source code mysql_connect.php source code MySQL DB Data PHP source code
13	11/14/2016	jQuery 1 - CORE jQuery 1 jQuery 2 jquery_01.html jquery_02.html jquery_03.html jquery_04.html jQuery method Class jQuery method CSS jQuery method AddClass jQuery method each jQuery method rewrite jQuery method append jQuery event dblclick jQuery event mouse jQuery event hover jQuery effect show jQuery effect slide jQuery effect fade jQuery sample jQuery Carousel jQuery Carousel Hans Modified version jQuery UI sample jQuery UI Accordion	HW9 jQuery In Class Notes (pptx) jQuery In Class Samples jQuery Template Selecting elemnet by id, class, element tag jQuery wrapper set Looping over elements in a wrapper set jQuery methods for effects jQuery hide/show data jQuery UI jQuery UI - Datepicker jQuery and Ajax Ajax with jQuery, return string data Ajax with jQuery, POST method, No data to PHP Ajax with jQuery, POST method, sent data to PHP Ajax with jQuery, timeout option with error option Ajax with jQuery, PHP with XML output (note) iPhone Apps with HTML, CSS, and JavaScript (jQuery) http://fog.ccsf.edu/~hyip/index.html iphone.css iphone.js.txt http://fog.ccsf.edu/~hyip/iphone_app/happi/index.html	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
14	11/21/2016	jQuery Mobile (View samples with your mobile device) jQuery Mobile viewport jQuery Mobile One Web Page jQuery Mobile - mobile web site jQuery Mobile dialog transition jQuery Mobile buttons jQuery Mobile Navigation bar jQuery Mobile apply themes jQuery Mobile Collapsible blocks jQuery Mobile Accordion	HW10 Mobile jQuery	Advanced topic - HTML5, CSS3, jQuery GEOLocation API HTML5, CSS3 geolocation (display coordinators only) HTML5, CSS3, jQuery geolocation (with Google Map) HTML5, CSS3 jQuery geolocation (with error handling)
15	11/28/2016	json (1) Json Notes from Da Silva JSON	In Class Notes (pptx) JSON Samples JavaScript Array JavaScript Object JavaScript Object Embedded in Array JavaScript Array Embedded in Object JSON Object JSON Object with Array Converts from String to JSON Object (JSON.parse())
*	11/28/2016	json (2)	In Class Notes (pptx) JSON with Ajax In Class Samples JavaScript, Ajax use JavaScript function JSON.parse() JavaScript, Ajax, jQuery use jQuery utility jQuery.parseJSON() JavaScript, Ajax, jQuery use jQuery utility $.parseJSON() JavaScipt, Ajax, jQuery use jQuery function jQuery.ajax() note_json.php source code	cnit131a Homework 10 revised (input from json file) cnit131a 10_homework.json
16	12/5/2016	Final Exam Part 1
17	12/12/2016	Final Exam Part 2 Final Project due today Technologies for the Year of 2020 Cloud Computing Application Programming Interface (API) Mobile First Big Data Agile	Final Project Final Project Suggested Solution 1 Final Project Suggested Solution 2 JavaScript samples - HTML/ARRAY/OBJECT/AJAX	JavaScript Review

CNIT 133 Interactive Web Pages - JavaScript and AJAX

CRN 72375, Sec 501 (3 units)

Instructor: Hans Yip