Prácticas de Desarrollo Web

Entradas

Mostrando entradas de febrero, 2022

Carrusel de imágenes con JavaScript

En esta práctica de JavaScript he puesto en práctica el uso del Array y del acceso a las propiedades de los elementos del DOM. El usuario podrá pulsar sobre dos botones, uno para avanzar imágenes y otro para retroceder. Para poder comprender el código de esta práctica es muy importante conocer el uso del Array en JavaScript y la forma de acceder a los elementos del DOM y a los atributos de dichos elementos . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Imágenes usadas Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript...

Efecto Rollover con JavaScript

En esta práctica de JavaScript he puesto en práctica la combinación del uso de los eventos onmouseover y onmouseout. El usuario observará cómo después de cinco segundos se eliminará automáticamente el párrafo existente en la página web. Y si pulsa en un botón determinado anulará el temporizador y no se eliminará dicho párrafo. Para poder comprender el código de esta práctica es muy importante conocer el uso de los eventos onmouseover y onmouseout . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Imágenes usadas Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript...

Combinación de los métodos setTimeout ( ) y clearTimeout ( )

En esta práctica de JavaScript he puesto en práctica el uso de la combinación de los métodos de control de tiempo setTimeout ( ) y clearTimeout ( ) en JavaScript. El usuario observará cómo después de cinco segundos se eliminará automáticamente el párrafo existente en la página web. Y si pulsa en un botón determinado anulará el temporizador y no se eliminará dicho párrafo. Para poder comprender el código de esta práctica es muy importante conocer el uso de los métodos setTimeout ( ) y clearTimeout ( ) . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práct...

Uso del método setTimeout ( )

En esta práctica de JavaScript he puesto en práctica el uso del método de control de tiempo setTimeout ( ) en JavaScript. El usuario observará cómo después de cinco segundos cambiará automáticamente el color de fondo de la página web. Para poder comprender el código de esta práctica es muy importante conocer el uso del método setTimeout ( ) . Como ayuda puedes echarle un vistazo al siguiente enlace: 👉 Enlace Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css" rel="stylesheet" type="text/css"> <script src="funciones.js" type="text/javascript...

Uso de la función eval ( )

En esta práctica de JavaScript he puesto en práctica el uso de la función eval ( ) en JavaScript. El usuario ingresará en un cuadro de diálogo una instrucción válida de JavaScript y esa instrucción será convertida en contenido HTML. Para poder comprender el código de esta práctica es muy importante conocer el uso de la función eval ( ) en JavaScript. Como ayuda puedes echarle un vistazo al siguiente enlace: 👉 Enlace Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css" rel="stylesheet" type="text/css"> <script src="funciones.js" type="text/j...

Uso de parámetros en funciones de JavaScript

En esta práctica de JavaScript he puesto en práctica el uso de parámetros en las funciones de JavaScript. Se mostrarán una serie de botones al usuario y al pulsar sobre ellos cambiará el color de fondo de la página y de la fuente. Para poder comprender el código de esta práctica es muy importante conocer el uso de los parámetros en las funciones en JavaScript y la forma de acceder a los elementos del DOM y a los atributos de dichos elementos . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="esti...

Uso de los eventos onmouseover y onmouseout

En esta práctica de JavaScript he puesto en práctica el uso de los eventos onmouseover y onmouseout. Se mostrará un mensaje al usuario informandole si ha puesto encima o ha quitado el puntero del ratón de un texto determinado. Para poder comprender el código de esta práctica es muy importante conocer el uso de los eventos onmouseover y onmouseout . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css" rel="stylesheet" type="text/css"> <script src="f...

Cambiar color de fondo de página y color de la fuente

En esta práctica de JavaScript he puesto en práctica el uso del acceso a las propiedades de los elementos del DOM. Se mostrará un texto y un botón que cuando es pulsado por el usuario cambia el color de fondo de la página y el color de la fuente. Para poder comprender el código de esta práctica es muy importante conocer la forma de acceder a los elementos del DOM y a los atributos de dichos elementos . Como ayuda puedes echarle un vistazo al siguiente enlace: 👉 Enlace Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css" rel="stylesheet" type="text/css"> <s...

Reloj digital

En esta práctica de JavaScript he puesto en práctica el uso del objeto Date y del control de tiempo en este lenguaje de programación. Se mostrará un reloj digital. Para poder comprender el código de esta práctica es muy importante conocer el uso del objeto Date y del método setInterval() . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css" rel="stylesheet" type="text/css"> <script src="funciones.js" type="text/javascript"><...

Obtener datos de una lista desplegable múltiple

