The integration of JavaScript
and XHTML
is very flexible, since there are at least three ways to include code JavaScript
in web pages.
Include JavaScript in the same XHTML document
The code JavaScript
is enclosed between <script>
tags and is included in any part of the document. Although it is correct to include any block of code in any area of the page, it is recommended to define the JavaScript
code within the document header (within the <head>
tag):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
In order for the resulting XHTML page to be valid, it is necessary to add the attribute type
to the label <script>
. The values that are included in the type
attribute are standardized and for the case of JavaScript
, the correct value is text/javascript
.
This method is used when defining a small block of code or when you want to include specific instructions in a specific document HTML
that complete the instructions and functions that are included by default in all the documents of the website.
The main drawback is that if you want to make a modification in the code block, it is necessary to modify all the pages that include that same block of code JavaScript
.
Define JavaScript in an external file
JavaScript instructions can be included in an external file of type JavaScript
that documents XHTML
link via the label <script>
. You can create all the JavaScript
files that are required and each document XHTML
can link as many JavaScript
files as you need.
Example:
File codigo.js
alert("Un mensaje de prueba");
Document XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
In addition to the type
attribute, this method requires defining the src attribute, which is the one that indicates the URL
corresponding to the JavaScript
file that you want to link. Each label <script>
can only link a single file, but on the same page you can include as many <script>
tags as necessary.
Files of type JavaScript
are normal text documents with the .js
extension, which can be created with any text editor such as Notepad
, Wordpad
, EmEditor
, UltraEdit
, Vi
, etc.
The main advantage of linking an external JavaScript
file is that it simplifies the code XHTML
of the page, that you can reuse the same code JavaScript
in all the pages of the website and that any modification made in the file JavaScript
is immediately reflected in all pages XHTML
that link it.
Include JavaScript in XHTML elements
This last method is the least used, since it consists of including pieces of JavaScript
within the code XHTML
of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>
</body>
</html>
The biggest drawback of this method is that it unnecessarily messes with the code XHTML
of the page and complicates the maintenance of the code JavaScript
. In general, this method is only used to define some events and in some other special cases, as will be seen later.