El Taller de Javascript es un Manual práctico centrado en pequeños ejemplos de utilidad desarrollados en Javascript para realizar diversas funcionalidades de utilidad que podríamos necesitar en una página web.
Durante el manual trabajaremos con Javascript principalmente en el contexto del navegador. Podremos encontrar diversos scripts de variada utilidad comentados y listos para utilizar en tus páginas web.
Este manual te ofrece la oportunidad de aprender Javascript por la práctica, aunque no es un manual donde puedas aprender Javascript desde cero, ya que da por sabidos los conocimientos del lenguaje y, a partir de ellos, va realizando diversos ejemplos. Si quieres aprender el lenguaje Javascript te recomendamos el Manual de Javascript.
Debes tener en cuenta que estos artículos no están ordenados necesariamente por dificultad ni forman parte de un proceso didáctico de aprendizaje. En realidad son más bien material independiente, donde cada uno usa prácticas de distintas características.
Ten en cuenta también que los artículos aquí presentes han sido publicados a lo largo de muchos años. Estamos realizando una constante actualización del contenido y en la medida de lo posible vamos mejorando los textos y los códigos para adaptarlos a costumbres más actuales. A la vez que retiramos artículos que se quedan obsoletos. De todos modos, es buena idea tener esto en cuenta por si encuentras algún ejemplo que no funcione. Por supuesto, nos lo puedes comentar para que lo actualicemos o te propongamos alternativas.
En Taller de Javascript encuentras:
Talleres de Javascript para los más novatos Manipulación del DOM Cálculos con la clase Math Validaciones en Javascript Talleres de Javascript para el tratamiento de fechas y horas Artículos de tratamiento de imágenes con Javascript Tratamiento de formulario y elementos de formulario Cambios dinámicos en los estilos CSS mediante Javascript Trabajo con el BOM Artículos de librerías de terceros en Javascript
Artículos del manual
-
Talleres de Javascript para los más novatos
Comenzamos por unos talleres ultra-sencillos de Javascript que pueden ser útiles para romper el hielo haciendo cosas simples que no tienen dificultad especial, sobre todo pensando en las personas que tienen menos experiencia con la programación en general.
-
1
Enviar al navegador a otra página si no tiene Javascript
Una técnica por la que podemos dirigir al navegador a otra página en el caso de que no soporte scripts en Javascript.
-
2
Tabla de colores con Javascript
Una tabla que muestra los colores puros en todas las definiciones. Está construida con Javascript anidando tres bucles.
-
Manipulación del DOM
Uno de los usos más relevantes del lenguaje Javascript es la manipulación del DOM, Document Object Model, que permite cambiar la estructura y propiedades de los elementos de la página dinámicamente. Con ello podemos conseguir todo tipo de efectos y dinamismos en las páginas.
-
3
Manejo de capas, elementos de la página, con Javascript
El manejo de elementos de la página (capas) dinámicamente mediante Javascript y sus diferencias en las distintas versiones de los navegadores.
-
4
Inhabilitar el menú contextual del navegador con Javascript
Un script en Javascript para evitar que funcione el menú contextual del navegador, que sale al pulsar con el botón derecho del ratón sobre la página. De modo que no puedan ver el código fuente ni acceder a otras opciones similares.
-
5
Contenido dinámico en Javascript con texto que cambia
Taller de Javascript en el que se realiza un recuadro cuyo texto cambia en cada impresión de la página, usando innerText e innerHTML del elemento de la página.
-
6
Cambiar el color a las celdas de una tabla con Javascript
Vemos un par de métodos para alterar el color de una celda de una tabla con javascript.
-
7
Navegador con capas
Aprende a crear un navegador dinámico con capas. Al pasar el ratón por encima de los enlaces aparece una descripción de éstos.
-
Cálculos con la clase Math
Talleres de Javascript que se basan en el uso de la clase Math de Javascript, que usamos para cálculos matemáticos de todo tipo.
-
8
Generación de números aleatorios Javascript
Taller en el que se crea una función para generar números aleatorios en lenguaje Javascript.
-
9
Generar un color aleatorio con Javascript
En este taller veremos cómo generar colores aleatorios con Javascript y cómo usar esos colores para elementos de la página web creados de manera dinámica.
-
10
Cómo implementar un enlace aleatorio con Javascript
En este taller de Javascript verás cómo hacer un enlace que nos lleva a cualquier URL aleatoriamente, entre varias posibilidades.
-
Validaciones en Javascript
En los siguientes artículos de este taller de Javascript encontrarás artículos relacionados con validaciones y comprobaciones de datos, de formatos de datos, existencia y otra serie de técnicas habituales en el desarrollo de aplicaciones web.
-
11
Comprobar si las claves son iguales
En un formulario donde se han escrito dos claves, explicamos como comprobar, utilizando Javascript, que son iguales antes de mandarlas al servidor.
-
12
Validar entero en campo de formulario
Script para validar un campo de formulario de manera que sepamos seguro que dentro del campo hay siempre un número entero.
-
13
Validar un email con Javascript
Una práctica de validación con Javascript, para verificar que una cadena de texto contiene un email válido.
-
14
Validar la extensión de un archivo a subir con Javascript
Presentamos un script Javascript para realizar la validación de la extensión de un archivo antes de realizar un upload.
-
15
¿Es Ventajoso el uso de ParseInt para validar números?
La utilización del parseInt para validar números en muchos casos no resulta ser la solución más efectiva, debido a que permite la presencia de letras y/o espacios, y el resultado podría no ser el esperado.
-
16
Funciones para validación alfanumérica de strings en Javascript
Una serie de funciones de validación de cadenas de caracteres, donde vamos a usar distintos métodos de string de Javascript para verificar si las cadenas tienen o no números y caracteres, mayúsculas y minúsculas.
-
17
Validar número de checkbox marcados con Javascript
Un script en Javascript que permite validar casillas de verificación marcadas de formularios, por grupos, para asegurarse que se han marcado un número máximo de checkbox.
-
18
Calcular la letra del DNI en Javascript y validar un NIF
Script en lenguaje JavaScript que nos permite calcular la letra del DNI. Luego realizaremos la validación de un DNI o NIF español,
-
Talleres de Javascript para el tratamiento de fechas y horas
Ahora vamos a ver algunas prácticas de Javascript en las que realizamos trabajos con fechas, así como con las horas del día. Para ello explicaremos cómo manejar el objeto Date incorporado en Javascript y ocasionalmente o librerías de terceros que facilitan el trabajo con fechas.
-
19
Comparar fechas en Javascript
Cómo comparar fechas en Javascript, saber si una fecha dada es mayor, menor o igual que otra.
-
20
Calcular la edad en Javascript
Realizamos y explicamos una función que recibe una fecha de nacimiento y devuelve el número de años desde la fecha, es decir, la edad.
-
21
Función en Javascript para crear una máscara de fechas dd/mm/aaaa
Función para que los usuarios puedan introducir fechas en un campo input en el que pondremos una máscara para que la fecha aparezca con formato dd/mm/aaaa.
-
22
5 formas de mostrar la fecha actual con Javascript
Un taller de Javascript en el que te mostramos hasta 5 maneras de presentar la fecha del día de hoy en una página web, con distintos formatos, textos y estilos.
-
23
Reloj en Javascript
Aprendemos a crear un reloj sencillo mediante Javascript y le aplicamos algunas mejoras. Se trata de un reloj digital que muestra la hora del instante y se actualiza cada segundo.
-
Artículos de tratamiento de imágenes con Javascript
En los siguientes talleres vamos a ver algunos ejemplos en los que hacemos tratamiento y manipulación de imágenes mediante Javascript.
-
24
Rollover con Javascript
Aprende a hacer un efecto de iluminación sobre una imagen al pasar el ratón por encima. Desde un punto de vista práctico, en unos minutos serás capaz de hacerlo tu mismo.
-
25
Rotación de banners con Javascript
Un script Javascript para hacer que en un mismo espacio aparezcan rotando varios banner, en un intervalo de tiempo en la misma página.
-
26
Insertar contenido SVG desde Javascript
En este artículo vamos a explicar diversos medios que podrías utilizar para insertar imágenes SVG dinámicamente desde Javascript.
-
27
Navegador dinámico javascript
Te enseñamos con un ejemplo práctico a crear una barra de navegación dinámica con algunas imágenes y Javascript.
-
Tratamiento de formulario y elementos de formulario
En los siguientes artículos vamos a hacer prácticas en las que realizaremos el tratamiento de formularios y elementos de formularios, asignado eventos a los elementos del formulario, cambiando sus propiedades dinámicamente y más.
-
28
Cuenta los caracteres escritos en un textarea
Script en Javascript que realiza la cuenta de los caracteres que se han escrito en un campo de formulario textarea, al mismo tiempo que se están escribiendo.
-
29
Cómo realizar un navegador desplegable con Javascript y un elemento select de formulario
Para aprender en pocos pasos a crear un navegador formado por un menú desplegable. Al seleccionar una opción del menú iremos a una página distinta.
-
30
Confirmación de envío de formulario
En este taller vamos a ver un ejemplo de formulario que no se envía directamente, sino que requiere una confirmación del usuario, para que acepte o cancele el envío .
-
31
Script para informar de la seguridad de una clave, con Javascript
Queremos informar al usuario, cuando escribe una clave, sobre el grado de seguridad de la contraseña. Para hacer eso, veamos este sencillo script Javascript.
-
32
Inhibir radio button con Javascript
Taller de Javascript para deshabilitar botones de radio para que, al pulsarlos, quede siempre marcada la opción por defecto.
-
33
Crear una máscara de números en un input con Javascript
Aprende a crear máscaras de textos con Javascript. En este ejercicio aprenderás a crear un campo input en el que hemos configurado una máscara numérica, aplicada al escribir los caracteres en un campo input.
-
Cambios dinámicos en los estilos CSS mediante Javascript
Talleres de Javascript en los que nos dedicamos a cambiar dinámicamente el CSS de los elementos de la página mediante la interacción con el usuario, produciendo efectos de distintos tipos.
-
34
Controles Javascript para cambiar el tamaño del texto de una web
En este taller de Javascript vamos a hacer los típicos botones que encuentras en una página web y que te permiten aumentar y disminuir el tamaño de los textos de la página.
-
35
Página que cambia aleatoriamente el color de fondo
Cómo hacer que una página cambie de color cada vez que se visita, colocando un color aleatorio y con el texto que contraste para que se pueda leer bien.
-
36
Definir un archivo de estilos CSS para cada navegador con Javascript
Un script en Javascript que detecta el navegador del visitante y permite enlazar con un archivo distinto de declaraciones de estilos CSS dependiendo del browser del usuario.
-
Trabajo con el BOM
El BOM (Browser Object Model) es el conjunto de objetos que modelizan el navegador y con los que podemos controlar la ventana y otras interfaces y componentes que existen en el navegador. En los siguientes artículos veremos diferentes prácticas para el control del navegador en general.
-
37
Script de recarga de la página con javascript cada x segundos
Cómo controlar el navegador para realizar una recarga del contenido de manera periódica y constante, mediante un script en Javascript que además asegura que la página no se obtiene desde la caché.
-
38
Copiar en el portapapeles con Javascript
Cómo seleccionar un texto y copiarlo en el portapapeles utilizando una función Javascript.
-
39
Detectar cambios en el hash de la URL con Javascript
En este taller de Javascript vamos a ver cómo detectar lo que hay detrás de la almohadilla en la URL (el hash) y cómo detectar cuando el hash cambia como consecuencia, por ejemplo, de pulsar un enlace interno.
-
40
Detectar la resolución de la pantalla del usuario con Javascript
Hacemos un script javascript para detectar la resolución de la pantalla del visitante y hacer cosas distintas en función de la definición que tenga.
-
Artículos de librerías de terceros en Javascript
Javascript tiene una inmensa cantidad de librerías que podemos usar para desarrollar cómodamente las cosas más variadas que nos podemos imaginar. En los siguientes artículos vamos a abordar diversas librerías de Javascript con tutoriales que te ayudarán a implementarla en tus sitios o aplicaciones web.
-
41
Tutorial de uso de Prism para syntax highlight
Es un plugin avanzado para syntax highlight de código fuente que puedes integrar en una página web, para que los códigos tengan coloreado de sintaxis.
-
42
Integrar el editor WYSIWYG TinyMCE con Javascript
Te explicamos cómo usar TinyMCE, Uno de los editores HTML WYSIWYG, para integrar en formularios web, basado en Javascript.
-
43
Mocha, un nuevo sabor en pruebas unitarias de Javascript
Explicaciones y ejemplos sobre Mocha, un Framework de Javascript maduro y que está creciendo en el ámbito de pruebas unitarias.
-
44
Introducción el Framework de Pruebas Javascript Jasmine
Como desarrollador javascript deberías conocer a Jasmine, uno de los frameworks de pruebas unitarias más populares para javascript.
-
45
Creación de gráficas de barras con Javascript
A partir de la importación de una libreria apropiada, podemos realizar gráficas de barras. Veremos que librería importar y como manipular el código para conseguir nuestro objetivo.