Client-side scripting is the type of programming that is executed by the user’s web browser. The most widely used client-side programming language on the web is JavaScript.
The <script> element embeds or references JavaScript in an HTML document. It adds interactivity to the web pages and improves the user experience significantly.
Some common uses of JavaScript include form validation, creating alert messages, creating an image gallery, displaying hide content, manipulating DOM, and many more.
JavaScript can be inserted directly into the HTML page, or it can be placed in a separate script file and referenced within the HTML page. The <script> element is used in both cases.
To include JavaScript in your HTML file, simply paste the code as <script> content.
In the following example, JavaScript writes a string of data to your web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
</body>
</html>Tip: The best place to place script elements is at the bottom of your page, before your closing body tag, i.e. <body> because when your browser comes across a script, it will pause rendering the rest of your page until it’s done with the script that could potentially slow down your site’s performance.
You can also save your JavaScript code in a separate file with the.js extension and call it in your HTML using the src attribute in <script> tags.
If you want to have the same script in multiple documents, this is a great way to save time and make your website more maintainable.
The following example shows how to link an external JavaScript file in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Linking External JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script src="hello.js"></script>
</body>
</html>Note: If you include the src attribute, the <script> element should not contain any content. This rule ensures that you cannot use the <script> element to both embed JavaScript code and link to an external JavaScript file within an HTML document.
Tip: JavaScript files are regular text files with a .js extension, like “hello.js”. The external JavaScript file only contains JavaScript statements; it doesn’t contain the element <script>...</script> as embedded JavaScript does.
The <noscript> element is used as an alternative content for users who disable JavaScript in their web browsers or have a web browser that does not support Client-Side Scripting.
This element can include any HTML element except <script> that can be found in the <body> of a regular HTML page. Let’s take a look at an example: Let’s look at an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Noscript Demo</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
<noscript>
<p>Oops! This website requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>Note: The content within the noscript element is only visible if your browser does not support scripting or if scripting is disabled in your browser.