En esta práctica de JavaScript he puesto en práctica el acceso a los datos de una lista desplegable múltiple de un formulario en HTML. El usuario seleccionará una serie de medios de transporte y al pulsar sobre un botón se le mostrará un texto con los medios de transporte seleccionados. Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades options , selected y text en las listas desplegables de un formulario en HTML. Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 👉 Enlace 3 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de ...

Uso de objeto this como parámetro

En esta práctica de JavaScript he puesto en práctica el uso del objeto this como parámetro de una función en este lenguaje de programación. El usuario pulsara sobre una serie de cajas numeradas y se le mostrará un mensaje con el número de la caja sobre la que ha pulsado. Para poder comprender el código de esta práctica es muy importante conocer el uso de objeto this y la forma de acceder a los elementos del DOM y a los atributos de dichos elementos . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href=...

Cambiar estilo CSS

En esta práctica de JavaScript he puesto en práctica el cambio de estilos CSS en elementos de HTML. El usuario pulsara en una serie de botones que irán cambiando el color de una caja. Para poder comprender el código de esta práctica es muy importante conocer la forma de acceder a los elementos del DOM y a los atributos de dichos elementos . Como ayuda puedes echarle un vistazo al siguiente enlace: 👉 Enlace Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css" rel="stylesheet" type="text/css"> <script src="funciones.js" type="text/javascript...

Obtener datos de lista desplegable

En esta práctica de JavaScript he puesto en práctica el acceso a los datos de una lista desplegable de un formulario en HTML. El usuario seleccionará un tipo de letra de una lista y al pulsar sobre un botón se le mostrará un texto con el tipo de letra seleccionada aplicada y otro texto con el nombre de la fuente de letra seleccionada. NOTA: dependiendo de si usted tiene instaladas o no en su dispositivo las fuentes de letras usadas en esta práctica, podrá observar los cambios de tipo de letra aplicados o no observarlos. Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades selectedIndex , options y text en las listas desplegables de un formulario en HTML. Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 👉 Enlace 3 Código HTML <!DOCTYPE html> <html lang="es"> <...

Obtener datos de botones de checkbox

En esta práctica de JavaScript he puesto en práctica el acceso a los datos de botones checkbox de un formulario en HTML. El usuario seleccionará sus hobbies favoritos de entre unas opciones y al pulsar sobre un botón se le mostrará los hobbies que ha seleccionado. Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades checked y value en los botones de checkbox de un formulario en HTML. Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css...

Obtener datos de botones de radio

En esta práctica de JavaScript he puesto en práctica el acceso a los datos de los botones de radio de un formulario en HTML. El usuario seleccionará un color y al pulsar sobre un párrafo éste cambiará al color seleccionado. Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades checked y value en los botones de radio de un formulario en HTML. Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css" rel="stylesheet" type="te...

Uso de algunas propiedades interesantes de una página web

En esta práctica de JavaScript he puesto en práctica el acceso a algunas propiedades interesantes de una página web, tales como su dominio, título, fecha de la última modificación, nombre del navegador usado para abrirla y la resolución de pantalla del dispositivo desde el que se accede a dicha página web. El usuario pulsará sobre una serie de textos y se le mostrará la información de la propiedades referidas anteriormente. Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades location , title , lastModified , userAgent y screen . Como ayuda puedes echarle un vistazo a los siguientes enlaces: 👉 Enlace 1 👉 Enlace 2 👉 Enlace 3 👉 Enlace 4 👉 Enlace 5 Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta cha...

Ventanas emergentes

En esta práctica de JavaScript he puesto en práctica la creación de ventanas emergentes. El usuario pulsará en una serie de textos con el nombre de sitios web de internet y se les abrirán unas ventanas emergentes de dichos sitios web. Para poder comprender el código de esta práctica es muy importante conocer la forma de crear ventanas emergentes . Como ayuda puedes echarle un vistazo al siguiente enlace: 👉 Enlace Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <script src="funciones.js" type="text/javascript"></script> </head> <body> <h2>Haz click en el texto p...

Acceso a las imágenes de una página HTML

En esta práctica de JavaScript he puesto en práctica el acceso a los atributos de los elementos de una página HTML. El usuario pulsará en una serie de imagenes y se les mostrará esas imágenes con un tamaño mayor en un visor de imagenes. Para poder comprender el código de esta práctica es muy importante conocer la forma de acceder a los elementos del DOM y a los atributos de dichos elementos . Como ayuda puedes echarle un vistazo al siguiente enlace: 👉 Enlace Imágenes usadas Código HTML <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Práctica de JavaScript</title> <link href="estilos.css" rel="stylesheet" type...