JavaScript en HTML

JavaScript en HTML
Curso de JavaScript

JavaScript en HTML

JavaScript en HTML. –

La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas, que veremos en este Curso de JavaScript, para incluir código JavaScript en las páginas web.

Siguiendo los mismos planteamientos que en CSS, existen tres técnicas para incorporar código Javascript dentro de HTML. Sin embargo, al igual que en CSS, solo la inclusión de archivos externos es la recomendada a usar en HTML5.

JavaScript en línea
JavaScript en HTML

Esta es una técnica simple para insertar Javascript en HTML que se aprovecha de atributos disponibles en elementos HTML. Estos atributos son manejadores de eventos que ejecutan código de acuerdo a la acción del usuario.

Los manejadores de eventos más usados son, en general, los relacionados con el ratón, como por ejemplo onclick, onMouseOver, u onMouseOut

Usando el manejador de eventos onclick, un código es ejecutado cada vez que el usuario hace clic con el ratón sobre el texto que dice “Hacer Clic”.

El uso de Javascript dentro de etiquetas HTML está permitido en HTML5, pero por las mismas razones que en CSS, esta clase de práctica no es recomendable. El código HTML se extiende innecesariamente y se hace difícil de mantener y actualizar

JavaScript embebido
JavaScript en HTML

Para trabajar con códigos extensos y funciones personalizadas debemos agrupar los códigos en un mismo lugar con la etiqueta HTML <script> incluiremos código JavaScript en nuestras páginas web.

En caso de que el navegador web no soporte JavaScript o lo tenga desactivado, podremos usar la etiqueta <noscript> para mostrar un texto informando de ello.

El código JavaScript como hemos dicho, se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda incluir JavaScript en html dentro de la cabecera del documento, dentro de la etiqueta <head>:

Hemos creado una función en JavaScript que muestra un cuadro de diálogo con un mensaje, e indicado en la etiqueta body que se debe ejecutar al cargarse la página web. Así mismo mandará un mensaje en caso de no soportar el navegador JavaScript

Ya no es necesario añadir el atributo type a la etiqueta <script>. Si se incluyen, los valores que se incluyen en el atributo type están estandarizados y para el caso de JavaScript, el valor correcto es text/javascript.

Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web.

Aunque esto es lo recomendable, veremos que en la práctica, la inclusión de los archivos de JavaScript deben hacerse, al final de la etiqueta <body> ya que así no ejecutaremos los scripts de JavaScript, hasta que la página se cargue completamente, esto se consigue de varias maneras que veremos mas adelante, aunque la más facil es, como hemos dicho, la inclusión de estos archivos al final de la pagina.

La inclusión de JavaScript en HTML dentro del cuerpo sería así:

Notese la inclusión de comentarios encerrando el código JavaScript así si el navegador no lo soprta la inclusión de JavaScript en HTML no afectará al Diseño Web, un navegador web que no soporte JavaScript, no mostrará el código.

Definir JavaScript en un archivo externo
JavaScript en HTML

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos HTML enlazan mediante la etiqueta <script> y el atributo src en el que introduciremos la ruta del archivo de JavaScript. Se pueden crear todos los archivos JavaScript que sean necesarios y cada documento HTML puede enlazar tantos archivos JavaScript como necesite.

Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una misma página se pueden incluir tantas etiquetas <script> como sean necesarias.

JavaScript en HTML5

Inclusion de JavaScript en archivo externo

Despues de enlazado solo hay que crear el archivo micodigo.js asi:

Esta llamada al script externo también podemos incluirla al final de la pagina asi:

La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código HTML de la página, que se puede reutilizar el mismo código JavaScript en todas las páginas del sitio web y que cualquier modificación realizada en el archivo JavaScript se ve reflejada inmediatamente en todas las páginas HTML que lo enlazan.

Capítulos del curso

Curso de JavaScript

29 junio, 2018
JavaScript operadores

Operadores en JavaScript

Operadores en JavaScript. Capitulo 5 del Curso de JS. Analizamos los operadores en Js los cuales nos permiten manipular el valor de las variables para realizar cálculos complejos y tomar decisiones lógicas en cualquier programa. ☎ 689 89 42 67
28 junio, 2018
curso JavaScript capitulo 4

Cadenas de texto en JavaScript

Cadenas de texto en JavaScript Capitulo 4 del Curso de JavaScript. Continuamos viendo en JavaScript, en este caso las cadenas de texto, los llamados Strings en Javascript ☎ 689 89 42 67
21 junio, 2018
JavaScript Variables numericas

Variables numéricas en JavaScript

Variables numéricas en JavaScript Capitulo 3 del Curso de JavaScript en el que analizamos las variables en JavaScript y veremos las variables de tipo numericas ☎ 689 89 42 67
16 junio, 2018
JavaScript en HTML

JavaScript en HTML

JavaScript en HTML Capitulo 2 del Curso de JavaScript en el que veremos las distintas formas de incluir JavaScript en html Desde la inclusión de JavaScript en linea, hasta la utilización de archivos adjuntos de JavaScript ☎ 689 89 42 67
5 junio, 2018
Curso de JavaScript desde 0

Curso de JavaScript

Lanzamos este nuevo Curso de JavaScript en el que partiendo desde 0 repasaremos todos los conceptos de uno de los lenguajes de programación del futuro, como decimos desde lo más básico hasta la imprescindible programación orientada a objetos en JavaScript.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *