Javascript

> Temas > Javascript
Editar

Todo lo relacionado con Javascript como manuales, aplicaciones prácticas, preguntas y respuestas y más. Aprende y profundiza en Javascript, el lenguaje más importante en la web, esencial para el desarrollo frontend.

Javascript es un lenguaje poderoso, capaz de aportar soluciones eficaces en la mayoría de los ámbitos de la tecnología.

Es especialmente importante porque es el único lenguaje de programación que entienden los navegadores, con el que se desarrolla la parte de la funcionalidad frontend en sitios web y aplicaciones web modernas. Pero también es fundamental en muchos otros tipos de desarrollos. Sus usos más importantes son los siguientes:

  • Desarrollo de sitios web del lado del cliente (frontend, en el navegador)
  • Desarrollo de todo tipo de aplicaciones gracias a la plataforma NodeJS
  • Desarrollo de aplicaciones para dispositivos móviles, híbridas o que compilan a nativo
  • Desarrollo de aplicaciones de escritorio para sistemas Windows, Linux y Mac, pudiendo escribir un código compatible con todas las plataformas.

Por tanto, podemos considerar a Javascript el lenguaje universal, pues es el que más tipos de aplicaciones y usos que puede abarcar en la actualidad. Es por ello que resulta un lenguaje muy recomendable para aprender, ya que nos ofrece capacidades para usarlo en todo tipo de proyectos, siendo que algunos de ellos son parcela exclusiva de Javascript.

Javascript es un lenguaje levemente tipado, que se presta bien para aprender a programar, ya que dar los primeros pasos es relativamente sencillo. Sin embargo, cuando el estudiante profundiza, sus características lo hacen diferente de otros lenguajes y requiere un estudio detallado para dominarlo completamente y conocer todas sus particularidades, necesarias para poder realizar aplicaciones avanzadas con soltura.

Populares Librerías como jQuery o React, o frameworks como Angular, Vue o Ionic están basados en Javascript, sin olvidarnos de estándares ampliamente usados como Web Components y librerías basadas en ellos como Stencil o Lit. Para abordar cualquiera de estas herramientas, y muchas otras, el aprendizaje sólido Javascript es un importante requisito.

Más información:

Historia de Javascript

Javascript es un lenguaje creado por Netscape, la compañía propietaria de un navegador con el mismo nombre hoy desaparecido, que fue precursor del actual Firefox. Su lanzamiento se produjo en 1995 en la versión de Netscape 2.0. Su autor, un programador llamado Brendan Eich, se dice que lo creó en el tiempo de una semana.

Originalmente Javascript tomó el nombre de Mocha, aunque antes de su lanzamiento fue renombrado a LiveScript. Sin embargo, ese nombre se cambiaría finalmente a Javascript como consecuencia de un acuerdo entre Netscape y Sun Microsystems, que por aquella época era la propietaria del lenguaje Java. En virtud de ese acuerdo Netscape agregó compatibilidad para Java en su navegador, a la vez que tomaba el nombre de Javascript para su lenguaje. Esta denominación, sin embargo, ha provocado históricamente toda una serie de confusiones entre la comunidad, puesto que Javascript no tiene nada que ver con Java.

Para entender el enfoque de Javascript nos tenemos que trasladar a los primeros años de la web, en los que las páginas eran principalmente contenido y enlaces, puesto que por aquel entonces solo existía HTML. Sin embargo, era necesario aportar algún grado de interacción con el usuario, que fuera capaz de cubrir las necesidades básicas de los desarrolladores en aquella época. Así que se creó un lenguaje capaz de ejecutar pequeños programas en el contexto de una página web, con un juego de instrucciones capaz de interaccionar con el usuario como respuesta a las acciones en la página. Pocos iban a suponer por entonces el futuro que le esperaba al lenguaje.

Entre tanto, la idea de un lenguaje liviano que se ejecutase en el navegador tuvo éxito y otros fabricantes la implementaron en sus clientes web. Es el caso de Microsoft, que bautizó a su lenguaje como JScript y fue presentado en 1996 con Internet Explorer 3. Javascript y JScript eran compatibles entre si en un alto grado, pero igual que ocurría por aquel entonces con el lenguaje HTML, cada navegador hacía la guerra por su cuenta y construía su lenguaje innovando de la manera que le parecía oportuno.

