JavaScript in 15mins

  • 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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Setting Up Single Page JavaScript in Phoenix with Brunch

Learning Programming Fundamentals the FUN Way, In Any Language

Basics of Javascript · String · slice() (method)

Weekly Frontend-Design Knowledge Sharing #1

Gatsby won against Next.js in this head-to-head

[CTF Series #4] Ghidra With Simple CrackMe

Set up a Vue app running on Vite

Node.js : Setup Minimal ESLint Config in 1 Minute

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vaibhav Hajela

Vaibhav Hajela

More from Medium

JavaScript Fundamentals

React JS vs Angular- Know ins and Outs

S.O.L.I.D and JavaScript

Javascript forEach Method

browser support image