Skip to main content

Tools for Javascript development

In order to run Javascript all you need any modern browser, and a text editor to write your codes. I am using Visual Studio Code text editor and Safari browser. You can pick any of your choice.

Just load an empty index.html file in your browser. Click anywhere on the viewport, and choose Inspect element. There you will find a browser console. That's where we will be working. We can also link a script.js file and write our javascript on a separate file.

index.html
<!DOCTYPE html>
<head>
    <title>Empty page for Javascript development. </title>
</head>

<body>
</body>

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

Browser console​

Once you are on the browser console, you will see a sort of terminal with > prompt waiting for you to type commands.

First of all, we can print something like "Hello, world!". One way is to issue a browser alert.

> alert("Hello Javascript!")

Press return and you will see a browser alert saying "Hello Javascript". You have to click close or Ok to dismiss the alert. This could be bit annoying, so we will directly print in our console:

> console.log("Hello Javascript!")

Hello Javascript!

We can do some basic math as well.

> console.log(3 + 5.6)

8.6

We can assign some variables as well, and operate on them.

> let name = "Pranab"
  console.log(name)

Pranab

> let x = 7;
  let y = 4;
  let mult = x*y;
  console.log(mult)

28

You get the idea. Note that it is not necessary to end a line in Javascript with semicolon, this is just my personal preference for better code readability.

We can do something bit more advanced like getting printing the date:

> let date = new Date();
  console.log(date)

Wed Apr 22 2020 13:18:27 GMT+0800 (+08)

We assigned our date variable a new object called Date().

Now what if we want to print something on the browser viewport? For that we need to understand the structure of our html page. We have an html page with empty body. We will inject something on the body.

document.body.innerHTML = "<p> Today is: " + date + "</p>"

Now you see the paragraph with date appearing in our html viewport. However, the date object is bit messy. We can clean it up using some methods:

document.body.innerHTML = "<p> Today is : " + date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear() + ".</p>"

However, you will notice one wired thing. The month is previous month. Here the month count starts from 0 (but not the date and Year though), wo we need to add 1 to the month to get correct month.

document.body.innerHTML = "<p> Today is : " + date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear() + ".</p>"

Note that whatever we are doing in the console are not saved anywhere. So we reload the page, everything will be gone. Console is the playground for you to test your Javascript.

We can preserve our Javascript code by putting it inline with the html page or writing the javascript in a separate file, and loading the file with the html.

We can write javascript inline with html within the <script></script> tags.

Linking external script files​

Here we will write our javascript in a separate file called script.js. We will add the script tag after the body element.

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

Now we can write our code in the file script.js and reload the index.html to see our changes.

Note that if we put the script tag in the head, we need to include defer or async attribute, otherwise it will run into problem of finding the body element before it is created.