• Introduction and syllabus. Course website. Class policies and guidelines.
• Course prerequisite issue and the compromised solution.
• Team projects → 2-3 students per team.
• Introduction to web design. Current web technologies review.
• Online tutorials - w3schools.com & numerous other sites.
• Web application structure. Web MVC frameworks.
• Readings - Chapters 1-6 from "HTML&CSS design and build websites" or relevant HMTL5 resources.

1/08 Mon Add/Drop and Late Registration via RAIL or at Ikenberry Hall, 9:00 am-4:00 pm.

1/12 Fri Last Day to Add/Drop or Late Register via RAIL or at Ikenberry Hall, 9:00 am-4:00 pm.

• Front-end design for the "view" part. Understand basic web design principles.
• Three areas of the front-end. Structure ↔ HTML. Format ↔ CSS. Behavior ↔ JavaScript.
• HTML5 new features. Introduction/review of CSS and JavaScript concepts.
• Client-side scripting. Embedded and external JavaScript. Examples.
• Readings - Chapters 7-10 from "HTML&CSS design and build websites" or relevant HMTL5 resources.

1/15 Mon Martin Luther King, Jr. Day – Holiday.

1/19 Fri Last Day for Instructor-Approved Late Adds via RAIL.

• Project 1 check and demo.
• Define and style inline and block elements.
• Understand style inheritance and overriding in the DOM picture.
• Animations using CSS, JavaScript, or a library such as jQuery.
• Readings - Chapters 11-12 from "HTML&CSS design and build websites" or relevant HMTL5 resources.

• Fluid/flexible/responsive design for different devices. Phones → Pads → Notebooks → Desktops.
• Use percentage on dimension properties to make them scalable with viewport. Rendering difference between "width" and "height".
• Demo of adding animation to webpages using JavaScript and jQuery.
• Use of "z-index" and "float" for block and inline-block elements to make flexible page layouts.
• Review of server side form processing and HTML form controls. New form controls in HTML5. Example demos.
• Readings - Chapters 13-14 from "HTML&CSS design and build websites" or relevant HMTL5 resources.

• Finish project 2. Project 2 check and demo on Wednesday.
• Images. Layout and new HTML5 layout tags demo.
• Process and design. Practical guidelines and rules. Ever changing web design.
• Readings - Chapters 15-19 from "HTML&CSS design and build websites" and relevant HMTL5 resources.

• JavaScript - an introduction, the language history, and common practices. CSS rendering engine and JavaScript interpreter. Progressive enhancement.
• Document Object Model (DOM). JavaScript objects - properties, methods, and events. "window" and "document" objects. Add contents using document.write().
• JavaScript types. Numerical, string, Boolean, array, object, undefined, null, etc.
• Please focus on JavaScript syntax features which are different from Java to avoid potential errors in your programs.
• In-class exercise answer.
• Readings - Chapters 1, 2 from "JavaScript&jQuery Interactive Front-end Web Development".

• Function definition. Objects: literal notation, object constructor, and constructor function. Adding and removing properties.
• Browser object model. Document object model. Global objects provided by JavaScript - Strings, Numbers, Dates, etc.
• Control structures - selection structures and loops. Understand "truthy and falsy" objects and creative ways to use them.
• Performance consideration - loops. Load minimum JavaScript code with the page and use events to run computation intensive tasks.
• Finishing project #3 on Friday.
• Readings - Chapters 3, 4 from "JavaScript&jQuery Interactive Front-end Web Development".

Mid-term Exam Week.

2/23 Fri Last Day to Apply for August and December 2018 Graduation (Registrar’s Office).

• Document Object Model (DOM) review. DOM tree and 4 types of nodes.
• Access and update node(s) via an ID, a class, a tag, or more general, a CSS selector. NodeList.
• Access, update, and delete HTML (tags & text in subtrees), text, and attributes.
• Readings - Chapter 5 from "JavaScript&jQuery Interactive Front-end Web Development".

• Events and event handling using JavaScript.
• Event binding methods - HTML event handlers, DOM event handlers, and DOM event listeners.
• Passing arguments or calling multiple handler functions using an anonymous function.
• Event flow in the DOM tree. Event bubbling and event capturing.
• The messenger - event object. Event delegation by an ancestor. Changing default behavior.
• Event types - UI, keyboard, mouse, focus, and form events.
• Mutation events and observers. HTML5 events.
• Readings - Chapter 6 from "JavaScript&jQuery Interactive Front-end Web Development".

3/9 Fri Last Day to Withdraw from a Full Semester Class — See Advisor by Noon.

