JavaScript, jQuery and jQuery UI Complete Video Course: An Introduction to Front-End Web Development

Description

16+ Hours of Video Instruction

Overview

In JavaScript, jQuery and jQuery UI: An Introduction to Front-End Web Development, expert JavaScript developer, instructor, and author Marty Hall provides a practical, hands-on introduction to front-end Web programming with JavaScript, jQuery, jQuery UI, HTML, and CSS.

Description

 “Front-end” (or “client-side”) Web development involves using JavaScript, HTML, and CSS to make interactive applications that run inside a Web browser and can communicate with a Web server running remotely. Of these pieces, JavaScript is by far the most difficult because it is a full-fledged programming language and is the part that connects all the others together. This video course provides thorough coverage of three key components of front-end Web development:

• The core JavaScript language
• jQuery, the wildly popular open-source library that dramatically simplifies complex JavaScript applications
• jQuery UI, a library built on top of jQuery that provides dialog boxes, popup calendars, autocompleting text fields, and other rich widgets that are not part of standard HTML

The course also gives briefer introductions to two supporting topics:

• The HyperText Markup Language (HTML), using HTML 5 syntax
• Cascading Style Sheets (CSS)

Each section of the course provides details on the most important topics, surveys more advanced or lesser-used topics, stresses best practices, and provides plenty of working examples.

The course is aimed at two audiences

• First-time programmers
• Programmers who know other languages but are new to JavaScript

People in the first category should go through every topic in order, whereas programmers in the second category can skim the first two JavaScript topics (and possibly the HTML and CSS sections) before slowing down and going through the other topics in detail.

This Complete Video Course includes end of lesson exercises with solution files along with self-check quizzes on each module.

Please visit http://www.coreservlets.com/javascript-jquery-tutorial/ for the course Web site. This site contains complete source code for all examples in the video, as well as exercises and exercise solutions for each topic.

Finally, you can contact the author directly at hall@coreservlets.com with questions or suggestions or to inquire about customized training courses on JavaScript, jQuery, Angular 2, Java 8, JSF, PrimeFaces, Android programming, and other Java EE topics to be held onsite at your organization.

About the Author

Marty Hall is the president of coreservlets.com, a training and consulting company focusing on JavaScript, jQuery, server-side Java, JSF, PrimeFaces, and other similar Web technologies. In addition to long experience with JavaScript and Java, Marty has an extensive background in corporate training, having conducted training courses on JavaScript, jQuery, Java EE, and other Web technology topics in dozens of U.S. venues and nine other countries.

A popular and entertaining speaker, Marty has also spoken at conferences and user groups around the world, including Comdex, the Web 2.0 Expo, JavaOne, and the Great Indian Developer Summit. Marty is also adjunct faculty in the Johns Hopkins University part-time graduate program in Computer Science, where he directs the Web-related concentration areas.

Marty Hall is also the lead author or co-author of seven popular Web programming books from Pearson, including Core Web Programming and Core JSF. He has previously produced four LiveLessons videos for Pearson, most recently Learning Modern Java: A Crash Course Using Java 8.

You can see more details on Marty's bio page: 
http://courses.coreservlets.com/about-instructor.html

Skill Level

• Beginner to Intermediate

What You Will Learn

• Testing JavaScript interactively in your browser
• Variables, operators, and functions
• Conditional statements, loops, and mathematical functions
• Arrays and array methods
• Strings and regular expressions
• Functions and functional programming
• Objects and JSON
• JavaScript unit testing
• Basic structure of HTML 5 documents
• Hypertext links and URLs, headings and basic paragraphs, div and span, lists, and inline elements
• HTML tables, forms, form input elements, and a small set of miscellaneous elements
• Loading and applying style sheets
• CSS selectors: how to decide which elements of the page apply
• CSS properties: how to format the elements once they do apply
• Downloading and installing jQuery
• Basics of DOM manipulation in jQuery
• Deploying your applications on a real Web server so that jQuery can access server-side results
• An overview of Ajax
• The $.ajax function
• The load function
• Collecting and sending data to server-side programs
• How to display temporary messages in the Web page while waiting for a result from the server
• How to handle data from the server that is in JSON (JavaScript Object Notation) format
• Options for the $.ajax function
• Standard shortcuts that can be used in place of $.ajax
• Using promises and deferred objects to handle asynchronous events
• jQuery selectors
• jQuery functions that operate on collections of elements
• Unit testing of functions that use jQuery
• Downloading, configuring, and installing jQuery UI
• Styled jQuery UI buttons
• Popup calendars
• Number spinners
• Sliders
• Dialog boxes
• Tabbed and accordion panels
• Autocompleting textfields
• Animation effects
• Using themes (skins)

