JavaScript in HTML


In the previous article, Taimienphi.vn introduced you to iframe tags in HTML. The next article below Taimienphi.vn will introduce you more about JavaScript in HTML.


Script is a small program used with HTML to increase the attractiveness and interactivity of the website, such as pop-up windows displayed on the screen when the user clicks. JavaScript is currently the most commonly used scripting language for web pages.

JavaScript in HTML

Refer to the following article of Taimienphi.vn to learn JavaScript in HTML.

Table of Contents:
1. JavaScript in HTML
1.1. Script tag in HTML.
2. Event handling on HTML page with JavaScript.
2.1. Change the HTML content with JavaScript.
2.2. Change the HTML style with JavaScript.
2.3. Change the HTML property with JavaScript.
3. Use External Script (External Script).
4. The noscript tag in HTML.

1. JavaScript in HTML

javascript in html

1.1 Script tags in HTML

The HTML script tag is used to specify client-side scripts. It can be an internal or external JavaScript file containing script commands, so we can put tags script in section body or head.

JavaScript is mainly used to manipulate images, validate forms and change content. Also JavaScript uses methods document.getElementById () to select an HTML element.

For example: Below is an example of a tag script in HTML:

javascript in html 2

The result will look like this:

javascript in html 3

javascript in html 4

2. Event handling on HTML page with JavaScript

Events in HTML can be understood as actions performed by a user or browser, such as mouse clicks or page loads. JavaScript takes care of these events.
HTML includes event handling attributes that work with JavaScript code and can perform some actions with events.
The syntax for handling events on an HTML page with JavaScript is:

javascript in html 5

For example: The following is an example illustrating event handling on HTML page with JavaScript:

javascript in html 6

The result will look like this:

javascript in html 7

Events in HTML include:
– Form events: reset, submit, ….
– Select events: text field, ….
– Focus event: focus, blur, ….
– Mouse events: select (select), mouseup (release the mouse), mousemove (move the mouse), mousedown (mouse click), click, dblclick (double click), ….

Here is the list of event attributes:

javascript in html 8

javascript in html 9

2.1 Changing HTML content with JavaScript

For example: The following is an example illustrating how JavaScript changes the content on an HTML page:

javascript in html 10

The result will look like this:

javascript in html 11

javascript in html 12

2.2 Change the HTML style with JavaScript

For example: The following is an example illustrating how to change the style of HTML elements with JavaScript:

javascript in html 13

The result will look like this:

javascript in html 14

javascript in html 15

2.3 Change HTML attributes with JavaScript

For example: In this example we use JavaScript to change the HTML attribute:

javascript in html 16

The result will look like this:

javascript in html 17

javascript in html 18

3. Using External Script (External Script)

Suppose we have different HTML files but have the same script, then we can save the JavaScript code into a separate file and name it as HTML file. Save external JavaScript file with extension.js.
Note: we do not add tags script into the external file and provide the full path where the JavaScript file will be saved.
The syntax looks like the following:

javascript in html 19

For example: The following example illustrates how to use an external JavaScript file:

javascript in html 20

The result will look like this:

javascript in html 21

The JavaScript we use:

javascript in html 22

javascript in html 23

4. The noscript tag in HTML

The noscript tag in HTML is used to write scripts that are disabled in the browser. The text is written in the card javascript in html 24Not displayed in the browser.

For example: The following is an example illustrating how to use the noscript tag in HTML:

javascript in html 25

The result returned after applying the noscript tag looks like this:

javascript in html 26

https://thuthuat.taimienphi.vn/javascript-in-html-50703n.aspx
The article above Taimienphi.vn has just introduced you to JavaScript in HTML. In the next article, Taimienphi.vn will introduce you further File path in HTML. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article to learn and learn HTML well.

.

Add a Comment

Your email address will not be published. Required fields are marked *