Application Development Using JavaScript & jQuery: 2-in-1
4.7 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
27 students enrolled

Application Development Using JavaScript & jQuery: 2-in-1

Learn to develop your own interactive web apps using JavaScript & jQuery
4.7 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
27 students enrolled
Created by Packt Publishing
Last updated 8/2018
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn basic JavaScript syntax along with function & variable declaration
  • Learn various loops & conditional branching
  • Implement jQuery in an application for validating user input
  • Manipulate the DOM with both JavaScript and jQuery build a fancy, attractive & animated website using bootstrap & JavaScript & save important codes in dev journal
  • Learn JavaScript objects to manipulate real-world problems
Course content
Expand all 64 lectures 10:03:54
+ Beginning JavaScript and jQuery
21 lectures 02:54:44

This video will give an overview of entire course.

Preview 05:32

How do we get started with JavaScript?

  • We first need to learn the background of JavaScript.

  • We then need to choose the software we need to use.

  • We did it! We wrote our first simple JavaScript script.

Introduction to JavaScript

What is the syntax of the JavaScript language?

  • You must learn how to call JavaScript from the browser.

  • Now, you’ll learn the words you can’t use in variables.

  • You have learned the basic syntax of the language.

Basic JavaScript Syntax

You need to store the data in the script and use it at various points.

  • You need to know what a variable is and the types.

  • You must now learn the correct naming conventions.

  • Now you know how to declare and use variables.


So far, you have learned how to store data to use again, but what about a series of statements that we may use over and over again?

  • Like variables, you must learn what a function is.

  • Now, you will learn how to declare and call functions.

  • To wrap up functions, you will now learn how to pass parameters.


How can I make certain parts of my code execute a given number of times?

  • We will start by learning what loops are in programming.

  • You will then learn the syntax of the for loop.

  • We can now execute our code a certain number of times.

For Loop

Is there an alternative to the for loop?

  • You will learn the structure of the while loop

  • You will now learn the do while loop alternative.

  • We now have three options for loops and know when to use them.

While and Do While Loops

There could be times when you need to execute your code only if certain conditions are true.

  • You must learn about conditional branching first.

  • Now we look at the if statement itself.

  • We can now have our code execute only when a condition is true.

if Statement

After seeing how the if statement, there could be a requirement where you need to check multiple conditions and each condition has its own code execution.

  • We will look at the switch statement.

  • We will now look at an alternative: the if else if statement

  • We can use all the available conditional branching statements

Switch Statement

The Document Object Model (DOM) is a critical component of the JavaScript language. You need to learn what it is before you can use it.

  • We start by learning what the DOM is.

  • You must now learn what the DOM is not.

  • Younow have a solid understanding of the DOM.

What Is the DOM?

The DOM seems so daunting; how can we get the pieces we need to use?

  • Youwill learn the three ways of selecting nodes individually.

  • You will now learn how to select multiple nodes.

  • Now that we can select nodes, we are ready to manipulate them.

Accessing the DOM

Being able to select nodes is fun but not very productive on its own. You need to learn how to make changes to the DOM after you select the element.

  • We need to add an element when needed.

  • Times will come when we need to edit items as well.

  • We can now add, edit, and delete from the DOM!

Manipulating the DOM

What is jQuery and how can it be used in the place of traditional JavaScript?

  • You first need to learn the background of jQuery.

  • Now that we know what it is, why should we use it?

  • We know the power of jQuery; it is time to unleash it!

jquery Fundamentals

jQuery can be used from the local file system or via a Content Delivery Network (CDN). What is the difference between the two, and which is better?

  • You need to learn how to use it locally.

  • Next, you need to learn how to use it via CDN.

  • You have now learned both the usage methods and when to use them.

Using jQuery: Local Versus CDN

We have been talking about jQuery and the power behind it, but we have not seen it in action yet.

  • You must learn the syntax jQuery uses.

  • You now need to learn the best place in your script to call it.

  • The power and ease of jQuery is starting to come through.

Basic jQuery Example

