"Charting the Course ... ... to Your Success!" Web Boot Camp Week 1 (Custom for Liberty) Course Summary Description This class is designed for students that have experience with HTML5 and CSS3 and wish to learn about, JavaScript and jQuery and AngularJS. Topics Introduction to the Course Designing Responsive Web Applications Introduction to JavaScript Data Types and Assignment Operators Flow Control JavaScript Events JavaScript Objects JavaScript Arrays JavaScript Functions The JavaScript Window and Document Objects JavaScript and CSS Introduction to jQuery Introduction to jQuery UI jQuery and Ajax Introduction to AngularJS Additional AngularJS Topics The Angular $http Service AngularJS Filters AngularJS Directives AngularJS Forms Testing JavaScript Introduction to AngularJS 2 Prerequisites Prior knowledge of HTML5 and CSS3 is required. Duration Five days Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically "Charting the Course ... ... to Your Success!" TDP Web Week 1: HTML5/CSS3/JavaScript Programming Course Outline I. Introduction to the Course O. Client-Side JavaScript Objects A. TDP Web Bootcamp Week 1, 2016 P. Embedding JavaScript in HTML B. Legal Information Q. Using the script Tag C. TDP Web Bootcamp Week 1, 2016 R. Using an External File D. Introductions S. Defining Functions E. Course Description T. Modifying Page Elements F. Course Objectives U. The Form Submission Event G. Course Logistics V. Chapter Summary II. Designing Responsive Web IV. Data Types and Assignment Applications A. JavaScript Comments A. What is Responsive Design? B. JavaScript Basics B. Principles of Responsive Designs C. Variables C. Strategies for Responsive Designs D. Rules for Identifiers D. Alternatives to Responsive Designs E. Reserved Words E. Using Relative Measurements F. Numbers F. A Simple Calculation G. Booleans G. Applying the Formula: Font Size H. Truthy and Falsy H. Applying the Formula: Block Elements I. Truthy and Falsy, cont'd I. Additional Responsive Concepts J. Strings J. What are Media Queries? K. String Literal Escape Codes K. What Can You Query? L. Dates and Times L. Viewport vs Screen Size M. Scope of Variables M. Defeating Mobile Device Scaling N. Quick Practice N. Media Query Breakpoints O. Chapter Summary O. Minimizing Image Size P. Chapter Summary V. Operators A. Math Operators III. Introduction to JavaScript B. Math Operators, cont'd A. What is JavaScript? C. Other Math Operations B. Where Does JavaScript Run? D. Quick Practice C. JavaScript vs Java E. Compound Assignment Operators D. History of JavaScript F. Increment and Decrement Operators E. ECMAScript Versions G. Equality Operators F. Browser Support for ECMAScript H. Comparison Operators Versions I. Boolean Logical Operators G. JavaScript is Typically Interpreted J. Conditional Operator H. Four Categories of JavaScript K. String Concatenation Functionality L. Bitwise Operators I. JavaScript Syntax Overview M. Shift Operators J. Try it Now! N. Type Conversion K. What is an Object? O. Quiz L. Object Terminology P. Other Operators M. Objects Exercise Q. Chapter Summary N. Objects in JavaScript Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically "Charting the Course ... ... to Your Success!" TDP Web Week 1: HTML5/CSS3/JavaScript Programming Course Outline (cont’d) VI. Flow Control M. Deleting Properties A. Defining Blocks N. Determining if a Property Exists B. Conditional Statements O. Enumerating Properties C. The if Statement P. Methods D. The if else Statement Q. Defining Methods with Literal Syntax E. The if else if Statement R. Method and Function Arguments F. The if else if Statement, cont'd S. The this Keyword G. Quick Practice T. Constructor Functions H. The while Loop U. User-Defined Constructor Functions I. The while Loop, cont'd V. Chapter Summary J. The for Loop K. The for Loop, cont'd IX. JavaScript Arrays L. The for Loop, cont'd A. What is an Array? M. Breaking Out of a Loop B. Creating an Array N. The switch-case Statement C. Array Indexes O. The switch-case Statement, cont'd D. Iterating Arrays P. The switch-case Statement, cont'd E. Appending Elements Q. Quick Practice F. Inserting Elements at the Beginning R. Chapter Summary G. Deleting Array Elements H. The splice() Method VII. JavaScript Events I. Using splice() to Insert A. Introduction to JavaScript Events J. Sparse Arrays B. Common JavaScript Events K. Other Useful Array Methods C. JavaScript Events Example L. Array-Like Objects D. Using Javascript to Validate a Form M. Treating Strings as Arrays E. Validating a Form, cont'd N. Chapter Summary F. Calling addEventListener G. Event Bubbling X. JavaScript Functions H. Issues with JavaScript Events A. What is a Function? I. Chapter Summary B. Functions are Objects C. Defining Functions VIII. JavaScript Objects D. Function Declarations A. What is an Object? E. Function Definition Expression B. JavaScript Objects F. Function Definition Expression, cont'd C. Categories of Objects G. Optional Arguments D. What Are Properties? H. Global Functions vs Methods E. Creating Objects I. Scope of Variables Review F. Using Object Literal Syntax J. Defining Functions within Functions G. Using the new Operator K. Closures H. Objects Are Reference Types L. Closures, cont'd I. Prototype Inheritance M. Polluting the Global Namespace J. Working with Properties N. Immediately Invoked Function K. The for-in Lop Expressions L. The Global Object O. Chapter Summary Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically "Charting the Course ... ... to Your Success!" TDP Web Week 1: HTML5/CSS3/JavaScript Programming Course Outline (cont’d) XI. The Javascript Window and Document F. Basic jQuery Syntax Objects G. Traversing Results of a Query A. The JavaScript window Object H. The jQuery ready() Function B. Timers I. Using an Anonymous ready() Function C. URLs and Navigation J. jQuery Methods D. The navigator and screen Objects K. jQuery Getters and Setters: Attributes E. Functions for Dialog Boxes L. jQuery Getters and Setters: CSS F. Opening and Closing Windows Properties G. The JavaScript document Object M. jQuery Getters and Setters: Element H. The DOM Tree Content I. Accessing Nodes N. Inserting or Deleting Elements J. Finding HTML Elements by ID O. jQuery Event Handlers K. Finding Elements by Tag Name P. Chapter Summary L. Finding Elements by CSS Class M. Finding Elements using CSS XIV. Introduction to jQuery UI Selectors A. What is jQuery UI? N. Element Content B. jQuery UI vs HTML5 O. Inserting Nodes C. Getting Started with jQuery UI P. Replacing or Deleting Nodes D. jQuery UI Animations Q. Chapter Summary E. jQuery UI Widgets F. jQuery UI Widgets, cont'd XII. JavaScript and CSS G. jQuery UI Themes A. What are Cascading Style Sheets? H. Using jQuery UI and Modernizr.js B. Defining Styles I. Using jQuery UI and Modernizr.js, C. Basic Style Syntax cont'd D. JavaScript and CSS J. Chapter Summary E. Changing an Element's CSS Class F. Changing CSS Class Example XV. jQuery and Ajax G. The CSSStyleDeclaration Object A. What is AJAX? H. Changing an Element's Style B. Traditional Web Processing Example C. AJAX Processing I. Scripting Element Visibility and D. AJAX Applications Display E. The XMLHttpRequest Object J. Changing the Visibility F. XMLHttpRequest: Raw JavaScript K. Changing the Visibility Example G. Sending a Request: Raw JavaScript L. Changing the Display Style H. Sending a Request: Raw JavaScript, M. Changing the Display Style Example cont'd N. Chapter Summary I. Updating the Document: Raw JavaScript XIII. Introduction to jQuery J. What is JSON? A. Why Do We Need a JavaScript K. Basic JSON Syntax Library? L. Using JSON in Raw JavaScript B. Introduction to jQuery M. jQuery and Ajax C. jQuery Features N. Processing JSON D. More Features O. Complete JSON Example E. Getting Started with jQuery P. jQuery and XML Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically "Charting the Course ... ... to Your Success!" TDP Web Week 1: HTML5/CSS3/JavaScript Programming Course Outline (cont’d) Q. Complete XML Example XVIII. The Angular $http Service R. Monitoring Ajax Requests A. What is AJAX? S. Handling Errors B. The XMLHttpRequest Object T. Chapter Summary C. Standard JavaScript Ajax Example D. Issues with Standard JavaScript Ajax XVI. Introduction to AngularJS E. AngularJS and Ajax A. What is AngularJS? F. What is a Promise? B. AngularJS vs jQuery G. AngularJS and Promises C. AngularJS Features H. The $http Service and Promises D. What is the MVC Architecture? I. Promises in the View E. A Typical AngularJS Architecture J. RESTful CRUD Service Overview F. AngularJS Hello, World K. Invoking the C in CRUD G. The View in AngularJS L. Invoking the R in CRUD H. What is a Scope? M.