Con el tiempo, las pequeñas diferencias entre Javascript y JScript se fueron haciendo más patentes y acabó representando un problema para desarrolladores y usuarios, que había que atajar. Para ello en 1997 se produjo un movimiento para la estandarización del lenguaje, que acabó en la creación de ECMAScript, que no es más que el estándar del lenguaje Javascript.

Hoy afortunadamente, el Javascript que entienden todos los navegadores es el mismo, marcado por el estándar de ECMASCript. Dicho estándar no pudo tomar el nombre de Javascript, ya que éste es una marca comercial, propiedad actual de Oracle.

Editar

ECMAScript, el estándar

ECMAScript es el estándar creado para homogeneizar lenguaje Javascript implementado en cada navegador. El trabajo de estandarización de Javascript comenzó en 1997 y continúa evolucionando hasta la fecha.

La organización que se encarga de esta estandarización es ECMA International, que comenzó el trabajo a raíz de una solicitud de Netscape. El nombre final del lenguaje fue acordado por los distintos fabricantes de navegadores, incluidos Netscape y Microsoft, junto con la propia ECMA sería ECMAScript.

Las versiones de ECMAScript se fueron sucediendo con rapidez los primeros años. ECMAScript 1 en 1997, ECMAScript 2 en el 98 y ECMAScript 3 en el 99. Sin embargo, luego hubo un parón importante, incluso una versión abandonada (ECMAScript 4) porque sus propuestas no acabaron siendo apoyadas por unanimidad. La siguiente versión ECMAScript 5 se presentó en 2009 y durante muchos años fue la versión que soportaron todos los navegadores.

ECMAScript 5 supuso un avance importante con respecto a versiones anteriores. Incluyó el soporte para JSON, los getters y setters, el modo estricto y otra serie de mejoras, a la vez que se aclaró cómo debía de ser implementado el modelo de objetos en los navegadores (DOM, Document Object Model). Sin embargo, el lenguaje todavía tenía mucho potencial de mejora y las necesidades de las aplicaciones web dejaron patente que era necesaria una remodelación más profunda.

La especificación del estándar más revolucionaria ha sido ECMAScript 6, también conocida como ES6 y cuyo nombre oficial es ECMAScript 2015, debido a su año de presentación. Esta versión mejoró de manera notable la orientación de objetos de Javascript, presentando clases y objetos en toda regla. También introdujo los módulos, toda una nueva gama de operadores, funciones lambda, iteradores, etc. Muchas de esas novedades se pueden aprender en el Manual de ES6. ECMAScript 2015 está disponible actualmente en todos los navegadores actuales, aunque siempre habrá dispositivos u clientes viejos que no se actualizan ya y que no lo puedan interpretar, como es el caso del desaparecido Internet Explorer.

A partir de ES6 se adquirió el compromiso de presentar nuevas especificaciones de ECMAScript cada año. Por lo que ES7 fue presentado en 2016 y así siguió en años sucesivos. Por ello, a partir de ES6, las siguientes versiones se conocen simplemente con el nombre del año, como ECMAScript 2016, ECMAScript 2017 y así sucesivamente. Cada una de ellas ha incorporado viersas novedades y mejoras en el lenguaje.

Los clientes web han ido incorporando estas novedades a su ritmo y por tanto no siempre las novedades del último año están disponibles en todos los navegadores del mercado. Depende mucho de cuál es el fabricante. Tradicionalmente Google Chrome es el más rápido en adoptar las mejoras de Javascript en su motor.

Editar

Javascript, el lenguaje del lado del cliente

A Javascript se le denomina lenguaje "del lado del cliente" porque se ejecuta en contexto del navegador (cliente web), en contraposición a lenguajes como PHP, que se ejecutan del "lado del servidor". En el lado del cliente es el navegador el que soporta la carga de procesamiento y también es el que nos aporta los recursos con los que contamos para programar las aplicaciones.

Desde hace años, gracias a su compatibilidad con todos los navegadores existentes en el mercado, se ha convertido en un estándar para la programación del lado del cliente.

Con Javascript podemos crear efectos especiales en las páginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso con el que cuenta este lenguaje es el propio navegador y todos los elementos que hay dentro de una página (que no es poco).

De manera adicional, gracias a las API Javascript del HTML5, que están disponibles en los navegadores actuales de ordenadores y dispositivos, podemos acceder a todo tipo de recursos adicionales como la cámara, espacio para almacenamiento de datos, creación de gráficos basados en vectores y mapas de bits, flujos de datos con servidores, etc. Con todo ello se han multiplicado las posibilidades del lenguaje.

