Before writing JavaScript

Now that you know what is JavaScript from the previous JavaScript Introduction chapter we can move on to actually begin writing it. Excited? Well we are!

Recall the fact that JavaScript doesn't require any installations on your side to be put into action - it simply runs on your web browser, like Google Chrome, Firefox,etc. The browser has a whole engine constructed by software developers and engineers which serves to parse and execute the JavaScript code you write.

Anyways moving on let's now see where can you actually write JavaScript, apart from where can it be parsed and executed.

The examples below show HTML code therefore it is recommended that before learning JavaScript you must know HTML.

Where to write

Javascript code can be either written essentially in two places:

Inside the script tag

HTML provides us with numerous tags to do numerous things. For example <p> is used to give margined paragraphs, <b> is used to make text bold, <audio> is used to embed audio files on a webpage and so on.

Similarly <script> is given to define a whole block of JavaScript code for a webpage. Following is a snippet illustrating this idea.

<!DOCTYPE html>
<html lang="en">
    <head>
    <script>
        // code can go over here
    </script>
    </head>
    <body>
        <script>
            // code can go over here
        </script>
    </body>
</html>

The <script> tag can go inside the <head> or the <body> tag, or even both. The choice between these largely depends on your use case, and sometimes preference too. We'll discuss all these points in detail as this course progresses so you can well ignore them for now.

Separate .js file

Apart from the tag, JavaScript can also go inside a separate file denoted by the extension .js (which you know stands for what!).

// script.js

// code can go here

The file can then be linked on a HTML page using the src attribute on the <script> tag as shown below:

<!DOCTYPE html>
<html lang="en">
    <body>
        <script src="script.js"></script>
    </body>
</html>
Well JavaScript can also go inside certain HTML attributes like onclick, onload etc as well as inside the Console provided by browsers. However both of these can't be truly considered as definite locations for writing JavaScript - as no one will ever write an entire script in them! The attributes are used in JavaScrpt events which we will discuss later in the JavaScript Events unit.
For now on just understand as to where can Javascript be written. We will explain all code and attributes as we move on.
JavaScript code can go inside the <script> tag as well as in an external .js file.
True or False?
True
False
Johnson wrote some JavaScript code in his HTML in way shown below. Can you determine any problem in it?
<!DOCTYPE html>
<html lang="en">
    <body>
        <javascript>
            // javascript code
        </javascript>
    </body>
</html>
JavaScript can only go inside the <script> tag; Johnson used an invalid tag in his HTML.
JavaScript code can't go inside <body>
There's no problem in it

Your first JavaScript

Let's now demonstrate all this discussion using some real JavaScript code. Well you're about to write your first JavaScript code!

We'll use the statement document.write() to print some text on an HTML page. First considering it within the tag:

<script>
    // javascript code
    document.write("Hello World!");
</script>
To reduce cluter here we've omitted the other HTML tags, assuming that this markup is written within <body>.

And then in a separate file:

// javascript code
document.write("Hello World!");

Both of these codes do exactly the same thing i.e output text to an HTML page. Well trivially they are exactly the same; just that one goes in the tag whereas the other in a file.

And in this very way we can keep on adding statements in our code to ultimately form a whole useful and functional script.

Deciding between these two

So at this point you know that javascript code can go either in the script tag directly or inside a .js file that can be linked via the src attribute. Now a question arises and a fairly genuine that what to use when?

  1. Tag: The tag is usually and most preferably used when oe want to write code for a specific page. The code you put there wouldn't obviously be repeated on several pages - it is specfic to the webpage it dwells in.
  2. Seperate file: The file should be used when you know that the code will be used on several pages. It seems reasonable to put repeating code under a seperate file so that if an error occurs you only have to make changes in one file.
    Consider having code inside a script tag that is copy pasted on six pages. Now if an error occurs you would have to manually go to every page and rectify the issue. Seems complicated and time consuming. Huh?

Most of the websites made today use a combination of both.

Frankly speaking, the answer to this question is also fairly use-oriented i.e it depends on what you want to do and how you want to do it. For example if you're to develop a library you'll obviously write its code inside a separate .js file, but if you're to say hello to the users on your home page then you'll probably go with the <script> tag.

Fortunately for now you shouldn't be worrying about all these details as they'll come to you naturally with time, experience and as you progress through this course. At most for now you just need to appreciate the fact that JavaScript can go in two locations - the tag and a separate file.

The Console

An extremely useful thing when developing JavaScript programs is the Developer's Console. It is basically a place where we can write and execute JavaScript code live on the go. We can debug errors, see error messages, view live objects etc, traverse up prototypal chains and a lot more.

We will use the console in many of the coming chapters to execute commands directly or view messages logged in there. It is highly flexible in that we can view arrays, objects, details about constructors and a lot more for our program as we will see later.

How to access it?

  1. For Chrome navigate to the top-right Options button, then go to More Tools and finally to Developer Tools. You can also simply press Ctrl + Shift + I. After this choose the Console tab.
  2. For Microsoft Edge navigate to the top-right More Settings button, then go to Developer Tools. You can also simply press Ctrl + Shift + I. After this choose the Console tab.
For other browser users, you can access the Console in much the same way as above. If you can't for some reason consider checking out your browser's help or just google it out.