Lesson 6 Writing a JavaScript in a Separate file

In this lesson, we are learning how we can write JavaScript in a separate file that we can then include in HTML and run in the browser.
To do this, we need to have HTML file.
I am using the sublime editor here to write HTML code.
You can easily add basic HTML structure code if you are using sublime editor, so simply write HTML and press enter to get basic HTML structure, now save that file into your computer.
img1 Now I am going to go ahead and open up this HTML file in my browser: img2 Now we need to make a separate file for JavaScript in the editor with the name Javascript.js and save it in the same directory.
The important part is ‘JS’ in the end, it is because.
JS represent JavaScript and tells the browser that it is JavaScript file.
img3
Now just to check if it is working or not, let’s write some simple code here:

JavaScript Code

Write simple JavaScript code into JavaScript file, here is a simple JavaScript code below.
alert("writing in separate JavaScript file"); img4 Now if we check in the browser and refresh the page.
We will not find anything or any changes there because this file is not connected with the HTML file.
So to connect it with HTML file write below code within your tag into your HTML file like below

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Demo</title>
    <script type="text/javascript" src="Javascript.js"></script>
</head>
<body>
    <h1>JavaScript File demo</h1>
</body>
</html>

img5
Now refresh a browser page and you will get an alert message:
img6 So every time this page gets load, it will show a pop up dialog box with the alert message.
Let’s take another example here we are writing few lines of JavaScript code that asks the user for his or her name and then it just prints out a message.

JavaScript Code

var userName = prompt("Hey Who is there?");
alert("nice to see you "+userName);
console.log("nice to see you as well "+userName);

Here is the screenshot of the JavaScript code:
img7
If we need information from the users and save the value which user would give to us every time they load the page and then we are using alert to respond the user, here we are using ‘alert()’ method with the message ‘nice to see you’ and concatenating it with ‘+userName’ to respond the user.
Plus we are using console.log to concatenating the strings together with two different times, One to alert them and one to cancel the log.
Now refresh the browser and first thing that happens there, it asks us for a name.
img8 So we are going to put a name ‘Thor’ and hit OK:
img9 Now it tells me ‘nice to see you Thor’, you can see in below screenshot.
img10

If I open up the console, you will see that console.log message “nice to see you as well” and also you can see it tells me JavaScript.js line 3, this description help us latter when we have long complicated files and when we get some kind of error, so this description help us to see where exactly the problem is and what line number in our file.
img11 Console.log just printed the same value which had been given by the user but only in console.
In this lesson we have learned how we can write JavaScript in different file and we have given a review of those three methods that we have used in previous lesson prompt to ask the user for some input, alert and console.log

SourceCode

imdex.html

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Demo</title>
    <script type="text/javascript" src="Javascript.js"></script>
</head>
<body>
    <h1>JavaScript File demo</h1>

</body>
</html>

javascript.js

var userName = prompt("Hey Who is there?");
alert("nice to see you "+userName);
console.log("nice to see you as well "+userName);

>Continue to Lesson 7

Javascript Lessons for beginners

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?