We know how to access the different elements of the DOM with JavaScript, but it seems clunky. Can jQuery make it easier?

  • First, you will learn the syntax of how jQuery does selections.

  • You will now learn how to get the HTML or text of an element.

  • It is so much easier doing selections with jQuery!

Accessing the DOM with jQuery

It is easier to select the nodes of the DOM with jQuery, but just selecting them is no fun. How can we manipulate them?

  • First we need to change the HTML elements.

  • Next, you will learn how to manipulate text within the DOM elements.

  • We can now change any HTML element or text we want.

Updating the Elements and Content

The final piece we need to manipulate the DOM is to add elements as needed.

  • You need to learn how to add elements before another element.

  • Now we need to add elements and text within another element.

  • We can now fully manipulate the DOM with jQuery!

Inserting the Elements and Content

jQuery is very powerful, but it seems to be lacking in form validation. How can we use jQuery to validate web forms?

  • First, you learn about jQuery plugins.

  • Now, you learn about the jQuery Validate plugin

  • We can now validate HTML forms and get the correct information!

Playing with Forms

You have learned how to change HTML or the text of DOM elements; can we change the CSS? Also, it would be nice to add some neat effects to elements.

  • You will learn about .css() and how to change the CSS

  • Now, we will add jQuery effects to an element

  • We can now fully manipulate any DOM element


jQuery events look much simpler to use compared with JavaScript events. How can we use them?

  • First, you will learn two different ways to attach events to a DOM element

  • Next, you will learn about the jQuery event object and the additional information it provides

  • We can now use jQuery events with confidence!

A Quick Look at Events
Test Your Knowledge
5 questions
+ JavaScript (and jQuery) in 7 Days
43 lectures 07:09:10

This video provides an overview of the entire course.

Preview 04:59

Before we are able to write a program in any language, we must learn the basic rules and building blocks.

  • Open, an in-browser code editor

  • Write simple JavaScript expressions

  • Write your first JavaScript program

Creating Your First JavaScript Program

Computers represent everything as 1’s and 0’s, this wouldn’t be acceptable for most humans. Programming languages have “types” of data, we will use different types to solve different sorts of problems. IE: Numbers are used for math, Strings for text.

  • Learn the different primary types in JavaScript

  • Use operators to compare values

  • Write expressions that combine values of different types

Working with JavaScript Types and Variables

A common pattern in programming logic (and real world logic) is making choices based from the answer to a true or false expression. For example, “is it raining? If yes, wear a raincoat”. Learn how to handle these type of logical decisions with JavaScript.

  • Create an expression that may be true or false

  • If true, log a message or update variables

  • Handle falsey expressions in an “else” block

Controlling Your Programs Flow with "if" and "else"

Typically, programs are created from many individual “routines” or “functions”. These are units of work. A good program has many functions that each do one small task, and can be used alone or combined with other functions to perform more complex tasks.

  • Write your basic JavaScript function

  • Use “parameters” as predeclared variables for your function

  • Call the function with values for desired parameters

Building Units of Work Using JavaScript Functions

Mad-Libs are word games where funny stories can be generated. A person playing Mad-Libs will pick words at random, the words must be specific types, (that is; noun, verb, adjective). Then the words are used as replacements for blank words injected throughout the story.

  • Write a function that prints a story

  • Arguments to the function will be the players words

  • Concatenate the players words into the story

Day One - Assignment

Review the Assignment from Day 1

  • Finish your assignment

  • Compare your code to the code in this video

  • Use the review to update your own assignment code

Assignment Review from Day 1

Lists are important in life and programming. Every program or website will have features that are best kept in collections, these are called Arrays in JavaScript. (Examples of data for a list could be posts, friends, dates, and so on).

  • Build an array using JavaScript Array syntax

  • Access items by their index numbers

  • Use Array methods to add and remove items at will

Listing and Sorting Values with “Array”

When dealing with Arrays, we’ll often need to do some task on or with each individual item in the array. Since we don’t always know how many items are in an Array, and since we would be writing the same code over and over, instead we can use “loops”.

  • Arrays length property tells us how many items it has

  • Write a for loop to iterate an array

  • Use a while loop as an alternative to the “for” loop

