Tuesday , 22 May 2018
Conclusion

Conclusion – Advanced JavaScript Tutorial

This tutorial series has covered A LOT of topics. JavaScript is a powerful language. It doesn’t take much time to learn, but years to master. There are a couple of things that you’ll need to learn, but these are things beyond the scope of this tutorial. If you’re wondering where to go next, then you should check out a couple …

Read More »
Request Types

Request Types – Advanced JavaScript Tutorial

Request types only matter when you need to send data along with your request. HTTP headers are meant to store information about the request and the response like the referrer or date it was sent. If you need to send custom data like names, addresses, or just a really long message, then you use form data. Let’s take a look …

Read More »

HTTP Headers – Advanced JavaScript Tutorial

HTTP headers are just pieces of information of the request and response. Browsers will automatically send this kind of information by default. Sometimes you’ll want to modify these HTTP headers so you can let servers know what to expect. Servers also send you back HTTP headers which allow you to know more information about the response itself. Sending Custom Headers …

Read More »
AJAX

AJAX – Advanced JavaScript Tutorial

AJAX stands for Asynchronous JavaScript XML. This can be a bit misleading as you can make AJAX calls be synchronous.  This tutorial requires that you upload and use your files on a live or local server. What is AJAX? Traditional websites would load a different page every time you needed to make a request to a different page or file. …

Read More »
Console Object

Console Object – Advanced JavaScript Tutorial

The console object is the recommended way to log errors, messages, and information about what’s going on. All browsers have consoles and are accessible via the console object. Clear your script and add this bit of code. [crayon-5b040964959b4389504047/] To access the console object, will depend on your browser. If you have FireFox, then you must install firebug in order to …

Read More »
Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it would be logged into the console for you to see. This can be accessed in a variety of ways in different browsers. Usually you’ll find it in the developer section. The try-catch statement allows you to handle errors in your own way. Let’s clean up …

Read More »
Audio

Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you already know how to use most of things in the audio object. However, there are a couple of key differences when it comes to formats. Audio Tags To add audio into your document, then you use the <audio> tags like so. [crayon-5b040964963e7514354207/] Like last time, …

Read More »
Video Events

Video Events – Advanced JavaScript Tutorial

Video events allow you to tap into what’s currently happening with the video. There are a couple of video events, but we’ll only go over the more common ones. Let’s update our <body> tags to this. [crayon-5b040964969a0208523810/] We added a button and a place to display the duration and the current time of the video. Let’s update our script to this. …

Read More »
Video

Video – Advanced JavaScript Tutorial

Videos have finally become possible since the introduction of HTML5. It is VERY easy to work with videos as the good guys at W3C made a very simple API to use. Before you get started, please make sure to download the source code for this tutorial as it contains the video files for this tutorial. Video Tags Before we dig …

Read More »
Global Properties

Global Properties – Advanced JavaScript Tutorial

There are 2 global properties you can use to apply to your drawings. This the alpha and composition properties. They can truly effect the outcome of all your drawings. Alpha Clear your script and add this bit of code. [crayon-5b0409649758b436126664/] In the example above, we draw a rectangle with the default settings. Next, we change the globalAlpha property. This property …

Read More »
Gradients

Gradients – Advanced JavaScript Tutorial

Gradients allow you to create fills with multiple colors. Not only that, it takes care of transitioning from 1 color to the next. There are 2 kinds of gradients which are linear and radial. We’ll learn how to do both in this tutorial. Linear Gradients Clear your script and add this bit of code. [crayon-5b04096497ad0713672332/] Alright a couple of things …

Read More »
Shadows

Shadows – Advanced JavaScript Tutorial

Shadows are a great way to make your 2D drawings pop out. They’re very easy to set up and you’re given a couple properties to get you started. Clear your script and add this bit of code. [crayon-5b04096497fff136030232/] In the above example we use the 4 main shadow properties and draw a green rectangle onto the canvas. Let’s focus on …

Read More »
Drawing Images

Drawing Images – Advanced JavaScript Tutorial

If you would like to add your own images into the canvas, then you only have to write a couple lines of code to do so. There are a couple of ways of drawing images onto the canvas, but we’ll be using 1 way which is the image object. Please feel free to download the images I use in this …

Read More »
Transformations

Transformations – Advanced JavaScript Tutorial

Transformations allow you to add cool effects to your drawings. This tutorial will cover that and we’ll fix the problem with fuzzy drawings. Fixing Fuzzy Drawings Previously, we set the width and height of the canvas using CSS. This is the wrong way to do things as it can actually stretch our drawings and make it appear fuzzy and blurry. …

Read More »
Text API

Text API – Advanced JavaScript Tutorial

In this tutorial, we’ll take a look at how to add text to our canvas. It’s actually quite simple. You’re given many options to set up how the text appears. Let’s update our script to this. [crayon-5b04096499245516055747/] There are 2 methods to add text to the canvas. They are the fillText() and strokeText() methods. Both of these methods have the …

Read More »
ULTIMATE NODE JS WITH SQL COURSE
Want to learn how to create web applications with Node.js and SQL? Check out my course!
Get 93% off my course. You'll also learn how to build real world applications using Node and SQL. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link