Tutorial: JavaScript, jQuery, and jQuery UI

Interested in customized training from the author of these tutorials taught onsite at your location? Please contact hall@coreservlets.com for info on customized courses on JavaScript (with jQuery and jQuery UI or with Ext JS), Java 8, general Java programming, JSF 2, PrimeFaces, Hadoop, Android, GWT, the Spring Framework, and other related topics.

Following is a JavaScript programming tutorial broken into four sections:

  1. Core JavaScript
  2. Supporting Technologies: HTML and CSS
  3. jQuery
  4. jQuery UI

Since each section includes exercises and exercise solutions, this can also be viewed as a self-paced JavaScript training course. The key to learning is not merely reading, but doing the exercises. After you do each set of exercises, compare your solutions to the ones provided.

Overview of the Tutorial Series

Following is a series of tutorials on front end development with JavaScript, jQuery, and jQuery UI. No previous programming experience is required, although those with experience in Java or similar languages can move a lot more quickly through the first few JavaScript sections. Click on a topic below to get the detailed tutorial for that topic, download the section's source code as an Eclipse project, see exercises, get the source code for the exercise solutions, or to simply run the sample apps from that section. Practicing is the key to learning, so I strongly recommend that you try out a few of the exercises in each section before you peek at the solutions.

These tutorials are derived from Marty Hall's world-renowned live training courses. Customized courses on JavaScript and jQuery are usually taught on-site at customer locations, but training courses at public venues on JSF 2, PrimeFaces, JavaScript, jQuery, Spring, GWT, Android, Hadoop, and Java 8 are periodically scheduled for people with too few developers for an onsite course. For descriptions of the various other courses that are available, please see the Java EE and JavaScript training course page. To inquire about a customized training course at your location, please contact Marty at hall@coreservlets.com.

If you find these free tutorials helpful, we would appreciate it if you would link to us. Send corrections or feedback on any tutorial to hall@coreservlets.com.

JavaScript: Getting Started

JavaScript: Basic Syntax Part 1

JavaScript: Basic Syntax Part 2

JavaScript: Functions and Functional Programming

JavaScript: Objects

HTML Basics: Part 1

This section gives the first half of a very quick intro to HTML for those who are are new to Web development. If you are already familiar with the basics of HTML, skip this section entirely.

HTML Basics: Part 2

This section gives the second half of a very quick intro to HTML for those who are are new to Web development. If you are already familiar with the basics of HTML, skip this section entirely.

CSS Basics

This section gives a very quick intro to CSS for those who are are new to Web development. If you are already familiar with the basics of CSS, skip this section entirely.

jQuery: Installation, Overview, & Getting Started

Deploying Web Apps with Eclipse and Apache Tomcat

This section gives a very quick intro to deploying apps to using Eclipse and deploying apps to Apache Tomcat. This is done simply so that you can run the server-side Java code that I provide in my projects. There is no need to have any knowledge of Java to understand the Ajax capabilities of jQuery, but the exercises are more interesting if you use server-side code that does something dynamic, rather than using a static text file as the server content. If you already know how to create and deploy server-side progams in another environment (PHP, .NET, server-side JavaScript, etc.), skip this section entirely and use what you already know for the server-side content when doing Ajax exercises.

  • Tutorial section in PDF (best for printing and saving).
  • Tutorial section on SlideShare (preferred by some for online viewing).
  • Topics covered:
    • Motivation
      • Why a real Web server is needed for the upcoming Ajax sections
    • Setting up the required software
      • Installing Java SE
      • Getting Apache Tomcat
      • Installing Eclipse (Java EE version)
      • Telling Eclipse about Tomcat
    • Creating a Dynamic Web Project
      • A project that can run on a Web server
    • Deploying a Dynamic Web Project
      • Running it on Apache Tomcat
  • Source code of examples in this section. (Really source code for previous section, used as an example of deployment in this section.) Bundled as an Eclipse project, but can easily be used in other environments.
  • Exercises to reinforce the concepts in this section.
  • Exercise solutions. (Really exercise solutions from previous section, used in this section as an exercise of how to deploy to Tomcat.)

jQuery Ajax Support: Basics

jQuery Ajax Support: Sending Data to the Server

jQuery Ajax Support: JSON and Other Advanced Capabilities

jQuery Ajax Support: Using Promises and Deferred Objects

jQuery Selectors and DOM Manipulation

The very first jQuery section gave a brief overview of selectors and DOM manipulation with jQuery. This section gives a lot more detail.

JavaScript Unit Testing with JsUnit

Because part of this section covers unit testing of functions that use jQuery, this section is placed here at the end the jQuery sections. However, unit testing should be considered a general JavaScript technique, and is not limited to jQuery.

Rich Interfaces with jQuery UI: Setup and Basic Widgets

Rich Interfaces with jQuery UI: Dialog Boxes

Rich Interfaces with jQuery UI: Panels

Rich Interfaces with jQuery UI: Autocompleters

Rich Interfaces with jQuery UI: Animation Effects and Themes

Source Code

Source code for all examples in this tutorial as well as the exercise solutions can be downloaded from the JavaScript and jQuery sample code repository. Code is free for completely unrestricted use. Each section above also has links to the code used in that section. You can also view the running apps online at http://javascript-apps.coreservlets.com/. That site also includes WAR files for all sections, with .java source included in the WARs (if applicable). The WAR files might be a good alternative for non-Eclipse users who want the source code, especially if you don't know how to import Eclipse projects into your IDE.

Customized Onsite Training

