Wednesday , 15 August 2018
Path API

Path API – Advanced JavaScript Tutorial

The path API allows you draw custom shapes with paths.  You can create some really complex shapes and drawings with this API as it comes with powerful methods. Lines Clear your script and add this bit of code. [crayon-5b7394011a0fb258845734/] So, we first set up the stroke color and set it’s with to 2 pixels. Now, we can start drawing some …

Read More »
Canvas

Canvas – Advanced JavaScript Tutorial

Since the introduction of HTML5, the <canvas> tag has grown a great amount of popularity. The <canvas> element allows you to draw graphics onto the document with JavaScript. To get started, let’s update our document to this. [crayon-5b7394011ba7c810128695/] The very first thing we must do is create <canvas> tags. This is where all our graphics will be placed. You MUST …

Read More »
Text Fields

Text Fields – Advanced JavaScript Tutorial

In this tutorial, we’ll focus on text fields in our forms. There a couple of events, properties and methods to make working with forms easier. Selecting Text Let’s update our document to this. [crayon-5b7394011c567282046895/] Alright, let’s clear out our script and add this bit of code. [crayon-5b7394011c573787654448/] In our third line, we use a method called select(). This method will …

Read More »
Form Events

Form Events – Advanced JavaScript Tutorial

If you’ve seen my JavaScript tutorial series, then you already know how to work with forms. In this tutorial, we’ll talk a little more about form events  and how to manipulate them with JavaScript. Setting Up The Document Let’s update the body tags to this. [crayon-5b7394011ce40674144880/] We just have a basic form with some input fields. You should remember that …

Read More »
Event Management

Event Management – Advanced JavaScript Tutorial

This tutorial is based around event management. Just like anything else, creating events takes up memory. Creating multiple events can really slow the performance of your website. Let’s take a look at a couple of ways to still have all the events you want while still keeping your site running in tip top shape! Let’s update the body tags in …

Read More »
Device Events

Device Events – Advanced JavaScript Tutorial

Smartphones and tablets are devices that are frequently used to browse websites. JavaScript now has a couple of events for hand held devices.  For this tutorial, you’ll need to have a mobile phone. I’ll be using the Iphone for this tutorial. Feel free to skip this tutorial if you don’t have a device handy. Orientation The orientationchange event fires when …

Read More »
Keyboard Events

Keyboard Events – Advanced JavaScript Tutorial

It’s time to take a look at keyboard events. Another popular feature of JavaScript is the capability to detect which keys were pressed and how they were pressed. Let’s first update our document to this. [crayon-5b7394011e837477882675/] Sweet! Now, let’s clear up the script and add this bit of code. [crayon-5b7394011e842603718259/] The first kind of event is the keydown event. This …

Read More »
Mouse Events

Mouse Events – Advanced JavaScript Tutorial

Keep track of how the mouse interacts with the web page. It is the primary device for navigation after all. Whenever mouse events occur, you’re passed in a lot of information as to where the mouse is located or what is also happening with the mouse. Let’s take a look at how this works. Coordinates We’re going to keep our …

Read More »
UI Events

UI Events – Advanced JavaScript Tutorial

UI events are events that aren’t specific to the document, but the window object. These events fire when something happens to the browser or window. Loading Events Loading events fire when the window has loaded all scripts, images, files and styles. There are also unloading events for when the user leaves the page. Update your document to this. [crayon-5b7394011f767433902967/] Let’s …

Read More »
Event Object

Event Object – Advanced JavaScript Tutorial

The event object is passed into your function whenever an event occurs. This object contains information about the event and even allows you to change how the event phases flow. We’ll be working with our previous example. Update your script to this. [crayon-5b7394011ffdc570707153/] Our functions have been updated so that we can reference the event object. The event parameter will …

Read More »
Event Handlers

Event Handlers – Advanced JavaScript Tutorial

If you’ve seen my events tutorial in my JavaScript basics tutorial series, then you already know how to use events. There’s another way of using events with event handlers. Before we begin, let’s update the <body> tags in our document to this. [crayon-5b73940120909215280785/] We just have a simple button in our document with the ID btn. To add an event, …

Read More »
Data Attribute

Data Attribute – Advanced JavaScript Tutorial

HTML5 is fairly new and it’s slowly being adopted by all web browsers today. A special feature of HTML5 is the ability to define custom data attributes. A data attribute is your own attribute that can contain information about an element. Let’s update our document to this. [crayon-5b73940121178728071731/] To create a data attribute, you simply create an attribute with the …

Read More »
Selectors API

Selectors API – Advanced JavaScript Tutorial

The selectors API is a simpler way to grab elements by using CSS queries. If you recall, you can change the styles of an element using CSS. Here’s an example of how you would do so. [crayon-5b73940121732525980837/] To grab an element in general, you just type in the tag name. To grab an element with an ID, you type a …

Read More »
Navigator Object

Navigator Object – Advanced JavaScript Tutorial

The navigator object allows you to grab information about the browser and visitor’s computer. You can grab the browser name, plugins, OS, language, etc. Properties Clear your script and add this bit of code. [crayon-5b73940121f09868400788/] The navigator object is pretty tricky. Even though the navigator object has been around since Netscape Navigator 2, the properties and methods are supported in …

Read More »
Location Object

Location Object – Advanced JavaScript Tutorial

The location object contains information about the current URL you’re visiting. It can give you helpful information such as the port number, whether or not the site is using SSL and even allows you to redirect the user. Properties Clear your script and add this bit of code. [crayon-5b73940122625780869997/] There are a couple of properties of the location object, but …

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