Pese a que Javascript es conocido principalmente como un lenguaje del lado del cliente, lo cierto es que Javascript es mucho más. Hoy es posible ampliar el contexto de Javascript a muchos ámbitos aunque, si estás comenzando con el lenguaje, lo ideal es que lo aprendas a utilizarlo dentro del navegador.

Editar

Javascript como lenguaje integrador

Aunque Javascript surgió con el objetivo inicial de programar ciertos comportamientos sobre las páginas web, respondiendo a la interacción del usuario y la realización de automatismos sencillos, lo cierto es que hoy sus ámbitos de trabajo son mucho mayores. Ha dejado de ser un "lenguaje de scripting" del lado del cliente, para convertirse en un lenguaje integrador de múltiples ámbitos y prestaciones.

Encontramos Javascript, ya no solo en la Web, también es nativo en sistemas operativos como Windows. También es capaz de hacer programas de consola, bajo la plataforma NodeJS, así como programas de escritorio multiplataforma (Windows, Linux y Mac). Paralelamente, se puede usar Javascript para el desarrollo de aplicaciones para dispositivos (apps híbridas) y aplicaciones que compilan a nativo.

En fin, aquella visión de Javascript "utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web" se ha quedado muy pequeña. Hoy las aplicaciones web más complejas están desarrolladas con altas dosis de Javascript. Aplicaciones tales como Gmail, Netflix, Facebook, Twitter, Outlook... Editores de código como Atom o VScode también están desarrollados con Javascript. Aplicaciones de mensajería como Slack o terminal como Hyper. Sin olvidarnos de un número enorme de Apps para móviles, o juegos tan exitosos como Candy Crush.

Editar

Cómo y cuándo aprender Javascript

Para entender bien lo que es Javascript y en qué situaciones se utiliza, debes conocer los distintos lenguajes básicos en la web. Aunque no es necesario que domines todos los lenguajes de la web para hacer un buen uso de Javascript, sí es importante que conozcas el HTML y tengas algunas nociones de CSS.

En la secuencia del aprendizaje de las tecnologías y lenguajes del web, Javascript sería el lenguaje más adecuado para aprender después de conocer perfectamente HTML y algo de CSS. Javascript resultará sencillo para cualquier persona con conocimientos de programación. Pero también es un lenguaje asequible para profesionales de cualquier área que desean mejorar las funcionalidades de sus sitios web y la experiencia de usuario, así como la potencia de sus proyectos. Es un lenguaje de programación bastante sencillo y pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no tengan una experiencia previa en la programación podrán aprender este lenguaje con facilidad y utilizarlo en toda su potencia con sólo un poco de práctica.

Cuando empiezas a aprender Javascript, ejecutando tus programas en el navegador, los primeros ejemplos que realizarás tendrán dos vertientes. Por un lado, la creación de interfaces de usuario dinámicas que permitirán personalizar la experiencia de uso de una página web con elementos que respondan a las acciones del usuario de una manera avanzada y personalizada. Y por el otro, Javascript nos permite ejecutar instrucciones como respuesta a las acciones del usuario (eventos), con lo que podemos crear páginas interactivas y aplicaciones. Este es otro de los grandes focos de la web, incorportar poco a poco una gran cantidad de utilidades para uso personal y profesional, desde programas sencillos como una calculadora, una agenda, hasta programas tan complejos como un software de gestión empresarial que sea capaz de comportarse en la web de manera similar a una aplicación de escritorio.

Para hacer todo esta gama de funcionalidades, Javascript pone a disposición del programador todos los elementos que forman la página web, para acceder a ellos y manipularlos dinámicamente. Con Javascript el programador es capaz de alterar cualquier cosa que se muestra en una página, cambiando, insertando o eliminando todo tipo de contenido. Si lo deseas, puedes controlar de cada cosa que ocurre en la página cuando la está visualizando el usuario y comunicar con él con todo tipo de interfaces especiales. Todo eso es lo que permitirá crear aplicaciones web realmente impactantes. Aprender todo eso no se consigue en dos días, pero con ganas todo se acaba consiguiendo.

Para comenzar te recomendamos la lectura del Manual de Javascript. Este manual trata todos los temas más básicos de Javascript, desde la creación de tus primeros scripts. Nos enseña los diferentes lugares donde podemos integrar el código Javascript dentro de una página web, pero lo más importante que verás en este manual es todo lo relacionado con la sintaxis del lenguaje, estructuras de control (bucles, condicionales), funciones, objetos, etc. Este manual está explicado paso por paso, de modo que lo podrán entender incluso aquellas personas que no tienen conocimientos de programación.

