JavaScript (JS) is a programming language which was first appeared in 1996 and was developed for the purpose of implementing interactivity on the front-end. Over 97% of websites use it JS for client-side interactivity, often incorporating third-party libraries. Alongside HTML and CSS, JavaScript is one of the core technologies for the front-end development.
What can be done with JavaScript?
One can done multiple variety of tasks of with JS ranging from basic front-end interactivity to development of desktop applications. Below are some of the major areas where JS can be used:
- Back-end of a website (using Node.js or Deno)
- Smartphone applications (using react-native)
- Desktop applications (using electron.js)
- Single Page Applications (using React, Angular, Vue)
- And much much more!
How JS can be used on websites?
One can use JS in the front-end of a website to add interactivity on the client-side like appearance of a pop-up when certain button is clicked or changing theme of the website with the help of a certain theme switch button. Moreover, JS can be used to send http requests to certain APIs to load data on the page with the help of fetch API.
In order to use JS on the front-end, one has two option which are listed below:
- Internal JavaScript
- External JavaScript
It is always recommended to use external script file as this would ensure the separation of concerns. However, inline scripts can be used where the script consists of few lines of code.
Internal JavaScript
One can use JS in the same html file using the below code which simply create an alert with the text "Hello, world!" when html file is run:
1<!DOCTYPE html> 2<html> 3 <head> 4 <script> 5 alert('Hello, world!'); 6 </script> 7 </head> 8 <body> 9 <h1>Heading</h1> 10 <p>Paragraph</p> 11 </body> 12</html> 13
As can be seen from, the JS needs to written inside of script tag. That script tag can be used anywhere on the page. It can be included in the head tag or body tag. It is a common practice to include script tag in the body tag and particularly, at the end of the body tag such as below code snippet:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Site</title> 5 </head> 6 <body> 7 <h1>Heading</h1> 8 <p>Paragraph</p> 9 10 <script> 11 alert('Hello, world!'); 12 </script> 13 </body> 14</html> 15
The decision where to include script tag also depends on the need for the script. If it is necessary to get all data from some API before the html is rendered, then it is best to include that script in head tag.
External JavaScript
Using external files is considered the best practice as it increase code reusability, readability and separation of logic from markup. In order to use external script, one needs to create a file with .js extension and then let the markup know of the existence of that script.
Suppose, you have created a folder my-site on the desktop and inside that folder an html file is created by the name of index.html with below code:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Site</title> 5 </head> 6 <body> 7 <h1>Heading</h1> 8 <p>Paragraph</p> 9 </body> 10</html> 11
After that, a new file is created in the same directory with name of script.js which has the following code:
1alert('Hello, world!'); 2
Now it's time to link script with markup as shown in the below code:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Site</title> 5 </head> 6 <body> 7 <h1>Heading</h1> 8 <p>Paragraph</p> 9 <script src="./script.js"></script> 10 </body> 11</html> 12
Now when index.html is run in the browser, you should see an alert window in the browser saying "Hello, world!".
Conclusion
- JavaScript is scripting language that was first released in 1996.
- Earlier it was only intended only for client-side interactivity but to day it can be used in smartphone applications, back-end and for the purpose developing desktop applications.
- It is best practice to always use external script file and then link that script to markup.
- The file extension of JavaScript files is .js.