- 10 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Learn various loops & conditional branching
- Implement jQuery in an application for validating user input
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.
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
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!
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.
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!
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.
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!
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.
Use operators to compare values
Write expressions that combine values of different types
Create an expression that may be true or false
If true, log a message or update variables
Handle falsey expressions in an “else” block
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.
Use “parameters” as predeclared variables for your function
Call the function with values for desired parameters
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
Access items by their index numbers
Use Array methods to add and remove items at will
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
Choose a variable to evaluate
Write “cases” to run code based on that variables value
Use a “default” to handle unexpected values
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
Math is an Object with math functions
Math.random will help us select random indexes
Practice using different built in utilities
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
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
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
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
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
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
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
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
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
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
Change the style of elements with the .css method
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
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
Get a reference to elements with jQuery
Use the .on method to listen for ‘click’ events
Write a function to run on each click
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
Update you previous battleship assignment with HTML
Use a form to get the users coordinate guesses
Show their score, win or loss in HTML
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
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
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
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 Repl.it code to a site using iframes
Create a Bootstrap carousel
Create dropdown to select any slide
Use HTML in a slide to link to other content
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
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 Repl.it.
Build a site with a form for writing posts
Store the posts in browser
Write a search or allow adding embedding content
Contents and Overview
This training program includes 2 complete courses, carefully chosen to give you the most comprehensive training possible.
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.