La segunda parte del manual de Javascript aborda la manipulación de la página mediante Javascript. En ella podrás entender Javascript dentro del contexto del navegador. Aprenderás que con Javascript tienes a tu disposición cualquier elemento de la página, que podrás alterar para implementar las necesidades de tus aplicaciones y responder a la interacción del usuario.

Editar

¿Quieres añadir algo sobre Javascript?

Crea artículos, recursos o comparte información sobre Javascript

Crear un bloque

Javascript
Nombres alternativos: JavasScript Año de lanzamiento: 1995 Autor/es: Brendan Eich Compañía: Netscape Extensión archivos: .js, .html Paradigmas: Imperativo (y multiparadigma)

Manuales

Manual de JavaScript

Manual de JavaScript

Este manual te adentra en el lenguaje Javascript. Aprenderás Javascript desde cero, variables, tipos, estructuras de control, funciones, etc. Además aprenderás cómo usar Javascript en el ámbito de una página web.
Taller de Javascript
Manual práctico de Javascript en el que podemos encontrar diversos scripts de variada utilidad comentados y listos para utilizar en...
Manual de Angular
Este es un manual de Angular que te introduce en los conceptos más básicos y te lleva paso a paso en el desarrollo avanzado de componentes, uso de directivas, servicios y mucho más.
Manual de NodeJS
Manual de NodeJS, que te enseñará a desarrollar usando Javascript y la plataforma Node, programas de consola. Es un manual para desarrolladores Javascript que desean aprender las particularidades del desarrollo con Node.JS.
Manual de jQuery
Este es un completo manual de jQuery, la librería Javascript para manipulación del DOM. Aquí encontrarás explicaciones y ejemplos de todos los asuntos relacionados con jQuery, básicos y avanzados.
Manual de React
Este es el manual de la librería React, una popular bibliotecta Javascript para el desarrollo de interfaces de usuario, con la que también podemos crear aplicaciones frontend modernas.
Formularios y Javascript
Manual que explica todos los aspectos relacionados con el control de elementos de formulario, del lado del cliente, con Javascript.
Manual de ES6
En este manual vamos a abordar el aprendizaje de ECMAScript 2015, la versión 6 del estándar de Javascript conocida como...
Taller de Programación DOM Javascript
Una serie de artículos prácticos con temas acerca de la programación Javascript, focalizada en el DOM (Document Object Model) o...
Videotutorial de Javascript
Una colección de vídeos sobre Javascript, con tutoriales básicos e intermedios para las personas que quieren aprender a programar con el lenguaje más importante de la web.
Manual de Progressive Web Apps
En el Manual de Progressive Web Apps vamos a abordar una de las novedades más destacadas para la realización de...
Manual de Web Components
En este manual vamos a conocer el nuevo estándar de los Web Components, una nueva tecnología implementada en navegadores modernos...
Manual de Webpack
Este es el manual de Webpack, la herramienta más importante para el desarrollo frontend moderno. Webpack es originalmente un empaquetador...
Taller de jQuery
Ejercicios prácticos para aprender jQuery y la programación aplicaciones web enriquecidas del lado del cliente. Básicamente se trata de una...
Manual de jQuery Mobile
Manual de jQuery Mobile, el framework para el desarrollo compatible de sitios web orientados a dispositivos móviles, basado en el...
Manual de Modernizr
Manual de Modernizr, librería Javascript para la detección de capacidades de los navegadores, que tiene como objetivo el desarrollo de...
Manual de Handlebars
Manual de Handlebars, un sencillo sistema de plantillas Javascript basado en Mustache Templates. Handlebars sirve para generar HTML a partir...
Manual de PhoneGap
Aprende a desarrollar aplicaciones para móviles, afronta la gran variedad de plataformas móviles a través de Phonegap.
Desarrollo en Javascript del lado del cliente
En este Manual de Javascript explicamos todos los recursos con los que cuenta un programador para manipulación de una página...

Más manuales

Tenemos 28 manuales más sobre Javascript

