Web Boot Camp Week 1 (Custom for Liberty)

"Charting the Course ...

... to Your Success!"

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

"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

"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

"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. Invoking the U in CRUD I. What is a Directive? N. Invoking the D in CRUD J. Using a Repeater O. Complete Example K. Two-Way Data Binding P. Chapter Summary L. What is a Controller? M. Controllers Define a Scope XIX. AngularJS Filters N. What is a Module? A. Introduction to Filters O. AngularJS and Forms B. Predefined Filters P. AngularJS and Ajax C. Formatting and Transformation Filters Q. Complete Ajax Example D. Array-Based Filters R. Introduction to AngularJS 2 E. The filter Filter S. Chapter Summary F. Filtering using a Filter Object G. The limitTo Filter XVII. Additional AngularJS Topics H. The orderBy Filter A. What is a Module? I. Piping Multiple Filters B. Creating a Module J. Filters are Functions C. Using an IIFE K. Invoking Filters From JavaScript D. What is a Controller? L. Writing a Custom Filter E. Using $scope in a Controller (Or Not) M. Chapter Summary F. What is a Service? G. Using a Service As a Model XX. AngularJS Directives H. Modules and Dependency Injection A. What is a Directive? I. Minification B. Directive Name Matching J. Defeating Minification C. Creating Custom Directives K. What is a Directive? D. A Hello, World Directive L. Directive Name Matching E. Directives as Attributes or Elements M. Angular Expressions F. Expressions in Markup Templates N. Introduction to Filters G. Directive Scopes O. Predefined Filters H. Isolate Scope P. Event Handling I. Isolate Scope, cont'd Q. Event Handling, cont'd J. Working with the DOM R. Chapter Summary

"Charting the Course ...

... to Your Success!"

TDP Web Week 1: HTML5/CSS3/JavaScript Programming

Course Outline (cont’d)

K. Link Function Example H. Jasmine Built-in Matchers L. Rendering a Directive's Child Nodes I. Jasmine Setup and Teardown M. A Simple Transclusion Example Methods N. Transclusion and Scope J. Writing a Test Runner HTML Page O. Controllers in Directives K. Writing a Test Runner HTML Page, P. A Simple Directive Controller cont'd Q. More on the require Option L. Writing a Test Runner HTML Page, R. Link vs Controller Functions cont'd S. Chapter Summary M. Introduction to Karma N. Installing Karma XXI. AngularJS Forms O. The Karma Configuration File A. Forms Review P. Karma and Browsers B. Behind the Scenes Q. Running Karma Tests C. FormController Properties R. Testing AngularJS Applications D. NgModelController Properties S. Testing Controllers E. Introduction to Form Validation T. Testing a Controller F. Form Validation Directives U. Testing a Controller, cont'd G. Preventing Form Submission if Invalid V. Testing Custom Filters H. CSS Styling for Validation W. Testing a Filter I. CSS Styling Example X. Testing a Filter, cont'd J. Displaying Validation Error Messages Y. Testing Directives K. Using ngShow for Conditional Display Z. Testing a Directive L. The ngMessages Directive AA. Testing a Directive, cont'd M. Writing a Custom Validator BB. Complete Example N. Chapter Summary CC. Chapter Summary

XXII. Testing JavaScript XXIII. Introduction to AngularJS 2 A. Testing JavaScript and AngularJS A. AngularJS Version 2 B. JavaScript Testing Issues B. AngularJS 2 Highlights C. JavaScript Testing Tools C. What is ES2015? D. Introduction to Jasmine D. What is TypeScript? E. Installing Jasmine E. Steps for Writing an Angular 2 App F. Jasmine Fundamentals F. AngularJS 2 Hello, World G. A Simple Test G. Upgrading Version 1 Apps to Version 2 H. Chapter Summary