JavaScript Basics

Definition of JavaScript

JavaScript is a light weight, scripting language for web pages that allow developers to create dynamic and interactive content within web browser. It is used HTML and CSS to enhance the functionality of a website.

Features

• It makes a website interactive.

• It is based on ECMAScript and It was created to ensure that different documents on JS are talking about the same language OR in short, ECMA is a standard specifications for scripting language most notably JavaScript.

• Light-weight programming language

• It can work on both frontend and backend

• Fewer Error thrown

• It is Asynchronous {allowing multiple tasks to run concurrently without blocking the main thread.} and interpreted {run code line by line and will } language

• It defines the behaviour of a webpage

Linking JS file in HTML

we can link our JavaScript in HTML in multiple ways. Let's see them all

Inline JavaScript

Just like inline CSS we can add inline JS as well. We use method name and value to add JS directly in the element. For now you don't need to understand what is written as JS. Yes, we will discuss it in detail but for now just understand how can we insert a JS inside HTML element

Right click on your webpage => go to inspect => go to console. it is where the printing and error thrown statements display. Now when you click on that button it will print 'clicked' on that console


<body>
    <button onClick = "console.log('clicked')">
        Click Me
    </button>
</body>

use <script> tag

script tag is formed inside <body> or <head> tag. IT is recommend to use that tag inside or end of the body so that JS behaves properly. inside that tag you can write your vanilla/ plain JS.

again no worry about the JS written in tag

Drawbacks

• make the HTML file bulky

• Hard to maintain

• Not preferable in production website

<body>
    <button class = "button"> 
        Click Me
    </button>
    <script>
        let click = document.querySelector("button")
        click.addEventListener("click",()=>{
            console.log("clicked")
        })
    </script>
</body>

use <script> tag in <head> tag

Yes, you can also write the JS as you do in CSS just write inside the <head> tag but the main problem is that JS will not load properly if added in head tag. So it make time to load which is unacceptable for production.

"main drawback to add script tag or link external JS file inside head tag is that the JS will executed before the DOM is created, hence If your script references elements that haven't been rendered yet, it can lead to errors. "

Drawbacks

• make the HTML file bulky

• Hard to maintain

• Not preferable in production website
```
 <head>
     <title>Document</title>
     <script>
         let click = document.querySelector("button")
         click.addEventListener("click",()=>{
             console.log("clicked")
         })
     </script>
 
 </head>

 <body>
     <button class = "button"> 
         Click Me
     </button>
 </body>
```
Link external JS file in <body>

The best way you can do is to create JS file separately and link to that file in HTML. You can add that using script tag and then give the link of your file in src attribute. If added in body tag make sure to add that in the end of that tag or just before closing tag of <body>
```
 <body>
     <button class = "button">
         Click me
     </button>
     <script src = "script.js"></script>
 </body>
```
Link external JS file in <head> using defer and async

If you add JS file in head tag. you may have the same problems that we discussed in point 3. well the linking is same as we done in 4th point but to work them correctly we add defer or async after the src attribute.

<head>
    <title>Document</title>
    <script src = "script.js" defer></script>
<!--OR-->
    <script src = "script.js" async></script>
</head>

WHICH ONE IS THE BEST ?

I mostly prefer linking using defer you can use any according to your project requirements.

For now, it's sufficient. I will see you in the next article, hope this article adds value in you. If you want more such content then make sure to following me on all available platform

Instagram

Hashnode

Thank you for reading 🤍

Written By Mohit Soni

Mohit's Blog

Mohit's Blog

Introduction to JavaScript

Table of contents

Definition of JavaScript

Features

Linking JS file in HTML