Who Should Take This Course

The course is aimed at two audiences: first-time programmers and programmers who know other languages but are new to JavaScript. People in the first category should go through every topic in order, whereas programmers in the second category can skim the first two JavaScript topics (and possibly the HTML and CSS sections) before slowing down and going through the other topics in detail.

Course Requirements

• No prior programming experience is required

Module 1: JavaScript
Module 1 is a longer section that covers the core JavaScript language in detail.

Lesson 1: JavaScript—Getting Started
This lesson introduces the basic usage and syntax of variables, operators, and functions, which are the core constructs in JavaScript. Since programming is learned mostly by doing, not just by listening, it also shows you how to set up browser developer tools so that you can practice by interactively typing in and executing simple JavaScript statements and functions.

Lesson 2: JavaScript Basic Syntax—Part 1
This lesson looks in detail at two of the most important constructs in JavaScript: conditional statements and loops. It also more briefly summarizes the available mathematical operations and provides some detail on which HTML versions should be used with modern JavaScript applications.

Lesson 3: JavaScript Basic Syntax—Part 2
This lesson looks in detail at arrays (ordered groups of data) and array methods (operations that you can perform on arrays). It also looks more quickly at strings (sets of characters) and regular expressions (patterns that you can match strings against).

Lesson 4: JavaScript—Functions
This lesson looks at functions and functional programming in JavaScript. In JavaScript, the core programming strategy is functional programming, not object-oriented programming as with many other languages, so this lesson is particularly important. It is the most difficult of the sections on core JavaScript and is likely to be tricky even for those who have used other mainstream programming languages.

Lesson 5: JavaScript—Objects
This lesson first introduces the basics of defining and using objects in JavaScript. It then discusses the prototype property, the use of objects as namespaces, and JSON (JavaScript Object Notation).

Module 2: HTML and CSS
Module 2 is the shortest of the four modules: it quickly summarizes the syntax of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). Although good Web design can be difficult, the syntax of HTML and CSS is moderately simple, and you can learn the basics in just a few lessons.

Lesson 6: HTML—A Crash Course, Part 1
This lesson talks about the various HTML versions and shows the basic structure of documents in HTML 5, the HTML version that is used for the course. It then covers about half of the most commonly used HTML elements: hypertext links and URLs, headings and basic paragraphs, div and span, lists, and inline elements.

Lesson 7: HTML—A Crash Course, Part 2
This lesson covers the other half of the most commonly used HTML elements: tables, forms, form input elements, and a small set of miscellaneous elements.

Lesson 8: CSS for JavaScript Developers—A Crash Course
This lesson gives a fast introduction to CSS: Cascading Style Sheets. It first shows how to load and apply a style sheet. It then looks at the two main parts of CSS: selectors (which are how you decide which elements of the page apply), and properties (which are how you format the elements that apply). CSS is important in its own right for Web design but is even more critical for JavaScript programmers because jQuery is partially based on CSS.

Module 3: jQuery
Module 3 covers jQuery, which is by far the most popular and widely used JavaScript library. In fact, jQuery is so widely used that it is now almost considered to be part of JavaScript itself. Although jQuery makes JavaScript programming easier in general, is most useful for two things:

• Manipulating the DOM (finding and modifying elements in the page based on user actions)
• Performing Ajax requests (getting data from the server and updating the page based on the results)

This module also covers JavaScript unit testing. Although unit testing is a general JavaScript technique, it is covered here instead of in Module 1 for two reasons:

• The unit testing library requires that your apps are deployed on a real Web server, and we do not cover server deployment until this module

I illustrate testing both generic JavaScript code and jQuery code.

Lesson 9: jQuery—Installation, Overview, and Getting Started
This lesson gives an overview of what jQuery is all about, shows how to download and install it, and then gives a quick summary of how to use jQuery to find and manipulate HTML elements in the page.

