Best Tutorial: An Introduction to JavaScript(v1.8)

Table of Contents

In this tutorial, I will take you through an Introduction to JavaScript. This tutorial is basically for the beginners who are not much aware of JavaScript and its uses in Programming. In the modern programming world, it is currently being used with almost all the Major Programming languages to manage client side objects. So it is also Known as Client Side Scripting Language. After going through an introduction to JavaScript, you will be clear with the concept of JavaScript.

An Introduction to JavaScript

Prerequisites

Before going through an introduction to JavaScript you need to make sure that a text Editor and a browser with JavaScript enabled is available. In our case I am going to use below:-

Text Editor – Visual Studio Code(Download Latest Version from Here)
Browser – Google Chrome(Download Latest Version from Here)

Latest Browser like Google Chrome comes with JavaScript enabled which allows JavaScript code to run within itself.You can also use any other browser with JavaScript enabled. If it is not enabled, you can go to Settings, search for JavaScript. You will see it under Content Settings.If it is not already allowed, Click on allow.

Also Read: Process Management in Perl

Best Tutorial: An Introduction to JavaScript(v1.8) 1

What is DOM

DOM is known as Document Object Model in Web programming context. It basically treats everything as an object which can be used in a particular model or layout. For e.g: HTML tags like <head>, <body>, <script> etc are treated as objects in an HTML Document. To use and manage this objects, we usually use JavaScript code.

JavaScript Syntax

Basic JavaScript structure can be defined as below:-

<html>
    <head>
       <tile>Your Title</title>
          <script type="text/javascript">          
          ....Your JavaScript Code.....
          </script>
    </head>
    <body>
    </body>
</html>

Note: Please note that all the below examples I am running on Windows 10

Different Ways to write JavaScript Code

There are two different ways through which you can use your JavaScript code:-

1)By Embedding in HTML
In this way, you need to write your JavaScript Code inside HTML document itself using <script></script> tag.

<html>
   <head>
      <tile>Your Title</title>
         <script type="text/javascript">
         document.write("Hello from Javascript")
         </script>
    </head>
    <body>
    </body>
</html>

You can save this file as index.html and double click it to run. It will run in your default browser and will show the output “Hello from JavaScript”.

<script></script> – This is the tag under which you need to write your complete JavaScript code.
type=”text/javascript” – This is one of the attribute of script tag which by default you need to set to “text/javascript”
document.write – It is basically an object under Document Object Model which is by default available for us.

You can also use <script></script> tag anywhere in the html page.For example in below example I am using it under <body></body> tag instead of using it under <head></head> tag. It will still work.

<html>
   <head>
      <tile>Your Title</title>
   </head>
   <body>
      <script type="text/javascript">
      document.write("Hello from JavaScript")
      </script>
   </body>
</html>

You can also use html tags under document.write() to display the html formatted output.For example:-

<html>
   <head>
       <tile>Your Title</title>
          <script type="text/javascript">
          document.write("<h2>Hello from JavaScript</h2>")
          </script>
   </head>
   <body>
   </body>
</html>

You can even use JavaScript code outside the <html></html> tag. It will still work fine.

<html>
    <head>
     <title>Your Title</title>
    </head>
    <body>
    </body>
</html>
    <script type="text/javascript">
    document.write("<h2>Hello from Javascript</h2>")
    </script>

2)By Using External JavaScript file

Through this way you can write your JavaScript in a separate file and can provide the reference of this file in your html code by providing the full path of your JavaScript file.

I will create one separate JavaScript file here hello.js in the same folder where i kept my index.html page.

document.write("<h2>Hello from Javascript</h2>")

Now i will provide the reference of this script in my index.html page as below:-

<html>
   <head>
       <tile>Your Title</title>
          <script src="hello.js" type="text/javascript">
          </script>
   </head>
   <body>
   </body>
</html>

src=”hello.js” – This is an attribute used with <script> tag to specify the path of javascript file.

Output

Best Tutorial: An Introduction to JavaScript(v1.8) 2

JavaScript PDF : Eloquent JavaScript A Modern Introduction to Programming
JavaScript Youtube Tutorial: Beginner JavaScript Tutorial 1 Introduction to Javascript

Cyberithub