Looking for short hands-on training courses on Java 8 programming (for those that know C++, C#, etc. but are new to Java), Java 8 lambdas and streams (shorter course for those that know earlier Java versions), JSF 2.2, PrimeFaces, the Spring framework, JavaScript, jQuery, Angular JS 2, Android development, Hadoop, or other related topics taught at your company? The courses are taught by Marty Hall, an experienced instructor, developer, speaker, and well-known Java EE author, and the creator of this tutorial series. For more information, see the JSF and PrimeFaces training course page, the Java training course page or contact Marty to arrange a course at your location. Courses are available in any country, and have been given in N. America, Central America, Europe, Asia, and Australia. Distinctive features of Marty's training:

  • Experienced instructor who can answer tough questions and show best practices.
    Marty Hall and James Gosling @ Marty's car

    Marty & Java inventor James Gosling at Marty's car.

    With the big training vendors, you don't even know the instructor's name before the class begins, much less their credentials. Marty is an experienced real-world developer, award-winning instructor, conference speaker on Java EE topics (including five times at JavaOne and twice as keynote speaker at the Great Indian Developer Summit), and author of six popular J2EE books from Prentice Hall. Core Servlets & JavaServer Pages is the most popular servlet and JSP book internationally, with translations in Bulgarian, Chinese (both traditional and simplified script), Czech, French, German, Hebrew, Japanese, Korean, Macedonian, Polish, Portuguese, Russian and Spanish. Marty is also the co-author (with David Geary and Cay Horstmann) of the upcoming JSF 2.2 edition of Core JSF, the leading JSF text worldwide. Marty also teaches in the Johns Hopkins University part-time graduate program in Computer Science, where he directs the Java and Web-related concentration area. Click here for more details.
  • Well-tested courses. Marty has taught J2EE training courses in Canada, Australia, Japan, Puerto Rico, Mexico, India, Cambodia, Norway, the Philippines, and dozens of US venues. Clients for on-site Java courses include Google, Symantec, Verisign, the NY Stock Exchange (SIAC), the Federal Reserve Bank, State Farm Insurance, General Motors, Hewlett Packard, Motorola, Telenor Norway, Lexmark International, TransCanada Pipelines, Raytheon, Learjet, Sikorsky, the Aerospace Corporation, Informatica India, Los Alamos National Labs, Genomica, the U.S. Navy, General Dynamics, Banco Popular de Puerto Rico, Titan Corporation, the University of Michigan, Context Integration, the University of Utah Hospital, ESI, SAIC, NSA, CIA, and many others. Click here for a longer list. No using your developers as guinea pigs!
  • Flexible schedules. Courses are available in any city worldwide, and have been taught in dozens of US venues and 9 other countries. However, Maryland-area companies have extra flexibility in the course schedules, since Marty is local to Maryland. In addition to the full-day courses offered in all locations, Maryland companies can book the courses in the late afternoons or early evenings. Even weekends are possible! For example, Marty has done about a dozen Maryland courses that met once or twice a week from 4:30-6:30 pm (or similar) so that the students did not lose billable hours.
  • Course materials developed by the instructor. Marty personally developed all of his own materials, much of it based on his best-selling books. They thoroughly cover the basics, introduce advanced topics, include many meaty code examples, and show plenty of live running applications. They also discuss best practices, design strategies, and efficiency issues. Most of the big training vendors hire someone to create the course materials, then bring in some inexperienced flunky to regurgitate them to the class.
  • Public (open-enrollment) training courses
    JHU/EP Logo Onsite courses are cheaper and more convenient for organizations that have medium to large sized groups of developers. But, in order to serve organizations with only one or two developers that need training, coreservlets.com periodically offers public versions of some of the most popular courses. The next public offerings will be on Java programming, new features in Java 8, Android programming, Web application development with JSF2, PrimeFaces, Big-Data Apps with Hadoop, Rich Internet Applications with Ajax (and jQuery), GWT programming, Hadoop, Java EE programming with Spring, Java persistence with Hibernate and JPA, and Web Services (RESTful and SOAP-based). The courses are co-sponsored by Johns Hopkins Engineering for Professionals and are held at JHU/Dorsey in Elkridge Maryland (5 minutes from BWI airport). Click here for details.
  • A variety of complementary course offerings.
    Promos for Marty Hall at GIDS conference in Bangalore

    Ads for Marty at GIDS conference in India

    Marty personally teaches the following courses (click for detailed course descriptions): In addition, Marty reviews/edits courses taught by colleagues. These courses are developed by experts who work daily with the technologies, and the materials are thoroughly reviewed by Marty. Course topics include:
  • Customizable content. Want a class on JSF 2 or Spring or Hadoop, but need some review of basic Java first? No problem. Want to move extra fast because your developers are experienced? Piece of cake. Need to combine some basic JSF topics with thorough coverage of PrimeFaces? Just say the word. Want an Ajax and jQuery course, but first need a crash course on JavaScript syntax, first-class functions, and the DOM? Simply let us know. Want training on GWT, but need a review of basic server-side Java techniques first? Tell us what you need. Every onsite course is fully customized to the needs and backgrounds of your developers.
  • Competitive prices. Marty's public training courses are typically at least 20% cheaper than the canned courses from the big training vendors. And his courses include a textbook, a bound student notebook, meals and snacks, exercises, and exercise solutions. Onsite courses at your location are even cheaper, since there are no venue rental costs. Plus, your developers don't have to pay travel costs and the content and pace is customizable.

Email for details.

PowerPoint Files for University Faculty

The PDF files in this tutorial contain the complete text of the original PowerPoint files, so if your goal is learning this technology, just stick with this tutorial. However, as a service to instructors teaching full-semester courses at accredited universities, coreservlets.com will release the original PowerPoint files for free. Please see the instructor materials page for details.

More Information


JSF (JavaServer Faces)

Servlets & JSP
Ajax, GWT, & JavaScript

Spring, Hibernate, & JPA