Hello everybody, and welcome to Hacoder. Today, we are going to create our First Javascript File.
If you have no prior knowledge of Javascript and still haven’t checked out our previous Javascript Tutorials, then click here.
Alright, let’s create our First Javascript File.
Your First Javascript File:-
In this tutorial, we are going to cover:
- How to embed Javascript code into the HTML webpage.
- How to reference your JavaScript from a separate file.
- How to create your first Javascript powered webpage.
Firstly, we have to create a sample HTML webpage.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<title>My first Javascript page </title>
</head>
<body>
</body>
</html>
|
Save it as index.html or with any name but with a .html extension.
The JavaScript script is inserted either in the HTML page itself or in a separate file. Firstly lets take a look how Javascript is inserted into HTML webpage.
How to Embed Javascript code into HTML webpage:-
To insert a JavaScript script in an HTML page, you use the <script> … </script> tag. Don’t forget the closing </script> tag! All the Javascript code is inside the <script> </script> tag.
We can write the <script> </script> tags either in the <head> section or just before the closing of </body> tag.
We can write the Javascript code inside the <head> section like this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>My first Javascript page </title>
<script type=“text/javascript”>
//JavaScript code goes here
</script>
</head>
<body>
</body>
</html>
|
And we can write the Javascript code just before the </body> tag like this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<title>My first Javascript page </title>
</head>
<body>
<script type=“text/javascript”>
//JavaScript code goes here
</script>
</body>
</html>
|
Save this as index.html and run it on your Web Browser, by just double clicking on the file.
Webster’s advice:
TO INCREASE THE PAGE SPEED OF YOUR WEBPAGE, YOU SHOULD INSERT YOUR JAVASCRIPT CODE JUST BEFORE THE CLOSING OF </BODY> TAG. THIS WILL LOAD THE JAVASCRIPT CODE AFTER ALL THE CONTENT OF THE WEBPAGE IS LOADED, WHICH WILL INCREASE THE PAGE SPEED.
Reference your JavaScript from a separate file:-
If your script is longer than a few lines, or you need to apply the same code to several pages in your website, then packaging your JavaScript code into a separate file is your best bet.
In fact, having your JavaScript in its own file will give you the advantage of easily maintaining and reusing your scripts.
Here’s how it’s done:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<title>My first Javascript page </title>
<script type=“text/javascript” src=“myjsfile.js”></script>
</head>
<body>
</body>
</html>
|
Here, we have referenced our <script> tag to an external Javascript file myjsfile.js . Remember, external Javascript files are saved with .js extension.
Creating your first Javascript powered webpage:-
So now, we are going to create our First Javascript Powered Webpage. Remember we can do it in two ways: By Embedding the Javascript code into HTML code, and By Referencing to an External Javascript File.
By Embedding the Javascript code into HTML code:-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>My first Javascript page </title>
<script type=“text/javascript” >
// Javascript code goes here
alert(“Hello, World!”);
</script>
</head>
<body>
</body>
</html>
|
Run the index.html in your web browser and see the output.
By Referencing to an External Javascript File:-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<title>My first Javascript page </title>
<script type=“text/javascript” src=“myjsfile.js”></script>
</head>
<body>
</body>
</html>
|
Save this above code as index.html and now let’s create our External Javascript filemyjsfile.js .
|
1
2
3
4
|
// Here is the Javascript code
// By the way, these are comments in JavaScript
alert(“Hello, World!”);
|
Now, open the index.html file in the Web Browser and see the output. It should alertHello, World! in the Web Browser.
That’s it for now. Lots of Javascript tutorials are coming up soon on Hacoder.
Any questions, comments or suggestions are welcomed.