Páginas dinámicas
Introducción al concepto de desarrollo de aplicaciones y sitios web con páginas dinámicas. Qué son los lenguajes de programación del lado cliente y servidor, cuáles son las principales tecnologías que disponemos.
Curso gratuito 5 días de HTML5
Grabaciones de las clases del Curso Gratuito de HTML5 impartidas por EscuelaIT en marzo de 2014. En este curso se...
Taller de HTML5
Artículos prácticos sobre la creación de páginas web con el estándar HTML5. Aplicación práctica de las diversas tecnologías relacionadas con...
Manual de Canvas del HTML 5
Manual del elemento Canvas del HTML 5 en el que aprenderemos a dibujar sobre los lienzos, utilizando Javascript y el...
Manual de Ionic
Este es el manual de Ionic 2 en el que explicaremos cómo crear apps híbridas para móviles. Con Javascript y...
Manual de Firebase
En este manual vamos a conocer Firebase, servicio de Google que nos proporciona un backend ya listo para el desarrollo...
Control de ventanas secundarias, popups, con Javascript
Aprendemos todos los entresijos de Javascript para controlar las ventanas secundarias, también llamadas popups. Aprendemos a abrirlas, cerrarlas, pasar datos...
Tratamiento de imágenes en Javascript
Te enseña a trabajar con imágenes en páginas web utilizando javascript para hacer efectos interesantes como rollovers.
Manual de AngularJS
Este es un manual que nos introduce en el framework Javascript AngularJS, un conjunto de librerías de código abierto que...
Manual de Phaser
Manual para aprender a crear juegos HTML5 con el framework Phaser 3, un completo motor de juegos 2D, potente pero sencillo para introducirte en el desarrollo de juegos con Javascript.
Librería php.js: las funciones PHP en Javascript
Manual que presenta la librería php.js, que ofrece cientos de funciones nativas de PHP en la plataforma Javascript. Ejemplos de...
Control de frames con Javascript
Tratamos los mecanismos que nos ayudan a controlar con Javascript lo que ocurre en páginas web realizadas con frames. Accesos...
Manual de Polymer 3
Manual de Polymer 3, la librería para el desarrollo de componentes Javascript, basados en el estándar Web Components. Aprenderás a desarrollar componentes, centrándonos en las particularidades de esta versión con respecto a Polymer 2.
Manual de Mootools
Manual con el que podreis aprender a utilizar Mootools, un framework Javascript, que sirve para crear fácilmente código Javascript independiente...
Manual de Processing.js
Manual de Processing.js, un framework Javascript para dibujo y animación en el elemento Canvas del HTML5. Explicaciones y ejemplos para...
Manual de jQueryUI
Manual que explica cómo utilizar jQueryUI, una librería Javascript para la creación de interfaces de usuario enriquecias del lado del...
Videotutorial de jQuery
Videotutorial de jQuery para aprender a hacer páginas dinámicas del lado del cliente. Una colección de vídeos para aprender paso...
Manual de Polymer
Manual de Polymer 1, una librería para el desarrollo sencillo y rápido de sitios y aplicaciones web frontend basadas en el estándar Web Components.
Manual de Polymer 2
El manual de Polymer 2 te sirve para aprender a desarrollar componentes y aplicaciones bajo la librería de Google para el desarrollo frontend con el estándar de los Web Components.
Manual de Electron
El Manual de Electron nos enseñará a crear aplicaciones desktop multiplataforma usando el framework Electron, que se basa en NodeJS y tecnologías web como Javascript, HTML y CSS.
Plugin Calendario jQuery
Creación de un plugin jQuery para implementar un calendario dinámico, o datepicker, que permita seleccionar fechas, con programación Javascript.
Manual de BackboneJS
Manual para entender el framework Javascript BackboneJS y aprender a usarlo para el desarrollo de proyectos basados en patrones de...
Bindows, un framework AJAX
Presentación y explicaciones para majenar Bindows, una herramienta para programadores que permite crear aplicaciones web con una interfaz de usuario...
Manual de ProseMirror para la creación de editores de texto con Javascript
Cómo crear un editor de texto enriquecido (WYSIWYG) con Javascript usando el popular framework ProseMirror.
Manual de IE Developer Tools
Manual de las herramientas para desarrolladores de Internet Explorer, Developer Tools, con las que podemos inspeccionar los elementos de la...
Prácticas Javascript marcadas como obsoletas
En este manual vamos a colocar todos los talleres y artículos en Javascript con prácticas que ya no se recomiendan, o que utilizan código incompatible con los navegadores actuales.
Nawte editor de texto WYSIWYM con Mootools
Manual en el que veremos qué es Nawte, el componente Mootools, y cómo podremos utilizarlo para crear un editor de...
Taller de Mootools
Compilación de artículos prácticos con el framework Javascript Mootools. Diversos scripts comentados y listos para usar en tus páginas web...