Spring Break

• jQuery and the min version. Advantages of jQuery. Function jQuery() → $(). Object type jQuery.
• Steps → Find elements using CSS-style selectors & Do something to them using jQuery functions.
• Many jQuery functions are overloaded to both "get" and "set" contents.
• Implicit iteration. Chaining. Shorthand notation for document.ready event.
• Retrieving and updating functions → .html() | .text() | .replaceWith() | .remove()
• Inserting functions → .before() | .after() | .prepend() | .append()
• Attribute functions → .attr() | .removeAttr() | .addClass() | .removeClass()
• Readings - Chapter 7 from "JavaScript&jQuery Interactive Front-end Web Development".

3/19 Mon First Day of Summer 2018 RAIL Registration for Continuing Students, 9:00 am-4:00 pm.

3/21 Wed First Day of Academic Advisement for Continuing Students for Fall 2018.

• .css() → getting/setting CSS properties. Note – It is better to change the class attribute to trigger new style rules.
• Using .each() to process each item in the selection. Difference between this and $(this).
• jQuery events. Using event function .on(). Event object and its properties. Using filters to listen to a subset of the selection. Passing extra information to event handlers.
• jQuery effects. Animating CSS properties.
• Accessing the DOM tree. Adding and filtering elements in a selection. Using index numbers in a jQuery object.
• Special selectors for form elements. Form methods and events.
• Cut, copy, and paste a jQuery selection.
• Box dimensions. Window and page dimensions. Item positions on the page.
• Adding jQuery from a CDN. jQuery documentation and free plugins. JavaScript libraries.
• Readings - Chapter 7 from "JavaScript&jQuery Interactive Front-end Web Development".

• Review jQuery - Selections and functions. Review examples from the textbook.
• Asynchronous processing model and AJAX. Updating part of a page. XMLHttpRequest object.
• Loading different data formats (HMTL, XML, and JSON) using AJAX.
• Loading data from different domains. JSON with padding → JSONP.
• Using jQuery to handle AJAX requests and responses. Sending form data using the .serialize() function.
• $.ajax() function and its 30+ settings for greater control over AJAX requests.
• APIs with different levels of abstraction. Browser, script, and platform APIs. API calls.
• HTML5 API examples. Geolocation API and web storage API for local and session storage. History API.
• Script API examples. jQuery UI accordion and tabs. jQuery UI form. Slider input and date picker.
• AngularJS. Model-View-Controller (MVC) model. Examples - Binding local data. Getting/processing external JSON data from file/database.
• Platform API example - Google maps API. Role of API keys. Map options & custom controls. Styling maps. Adding markers.
• Readings - Chapters 8, 9 from "JavaScript&jQuery Interactive Front-end Web Development".

4/2 Mon First Day of Fall 2018 RAIL Registration for Continuing Students, 9:00 am-4:00 pm.

4/4 Wed Last Day of Academic Advisement for Continuing Students for Fall 2018.

• JavaScript execution context, variables object, and lexical scope.
• Exceptions & Error objects. Exception handling. "try-catch-finally" blocks. Throwing exceptions.
• Using browser's console methods (log, info, warn, error, group, groupEnd, table, assert) to debug. Debugging tips.
• Breakpoints and conditional breakpoints (keyword debugger). Stepping through code and functions.
• Making popular content panels using JavaScript&jQuery – accordions, tabs, photo viewers, modal windows, and sliders.
• Separation of content (HTML), presentation (CSS), and behavior (JavaScript). Updating class properties to trigger style rules.
• Turning functions to jQuery plugins (example – accordion). Immediately Invoked Function Expressions (IIFEs).
• Readings - Chapters 10, 11 from "JavaScript&jQuery Interactive Front-end Web Development".

• Static filtering using a foreach loop or the "filter" function.
• Dynamic filtering with user inputs. Filtering tagged images. Search by filtering.
• Array's sort function. Custom sort functions for ascending, descending, and random orders. Object "compare".
• Form enhancement and validation using JavaScript or jQuery UIs. HTML5 form controls.
• Examples – Disabling the submit button. Checkboxes. Radio buttons. Select boxes. Character counters. Placeholders. Polyfills. Form validation.
• Final team project demos/presentations.
• Readings - Chapters 12, 13 from "JavaScript&jQuery Interactive Front-end Web Development".

4/20 Fri McMurran Scholars Convocation; Last Day of Classes; Last Day for Complete Withdrawal from Semester.

Final Exam Week.

No final exam. Grades depend on completion of web projects.