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
- ISBN10 0134505840
- ISBN13 9780134505848
- Publish Date 4 March 2016
- Publish Status Active
- Publish Country GB
- Imprint Pearson Education Limited
- Language English