Video tutorial: Learn JavaScript & jQuery

Welcome to the ultimate JavaScript and jQuery course.

This video explains what JavaScript is and what it can do for us.

In this video you will learn which editor we will use and we will install it together.

This video shows how to use clicks with JavaScript and how variables work.

The If statement. If is used very frequently in programming. For example, if you only want to execute something if a certain condition is met.

This video is about arrays (fields) in JavaScript. They allow us to store multiple pieces of information within a variable.

In this video, you will learn about for-loops (loops). These allow us to execute a certain code several times in succession.

Functions are a kind of mini program that we can use again at any time after we have created it. For example, if you press the home button on your cell phone, a function is called up that takes you back to your home screen. Functions therefore make your work much easier.

The result of the challenge is shown here (namely a quiz) and the HTML foundation is also created.

The CSS (the appearance) of the quiz is programmed here.

The JavaScript of our quiz is programmed and explained here.

You have already seen how functions with one parameter work. Now let's take a look at functions with several parameters. Multiple parameters are used when you want to use a function with several different variables. In mathematics, for example, when adding several values.

There are global and local variables. Briefly summarized: Global variables are the variables that are created outside of functions, and local variables are those that are created within functions. Here we take a closer look at how this works.

In programming languages, it is possible to set up functions in such a way that they have a return value. So far, we have only had functions that simply executed something, but did not return anything that we could have continued working with. So now let's take a look at RETURN.

In this article, we will cover mathematical operators and assignment operators. The mathematical operators are quite simple things such as addition, subtraction, etc., while the assignment operators are the ability to carry out simple operations quite easily, such as increasing by 5. As both are important in programming, both topics are covered here.

There are three (or four) different types of loops in programming: the do-while, while and for loops. We have already learned about the For loop. Now let's look at the do-while loop (foot-controlled) and the while loop (head-controlled).

This article is about an alternative to If conditions. These are Switch and Case. In other words, you have a switch that switches through the various cases and stays with the one that is active.

We have already covered arrays, but have not gone into detail. There is much more to know about arrays. The most important property of a JavaScript array is the number of elements (length). However, the array also has other properties such as index, which gives us information about the position 0 of the array.

Objects are an extremely important and interesting concept in many programming languages. In principle, everything can be described as a kind of object. Let's take an object that we usually see on the roads: a CAR. A car has certain properties/characteristics and can perform certain actions.

Let's take a look at how we can create objects in JavaScript. To do this, we create a constructor function and two instances of our object in our head tag. Within the constructor function, which has the same name as our object, we tell the program that the parameters passed to the constructor function when creating an instance of the object should be the values of the object.

As a basis for functions of objects, we start with the code from the last tutorial, in which we created variables that are created for each instance of our object.

In this tutorial, you will get to know the Math object. This is an object that is based on the Math class and comes with lots of cool properties and functions.

This video is about the Date object or the Date class. These are objects that can be used to include the time in a program. This does not necessarily mean the time or date, but can also be a time span. A date object contains the time that has passed since the time 1970-01-01 00:00:00. There are various ways of passing parameters to the date constructor.

In this video you will learn how to build an interactive clock with JavaScript.

This video is about inheritance and polymorphism. Two concepts of object-oriented programming.

In this article we address the question: What is jQuery? jQuery is a JavaScript library that allows us to make even cooler websites.

Here you will learn how to process clicks much more easily with jQuery.

In this tutorial, you will learn how to change the appearance of a website with jQuery. To do this, we can simply overwrite an attribute of a field, for example. In this example, we can change the link of the iframe (i.e. the src/source) by hovering over the square. You could easily change the code and, for example, enlarge the square by overwriting the height and width attributes when hovering over it. In general, you can now use this method to easily change the appearance of the website.

One of the cool features of jQuery is to fade an element. In this example, we fade out a button as soon as we click on another button. We use the FadeOut function ("fade function"). To display the element again afterwards, we use the FadeIn function.

In this video, we look at animation in jQuery. This is something that moves. So we make sure that an element on our website moves/changes. There is a function in jQuery for this. This is called animate() and expects three parameters.

Let's take a look at what jQuery UI is.

The Accordion is a widget which, like an accordion, allows us to see only certain parts of the whole. This is particularly useful if you want to convey a lot of information, but it would be far too confusing as one large text.

This tutorial is about sortables in jQuery UI. These are sortable elements. You know this if you use productivity websites like Wunderlist or Trello. The ability to make elements sortable is an extremely cool feature that you can use in many different applications.

Sometimes it happens that you want to make the size of an element changeable by the user. Then resizables are just the thing. They allow you to do just that. You can see a small triangle at the bottom right of the element, which you can click on and then, if you hold down the mouse pointer, you can enlarge or reduce it.

In jQuery UI, draggables make it very easy to build an element that can be dragged back and forth. Let's take a look at how to do this here.

Progress bars are a great way to show the user how far they are in a particular process. In the sales process in an online store, for example, or in a survey, it helps the user to know how far they are in completing the steps.

In this tutorial, I would like to briefly discuss effects in jQuery UI. There are some pretty cool effects that make it possible to make your website look even better and also completely blow your users' socks off.

In this video you can see the result of the challenge. A FAQ page.

We are implementing the FAQ page here.

This video introduces the brain game that is programmed in this chapter.

First, let's take a look at the structure and appearance of the game.

Now let's take a look at some of the game's functionalities.

The player can already carry out the first actions in the game, but now we will make sure that the game can be restarted and ended correctly.

Now it's just a matter of adding the Timer to the game to calculate the score correctly and limit the game time. We will also carry out a few more small steps to complete the game.

The app of the chapter is presented here. This is a to-do list app/website.

Now let's create the basis and take a look at how we can create and edit the corresponding theme with jQuery Mobile.

Because we follow an OOP approach, we have to create the corresponding architecture. We take care of that here.

In this video we add the pages and take care of the page where we create tasks.

Similar to the creation page, the editing page must also be filled and given the corresponding functionality.

Now we can take care of the architecture again and create the data structure.

Now that we have our data structure, we can easily call it up in our UI.

During programming, a few steps were necessary in the "explanation flow", which we can now fix. We also take care of the permanent storage of data and complete the app.