JavaScript is a dynamic, versatile programming language that can be used to create interactive and dynamic web pages. It can be used in various parts of an HTML document, such as the <head> and <body> sections or in an external JavaScript file. The following will explore how to use JavaScript in these different ways.
Using JavaScript in <head>
The <head> section of an HTML document contains meta-data and other information about the web page. It is typically used for defining stylesheets, scripts, and other resources that the page requires. We can also use it to define JavaScript code that needs to be executed before the page loads.
Here is an example of how to use JavaScript in the <head> section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Example Web Page</title> <script> function sayHello() { alert("Hello!"); } </script> </head> <body> <h1>Welcome to the web page!</h1> <button onclick="sayHello()">Say Hello</button> </body> </html> |
In this example, we’ve defined a function called sayHello() inside the <head> section. We’ve also added a button in the <body> section that will execute the function when clicked.
Using JavaScript in <body>
The <body> section of an HTML document is used to define the main content of the web page. We can also use it to define JavaScript code that needs to be executed after the page has loaded.
Here is an example of how to use JavaScript in the <body> section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Example Web Page</title> </head> <body> <h1>Welcome to the web page!</h1> <script> function sayHello() { alert("Hello!"); } sayHello(); </script> </body> </html> |
In this example, we’ve defined the sayHello() function inside the <body> section. We’ve also called the function directly in the <body> section.
Using External JavaScript Files
In some cases, it may be better to keep JavaScript code in a separate file, rather than embedding it directly into the HTML document. This is particularly useful when working with larger code bases or when multiple pages share the same code.
To use an external JavaScript file, we need to create a new file with a .js extension and then reference it in the HTML document. Here is an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Example Web Page</title> <script src="myscript.js"></script> </head> <body> <h1>Welcome to the web page!</h1> <button onclick="sayHello()">Say Hello</button> </body> </html> |
In this example, we’ve created a new file called “myscript.js” that contains the sayHello() function. We then reference this file in the <head> section using the <script> tag.
JavaScript in HTML Summary
JavaScript is a powerful tool for creating dynamic and interactive web pages. By using it in the <head> and <body> sections of an HTML document, as well as in external JavaScript files, we can create sophisticated and engaging web experiences. Whether you are building a simple website or a complex web application, JavaScript is a key technology to master.