Lesson 10: Deploying Web Applications with Eclipse and Tomcat
This lesson shows how to install and use Eclipse, Java, and Tomcat to run your applications on a  “real” Web server. This course is about front-end development, not back-end development, so it will not be looking at the syntax of server-side code in Java. However, the upcoming sections on Ajax require a real server to be running so that that jQuery can call to server programs.

Lesson 11: jQuery Ajax Support—Basics
This lesson first introduces the concept of “Ajax”, the process by which JavaScript calls to the server and updates the page based on the results. It then looks at the syntax for doing this with jQuery and in particular looks at the $.ajax and load functions.

Lesson 12: jQuery Ajax Support: Sending Data to the Server
The previous lesson looked at how to call to a server-side program and handle the result. This lesson looks at how to collect and send data to that program.

Lesson 13: jQuery Ajax Support: Advanced Capabilities
This lesson looks in detail at two advanced techniques: how to display temporary messages in the Web page while waiting for a result from the server, and how to handle data from the server that is in JSON (JavaScript Object Notation) format. It also quickly summarizes the options for the $.ajax function as well as some standard shortcuts that can be used in place of $.ajax.

Lesson 14: jQuery Ajax Support—Promises and Deferred Objects
This lesson introduces the use of Promises and Deferred Objects, a relatively new approach that is now gaining popularity in the jQuery world. We will look at three main applications:

• How their use for Ajax simplifies adding additional response handlers later
• How they let you more easily perform actions only after multiple Ajax calls have finished

and

• How they can be applied to manage delayed or asynchronous tasks that do not involve Ajax

Lesson 15: jQuery: Selectors and DOM Manipulation
When jQuery was introduced in Lesson 9, the lesson briefly summarized how to search the page and perform operations on elements that matched. This lesson looks at the process in much more detail.

Lesson 16: Unit Testing with JsUnit
This lesson looks at unit testing: having a repeatable process for verifying that the individual functions that make up your application perform as expected. These tests can be saved and re-executed whenever you modify the code. Now, although some of the examples in this section look at unit testing of functions that use jQuery, unit testing should be considered a general JavaScript technique, and its use is not limited to jQuery.

Module 4: jQuery UI Basics
Module 4 covers jQuery UI, a library that is separate from, but built on top of, core jQuery. jQuery UI lets you make rich user interface elements like dialog boxes, sliders, and popup calendars that are not part of normal HTML. For the most part, this is the easiest of the main programming modules: although there are many different GUI components and many options for each one, the *concepts* are generally not difficult. For example, making a popup calendar is pretty simple, but there are about a zillion options for controlling its format. So, practice building and using just a few variations of each of the main components, and you can easily look up all the options later..

Lesson 17: Rich Interfaces with jQuery UI—Setup and Basic Widgets
This lesson first shows you how to download, configure, and install jQuery UI, then looks at five of the most commonly used jQuery UI widgets:

• Styled buttons that automatically adapt when you change the theme or skin
• Popup calendars
• Number spinners
• Sliders
• Progress bars

Lesson 18: jQuery UI—Dialog Boxes
This lesson looks at one of the most popular and widely used rich widgets: styled dialog boxes. We will look at five variations:

• Basic dialog boxes
• Dialogs with animation
• Modal dialogs
• Modal dialogs that automaticall have buttons inserted into them
• Dialogs with Ajax content

Lesson 19: jQuery UI: Tabbed Panels and Accordion Panels
This lesson looks at organizing your pages into regions using two different types of panels: tabbed panels and accordion panels.

In general, the code for using panels tends to be quite simple, but the result often dramatically increases the usability of your pages. We will show the basic syntax, then look at the options and use cases for each of the two panel types.

Lesson 20: jQuery UI—Autocompleters
This lessons looks at how to create autocompleters: textfields that give a menu of suggestions as the user types text. This is the most complicated of the jQuery UI lessons, but is still simpler than most of the lessons on core JavaScript and core jQuery. We will look at how to get the choices for the menu from either local or server-side data, and see how to do additional side effects other than just inserting the choice directly into the textfield.

Lesson 21: jQuery UI—Animation Effects and Themes
This lesson covers two topics: animation effects and themes (which are also sometimes called skins).

