Fall 2012
Lectures
Lecture No |
Topics/Activities |
Date |
|
1 |
Computer
Functions and Applications, by Prof. Paul Lin, 2001 Lecture Note - Ch 1 PDF file: 8/21 3:00-4:15 PM, ET 364, Echo 360 Recorded Lecture 1, 8/21 |
8/21 |
|
2 |
Lecture Note - Ch 1
(Continue); Chapter examples Fig. 2.1, Fig. 2.2;
Echo 360 Recorded Lecture 2, 8/23 Also See the e-Book "Building Web Applications with HTML," by Prof. Paul Lin Chapter 2 Examples: Fig. 2.1 - First HTML example; Fig. 2.2 - Heading elements; Fig. 2.3 - Linking to other web pages; Fig. 2.4 - Linking to an e-mail address; Fig. 2.6 - Including images in HTML files; Fig. 2.7 - Images as link anchors; Fig. 2.9 - Inserting special characters; Fig. 2.10 - Unordered list containing hyperlinks; Fig. 2.11 - Nested lists and ordered lists; Fig. 2.12 - Creating basic tables; Fig. 2.13 - Complex HTML tables; Fig. 2.14 - Form with a text field and hidden fields; Fig. 2.15 - Form using a variety of components; Fig. 2.16 - Internal Linking; Fig. 2.17 - Meta elements provide keywords and a description of a page. |
8/23 |
| 3 | Chapter 2. Introduction to HTML
5: Part I; Discusse Chapter 2 examples from Fig. 2.3 to Fig. 2.17 as shown
above W3C Reference: HTML 5 - Vocabulary and associated APIs for HTML and XHTML, Editor's Draft 2012/8/24 **Echo 360 Recorded Lecture 3, 8/28 |
8/28 |
| 4 | Discussed topics:
(1) section 2.12 Internal linking; 2-13 meta Elements; Chapter 2 questions, problems pp. 72-75; I/O concepts and redirection to HTTP Port 80 (see hand written note here) (2) Extra lecture note on Chapter 2 Web Page Design and Web Site of Prof. Lin's e-book entitled "Building Web Applications with HTML", 2/7/2012 Chapter 3 HTML 5: Part II, Examples (for reference only, not discussed in class): Fig. 3.01 - New HTML5 form input types and attributes; Fig. 3.17 - New HTML5 form autocomplete attributes and datalist element; Fig. 3.18 - New HTML5 section elements; **Echo 360 Recorded Lecture 4, 8/30 |
8/30 |
| 5 | References: W3C CSS Resource Center, HTML & CSS, http://www.w3.org/standards/webdesign/htmlcss Tutorial for HTML and CSS, http://www.w3.org/2002/03/tutorials.html#webdesign_htmlcss Style Sheets, http://www.w3.org/TR/html4/present/styles.html CSS Validation Service, http://jigsaw.w3.org/css-validator/ Lecture 5: Ech0 360 captured, (1) Review/discussion hw2, (2) Why CSS, (3) In-style CSS, (4) Embedded style sheet, (5) Examples Fig. 4.1 & Fig. 4.2; see written class note **Echo 360 Recorded Lecture 5, 9/4 Chapter 4 Intro to Cascading Style Sheets (CSS) Part I - HTML Examples Fig. 4.1 Using inline styles (inline.html); Fig. 4.3. Embedded style sheets (embedded.html) Fig. 4.6.Inheritance in style sheets (advanced.html); Fig, 4.7. External style sheet (styles.css) Fig. 4.8. Linking an external style sheet (external.html); Fig. 4.9. Absolute positioning of elements (positioning.html) Fig. 4.10. Relative positioning of elements (positioning2.html) Fig. 4.11. Adding background images and indentation (background.html) Fig. 4.12. Element dimensions and text alignment (width.html); Fig. 4.14. Borders of block-level elements (borders.html) Fig. 4.15. Floating elements (floating.html); Fig. 4-16. CSS media types (mediatypes.html) Fig. 4-17. CSS drop-down menu (dropdown.html); Fig. 4.18. pt measurement for text size - Optional user style sheet (user_absolute.html) Fig. 4.19. A user style sheet (userstyles.css); Fig. 4.22. em measurement for text size (user_relative.html) |
9/4 |
| 6 | ** Discussed Chapter
Examples 4.3 to 4-17 ** Reported HTTP errors while you try to watch recored lectures using Internet Explorer 9; try other browsers such as Google Chrome, etc ** Read an article from Website Magazine: The Biggest Mistakes in Website Design, **Echo 360 Recorded Lecture 6, 9/6 |
9/6 |
| 7 | e-Book "Developing
Advanced Web Applications Using JavaScript," by Prof. Paul Lin Ch.1 JavaScript Basics Ch.2 JavaScript Objects and Methods Chapter 6. JavaScript: Intro to Scripting: Examples Fig. 6.1 Displaying a line of text, (welcome.html) Fig. 6.2 Printing on the line with separate statements (welcome2.html) Fig. 6.3 Alert dialog displaying multiple lines (welcome3.html) Fig. 6.5 Prompt box used on a elcome screen (wlcome4.html) Fig. 6.7 Adding script (addition.html) Fig. 6.14 Using equality and relational operators (welcome5.html) **Echo 360 Recorded Lecture 7, 9/11 |
9/11 |
| 8 | Chapter 7. JavaScript:
Control Statements I, and all examples, Echo 360 recorded Chapter 7 Examples Fig. 7.7 Counter-controlled repetition to calculate a class average. (average.html) Fig. 7.9 Sentinel-controlled repetition to calculate a class average (average2.html) Fig. 7.11 Examination-results calculation (analysis.html) Fig. 7.14 Preincrementing and postincrementing (increment.html) **Echo 360 Recorded Lecture 8, 9/13 |
9/13 |
| 9/10/11 | Chapter
8. JavaScript: Control Statements II, and all example, Chapter 8 Examples Fig. 8.1 Counter-controlled repetition (WhileCounter.html) Fig. 8.2 Counter-controlled repetition with the for statement (ForCounter.html) Fig. 8.5 Summation with the for repetition structure (Sum.html) Fig. 8.6 Compound interest calculation with a for loop (Interest.html) Fig. 8.7 Using the switch multiple-selection statement (SwitchTest.html) Fig. 8.9 Using the do..while repetition statement (DoWhileTest.html) Fig. 8.11 Using the break statement in a for statement (BreakTest.html) Fig. 8.12 Using the continue statement in a for statement (ContinueTest.html) Chapter 17 Web Servers, ** covering pp. 606-614, introduction to Web servers ** Echo 360 Recorded Lecture 9, 9/18 ** Echo 360 Recorded Lecture 10, 9/25 ** Echo 360 Recorded Lecture 11, 9/27 |
9/18,25, 27 |
| 12/13 | **
Echo 360
Recorded Lecture 12, 10/4 (pre-recorded on Oct.
3) Chapter 9. JavaScript: Functions Chapter 9 Examples Fig. 9.2 Programmer-defined function square (SquareInt.html) Fig. 9.3 Programmer-defined maximum function (maximum.html) Fig. 9.4 Random Integers, shifting and scaling (RandomInt.html) Oct. 11 ** Echo 360 Recorded Lecture 13, 10/11 Fig. 9.5 Random dice image generation using Math.random (RollDice.html) Fig. 9.6 Rolling 12 dice and displaying frequencies (RollDice.html) Fig. 9.7 Craps game simulation (Craps.html) Fig. 9.8 Web page that displays a video of the basic rules for the dice game Craps (CrapsRules.html) Fig. 9.9 Scoping example (Scoping.html) Fig. 9.12 Factorial calculation with a recursive function (FactorialTest.html) Chapter 10. JavaScript Arrays Chapter 10 Examples Fig. 10.3 Web Page for showing the results of initializing arrays (InitArray.html) (uses: InitArray.js, and table stylesheet: tablestyle.css) Fig. 10.4 JavaScript source code - Create two arrays, Initialize their elements and Display (InitArray.js) Fig. 10.5. Web page for showing the results of initializing arrays (InitArray2.html) (also uses InitArray2.js) Fig. 10.6 Initializing arrays with initializer lists (InitArray2.js) |
10/2- Exam 1 10/4 10/11 |
| 14/15 | Oct. 16, Lecture note **Echo 360 Recorded Lecture 14, 10/16 Chapter 10. JavaScript Arrays Chapter 10 Examples Fig. 10.3 Web Page for showing the results of initializing arrays (InitArray.html) (uses: InitArray.js, and table stylesheet: tablestyle.css) Fig. 10.4 JavaScript source code - Create two arrays, Initialize their elements and Display (InitArray.js) Fig. 10.5. Web page for showing the results of initializing arrays (InitArray2.html) (also uses InitArray2.js) Fig. 10.6 Initializing arrays with initializer lists (InitArray2.js) Oct. 18, Extra Lecture note (extra note on array applications and multidimensional arrays) ** Echo 360 Recorded Lecture 15, 10/18 Chapter 10. JavaScript Arrays Fig. 10.13 HTML Document that demonstrates passing arrays and individual array elements to functions (PassArray.html) Fig. 10.14 PassArray.js used by PassArray.html Fig. 10.15 HTML documnet that displays the results of sorting an array (Sort.html) Fig. 10.16 Sort.js used by Sort.html Fig. 10.17 HTML document for searching an array with indexOf (serach.html) Fig. 10.18 search.js used by search.html Fig. 10.20 HTML documents showing multidimensional array initialization (InitArray3.html) Fig. 10.21 InitArray3.js used by InitArray3.html |
10/16 1018 |
| 16/17 | Echo 360
Recorded Lecture
16, 10/23 Chapter 11. JavaScript: Objects Fig. 11.4 HTML5 document to demonstrate methods chartAt, chartCodeAt, fromCharCode, toLowercase and toUpperCase (CharacterProcessing.html) **Fig. 11.5 CharacterProcessing.js Fig. 11.6 HTML document to demonstrate methods indexOf and lastIndexOf (SearchingStrings.html) **Fig. 11.7 SearchStrings.js style.css Fig. 11.8 HTML document demonstrating String methods split() and substring() (SplitSubString.html) **Fig. 11.9 SplitAndSubString.js style.css Fig. 11.11 HTML document to demonstrate Date-Object methods (DateTime.html) **Fig. 11.12 DateTime.js style.css Fig. 11.17 Favorite Twiter Searches web application (FavoriteTwitterSearchs.html) **Fig. 11.18 style.css **Fig. 11.19 FavoriteTwitterSearchs.js Echo 360 Recorded Lecture 17, 10/25 Review for Exam 2, Oct. 30 (all taking online ); Exam 2 Available from 3 PM to 11:30 PM (Oct. 30, Tuesday) Makeup for Exam 1 can be taken immediately after you finish the Exam 2; The final grade for Exam 1 will be the averaged score of Exam1(first score) + Exam1(second score).; Makeup Exam 1, Available from 4 PM to 11:30 PM (October 30, Tuesday) |
10/23 10/25 |
| 18/19 |
Echo 360
Recorded Lecture 18, 11/1 Chapter 12. Document Object Model (DOM): Objects and Collections Fig. 12.2 Demonstration of a document's DOM tree (domtree.html) **Fig. 12.3 CSS for basic DOM functionality example (style.css) Fig. 12.4 HTML5 document that's used to demonstrate DOM functionality for dynamically adding, removing and selecting elements (dom.html) **Fig. 12.5 dom.js style.css Fig. 12.13 Using the links collection (collections.html) **Fig. 12.12 style.css CSS for collections.html **Fig. 12.14 Script for demonstrate using the links collection (collections.js) Fig. 12.15 Dynamic styles (dynamicstyles.html) **Fig. 12.16 dynamicstyle.js script to demonstrate dynamic styles Fig 12.18 Dynamic styles used for animation (coverviewer.html) **Fig. 12.17 CSS for coverviewer.html (style.css) **Fig. 12.19 coverviewer.js Echo 360 Recorded Lecture 19 11/6 Chapter 13 JavaScript Event Handling Fig. 13.1 Demonstrating the Windows' load event (onload.html) **Fig. 13.2 Script that register window's load event handler and handles the event (load.js, and stylesheet) Fig. 13.3 Simple drawing program (draw.html) ** Fig. 13.4 JavaScript code for the simple drawing program, (draw.js and stylesheet) Fig. 13.6 HTML document to demonstrate mouseover and mouseout. (mouseoverout.html) ** Fig. 13.7 Processing the mouseover and mouseout events. (mouseoverout.js and stylesheet) Fig. 13.8 Demonstrating the focus and blur events. (focusblur.html) ** Fig. 13.9 JavaScript code for Fig.13.8 (focusblur.js and stylesheet) ** Fig. 13.10 Demonstrating the focus and blur events (focusblur.js) Fig. 13.11 Canceling event bubbling (bubbling.html) ** Fig. 13.12 Cancelling event bubbling (bubbling.js) ** Other example submitreset.html and submitreset.js |
11/1 11/6 |
| 20/21/22 |
Echo 360
Recorded Lecture 20, 11/8 References ** W3C Extensible Markup Language (XML), 1.0 (Fifth Edition), 2008/11/26 *** Document Type Definitions (DTDs); DTD for XML Schema, http://www.w3.org/2001/XMLSchema.dtd ** XML and Enterprise Application Integration, Nov. 14-15, 2003, by Paul Lin Lecture on Chapter 15. Extensible Markup Language Fig. 15.1 XML that describe a baseball player's information (player.xml) Fig. 15.2 XML used to markup an article (article.xml) Echo 360 Recorded Lecture 21, 11/13 ** Course syllabus revision ** Webmaster's knowldge & skills: Computer operating systems, HTML, CSS, JavaScript, XML, Web servers, server side-scripts (Perl, PHP, Servelet, etc), AJAX (Asynchronous JavaScript & XML), Databases References: ** W3C: URIs, URLs, and URNs: Clarifications and Recommendations 1.0, 2001 ** XML Validator http://www.xmlvalidation.com ** W3C XML Schema, www.w3c.org/XML/Schema ** W3C XML Schema 2001 (Sept. 2005), http://www.w3.org/2001/XMLSchema ** W3C XML Schema Built-in Types (Oct.28, 2004 Recommendation), www.w3.org/TR/xmlschema-2 **www.w3schools.com/schema/default.asp Chapter 15. Extensible Markup Language Fig. 15.4 Business letter marked up with XML (letter.xml, letter.dtd) Fig. 15.5 XML namespace demonstration (namespace.xml) Fig. 15.6 Default namespace demonstration (defaultnamespace.html) Fig. 15.7 Document Type Definition (DTD) for a business letter (letter.dtd) Fig. 15.8 Error message when validating letter.xml with a missing contact name (letter2.xml , letter.dtd) Fig. 15.9 Schema-valid XML document describing a list of books (book.xml) **Fig. 15.10 XML Schema document for book.xml (book.xsd) Echo 360 Recorded Lecture 22, 11/15 Chapter 15. Extensible Markup Language Fig. 15.9 Schema-valid XML document describing a list of books (book.xml) **Fig. 15.10 XML Schema document for book.xml (book.xsd) Fig. 15.13 XML document using the laptop element in computer.xsd (laptop.xml) **Fig. 15.12 XML Schema document defining simple and complex types (computer.xsd) Exam 3 scheduled on Nov. 29 |
11/8 11/13 11/15 |
| 23/24 |
Echo 360 Recorded Lecture
23, 11/20 Chapter 15. Extensible Markup Language XML Volcabularies ** MathML, http://www.w3.org/1998/Math/MathML Fig. 15.14 Expression marked up with MathML and displayed in the Firefox browser (mathml1.mml) Fig. 15.15 Algebraic equation marked up with MathML and displaed in the Firefox browser (mathml2.mml) Fig. 15.16 Calculus expression marked up with MathML and displayed in the Firefox browser (mathml3.mml) XHTML document: XML + Extensible Stylesheet Language (XSL) and XSL Transformation (XSLT processor) http://www.w3.org/1999/XSL/Transform ** XSL Transformations (XSL) Version 1.0 (Nov. 16, 1999), Version 2.0 (Jan. 23, 2007), and working draft Version 3.0 (July 10, 2012) Fig. 15.18 XML document that describe various sports (sports.xml) **Fig. 15.19 XSLT that creates elements and attributes in an HTML5 document (sports.xsl, style.css) Fig. 15.20 XML document containing book information (sorting.xml) **Fig. 15.21 XSL document that transforms sorting.xml into HTML5 (sorting.xsl, style.css) An example (Example 6) from Prof. Lin, http://www.etcs.ipfw.edu/~lin/CECourses/2_HTML/Lectures/9XML_intro.html: Binding XML data and displays it with an IE web browser Fig. 15.24 Traversing and XML document using the XML DOM (XMLDOMTraversal.html) **Fig. 15.25 JavaScript for traversing an XML document using the XML DOM (XMLDOMTraversal.js, style.css, article.xml ) ** Example testing: http://test.deitel.com/iw3htp5/ch15/Fig15_24-25/XMLDOMTraversal.xml Fig. 15.32 Using XPath to locate nodes in anXML document (xpath.html) **Fig. 15.33 Using XPath to locate nodesin an XML document (xpath.js, style.css) Fig. 15.34 XML document that describes various sports (sports.xml) |
11/20 |
| 25 |
Echo 360 Recorded Lecture
24, 11/27 Chapter 16 AJAX-Enabled Rich Internet Applications with XML and JSON (JavaScript Object Notation) ** AJAX (Asynchronous JavaScript and XML), JSON (JavaScript Object Notation) ** AJAX Standard Specification References, AJAX supported Web browsers and Mobile Web browsers Fig. 16.5 Asynchronous display content without reloading the page (SwitchContent.html) Fig. 16.8 Image catalog that uses Ajax to request XML data asynchrously (PullImageOntoPage.html) |
11/27 |
| 26 |
Using JASON Fig. 16.9-16-10 Ajax-enabled address-book application (addressbook.html, addresssbook.js, style.css) http://test.deitel.com/iw3htp5/ch16/fig16_09-10/AddressBook.html Fig. 16.11 Address-book data formatted in JSON (Calender.tml, Calender.js, style.css): Echo 360 Recorded Lecture 25, 12/4 Chapter 18 Database; SQL, MySQL, LINQ and Java DB ** Relational Databases ** Databases and SQL References *** SQL, http://en.wikipedia.org/wiki/SQL *** ANSI SQL Standards, http://docs.oracle.com/cd/B13789_01/server.101/b10759/ap_standard_sql001.htm ** MySQL, http://www.mysql.com/ ** Java DB Reference, http://www.oracle.com/technetwork/java/javadb/documentation/index.html ** Oracle Database, http://www.oracle.com/us/products/database/overview/index.html ** IBM DB2, http://www-01.ibm.com/software/data/db2/ ** Microsoft SQL Server, http://www.microsoft.com/sqlserver/en/us/default.aspx ** Microsoft LINQ (Language Integrated Query), http://msdn.microsoft.com/en-us/library/vstudio/bb397926.aspx |
12/4 |
| 27 |
Echo 360 Recorded Course Review Lecture 26, 12/6 Review of the Course, review note |
12/6 |