Colecciones

Colección de Librerías de routing para aplicaciones SPA Javascript

Librerías de routing para aplicaciones SPA Javascript

Estas son las librerías para implementar...

10 ítems
Colección de Librerías para crear gráficas de datos en Javascript

Librerías para crear gráficas de datos en Javascript

Selección de las mejores bibliotecas par...

10 ítems

Canales de eventos y clases en directo

Temas relacionados

Dentro de Javascript

Document Object Model (DOM)

El DOM es el modelo de objetos de un documento HTML. Es una correspondencia entre todos los elementos de la página web (documento HTML) hacia objetos Javascript, los cuales implementan un API para manipularlos mediante código.

El DOM es la herramienta que usamos en Javascript para manipular dinámicamente los documentos HTML, mediante código y muchas veces como respuesta a las interacciones del usuario. Por supuesto, es algo que disponemos en Javascript del lado del navegador, no en el lenguaje como tal.

Cuando el navegador renderiza la página, va creando el DOM, generando un nuevo objeto en la memoria que estará asociado a todos los elementos HTML que va encontrando. Mediante código nosotros podemos acceder a estos objetos para manipular los elementos y por lo tanto realizar cambios en la página.

Todos los objetos del DOM tienen un API, es decir, sus métodos y funciones, con los cuales se puede alterar su estado, contenido, etc. Además se estructuran en una jerarquía, que comienza en un objeto de Javascript llamado document.

Editar

Document Object Model (DOM)

Cadenas Javascript

Las cadenas son uno de los tipos de datos que existen en el lenguaje Javascript.

Los strings Javascript, en español cadenas de caracteres o simplemente cadenas, son uno de los tipos de datos más usados. Sirven para albergar textos alfanuméricos y símbolos de todo tipo.

Los literales de cadenas en Javascript tienen la particularidad de poder escribirse entre comillas dobles o comillas simples. No hay diferencia en cuanto al uso de uno u otro tipo de cierre de cadenas:

var cadena = "Cadenas en Javascript";

Sería equivalente a escribir:

var cadena = 'Cadenas en Javascript';

Editar

Arrays en Javascript

Arrays son un tipo de variable capaz de alojar varios valores a la vez, disponible en Javascript y en prácticamente todos los lenguajes de programación imperativos.

Javascript dispone de arrays, también llamados arreglos en español. Son variables donde tenemos distintas casillas, donde se puede albergar un dato en cada una de ellas.

Los literales de array en Javascript se escriben entre corchetes y cada uno de sus valores se separa por comas.

var miArray = [1, 2, 5, 7];

Editar

Formularios con Javascript

El tratamiento de formularios es una de las tareas más recurrentes en Javascript para tareas tan importantes como la validación.

Los formularios son una de las principales vías de interacción con el usuario. Por supuesto, con Javascript podemos hacer un preciso control de todo lo que ocurre cuando un usuario interacciona con formularios o campos de formulario.

A través de Javascript podemos hacer cosas como validar los formularios, responder a eventos diversos cuando se opera dentro de los formularios o sus campos, etc.

Editar

Formularios y Javascript
Manual que explica todos los aspectos relacionados con el control de elementos de formulario, del lado del cliente, con Javascript.

Eventos Javascript

Eventos son sucesos que pasan en el software, básicamente todas las situaciones que pueden ser controladas en un sistema de interacción del usuario.

Los eventos son una de las principales herramientas que tenemos en el software para controlar diversas situaciones que ocurran durante su funcionamiento. Por ejemplo, en un sistema como el navegador, podemos recibir eventos cuando ocurren cosas como que un usuario hace clic sobre un botón, pasa el ratón encima de un elemento, hace una selección en una caja <select> o arrastra un elemento con el ratón, entre otros muchos ejemplos.

Con Javascript podemos asociar manejadores de eventos a todos los eventos que necesitemos. Los manejadores no son más que funciones que deseamos que se ejecuten cuando se produzca un evento en particular. Por ejemplo, en un formulario podríamos asociar un manejador de eventos para realizar acciones (como la validación) cuando el usuario va a enviar ese formulario al servidor.

Asociar manejadores de eventos

Los manejadores de eventos se asocian por medio del método addEventListener() que tienen todos los objetos del DOM. Este método recibe dos parámetros:

  • El tipo de evento ("click", "change", "resize"...)
  • La función a ejecutar o manejador del evento. Esta función recibe además un objeto evento como parámetro desde el cual podemos obtener más información sobre el evento que se está produciendo.
