JavaScript in 15mins

5 min readFeb 21, 2021

JavaScript was originally designed to be used purely on the front end as a way for web developers to add functionality to their web pages
Introduction of the “V8 engine” by Google has improved the speed and functionality of JS. That led to the development and release of exciting new front end JavaScript frameworks and eventually Node.js, a way to run JavaScript on a server (back end)
JavaScript is one of the world’s most widely-used programming languages

Java vs Javascript

JavaScript != Java. Unfortunately they share similar names.
Creators used concepts from Java and C
JavaScript is considered a ‘loosely’ typed language, in which types do exist, but they are not enforced. You do not have to declare a type when creating a variable or an array, for instance

How to run Javascript

Variables

JavaScript is a loosely-typed language, which means that a variable can be set or reset to any type. We do not need to declare its type when initiating the variable.

The anatomy of a variable is first the keyword, a space, the name we are giving the variable, an equal sign, the value we are assigning the variable, and then a semicolon.

var examplevariable = ‘sample variable’;

Strings

var stringexample = ‘sample string’;

Numbers

Numbers do NOT have quotes around them. They can be negative as well. JavaScript does have a limitation on the size of a number (+/- 9007199254740991)

var numberexample = 42;

Booleans

var booleanexample = true;

Math Operators

+ — * / =

%

Functions

Function Syntax

Function Syntax with Arguments

If Then Else

DOM Manipulation

Achieve:

1. Add a div element to an html file
2. Select the div element by it's id.
3. Append a button to the div element.
4. Change the text of the button.
5. print a string to the console when the button is clicked.

Make a new file of your choice called:

game.html

Then make another file called:

game.js

Now open both of these files in visual studio code. We are going edit our html document first. You can get started by using the shortcut by typing

doc

then hit tab. This will auto complete and you will get this:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
</html>

This is how we are going to start every html document. Now go into file explorer or finder then click on the game.html file. It should open a browser. Congratulations! You just made your first html!

Now we are going to add the line:

<div id = "demo-div"></div>

In between the body tags. That means our code should now look like this:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id = "demo-div"></div>
    
</body>

<script src="game.js"></script>
</html>

This line creates what’s called an html element. The element that we are using is a div. A div is a container. We can type text in between the angle brackets (“> “text”<”) it and refresh the browser. Then our text will just show up in the browser. Now we need to link our javascript file to our html file. This can be done by adding a script tag. A script tag looks like this:

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

We need to include this after our html ending tag so that our javascript loads after all of our html. So our code should look like this:

Now that we have linked our javascript file we need to open the game.js file. Then add the line:

alert("hello world");

Save game.js and hit refresh on browser. You should get a message that says “hello world”. If you didn’t double check your code. This is a simple way to test if your javascript is connected.

Now we need to get that html div container. Luckily, we can use the DOM to get it. The javascript getElementById method will let us select the div tag. That’s why we gave it and id attribute!

Our final version of game.js looks like this:

// select div.
let demoDiv = document.getElementById("demo-div");

Now I like to include everything in a main function. A javascript function is what runs code. You can write a function and make it do something to the page for example. First lets make a function that does steps 3 and 4 from our goals. We can call it buildUI, UI stands for User interface. Here is what we need. First we need to make a button element then change it’s text. Then we need an event listener to listen for clicks. Finally we have to append it to the div. Here is what the function should look like:

function buildUI(){
    
    // create new button and add it to the div.
    let button = document.createElement('input');
    button.type = "submit";
    button.innerHTML= "submit"

    button.addEventListener("click", logButton);

    demoDiv.appendChild(button)
}

The addEventListener will call logButton function when the button is clicked. This is what will print to the console. That function should look like this:

function logButton(){

    // log to the console when the button is clicked.
    console.log("The button was clicked.")

}

So now we need to put this all together. We have only written function definitions. We need to call these functions. To do that we just need to add the line

buildUI();

Run the code and see the results. Did your code work? If it didn’t spend time looking through each piece of it. Getting started in javascript is tricky so be patient and most importantly do not give up. It was hard for me too. That’s why I am making really simple tutorials.