JavaScript Basic : Syntax and Variables

Hello Everyone, a very warm welcome to you. In this tutorial,we'll learn

• Where to implement JavaScript code ?

• JavaScript Syntax

• Variables

So let's start it and dive in deep.

Where to implement JavaScript code ?

There are total 3 ways to implement JavaScript code in our HTML Files.

• First in our document head tag

<!DOCTYPE html>
<html>
<head>
<script>
// JavaScript code file here (in head tag)
</script>
</head>
<body>

</body>
</html>

• Second option is Just placed file before our </body> tag ends

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<script>
// JavaScript code file here (before body tag ends )
</script>
</body>
</html>

• And the best way to using as a external file -

<!DOCTYPE html>
<html>
<head>

</head>
<body>

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

So again I am repeating it that the best way to use JavaScript in your project is as a external. The reason is that it avoids our html and css code mixup with Javascript.

JavaScript Syntax :

JavaScript syntax is the set of rules, how JavaScript programs are constructed. Lets create our first "Hello World " program with JavaScript.

<html>
   <body>   
      <script language = "javascript" type = "text/javascript">

            document.write("Hello World!")

      </script>      
   </body>
</html>

As I told you, we need to write JavaScript code in <script> tag. In the next line, we wrote "document.write("Hello World!")".

It means we are writing "Hello World" on document. You can also print the "Hello World" on console. Most of the developers use console for testing purposes.

<html>
   <body>   
      <script language = "javascript" type = "text/javascript">

            console.log("Hello World!")

      </script>      
   </body>
</html

JavaScript variables :

Variables in JavaScript works same as the other programming languages. Variable are just like containers for storing our data, values in it. Suppose, a school is going to create a website and want to store their student data and the other necessary information. Variable roles comes here and here variables will be used as a containers for storing the data. In JavaScript, there are 3 ways to use variables var,let,const. In ES6 Version let,const were introduced.We'll use let,const in our upcoming tutorials.

We can store Numbers,Strings,Character,Array,Objects etc. Don't worry about Array and Object .We'll cover it in separate chapter.

Below, we are storing my name and age. Whatever written inside " ", is known as String. "Ravi Rathore" is an example of String.

<script>

        var myName = "Ravi Rathore"
        var age = 27;

        console.log(myName);  // Ravi Rathore
        console.log(age);    // 27


    </script>

Declaration vs Initialization

 <script>

        var myName;              // Variable Declaration

        myName = 'Ravi Rathore'  // Variable Initialization


        document.write(myName)

    </script>

If you create a variable with its name only, it is said variable declaration .
If you assign a value to a variable, it is known as variable initialization

I hope you must have basic understanding about the variables in this article. However, this is not enough. You must learn variable hoisting which we'll cover in our upcoming article.

For the time being, we are just covering the basics of JavaScript.

So stay tuned and wait for our next article. Untill then Bye-Bye... Stay safe and keep learning JavaScript :)