Taller de Javascript

El Taller de Javascript es un Manual práctico centrado en pequeños ejemplos de utilidad desarrollados en Javascript.

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 y practicar con Javascript por la práctica. Los artículos fueron publicados a lo largo de muchos años y en la medida de lo posible vamos actualizando 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.

Artículos

Artículos del manual
1 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.
2 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.
3 Estilos distintos para cada navegador
Unos scripts que nos permiten aplicarle estilos distintos a los elementos de la página, en uno de los casos apoyándonos en la tecnología CSS para aumentar la potencia.
4 Tabla de colores con Javascript
Una tabla que muestra los colores puros en todas las definiciones. Está construida con Javascript anidando tres bucles.
5 Degradado de color Javascript
Script para conseguir un degradado del color de fondo de la página web. Un ejemplo es simple y otro, más complejo, se adapta a muchos degradados distintos.
6 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.
7 Enlace aleatorio Javascript
Creamos un enlace que nos lleva a cualquier URL aleatoriamente, entre varias posibilidades.
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 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.
10 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.
11 Confirmación de envío de formulario
Script en Javascript para que el usuario acepte o cancele el envío de un formulario cuando se apreta el botón de enviar.
12 Javascript para posicionarse en un select
Script en Javascript para posicionarse mediante la pulsación de teclas del teclado dentro de los elementos de un campo select de formulario.
13 Inhibir un campo texto de formulario con Javascript
Hacer que un campo de formulario quede deshabilitado, es decir, que no se pueda posarse encima y cambiar su valor.
14 Manejo de capas, elementos de la página, con Javascript
El manejo de capas se puede complicar mucho por las distintas versiones de los navegadores. Vamos a aprender a simplificar el uso de capas con getElementById(), que funciona en IExplorer 5 en adelante, Netscape 6 en adelante y Opera.
15 Como iluminar tablas, celdas o filas
Curioso efecto conseguido con javascript, que nos permite jugar con la transparencia de cualquier imagen.
16 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.
17 Iluminar formularios con CSS y Javascript
Como modificar propiedades de color de fondo de objetos de un formulario al pasar el ratón por encima.
18 Autozoom de texto con Javascript
Este es un ejemplo de efecto de texto que se puede hacer en DHTML utilizando Javascript. El texto aumenta y reduce su tamaño automáticamente.
19 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.
20 Paso de parametros en HTML con client-side Javascript
Se trata de un sencillo script Javascript para recoger los parámetros que le llegan a una página.
21 Recuadro 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, con lo que se pueden mostrar distintos mensajes en cada visita.
22 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.
23 Juegos en Javascript
Con Javascript se pueden crear juegos, y aunque el lenguaje no se presta precismante a facilitar las cosas, con esfuerzo se puede conseguir un juego "curioso". En este artículo vamos a ver unos ejemplos de juegos.
24 Calcular la letra del DNI en Javascript
Script en lenguaje JavaScript que nos permite calcular la letra del DNI.
25 DHTML Calendar
Un script en Javascript muy fácil de utilizar y con un aspecto formidable, que nos servirá para disponer de un calendario para seleccionar un fecha.
26 Generar un color aleatorio con Javascript
Ejemplo de función para generar un color aleatoriamente en formato hexadecimal.
27 El aprendizaje en Internet
Ejemplo de página interactiva para el aprendizaje por internet.
28 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.
29 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.
30 Script de recarga de la página con javascript
Realizamos un script en una página, con Javascript, que hace que se recargue constantemente y asegurando que no se obtiene la página siempre desde la caché.
31 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.
32 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.
33 Copiar en el portapapeles con Javascript
Cómo seleccionar un texto y copiarlo en el portapapeles utilizando una función Javascript.
34 Esquinas redondeadas con CSS y Javascript, sin imágenes
Comentamos un script que sirve para hacer cajas con las esquinas redondeadas, pero sin necesidad de usar imágenes, sólo con CSS y un poco de Javascript.
35 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.
36 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.
37 Esconder la URL de un enlace en la barra de estado
Como hacer un Javascript para evitar que se muestre la URL en la barra de estado del navegador (status bar) al pasar el ratón por encima de un enlace.
38 ¿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.
39 Efecto para inhabilitar/habilitar el fondo de la Página
En este artículo explico como crear un efecto para hacer que se muestre una ventana emergente y que el fondo de la página quede desactivado.
40 Validar número de checkbox marcados con Javascript
Un script en Javascript para validar casillas de verificaciónde formularios, para asegurarse que se han marcado un número máximo de checkbox.
41 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.
42 Javascript no intrusivo
Behaviour, es una imprescindible libreria que nos permite programar con javascript de manera mas sencilla
43 Listado de distintos Framework Javascript
Los Framework Javascript y Ajax más conocidos, utilizados para webs 2.0.
44 Funciones para validación alfanumérica de strings en Javascript
Una serie de funciones de string para validar si un string tiene o no números y caracteres, mayúsculas y minúsculas.
45 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.
46 Editor de texto WYSIWYG Javascript: TinyMCE
Editor HTML WYSIWYG, para integrar en formularios web, basado en Javascript de Moxiecode Systems AB.
47 5 formas de mostrar la fecha actual con Javascript
Varias maneras de mostrar la fecha del día de hoy en una página web con Javascript, para que aparezca con distintos formatos.
48 Librería Javascript para animación jsAnim
Analizamos la librería que nos permite crear animaciones CSS, por medio de Javascript, de una forma muy sencilla.
49 Ejemplo avanzado con la librería jsAnim
Realizamos un segundo ejemplo de uso de la librería Javascript para animación de elementos un poco más avanzado, para demostrar otras de sus funcionalidades.
50 Script Google-code-prettify para realzado de código
Script JavaScript para realzar el código fuente de lenguajes como HTML, PHP, Javascript, etc. que mostramos en páginas web, un nuevo Syntax Highlight.
51 Aplicación que recibe datos de Twitter y Youtube
Descripción y procedimiento para realizar una aplicación web que sirve para consultar comentarios de Youtube y tuits de Twitter de manera asíncrona.
52 Aplicaciones para Google Chrome
Desarrollando aplicaciones en tu navegador preferido Google Chrome gracias a las nuevas APIs de Google.
53 Conociendo a jasmine
Tu código javascript debería tener el privilegio de conocer a jasmine el framework de pruebas unitarias para javascript.
54 Mocha, un nuevo sabor en pruebas unitarias de Javascript
Mocha Framework de Javascript maduro y que está creciendo en el ámbito de pruebas unitarias.
55 QUnit para nuestro código Javascript
QUnit llegó para ser parte del código Javascript de nuestros proyectos, gracias a su gran sencillez.
56 Sobrecarga de funciones en Javascript
Cómo realizar lo que se conoce como Sobrecarga de funciones en el lenguaje Javascript, un concepto usado en la Programación Orientada a Objetos que no es exactamente igual en Javascript.
57 La palabra this y el contexto en Javascript
La variable this en Javascript difiere un poco con respecto a otros lenguajes, en este artículo analizamos this y sus variantes en el contexto donde se use.
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.
58 Comparar fechas en Javascript
Cómo comparar fechas en Javascript, saber si una fecha dada es mayor, menor o igual que otra.
59 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.
60 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.
61 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.
62 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.
63 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.
64 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.
65 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.
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.
66 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.
67 Introducción a Kendo MVVM
Introducimos Kendo MVVM y mostramos algunos ejemplos de utilización. Explicaciones generales del patrón MVVM y otros detalles que debes conocer para usar esta librería Javascript.
68 Cómo usar el Data Grid jQuery de KendoUI
Indicaciones y tutorial para el uso del componente Grid de KendoUI, que implementa un Data Grid basado en jQuery que resulta muy potente y estéticamente atractivo.
69 Invocando servicios en la web con WinJS.xhr
En este artículo aprenderemos cómo realizarlo de forma sencilla y aprovecharemos la oportunidad para empezar a modificar el proyecto creado por la plantilla Grid de Visual Studio 2012.

Artículos del manual

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

Artículos de librerías de terceros en Javascript