FrontEnd

Describir y programar

Con esta página web podrás lanzarte a la piscina del FrontEnd. Para no ahogarte, tendrás que aprender a flotar en dos lenguajes descriptivos y un lenguaje de programación. Los dos primeros son HTML y CSS. El lenguaje de programación es JavaScript.

HTML

HTML es HyperText Markup Language. Su bloque constructivo más básico es el elemento. Cada elemento se escribe, generalmente, entre etiquetas que pueden o no contener atributos:

<etiqueta atributo="valor">contenido</etiqueta>

CSS

CSS es Cascading Style Sheets. Su bloque constructivo más básico es la regla. Cada regla se inicia con su(s) selector(es), para luego contener, entre paréntesis de llave, determinadas propiedades:

selector{propiedad:valor;}

JavaScript

HTML y CSS son lenguajes descriptivos. No son lenguajes de programación. Describen, respectivamente, al maniquí y su dress code. Pero es imposible interactuar con un maniquí. Para poder darle vida a una página web debes utilizar un lenguaje de programación. Aquí utilizarás JavaScript, tomando atajos de jQuery.

1. Manipular el DOM

Esta página web aparece en tu navegador con un fade in de 2 segundos, y te ofrece contenidos que no pueden estar definidos de modo estático; está la fecha del día que depende de lo configurado en tu computador; están nombre, apellido y edad que dependen de lo que ingreses en el formulario. Incluso hay un cambio de colores dependiente de la edad ingresada. Todo esto se logra mediante programación que manipula el Document Object Model (DOM).

Cuando le indicas al navegador "Ver el código fuente de la página", lo que obtienes es la descripción de tal página, algo idéntico a lo que se pudo escribir en un Editor de código fuente. Ese escrito es analizado por el navegador y un resultado de tal análisis es el DOM; esto último es lo que se manipula con JavaScript. Dicho de un modo simple, el DOM es donde la máquina hace cosas y Javascript es el lenguaje que le indica a la máquina qué cosas hacer.

2. Consola de JavaScript

Cuando usas JavaScript, o cualquiera de sus bibliotecas, es posible obtener información asomándose a la consola del navegador:

Si estás usando Chrome en PC, presiona Ctrl + Shift + J. Si estás usando el mismo navegador en Mac, presiona Cmd + Alt + J
Si estás usando Firefox en PC, presiona Ctrl + Shift + K. Si estás usando el mismo navegador en Mac, presiona: Cmd + Alt + K
Si estás usando Safari, presiona: Cmd + Alt + C (aunque no es recomendable seguir trabajando con este navegador web, descarga uno de los anteriores)

En el caso de esta página web, cuando te asomas a la consola puedes leer su fecha de carga. También podrás ver cambios después de ingresar los datos del formulario.

En la consola también puedes escribir algo directamente. Intenta copiando, pegando y presionando Enter (_↵):

var primero = "para";
var segundo = "choque";
alert(primero + segundo);

Lo que recién hiciste fue crear dos variables. A cada una asignaste como contenido una "cadena de caracteres". Luego obtuviste un resultado. Esto puede cambiar si asignamos otro tipo de contenido a las variables:

var primero = 20;
var segundo = 30;
alert(primero + segundo);

Para cerrar esta introducción, puedes copiar, pegar y presionar Enter (_↵) con lo siguiente:

document.write(Math.round((50 + 50) * Math.PI));

Después de la lectura de esta página web y un vistazo rápido a sus vínculos, puedes pasar a revisar línea por línea su código fuente (index.html), su estilo vinculado (estilo.css), y la programación que la afecta (interactuar.js). Allí tienes a los lenguajes HTML, CSS y JavaScript integrándose. Comprender esta integración es fundamental para dar un primer paso firme hacia el desarrollo de páginas y aplicaciones web, como FrontEnd.