For the animation effects, we will show what the various effects mean, and see how they can be applied.

For the themes, we will look at how to change the theme of the application in one fell swoop ahead of time, and even how to change it at runtime. We will also look at some best practices to make sure that your application will adapt well when the theme changes.

About LiveLessons Video Training
 
The LiveLessons Video Training series publishes hundreds of hands-on, expert-led video tutorials covering a wide selection of technology topics designed to teach you the skills you need to succeed. This professional and personal technology video series features world-leading author instructors published by your trusted technology brands: Addison-Wesley, Cisco Press, IBM Press, Pearson IT Certification, Prentice Hall, Sams, and Que. Topics include: IT certification, programming, Web development, mobile development, home and office technologies, business and management, and more. View all LiveLessons on InformIT at: http://www.informit.com/livelessons

Sample Content

Table of Contents

Table of Contents

Introduction

Module 1: JavaScript
Introduction to Module 1

Lesson 1: JavaScript—Getting Started
Learning objectives
1.1 Learn how JavaScript is used
1.2 Practice interactively with JavaScript (simplest version)
1.3 Practice interactively with JavaScript (more complex but more powerful version)
1.4 Define, modify, and access variables
1.5 Apply operators
1.6 Define and call functions
Summary

Lesson 2: JavaScript Basic Syntax—Part 1
Learning objectives
2.1 Execute code conditionally
2.2 Execute code
2.3 Format code so that it can be understood, edited, and maintained
2.4 Call functions from the Math class2.5 Embed JavaScript in HTML
2.6 Choose among HTML versions
Summary

Lesson 3: JavaScript Basic Syntax—Part 2
Learning objectives
3.1 Define and access arrays
3.2 Create, compare, and call methods on strings
3.3 Recognize patterns with regular expressions
3.4 Call methods on arrays
Summary

Lesson 4: JavaScript—Functions
Learning objectives
4.1 Understand how the use of functions in JavaScript differs from other languages
4.2 Assign functions to variables, arrays, and other data structures
4.3 Pass functions to other functions
4.4 Return functions from functions
4.5 Create anonymous functions
4.6 Capture local variables (making closures)
4.7 Use the apply method
Summary

Lesson 5: JavaScript—Objects
Learning objectives
5.1 Define, instantiate, and access objects
5.2 Define methods with the prototype property
5.3 Use namespaces to avoid name conflicts
5.4 Create anonymous objects
5.5 Create and parse JSON
5.6 Apply a few other object “tricks”
Summary

Module 2: HTML and CSS
Introduction to Module 2

Lesson 6: HTML—A Crash Course, Part 1
Learning objectives
6.1 Differentiate among HTML versions
6.2 Define hypertext links and apply different types of URLs
6.3 Understand how block-level (paragraph-like) elements differ from other HTML elements
6.4 Use headings and basic paragraphs
6.5 Understand the difference between div and span
6.6 Create bulleted and numbered lists
6.7 Understand how inline (font-like or text-level) elements differ from other HTML
Summary

Lesson 7: HTML—A Crash Course, Part 2
Learning objectives
7.1 Use tables to present tabular information or to align sections of text
7.2 Use forms to send data to servers
7.3 Collect user data with form input elements
7.4 Apply a few miscellaneous elements
Summary

Lesson 8: CSS for JavaScript Developers—A Crash Course
Learning objectives
8.1 Load and apply styles
8.2 Match page elements with CSS selectors
8.3 Understand the idea of CSS properties
8.4 Assign colors and fonts with CSS properties
8.5 Define spacing with the CSS box model
8.6 Explore a few examples

Summary

Module 3: jQuery
Introduction to Module 3

Lesson 9: jQuery—Installation, Overview, and Getting Started
Learning objectives
9.1 See what jQuery is all about
9.2 Download jQuery and use it in your pages
9.3 Interactively practice with jQuery
9.4 Manipulate the DOM with jQuery
9.5 Walk through a quick example of the use of jQuery selectors
Summary

Lesson 10: Deploying Web Applications with Eclipse and Tomcat
Learning objectives
10.1 Understand why you need to run on a “real” Web server when applying Ajax
10.2 Install Java, Tomcat, and Eclipse
10.3 Configure and launch Eclipse
10.4 Create and deploy apps in Eclipse
Summary

