Buzz
Scripting is a small program used alongside HTML to enhance attractiveness and interaction for web pages, such as pop-up windows displayed on the screen when users click the mouse. JavaScript is currently the most widely used scripting language for web pages.
JavaScript in HTML
Continue exploring the following article by Mytour to learn about JavaScript in HTML.
1. JavaScript in HTML.
1.1. Script tag in HTML.
2. Handling events on HTML pages with JavaScript.
2.1. Changing HTML content with JavaScript.
2.2. Changing HTML style with JavaScript.
2.3. Changing HTML attributes with JavaScript.
3. Using External Scripts.
4. The noscript tag in HTML.
1. JavaScript in HTML
1.1 Script tag in HTML
The script tag in HTML is used to specify client-side scripts. It can be a JavaScript file inside or outside containing script statements, so we can place the script tag in the body or head section.
JavaScript is primarily used to manipulate images, validate forms, and alter content. Additionally, JavaScript utilizes the document.getElementById() method to select an HTML element.
Example: Below is an illustrative example of the script tag in HTML:
The returned result looks like the following:
2. Handling Events on HTML Pages with JavaScript
Events in HTML can be understood as actions performed by users or browsers, such as clicking a mouse or loading a page. JavaScript plays a role in handling these events.
HTML includes event handling attributes that work with JavaScript code and can perform various actions with events.
Example: Below is an illustrative example of handling events on HTML pages with JavaScript:
The returned result looks like the following:
HTML events include:
- Form events: reset, submit, ... .
- Select events: text field, ... .
- Focus event: focus, blur, ... .
- Mouse events: select, mouseup, mousemove, mousedown, click, dblclick, .... .
Below is a list of event attributes:
2.1 Changing HTML Content with JavaScript
Example: Below is an illustrative example of how JavaScript changes content on an HTML page:
The returned result looks like the following:
2.2 Changing HTML Style with JavaScript
Example: Below is an illustrative example of how to change the style of an HTML element with JavaScript:
The returned result looks like the following:
2.3 Changing HTML Attributes with JavaScript
Example: In this example, we use JavaScript to modify HTML attributes:
The returned result appears as follows:
3. Using External Scripts
Assuming we have different HTML files but with the same script, we can save the JavaScript code into a separate file named with a .js extension.
Note: Avoid adding the script tag into the external file and provide the full path to save the JavaScript file.
The syntax is as follows:
Example: Below illustrates how to use an external JavaScript file:
The returned result looks like this:
The JavaScript code we use:
4. The noscript Tag in HTML
Example: Below is an example illustrating the usage of the noscript tag in HTML:
The resulting output after applying the noscript tag looks like this:
This article has just introduced JavaScript in HTML to you. In the next article, we will further introduce you to file paths in HTML. Additionally, if you have any questions or need clarification, readers can leave their comments below the article for better understanding and learning HTML.
