HTML JavaScript
The <script> element in HTML is used to add JavaScript code to web pages. JavaScript is a programming language that makes web pages interactive and dynamic.
Basic Usage:
You can use the <script> element to include JavaScript directly in your HTML file:
Output:
In this example:
⦁ <body>: Contains the visible content of the HTML document.
⦁ <h1>HTML JavaScript Example</h1>: Displays a heading with the text “HTML JavaScript Example”.
⦁ <script>: This element is used to embed or reference JavaScript code within the HTML document.
⦁ alert(‘Hello, world!’);: This JavaScript code inside the <script> tags triggers an alert dialog when the page is loaded. The alert() function displays a modal dialog box with the specified message (“Hello, world!” in this case).
External JavaScript File:
You can also link to an external JavaScript file using the src attribute:
Output:
In this example:
⦁ <head>: Contains meta-information about the document, such as the title and linked scripts.
⦁ <script src=”script.js”></script>: Includes the external JavaScript file script.js. The src attribute specifies the path to the JavaScript file.
⦁ <body>: Contains the visible content of the HTML document.
⦁ <h1>External JavaScript Example</h1>: Displays a heading with the text “External JavaScript Example”.
⦁ External JavaScript File (script.js):
⦁ alert(‘Hello, world!’);: This JavaScript code triggers an alert dialog with the message “Hello, world!”.
Attributes of <script>
Here is a table of the common <script> attributes
| Attribute | Description | Example |
|---|---|---|
| src | Specifies the URL of an external JavaScript file to be loaded and executed. | <script src=”script.js”> </script> |
| type | Defines the MIME type of the script. It’s usually text/javascript but is optional in HTML5. | <script type=”text/javascript”>…</script> |
| defer | Delays script execution until the HTML parsing is complete. | <script src=”script.js” defer> .</script> |
| async | Loads and executes the script asynchronously, without blocking HTML parsing. | <script src=”script.js” async> </script> |
JavaScript in Head vs. Body
Scripts can be placed in both the <head> and <body> sections of an HTML document. It’s often best to place scripts at the end of the <body> to prevent blocking the rendering of the page.
Example in <head>
<!DOCTYPE html>
<html>
<head>
<title>Script in Head Example</title>
<script>
alert(‘Hello from Head script!’);
</script>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
Output
In this example:
⦁ <head>: Contains meta-information about the document, such as the title and embedded scripts.
⦁ <script>: This element is used to embed JavaScript code within the HTML document.
⦁ alert(‘Hello from Head script!’);: This JavaScript code inside the <script> tags triggers an alert dialog with the message “Hello from Head script!”.
⦁ <body>: Contains the visible content of the HTML document.
⦁ <h1>Welcome to My Website</h1>: Displays a heading with the text “Welcome to My Website”.
Example in <body>
<!DOCTYPE html>
<html>
<head>
<title>Script in Body Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<script>
alert(‘Hello from body script!’);
</script>
</body>
</html>
Output
In this example:
⦁ <body>: Contains the visible content of the HTML document.
⦁ <h1>Welcome to My Website</h1>: Displays a heading with the text “Welcome to My Website”.
⦁ <script>: This element is used to embed JavaScript code within the HTML document.
⦁ alert(‘Hello from body script!’);: This JavaScript code inside the <script> tags triggers an alert dialog with the message “Hello from body script!”.
Note: Placing scripts in the body, especially at the end, ensures that the HTML content loads first before executing the JavaScript.
Best Practices:
⦁ Place <script> tags just before the closing </body> tag to speed up page loading.
⦁ Use defer or async attributes to improve performance when loading external scripts.
⦁ Avoid inline scripts for better security; use external scripts whenever possible.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Inline JavaScript Alert
Objective: Display an alert message when the page loads using inline JavaScript.
Expected Output: An alert box with the message “Welcome to the Inline JavaScript Example!” when the page loads.
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<h1>Inline JavaScript Example</h1>
<script>
alert(‘Welcome to the Inline JavaScript Example!’);
</script>
</body>
</html>
Output:
Scenario 2: Inline JavaScript Alert with Styling
Objective: Display an alert message when the page loads using inline JavaScript, with styled HTML elements.
Expected Output: An alert box with the message “Welcome to the Inline JavaScript Example!” and styled content.
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding-top: 50px;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Inline JavaScript Example</h1>
<script>
alert(‘Welcome to the Inline JavaScript Example!’);
</script>
</body>
</html>
Output:
Scenario 3: External JavaScript File with Styling
Objective: Link to an external JavaScript file that displays an alert message when the page loads, with styled HTML elements.
Expected Output: An alert box with the message “Hello from the external JavaScript file!” and styled content.
Output:
Scenario 4: Script in Head Section with Styling
Objective: Place a script in the head section that displays an alert message when the page loads, with styled HTML elements.
Expected Output: An alert box with the message “Hello from body script!” and styled content.
Output:
Scenario 5: External JavaScript with Multiple Elements and Styling
Objective: Link to an external JavaScript file that interacts with multiple HTML elements, with styled HTML elements.
Expected Output: An alert box with the message “All elements are loaded!” when the page loads and additional interactions when buttons are clicked, with styled content.
Output:
