Taller de Javascript

Manual práctico de Javascript en el que podemos encontrar diversos scripts de variada utilidad comentados y listos para utilizar en tus páginas web. Aprende Javascript por la práctica.

Si te parece útil este manual ayúdanos compartiendo!! :)

1.- Efectos rápidos con Javascript

En este último artículo de introducción a Javascript veremos algunos ejemplos de códigos sencillos de gran utilidad.

2.- Apertura y configuración de popups con javascript

Este artículo te enseñará en profundidad como abrir ventanas secundarias y configurar su forma.

3.- Acceso por clave javascript

Este artículo te explica paso a paso cómo crear un sistema para proteger por clave unas páginas en tu web. Utilizamos Javascript, un lenguaje accesible a todo el mundo.

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

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

6.- Navegador desplegable

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.

7.- Navegador desplegable con frames

Es la continuación de la ayuda técnica para crear un menú desplegable. En este caso se realiza una adaptación del script para que pueda ser utilizado en un sitio diseñado con frames

8.- Texto en movimiento en la barra de estado

Veamos un sencillo script para hacer que se mueva un texto por la barra de estado de nuestro navegador.

9.- Mostrar capas y ocultar capas con IE 4,5 NS 4

El propósito de este artículo, es hacer que se muestre u oculte una capa cuando se pasa con el ratón por encima de otra. Gracias a esta técnica, las páginas tendrán un aspecto mucho más dinámico.

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

11.- Reloj en Javascript

Aprendemos a crear un reloj sencillo mediante Javascript y le aplicamos algunas mejoras.

12.- Scripts distintos para cada navegador

Vemos cómo incluir de una manera sencila una librería de scripts distinta para cada navegador.

13.- Tamaño de los campos relativo al navegador

Dependiendo del navegador los campos de texto tienen tamaños distintos. Con javascript lo evitamos.

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

15.- Tabla de colores con Javascript

Una tabla que muestra los colores puros en todas las definiciones. Está construida con Javascript anidando tres bucles.

16.- Submenú en otra ventana

Hacemos un submenú de opciones que se muestra en una ventana secundaria y ona vez seleccionada la opción del submenú se traspasa a la ventana padre.

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

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

19.- Enlace aleatorio Javascript

Creamos un enlace que nos lleva a cualquier URL aleatoriamente, entre varias posibilidades.

20.- Generación de números aleatorios Javascript

Taller en el que se crea una función para generar números aleatorios en lenguaje Javascript.

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

22.- Ej. trabajo con formularios. Calculadora sencilla

Vamos a ver un ejemplo del trabajo con formularios en el que desarrollaremos una calculadora sencilla.

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

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

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

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

27.- Capas con Internet Explorer 5, 6, Netscape 6, 7 y Opera

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.

28.- Mostrar y ocultar capas con IE 5,6 NS 6,7

Explicación y ejemplos sobre la manera de mostrar y ocultar capas con el método getElementById() de Javascript.

29.- Movimiento de Capas con IE 5,6 NS 6,7

Ejemplo de DHTML, con el cuál podemos crear un movimiento con capas.

30.- Escritura en las Capas con IE 5, 6, NS 6, 7

Mecanismo y funciones sencillas para escribir dinámicamente texto en una capa.

31.- Como iluminar tablas, celdas o filas

Curioso efecto conseguido con javascript, que nos permite jugar con la transparencia de cualquier imagen.

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.- Actualizar dos frames con un solo enlace

Ejemplo de control de frames mediante Javascript en el que, pulsando un solo enlace, se actualizan dos páginas distintas contenidas en dos frames.

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

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

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

37.- Javascript para evitar que la página se muestre en un frame

Un sencillo javascript para evitar que nuestra página se muestre dentro de un frame y se muestre en todo el espacio de la ventana.

38.- Elementos de formulario select asociados

Cómo hacer con Javascript que un elemento de formulario select cambie sus opciones cuando cambie otro elemento select de la página. De modo que cada opción de un select tenga un grupo de opciones posibles para el otro select.

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

40.- Otro navegador con capas

Script en Javascript y DHTML para la creación de una barra de navegación como menú dinámico.

41.- Cargador universal de imágenes

Se presenta un script para cargar imágenes a usar en la página.

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

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

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

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

46.- Cross-Browser. DHTML compatible con todos los navegadores.

Presentamos un sitio web que ofrece interesantes utilidades para el trabajo con HTML Dinámico de una manera sencilla y compatible con los navegadores más habituales.

47.- Calcular la letra del DNI en Javascript

Script en lenguaje JavaScript que nos permite calcular la letra del DNI.

48.- HTML Area. Editor WYSIWYG

Herramienta que permite crear elementos de formulario donde el usuario puede escribir texto con estilos.

49.- Ocultar un email de un enlace para evitar el spam

Cómo ocultar una dirección de correo, que se pone en el mailto de un enlace, para evitar que sea detectada por los robots que buscan direcciones en webs para enviar spam.

