Introduction to JavaScript

June 14, 2021
Emilie Mitchell

Before starting this introduction, you don't need to have any knowledge of JavaScript; however, you should be relatively familiar with HTML and CSS. We recommend reading our Beginner's Guide to HTML and Beginner's Guide to CSS before continuing to learn about JavaScript.

Already familiar with HTML and CSS? Let's get started.

What is JavaScript?

Alongside HTML and CSS, JavaScript is one of the core technologies of the web. JavaScript is a programming language that adds ways for users to interact and engage with your website. Just as you can interact with parts of your home, such as turning on a light, you can interact with certain webpage elements to determine what happens next through JavaScript.

JavaScript can run everywhere, including mobile devices, tablets, and laptops. This ability makes JavaScript a universal language and also helps its ranking as the most commonly used programming language.

What is JavaScript Used For?

JavaScript is commonly used to add interactive behavior to your webpages. What kind of behaviors can this include?

  • Showing or hiding more information with the click of a button
  • Changing the color of a button when the mouse hovers over it
  • Sliding through a carousel of images
  • Zooming in or out on an image
  • Displaying a timer or count-down
  • Playing audio or a video
  • Displaying animations
  • Using a drop-down menu

JavaScript Basics

Conditionals

Conditional statements control behavior in JavaScript and determine whether or not pieces of code can run. There are multiple types of JS conditionals, including the following:

If Statement

If statements are the most common type of conditional. This statement only runs if the condition enclosed within parentheses is true.

Example:

if (condition) {

  // block of code to be executed if the condition is true

}

Else Statement

Else statements are often added to if statements, allowing another block to run when the if statement doesn't pass.

Example:

if (condition) {

  // block of code runs if the condition is true

} else {

  // block of code runs if the condition is false

}

Else If Statement

If statements can also be extended by adding an else if statement. This statement passes if a specified condition is true. If the condition is false, another block can run.

Example:

if (condition1) {

  // block of code runs if condition1 is true

} else if (condition2) {

  // block of code runs if the condition1 is false and condition2 is true

} else {

  // block of code runs if the condition1 is false and condition2 is false

}

Loops

Loop For

The for loop repeats a block of code as long as a certain condition is met. The statement is typically used to run a block of code for a certain number of times.

Syntax:

for (initialization; condition; increment) {

    // code to run

}

The initialization parameter happens first and only once.

The condition parameter is tested each time through the loop. If true, the block and increment are executed and the condition is tested again. If false, the loop ends.

The increment parameter is executed each time through the loop when the condition is true.

Loop While

The loop while statement loops through a block of code as long as the specified condition is true. The loop stops as soon as the condition fails.

Syntax:

while (condition) {

    // code to run

}

Functions

JavaScript functions are designed to perform a particular task and executed when they are called, also known as invoking a function. A function is defined with the function keyword, followed by a name, followed by parentheses, as shown below.

function name(parameter1, parameter2, parameter3) {

  // code to run

}

Events

When JavaScript is used in HTML pages, JavaScript can react on HTML events. An HTML event can be something the browser or user does, such as when the webpage finishes loading or when an HTML button is clicked. When these events occur, you often want to do something else. JavaScript allows you to execute code when events are detected. For example, you could run a JavaScript response to display a message to users when they click a button.

Takeaway

JavaScript plays a crucial role in web development, creating a dynamic and interactive experience for website users. JavaScript works closely with HTML and CSS to build the front end of a website by applying information that alters the structure, style, and interactivity.

Not sure if you can execute this kind of task by yourself? Consider the help of our software developers at WynHouse Innovation.

Ready to Talk About Innovation in Your Organization?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.