Introduction to JavaScript

Hello Coder. Let's start JavaScript from basic. First of all, what is JavaScript?

JavaScript is a lightweight, interpreted, and JIT -compiled programming language that adds interactive and dynamic functionality to website.
Interpreted language means it translates line by line of program, and it executed directly without prior compilation. And JIT means just -in -time, which translate the program at browser.
JavaScript is used in various environment. Like, in client-side with HTML, in server-side with NodeJS, in database with MongoDB and some front-end framework like React, Angular, VueJS, and so many things.

But we have a question that why we use JavaScript in HTML or what is the role of JavaScript in HTML?

Basically, HTML present the DOM, which is Document Object Model.
And JavaScript is used for manipulation and modification in the DOM.
DOM. Means it allows us to add, remove or update HTML elements, attributes, styles and content in DOM dynamically.

Integration of JavaScript in HTML

Hello coders, now we will see how can we use javascript in HTML? How to Integrate or use JavaScript in HTML?

Basically we can use javascript in HTML in 3 way.
1. one is inline,
2. 2nd is embedded,
3. 3rd is external scripting.
In inline we can write javascript in a HTML element directly, like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button onclick="alert('Hello World!');">Click me</button>
</body>

</html>

Inline JavaScript in a HTML

In this button element we can write a javascript event which is onclick with a action of show alert. means when we click on this button it show a alert message.

2nd in embedded type we can write javascript inside a <script> element, like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script>
    function showAlert() {
      alert('Hello World!');
    }
  </script>
</head>

<body>
    <button onclick="showAlert()">Click me</button>
</body>

</html>

Embedded JavaScript in a HTML

we create a function called show alert. and use this function in this html button element like this. it will work same as previous.

3rd in external type we can create a external script file with .js extension and use that file in any of HTML file, like this:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="script.js"></script>
</head>

<body>
  <button onclick="showAlert()">Click me</button>
</body>

</html>

External Scripting JavaScript in a HTML

script.js

function showAlert() {
      alert('Hello World!');
}

Here we create a script.js file and write same function inside this file.

Then we use this file inside body or head tag, by script element we integrate script file.
Then use that function in the button element, and it work same as before.

Introduction to JavaScript

Introduction to JavaScript

Integration of JavaScript in HTML

index.html

script.js

Related Articles

map() Methods in JavaScript

slice() Methods in JavaScript

Console and Console Methods in JavaScript

findIndex() Method in JavaScript