50.- Validación de un formulario con Javascript

Cómo validar un formulario en una página web, en el lado del cliente con Javascript. Se comprueban todos sus campos y si son correctos, se envía el formulario.

51.- Función en Javascript para la inserción de fechas

Función para la introducción de fechas con formato dd/mm/aaaa.

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

53.- Generar un color aleatorio con Javascript

Ejemplo de función para generar un color aleatoriamente en formato hexadecimal.

54.- El aprendizaje en Internet

Ejemplo de página interactiva para el aprendizaje por internet.

55.- Marcar o desmarcar todos los checkbox de un formulario con Javascript

Realizamos función de Javascript para que se puedan seleccionar todos los checkbox o cajas de selección de un formulario a la vez, pulsando un solo enlace. Hacemos también la función para deseleccionar todos los elementos a la vez.

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

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

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

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

60.- Popups DHTML – OpenPopups

Sistema Javascript para crear popups DHTML, por medio de capas, que no se pueden bloquear por los sistemas de bloqueo de popups.

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

62.- Copiar en el portapapeles con Javascript

Cómo seleccionar un texto y copiarlo en el portapapeles utilizando una función Javascript.

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

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

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

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

67.- ¿Como integrar contenido RSS en mí pagina?

Un código muy simple para poder tener contenido RSS en tu página web.

68.- Hacer que un iframe se ajuste a la altura de una ventana con Javascript

Vamos a definir dinámicamente con javascript el tamaño de un iframe para que se ajustar el marco al espacio disponible en la ventana del navegador.

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

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

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

72.- Evitar que un textarea sobrepase un número de caracteres permitidos

Hacemos un script Javascript para controlar que un textarea de un formulario tenga más caracteres de los permitidos. Es decir, que se permita escribir en un textarea hasta que se alcance una longitud del texto dada.

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

74.- Javascript no intrusivo

Behaviour, es una imprescindible libreria que nos permite programar con javascript de manera mas sencilla

75.- Control de introducción de caracteres de un campo de texto con Javascript

Podemos impedir con Javascript que los caracteres que el usuario teclea en un campo de texto de un formulario aparezcan.

76.- Listado de distintos Framework Javascript

Los Framework Javascript y Ajax más conocidos, utilizados para webs 2.0.

77.- Script para detección de soporte a Ajax, Cookies y ActiveX

Unos scripts del lado del cliente para saber si tu navegador es compatible con Ajax, Cookies y ActiveX.

78.- Lector RSS con Javascript

Como leer mediante Javascript un feed RSS para publicar los titulares en tu sitio. Lector RSS Javascript.

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

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

81.- Editor de texto WYSIWYG Javascript: TinyMCE

Editor HTML WYSIWYG, para integrar en formularios web, basado en Javascript de Moxiecode Systems AB.

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

83.- YUI: Yahoo! User Interface

YUI es un framework para desarrollo de webs que contiene librerías Javascript y CSS para crear interfaces de usuario típicas de los sitios de contenido enriquecido.

84.- Distintas maneras de acceder a objetos Image Javascript

Distintas formas de obtener objetos Image de Javascript, a través de los elementos de la página, creándolo por nosotros mismos, etc.

85.- PHP.JS Las funciones PHP en Javascript

Una fantástica colección de funciones Javascript basadas en las funciones que incluye el lenguaje PHP, que podemos utilizar libremente en los desarrollos.

86.- Ordenar arrays Javascript

Funciones básicas para ordenar arrays en Javascript, basadas en las disponibles en PHP para la ordenación de arrays, que nos ofrecen en las librerías php.js.

87.- Funciones para acceder a archivos del servidor con Javascript

Algunas funciones interesantes para acceder al sistema de archivos del servidor desde scripts Javascript, basadas en las funciones file system de PHP.

88.- Comprobar los tipos de datos almacenados en variables Javascript

Funciones útiles para validar variables Javascript comprobando el tipo de datos que contienen, basadas en populares funciones de PHP.

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

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

91.- Hacer MD5 desde Javascript

Cómo calcular la llave MD5 de cualquier cadena de caracteres desde Javascript, por medio de las librerías PHP.js.

92.- Presentación de Modernizr

Modernizr es una librería Javascript que nos permite conocer la compatibilidad del navegador con tecnologías HTML5 y CSS3, para hacer sitios web que se adaptan a cada browser.

93.- Script Javascript SyntaxHighlighter

Script JavaScript SyntaxHighlighter para dar formato al código fuente de lenguajes de programación, mostrado en la web.

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

95.- Buenas prácticas de programación con prefijos de fabricante

Buenas prácticas de programación en Javascript que nos permitirán trabajar con prefijos de fabricante sin complicarnos la vida ni el código fuente.

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

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

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

99.- Comandos Javascript para Rich-Text Editing de HTML 5

