Prácticas de Desarrollo Web

Entradas

Mostrando entradas de 2022

Calcular la cantidad de palabras de un texto

En esta práctica de JavaScript he puesto en práctica el uso de la propiedad textContent y del método split ( ) del objeto String. El usuario podrá pulsar un botón, el cual calculará la cantidad de palabras de un texto. Para poder comprender el código de esta práctica es muy importante conocer el uso de la propiedad textContent de un elemento del DOM y del método split ( ) del objeto String. 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="...

Convertir letras mayúsculas en minúsculas

En esta práctica de JavaScript he puesto en práctica el uso de la propiedad textContent y los métodos charAt ( ), toUpperCase ( ), toLowerCase ( ) y replace ( ) del objeto String. El usuario podrá pulsar un botón, el cual convertirá en letras minúsculas todas las letras mayúsculas existentes en un texto. Para poder comprender el código de esta práctica es muy importante conocer el uso de la propiedad textContent de un elemento del DOM y de los métodos charAt ( ) , toUpperCase ( ) , toLowerCase ( ) y replace ( ) del objeto String. 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 charset="UTF-8" /> <meta http-equiv="X-UA-C...

Escribir en una ventana nueva

En esta práctica de JavaScript he puesto en práctica el uso de los métodos open ( ) del objeto Window y write ( ) del objeto Document. El usuario podrá pulsar sobre dos botones, uno para escribir las líneas de texto que se verán en la nueva ventana y otro para crear la nueva ventana. Para poder comprender el código de esta práctica es muy importante conocer el uso de los métodos open ( ) del objeto Window y write ( ) del objeto Document. 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....

Cerrar ventana mediante control de tiempo

En esta práctica de JavaScript he puesto en práctica el uso de los métodos open ( ) y close ( ) del objeto Window. El usuario podrá pulsar sobre dos botones, uno para crear una nueva ventana en el navegador y otro para cerrarla transcurrido un tiempo establecido por el usuario. Para poder comprender el código de esta práctica es muy importante conocer el uso de los métodos open ( ) , close ( ) y setTimeout ( ) del objeto Window. 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 JavaScript</title> <lin...

Desplazamiento automático de texto

En esta práctica de JavaScript he puesto en práctica el uso de los métodos scroll ( ) y setTimeout ( ) del objeto Window. El usuario podrá pulsar sobre dos botones, uno para desplazar un texto de forma automática hacia la derecha y otro para desplazarlo hacia arriba. Para poder comprender el código de esta práctica es muy importante conocer el uso de los métodos scroll ( ) y setTimeout ( ) del objeto Window. 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...

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...