Writing Less Code Using “for” and “while” Loops

Sometimes we will need to make logical choices based on the value of a variable or expression rather than the truthfulness of it. For instance, depending on what day today is, we might cook different dinner. In JavaScript, conditions like this are handled with “switch” statements.

  • Choose a variable to evaluate

  • Write “cases” to run code based on that variables value

  • Use a “default” to handle unexpected values

Handling Handfuls of Possibilities Using “switch” Statements

Although not very common, there will be times that we want to stop looping before every item has been iterated over, or we may wish to continue to the next iteration of a loop without running the rest of the code in the loop. For this we can use the “break” and “continue” keywords.

  • Write either a “while” or “for” loop

  • Use “break” to stop the loop for good

  • Use “continue” to stop the current iteration and move on

Achieving Finer Control by Continuing and Breaking Out of Loops

There are some functions that are so common, JavaScript includes them in the language. In this video we’ll go over a few and show how to use them to select random Array items.

  • Math is an Object with math functions

  • Math.random will help us select random indexes

  • Practice using different built in utilities

Using Built-In JavaScript Functions to Do Common Tasks

Our assignment for day 2 will be to improve on the Mad-Libs assignment by using loops to choose the words.

  • Create arrays of different types of words

  • Use a loop to select random words

  • Pass the random words to your Mad-Libs function

Day Two - Assignment

Review the Assignment from Day 2

  • Finish your assignment

  • Compare your code to the code in this video

  • Use the review to update your own assignment code

Assignment Review from Day 2

As we begin to model more complex problems and build complex solutions, we might want to group variables together in a common “namespace”. Remember the Math.random and Math.floor functions; they are on a part of the Math namespace.

  • Learn to create an object literal

  • Create properties on the object

  • The object now becomes a “namespace” for the variables

Building Namespaces with Object Literals

Usually we will use objects to hold properties related to some part of a program, so it’s natural that we would end up running common functions with these objects. Lucky for us, we can benefit from putting these functions as properties of the object.

  • Create an object

  • Set the function directly as a property on the object

  • Call the function directly on the object

Adding Methods to Objects

So far, everything we’ve done has been sequential work, each line ran directly after the other. Sometimes we’ll write code that doesn’t need to run immediately. Some examples are clocks, animations and time outs.

  • Use createInterval or createTimeout to delay function call

  • The delay is measured in milliseconds

  • Write a function that executes on a timeout

Keeping Time with the Built-In JavaScript Date Class

There are some things about using objects and writing object methods that cause many new developers lots of headaches. In this video we’ll explore some of these, namely, the function context “this”.

  • Write a function for use with an object

  • Use “this” to reference an object in a function

  • Notice that “this” is not always defined

Avoiding Gotchas! Learning Caveats to Objects That Every Programmer Must Know

Sometimes we need to create many objects that represent very similar things. Think of users on a site, they would all have names, ids, friends, and they would also have common methods. This video explores an easier way to create common objects.

  • Create an object of a specific shape (type)

  • Create a function that creates this object

  • Modify the function to be a factory

Creating Useful Objects Using Factories

In this assignment, we will create a mini game that runs in the console. The game will create battleship objects, and then you (the player) should guess at the location of the ship, if the location is correct then you win the game, This game will be small, but it will be the foundation for other works.

  • Create a factory function to build ships

  • The ships should have coordinates (x,y)

  • Write a function to guess the ships coordinates

Day Three - Assignment

Review the Assignment from Day 3

  • Finish your assignment

  • Compare your code to the code in this video

  • Use the review to update your own assignment code

Assignment Review from Day 3

Ahh, finally we are ready to write code that has a visual aspect. In order to create layouts and interfaces in the browser we need to learn about the DOM, (document object model).

  • The DOM models every HTML element as an object

  • Use JavaScript to create HTML Elements

  • Use JavaScript to change the DOM