Nos iniciamos en la ejecución de comandos Javascript con el método execCommand para edición de texto enriquecido, una de las capacidades del API HTML5 Rich-text editing.

100.- Aplicaciones para Google Chrome

Desarrollando aplicaciones en tu navegador preferido Google Chrome gracias a las nuevas APIs de Google.

101.- Conociendo a jasmine

Tu código javascript debería tener el privilegio de conocer a jasmine el framework de pruebas unitarias para javascript.

102.- Mocha, un nuevo sabor en pruebas unitarias de Javascript

Mocha Framework de Javascript maduro y que está creciendo en el ámbito de pruebas unitarias.

103.- QUnit para nuestro código Javascript

QUnit llegó para ser parte del código Javascript de nuestros proyectos, gracias a su gran sencillez.

104.- Microsoft TypeScript

Primer programa con Visual Studio 2012.

105.- Introducción a Kendo MVVM

Pequeña introdución al framework Kendo MVVM. Qué es el patron MVVM. Además realizamos nuestro primer ejemplo basado en esta librería Javascript.

106.- Caracteristicas de Kendo MVVM

Explicamos algunas características relativas al framework Javascript Kendo MVVM.

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

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

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

110.- IIFE, closures o simplemente envoltura de función en Javascript

Explicamos un concepto ampliamente usado en Javascript para crear una envoltura para una función, llamada como closure o las siglas IIFE.

111.- Comparar fechas en Javascript

Cómo comparar fechas en Javascript, saber si una fecha dada es mayor, menor o igual que otra.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

hola

21/11/2009
no se puede imprimir
no puedo imprirmirlo

ricotero190

10/12/2009
No anda para imprimir
Hola que tal? Les comento que el manual no lo pude imprimir a partir de la pagina 50, me tira un error que dice No hay paginas seleccionadas o algo asi, probe en varias maquinas y en todas me dice lo mismo. Por favor suban la version arreglada, muchas gracias!

bolivar

07/2/2010
Duda al crear un pop-ups
Hola, la verdad en esto de los javascripts llevo muy poco, pero estoy realizando una pagina web con formularios y deseo que al dar clic en un vinculo se me abra un popups pero que al abrir este, la pagina que lo invoco se quede bloqueada, y solo se active hasta cuando la otra se le de clic en dos botones que se tienen (aceptar/cancelar). Por ejemplo, tengo que agregar un usuario pero antes de esto quiero validar buscando primero en la base de datos si ya existe y pues queria como implementarlo lo que se describio anteriormente. No se si esta duda se trate en algun tema ya expuesto, de ser asi por favor indicarmelo. De antemano mil gracias por la ayuda que me puedan brindar y perdonen si esta pregunta es algo boba o sea algo simple.... Pero con esto deseo no que despues de ingresado todos los datos y al validarlos el sistema me diga que ya existe el usuario

ninievnz

27/5/2010
si funcciona muy bien
Hola buenos dias a todos, soy nueva sobre el sitio pero se me descargo muy bien el taller y pude imprimir sin problema, lo unico que hice es inscribirme en el sitio. Saludos a todos

Donald Jefferson Mckoy

09/4/2011
Donald J. Mckoy -- de Jamaica
Hola Hermanos,

Les Saludo a todos en el nombre de Jesucristo.

Estoy enviando este mensaje a la Radio Dinamica -- de Venezuela, Estado Lara -- de Carrera 2a con Calles 9 y 10.

Saludos a Hermanas, Miriam Valera,Pierina, Margarita, Miva Vasquez, Siqu Labrador, Hermano Da Silva y su esposa, Sara, Hermana, Syda Principal y todos los demas.

Recuerdan hermanos, yo estuve en Venezuela de 1995 -- 2003; y visite la Radio Dinimaca? Estoy anciando verles -- con todo mi corazon. Siempre, estoy recordando a ustedes. Quiero volver a Venezuela, porque me gusta mucho a su pais.

Por favor, mandanme algunos mensajes -- atraves mi correo de electronico: donaldmckoy2010@hotmail.com.

Por favor, oren por mi y yo rezare por ustedes. Saludame a todos los hermanos. Yo esperare a su buena contestacion. Mi numero de telefonico es: 990 - 2779 (876 )

Tengan ustedes un buen dia. Dios les bendigo. Hasta la proxima. Chao.

Tu hermano en Cristo,

Donald Jefferson Mckoy

E-mail otra vez: donaldmckoy2010@hotmail.com

Griselda

24/5/2011
Comentario
Gracias esta muy bonito el sitio me fue de gran ayuda....

alx_salazar

14/9/2012
manual
En lo que he podid observar de este manual esat perfecto... me ayudo a sloucionar un problema q tenia en mi pagina...

nick666

30/11/2012
manual
amigo el link de descarga no sirve podrías arreglarlo o enviarme el manual a mi correo por favor.
nicolaseldurodesiempre@hotmail.com
te lo agradesco