document.addEventListener('click', function(eventObject) {
  console.log('Has hecho clic en ' + eventObject.clientX + 'x' + eventObject.clientY); 
})

Cada tipo de elemento tiene sus propios eventos que puede generar. Además, mediante programación los desarrolladores podemos lanzar eventos personalizados para avisar a otros componentes de software que están ocurriendo cosas de las cuales deban enterarse.

Editar

Funciones Javascript

Las funciones son una de las herramientas más importantes y básicas para estructurar el código Javascript.

Gracias a las funciones somos capaces de organizar el código de las aplicaciones de una manera más óptima, permitiendo descomponer los programas complejos en pequeños módulos que se pueden entender mejor y mantener con mayor facilidad.

Si no tuviéramos funciones sería muy complejo hacer programas grandes, porque no habría manera de estructurar la cantidad de código necesaria. Claro que las funciones no son la única vía para conseguir programación modular, pero sí es la primera que todos debemos de aprender a utilizar.

Definición de funciones en Javascript

En Javascript las funciones se definen con la palabra function seguida de los paréntesis con cualquier número de parámetros y a continuación las llaves para englobar el código de la función.

function cuadrado(base) {
    return base * base;
}

Además, desde Javascript en el estándar ECMASCRIPT 2015 se pueden definir funciones de una manera resumida:

const cuadrado = (base) => base * base

A este tipo de sintaxis resumida de las funciones se llama comúmmente Funciones Flecha o Arrow Functions. La invocación se realiza igualmente, mediante su nombre y enviando los parámetros necesarios.

const resultado = cuadrado(6);

Las funciones son miembros de primera clase en Javascript

En los lenguajes de programación las funciones son tratadas de diversas maneras, con más o menos importancia y posibilidades. En Javascript se dice que las funciones son ciudadanos de primera clase porque el tratamiento que hace de ellas permiten cosas como las siguientes:

  • Podemos enviar funciones como parámetros a otras funciones.
  • Las funciones pueden devolver otras funciones como valor en el return.
  • Podemos asignar funciones a variables
  • Podemos introducir funciones en estructuras de datos, como casillas de arrays o propiedades de objetos
  • Podemos crear funciones dentro de otras funciones

Para dominar Javascript necesitaremos acostumbrarnos a todas estas posibilidades, que hacen que el trabajo con funciones sea muy maleable en Javascript.

Editar

Objetos Javascript

Javascript es un lenguaje multiparadigma y entre otros soporta la programación orientada a objetos.

El paradigma de la programación orientada a objetos es el más extendido en la actualidad. Javascript lo soporta aunque con una aplicación diferente a la de otros lenguajes de programación más tradicionales.

Además Javascript ofrece diversas clases y objetos incorporados en el lenguaje, por ejemplo para el trabajo con fechas o tipos de datos como números o cadenas. También el navegador ofrece un conjunto de objetos conocido como DOM para manipular la página.

En Javascript podemos crear objetos a través de Literales. De hecho, esta posibilidad es la que explota el lenguaje de intercambio de datos JSON.

En sintaxis Javascript un objeto se declara entre llaves.

var sitioWeb = {
    nombre: "DesarrolloWeb.com",
    creacion: "29/12/1999"
}

No obstante, desde la versión ES6, Javascript incluyó la posibilidad de crear clases, lo que le acercó bastante a otros lenguajes como Java, C++ o C#. Actualmente también se pueden crear objetos a través de clases o funciones con la sentencia new.

class SitioWeb {
    constructor(nombre, creacion) {
        this.nombre = nombre;
        this.creacion = creacion;
    }
}

sitioWeb = new SitioWeb("DesarrolloWeb.com", "29/12/1999");

Editar

Objetos Javascript

Javascript asíncrono

La asincronía es una de las características del lenguaje Javascript.

La característica asíncrona de Javascript nos indica que algunos métododos o funciones del lenguaje pueden tardar un tiempo en realizarse y que, durante ese tiempo, el lenguaje libera el hilo de ejecución, pudiendo atender otras tareas.

De hecho, la ejecución de Javascript solamente se realiza en un hilo, por lo que, si los métodos no fueran asíncronos, Javascript siempre se quedaría bloqueado y sin poder atender otras tareas hasta que ese método acabase.

