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
Course Video In English
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:
HTML JavaScript enables interactivity on webpages.
Write JavaScript within <script> tags.
HTML and JavaScript interact to create dynamic pages.
Run JavaScript using <script> or external files.
HTML forms collect user input; JavaScript processes it.
JavaScript functions execute actions on HTML elements.
Methods are functions associated with JavaScript objects.
Yes, they are often used together.
Both serve different purposes—HTML structures, JavaScript adds functionality.
Call JavaScript via events or <script> tags.
