#0 Introduction

Introduction and Setup

What is JavaScript?

JavaScript is the programming language that is primarily used on websites in the browser. It was created in 1995 in order to allow the creation of dynamic (changing) sites. It has been the most popular programming language for a lot time because of this.

Article contents

Over this series of articles we will start with the basic syntax up to manipulating the DOM. Don’t worry if some of these words sound confusing. After completing all of these, you will have a pretty good grasp of the basics. Good Luck.

Prerequisites

  1. Have a device.
    You need a device to start coding. It is preferable if it’s a computer because it will be easier for you. It doesn’t need to be a super fast computer. If if can open an internet browser fine, the computer is good.
  2. Get a program to write and edit your code.
    This is known as an IDE (Integrated Development Environment). The reason why we use an IDE instead of a text editor like notepad is because IDEs can give syntax highlighting (fancy code colours), improper syntax errors, (red squiggly underline) and help overall.
    There are multiple choices for IDEs but I will be showing you with Visual Studio Code. It is a free IDE developed be Microsoft.
    ##### Installing Visual Studio Code
  • Windows
    Go to https://code.visualstudio.com/
    Press download and run through the installer
  • Mac
    Go to https://code.visualstudio.com/
    Press download and run through the installer
  • Linux
    – Method 1 (Easiest)
    Check if you have snap installed
    Run snap --version and see if there is output
    To install vscode run sudo snap install --classic code
    – Method 2 (Only Debian/Ubuntu based distributions)
    Download the .deb file from the offical website.
    Then run sudo apt install ./<file>.deb
    – Other
    If none of these methods work, follow the official installation instructions
    https://code.visualstudio.com/docs/setup/linux

Getting an extention

  1. We are going to install a extension in vscode to help. On the left press the button with a 2×2 grid of squares where one square is separated.
  2. The first extension we are going to install is “LiveServer”, this is so we can run the code in the browser. Click install. You may need to reopen vscode if it says so.

Files ready

  1. Create a folder where your code will reside.
  2. Open up vscode (Visual Studio Code) and press “open folder”. From there, locate the folder you created and press OK.
  3. Create a new file by going to [File] -> [New File]
  4. Type “index.html” and save
  5. In “index.html” paste this code (it is so that we can run it in the browser):
<!DOCTYPE html>
<html lang=“en”>
    <head>
        <script src=“script.js”></script>
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>
  1. Create another file named “script.js”
  2. To show the code in the browser right click “index.html” and select “Open with Live Server”. This will automatically update for us when we edit the code. Now right click in the webpage, select “Inspect Element” and then console. We will see the output here.
    This will be your basic template for each one of these articles about JavaScript.