- 3 years ago
- Shahzad Gujjar
- 2,802 Views
-
3
You can learn how to use JavaScript in an HTML document in this tutorial.
Working with Client-side Script
Client-side scripting is a concept that describes the type of computer programs that are run by a user’s web browser. The most commonly used client-side scripting language on the internet is JavaScript (JS).
The script> element is used to embedding or reference JavaScript within an HTML document in order to improve user experience by adding interactivity to web pages.
Form validation, generating alert messages, creating image galleries, display hide content, DOM manipulation, and many other things are some of the most popular uses of JavaScript.
Adding JavaScript to HTML Pages
JavaScript may be directly embedded in an HTML page or put in an external script file and referenced from inside the HTML page. The <script> element is used in both methods.
Embedding JavaScript
Simply add the code as the content of an <script> element to embed JavaScript in an HTML file.
In the following example, JavaScript is used to write a string of text to a web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding JavaScript - Learn Code Web</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
</body>
</html>
Script items should be put at the bottom of the page, before the closing body tag, i.e. </body>, because when a browser finds a script, it pauses rendering the rest of the page before the script is parsed, which can significantly slow down the site.
Calling External JavaScript File
You can also put your JavaScript code in a separate file (with a .js extension) and use the src attribute of the <script> tag to call that file in your HTML document.
If you want the same script to appear in various documents, this is a good choice. It saves you from having to do the same thing over and over again, and it makes maintaining your website much easier.
The following example shows how to use HTML to connect to an external JS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Linking External JavaScript - Learn Code Web</title>
</head>
<body>
<div id="greet"></div>
<script src="hello.js"></script>
</body>
</html>
The <script> element must be empty when the src attribute is specified. This simply means that you can’t use the same script> element in an HTML document to embed JavaScript and link to an external JavaScript file.
JavaScript files, such as “hello.js,” are plain text files with .js extension. Furthermore, like embedded JavaScript, the external JavaScript file only contains JavaScript statements and does not include the <script>…</script> element.
The HTML noscript Element
The <noscript> element is used to provide alternative content for users who have disabled JavaScript in their browser or have a browser that does not support client-side scripting.
Aside from script>, this element will include any HTML elements that can be included in the body> element of a regular HTML page. For 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>
If the user’s browser does not support scripting or if scripting is disabled in the browser, the content within the noscript feature will be displayed.
- 3 years ago
- Shahzad Gujjar
- 2,802 Views
-
3