Lesson 11: jQuery Ajax Support—Basics
Learning objectives
11.1 Understand what Ajax is all about and how its use improves traditional Web applications
11.2 Make Ajax requests with $.ajax: basics
11.3 Walk through a complete example that uses $.ajax
11.4 Define jQuery behaviors with unobtrusive JavaScript
11.5 Insert Ajax results into the page
11.6 Implement content-centric Ajax with the load function
Summary

Lesson 12: jQuery Ajax Support—Sending Data to the Server
Learning objectives
12.1 Send data to the server with $.ajax: summary
12.2 Send data with an explicit string
12.3 Send data with a data object
12.4 Send data by using the serialize function
12.5 Send data when using the load function
Summary

Lesson 13: jQuery Ajax Support—Advanced Capabilities
Learning objectives
13.1 Display temporary messages during Ajax requests
13.2 Handle JSON data
13.3 Walk through an example of handling JSON data
13.4 Understand and apply $.ajax options
13.5 Use shortcut functions
Summary

Lesson 14: jQuery Ajax Support—Promises and Deferred Objects
Learning Objectives
14.1 Use Promises and Deferred Objects for Ajax
14.2 Highlight Ajax results
14.3 Display temporary messages during Ajax requests
14.4 Check multiple Promises with $.when
14.5 Create and apply  your own Deferred Objects
Summary

Lesson 15: jQuery: Selectors and DOM Manipulation
Learning objectives
15.1 Review the basics of CSS
15.2 Recall the basics of jQuery DOM manipulation
15.3 Find sets of page elements with basic selectors
15.4 Operate on sets of page elements with basic operators
15.5 Respond to user events
15.6 Walk through an example that combines selectors, operators, and event handlers
Summary

Lesson 16: Unit Testing with JsUnit
Learning Objectives
16.1 Understand the purpose of JsUnit and the basic steps in applying it
16.2 Install JsUnit and begin using it
16.3 Use available assertion functions
16.4 Walk through a more realistic example
16.5 Apply unit testing to functions that use jQuery
Summary

Module 4: jQuery UI Basics
Introduction to Module 4

Lesson 17: Rich Interfaces with jQuery UI—Setup and Basic Widgets
Learning objectives
17.1 Understand what jQuery UI is all about and how to set up your page to use it
17.2 Use styled buttons: basics
17.3 Use styled buttons: options
17.4 Collect dates using a date picker (popup calendar)
17.5 Collect numbers using a number spinner
17.6 Collect numbers using a slider
17.7 Show updates using a progress bar
Summary

Lesson 18: jQuery UI—Dialog Boxes
Learning objectives
18.1 Understand what dialog boxes are for
18.2 Create and pop upbasic dialogs
18.3 Animate the opening and closing of dialogs
18.4 Make dialogs be modal
18.5 Use modal dialogs that have buttons inserted automatically
18.6 Display Ajax content in dialogs
Summary

Lesson 19: jQuery UI: Tabbed Panels and Accordion Panels
Learning objectives
19.1 Display static content in tabbed panels
19.2 Display dynamic (Ajax) content in tabbed panels
19.3 Animate the opening or closing of tabs
19.4 Display content in accordion panels
Summary

Lesson 20: jQuery UI—Autocompleters
Learning objectives
20.1 See how the page is set up for the lesson examples
20.2 Understand what autocompleters are for and the basic alternatives in the source of the suggestions
20.3 Get suggestions from local (client-side) data
20.4 Get suggestions from remote (server-side) data
20.5 Get suggestions from a custom matching function
20.6 Apply custom CSS styles to the suggestion menu
20.7 Use an array of objects to differentiate between display values and insert values
20.8 Perform side effects in addition to inserting value into textfield
Summary

Lesson 21: jQuery UI—Animation Effects and Themes
Learning objectives
21.1 See how the page is set up for the lesson examples
21.2 Understand what animation effects are all about and what the available effects are
21.3 Walk through an example that applies each of the animation effects
21.4 Understand how themes let you update the look of your pages with little change to the code
21.5 Change themes at runtime
21.6 Design your pages so that they adapt well when the theme changes
Summary

Updates

Submit Errata