Nota: JavaScript hoy esta en todos lados (Front end, Back end, Bases de Datos, Servidores, Terminal, Hardware, Software, etc). El enfoque de este documento es introductorio a los Fundamentos de Programación Web del lado Front end con JavaScript: conceptos básicos de programación, programación orientada a objetos, gramática y sintaxis de JS, interacción con HTML y CSS, eventos, formularios, JSON y AJAX.
- Programación
- Programación Orientada a Objetos
- Gramática JS
- Sintaxis JS
- Servidor Web
- Las buenas partes de JS
- DOM
- Eventos
- BOM
- Agente de Usuario
- Media Queries
- Formularios
- AJAX
- JSON
- API's
- JavaScript Diferido y Asíncrono
La gente cree que programar es dificil, algunas razones:
- MALOS Profesores
- Programadores que se sienten DIOSES
- PERSONAS que NO les gusta ANALIZAR
La programación es:
- Intuitivo e inherente a los humanos
- Las cosas intuitivas se van a la memoria muscular, donde no se necesita pensar, se ejecuta en automático, como respirar
- Desde que te levantas estás programando
- Debería enseñarse desde la primaria
- Debemos PENSAR como HUMANOS y NO como MÁQUINAS
- Debemos entender el FLUJO de lo que se quiere hacer, para EJECUTAR los PROCESOS que controlarán dicho FLUJO
- NUNCA traten de ejecutar PROCESOS, sin antes tener un FLUJO que controlar
- Algoritmo: Serie de pasos ordenados y finitos para realizar o resolver una tarea o problema
- Diagrama de Flujo: Es es la representación gráfica de un algoritmo
La POO es un paradigma de programación que utiliza objetos e interacciones en el diseño de un sistema y está compuesta por varios elementos y características
La POO trata de plasmar o representar la realidad del mundo físico (lo concreto) y llevarlo al mundo digital (lo abstracto)
Decía que vivimos en el mundo de las ideas, y los objetos son representaciones físicas de esa idea
- Clase
- Objeto
- Métodos
- Atributos
Class Perro { ... }
kenai = new Perro();
kenai.ladrar();
kenai.comer('croqueta');
kenai.raza = 'Criollo';
kenai.edad = 3;
kenai.esterilizado = true;- Es un Modelo a seguir
- La idea de Platón
- Sintaxis:
Class Perro {...}
- Representación o Instancia de una clase
- La representación física de la idea de Platón
- Sintaxis:
kenai = new Perro();
Los objetos tienen 2 facultades:
- Métodos
- Atributos
- Son las cosas o Acciones que hacen los objetos
- Sintaxis:
objeto.metodo(); - correr, caminar, mover la cola, ladrar (verbos/acciones)
kenai.comer('croqueta');kenai.ladrar();
- Sintaxis:
- Los Métodos fuera de los objetos se llaman Funciones
function ladrar() { ... }
- Los Parámetros son argumentos (datos) que se pueden pasar (o no) a una función. Pueden ser opcionales, y se separan por comas.
function comer(comida) { ... }
- Son las características o Propiedades que tienen los objetos
- Sintaxis:
objeto.atributo = valor; kenai.raza = 'Criollo';kenai.edad = 3;kenai.esterilizado = true;
- Sintaxis:
- Los Atributos fuera de los objetos se llaman Variables
var raza = 'Criollo';
La gramática se define como el estudio de las reglas y principios que estandarizan el uso del lenguaje dentro de la oración
Si llevamos este término a la programación podríamos entender el concepto de la gramática como las reglas y principios que regulan la escritura del código
Por ende entendemos que no es solo es el hecho de escribir código como se nos de la gana, sino que debemos escribir código que sea entendible y ordenado
- De archivos
- Usa
snake_case js_style_guide.js
- Usa
- De objetos, primitivos, funciones e instancias
- Usa
camelCase var myObj = {};var myNum = 1;var myMap = new Map();function myFn() {}
- Usa
- De clases y constructores
- Usa
PascalCase class MyClass {}function MyClass() {}
- Usa
- De constantes
- Usa
UPPER_CASE const MY_CONSTANT = 1;
- Usa
A: abstract
B: boolean, break, byte
C: case, catch, char, class, const, continue
D: debugger, default, delete, do, double
E: else, enum, export, extends
F: false, final, finally, float, for, function
G: goto
I: if, implements, import, in, instanceof, int, interface
L: long
N: native, new, null
P: package, private, protected, public
R: return
S: short, static, super, switch, synchronized
T: this, throw, throws, transient, true, try, typeof
V: var, volatile, void
W: while, with
- Primitivos: Cuando se accede a un tipo primitivo se trabaja directamente sobre su valor
stringnumberbooleannullundefined
- Complejo: Cuando se accede a un tipo complejo se trabaja en una referencia a su valor
object = {}array = []function
- Importaciones o requerimientos de otros archivos o librerias
- Definición de constantes
- Definición de variables y objetos
- Definición de funciones
- Asignación de eventos y estados iniciales
windowdocumentnavigator
- Programación Básica
- Variables
- Tipos de variables
- Numéricas
- Cadenas de texto
- Arrays
- Booleanos
- Operadores
- Asignación
- Incremento y decremento
- Lógicos
NotAndOr
- Matemáticos
- Relacionales
- Estructuras de control de flujo
ifif...elseif...else if...elseforfor...in
- Funciones y propiedades básicas de JavaScript
- Funciones útiles para cadenas de texto
- Funciones útiles para arrays
- Funciones útiles para números
- Programación Avanzada
- Funciones
- Argumentos y valores de retorno
- Ámbito de las variables
- Sentencias break y continue
- Otras estructuras de control
whiledo...whileswitch...case
- Funciones
Muchas de las funciones que se realizan en un sitio o aplicación web requieren el acceso a los recursos mediante el protocolo HTTP y para ello necesitamos acceder desde nuestro navegador web a un Servidor Web
Si miramos la barra de direcciónes de nuestro navegador veremos que la ruta de la url empieza con http://
Cuando abrimos localmente un archivo con extensión ´.html´ nuestro equipo lo abre con el navegador web que tengamos predeterminado, y lo hace localmente desde la ruta local del disco duro o dispositivo desde donde lo abramos
Si miramos la barra de direcciones de nuestro navegador veremos que la ruta de la url empieza con file://
Cuando trabajes en el desarrollo de un sitio o aplicación localmente, siempre debes de hacerlo desde un entorno de servidor
- Ir a nodejs.org
- Descargar e Instalar Node.js
- Puedes instalar la versión LTS (Long Term Support), la cuál tendrá soporte a largo plazo, generalmente se usa en ambientes de producción.
- Puedes instalar la versión Stable, la cuál es la última versión estable de Node, semanalmente sale una versión con carácterísticas nuevas y correcciones de bugs, generalmente se usa en ambientes de desarrollo.
- Abrir una terminal de comandos,
- Si estás en Linux o Mac puede ser que debas anteponer a todos los comandos que ejecutes, la palabra
sudo, posteriormente a ello es probable que la terminal te pida la contraseña de tu cuenta de usuario - Si estás en Windows con el programa de ejecutar escribe
cmddaentery en la terminal de comandos escribepowershell, con ello accederás a una terminal más poderosa de Windows que acepta comandos de Linux - Si no sabes usar comandos en la terminal, aquí te dejo una referencia para:
- Si estás en Linux o Mac puede ser que debas anteponer a todos los comandos que ejecutes, la palabra
- Comprobar que tenemos instalado Node y NPM, escribe en tu terminal los comandos:
node -vme da la versión de Node instaladanpm -vme da la versión de NPM instalada
- Instalar el paquete http-server de manera global con el comando:
npm install http-server -g
- Ir desde la terminal de comandos a la carpeta donde quiero ejecutar un servidor web local
cd C:\la-ruta\de-mi\carpeta- Si la ruta tiene espacios en blanco deberás ponerla entre comillas:
cd '/la ruta\de mi/carpeta con espacios'
- Estando en la carpeta desde la terminal, ejecuta el comando:
http-server- Si quieres ver todas las opciones que http-server ofrece lee su documentación
- Ir al navegador y acceder a la url:
http://localhost:8080
- Para detener el servidor web en la terminal, presiona:
Ctrl + C
Los objetos son una colección de propiedades.
JavaScript tiene un fuerte enfoque de programación orientada a objetos, a pesar de algunos debates que tienen lugar debido a las diferencias de la orientacion a objetos en Javascript comparado con otros lenguajes.
La programación basada en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos. Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.
- Objetos literales
- Prototipo Object()
- Función Constructora
- Clases (apartir de ES6 o ES2015)
Las funciones en JavaScript son objetos de primera clase. Esto significa que las funciones son simplemente un tipo de objeto especial, con las cuales se pueden hacer las mismas cosas que cualquier otro objeto podria hacer.
No es necesario especificar el tipo de dato de una variable al ser declarada, cuando se le asigna un valor, JavaScript detecta el tipo de dato automáticamente.
Alcance: En JavaScript, las funciones son nuestras delimitadoras del alcance de facto al momento de la declaración de variables, lo cual significa que los bloques que son de bucles y condicionales (tales como if, for, while, switch y try) NO delimitan el alcance, a diferencia de la mayoría de otros lenguajes. Por lo tanto, estos bloques compartirán el mismo alcance que la función que las contiene. De esta forma, podría ser peligroso declarar variables dentro de bloques si se requiere que las variables sólo sean vistas en el bloque que pertenecen.
Elevación: En ejecución, todas las declaraciones var y function son movidas para el comienzo de cada función (su alcance) esto es conocido como Elevación. Por ello, es buena práctica declarar todas las variables juntas en la primera línea, con el fín de evitar falsas expectativas con las variables que han sido declaradas luego de la asignación de su valor. Más info.
El modo estricto de ECMAScript 5 es una manera de optar por una forma restringida de JavaScript. El código en modo estricto y en modo no estrícto pueden coexistir, de esta forma, scripts pueden optar entrar al modo estrícto de forma incremental.
Funciones anómimas que son declaradas dinámicamente en tiempo de ejecución. Son llamadas anónimas porque no poseen un nombre de la misma manera que las funciones normales
Las clausuras o closures son funciones que hacen referencia a variables independientes (libres). En otras palabras, la función definida en el closure 'recuerda' el ambiente en el cual esta fue creado. Esto es un importante concepto para entender, así como útil durante el desarrollo, por ejemplo emular métodos privados. Esto puede también ayuda a aprender como evitar errores, como crear closures en bucles.
Es un patrón el cual produce un scope léxico usando las funciones de scoping de Javascript. La Expresión de función inmediatamente invocada puede ser usada para evitar el hoisting de las variables con los bloques, protege contra la contaminación del ambiente global y simultáneamente permite acceder a los métodos publicos al tiempo que conserva la privacidad en las variables definidas dentro de la función. También se conoce. Este patrón ha sido referido también como una función anónima autoejecutable.
El Modelo de Objetos del Documento (DOM - Document Object Model) es un API para documentos HTML y XML. Este prevee una representación estructural del documento, permitiéndole modificar su contenido y presentación visual mediante el uso de un lenguaje de scripting tal como JavaScript.
document.getElementsByTagName('tag-name')devuleve un arreglo con todos los elementos de una etiqueta HTMLdocument.getElementsByClassName('class-name')devuleve un arreglo con todos los elementos de una clase CSSdocument.getElementsByName('name-attribute-value')devuleve el elemento que tenga el valor del atributo name buscadodocument.getElementById('id-name')devuleve el elemento que tenga el valor del atributo id buscadodocument.querySelectorAll('a-selector')devuleve un arreglo con todos los elementos de un selectordocument.querySelector('a-selector')devuleve el elemento que tenga el valor del selector buscado
- Nodos (Elementos y Textos):
.parentNode: Nodo padre.childNodes: Nodos hijos.firstChild: Primer nodo hijo.lastChild: Último nodo hijo.nextSibling: Siguiente nodo hermano.previousSibling: Anterior nodo hermano
- Elementos (Etiquetas HTML):
.parentElement: Elemento padre.children: Elementos hijos.firstElementChild: Primer elemento hijo.lastElementChild: Último elemento hijo.nextElementSibling: Siguiente elemento hermano.previousElementSibling: Anterior elemento hermano
.createElement('HTMLElement'): Crea un nuevo elemento HTML del tipo especificado y devuelve un referencia a dicho elemento.createTextNode('string'): Crea un nuevo nodo de texto con el contenido especificado en la cadena de texto
.appendChild(child-node): Agrega un nodo hijo al elemento especificado.removeChild(child-node): Elimina un nodo hijo al elemento especificado.replaceChild(new-node, replaced-node): Reemplaza un nodo hijo al elemento especificado.insertBefore(new-node, reference-node): Inserta un nodo antes del que elegimos como referencia dentro del elemento especificado.cloneNode(boolean): Clona el nodo especificado.truecon contenido,falsevacío
.nodeValue = 'string': Crea o modifica el texto de un nodo especificado.innerText = 'string': Crea o modifica el contenido de texto del elemento especificado.innerHTML = 'HTML Content': Crea o modifica el contenido HTML del elemento especificado
.className: Devuelve una cadena de texto con los nombres de las clases del elemento especificado.classList: Devuelve un arreglo con los nombres de las clases del elemento especificado.classList[n]: Devuelve la clase que se encuentre en la posiciónndel arregloclassListdel elemento especificado.classList.contain('class-name'): Devuelvetruesi el elemento especificado contiene la clase CSS mencionada, sino devuelvefalse.classList.add('class-name'): Agrega la clase CSS mencionada al elemento especificado.classList.remove('class-name'): Elimina la clase CSS mencionada al elemento especificado.classList.toggle('class-name'): Intercambia (agrega o elimina) la clase CSS mencionada al elemento especificado
.getAttribute('name-attribute'): Obteniendo el valor de un atributo HTML del elemento especificado.setAttribute('name-attribute', 'new-value'): Estableciendo el valor de un atributo HTML del elemento especificadoelemento.nombreAtributo: Obteniendo el valor de un atributo HTML del elemento especificadoelemento.nombreAtributo = 'nuevo valor': Estableciendo el valor de un atributo HTML del elemento especificado
.style: Objeto que contiene todos los atributos CSS del elemento especificadoelemento.style.nombreAtributo: Obteniendo el valor de un atributo CSS del elemento especificadoelemento.style.nombreAtributo = 'nuevo valor': Estableciendo el valor de un atributo CSS del elemento especificado
.insertAdjacentHTML(position, content);: Agrega contenido:'beforebegin': Antes del elemento mismo'afterbegin': Dentro del elemento, antes del primer elemento hijo'beforeend': Dentro del elemento, después del último elemento hijo'afterend': Después del elemento mismo
<!-- beforebegin -->
<p>
<!-- afterbegin -->
Contenido de p
<!-- beforeend -->
</p>
<!-- afterend -->JavaScript pueden utilizar el modelo de programación basada en eventos. En este tipo de programación, los scripts se dedican a esperar a que el usuario haga algo (que pulse una tecla, que mueva el ratón, que cierre la ventana del navegador), el script responde a la acción del usuario normalmente procesando esa interacción y generando un resultado.
Los eventos hacen posible que los usuarios transmitan información al sitio o aplicación. JavaScript define numerosos eventos que permiten una interacción completa entre el usuario y la web. La pulsación de una tecla, pinchar o mover el ratón, seleccionar un elemento de formulario, redimensionar la ventana del navegador; son algunos ejemplos de la lista de eventos disponible en JS.
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento, JS ejecuta la función asociada. Este tipo de funciones se denominan event handlers (manejadores de eventos).
Existen 3 formas de generar manejadores de eventos en JS:
- Como atributo de elementos HTML
- Como manejador semántico
- Como manejador múltiple
<button id="hola" onclick="saludar()">Hola</button><script>
function saludar() {
console.log('Hola');
}
</script><button id="hola">Hola</button><script>
var btnHola = document.querySelector('#hola');
function saludar(evento) {
console.log(
'Hola',
evento
);
}
btnHola.onclick = saludar;
</script><button id="hola">Hola</button><script>
var btnHola = document.querySelector('#hola');
btnHola.onclick = function (evento) {
console.log(
'Hola',
evento
);
}
</script><button id="hola">Hola</button><script>
var btnHola = document.querySelector('#hola');
function saludar(evento) {
console.log(
'Hola',
evento
);
}
btnHola.addEventListener('click', saludar);
btnHola.removeEventListener('click', saludar);
</script><button id="hola">Hola</button><script>
var btnHola = document.querySelector('#hola');
btnHola.addEventListener('click', function (evento) {
console.log(
'Hola',
evento
);
});
btnHola.removeEventListener('click', function (evento) {
console.log(
'Hola',
evento
);
});
</script>Hay un tercer parámetro de tipo boolean, si éste no se especifica, por defecto toma el valor de false
<button id="hola">Hola</button><script>
var btnHola = document.querySelector('#hola');
function saludar(evento) {
console.log(
'Hola',
evento
);
}
btnHola.addEventListener('click', saludar, true);
btnHola.removeEventListener('click', saludar, false);
</script>- Si el valor es
falsese ejecuta la fase de burbuja, es decir, el evento se ejecuta del elemento más interno al más externo del DOM - Si el valor es
truese ejecuta la fase de captura, es decir, el evento se ejecuta del elemento más externo al más interno del DOM - Más sobre Bubbling & Capturing
El Modelo de Objetos del Navegador (BOM - Browser Object Model) es un API que permite acceder y modificar las propiedades de las ventanas del propio navegador.
Mediante BOM, es posible redimensionar y mover la ventana del navegador, modificar el texto que se muestra en la barra de estado y realizar muchas otras manipulaciones no relacionadas con el contenido de la página HTML.
El mayor inconveniente de BOM es que, al contrario de lo que sucede con DOM, ninguna entidad se encarga de estandarizarlo o definir unos mínimos de interoperabilidad entre navegadores.
- Atributos de la ventana:
.innerWidthdevuelve al ancho del viewport.innerHeightdevuelve el alto del viewport.outerWidthdevuelve al ancho del navegador.outerHeightdevuelve el alto del navegador.scrollXdevuelve la distancia recorrida en el scroll horizontal.scrollYdevuelve la distancia recorrida en el scroll vertical.screenXdevuelve la posición de la ventana del navegador respecto de la pantalla en el eje horizontal.screenYdevuelve la posición de la ventana del navegador respecto de la pantalla en el eje vertical
- Métodos de la ventana:
alert('string')muestra una ventana con un mensaje y un botón de aceptar que devuelvetrueconfirm('string')muestra una ventana con un mensaje y 2 botones: aceptar que devuelvetruey cancelar que devuelvefalseprompt('string')muestra una ventana con un mensaje solicitando información al usuario y 2 botones: aceptar que devuelvetruey cancelar que devuelvefalseopen('url')abre una ventana nueva o la url especificadaclose()cierra la ventana actual, siempre y cuando haya sido abierta con el métodoopen()print()imprime la ventana actual
- Eventos de la ventana:
loadsucede al cargar la ventana del navegadorresizesucede al redimensionar la ventana del navegadorscrollsucede al mover las barras de desplazamiento de la ventana del navegador
Un agente de usuario es una aplicación informática que funciona como cliente en un protocolo de red; el nombre se aplica generalmente para referirse a aquellas aplicaciones que acceden a Internet.
Los agentes de usuario que se conectan a la web pueden ser desde navegadores web hasta los web crawler de los buscadores, pasando por teléfonos móviles, lectores de pantalla y navegadores en braille usados por personas con discapacidades.
Cuando un usuario accede a un sitio o aplicación web generalmente envía una cadena de texto que identifica al agente de usuario ante el servidor. Este texto forma parte del pedido a través de HTTP, llevando como prefijo User-agent: que incluye información como el nombre de la aplicación, la versión, el sistema operativo, y el idioma. Los bots, como los web crawlers, a veces incluyen también una URL o una dirección de correo electrónico para que el administrador del sitio web pueda contactarse con el operador del mismo.
La identificación de agente de usuario es uno de los criterios de exclusión utilizado por el estándar de exclusión de robots para impedir el acceso a ciertas secciones de un sitio web.
- Entendiendo el User Agent
- Lista de User Agents
- Expresiones Regulares
- Expresiones Regulares en JS
- Método
.match()
Desde la especificación de CSS 2.1, las hojas de estilo han tenido cierto grado de capacidad para el reconocimiento de dispositivos mediante el uso de tipos de medios. Por ejemplo:
<link rel="stylesheet" href="print.css" media="print">
Con CSS3, la W3C perfeccionó y mejoró los tipos de medios con características multimedia y con la capacidad de preguntar dichas características a los medios
Esto no sólo hace posible inspeccionar el contenido que se entrega al dispositivo, sino también las características físicas reales del dispositivo
El uso de media queries permite pedir fácilmente al navegador sus características, tales como anchura, altura, relación de aspecto y la orientación
La sintaxis es la siguiente:
@media screen and (max-width:480px) and (orientation:portrait) {
/*
Código CSS que se aplicará cuando se cumpla la media queries
*/
}- ¿Puedo usarlas?
- Inspírate en mediaqueri.es
- Lista completa de media queries
Nos permitirán cargar el contenido más adecuado, dependiendo de las características de hardware, software o tipo de conexión del dispositivo que visualice nuestro sitio o aplicación.
- Programando Media Queries en JS
window.matchMedia()MediaQueryListMediaQueryListListener- ¿Puedo usarlas?
Esto nos permite sentar las bases de WPO (Web Performance Optimization) en nuestros sitios y aplicaciones web
La programación de aplicaciones que contienen formularios web siempre ha sido una de las tareas fundamentales de JavaScript. De hecho, una de las principales razones por las que se inventó el lenguaje de programación fue la necesidad de validar los datos de los formularios directamente en el navegador del usuario. De esta forma, se evitaba recargar la página cuando el usuario cometía errores al rellenar los formularios.
No obstante, la aparición de AJAX y las API's de HTML5 han relevado al tratamiento de formularios como la principal actividad del lenguaje. Ahora, el principal uso de JavaScript es el de las comunicaciones asíncronas con los servidores y el de la manipulación dinámica de las aplicaciones. De todas formas, el manejo de los formularios sigue siendo un requerimiento imprescindible, aunque hoy podemos lograrlo con los nuevos atributos de formularios de HTML5.
- Formularios en JS
- Estado Actual de los Formularios HTML5
- Fabulosos Formularios con HTML5
- Método
.exec()
Es un acrónimo de Asynchronous JavaScript + XML o JavaScript asíncrono + XML.
Ajax no es una tecnología en sí mismo. En realidad, se trata de varias tecnologías independientes que se unen.
Las tecnologías que forman AJAX son:
- HTML y CSS, para crear una presentación basada en estándares.
- DOM, para la interacción y manipulación dinámica de la presentación.
- XML, XSLT y JSON, para el intercambio y la manipulación de información.
- XMLHttpRequest, para el intercambio asíncrono de información.
- JavaScript, para unir todas las demás tecnologías.
- Más info de AJAX
- AJAX en MDN
- AJAX sin jQuery
En las aplicaciones web tradicionales, las acciones del usuario en la página (pinchar en un botón, seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor. Una vez procesada la petición del usuario, el servidor devuelve una nueva página HTML al navegador del usuario.
Esta técnica tradicional para crear aplicaciones web funciona correctamente, pero no crea una buena sensación al usuario. Al realizar peticiones continuas al servidor, el usuario debe esperar a que se recargue la página con los cambios solicitados. Si la aplicación debe realizar peticiones continuas, su uso se convierte en algo molesto.
AJAX permite mejorar completamente la interacción del usuario con la aplicación, evitando las recargas constantes de la página, ya que el intercambio de información con el servidor se produce en un segundo plano.
Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas mediante la creación de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca se encuentra con una ventana del navegador vacía esperando la respuesta del servidor.
Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se realizan al elemento encargado de AJAX. Las peticiones más simples no requieren intervención del servidor, por lo que la respuesta es inmediata. Si la interacción requiere una respuesta del servidor, la petición se realiza de forma asíncrona. En este caso, la interacción del usuario tampoco se ve interrumpida por recargas de página o largas esperas por la respuesta del servidor.
JavaScript Object Notation o Notación de Objetos de JavaScript, es un formato ligero de intercambio de datos. Leerlo y escribirlo es simple para humanos, mientras que para las máquinas es simple interpretarlo y generarlo.
Está basado en un subconjunto del Lenguaje de Programación JavaScript, Standard ECMA-262 3rd Edition - Diciembre 1999. JSON es un formato de texto que es completamente independiente del lenguaje pero utiliza convenciones que son ampliamente conocidos por los programadores de la familia de lenguajes C, Java, JavaScript, Perl, Python, y muchos otros. Estas propiedades hacen que JSON sea un lenguaje ideal para el intercambio de datos.
JSON está constituído por dos estructuras:
- Una colección de pares de nombre/valor. En varios lenguajes esto es conocido como un objeto, registro, estructura, diccionario, tabla hash, lista de claves o un arreglo asociativo.
- Una lista ordenada de valores. En la mayoría de los lenguajes, esto se implementa como arreglos, vectores, listas o sequencias.
Estas son estructuras universales; virtualmente todos los lenguajes de programación las soportan de una forma u otra. Es razonable que un formato de intercambio de datos que es independiente del lenguaje de programación se base en estas estructuras.
- JSON es una sintaxis para almacenar e intercambiar datos.
- JSON es una alternativa más fácil de usar a XML.
- En aplicaciones AJAX, JSON es más rápido y más fácil que XML
La sintaxis JSON se deriva de sintaxis de notación de objetos JavaScript:
- Datos se encuentran en pares de nombre / valor
- Datos están separados por comas
- Las llaves
{ }contienen objetos - Los corchetes
[ ]tienen arreglos - Los datos JSON tienen un nombre y un valor
- Los datos JSON se escribe como pares de nombre / valor
"nombre" : "valor"
- Un número (entero o de coma flotante)
- Una cadena (entre comillas dobles)
- Un booleano (verdadero o falso)
- Un arreglo (entre corchetes)
- Un objeto (entre llaves)
- Un valor nulo (
null)
JSON.stringify()convierte un valor a cadena de notación JSON.JSON.parse()analiza una cadena de texto como JSON.
Interfaz de Programación de Aplicaciones, abreviada como API (Application Programming Interface), es el conjunto de subrutinas, funciones y procedimientos que ofrece una libreria o framework para ser utilizado por otro software como una capa de abstracción.
Una API representa la capacidad de comunicación entre componentes de software o hardware. Se trata del conjunto de llamadas a ciertas librerias que ofrecen acceso a ciertos servicios desde los procesos y representa un método para conseguir abstracción en la programación, generalmente (aunque no necesariamente) entre los niveles o capas inferiores y los superiores del software.
Uno de los principales propósitos de una API consiste en proporcionar un conjunto de funciones de uso general. De esta forma, los programadores se benefician de las ventajas de la API haciendo uso de su funcionalidad, evitándose el trabajo de programar todo desde el principio.
Las API son abstractas: el software que proporciona una API generalmente es llamado la implementación de esa API.
En JavaScript tenemos 2 tipos de API's:
- Internas
- DOM
- Event
- MediaQueryList
- XMLHTTPRequest (AJAX)
- Geolocation
- Storage
- Cache
- GetUserMedia
- Audio / Video
- Canvas / SVG
- WebSockets
- WebWorkers
- Touch
- What Web Can Do Today
- etc
- Externas
Cuando se carga JavaScript de forma natural, pueden existir problemas de rendimiento ya que el documento HTML se parsea hasta que se encuentra la etiqueta de script. En ese punto todo se detiene y el navegador se encarga de descargar el script y ejecutar lo que corresponda.
<script src="js/mi_codigo.js"></script>
Realizada dicha operación el parseo de HTML seguirá su curso. Esto en algunas situaciones hace que el usuario perciba lentitud al cargarse la página. El script actúa de forma bloqueante.
A partir de HTML5 están disponibles dos nuevos atributos para cargar los scripts: async y defer. Ambos aportan flexibilidad al código que se construya.
El atributo defer es boolean, cuando está presente, especifica que el script se ejecuta cuando la página ha terminado de cargarse. Sólo debe usarse para scripts externos.
El navegador podrá seguir parseando y presentando partes de la página mientras se descarga el fichero de JavaScript. Esto dará una sensación de mayor velocidad al usuario. El script se ejecutará una vez finalizada la carga de la página.
<script src="js/mi_codigo.js" defer></script>
El atributo async es boolean, cuando está presente, especifica que la secuencia de comandos se ejecutará de forma asíncrona tan pronto como esté disponible. Sólo debe usarse para scripts externos.
Como su nombre indica implica que la carga del script será totalmente asíncrona, esto permite que el navegador cargue y ejecute el script en paralelo, sin esperar que la página termine de cargar. Esto nos puede ayudar en algunas ocasiones pero hay que gestionarlo con cuidado ya que ni siquiera el DOM estará disponible.
<script src="js/mi_codigo.js" async></script>