HTML and JavaScript

JavaScript is a programming language that can be used to add dynamic behavior to HTML web pages. You can include JavaScript in your HTML code in two ways: by adding an internal script or an external script.

Adding an Internal Script

An internal script is a script that is included within the HTML document itself. This is done using the <script> tag. Here is an example of an internal script:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Web Page</title>
5    <script> function myFunction() {
6        alert("Hello World!");
7      } </script>
8  </head>
9  <body>
10    <button onclick="myFunction()">Click me</button>
11  </body>
12</html>

In this example, the JavaScript function myFunction is defined inside the <script> tag within the <head> section of the HTML document. The function is then called when the user clicks the button.

Adding an External Script

An external script is a script that is stored in a separate file and is linked to the HTML document using the <script> tag. This is done by specifying the source file using the src attribute. Here is an example of an external script:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Web Page</title>
5    <script src="myscript.js"></script>
6  </head>
7  <body>
8    <button onclick="myFunction()">Click me</button>
9  </body>
10</html>

In this example, the external script file myscript.js is linked to the HTML document using the <script> tag within the <head> section. The script file contains the same function myFunction as the internal script example.

Here is the code for myscript.js:

1function myFunction() {
2  alert("Hello World!");
3}

JavaScript can be used to add dynamic behavior to HTML web pages. You can include JavaScript in your HTML code in two ways: by adding an internal script or an external script. An internal script is included within the HTML document itself, while an external script is stored in a separate file and is linked to the HTML document using the <script> tag. Both internal and external scripts can contain the same JavaScript code, but external scripts are often preferred for larger projects or for reusing the same script across multiple HTML documents. By adding JavaScript to your HTML code, you can create interactive and engaging web pages for your users.

Inline JavaScript in HTML

Inline JavaScript is code that is included directly in an HTML document, rather than being contained in a separate file. This can be useful for adding small amounts of dynamic behavior to a web page, such as changing the color of a button on hover or displaying an alert when a user clicks a button.

To include inline JavaScript in an HTML document, you use the <script> tag with the type attribute set to "text/javascript". Here is an example:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Web Page</title>
5  </head>
6  <body>
7    <button onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">
8      Hover over me
9    </button>
10    <button onclick="alert('Hello World!')">Click me</button>
11    <script type="text/javascript"> var message = "This is an inline script.";
12      console.log(message); </script>
13  </body>
14</html>

In this example, the first button changes color when the user hovers over it, using inline JavaScript to set the backgroundColor style property. The second button displays an alert when the user clicks it, using inline JavaScript in the onclick attribute.

The third example is an inline script that defines a variable called message and logs it to the console using the console.log() method.

While inline JavaScript can be a convenient way to add simple behavior to a web page, it is generally not recommended for larger or more complex projects. In those cases, it is better to use external JavaScript files, which can be cached by the browser and reused across multiple pages. Additionally, inline scripts can make it harder to maintain and debug your code, especially if you have a lot of JavaScript scattered throughout your HTML document.

Previous
HTML id