Un ejemplo de asincronía lo tenemos con las llamadas Ajax, que consultan datos del servidor. Cuando se consulta algo del servidor podría ocurrir que tarde unos segundos en responder. Durante ese tiempo, gracias a la asincronía Javascript puede seguir haciendo otras cosas y recuperar el hilo de ejecución realizando más tarde operaciones cuando la tarea asíncrona se haya completado. De este modo, el navegador y Javascript pueden atender a otras tareas mientras que la solicitud Ajax responde.

El ejemplo más directo y sencillo de mostrar cómo funciona el Javascript asíncrono se da con la función setTimeout() de Javascript (en realidad setTimeout() es un método del objeto window), que es capaz de ejecutar cierto código una vez que pase un tiempo definido en el propio método.

setTimeout(function() {
    alert('Ha pasado un segundo');
}, 1000);

Como se puede apreciar, setTimeout() recibe una función como primer parámetro. Esa función es la que se ejecute después de un tiempo, que se indica como segundo parámetro en milisegundos. Durante 1000 milisegundos (1 segundo) Javascript simplemente libera el hilo de ejecución y pasado ese tiempo ejecuta el código de la función indicada como primer parámetro. Ahí está la asincronía. Simplemente es un método que tarda en responder y una vez termina es capaz de ejecutar un código de respuesta.

Las funciones anónimas enviadas a los métodos asíncronos se denominan comúnmente "callback". Pero no son la única manera de definir código asíncrono, actualmente Javascript también funciona con promesas, lo que facilita todavía más la organización del código.

Editar

Javascript asíncrono
Manual de Ajax práctico
Un manual que explica Ajax por la práctica, con una serie de ejemplos de códigos que usan javascript, HTML y...

Preguntas y respuestas de Javascript asíncrono

Bucles Javascript

Los bucles son estructuras de control para repetir la ejecución de un bloque de código.

Los bucles en Javascript son los típicos que encontramos en lenguajes como Java o C, con alguno propio de Javascript para realizar recorridos a estructuras como arrays, objetos o iterables.

Estos son los bucles más elementales que nos aporta el lenguaje:

Bucle for

El bucle for es la estructura de repetición de más bajo nivel, que necesita que alimentemos con los valores concretos de inicialización, condición de repetición e incremento entre iteraciones.

for(var i = 0; i < 10; i++) {
    alert(i);
}

Bucle while

El bucle while se ejecuta siempre que se cumple una condición expresada en la cabecera del bucle. No se expresa de manera explícita la inicialización del bucle ni el incremento en cada iteración.

var i = 0;
while(i < 10) {
    alert(i);
    i++;
}

Bucle do ... while

El bucle do while tiene una estructura similar al bucle while, con la diferencia de que la condición se realiza al final del bloque de repetición. Por lo tanto, este bucle se ejecutará siempre al menos una vez.

var i = 0;
do {
    alert(i);
    i++
} while(i < 10)

Además tenemos otros bucles específicos de Javascript como for in o forEach, los cuales nos sirven para recorrer cómodamente estructuras, ya sean propiedades de objetos o bien casillas de arrays.

Bucle for ... in

Permite obtener los índices de una estructura en cada iteración. Por ejemplo, si lo usamos para recorrer un objeto, obtendremos el nombre de la propiedad actual y se repetirá para el número de propiedades existente en el objeto.

var sitioWeb = {
    nombre: 'DesarrolloWeb',
    tematica: 'Desarrollo, diseño, programación',
}

for(var propiedad in sitioWeb) {
    alert(propiedad + ' / ' + sitioWeb[propiedad]);
}

Bucle for ... of

Este bucle funciona de una manera muy similar a for ... in, pero en lugar de entregarte el índice de la estructura que estás recorriendo te entrega el valor. Sin embargo, no se puede usar con objetos, sino con arrays o iterables.

var numeros = [2, 44, 1];
for(var actual of numeros) {
    alert(actual);
}

Bucle forEach

Podríamos mencionarlo como una alternativa de bucle, pero en realidad es un método de ciertas estructuras como los arrays. Este método lo alimentamos con una función enviada por parámetro, que se ejecutará tantas veces como elementos en el array.

var numeros = [1, 2, 44, 23, 1];
numeros.forEach( actual => alert(actual));

Esa función anónima recibe un parámetro que tendrá el valor del elemento actual de la iteración. Además podemos definir un segundo parámetro que tendría el valor del índice actual del array y un tercer parámetro que sería el propio array que estamos recorriendo.

Editar

Preguntas y respuestas de Javascript

Se han recibido 98 faqs en Javascript

Hacer una pregunta