Exploring the DOM; HTML Elements and the Document Object Model

When styling HTML, we use CSS. CSS selectors are how we tell the browser which elements to target. Lucky for us, we can also use these selectors to reference HTML elements.

  • Use document.querySelector to select an element

  • document.querySelectorAll with search for multiple elements

  • Fine grained selections use more complex selectors

Finding HTML Elements Using CSS Selectors

All this work with the DOM can become very nuanced, difficult and often overly complex. Lucky for use, there is a super powerful, and very commonly used library to assist us with tasks in the DOM.

  • Load jQuery from a CDN using a script tag

  • Select elements using the jQuery function

  • Create elements, hide, even animate them with jQuery

Using the jQuery Library to Better Manipulate the DOM

One great benefit of using jQuery, is that cannot only easily select elements from the DOM, but also set and get values for DOM attributes as well. We can even change styles with jQuery.

  • Select elements as usual with jQuery

  • Store values from JavaScript as attributes on an elements

  • Change the style of elements with the .css method

Controlling HTML Properties and Attributes

There is so much that we can do with jQuery, In this assignment, you will create a website only using jQuery.

  • Use jQuery to add HTML to the page

  • Change the css styles using jQuery

  • Build a function to dynamically create the html

Day Four - Assignment

Review the Assignment from Day 4

  • Finish your assignment

  • Compare your code to the code in this video

  • Use the review to update your own assignment code

Assignment Review from Day 4

When you go to a webpage or web app, the parts of the page that are dynamically created are likely represented in JavaScript using objects.

  • Create objects that have properties to represent as HTML

  • Build strings of html using the object properties

  • Use jQuery to add the html to the page

Representing JavaScript Objects Visually in HTML

Human interaction with our apps and webpages will primary happen through either buttons or forms. Forms are a great way to collect information from users.

  • Create a form with different types of inputs

  • Set method and action attributes

  • Query parameters can capture this information

Creating Forms to Submit User Information to Websites

Another way that users will interact with our sites will be with mouse events. We can “listen” to any and all of these events. Listening to events is a very critical skill for JavaScript developers to learn

  • Get a reference to elements with jQuery

  • Use the .on method to listen for ‘click’ events

  • Write a function to run on each click

Creating Click/Touch Events on HTML Elements

Just like click and touch events, when a form is submitted that triggers an event as well. We can listen for this event and use it to know when a user has finished filling out a form, then collect information.

  • Create a form

  • Listen for the ‘submit’ event

  • Stop the browsers default action

Handle Form Events in JavaScript Without Reloading the Page

Now that we are able to write code that can take data from user interactions and we can model data from JavaScript in HTML. This would be a great time to build a better battleship game.

  • Update you previous battleship assignment with HTML

  • Use a form to get the users coordinate guesses

  • Show their score, win or loss in HTML

Day Five - Assignment

Review the Assignment from Day 5

  • Finish your assignment

  • Compare your code to the code in this video

  • Use the review to update your own assignment code

Assignment Review from Day 5

Often, we will need to get information from a site other than our own. Luckily the browsers have an API called fetch that makes this easy.

  • Use fetch to request information from itunes

  • Handle the response with a function

  • Display the response in HTML

Accessing Remote Resources Using the Browsers “Fetch API”

Sometimes we want to store information between browser refreshes. A very simple way to do this without a database is by using the browser as a data store.

  • Use localStorage to store data in browser

  • Use the same API to retrieve data from localStorage

  • Store objects using the JSON.stringify method

Persisting Data Using Storage API

So far we have been writing our own CSS and using jQuery to do animation. There are libraries that handle some of this for us, bootstrap is a popular library/framework that writes CSS for us and uses jQuery to create cool components like carousels.

  • Add Bootstrap to the site in the

  • Create the HTML for a carousel

  • Use Bootstrap to start the “slider”/carousel

Creating Slideshows Using jQuery and Bootstrap

