What Is JavaScript? (+How to Practice Your Coding Skills)

Mara Calvello
Mara Calvello  |  March 19, 2019

Taking action, whether it’s the first step in learning a new hobby, or moving across the country to your dream city, can be an exciting experience.

In the world of tech, and website building, getting a page on your website to do a specific action is much easier than moving across the country, all you need to do is learn how to code. More specifically, learn how to code using JavaScript.

Learning how to code and build your website may seem overwhelming at first. You may be thinking, “one forgotten character and my entire code is wrong.” You’re not alone in that thought, but it’s best to simply roll up your sleeves and get started.

Interested in something specific JavaScript? Jump ahead to details further in this article:

What is Javascript?

If you think of the code on your website like layers, HTML is the first layer, followed by CSS, and then finally JavaScript. These three languages that web and mobile app developers use work together to create a website and each do something different:

  1. HTML defines the content on the web page.
  2. CSS specifies the layout and style of the web page.
  3. JavaScript programs behavior on the web page.
Related: JavasScript and Java, while they sound similar, are not the same thing!

When you load a site in your browser, you are running the code inside a tab. JavaScript is then enabled in the browser’s JavaScript engine, once HTML and CSS have fully loaded. This ensures that the structure (headings, paragraphs, etc.) and the style (font size, colors, etc.) are in place by the time JavaScript begins to load.

Process of Loading a Website

What is JavaScript used for?

The main language of JavaScript consists of a long list of programming features that allow you to do many actions to your website. For example, JavaScript is used to run code in response to certain events happening on the web page. If you used a “click” event in your code, it would detect when a button is clicked and run the specific action. The Javascript is then telling websites or apps to do something in real-time, without having to reload the entire page, making interactions more efficient.

In addition to the click function, JavaScript can change, hide, or show various HTML and CSS code.

When your browser sees a block of JavaScript code, it runs it in order, meaning from top to bottom. Because of this, it’s important to be mindful of what order, and where, you insert this code.

Unsure of when you’ve seen JavaScript in action? Think about when your Facebook timeline has updated automatically, or when Google suggests search terms based on just a few letters of your search query. Yup -- both JavaScript.

Related: On your journey of learning JavaScript, check out this roundup of JavaScript web frameworks software, brought to you free from G2!

Find the best JavaScript Web Frameworks Software on the market. Explore Now,  Free →

What can JavaScript do?

Have something specific in mind for your web page, and not sure if it can be done with JavaScript? Here are just a few actions Javascript can run on your website:

  • React to user actions, mouse clicks, key presses, and mouse movements
  • Get and set cookies, show messages, ask the visitor questions
  • Change the existing content and modify styles to HTML
  • Download and upload files
  • Send and request data from a server without reloading the page

It’s related to manipulating the web pages or interacting with the user, JavaScript can do it.

One common example of JavaScript that is increasingly popular on websites is triggering a pop-up as your mouse moves to close out the tab. For instance, as I moved my mouse to close out the Colourpop homepage, I received this pop up:

Before You Leave Browser Pop-UpPhoto courtesy of Colourpop.com

In this case, Colourpop wants to make sure I sign up for their email before I close my browser and exit their website. Thanks to the use of JavaScript, the code tracked my mouse as it made its way up to close the browser, and triggered a Call To Action to sign-up for their email newsletter before I could leave.

Related: Check out these tips for coding websites if you're a beginner!

JavaScript Syntax

While HTML and CSS have specific code that is used frequently, JavaScript has hundreds and hundreds of coding options that you can use.

When it comes to JavaScript Syntax, fixed values within the code are called literals, while variable values are called variables.

Literals

Fixed values, or literals, come in various forms. They can be numbers, written with or without decimals, or strings of text, written with double or single quotes.

Javascript strings are used for storing or manipulating text and consists of the characters written inside the quotes. In the case below, G2 Learning Hub is the fixed value written as a string.

var blogName = ‘G2 Learning Hub’;

Variables

Variables within JavaScript are containers that store data values and are written using either the var, let, or const keywords (each of which has slightly different cases for its use). In the example below, a, b, and c are variables:

var a = 2;
let b = 4;
const c = a + b;

It’s common to think of variables like algebra. So in this case, const c would equal 6. The equal sign is used to assign the values to the variables and is referred to as an assignment operator. The plus sign is referred to as an arithmetic operator, which computes values.

When you name your variables, keep in mind these names need to be unique names, which are called identifiers. They can be short names (like a and b) or more descriptive (like age and sum).

When picking names for your variables, or unique identifiers, keep in mind:

  • Names can contain letters, numbers, underscores, and dollar signs
  • Names are case sensitive
  • Names must begin with either a letter, a dollar sign, or an underscore, but not a number

JavaScript Syntax

Case Sensitive

No matter what sort of action you’re writing JavaScript code for, it’s important to keep in mind that JavaScript is case sensitive. The variable lastName and lastname would be two different lines of code.

var lastname, lastName;
lastname = ‘Jones’;
lastName = ‘Smith’;

The most common type of way that programmers code in JavaScript is using Camel Case. Meaning, the first word would start with a lowercase letter, and each word following would start with an uppercase letter.

Practice writing JavaScript

Ready to practice writing JavaScript before launching it on your website? If you’re using Chrome, you can do so very simply using the built-in console.

First, go to the Google homepage. Under “View”, scroll to Developer and select JavaScript Console. 

Chrome JavaScript Console
 

 This brings up a JavaScript editor directly in the browser, which you can use to see your code in real-time. For this example, I want to create an alert that says “Hello, welcome to the G2 Learning Hub.”

To do so, I would type:

alert (“Hello, welcome to the G2 Learning Hub”)

In this case, alert is a built-in “action” that translates to the browser to display an alert box, and the text is the string.

When I press enter, I get this popup: 

JavaScript Console Alert

To see variables in action, I can use JavaScript to know that my name is Mara and that I want the popup to be my name.

The code I typed into the JavaScript Console is:

var name = “Mara”

Then, I simply typed name and then hit enter, and it knew my name is Mara. For the alert I typed: alert(name), hit enter and received this popup.

JavaScript Name Pop-Up

Once I used the code to specify my name and put it in quotes, the code knew that the string for name is Mara.

If I were to try and do an alert for a string I have not yet created or defined, alert (message), I’ll receive an error.

JavaScript Error Message

Actions speak louder than words

When you’re looking for a specific action to happen on a web page you are building, JavaScript is the way to go. As the cherry on top, or the last layer of code, to your website, the simplest code can take your web page to the next level and enhance the user experience.

Once you master these three coding languages, it’s important to consider other elements of website building, like how long it will take to build a website and how much a website costs to create.

Check out our website building hub where you can get 50 resources for free!

Mara Calvello
Author

Mara Calvello

Mara is a Senior Content Marketing Specialist at G2. In her spare time, she's typically at the gym polishing off a run, reading a book from her overcrowded bookshelf, or right in the middle of a Netflix binge. Obsessions include the Chicago Cubs, Harry Potter, and all of the Italian food imaginable.