Javascript Resources
      Back to home
      1. Help Center
      2. Coding Resources
      3. Javascript Resources

      JavaScript Reference Guide

      When you need a little extra help with JavaScript basics, this article is a great resource!

      Last updated - June 30, 2023

       

      HTML puts information on the page and JavaScript helps that information do things. For example, HTML is what decides what is on a button. JavaScript is what makes the button DO something when you click it. For JavaScript to work it has to be linked to an HTML file. You can do this by including your JavaScript in your HTML file using script tags <script> </script> or by linking to a .js file using a script source attribute. For example: 

      <script src="myscript.js"> </script>

      Variable values and types

      Variables are the building blocks of JS and many other programming languages. They can be used to store objects (text, numbers, JS functions, and more.) In JavaScript, variables should look something like this: var name = object; 7

      There are three basic types of values you can assign to your variables: strings, integers, and booleans. 

      Variable

      A container that stores information.

      Example:

      var height= 35;
      Strings  Text values. By wrapping a variable's value in quotes, you create a string. Example:

      var name = "Hannah";
      Integers

      Integer values are numbers, negative or positive. They can include decimal points, but they are not wrapped in quotes. Example:

      var age = 24;
      Booleans

      A data type that represents the value of true or false. Example:

      var answer = true;

      var answer2 = false;

       

      Functions

      In JavaScript, a function is a piece of code that executes a certain command. There are many different functions, but this chart lists the most common ones.

      console.log()

      This function records code to the console, or the area of a computer that notes from a program can be printed to. When you run this function, the data you type inside the parentheses will display on the console.

      Example:

      console.log("Hello World!");

      This example will print Hello World! to the console.
      alert()

      The alert function puts data in a pop-up for the user to view. Example:

      alert("Welcome to my website!");

      This example will cause "Welcome to my website!" to pop-up on screen.
      prompt()

      The prompt function prompts the user to type information into an empty field. The information inputted by the user can be used as a variable's value. Example:

      var name = prompt("What is your name?");

      alert(name);

      This example will ask the user "What is your name?" Once the user types in their name, that input becomes the value for the variable 'name'. The alert will then cause a pop-up to appear with whatever the user typed in as their name.
      declare a function

      You declare a function by typing function before its name. After the name, put opening and closing parentheses, followed by opening and closing curly brackets. Example:

      function greeting() {
          console.log("Hello world!");
      }

       

      For a function to run its code, you must call the function. Example:

      greeting();

       

      After you declare your function, you should call the function to get that code to run. Together, your function and call should look like the following example:

      function greeting() {              
          console.log("Hello world!");    
      } 


      greeting(); 

      This function will cause 'Hello world!' to print to the console.

       

      Troubleshooting your code:

      • Is your JavaScript file linked to your HTML file?
        • Is your JavaScript file name spelled correctly in your link? The .js file name in your link should match your .js file exactly.
        • Is the syntax used in your link correct? Check for the correct placement of quotation marks, equal signs and < >. Check that you have included both the opening tag and closing tag. Your link should look something like this, and should be placed at the end of your HTML body tag: 
          <script src="myscript.js"> </script>

      • Is your syntax correct in your JavaScript file?
        • Check for the placement of semi-colons ;. Make sure you have included parentheses ( ), curly brackets { }, and quotation marks " " where they are needed.
          • While JavaScript does not require semicolons, it is considered best practice to include them.
        • Check your spelling.
        • Check your spacing.
      • Do your variable types and values match?
        • Remember that string values should be wrapped in quotation marks " ".
        • Boolean values can only be true or false.
      • If your function is not working, make sure you have called the function after declaring the function.
      •  Check and double-check your code!
        • JavaScript code can be long and detailed. It is easy to overlook a small mistake or typo! To prevent having to search through a very long file for typos, try to check for mistakes and make sure your code works often while you build your website.
      • Read the lesson and requirements again.
        • If you are having trouble, it can help to read the lesson and requirements again. Make sure you understand the lesson and make sure your code includes all of the requirements that the challenge or checkpoint asks for. Sometimes, the autograder can be picky and wants your code to include the same words, spacing, and punctuation as the requirements or example.