Sometimes sites will allow us to show their content on our own sites. Think of YouTube, we see YouTube videos on other websites all the time, the videos are still hosted on YouTube even though we see them through a different site, this is called embedding.

  • Use the browser to inspect iframes

  • Add YouTube iframe and API

  • Share code to a site using iframes

Embedding External Content In Your Website

Now we know how to create a carousel and we know how to listen for events with jQuery. Try to combine the two, create a carousel that can be controlled by our own JavaScript or that has call to action buttons to run dynamic code in our page.

  • Create a Bootstrap carousel

  • Create dropdown to select any slide

  • Use HTML in a slide to link to other content

Day Six - Assignment

Review the Assignment from Day 6

  • Finish your assignment

  • Compare your code to the code in this video

  • Use the review to update your own assignment code

Assignment Review from Day 6

One problem all programmers have are bugs. Bugs can be difficult to handle.

  • Write code that will throw an error

  • Use try/catch blocks to catch the error

  • Log the error to console

Handling Human Mistakes and JavaScript Errors

Sometimes our code doesn’t have bugs that throw errors, sometimes it just doesn’t run the way we expect and it’s difficult to understand why. In this video we’ll see some advanced techniques for handling situations like these.

  • Write a recursive function that is difficult to understand

  • Add debugger statements

  • Use the browser to step through functions

Becoming an Expert at Debugging Code in the Browser

It’s time to use all we’ve learned to build a great project. We’ll create a page that stores journal entries about our development experiences and can even show us code embedded from

  • Build a site with a form for writing posts

  • Store the posts in browser

  • Write a search or allow adding embedding content

Introduction to the Final Project

In this video, we’ll go over one version of the final project. Yours may be different.

  • Go over the html for the site

  • Put code into separate organized files

  • Cover the search and store features

Final Assignment Review
  • Basics of HTML, CSS, and JavaScript is required.

JavaScript is growing in popularity with product owners and designers due to its generous support of great user experience features across the foremost fashionable internet browsers and platforms. It is the language of the web, where you can use it to feature dynamic behaviors, store information, and handle requests and responses in a website on-the-fly and this is often why it's become one in every of the foremost helpful languages within the web development community.

With this comprehensive 2-in-1 course you will get a complete insight into JavaScript syntax such as comments, operators, and more—and then variables and functions. It will also provide you will the knowledge of how to implement jQuery in your real-world projects. You'll be creating an awesome-looking battleship game with slideshows, a development journal with YouTube, and image-embedded URLs with Bootstrap and jQuery.

Contents and Overview

This training program includes 2 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Beginning JavaScript and jQuery, covers JavaScript syntax such as comments, operators, and more. You will then learn how to execute different pieces of code based on certain conditions as well as how to make code loop a certain number of times. You will finish up the JavaScript section of the video by learning about the Document Object Model or DOM.

The second course, JavaScript (and jQuery) in 7 Days, you will instantly start to work with JavaScript, jQuery, and Bootstrap using the in-browser editor. You'll start off by learning the basics of JavaScript by writing your first program. You will also learn modern JavaScript at a quick pace to maximize your learning for the time available. Later you'll work with objects and arrays to model problems/solutions for better program output in JavaScript.

About the Authors:

Chip Lambert has been developing websites and web applications for almost 20 years. He has authored two other books for Packt Publishing: Instant RESS Implementation How-To and Mastering jQuery Mobile. He is currently a software engineer for Jenzabar Inc. and an online instructor for Bluefield College, teaching courses in web and mobile application development.

Michael Rosata is a professional JavaScript developer and the author of three courses on Functional JavaScript. He’s written multiple JavaScript applications for internal use at large companies. Michael is the founder of the Massachusetts Web Devs meetup. He has a great passion for learning, and teaching. You can find him answering questions in the Ramda gitter channel. I’d like to thank my family for giving me the opportunity to explore things I enjoy learning, and to the team at Packt Publishing, especially Sunny Kandre and Anish D'souza for making this course possible.

Who this course is for:
  • This learning path is for beginner who are new into programming and want to get started with JavaScript. This learning path is also for experienced programmer and want to learn a new language for your web applications.