What Is JavaScript? Learn How to Code Your Way to Success

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.

While many website builders offer convenient drag-and-drop interfaces, mastering JavaScript can give you unparalleled control over your online presence. In today's tech-driven world, a website is essential for individuals and businesses alike. Learning JavaScript is the key to unlocking its full potential, creating engaging experiences, and differentiating your site from the countless others built with website-building software.

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

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

• HTML defines the content on the web page.
• CSS specifies the layout and style of the web page.
• JavaScript program behavior on the web page.

You run the code inside a tab when you load a site in your browser. Once HTML and CSS have fully loaded, JavaScript is enabled in the browser’s JavaScript engine. This ensures that the structure (headings, paragraphs, etc.) and the style (font size, colors, etc.) are in place when JavaScript loads.

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 on 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 tells websites or apps to do something in real time without reloading the entire page, making interactions more efficient.

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

When your browser sees a JavaScript code block, 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 a few letters of your search query. Yup -- both JavaScript.

What can JavaScript do?

Have something specific in mind for your web page and are unsure 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 web pages or interacting with the user, and 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:

Photo courtesy of Colourpop.com

In this case, Colourpop wants me to sign up for their email newsletter before I close my browser and exit their website. Thanks to 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.

How JavaScript works

JavaScript code is executed within a web browser using a specialized software component called a JavaScript engine. Popular engines include V8 (used in Chrome) and SpiderMonkey (used in Firefox).

The execution process involves two key components:

• Event Loop: This mechanism manages asynchronous operations, such as handling user interactions or making network requests. It works by maintaining a call stack to store currently executing functions and a callback queue for tasks waiting to be executed.
• Browser API: The browser provides a set of functions and methods known as the Browser API, which allows JavaScript code to interact with the Document Object Model (DOM), the structure of a web page, and handle events like button clicks or page loads.

The JavaScript engine, event loop, and browser API enable JavaScript to create dynamic and interactive web pages that respond to user actions and provide real-time feedback.

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.

Regarding 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 text strings, written with double or single quotes.

Javascript strings store or manipulate text and consist 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 an arithmetic operator which computes values.

When you name your variables, remember that they need to be unique. These 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

Case Sensitive

No matter what sort of action you’re writing JavaScript code for, it’s important to remember 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 way that programmers code in JavaScript is using Camel Case. This means that the first word starts with a lowercase letter, and each word following starts 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 simply using the built-in console.

First, go to the Google homepage. Under “View,” scroll to Developer and select 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: 

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.

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.

Pros and cons of JavaScript

JavaScript offers several advantages but also has some drawbacks.

Pros

• Versatility: JavaScript's adaptability allows it to be used for creating both the front-end (user interface) and back-end (server-side logic) of web applications.
• Interactivity: JavaScript enables web pages to be dynamic and interactive, responding to user actions and providing real-time feedback.

Cons

• Security: JavaScript can be susceptible to security vulnerabilities, such as cross-site scripting (XSS) attacks, if not handled carefully.
• Browser Compatibility: Different web browsers may interpret JavaScript code differently, leading to potential inconsistencies in how web pages display or function.

Understanding these pros and cons helps developers make informed decisions about using JavaScript.

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.

Looking for the next steps? Explore our website-building hub, where you can get 50 resources for free!

This article was originally published in 2019. It has been updated with new information.