Sams Teach Yourself AngularJS, JavaScript, and jQuery All in One in 24 Hours

Sams Teach Yourself AngularJS, JavaScript, and jQuery All in One in 24 Hours

Released August 2015
Publisher(s): Sams
ISBN: 9780134171708

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

In just a short time, you can learn the basics of the JavaScript language, jQuery library, and AngularJS framework, and find out how to use them to build well-designed, reusable components for web applications.

As you complete the lessons in this book, you will gain a practical understanding of how to provide rich user interactions in your web pages. You will learn how to add dynamic code that allows web pages to instantly react to mouse clicks and finger swipes, interact with back-end services to store and retrieve data from the web server, and create robust Internet applications.

Step-by-step instructions carefully walk you through the most common web application development tasks

Practical, hands-on examples show you how to apply what you learn

Quizzes and exercises help you test your knowledge and skills

Learn how to…

  • Create powerful, highly interactive single-page web applications

  • Leverage AngularJS’s innovative MVC approach to web development

  • Use JavaScript in modern frameworks

  • Implement JavaScript, jQuery, and AngularJS together in web pages

  • Dynamically modify page elements in the browser

  • Use browser events to interact with the user directly

  • Implement client-side services that interact with web servers

  • Integrate rich user interface components, including zoomable images and expandable lists

  • Enhance user experience by creating AngularJS templates with built-in directives

  • Bind user interface elements and events to the data model to add flexibility and support more robust interactivity

  • Define custom AngularJS directives to extend HTML’s capabilities

  • Build dynamic browser views to provide richer user interaction

  • Create custom services you can integrate into many AngularJS applications

  • Develop a well-structured code base that’s easy to reuse and maintain

    • Table of contents

    1. About This eBook
    2. Title Page
    3. Copyright Page
    4. Contents at a Glance
    5. Table of Contents
    6. About the Authors
    7. Dedication
    8. Acknowledgments
    9. We Want to Hear from You!
    10. Reader Services
    11. Introduction
      1. Who Should Read This Book
      2. Why You Should Read This Book
      3. What You Will Learn from This Book
      4. Why AngularJS, jQuery, and JavaScript in the Same Book?
      5. What Is JavaScript?
      6. What Is jQuery?
      7. What Is AngularJS?
      8. Beyond AngularJS, jQuery, and JavaScript
      9. Code Examples
      10. Development Web Server
      11. Special Elements
      12. Q&A, Quizzes, and Exercises
      13. Finally
    12. Part I: Introduction to AngularJS, jQuery, and JavaScript Development
      1. Lesson 1. Introduction to Dynamic Web Programming
        1. Understanding the Web Server/Browser Paradigm
          1. Looking at Web Server to Browser Communication Terms
          2. Web Server and Client-Side Scripting
        2. Setting Up a Web Development Environment
          1. Setting Up Node.js
          2. Configuring Eclipse as a Web Development IDE
          3. Creating an Express Web Server Using Node.js
          4. Adding HTML
          5. Adding CSS
          6. Writing a Dynamic Script
        3. Summary
        4. Q&A
        5. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      2. Lesson 2. Debugging JavaScript in Web Pages
        1. Viewing the Developer Tools Console
          1. Understanding the Browser Developer Tools Console
        2. Debugging HTML Elements
          1. Inspecting HTML Elements
          2. Viewing and Editing the DOM Properties of Elements
        3. Debugging CSS
          1. Using the CSS Style Editor
          2. Using the Layout Editor
        4. Debugging JavaScript
          1. Navigating the JavaScript Debugger
          2. So How Do You Debug jQuery or AngularJS?
        5. Analyzing the Network Traffic
        6. Summary
        7. Q&A
        8. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      3. Lesson 3. Understanding Dynamic Web Page Anatomy
        1. Using HTML/HTML5 Elements to Build a Dynamic Web Page
        2. Understanding HTML Structure
        3. Implementing HTML Head Elements
          1. <title>
          2. <meta>
          3. <style>
          4. <script>
          5. <noscript>
          6. <link>
        4. Adding HTML Body Elements
          1. Using Important Body Element Attributes
          2. Understanding Block Versus Inline Elements
          3. Creating Container Elements
          4. Adding Link Elements
          5. Using Image Elements
          6. Applying List Elements
          7. Creating Table Elements
          8. Implementing Form Elements
        5. Adding Some Advanced HTML5 Elements
          1. Using HTML5 Graphical Elements
          2. Adding Media Elements
        6. Summary
        7. Q&A
        8. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      4. Lesson 4. Adding CSS/CSS3 Styles to Allow Dynamic Design and Layout
        1. Adding CSS Styles to the Web Page
          1. Loading CSS Styles from a File
          2. Adding CSS Styles to the Header
          3. Using CSS Styles in the HTML Body
          4. Defining CSS Styles in HTML Elements
        2. Adding CSS Styles to HTML Elements
          1. Understanding the Basic CSS Syntax
          2. Using CSS Selectors to Style HTML Elements
          3. Using CSS Design Properties
          4. Applying CSS Layout Properties
        3. Preparing CSS Styles for Dynamic Design
          1. Preparing to Add Classes to HTML Elements Dynamically
          2. Preparing to Directly Adjust CSS Properties
        4. Summary
        5. Q&A
        6. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      5. Lesson 5. Jumping into jQuery and JavaScript Syntax
        1. Adding jQuery and JavaScript to a Web Page
          1. Loading the jQuery Library
          2. Implementing Your Own jQuery and JavaScript
          3. Accessing HTML Event Handlers
        2. Accessing the DOM
          1. Using Traditional JavaScript to Access the DOM
          2. Using jQuery Selectors to Access HTML Elements
        3. Understanding JavaScript Syntax
          1. Creating Variables
          2. Understanding JavaScript Data Types
          3. Using Operators
          4. Applying Comparison and Conditional Operators
          5. Implementing Looping
          6. Creating Functions
          7. Understanding Variable Scope
          8. Adding Error Handling
        4. Summary
        5. Q&A
        6. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      6. Lesson 6. Understanding and Using JavaScript Objects
        1. Using Object Syntax
          1. Creating a New Object Instance
          2. Accessing Object Properties
          3. Accessing Object Methods
          4. Assigning New Values and Methods to Objects
        2. Understanding Built-in Objects
          1. Number
          2. String
          3. Array
          4. Date
          5. Math
          6. RegExp
        3. Creating Custom-Defined Objects
          1. Defining JavaScript Objects
          2. Adding Methods to JavaScript Objects
          3. Using a Prototyping Object Pattern
        4. Summary
        5. Q&A
        6. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
    13. Part II: Implementing jQuery and JavaScript in Web Pages
      1. Lesson 7. Accessing DOM Elements Using JavaScript and jQuery Objects
        1. Understanding DOM Objects Versus jQuery Objects
          1. Introducing JavaScript DOM Objects
          2. Introducing jQuery Objects
          3. Determining Whether an Object Is DOM or jQuery
          4. Changing an Object from DOM to jQuery and Back
        2. Accessing DOM Objects from JavaScript
          1. Finding DOM Objects by ID
          2. Finding DOM Objects by Class Name
          3. Finding DOM Objects by Tag Name
        3. Using jQuery Selectors
          1. Applying Basic Selectors
          2. Applying Attribute Selectors
          3. Applying Content Selectors
          4. Applying Hierarchy Selectors
          5. Applying Form Selectors
          6. Applying Visibility Selectors
          7. Applying Filtered Selectors
        4. Summary
        5. Q&A
        6. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercise
      2. Lesson 8. Navigating and Manipulating jQuery Objects and DOM Elements with jQuery
        1. Chaining jQuery Object Operations
        2. Filtering the jQuery Object Results
        3. Traversing the DOM Using jQuery Objects
        4. Looking at Some Additional jQuery Object Methods
          1. Using .each()
          2. Using .map()
        5. Summary
        6. Q&A
        7. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercise
      3. Lesson 9. Applying JavaScript and jQuery Events for Richly Interactive Web Pages
        1. Understanding Events
          1. Understanding the Event Process
          2. Looking at Event Objects
          3. Reviewing Event Types
        2. Using the Page Load Events for Initialization
          1. Using the JavaScript onload Event
          2. Adding Initialization Code in jQuery
        3. Adding and Removing Event Handlers to DOM Elements
          1. Assigning Event Handers in HTML
          2. Adding Event Handlers in JavaScript
          3. Applying Event Handlers in jQuery
        4. Triggering Events Manually
          1. Triggering Events in JavaScript
          2. Using jQuery to Trigger Events Manually
        5. Creating Custom Events
          1. Adding Custom Events Using JavaScript
          2. Adding Custom Events Using jQuery
        6. Implementing Callbacks
          1. Understanding the Callback Mechanism
          2. Using Deferred Objects
        7. Summary
        8. Q&A
        9. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      4. Lesson 10. Dynamically Accessing and Manipulating Web Pages with JavaScript and jQuery
        1. Accessing Browser and Page Element Values
          1. Getting Mouse Position
          2. Getting and Setting Values
          3. Getting and Setting Attributes and Properties in jQuery
          4. Getting and Setting CSS Properties
          5. Getting and Setting Element Size
          6. Getting and Setting Element Position
          7. Accessing the Class
          8. Getting Browser and Screen Size and Color Information
        2. Dynamically Manipulating Page Elements
          1. Adding Page Elements Dynamically
          2. Removing Page Elements
          3. Replacing Elements in jQuery
          4. Inserting Elements in jQuery
          5. Changing Classes
          6. Toggling Visibility
        3. Dynamically Rearranging Elements on the Web Page
          1. Adjusting the z-index
        4. Summary
        5. Q&A
        6. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      5. Lesson 11. Working with Window, Browser, and Other Non-Web Page Elements
        1. Understanding the Screen Object
        2. Using the Window Object
          1. Accessing the Window Object Properties
          2. Using the Window Object Methods
        3. Using the Browser Location Object
        4. Using the Browser History Object
          1. Navigating Forward in the Browser History
          2. Navigating Backward in the Browser History
        5. Controlling External Links
          1. Stopping External Links on a Web Page
          2. Forcing Links to Open in New Browser Windows
        6. Adding Pop-up Boxes
          1. Notifying the User
          2. Asking the User to Confirm
          3. Prompting the User for Input
        7. Setting Timers
          1. Adding a Delay Timer
          2. Adding a Reoccurring Timer
        8. Summary
        9. Q&A
        10. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
    14. Part III: Building Richly Interactive Web Pages with jQuery
      1. Lesson 12. Enhancing User Interaction Through jQuery Animation and Other Special Effects
        1. Understanding jQuery Animation
          1. Animating CSS Settings
          2. Understanding Animation Queues
          3. Stopping Animation
          4. Delaying Animation
          5. Applying .promise() to Animations
        2. Animating Show and Hide
          1. Animating hide()
          2. Animating show()
          3. Animating toggle()
        3. Animating Visibility
          1. fadeIn()
          2. fadeOut()
          3. fadeToggle()
          4. fadeTo()
        4. Sliding Elements
          1. Animating slideUp(), slideDown(), and slideToggle()
          2. Sliding Using Width and Height
        5. Creating Resize Animations
        6. Implementing Moving Elements
          1. Animating Element Position Changes on Static Elements
          2. Animating Element Position Changes on Nonstatic Elements
        7. Summary
        8. Q&A
        9. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      2. Lesson 13. Interacting with Web Forms in jQuery and JavaScript
        1. Accessing Form Elements
          1. Getting and Setting Form Element Values
          2. Serializing Form Data
        2. Intelligent Form Flow Control
          1. Automatically Focusing and Blurring Form Elements
          2. Intelligently Hiding and Showing Elements
          3. Disabling Elements
          4. Controlling Submit and Reset
        3. Dynamically Controlling Form Element Appearance and Behavior
        4. Validating a Form
          1. Manually Validating a Web Form
          2. Getting the jQuery Validation Plug-In
          3. Applying Simple jQuery Validation Using HTML
          4. Applying Complex Validation
        5. Summary
        6. Q&A
        7. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      3. Lesson 14. Creating Advanced Web Page Elements in jQuery
        1. Adding an Image Gallery
        2. Implementing Tables with Sorting and Filters
        3. Creating a Tree View
        4. Using Overlay Dialogs
        5. Implementing a Graphical Equalizer Display
        6. Adding Sparkline Graphics
        7. Summary
        8. Q&A
        9. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      4. Lesson 15. Accessing Server-Side Data via JavaScript and jQuery AJAX Requests
        1. Making AJAX Easy
          1. Clarifying AJAX Versus Page Requests
          2. Understanding Server-Side Services Such as Node.js, ASP, PHP, and MySQL
          3. Understanding Asynchronous Communication
          4. Understanding Cross-Domain Requests
          5. Looking at GET Versus POST Requests
          6. Understanding Response Data Types—Binary Versus Text Versus XML Versus JSON
        2. Implementing AJAX
          1. AJAX from JavaScript
          2. AJAX from jQuery
          3. Handling AJAX Responses
          4. Handling Response Data
        3. Using Advanced jQuery AJAX
          1. Reviewing Global Setup
          2. Using Global Event Handlers
          3. Implementing Low-Level Ajax Requests
        4. Summary
        5. Q&A
        6. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
    15. Part IV: Utilizing jQuery UI
      1. Lesson 16. Introducing jQuery UI
        1. Getting Started with jQuery UI
          1. Getting the jQuery UI Library
          2. Using ThemeRoller to Create a Custom Theme
        2. Applying jQuery UI in Your Scripts
          1. Understanding Enhanced jQuery UI Functionality
          2. Using New Selectors in jQuery UI
          3. :focusable
          4. Positioning UI Elements with jQuery UI
        3. Summary
        4. Q&A
        5. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      2. Lesson 17. Using jQuery UI Effects
        1. Applying jQuery UI Effects
          1. Understanding jQuery UI Effects
          2. Setting the Effect Animation Easing
          3. Adding Effects to jQuery Objects
        2. Adding Effects to Class Transitions
        3. Adding Effects to Element Visibility Transitions
        4. Summary
        5. Q&A
        6. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      3. Lesson 18. Advanced Interactions Using jQuery UI Interaction Widgets
        1. Introducing jQuery UI Interactions
          1. Reviewing the jQuery.widget Factory
          2. Understanding the Mouse Interaction Widget
        2. Using the Drag-and-Drop Widgets
          1. Dragging Elements with the Draggable Widget
          2. Creating Drop Targets with the Droppable Widget
        3. Resizing Elements Using the Resizable Widget
        4. Applying the Selectable Widget
        5. Sorting Elements with the Sortable Widget
        6. Summary
        7. Q&A
        8. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      4. Lesson 19. Using jQuery UI Widgets to Add Rich Interactions to Web Pages
        1. Reviewing Widgets
        2. Adding an Expandable Accordion Element
        3. Implementing Autocomplete in Form Elements
        4. Applying jQuery UI Buttons to Form Controls
        5. Creating a Calendar Input
        6. Generating Stylized Dialogs with jQuery UI
        7. Implementing Stylized Menus
        8. Creating Progress Bars
        9. Implementing Slider Bars
        10. Adding a Value Spinner Element
        11. Creating Tabbed Panels
        12. Adding Tooltips to Page Elements
        13. Creating Custom Widgets
        14. Summary
        15. Q&A
        16. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
    16. Part V: Building Web Applications with AngularJS
      1. Lesson 20. Getting Started with AngularJS
        1. Why AngularJS?
        2. Understanding AngularJS
          1. Modules
          2. Scopes and the Data Model
          3. Views with Templates and Directives
          4. Expressions
          5. Controllers
          6. Data Binding
          7. Services
          8. Dependency Injection
          9. Compiler
        3. An Overview of the AngularJS Life Cycle
          1. The Bootstrap Phase
          2. The Compilation Phase
          3. The Runtime Data Binding Phase
        4. Separation of Responsibilities
        5. Integrating AngularJS with Existing JavaScript and jQuery
        6. Adding AngularJS to Your Environment
        7. Bootstrapping AngularJS in an HTML Document
        8. Using the Global APIs
        9. Using jQuery or jQuery Lite in AngularJS Applications
          1. What Is jQuery Lite?
          2. Accessing jQuery or jQuery Lite Directly
        10. Summary
        11. Q&A
        12. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      2. Lesson 21. Understanding AngularJS Application Dynamics
        1. Looking at Modules and Dependency Injection
          1. Understanding Modules
          2. Dependency Injection
        2. Defining an AngularJS Module Object
        3. Creating Providers in AngularJS Modules
          1. Specialized AngularJS Object Providers
          2. Service Providers
        4. Implementing Providers and Dependency Injection
        5. Applying Configuration and Run Blocks to Modules
          1. Adding Configuration Blocks
          2. Adding Run Blocks
        6. Summary
        7. Q&A
        8. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      3. Lesson 22. Implementing the Scope as a Data Model
        1. Understanding Scopes
          1. The Relationship Between the Root Scope and Applications
          2. The Relationship Between Scopes and Controllers
          3. The Relationship Between Scopes and Templates
          4. The Relationship Between Scope and Back-End Server Data
          5. The Scope Life Cycle
        2. Implementing Scope Hierarchy
        3. Summary
        4. Q&A
        5. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      4. Lesson 23. Using AngularJS Templates to Create Views
        1. Understanding Templates
        2. Using Expressions
        3. Using Filters
          1. Using Built-in Filters
        4. Creating Custom Filters
        5. Summary
        6. Q&A
        7. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      5. Lesson 24. Implementing Directives in AngularJS Views
        1. Understanding Directives
        2. Using Built-In Directives
          1. Directives That Support AngularJS Functionality
          2. Directives That Extend Form Elements
          3. Directives That Bind the Model to Page Elements
          4. Directives That Bind Page Events to Controllers
        3. Summary
        4. Q&A
        5. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      6. Lesson 25. Creating Your Own Custom Directives to Extend HTML
        1. Understanding Custom Directive Definitions
          1. Defining the Directive View Template
          2. Restricting Directive Behavior
          3. Adding a Controller to a Directive
          4. Configuring the Directive Scope
          5. Transcluding Elements
          6. Manipulating the DOM with a Link Function
          7. Manipulating the DOM with a Compile Function
        2. Implementing Custom Directives
        3. Summary
        4. Q&A
        5. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      7. Lesson 26. Using Events to Interact with Data in the Model
        1. Browser Events
        2. User Interaction Events
        3. Adding $watches to Track Scope Change Events
          1. Using $watch to Track a Scope Variable
          2. Using $watchGroup to Track Multiple Scope Variables
          3. Using $watchCollection to Track Changes to Properties of an Object in the Scope
        4. Emitting and Broadcasting Custom Events
          1. Emitting a Custom Event to the Parent Scope Hierarchy
          2. Broadcasting a Custom Event to the Child Scope Hierarchy
          3. Handling Custom Events with a Listener
        5. Summary
        6. Q&A
        7. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      8. Lesson 27. Implementing AngularJS Services in Web Applications
        1. Understanding AngularJS Services
        2. Using the Built-In Services
          1. Sending HTTP GET and PUT Requests with the $http Service
          2. Using the $cacheFactory Service
          3. Implementing Browser Alerts Using the $window Service
          4. Interacting with Browser Cookies Using the $cookieStore Service
          5. Implementing Timers with $interval and $timeout Services
          6. Using the $animate Service
          7. Using the $location Service
        3. Using the $q Service to Provide Deferred Responses
        4. Summary
        5. Q&A
        6. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      9. Lesson 28. Creating Your Own Custom AngularJS Services
        1. Understanding Custom AngularJS Services
          1. Defining a value Service
          2. Defining a constant Service
          3. Using a Factory Provider to Build a factory Service
          4. Using an Object to Define a service Service
        2. Integrating Custom Services into Your AngularJS Applications
        3. Summary
        4. Q&A
        5. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
      10. Lesson 29. Creating Rich Web Application Components the AngularJS Way
        1. Summary
        2. Q&A
        3. Workshop
          1. Quiz
          2. Quiz Answers
          3. Exercises
    17. Index
    18. Code Snippets

    Product information

    • Title: Sams Teach Yourself AngularJS, JavaScript, and jQuery All in One in 24 Hours
    • Author(s):
    • Release date: August 2015
    • Publisher(s): Sams
    • ISBN: 9780134171708