# data[].attributes.body
Bibliografía JavaScript - Teleinformatica

# data[].attributes.attachment_link.description
1.4. Cómo incluir JavaScript en documentos XHTML

# data[].attributes.attachment_link.description
Tutorial de JavaScript moderno: explicaciones simples pero detalladas con ejemplos y tareas, que incluyen: closures, documentos y eventos, programación orientada a objetos y más.

# data[].attributes.attachment_link.readable_text
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la siguiente línea de contenido:

Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de párrafo (<p>):

Explora este párrafo en mayor profundidad.

Las partes principales del elemento son:

1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento -en este caso, dónde es el comienzo del párrafo-.

2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento -en este caso dónde termina el párrafo-.

3. El contenido: este es el contenido del elemento, que en este caso es sólo texto.

4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.

Los elementos pueden también tener atributos, que se ven así:

Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el contenido real del elemento. Aquí class es el nombre del atributo y editor-note el valor del atributo. En este caso, el atributo class permite darle al elemento un nombre identificativo, que se puede utilizar luego para apuntarle al elemento información de estilo y demás cosas.

Un atributo debe tener siempre:

1. Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).

2. El nombre del atributo, seguido por un signo de igual (=).

3. Comillas de apertura y de cierre, encerrando el valor del atributo.

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.

Nota: el atributo con valores simples que no contengan espacios en blanco ASCII (o cualesquiera de los caracteres " ' ` = < >) pueden permanecer sin entrecomillar, pero se recomienda entrecomillar todos los valores de atributo, ya que esto hace que el código sea más consistente y comprensible.

Puedes también colocar elementos dentro de otros elementos -esto se llama anidamiento-. Si, por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra "muy"), podemos encerrarla en un elemento <strong>, que significa que dicha palabra se debe enfatizar:

Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo, creaste la etiqueta de apertura del elemento <p> primero, luego la del elemento <strong>, por lo tanto, debes cerrar esta etiqueta primero, y luego la de <p>. Esto es incorrecto:

Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados inesperados. Así que, ¡no lo hagas!

Algunos elementos no poseen contenido, y son llamados elementos vacíos. Toma, por ejemplo, el elemento <img> de nuestro HTML:

Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido encerrado. Esto es porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es desplegar una imagen en la página HTML, en el lugar en que aparece.

Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para formar una página HTML entera. Vuelve a visitar el código de tu ejemplo en index.html (que viste por primera vez en el artículo Manejo de archivos):

Tienes:

<!DOCTYPE html> - el tipo de documento. Es un preámbulo requerido. Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser considerado bueno, lo que podía significar la verificación automática de errores y algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.

<html></html> - el elemento <html>. Este elemento encierra todo el contenido de la página entera y, a veces, se le conoce como el elemento raíz (root element).

<head></head> - el elemento <head>. Este elemento actúa como un contenedor de todo aquello que quieres incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción de la página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.

<meta charset="utf-8"> - <meta>. Este elemento establece el juego de caracteres que tu documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.

<title></title> - el elemento <title> establece el título de tu página, que es el título que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.

<body></body> - el elemento <body>. Encierra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.

Presta atención nuevamente al elemento imagen <img>:

Como ya se dijo antes, incrusta una imagen en la página, en la posición en que aparece. Lo logra a través del atributo src (source), el cual contiene el path (ruta o ubicación) de tu archivo de imagen.

También se incluye un atributo alt (alternative) el cual contiene un texto que debería describir la imagen, y que podría ser accedido por usuarios que no pueden ver la imagen, quizás porque:

1. Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales usualmente utilizan herramientas llamadas Lectores de pantalla (Screen Readers), los cuales les leen el texto contenido en el atributo alt.

2. Se produjo algún error en el código que impide que la imagen sea cargada. Como ejemplo, modifica deliberadamente la ubicación dentro del atributo src para que este sea incorrecto. Si guardas y recargas la página, deberías ver algo así en lugar de la imagen:

La frase clave acerca del texto alt de arriba es "texto que debería describir la imagen". El texto alt debe proporcionarle al lector la suficiente información como para que este tenga una buena idea de qué muestra la imagen. Por lo que tu texto actual "Mi imagen de prueba" no es para nada bueno. Un texto mucho mejor para el logo de Firefox sería: "El logo de Firefox: un zorro en llamas rodeando la Tierra".

Prueba a dar con mejores textos alt para tu imagen.

Esta sección cubrirá algunos de los elementos HTML básicos que usarás para el marcado de texto.

Los elementos de encabezado permiten especificar que ciertas partes del contenido son encabezados, o subencabezados del contenido. De la misma forma que un libro tiene un título principal, y que a su vez puede tener títulos por cada capítulo individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también. HTML posee seis niveles de encabezados, <h1> (en-US)-<h6> (en-US), aunque probablemente solo llegues a usar 3-4 como mucho:

Intenta ahora añadir un título apropiado para tu página HTML, antes de tu elemento <img>.

Nota: verás que el encabezamiento de nivel 1 tiene un estilo implícito. No utilices elementos de encabezado para hacer el texto más grande o más oscuro, porque este elemento se utiliza por accesibilidad y otras razones como el posicionamiento en buscadores ( Search Engine Optimization, SEO). Intenta crear una secuencia significativa de encabezados en tus páginas, sin saltarte niveles.

Como se explicó más arriba, los elementos <p> se utilizan para encerrar párrafos de texto; los usarás frecuentemente para el marcado de contenido de texto regular:

Agrega uno o algunos párrafos a tu texto de ejemplo (deberías tenerlo de cuando estudiaste ¿Cuál será la apariencia de tu sitio web?), colocados directamente debajo del elemento <img>.

Mucho del contenido web está dado por listas, así que HTML tiene elementos especiales para ellas. El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos de listas más comunes son las listas ordenadas y las desordenadas:

1. Las listas desordenadas son aquellas en las que el orden de los items no es relevante, como en una lista de compras. Estas son encerradas en un elemento <ul> (unordered list).

2. Las listas ordenadas son aquellas en las que el orden sí es relevante, como en una receta. Estas son encerradas en un elemento <ol> (ordered list).

Cada elemento de la lista se coloca dentro de un elemento <li> (list item).

Por ejemplo, si quieres transformar parte del siguiente párrafo en una lista:

Podrías hacer lo siguiente:

Intenta agregar una lista ordenada o desordenada en tu página de ejemplo.

Los vínculos o enlaces son muy importantes -son los que hacen de la web, la web-. Para implementar un vínculo, necesitas usar un vínculo simple - <a> - la a es la abreviatura de la palabra inglesa "anchor" (" ancla "). Para convertir algún texto dentro de un párrafo en un vínculo, sigue estos pasos:

1. Elige algún texto. Nosotros elegimos "Manifesto Mozilla".

2. Encierra el texto en un elemento <a>, así:

3. Proporciónale al elemento <a> un atributo href, así:

4. Completa el valor de este atributo con la dirección web con la que quieras conectar al vínculo:

<a href = "https://www.mozilla.org/es-AR/about/manifesto/" > Manifesto Mozilla</a >

Podrías obtener resultados inesperados si al comienzo de la dirección web omites la parte https:// o http:// llamada protocolo. Así que luego del marcado del vínculo, haz clic en él para asegurarte que te dirige a la dirección deseada.

Nota: href podría parecer, en principio, una opción un tanto oscura para un nombre de atributo. Si tienes problemas para recordarla, recuerda que se refiere a hypertext reference (referencia de hipertexto).

Ahora agrega un vínculo a tu página, si es que aún no lo hiciste.

Si lograste seguir todas las instrucciones de este artículo, deberías terminar con una página que se vea así (también puedes verla aquí):

Si te estancas en algún paso, puedes comparar tu trabajo con el código de ejemplo terminado en Github.

Aquí realmente solo has rasguñado la superficie de HTML. Para aprender más, ve a la página de Aprendizaje HTML.

# data[].attributes.attachment_link.title
Conceptos básicos de HTML - Aprende desarrollo web | MDN

# data[].attributes.attachment_link.description
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.

# data[].attributes.attachment_link.readable_text
1.1 ¿Qué es JavaScript?

JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en el lado del cliente, implementado como parte de un navegador web permitiendo crear interacción con el usuario y páginas web dinámicas, aunque actualmente es posible ejecutar JavaScript en el propio servidor ( NodeJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF o aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

JavaScript se diseñó con una sintaxis similar al lenguaje de programación C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes.

1.2 Breve historia

A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse las primeras aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios complejos.

Con unas aplicaciones web cada vez más complejas y una velocidad de navegación tan lenta, surgió la necesidad de un lenguaje de programación que se ejecutara en el navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le hacía esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los errores existentes.

Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar este problema adaptando otras tecnologías existentes (como ScriptEase) al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denominó a su lenguaje LiveScript.

Posteriormente, Netscape firmó una alianza con Sun Microsystems para el desarrollo del nuevo lenguaje de programación. Además, justo antes del lanzamiento Netscape decidió cambiar el nombre por el de JavaScript. La razón del cambio de nombre fue exclusivamente por marketing, ya que Java era la palabra de moda en el mundo informático y de Internet de la época.

La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft lanzó JScript con su navegador Internet Explorer 3. JScript era una copia de JavaScript al que le cambiaron el nombre para evitar problemas legales.

Para evitar una guerra de tecnologías, Netscape decidió que lo mejor sería estandarizar el lenguaje JavaScript. De esta forma, en 1997 se envió la especificación JavaScript 1.1 al organismo ECMA European Computer Manufacturers Association).

ECMA creó el comité TC39 con el objetivo de "estandarizar de un lenguaje de script multiplataforma e independiente de cualquier empresa". El primer estándar que creó el comité TC39 se denominó ECMA-262, en el que se definió por primera vez el lenguaje ECMAScript.

Por este motivo, algunos programadores prefieren la denominación ECMAScript para referirse al lenguaje JavaScript. De hecho, JavaScript no es más que la implementación que realizó la empresa Netscape del estándar ECMAScript.

La organización internacional para la estandarización (ISO) adoptó el estándar ECMA-262 a través de su comisión IEC, dando lugar al estándar ISO/IEC-16262.

1.3 Especificaciones oficiales

ECMA ha publicado varios estándares relacionados con ECMAScript. En Junio de 1997 se publicó la primera edición del estándar ECMA-262. Un año después, en Junio de 1998 se realizaron pequeñas modificaciones para adaptarlo al estandar ISO/IEC-16262 y se creó la segunda edición.

La quinte edición del estándar ECMA-262 (publicada en junio de 2011) es la versión que utilizan los navegadores actuales y se puede consultar gratuitamente en http://www.ecma-international.org/publications/standards/Ecma-262.htm

1.4 Cómo incluir JavaScript en documentos XHTML

La integración de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript en las páginas web.

1.4.1 Incluir JavaScript en el mismo documento XHTML

El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda definir el código JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head>):

Para que la página XHTML resultante sea válida, es necesario añadir el atributo type a la etiqueta <script>. Los valores que se incluyen en el atributo type están estandarizados y para el caso de JavaScript, el valor correcto es text/javascript.

Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en el bloque de código, es necesario modificar todas las páginas que incluyen ese mismo bloque de código JavaScript.

1.4.2 Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos XHTML enlazan mediante la etiqueta <script>. Se pueden crear todos los archivos JavaScript que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript como necesite.

Ejemplo:

Archivo codigo.js

Documento XHTML

Además del atributo type, este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar. Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una misma página se pueden incluir tantas etiquetas <script> como sean necesarias.

Los archivos de tipo JavaScript son documentos normales de texto con la extensión .js, que se pueden crear con cualquier editor de texto como Notepad, Wordpad, EmEditor, UltraEdit, Vi, etc.

La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código XHTML de la página, que se puede reutilizar el mismo código JavaScript en todas las páginas del sitio web y que cualquier modificación realizada en el archivo JavaScript se ve reflejada inmediatamente en todas las páginas XHTML que lo enlazan.

1.4.3 Incluir JavaScript en los elementos XHTML

Este último método es el menos utilizado, ya que consiste en incluir instrucciones JavaScript dentro del código XHTML de la página:

El mayor inconveniente de este método es que ensucia innecesariamente el código XHTML de la página y complica el mantenimiento del código JavaScript. En general, este método sólo se utiliza para definir algunos eventos y en algunos otros casos especiales, como se verá más adelante.

1.5 Etiqueta noscript

Algunos navegadores no disponen de soporte completo de JavaScript, otros navegadores permiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso de JavaScript porque creen que así navegan de forma más segura.

En estos casos, es habitual que si la página web requiere JavaScript para su correcto funcionamiento, se incluya un mensaje de aviso al usuario indicándole que debería activar JavaScript para disfrutar completamente de la página. El siguiente ejemplo muestra una página web basada en JavaScript cuando se accede con JavaScript activado y cuando se accede con JavaScript completamente desactivado.

El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario cuando su navegador no puede ejecutar JavaScript. El siguiente código muestra un ejemplo del uso de la etiqueta <noscript>:

La etiqueta <noscript> se debe incluir en el interior de la etiqueta <body> (normalmente se incluye al principio de <body>). El mensaje que muestra <noscript> puede incluir cualquier elemento o etiqueta XHTML.

1.6 Glosario básico

Script: cada uno de los programas, aplicaciones o trozos de código creados con el lenguaje de programación JavaScript. Unas pocas líneas de código forman un script y un archivo de miles de líneas de JavaScript también se considera un script.

Sentencia: cada una de las instrucciones que forman un script.

Palabras reservadas: son las palabras (en inglés) que se utilizan para construir las sentencias de JavaScript y que por tanto no pueden ser utilizadas libremente. Las palabras actualmente reservadas por JavaScript son: break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.

1.7 Sintaxis

La sintaxis de un lenguaje de programación se define como el conjunto de reglas que deben seguirse al escribir el código fuente de los programas para considerarse como correctos para ese lenguaje de programación.

La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C. Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

No se tienen en cuenta los espacios en blanco y las nuevas líneas: como sucede con XHTML, el intérprete de JavaScript ignora cualquier espacio en blanco sobrante, por lo que el código se puede ordenar de forma adecuada para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas líneas, etc.)

Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis de las etiquetas y elementos XHTML. Sin embargo, si en una página XHTML se utilizan indistintamente mayúsculas y minúsculas, la página se visualiza correctamente, siendo el único problema la no validación de la página. En cambio, si en JavaScript se intercambian mayúsculas y minúsculas el script no funciona.

No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo de dato que almacenará. De esta forma, una misma variable puede almacenar diferentes tipos de datos durante la ejecución del script.

No es necesario terminar cada sentencia con el carácter de punto y coma (;): en la mayoría de lenguajes de programación, es obligatorio terminar cada sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo, es conveniente seguir la tradición de terminar cada sentencia con el carácter del punto y coma (;).

Se pueden incluir comentarios: los comentarios se utilizan para añadir información en el código fuente del programa. Aunque el contenido de los comentarios no se visualiza por pantalla, si que se envía al navegador del usuario junto con el resto del script, por lo que es necesario extremar las precauciones sobre la información incluida en los comentarios.

JavaScript define dos tipos de comentarios: los de una sola línea y los que ocupan varias líneas.

Ejemplo de comentario de una sola línea:

Los comentarios de una sola línea se definen añadiendo dos barras oblicuas (//) al principio de la línea.

Ejemplo de comentario de varias líneas:

/* Los comentarios de varias líneas son muy útiles
cuando se necesita incluir bastante información
en los comentarios */
console.log ( "mensaje de prueba" ) ;

Los comentarios multilínea se definen encerrando el texto del comentario entre los símbolos /* y */.

1.8 Posibilidades y limitaciones

Desde su aparición, JavaScript siempre fue utilizado de forma masiva por la mayoría de sitios de Internet. La aparición de Flash disminuyó su popularidad, ya que Flash permitía realizar algunas acciones imposibles de llevar a cabo mediante JavaScript.

Sin embargo, la aparición de las aplicaciones AJAX programadas con JavaScript le ha devuelto una popularidad sin igual dentro de los lenguajes de programación web.

JavaScript fue diseñado de forma que se ejecutara en un entorno muy limitado que permitiera a los usuarios confiar en la ejecución de los scripts. De esta forma, los scripts de JavaScript no pueden comunicarse con recursos que no pertenezcan al mismo dominio desde el que se descargó el script. Los scripts tampoco pueden cerrar ventanas que no hayan abierto esos mismos scripts. Las ventanas que se crean no pueden ser demasiado pequeñas ni demasiado grandes ni colocarse fuera de la vista del usuario (aunque los detalles concretos dependen de cada navegador).

Además, los scripts no pueden acceder a los archivos del ordenador del usuario (ni en modo lectura ni en modo escritura) y tampoco pueden leer o modificar las preferencias del navegador.

Por último, si la ejecución de un script dura demasiado tiempo (por ejemplo por un error de programación) el navegador informa al usuario de que un script está consumiendo demasiados recursos y le da la posibilidad de detener su ejecución.

A pesar de todo, existen alternativas para poder saltarse algunas de las limitaciones anteriores. La alternativa más utilizada y conocida consiste en firmar digitalmente el script y solicitar al usuario el permiso para realizar esas acciones.

# data[].attributes.attachment_link.description
JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en el lado del cliente, implementado como parte de un navegador web permitiendo crear interacción con el usuario y páginas web dinámicas, aunque actualmente es posible ejecutar JavaScript en el propio servidor ( NodeJS).

# data[].attributes.attachment_link.readable_text
Desde que se creó... JavaScript se ha convertido en la auténtica revolución de la programación. Y es que no solo se usa por la web, sino que podemos encontrarlo prácticamente en todas partes. ¡Hasta en el espacio!

Como lo oyes.

Y es que JavaScript es el único lenguaje de programación que funciona en los navegadores de forma nativa y por eso puede usarse como complemento del HTML o el CSS. ¡Una pasada!

Así que si la programación forma parte de tu día a día tienes que dominarlo sí o sí.

En este artículo te contamos sus orígenes, sus principales características, sus usos... ¡Y mucho más!

¿Qué es JavaScript?

JavaScript lo definimos como un lenguaje de programación que te da la posibilidad de añadirle funciones sumamente complejas a tu sitio web. En muchas ocasiones las páginas se conforman con mostrar solo la información sin hacer énfasis en la interactividad con el usuario.

Con este lenguaje mejorarás la experiencia del usuario a través de actualizaciones de contenido, animación de gráficos en 2D y 3D yreproduce videos en todos los formatos.

De esta manera el cliente tendrá una experiencia integral y las probabilidades de que compre tu producto aumentarán significativamente.

Se suele utilizar del lado del usuario mediante un navegador web para mejorar la interfaz del cliente y crear sitios 100% dinámicos. Es así como en la actualidad, parte de sus funciones están en los documentos PDF y otras aplicaciones de escritorio que utilizas en tu día a día.

Los orígenes de JavaScript

Antes de avanzar en el funcionamiento de JavaScript primero tienes que saber cuáles son los orígenes de este lenguaje de programación.

La verdad es que JavaScript comenzó a principios de los años 90, cuando gracias a la aparición de los navegadores los usuarios empezaron a usar la internet para interactuar con las webs que existían en esa época.

Para ese momento todo era muy lento ya que cada una de las conexiones se ejecutaban a través de líneas que provocaban múltiples problemas, así que cuando el usuario mandaba una información incorrecta tardaba mucho tiempo detectarlo.

Fue así como algunos programadores comenzaron a pensar en diversas soluciones para mejorar la experiencia del usuario, de forma que pudieran aplicarlo en juegos y facilitaran la tarea de los desarrolladores. Eso sí, todo tenía que ejecutarse fuera del estándar.

De esta forma, el programador Brenan Eich empezó a agregar tareas del servidor al navegador en una versión actualizada del famoso Netscape Navigator 2.0 en 1995. A esta actividad se le dió el nombre de Livescript pero cambió a JavaScript justo cuando Netscape fue vendido a Sun Microsystems.

A partir de aquí, este lenguaje se transformó en un estándar donde cada uno de los navegadores más poderosos del momento empezaron a usarlo, lo que hizo que JavaScript se convirtiera en un proyecto compatible con todos.

5 Características de JavaScript

Es cierto que existen muchos lenguajes de programación. Sin embargo, JavaScript tiene una serie de características que lo diferencian de las demás opciones que hay en el mercado. Veamos algunos de ellos a continuación:

1. Es imperativo y estructurado

Lo más importante de JavaScript es que es compatible con casi toda la estructura del lenguaje C, desde los bucles for hasta en las secuencias y .

Por lo tanto, si quieres aprender sobre este lenguaje, puedes echarle un vistazo a la estructura de C para que entiendas cómo es su funcionamiento y así avanzarás más rápido.

2. Es dinámico

Otra característica de JavaScript es que es dinámico, lo que significa que el tipo está asociado al valor y no a la variable.

Por esto es que X tiene la posibilidad de relacionarse a un número y luego a una cadena sin que exista problema alguno.

Ten esto en cuenta siempre antes de comenzar a trabajar.

3. Es objetual

La mayor parte del código de JavaScript está formado por arrays asociativos, aunque en los últimos tiempos han mejorado gracias a la inclusión de prototipos.

De esta forma, todas las propiedades y sus valores pueden ser desarrollados, modificados o eliminados en tiempo real, mientras que las propiedades de un objeto pueden enumerarse mediante la instrucción de bucle for in.

4. Es prototípico

Una de las características más importantes de JavaScript es que usa prototipos en vez de clases cuando utiliza herencias, lo que lo diferencia de cualquier otro lenguaje de programación.

Así es como ahora puedes emular muchas de las funciones de los lenguajes orientados a objetos y que usan prototipos tradicionales.

5. Depende de su entorno de ejecución

Por otro lado, JavaScript depende exclusivamente de su entorno de ejecución para ofrecer métodos y alternativas para que los scripts puedan interactuar con el mundo.

Usos de JavaScript en el desarrollo web en la actualidad

Si eres un programador web no hay herramienta más poderosa para crear tus proyectos que JavaScript. Los desarrolladores en la actualidad lo usan para agregar interactividad a la web junto a otras funciones audiovisuales que mejorarán significativamente la experiencia del usuario.

Lo que llama la atención es que al principio, este lenguaje se usaba solo para desarrollar la interfaz de la web, pero gracias a sus últimas actualizaciones se ha convertido en uno de los lenguajes más poderosos de la actualidad.

Esto ha hecho que más del 90% de las páginas web utilicen su código en estos momentos. Descubre algunos de sus usos más comunes:

1. Interactividad front end

Lo primero que te permite hacer JavaScript es mejorar la interactividad de la interfaz principal, a lo que se le denomina front end.

¿Cuántas veces has ingresado a una web aburrida donde no te muestra ni imágenes o botones sobre las soluciones que te propone? solo se conforman con la información y por supuesto esto se ve reflejado en los resultados finales.

En este sentido, JavaScript te da la posibilidad de agregar diversos botones y elementos multimedia que cambiarán por completo tu experiencia a la hora de ingresar a la web. Échale un vistazo a todo lo que te ofrece y lleva tu proyecto al siguiente nivel.

2. Aplicaciones web

Una de las razones por la que nos encanta JavaScript es porque no solo te ayuda a optimizar tu sitio web, sino que también te da soluciones para tus apps móviles.

El funcionamiento es exactamente igual, solo que ahora aplicará todos sus estándares en los dispositivos móviles.

De esta manera, con este lenguaje podrás crear un diseño atractivo y 100% responsive, una de las claves de las plataformas digitales de mayor éxito en la actualidad.

3. Juegos de navegador

Una de las tendencias que más han aumentado en los últimos tiempos es la de los juegos de navegador.

Piénsalo por un momento: no todas las personas tienen la capacidad económica de comprar un ordenador gamer que puede costar hasta 2.000 euros. Pero sí pueden abrir su navegador y ejecutar cualquier juego sencillo que los entretenga en su día a día.

Con JavaScript podrás crear una plataforma de este tipo, lo que te ayudará a atraer nuevos usuarios a tu proyecto digital.

4. Desarrollo backend

JavaScript es uno de los lenguajes de programación más completos de la actualidad y se demuestra ya que puedes gestionar el backend de sitios de escritorio o apps móviles.

Este concepto lo definimos como todo lo que ocurre detrás de la pantalla, es decir, aquello que el usuario no ve. Por lo tanto, este lenguaje te ayudará a mejorar la configuración del proyecto para que tenga un comportamiento más óptimo ante el usuario.

¿Cómo añadir JavaScript a tu sitio?

¿Estás decidido a agregar JavaScript a tu sitio? Pues déjanos decirte que es una de las mejores decisiones que puedes tomar, y es que es la manera ideal de crear una experiencia gratificante ante el usuario.

Lo más interesante es que es muy sencillo, solo necesitas tus documentos JavaScript desde tus archivos html, un proceso que es similar a cuando agregas css a html.

Allí encontrarás una etiqueta denominada "script" que te permite vincular a JavaScript todos los documentos que tu código puede utilizar para manipular el css y el html en el sitio.

No obstante, lo más importante es que evalúes si tu navegador soporta funciones de este lenguaje ya que existen algunos pocos que aún no se han actualizado.

Bibliotecas de JavaScript

Sí, es verdad que JavaScript es uno de los lenguajes más fáciles de usar, pero hay momentos en los que encontrarás dificultades a la hora de programar su código.

Esto es normal y ocurre en casi todos los lenguajes y una de las soluciones podrían ser las bibliotecas. Ellas pueden mejorar la rapidez y claridad de tu código para elevar su eficiencia al máximo.

Presta atención a las dos bibliotecas más utilizadas del momento:

1. Biblioteca Jquery

No cabe duda de que la biblioteca más popular en la actualidad de JavaScript es jquery gracias a su facilidad de uso y el tiempo que tiene en el mercado, convirtiéndola en una herramienta que genera confianza en el usuario.

Nos encanta el hecho de que agrega nuevas funciones y mejora la eficiencia de todas las líneas de código del programa.

2. Biblioteca React

En comparación a jquery, esta biblioteca tiene menos tiempo en el mercado pero se ha ganado el respeto de la gente ya que facilita el desarrollo de apps móviles.

Se diferencia de otras alternativas en que tiene un sinfín de colaboradores externos de código abierto que agrega, cambia y dan mantenimiento a la biblioteca.

No obstante, debes tener en cuenta que trabaja de forma diferente a otras herramientas, así que tienes que estudiarlo bien antes de empezar a trabajar.

4 Ventajas de JavaScript

JavaScript pone a tu disposición una serie de ventajas que no puedes dejar de lado si quieres desarrollar una web que se convierta en la máquina de ventas de tu negocio.

Descubre algunas de ellas a continuación:

1. Sencillo de aprender

No podíamos comenzar de otra manera que no fuera con lo fácil que es aprender JavaScript.

A diferencia de otros lenguajes, JavaScript es sumamente sencillo, de hecho, es posible que aprendas a pesar de que nunca hayas programado un código en tu vida.

Lo importante es aprender los fundamentos del área ya que todos los lenguajes lo manejan de la misma manera. Además, tiene muchas similitudes con C, así que si ya tienes conocimientos en este lenguaje estarás más cerca del éxito.

2. Ejecuta las funciones de inmediato

Imagina que vas navegando por tu web como cualquier otro usuario y detectas una falla en el proyecto que podría afectar los resultados del negocio a corto plazo. Lo ideal es resolverlo de una vez y es allí donde aparece JavaScript.

Este lenguaje te permite ejecutar los cambios de inmediato, así que no tienes nada que perder.

3. Múltiples opciones de efectos visuales

No podemos ignorar el hecho de que los efectos visuales son uno de los elementos más relevantes de cualquier web.

Una página puede ofrecer contenido de valor, pero si el diseño es muy básico el usuario se irá del proyecto e ingresará a otro sitio que sea más agradable.

En este sentido, JavaScript se perfila como una solución ideal ya que te da múltiples alternativas de efectos visuales, desde videos, mapas interactivos hasta botones.

Aplícalo y descubre la diferencia.

4. Soportado por los navegadores más importantes

Por último y no menos importante tenemos el hecho de que JavaScript es soportado por varios de los navegadores más comunes de la actualidad.

No sirve de mucho tener un lenguaje de programación que sea muy bueno pero que solo lo soporte uno o dos plataformas

Ahora te podrás enfocar en las necesidades del usuario y dejarás de lado los aspectos técnicos ya que tienes el respaldo de JavaScript, una de las mejores opciones para desarrollar tu web en la actualidad.

Esperamos que con este artículo hayas entendido todo lo que tiene para ti y cómo puedes aprovecharlo.

Es hora de que dejes de lado viejos paradigmas y utilices las herramientas que están marcando la pauta en la actualidad.

¿Qué otras ventajas destacarías de JavaScript?

# data[].attributes.attachment_link.description
Desde que se creó... JavaScript se ha convertido en la auténtica revolución de la programación. Y es que no solo se usa por la web, sino que podemos encontrarlo prácticamente en todas partes. ¡Hasta en el espacio! Como lo oyes.

# data[].attributes.attachment_link.title
Apunte c++ 2023  EEST - Lab Programación

# data[].attributes.attachment_link.readable_text
¿Alguna vez te has preguntado cómo funcionan las páginas web interactivas y por qué son tan atractivas? Existe un lenguaje de programación que ha revolucionado la web, y su nombre es JavaScript.

En este artículo, descubrirás todo lo que necesitas saber sobre este lenguaje: qué es JavaScript, su historia, su relación con TypeScript y, lo más importante, para qué sirve.

¡Continúa leyendo y adéntrate en el fascinante mundo de JavaScript!

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que permite agregar interactividad y dinamismo a las páginas web.

Con JavaScript, los desarrolladores pueden crear sitios web más atractivos y funcionales, ya que permite la manipulación del contenido de la página, la comunicación con el servidor y la realización de cálculos en tiempo real, entre otras cosas.

Diferencias entre HTML, CSS y JavaScript

Para entender mejor qué es JavaScript, es útil diferenciarlo de otros dos lenguajes de programación relacionados con la creación de sitios web: HTML y CSS.

1. HTML (Hypertext Markup Language) es el lenguaje que se utiliza para estructurar el contenido de una página web. Define elementos como encabezados, párrafos, listas y enlaces.

2. CSS (Cascading Style Sheets) se encarga del diseño y estilo de la página web. Permite aplicar colores, fuentes, tamaños y espaciado, entre otros aspectos visuales.

3. JavaScript agrega interactividad y dinamismo a la página web, permitiendo que el usuario interactúe con el contenido y realice acciones sin necesidad de recargar la página.

Historia de JavaScript

JavaScript fue creado en 1995 por Brendan Eich, quien trabajaba en la empresa Netscape Communications. En aquel entonces, se buscaba un lenguaje de programación fácil de aprender y usar que permitiera a los desarrolladores crear páginas web interactivas.

Eich desarrolló el primer prototipo de JavaScript en tan solo 10 días, y su éxito fue tal que pronto se convirtió en un estándar en la industria.

En 1997, JavaScript fue adoptado como un estándar por la organización ECMA International, que publicó la especificación oficial del lenguaje llamada ECMAScript.

Desde entonces, ECMAScript ha pasado por varias versiones y actualizaciones, y JavaScript se ha mantenido como el lenguaje de programación basado en ECMAScript más popular y ampliamente utilizado en todo el mundo.

¿Para qué sirve JavaScript?

JavaScript es fundamental en el desarrollo web y tiene numerosas aplicaciones. Veamos algunas de las más comunes:

Interacción con el usuario

Una de las funciones principales de JavaScript es permitir la interacción entre el usuario y la página web. Esto se logra mediante la manipulación del Document Object Model (DOM), que es una representación estructurada de los elementos de la página.

Con JavaScript, es posible crear elementos interactivos como botones, formularios, menús desplegables y carruseles de imágenes, entre otros.

Validación de formularios

JavaScript es muy útil para validar la información ingresada por el usuario en un formulario antes de enviarla al servidor.

Esto permite detectar errores y solicitar al usuario que corrija la información antes de enviarla, lo que reduce la carga en el servidor y mejora la experiencia del usuario.

Animaciones y efectos visuales

Con JavaScript, es posible crear animaciones y efectos visuales que hacen que las páginas web sean más atractivas y dinámicas.

Por ejemplo, se pueden realizar transiciones suaves entre páginas, crear efectos de parallax scrolling y animar elementos de la página al hacer scroll o al pasar el cursor por encima.

Comunicación con el servidor

JavaScript permite la comunicación entre el navegador y el servidor sin necesidad de recargar la página. Esto se logra mediante el uso de AJAX (Asynchronous JavaScript and XML), que permite enviar y recibir información en segundo plano.

Esto es especialmente útil en aplicaciones web como redes sociales, correo electrónico y sistemas de gestión de contenidos.

Aplicaciones web de una sola página (SPA)

Una de las tendencias en el desarrollo web es la creación de aplicaciones web de una sola página o SPA (Single Page Application). Estas aplicaciones cargan una única página HTML y luego utilizan JavaScript para actualizar dinámicamente el contenido según las acciones del usuario.

Esto permite una experiencia de navegación más rápida y fluida, similar a la de una aplicación de escritorio.

¿Qué es TypeScript?

TypeScript es un lenguaje de programación que fue creado por Microsoft en 2012. Es un superset de JavaScript, lo que significa que incluye todas las características de JavaScript y algunas adicionales, como la posibilidad de usar tipado estático.

El tipado estático permite a los desarrolladores definir el tipo de datos que una variable puede almacenar, lo que ayuda a detectar errores antes de que el código se ejecute.

Aunque TypeScript no es tan conocido como JavaScript, su popularidad ha ido en aumento debido a que ofrece algunas ventajas en cuanto a la detección temprana de errores y la facilidad de mantenimiento del código.

Sin embargo, es importante mencionar que TypeScript no reemplaza a JavaScript, sino que complementa sus características y permite a los desarrolladores escribir código más seguro y eficiente.

Empezando con JavaScript

Ahora que conoces qué es JavaScript y para qué sirve, es momento de aprender cómo utilizarlo. Para ello, sigue estos pasos:

1. Añade JavaScript a tu página web

Para agregar JavaScript a tu página, debes incluir el siguiente código en tu archivo HTML:

Puedes colocar este código en cualquier parte de tu archivo HTML, aunque generalmente se coloca al final del cuerpo (<body>).

2. Variables y tipos de datos

En JavaScript, podemos almacenar información en variables. Para crear una variable, utilizamos la palabra clave var, let o const, seguida del nombre de la variable y su valor.

Por ejemplo:

Existen varios tipos de datos en JavaScript, como números, cadenas de texto (strings), objetos y más.

A continuación, algunos ejemplos:

Números: var numero = 42;

Strings: var texto = "¡Hola, mundo!";

Objetos: var persona = {nombre: "Juan", edad: 25};

Arrays: var colores = ["rojo", "verde", "azul"];

3. Operadores y expresiones

Los operadores nos permiten realizar operaciones matemáticas, comparaciones y asignaciones en JavaScript.

Algunos ejemplos de operadores son:

Las expresiones son combinaciones de valores, variables y operadores que JavaScript evalúa para obtener un resultado.
Ejemplo:
4. Funciones

Las funciones son bloques de código que podemos llamar múltiples veces para realizar una tarea específica. Para crear una función en JavaScript, utilizamos la palabra clave function, seguida del nombre de la función, los parámetros y el cuerpo de la función.
Por ejemplo:
5. Condicionales y bucles

Los condicionales nos permiten ejecutar diferentes bloques de código dependiendo de ciertas condiciones.

Por ejemplo, con la estructura if...else:

Los bucles nos permiten repetir un bloque de código mientras se cumpla una condición.

Por ejemplo, el bucle for:

6. Eventos y manipulación del DOM

El DOM (Document Object Model) es la representación en árbol de los elementos de una página web. Con JavaScript, podemos manipular el DOM para cambiar el contenido, los atributos y los estilos de los elementos. Por ejemplo, podemos cambiar el contenido de un elemento con el siguiente código:

Los eventos son acciones que ocurren en la página, como hacer clic en un botón o cargar una imagen. Podemos utilizar JavaScript para "escuchar" estos eventos y ejecutar funciones cuando ocurran.
Ejemplo:
Conclusión

JavaScript es un lenguaje de programación esencial en el mundo del desarrollo web. Ha revolucionado la forma en que creamos y experimentamos las páginas web, permitiendo interactividad, validación de formularios, animaciones y comunicación con el servidor sin recargar la página.

Ahora que conoces qué es JavaScript, su historia, su relación con TypeScript y para qué sirve, estás listo para adentrarte en el mundo del desarrollo web y crear sitios web interactivos y atractivos.

No importa si eres un principiante o un experto en programación, JavaScript es una herramienta fundamental que te permitirá llevar tus proyectos al siguiente nivel. ¡Anímate a explorar sus posibilidades y transforma la web con tus ideas!

# data[].attributes.attachment_link.title
▷ ¿Qué es JavaScript? → 【 Tutorial de JavaScript 】

# data[].attributes.attachment_link.description
¿Alguna vez te has preguntado cómo funcionan las páginas web interactivas y por qué son tan atractivas? Existe un lenguaje de programación que ha revolucionado la web, y su nombre es JavaScript. En este artículo, descubrirás todo lo que necesitas saber sobre este lenguaje: qué es JavaScript, su historia, su relación con TypeScript y, lo más importante, para qué sirve.

# data[].attributes.attachment_link.description
Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.

# data[].attributes.attachment_link.readable_text
Grokking Modern JavaScript, In The Wild

Today, tools like Babel have made it commonplace to seeES2015, ES2016, ES2017, ES2018, and ES2019 language updates/proposals in babelified source code. These compounding language changes can make it difficult to learn something like React, Apollo GraphQL, or Webpack.

This book aims to alleviate this problem by providing a curated selection of the commonly used language updates, tersely explained, to lessen this indirection. Thus, after studying the material in this book grokking new JavaScript code while learning JavaScript frameworks and tools, should be much more comfortable.

Written For:

The contents of this book are for developers who are working in a codebase using modern React, Vue, or Angular code and find recent JavaScript language updates/proposals to be causing too much indirection. And or, developers who want to drill into memory the latest and most commonly used JavaScript updates.

ES2015+ Enlightenment is not a rudimentary read on the JavaScript language. The content in this book attempts to take a developer with ES3 and ES5 knowledge and make them more knowledgeable about ES2015+ and the implications of modern changes to the language on JavaScript tools and frameworks.

How to Use/Read This Book:

First off, this is a mix between a book, a reference, and cheatsheet. My intention in writing is to shine a light on ES5+ language changes in a tersely and helpfully format. To be clear this is not a long form book on the JavaScript language. Or, a detailed reference. Consider this an elaborate cheatsheet with runnable code purposefully curated for those who know ES3 but need to master ES5+.

Second, this is a web book. A lot of contexts can be gained by just clicking on links in this book. If you ever feel in need of more context use the links in the text.

How to Use/Read The Code Examples:

Try and view the code examples as an extension of the words. First, read and re-read the words. Then read the code, especially the code comments, from top to bottom as if they are part of the surrounding paragraphs. The goal should be to grok the code until no questions remain as to what the code example is doing and expressing.

While Using/Reading the book remember, by design:

1. The words and code comments are intentionally terse with the goal of code comprehension without long-winded and exhaustive explanations.

2. The code examples are contrived to reveal the nature of the code. Focus on what the code is doing and making sure you understand it, potentially over my words.

3. The book is a mix of a mini book, a reference, and cheatsheet. Expect it to feel like one of these or all of these at the same time.

Contribute content, suggestions, and fixes on github:
https://github.com/FrontendMasters/javascript-enlightenment
Chapter 1 : ECMAScript 5 (aka ES5) Recap

1.1 : ES5 Browser and Node Compatibility

Unless you have to support an older JavaScript engine/runtime (e.g. IE8) you are safe to assume most modern JavaScript engines/runtimes support ES5.

1.2 : New ES5 String Method

The ES5 .trim() method removes whitespace from both ends of a string and creates a new string.

 var myString = ' Some Tabs and Spaces '; console.log(myString.length); // logs 28 var myNewString = myString.trim(); // trim it console.log(myNewString); // logs 'Some Tabs and Spaces' console.log(myNewString.length); // logs 20 // Note: this method does not mutate a value it creates a new value console.log(myString, myString.length); // This still is, ' Some Tabs and Spaces '

You should consider "Whitespace" to mean in general; spaces, tabs, and non-breaking spaces used in a string.

Specifically trim() removes:

\U0009 character tabulation

\U000A line feed

\U000B line tab

\U000C form feed

\U000D carriage return

\U0020 space

\U3000 ideographic space

\UFEFF zero-width non-breaking space

1.3 : New ES5 Array Static Methods

ES5 added the static Array method, Array.isArray().

 console.log(Array.isArray([1,2,3])) //logs true // Note: does not work on Array-like objects console.log(Array.isArray({length: 3, 0:1, 1:2, 2:3})) //logs false

Notes:

1.4 : New ES5 Array Methods

ES5 added the following Array methods (i.e. higher-order iteration functions):

The [].some() method will start testing values in array, until a test returns true, then the function passed to .some() immediately returns true, otherwise the function returns false (i.e. the first truthy value found will result in the function immediately returning true and potentially this could mean not all tests are run).

 // Check if one or more items in the array is bigger than or equal to 2 var someMethod = [1, 2, 3].some(function(value, valueIndex, wholeArray){ return value >= 2; }); console.log(someMethod) // logs true because the array contains a value that is greater than or equal to 2

The [].every() method will start testing values in array, until a test returns false, then the function passed to .every() immediately returns false, otherwise the function returns true (i.e. the first falsy value found will result in the function immediately returning false and potentially this could mean not all tests are run).

 // Check if every item in the array is bigger than or equal to 2 var everyMethod = [1, 2, 3].every(function(value, valueIndex, wholeArray){ return value >= 2; }); console.log(everyMethod) // logs false because the array contains a value that is less than 2

The [].filter() method will return a new Array containing all the values that pass (i.e. are true) the filtering test.

 var myArray = [1,2,3]; // filter out any value in the array that is not bigger than or equal to 2 var FilteredArray = myArray.filter(function(value, valueIndex, wholeArray){ return value >= 2; }); console.log(FilteredArray) // logs [2,3] // Note: filter() returns a new Array, myArray is still equal to [1,2,3]

The [].forEach() method executes a provided function for each value in the array.

 // log to the console each value, valueIndex, and wholeArray passed to the function ['dog','cat','mouse'].forEach(function(value, valueIndex, wholeArray){ console.log('value = '+value+' valueIndex = '+valueIndex+' wholeArray = '+wholeArray); /** logs: "value=dog valueIndex=0 wholeArray=dog,cat,mouse " "value=cat valueIndex=1 wholeArray=dog,cat,mouse " "value=mouse valueIndex=2 wholeArray=dog,cat,mouse " **/ });

The [].indexOf() method searches an array for the first value matching the value passed to indexOf(), and returns the index of this value.

 // get index of first 'cat' console.log(['dog','cat','mouse', 'cat'].indexOf('cat')); // logs 1 // Note: Remember the index starts at 0

The [].lastIndexOf() method searches an array for the last value matching the value passed to [].lastIndexOf(), and returns the index of this value.

 // get index of last 'cat' console.log(['dog','cat','mouse', 'cat'].lastIndexOf('cat')); // logs 3 // Note: Remember the index starts at 0

The [].map() method executes a provided function for each value in the array, and returns the results in a new array.

 var myArray = [5, 15, 25]; // add 10 to every number in the array var mappedArray = myArray.map(function(value, valueIndex, wholeArray){ return value + 10; }); console.log(mappedArray) // logs [15,25,35] // Note: map() returns a new Array, myArray is still equal to [5, 15, 25]

The [].reduce() method runs a function that passes the return value to the next iteration of the function using values in the array from left to right and returning a final value.

 // add up numbers in array from left to right i.e. (((5+5) +5 ) + 2) var reduceMethod = [5, 5, 5, 2].reduce(function(accumulator, value, valueIndex, wholeArray){ return accumulator + value; }); console.log(reduceMethod) // logs 17 /** reduce also accepts a second parameter that sets the first accumulator value, instead of using the first value in the array. **/ // add up numbers in array from left to right, but start at 10 i.e. ((((10+5) +5 ) +5 ) + 2) var reduceMethod = [5, 5, 5, 2].reduce(function(accumulator, value, valueIndex, wholeArray){ return accumulator + value; // first iteration of func accumulator is 10 not 5 }, 10); console.log(reduceMethod) // logs 27

The [].reduceRight() method runs a function that passes the return value to the next iteration of the function using values in the array from right to left and returning a final value.

 // add up numbers in array from left to right i.e. (((2+5) +5 ) + 5) var reduceRightMethod = [5, 5, 5, 2].reduceRight(function(accumulator, value, valueIndex, wholeArray){ return accumulator + value; }); console.log(reduceRightMethod) // logs 17 /** reduce also accepts a second parameter that sets the first accumulator value, instead of using the first value in the array. **/ // add up numbers in array from left to right, but start at 10 i.e. ((((10+2) + 5 ) +5 ) + 5) var reduceRightMethod = [5, 5, 5, 2].reduceRight(function(accumulator, value, valueIndex, wholeArray){ return accumulator + value; // first iteration of func accumulator is 10 not 5 }, 10); console.log(reduceRightMethod) // logs 27

Notes:

1.5 : New ES5 Getters and Setters (aka Accessors Descriptors or Computed Properties)

ES5 adds to Objects computed properties via the keywords get and set. This means that Objects can have properties, that are methods, but don't act like methods (i.e you don't invoke them using()). In short by labeling a function in an object with get or set one can invoke the backing property function on a property, by merely accessing the property, without using innovating brackets.

The example below demonstrates the nature of getter and setter properties:

 var obj = { get RunsWhenAccessed(){ console.log('you accessed the property RunsWhenAccessed'); }, set RunsWhenSet(newValueBeingSet){ console.log('you set the property RunsWhenSet to : ' + newValueBeingSet); } } // access the RunsWhenAccessed property and the backing property function fires obj.RunsWhenAccessed; // logs 'you accessed the property RunsWhenAccessed' // access and set the RunsWhenSet property and the backing property function fires obj.RunsWhenSet = 'foo'; // logs 'you set the property RunsWhenSet to : foo' // note I am setting a value that becomes an argument and not calling a function using brackets

Don't over think getters and setters, they are simply a property who's value is determined by running a backing property function and the function is invoked by accessing or setting the property.

 var person = { firstName : '', lastName : '', get name() { return this.firstName + ' ' + this.lastName; }, set name(str) { var n = str.split(/\s+/); this.firstName = n.shift(); this.lastName = n.join(' '); } } // set name, but store first and last separately person.name = 'Cody Lindley'; // get name, returns firstName and LastName combined console.log(person.name); // logs 'Cody Lindley'

Notes:

1.6 : New ES5 Object Static Methods

ES5 added the Object.create() method so objects could be created and their prototypes easily setup. Object.getPrototypeOf() was added to easily get an objects prototype.

 // setup an object to be used as the prototype to a newly created myObject object below var aPrototype = { foo: 'bar', getFoo: function(){ console.log(this.foo); } } // create a new myObject, setting the prototype of this new object to aPrototype var myObject = Object.create(aPrototype); // logs 'bar' because myObject uses aPrototype as its prototype, it inherits getFoo() myObject.getFoo(); // logs 'bar' // get a reference to the prototype of myObject, using getPrototypeOf() console.log(Object.getPrototypeOf(myObject) === aPrototype); //logs true

ES5 added Object.defineProperty(), Object.defineProperties(), and Object.getOwnPropertyDescriptor() so object properties can be precisely defined (using descriptors) and retrieved. Descriptors provide an attribute that describe a property in an object. The attributes (i.e descriptors) that each property can have are: configurable, enumerable, value, writable, get, and set.

 // create an object with a property and value const myObject = { prop1: 'value1' } // get the default descriptors for the prop1 property in myObject. console.log(Object.getOwnPropertyDescriptor(myObject,'prop1')); /** the above console logs: [object Object] { configurable: true, enumerable: true, value: "value1", writable: true } Note that get and set are undefined by default **/ // add a property, 'value2' with descriptors to myObject using Object.defineProperty() Object.defineProperty(myObject, 'prop2', { value: 'value2', writable: true, enumerable: true, configurable: true, }); // get the descriptors for the prop2 property. console.log(Object.getOwnPropertyDescriptor(myObject,'prop2')); // add multiple properties ('prop3' & 'prop4') with // descriptors to myObject using Object.defineProperties() Object.defineProperties(myObject, { prop3: { enumerable: true, configurable: true, value: 'value3' }, prop4: { enumerable: true, configurable: true, // Note that value and write properties are not added when using the properties set and get set: (newValue) => { console.log('you set the property prop4 to : ' + newValue); }, get: () => { console.log('you accessed the property prop4'); return 'prop4'; // the get returns the value for prop4 unlike using, value: 'value4' } } }); // get the descriptors for the prop3 and prop4 properties console.log(Object.getOwnPropertyDescriptor(myObject,'prop3')); console.log(Object.getOwnPropertyDescriptor(myObject,'prop4')); // Note that prop4's value is based on get and set, not value console.log(myObject.prop4);

Notes:

 // Create an object var myObject = Object.create(null); // no prototype used // Add prop to object created myObject.myObjectProp1 = 1; // Define a property using defineProperty() Object.defineProperty(myObject, 'myObjectProp2', { enumerable: false, value: 2 }); // Use keys() to get Array of all non-inherited, enumerable properties console.log(Object.keys(myObject)); // logs ["myObjectProp1"] // Use getOwnPropertyNames to get Array of all non-inherited properties including non-enumerable console.log(Object.getOwnPropertyNames(myObject)); // logs ["myObjectProp1", "myObjectProp2"]

ES5 provided three Object methods for protecting objects. They are:

1. Object.preventExtensions(): Stops properties from being added but not deleted.

2. Object.seal(): Stops properties from being added or configured (i.e. the configurable descriptor attribute for each property is changed tofalse).

3. Object.freeze(): Stops properties from being added, configured, or writable (i.e. theconfigurable andwritable descriptor attribute for each property is changed to false)

To compliment these three methods ES5 also added three Object methods for determining the type of protection an object is using. They are:

1. Object.isExtensible(): Boolean check if an object is extensible.

2. Object.isSealed(): Boolean checking if an object is sealed.

3. Object.isFrozen(): Boolean checking if an object is frozen.

1.7 : New ES5 bind() Function Method

ES5 added bind() and this new function method does not invoke a function but instead takes an existing function and from it creates a new function, yet to be called, with a specified value for this inside of the new function.

 window.name = 'John'; // Defined in the global scope var myObject = {name:'Bill'}; var greeting = function(){ // if the greeting function has a defined this that is not window i.e. global scope console.log(this !== undefined && this !== window ? this.name : window.name); }; // invoke greeting, where the this context for the greeting function is the global scope greeting(); //logs John because the value name is in the global scope // .bind() greetings function this value to myObject var bindGreetingToObject = greeting.bind(myObject); // this keyword now points to myObject, and not the window object. // invoke bindGreetingToObject with the this context being bound to myObject bindGreetingToObject(); //logs Bill because this value for bindGreetingToObject is bound to myObject

Notes:

1.8 : New ES5 use strict Mode

Adding, 'use strict' to the top of a JavaScript file or as the first line of a function body will change the language to a stricter version of JavaScript. Today, using strict mode isn't typically a decision to be made because ECMAScript modules are implicitly in strict mode. In other words, spinning up a version of say, create-react-app which uses ECMAScript modules will have'use strict' in play by default due to the fact that ECMAScript modules (i.e. import React from 'react';) uses strict mode implicitly. It is important you are aware of this fact. In other words, JavaScript modules give you strict mode by default.

1.9 : New ES5 JSON methods

JSON.parse() takes a JSON string and returns the JavaScript value(s) described by the string. In other words, JSON.parse() will convert a string of JavaScript in JSON format into real JavaScript values (i.e. Objects, Arrays, Strings, Numbers, Booleans etc...).

 var JSONValues = JSON.parse('{"name":"Bill","age":22}') // convert JSON string to JS values console.log(typeof JSONValues); // logs "object" console.log(JSONValues.name, JSONValues.age); // logs Bill, 22

JSON.stringify() takes JavaScript values and returns a string representing the values.

 var JSONString = JSON.stringify({ name: 'Bill', age: 2 }); // Convert JS Object to JSON String console.log(typeof JSONString) // logs "string" console.log(JSONString) // logs "{ "name": "Bill", "age":2} "

1.10 : New ES5 Syntax Changes

Trailing commas in Object literals are now ok:

 var myObject = { name: 'Bill', age: 12, // no syntax error }

Notes:

Reserved words can now be used as unquoted Object property keys:

 // no syntax error when using reserved keywords as property/keys on an object var myObject = { new: 'new', class: 'class', if: 'if', function: 'function' }

1.11 : From ES5 to ES2015. What?

ES2015 was first called ES6 because at the time an update to the 5th edition of ECMAScript would logically be title ECMAScript edition 6 or "ES6". However, a naming tweak for language updates/changes occurred in 2015. It was decided by TC39, the standardization group for JavaScript/ECMA-262, to release stage four proposals once a year (i.e. stage four are approved changes to the language). Given this change, new updates to the language moving forward would be given the titles ES2015 (i.e. ES6), ES2016, ES2017, ES2018 etc... . Basically, language changes/updates are semantically titled under the year in which the update/change becomes standardized.

Chapter 2 : Running ES2015+ (Compatibility, Compiling, and Polyfills)

2.1 : ES2015 Native Runtime Compatibility

In short, both modern day Node and modern web browser engines mostly have full support for ES2015 (starting with Node 6.14.4+, Edge 15, Chrome 47, Safari 10, and Firefox 54). However, things get complicated in terms of compatibility for ES2016+ and staged proposals. This is why a lot of developers side-step chasing compatibility and turn to polyfills and compilers. Polyfills plug JavaScript runtimes environments, at runtime, with newer unsupported API's while a compiler will transform newer unsupported syntax to previous versions of JavaScript (i.e. ES2015+ > ES5). This combination of polyfills and compiling allows developers to write ES2015+ JavaScript today while still supporting current and previous runtimes (i.e. Write new 2015+ JavaScript, transforming it using something like Babel, then it can run it in IE9 with polyfills).

2.2 : Running ES2015+ Using Online Tools

The simplest way to run ES2015+ code online (including staged proposals) is to use the online Babel REPL.

2.3 : Running ES2015+ locally

Notes:

2.4 : Compiling ES2015+ Development Syntax To Static ES5 Production Syntax

Because developers today don't want to wait for native support for newer ES2016, ES2017, ES2018 syntax and coming syntax proposals they will adopt a compiling step for JavaScript source code. A compiling step takes ES2015+ syntax, and potentially staged syntax proposals, and transforms newer/proposed syntax to ES5 syntax ( polyfill require for complete compatibility). For example, it can take arrow function syntax and convert it to ES5 syntax.

 // Compilers like Babel/TypeScript will take this: const myFunction = () => {}; // And turn it into this: var myFunction = function myFunction() {};

The most common compilers in use today are Babel and TypeScript. These compilers are routinely used as part of a build/bundling module process where ES2015+ source code and ES modules syntax are taken in and transformed to static ES5 production code (e.g. Webpack and Parcel exist to bundle assets, but they can also compile ES2015+ code found in JavaScript modules to ES5 when bundling).

Notes:

2.5 : Compiling ES2015+ Syntax Dynamically at Runtime

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="output"></div> <!-- Load ES2015+ Polyfill, core-js used by Babel polyfill --> <script src="https://unpkg.com/core-js-bundle@3.0.0-beta.3/minified.js"></script> <!-- Load Babel --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- Your custom script here --> <script type="text/babel"> // Arrow function from ES2015 const getMessage = () => "Hello World"; document.getElementById('output').innerHTML = getMessage(); // .flat() from staged 3 proposal works because of polyfill console.log([1, [2, 3], [4, 5]].flat()); </script> </body> </html>

Using Babel dynamically at runtime is generally not recommended for production but it does have a few use cases:

1. Sites like JSFiddle, JS Bin, the REPL on the Babel site, etc. These sites compile user-provided JavaScript in real-time.

2. Apps that embed a JavaScript engine such as V8 directly, and want to use Babel for compilation

3. Apps that want to use JavaScript as a scripting language for extending the app itself, including all the goodies that ES2015 provides.

4. Integration of Babel into a non-Node.js environment (ReactJS.NET, ruby-babel-transpiler, php-babel-transpiler, etc).

2.6 : Polyfill'ing JavaScript API's at Runtime

Polyfills are JavaScript code used to plug or fill runtime environments with newer non-syntax parts of the JavaScript language that it may be lacking. Below is an example of an Object.assign() polyfill that will check to see if the JavaScript runtime has Object.assign() and if not will add it to the runtime.

 // if Object.assign is missing then polyfill it. if (typeof Object.assign != 'function') { // Must be writable: true, enumerable: false, configurable: true Object.defineProperty(Object, "assign", { value: function assign(target, varArgs) { // .length of function is 2 'use strict'; if (target == null) { // TypeError if undefined or null throw new TypeError('Cannot convert undefined or null to object'); } var to = Object(target); for (var index = 1; index < arguments.length; index++) { var nextSource = arguments[index]; if (nextSource != null) { // Skip over if undefined or null for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to[nextKey] = nextSource[nextKey]; } } } } return to; }, writable: true, configurable: true }); }

Basically, JavaScript polyfills fill in newer missing API features if they are missing from the runtime. The babel-polyfill documentation offers the following explanation for polyfill'ing:

"You can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this." - Babel Docs

Polyfills are typically used in conjunction with compiling tools like Babel to offer full compatibility for both syntax and newer API features (i.e. syntax meaning something like:() => {} and API meaning something like Object.assign()). This is why Babel provides the babel-polyfill.

Chapter 3 : New ES2015+ Methods

3.1 : New Number Static Method (ES2015)

 console.log(Number.isInteger(0)); // logs true console.log(Number.isInteger(1)); // logs true console.log(Number.isInteger(0.1)); // logs false, has a fractional part console.log(Number.isInteger(Infinity)); // logs false console.log(Number.isInteger([1])); // logs false

3.2 : New String Methods (ES2015, ES2017)

ES2015 added ''.startsWith()and ''.endsWith(). These methods can check if a string begins or ends with a specific sub-string.

 // True or false does 'pre-funded' start with 'pre-' console.log('pre-funded'.startsWith('pre-')) // logs true // True or false does 'pre-funded' end with 'funded' console.log('pre-funded'.endsWith('funded')) // logs true

ES2015 added ''.includes(). This method will check if a string contains a specific sub-string.

 // True or false does 'pre-funded' include the sub string 'fund' console.log('pre-funded'.includes('fund')) // logs true

ES2015 added ''.repeat(). This method will take a string and return the same string repeated as many times as provided in the first argument.

 // Take the string 'He' and return a string containing 'He' repeated three times console.log('He'.repeat(3)) // logs 'HeHeHe'

ES2017 added ''.padStart() and ''.padEnd(). These methods will pad the beginning or end of a string with repeating non-breaking spaces (the default) or a specified string of characters. When padding you supply the final length of the entire string. Including the original string. The non-breaking spaces or specified string will fill in any of the characters not taken up by the original string.

 // Pad the start of 'GO!' with spaces so the total length of the string is 10, including 'GO!'. console.log('GO!'.padStart(10)) // logs ' GO!' // note how the ' ' repeated until a length of 10 was reached // Pad the start of 'GO!' with '.' so the total length of the string is 10, including 'GO!'. console.log('GO!'.padStart(10, '.')) // logs '.......GO!' // note how the '.' repeated until a length of 10 was reached // Pad the end of 'GO!' with spaces so the total length of the string is 10, including 'GO!'. console.log('GO!'.padEnd(10)) // logs 'GO! ' // note how the ' ' repeated until a length of 10 was reached // Pad the start of 'GO!' with '.' so the total length of the string is 10, including 'GO!'. console.log('GO!'.padEnd(10, '!')) // logs 'GO!!!!!!!!' // note how the '!' repeated until a length of 10 was reached

3.3 : New Array Static Methods (ES2015)

ES2015 added the Array.from() static method. This method will take Array-like values (objects with a length property and indexed values) or iterable values and convert them into Array values (iterable values are: String, Array, TypedArray, Map, and Set).

 // Array from Array-like values const myArray1 = Array.from({length: 2, 0: 'zero', 1:'one'}); console.log(myArray1); // logs ["zero", "one"] // Array from String (i.e. an iterable) const myArray2 = Array.from('foo'); console.log(myArray2); // logs ["f", "o", "o"] // Array from an Array (i.e. an iterable) const myArray3 = Array.from([1, 2, 3]) console.log(myArray3); // logs [1, 2, 3], well that is silly // Array from an Array (i.e. an iterable), where each item in the array is run through a function // The second argument to .from() can be a function called on each iterable const myArray4 = Array.from([1, 2, 3], item => item * item) console.log(myArray4); // logs [1, 4, 9]

ES2015 added the Array.of() static method. This method creates an Array from arguments. Unlike the array constructor it can handle a case like Array.of(5) resulting in [5] while Array(5) will result in [undefined, undefined, undefined, undefined, undefined].

 // create an array containing 5 values console.log(Array.of(5,{},undefined,[],'string')); /* logs: [5, [object Object] { ... }, undefined, [], "string"] */ // create an array containing 5 undefined values console.log(Array(5)); // works if only one argument is passed /* logs: [undefined, undefined, undefined, undefined, undefined] */ // create an array containing 2 numeric values, 5 and 4 console.log(Array(5,4)); /* logs: [5, 4] */

3.4 : New Array Methods (ES2015, ES2016)

ES2015/ES2016 added the [].findIndex(), [].find() and [].includes() methods. The[].find() method is used to find a specific value in an array and return that value.[].findIndex() is used to find a specific value and return its index in the array. Both use a testing function to iterate over the Array and return the first truthy value returned from the testing function. The[].includes() method is used to verify (true or false) if an array contains a specific value.

 const myArray = [10, 20, 30, 40]; // find and return the first value in the array that is greater than 20 console.log(myArray.find(function(item){ return item > 20})) // logs 30 // find and return the index of the first value in the array that is greater than 20 console.log(myArray.findIndex(function(item){ return item > 20})) // logs 2 // does myArray contain the value 30 console.log(myArray.includes(30)) // logs true

ES2015 added the [].keys(), [].values(), and [].entries() methods. The[].keys() method returns the keys from an Array as an Array iterator object. The[].values() method returns the values (i.e. the items) from an Array as an Array iterator object. And the[].entries() returns an Array iterator containing each item as a key-value array (i.e.[[0, item0], [1, item1]]).

 let myArray = ['item0', 'item1', 'item2']; // All of these log "[object Array Iterator] " console.log(myArray.keys().toString()); console.log(myArray.values().toString()); console.log(myArray.entries().toString()); // create an iterator containing the index's of an array (i.e. the key's) let myArrayKeys = myArray.keys(); console.log(myArrayKeys.next().value) // logs 0 console.log(myArrayKeys.next().value) // logs 1 console.log(myArrayKeys.next().value) // logs 2 // create an iterator containing the values from an array let myArrayValues = myArray.values(); console.log(myArrayValues.next().value) // logs "item0 " console.log(myArrayValues.next().value) // logs "item1 " console.log(myArrayValues.next().value) // logs "item2 " // create an iterator containing both the keys and the values, inside of an array let myArrayEntries = myArray.entries(); console.log(myArrayEntries.next().value) // logs [0, "item0"] console.log(myArrayEntries.next().value) // logs [1, "item1"] console.log(myArrayEntries.next().value) // logs [2, "item2"]

ES2015 added the [].copyWithin() method. This method shallow copies a range of items in an Array and then inserts the copies back into the same Array replacing items in the Array starting at a specific index.

 let myArray1 = [1,1,1,1,5,5,5,5]; // copy from index 4 to 6 and take the copies and start replacing at index 0 console.log(myArray1.copyWithin(0, 4, 6)); //logs [5, 5, 1, 1, 5, 5, 5, 5] // i.e. this will replace the values at index 0 and index 1 with copied values 5, 5 let myArray2 = [1,1,1,1,5,5,5,5]; // passing negative numbers to any of the parameters means start from the end of the array // copy from -4 index to -2 and take the copies and start replacing at index 2 console.log(myArray2.copyWithin(-6, -4, -2)); //logs [1, 1, 5, 5, 5, 5, 5, 5] // i.e. this will replace the values at index 2 and index 3 with copied values 5, 5 let myArray3 = [1,1,1,1,5,5,5,5]; // copy from index 4 to end and take the copies and start replacing at index 0 console.log(myArray3.copyWithin(0, 4)); //logs [5, 5, 5, 5, 5, 5, 5, 5] // i.e. this will replace the values at index 0, 1, 2, 3 with copied values 5, 5, 5, 5

ES2015 added the [].fill() method. This method will replace or fill a range of items in an Array with a new value.

 // replace the values at index 0 and index 1 with 'foo' // the second and third arguments to fill() below say, start filling at index 0 and stop at index 2 console.log([5,5,5,5].fill('foo',0,2)) // logs ["foo", "foo", 5, 5] // replace all values from index 2 on with 'foo' console.log([5,5,5,5].fill('foo',2)) // logs [5, 5, "foo", "foo"] // replace all values with 'foo' console.log(Array(4).fill('foo')) // logs ["foo", "foo", "foo", "foo"]

3.5 : New Object Static Methods (ES2015, ES2017)

ES2015 added the Object.is() static method. This method accepts two values and if the values are the same then it returns true, otherwise, it returns false.

 // compare the same Object object const myObject = {}; console.log(Object.is(myObject,myObject)); // logs true, same // compare different Object objects console.log(Object.is({},{})); // logs false, two different objects // compare primitive values const myNumber = 5; const myBoolean = true; const myString = ''; const myNull = null; const myUndefined = undefined; console.log(Object.is(5,myNumber)); // logs true, same value console.log(Object.is(true,myBoolean)); // logs true, same value console.log(Object.is('',myString)); // logs true, same value console.log(Object.is(null,myNull)); // logs true, same value console.log(Object.is(undefined,myUndefined)); // logs true, same value

 // log the values in myObject var myObject = { 0: 'f', 1: 'o', 2: 'o' }; console.log(Object.values(myObject)); // logs ['f', 'o', 'o'] // the string primitive value will be coerced to an object if passed to Object.values(); console.log(Object.values('foo')); // logs ['f', 'o', 'o']

 // log the key and value pairs in myObject var myObject = { 0: 'f', 1: 'o', 2: 'o' }; console.log(Object.entries(myObject)); // logs [["0", "f"], ["1", "o"], ["2", "o"]]

ES2015 added the Object.assign() static method. This method copies own enumerable properties from one object to a different target object.

 // using assign() to clone an object const myObject = {'key1':'value1', 'key2':'value2'}; console.log(Object.assign({}, myObject)); /* logs new object, cloned from myObject [object Object] { key1: "value1", key2: "value2" } */ // using assign() to merge objects const myObject1 = {'key1':'value1', 'key2':'value2'}; const myObject2 = {'key3':'value3', 'key4':'value4'}; const myObject3 = {'key4':'4'}; console.log(Object.assign(myObject1, myObject2, myObject3)); /* logs a new object [object Object] { key1: "value1", key2: "value2", key3: "value3", key4: "4" } Note: same properties are overwritten. Last in to the parameter list wins. */ // using assign to coerce a string to an object console.log(Object.assign({},'foo')); /* logs a new object [object Object] { 0: "f", 1: "o", 2: "o" } */

Notes:

Chapter 4 : New ES2015+ Syntax

4.1 : Using const and let (ES2015)

Before ES2015 variables were declared using the var keyword. Today, it is more common that developers completely avoid the use of var and instead use const and let when needed. Const is used to declare variables with values that do not get reassigned. Reassigning a const value throws an error. Additionally, both const and let honor all block scope (i.e.{ block scope }), unlike var which only honors function block scope (i.e. function myFunction(){ block scoped }).

This means const and let are safer because they don't leak out of things like if blocks or looping blocks. For example, in the code below the variables, doug and MATH are scoped to the if block while jill leaks out.

 // MATH_CONSTANT and doug are scoped within the if(){ ... } blocks and unlike var they will not leak out. if(true){ let doug = 45; const MATH_CONSTANT = Math.PI; var jill = 44; // does not care about brackets } console.log(jill); // logs 44, because it leaked out of { } // try { console.log(doug); console.log(MATH_CONSTANT); }catch(e){ console.log('Can\'t find doug or MATH_CONSTANT'); }

4.2 : Using blocks to Create Scope (ES2015)

Before ES2015 if one needed a unique scope the only option was to use function scope:

 // below doug and MATH_CONSTANT are only available with the scope of the function (function () { var doug = 45; var MATH_CONSTANT = Math.PI }()); try { console.log(doug); console.log(MATH_CONSTANT); }catch(e){ console.log('Can\'t find doug or MATH_CONSTANT'); }

Today, given that const and let remain scoped to blocks with no leaking developers can replace IIFE with blocks if var is avoided.

So, don't be surprised if you see IIFE's replaced with simple blocks:

 // doug and MATH_CONSTANT only available with the scope of the blocks { let doug = 45; const MATH_CONSTANT = Math.PI; } try { console.log(doug); console.log(MATH_CONSTANT); }catch(e){ console.log('Can\'t find doug or MATH_CONSTANT'); }

4.3 : Using Default Function Parameters (ES2015)

In the past, if a default value was needed for an argument passed to a function, boilerplate was needed:

 const add = function(x, y) { x = x || 0; y = y || 0; return x + y; } console.log(add()) //logs 0

No longer is this the case. It is now possible to give parameters default values when defining a function. The code below is equivalent to the previous code.

 const add = function(x = 0, y = 0) { return x + y; } console.log(add()) //logs 0

Notes:

4.4 : Using Destructuring Assignments (ES2015)

Destructuring is a fancy word for unpacking elements from an array, or characters from a string, or properties from an object and assigning/reassigning them to one or more variables in a terse expression. Below are three code examples of each of these destructuring expressions just mentioned.

1. Destructuring Strings:

 // destructuring Strings characters into the variables a, b, and c let [a, b, c] = "foo"; console.log(a); // logs f console.log(b); // logs o console.log(c); // logs o /* Could be written let a; let b; let c; [a, b, c] = "foo"; // i.e. a = 'f', b='o', c='o' console.log(a); // logs f console.log(b); // logs o console.log(c); // logs o */

2. Destructuring Arrays:

 // destructuring an Array of elements in the variables one, two, and three let [one, two, three] = [1,2,3]; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3

3. Destructuring Objects:

 // destructuring an Object properties in the variables f and l // i.e. find the property first, assign its value to f. Find property last, assign its value to l. let { first: f, last: l } = { first: 'Bill', last: 'May' }; console.log(f); // Bill console.log(l); // May // The object is used to identify the property and new variable that will hold the properties value // Note the above code is commonly written using shorthand properties names let { first, last } = { first: 'Bill', last: 'May' }; console.log(first); // Bill console.log(last); // May // This means you omit the : f and : l, and the assignment uses first:first and last:last // But you don't have to write first:first or last:last, just first and last /* the above is just shorthand for: let { first:first, last:last } = { first: 'Bill', last: 'May' }; */

Don't over think destructuring, it simply is a terse way to take a collection of values and assign those values within the collection to different or new variables.

4.5 : Using Destructuring With Function Arguments and Parameters (ES2015)

Take what you know about destructuring and now apply it to function arguments and parameters. Basically, a function parameter can be written as a collection of identifiers that can destructure String, Array, and Object values. The result is an extremely terse way to unpack Arrays, Objects, or Strings into separate parameters using a single argument.

Array arguments can be destructured:

 // assign argument values to identifiers in the first parameter let func = function([one, two, three]) { console.log(one, two, three); } func([1,2,3]); // Same concept as: let [one, two, three] = [1,2,3]; but using arguments & parameters instead

Object arguments can be destructured (Most Common Usage):

 // assign argument values to identifiers in the first parameter let func = function({ first: f, last: l }) { console.log(f,l); } func({ first: 'Bill', last: 'May' }); // Same concept as: let { first: f, last: l } = { first: 'Bill', last: 'May' };

String arguments can be destructured:

 // assign argument values to identifiers in the first parameter let func = function([a, b, c]) { console.log(a,b,c); } func('foo'); // Same concept as: let [a, b, c] = "foo";

Destructuring function parameters are a terse way to pass complex data via a single argument and have the argument values be available in the function for immediate use without creating any assignment boilerplate in the function.

4.6 : Using Default Destructuring Values (ES2015)

Destructuring syntax also permits the use of default values so that assignments can have fallback values. In other words if the value you are destructuring is undefined a fall back value can be setup.

 // Note: Fallback to default value when destructuring Strings const [a='f', b='o', c='o'] = ''; console.log(a); // log f console.log(b); // log o console.log(c); // log o // Note: Fallback to default value when destructuring Arrays const [one=1, two=2, three=3] = [undefined,44,undefined]; console.log(one); // log 1 console.log(two); // log 44 console.log(three); // log 3 // Note: Fallback to default value when destructuring Objects const { first: f = 'John', last: l = 'Doe' } = { first: 'Mary' }; console.log(f); // log Mary console.log(l); // log Doe

This will of course also work with when destructuring function arguments

 // destructuring array argument, with default values const func1 = function([one=1, two=2, three=3]) { console.log(one, two, three); } func1([]); // destructuring object argument, with default values const func2 = function({ first: f = 'John', last: l = 'Doe' }) { console.log(f,l); } func2({}); // destructuring string argument, with default values const func3 = function([a = 'f', b = 'o', c = 'o']) { console.log(a,b,c); } func3('');

4.7 : Using the Spread Operator (ES2015, ES2018)

The spread operator (i.e. ...) is used to unpack or expand elements from an Array, properties from an Object, or individual characters from a String, so as to immediately use these individual values in a couple of specific cases. Below I detail these cases.

1. Arrays can be spread into Array literals or when calling a function:

 // spreading an Array into a function call console.log(...['f', 'o', 'o']); // logs f o o, like calling console.log('f', 'o', 'o'); // spreading Array(s) into an Array literal console.log([...[1, 2], ...[3, 4, 5]]); // logs [1,2,3,4,5]

2. Object properties can be spread into Object literals:

 const obj1 = {bob: true, steve: false}; const obj2 = {lisa: true, bob: false}; // spreading Objects into an object literal console.log({...obj1, ...obj2}); // logs {bob: false, steve: false, lisa: true} // Note that last bob value in wins.

Notes:

3. Strings can be spread into Array literals or when calling a function:

 // spreading a string into an array console.log([...'bar']); // logs ['b','a','r'] // spreading a String into a function call console.log(...'foo'); // i.e. console.log('f','o','o'); // logs f o o

4.8 : Using the Rest Operator (ES2015, ES2018)

Unfortunately, the rest operator (i.e. ...) looks exactly like the spread operator but instead of expanding things it will wrap things up.

The rest operator can be used in the following two cases:

1. When defining function parameters a rest operator can be used on the last parameter to indicate that any unidentified arguments should be wrapped up into an array.

 /* By place the ... operator directly in front of the last function parameter the rest of the arguments passed to a function besides the ones before the rest parameter are wrapped up into an array. */ const func = function(param1, param2, ...restOfArguments) { console.log(param1, param2, restOfArguments); } // call func with 7 parameters, but only two are define, the rest are wrapped up into an array func(1,2,3,4,5,6,7); // logs 1 2 [3, 4, 5, 6, 7]

2. When destructuring, remaining values can be wrapped up too:

 // destructuring String characters in the variables a, b, c, and the rest into d Array const [a, b, c, ...d] = "doggy"; console.log(a); // d console.log(b); // o console.log(c); // o console.log(d); // ["g", "y"] // Note: use of Array of variables before assignment // // logs f o o an Array elements in the variables one, two, three, and the rest in restOfNumbers of Array const [one, two, three, ...restOfNumbers] = [1, 2, 3, 4, 5, 6]; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3 console.log(restOfNumbers); // [4, 5, 6] // // logs f o o an Object properties in the variables f, l, and the rest in restOfProps Object const { first: f, last: l, ...restOfProps } = { first: 'Bill', last: 'May', age: 45, living: false }; console.log(f); // Bill console.log(l); // May console.log(restOfProps); // { age: 45, living: false }

Careful not to confuse the spread operator with the rest operator. The ... operator is identical but the context in which it is used changes how the operator functions. The rest operator is used when defining function parameters and destructuring. The spread operator turns iterable items into arguments for functions, into properties for Object literals, or elements for Array literals.

4.9 : Using Template Literals (ES2015, ES2016, ES2018)

Characters wrapped in backticks (i.e. `string here`) instead of quotes are considered template string literals that return a String value. Template literals support line breaks and interpolation (i.e. a template like syntax for easily inserting values into the string, using${}).

In the code example below a multi-line string is created from the firstName and lastName variables

 let firstName = 'Jane'; let lastName = 'Smith'; console.log(`Hello Mr. ${lastName}! Welcome! May I call you ${firstName}?`); // Note: when log to the console line breaks are honored /* "Hello Mr. Smith! Welcome! May I call you Jane?" */

4.10 : Using Tagged Template Literals (ES2015)

Tagged template literals are template literals that get run through a function and passed the template literal details. Commonly a String value is returned from a tag function, but any value can be returned.

In the code example below the tag function verifyName will use a default name if one of the values passed to the template literal is undefined. Basically, by tagging the template literal with a tag function I make sure it will always have a first and last name even if the values passed to it are undefined.

 // This is a contrived example highlighting the mechanics of a tag function let name; // tag function to adjust string if name is undefined const verifyName = function(stringsFromTemplate, nameTemplateData) { const s = stringsFromTemplate; // In an array if(nameTemplateData === undefined){ return `${s[0]}${'[no name given]'}${s[1]}${'[no name given]'}${s[2]}` }else{ return `${s[0]}${nameTemplateData}${s[1]}${nameTemplateData}${s[2]}` } } // Use verifyName tagged function with undefined value let greeting1 = verifyName`Hello ${name}! May I call you ${name}?` console.log(greeting1); //logs Hello [no name given]! May I call you [no name given]? name = 'Pat'; // Use verifyName tagged function with defined value let greeting2 = verifyName`Hello ${name}! May I call you ${name}?` console.log(greeting2); //logs Hello Pat! May I call you Pat?

4.11 : Using Fat Arrow Function Expressions (ES2015)

Today, developers have replaced traditional function expressions like:

 const func = function (x) { return x * x; };

with a new syntax that uses a fat arrow (i.e. =>):

 const func = x => x * x ; // note: Omitted parenthesis around single parameter and use of implicit return. // This works fine when you have a single parameter and a single expression to return. // a less terse version of the above const func = (x) => { return x * x; }; // parenthesis and blocks only required if you have more than one parameter or expression const func = (x, y) => { const doubleY = y * 2; return z * doubleY; };

The previous code examples are similar in that they are function expressions, but the fat arrow function is not a total replacement for functions in general. Fat arrow function expressions are best suited for non-method functions, and they cannot be used as constructor functions (Arrow functions do not have prototypes). In most cases, fat arrow function expressions are used due to their terseness.

Have you ever had to hack a reference to this in the function scope chain using a that variable:

 // Broken because using this keyword creates a new binding in function(){} var CounterBroken = function () { this.num = 0; this.timer = setTimeout(function () { // console.log(this); //this, refers to window this.num++; // this, does not refer to CounterBroken instance console.log(`Broken this = ${this.num}`); //logs Broken this = NaN }, 1000); } var counterBrokenInstance = new CounterBroken(); // Create an Instance of CounterBroken // Fixing broken counter constructor using that = this var CounterFixed = function () { var that = this; this.num = 0; this.timer = setTimeout(function() { console.log(that.num); //that = this, from scope above that.num++; // this will now work, but a scope chain hack console.log(`Fixed this = ${that.num}`); //logs Fixed this = 1 }, 1000); } var counterInstance = new CounterFixed(); // Create an Instance of CounterFixed

 // Remove that = this, just use fat arrow function expression instead var CounterFixed = function () { this.num = 0; this.timer = setTimeout(() => { console.log(this.num); // this, is CounterFixed instance this.num++; // this refers to what we want now with no hack console.log(`Fixed this = ${this.num}`); }, 1000); } var counterInstance = new CounterFixed();

4.12 : Using Trailing Commas (ES2015, ES2017)

Trailing commas in the code below are considered valid JavaScript today:

 //Trailing comma in Array literal console.log([1, 2, 3,]) // no error //Trailing comma in Object literal console.log({bob: true, steve: false,}) // no error //Trailing comma in Function parameter definitions const func1 = ((x,) => { // no error console.log(x) })('cat'); //Trailing comma in Function arguments call const func2 = ((x) => { console.log(x) })('dog',); // no error // Trailing comma in array destructuring const [index0, index1,] = ['bee', 'flee']; // no error console.log(index0, index1); // Trailing comma in object destructuring const {bob:bobsValue, jill:jillsValue,} = {bob: false, jill: true}; // no error console.log(bobsValue,jillsValue);

Notes:

4.13 : Using the for-of loop (ES2015)

Commonly looping today will be done by way of an Array method like .map() or.forEach(). However, don't be surprised if you see the for-of loop in modern code. It can be used to loop over Strings, Arrays, Maps, Sets, basically anything that is an iterable value.

The for-of loop goes through an iterable and assigns each entry in the iterable one at a time to the variable(s) define before the of keyword.

Looping over Arrays using for-of loop:

 const anArray = ['a', 'b', 'c']; for (const item of anArray) { console.log(item); // logs "a", "b", "c " }

Looping over Strings using for-of loop:

 const aString = 'cat'; for (const character of aString) { console.log(character); // logs "c", "a", "t " }

Looping over Maps using for-of loop:

 // create a new Map called myMap and preload it with key-value entries const myMap = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]); // Use for-of loop to loop over Map for (const entry of myMap){ console.log(entry); // logs: // ["key1", "value1"] // ["key2", "value2"] }

As of ES2017 one can use Object.entries() and destructuring with the for-of loop to loop over Object literals.:

 const arr = ['zero', 'one']; for (const [index, element] of arr.entries()) { console.log(index, element); } // above logs 0 "zero" // above logs 1 "one"

4.14 : Using Shorthand Property Names (ES2015)

 const myNumber = 1; const myObjectLiteral = { myNumber, // notice all I put here was a property name // the above is shorthand for myNumber : myNumber }; console.log(myObjectLiteral); // Logs Object {myNumber: 1}

4.15 : Using Shorthand Method Names (ES2015)

When adding methods (i.e. functions) to object literals a new terser syntax is possible.

This is the old non-short syntax:

 const myObjectLiteral = { myMethod: function(parameters){ return; } };

This is the new shorthand syntax.

 const myObjectLiteral = { myMethod(parameters){ return; } };

Which saves you from having to write, : function.

Note how similar this new syntax is to getters and setters from ES5:

 const myObjectLiteralWithGetterAndSetter = { set myMethod(parameters){ return; }, get myMethod(){ return; }, };

4.16 : Using Computed Property Names (ES2015)

Using brackets around property names/keys will permit the name/key to be a result of an expression.

 const prop = 'prop'; // define an object literal with name/keys that are the result of an experssion const myObject = { // note property keys/names are computed [prop + 1]: 1, [prop + '2']: 2 } console.log(myObject); /* logs [object Object] { prop1: 1, prop2: 2 } */

Chapter 5 : ES2015 Map() and Set()

5.1 : Using Maps instead of Object Literals (ES2015)

ES2015 comes with Map(). Maps are key-value pairs stored in insertion order. Sounds a lot like an object right (i.e.{key1:value1, key2:value2})? Think of Maps as objects but with a built-in native API for working with the object and its key-value pairs.

Examine the code below to gain a basic overview of the creation and usage of a Map. Note that most of the built in methods for Map() are demonstrated (e.g. clear(), entries(), forEach(), get(), has(), keys(), set(), values()).

 // create a new Map called myMap // Preload myMap with key-value entries, as an Array, contained in an Array const myMap = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]); // .forEach() // loop over each entry in the Map using Map's forEach() method myMap.forEach((value, key) => { console.log(`${key} = ${value}`); }); // logs "key1 = value1 " "key2 = value2 " // .entries() // List of all key-value pairs, spreading into console log console.log(...myMap.entries()) // logs ["key1", "value1"] ["key2", "value2"] // .keys() // List of all keys, spreading into console log console.log(...myMap.keys()) // logs "key1" "key2 " // .values() // List of all values, spreading into console log console.log(...myMap.values()) // logs "value1" "value2 " // .set() // Set a key-value pair myMap.set('key3', 'value3'); // .get() // Get a key-value pair console.log(myMap.get('key3')); // logs "value3" // .has() // Does a key have a value yet console.log(myMap.has('key3')); // logs true // .delete() //Delete a key-value pair, by key myMap.delete('key3') console.log(myMap.has('key3')) // logs false // .clear() //Clear all key-value pairs myMap.clear(); // .size() //Get current size of map (i.e. number of entires) console.log(myMap.size) // logs 0, because you just cleared the Map of entries

Don't forget when using a Map() the key can be any value:

 const myMap = new Map([ ['key1', 'some value for key 1'], [2, 2], [[1], [1,2,3]], [{id:1}, {prop1:'value',prop2:'value'}], ]); myMap.forEach( (value, key) => { console.log(`${key} = ${value}`); // logs: // // "key1=s ome value for key 1" // "2=2" // "1=1,2,3" // "[object Object]=[ object Object]" });

Notes:

5.2 : Using Sets to create Arrays, with no Duplicates (ES2015)

ES2015 comes with Set(). Sets are values stored in a specific order that can't contain a duplicate. Sounds a bit like an Array object right (i.e.[value, value])? Think of Sets as Arrays but with a built in API for working with the items in the Array and the bonus of automatically eliminating duplicates.

Examine the code below to gain a basic overview of the creation and usage of a Set. Note that most of the built in methods for Set() are demonstrated (e.g. clear(), entries(), forEach(), has(), keys(), add(), values()).

 // create a new Set called mySet and preload it with values using an array/iterable // Note: that duplicates are removed when creating new Sets and adding values const mySet = new Set(['one', 'two', 'three', 'three']); // .forEach() // loop over each value in the Set using Set's forEach() method mySet.forEach((value) => console.log(value)); // logs "one" "two" "three" // .entries() // Note this uses each value as both the key and the value. // List of all value entries, spreading into console log console.log(...mySet.entries()) // logs ["one", "one"] ["two", "two"] etc... // .keys() // List of all keys (same func as values()), spreading into console log console.log(...mySet.keys()) // logs "one" "two" "three" // .values() // List of all values, spreading into console log console.log(...mySet.values()) // logs "one" "two" "three" // .has() // Does a Set have a specific value console.log(mySet.has('three')); // logs true // .add() // Add 'four' and 'three' to the Set. console.log(...mySet.add('three')); // logs "one" "two" "three" console.log(...mySet.add('four')); // logs "one" "two" "three" "four" // Note adding 'three' to a Set will not create a duplicate, as 'three' is a duplicate // .delete() //Delete a value mySet.delete('four') console.log(mySet.has('four')) // logs false // .clear() //Clear all ordered values mySet.clear(); // .size() //Get current size of Set (i.e. number of values) console.log(mySet.size) // logs 0, because you just cleared the Set of values

Notes:

Chapter 6 : ES2015 Class Syntax

6.1 : What class Syntax Conceals

ES2105 class syntax is a cleaner way to work with prototypal inheritance and object factories. The class, extend, constructor, super, and static keywords simplify and conceal what was already possible with JavaScript.

Before class syntax was available working with object constructors and prototypal inheritance, to mimic class's from other OOP languages, was done in the following way:

 // Create a Human class, i.e. an object factory for Human instances function Human(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // Instances created from Human constructor have a fullName method Human.prototype.fullName = function () { return `${this.firstName} ${this.lastName}`; }; // Create a Developer class function Developer(firstName, lastName, type) { Human.call(this, firstName, lastName); this.type = type; } // Have Developer inherit from Human, by creating an object that inherits from Humans prototype Developer.prototype = Object.create(Human.prototype); // Make the constructor property point at Developer, not Human Developer.prototype.constructor = Developer; // Instances created from Developer constructor have a fullNameAndLanguage method Developer.prototype.fullNameAndLanguage = function () { return `${Human.prototype.fullName.call(this)} develops ${this.type}`; }; // Add static helper function to Developer Developer.isJSdev = function(cody){ return cody.language.toLowerCase() === 'javascript'; }; // Create an instance of Developer const cody = new Developer('Cody', 'Lindley', 'JavaScript'); // Call fullNameAndLanguage() method console.log(cody.fullNameAndLanguage()); // logs "Cody Lindley develops JavaScript" // Call fullName() method console.log(cody.fullName()); // logs "Cody Lindley" // Call static type of Developer console.log(Developer.isJSdev(cody)); // logs true

Using ES2015 class syntax the above can be re-written like so:

 // Create a Human class, i.e. an object factory class Human { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // Instances created from Human constructor have a fullName method fullName(){ return `${this.firstName} ${this.lastName}`; } } // Create a Developer class class Developer extends Human { // Have Developer inherit from Human constructor (firstName, lastName, type) { super(firstName, lastName); // call Human constructor but in this context this.type = type; } // Instances created from Developer constructor have a fullNameAndLanguage method fullNameAndLanguage(){ return `${super.fullName()} develops ${this.type}`; } // Add static helper function to Developer static isJSdev (cody){ return cody.language.toLowerCase() === 'javascript'; } } // Create an instance of Developer let cody = new Developer('Cody', 'Lindley', 'JavaScript'); // Call fullNameAndLanguage() method console.log(cody.fullNameAndLanguage()); // logs "Cody Lindley develops JavaScript" // Call fullName() method console.log(cody.fullName()); // logs "Cody Lindley" // Call static type of Developer console.log(Developer.isJSdev(cody)); // logs true

The details of a class object will be broken down in this chapter. For now, you should observe from the newer class syntax the following:

1. The use of the class, extend, constructor, super, andstatic keywords that were added to JavaScript to simplify prototypal inheritance for object-oriented minded developers (i.e. cleaner, concealing prototypal nuances, less boilerplate).

2. The use of shorthand method names within the class object. Which is the only option!

3. No commas separating the constructor function, method functions, or static method functions in the class object.

4. Notice how prototype boilerplate is eliminated and referencing an inherited class is trivial usingsuper.

6.2 : The class Expression v.s. class Declaration

A class can be defined using either a class declaration or class expression.

A class declaration:

 class Human { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // class name can be used to reference the class inside the class object classMethod (){ console.log(Human); // logs out class object backing property function } } const jill = new Human(); // call classMethod and log to the console reference to class, from inside of the class jill.classMethod();

A class expression:

 const Human = class optionalClassNameForReferenceInClassMethods { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // the optional name can be used to reference the class inside the class object classMethod (){ // logs out class object backing property function console.log(optionalClassNameForReferenceInClassMethods); } } const jill = new Human(); // call classMethod and log to the console reference to class, from inside of the class jill.classMethod();

Notes:

6.3 : Using a Class constructor Method

 // create a Human class that expects a first and last name value when instantiated class Human { constructor (firstName, lastName) { console.log('constructing'); // the this keyword, used below, is the new object create when calling Human this.firstName = firstName; // create a firstName property and give it a value this.lastName = lastName; // create a lastName property and give it a value } } const may = new Human('May','Jones'); // logs 'constructing' console.log(may); /* logs: [object Object] { firstName: "May", lastName: "Jones" } */

Notes:

6.4 : Using a Class Method

Class methods can be called on instances of the class. When called, the method of the class uses the values defined on the instance via the this keyword.

 // create a Human class that is passed a first and last name value when instantiated class Human { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // Instances created from Human class have a fullName class method fullName(){ // this inside a class method refers to the instance the method is called on return `${this.firstName} ${this.lastName}`; } } const may = new Human('May','Jones'); // may is an instance of the Human class const bill = new Human('Bill','Jones'); // bill is an instance of the Human class console.log(may.fullName()); // logs "May Jones" console.log(bill.fullName()); // logs "Bill Jones"

The fullName class method is defined once for all instances.

Notes:

6.5 : Using a static Class Method

 // Define a Human class with a static method class Human { static isHuman(classInstance){ // is the constructor of the classInstance the same as this class i.e. Human = Human, return classInstance.constructor === this; } } // create an instance of the Human class var pat = new Human(); // call static method on Human class Human.isHuman(pat); // logs true

Notes:

Static methods are also inherited.

6.6 : Using extend to Inherit Methods from Another Class

 // Create a Human class, i.e. an object factory class Human { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // Instances created from Human constructor have a fullName method fullName(){ return `${this.firstName} ${this.lastName}`; } } // Create a Developer class class Developer extends Human { constructor (firstName, lastName, type) { super(firstName, lastName); // like calling Human.call(this, firstName, lastName); this.type = type; } } // Create an instance of Developer let cody = new Developer('Cody', 'Lindley', 'JavaScript'); // Call fullName() method, inherited from Human Class console.log(cody.fullName()); // logs "Cody Lindley"

Notes:

6.7 : Using super to Call the Inherited Constructor

The super keyword within a constructor method is used to invoke the parent class from the child class. This invocation setups the needed properties for inherited methods to run correctly.

 // Create a Human class, that other class's will use as a parent class class Human { constructor (firstName, lastName) { console.log('Super() called this constructor from child Class'); this.firstName = firstName; this.lastName = lastName; } // Instances created from Human constructor have a fullName method fullName(){ return `${this.firstName} ${this.lastName}`; } } // Create a Developer class, that is a child class of Human class Developer extends Human { constructor (firstName, lastName, type) { // super has to be used first, if used super(firstName, lastName); // like calling Human.call(this, firstName, lastName); // the above, using a parent constructor, does this: // this.firstName = firstName; // this.lastName = lastName; this.type = type; } } // Create a Lawyer class, that is a child class of Human class Lawyer extends Human { constructor (firstName, lastName, type) { // super has to be used first, if used super(firstName, lastName); // like calling Human.call(this, firstName, lastName); // the above, using a parent constructor, does this: // this.firstName = firstName; // this.lastName = lastName; this.type = type; } } // Create an instance of Developer, both the Developer and Human constructors are invoked. const cody = new Developer('Cody', 'Lindley', 'JavaScript'); console.log(cody.fullName()) // works because Developer has a firstName and lastName setup by calling super() // Create an instance of Lawyer, both the Lawyer and Human constructors are invoked. const lisa = new Lawyer('Lisa', 'Lindley', 'Criminal'); console.log(lisa.fullName()) // works because Lawyer has a firstName and lastName setup by calling super()

6.8 : Using super to reference Inherited Methods

The super keyword when used within a class method or static method will be a reference to the parent class's methods.

 class Human { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } fullName(){ return `${this.firstName} ${this.lastName}`; } } class Developer extends Human { // Have Developer inherit from Human constructor (firstName, lastName, type) { super(firstName, lastName); this.type = type; } fullNameAndLanguage(){ // use super keyword to reference parent class method, and invoke it. return `${super.fullName()} develops ${this.type}`; // Note referencing super alone will throw an error i.e. console.log(super); } } // Create an instance of Developer const cody = new Developer('Cody', 'Lindley', 'JavaScript'); // Call fullNameAndLanguage() method console.log(cody.fullNameAndLanguage()); // logs "Cody Lindley develops JavaScript"

6.9 : Extending JavaScript Built-in's and Web API Constructors/Classes using class Syntax.

Before ES2015 class syntax sub-classing/extending a built in constructor/class like Array() had significant limitations.

Today, extending the JavaScript Array() class is trivial using class syntax.

 class MyCustomArray extends Array{ customEntriesMethod(){ return Object.entries(this); } } let myCustomArrayInstance = new MyCustomArray('one', 'two', 'three'); myCustomArrayInstance.push('four'); console.log(myCustomArrayInstance.customEntriesMethod()); // logs [["0", "one"], ["1", "two"], ["2", "three"], ["3", "four"]]

Even, JavaScript web API's like the DOM can be extended.

Chapter 7 : ES2015 Promises

7.1 : Asynchronous Programming Basics

Code that does not run completely as part of a normal execution cycle is said to run asynchronously. Asynchronously executed code in this context basically means that one defines code now to occur later in the future while not blocking other code from running synchronously. The simplest example of this is setTimeout().

 // execute the passed function in 10'ish seconds in the future setTimeout(() => console.log('Ten seconds ago, you ask me to run this code'), 10000); // But keep executing code, don't wait for 10secs, and block all code execution console.log('I am not delayed by 10 seconds from running');

Basically, when you ask JavaScript to wait to run some code, while not blocking the rest of the program from running, you are dealing with asynchronous code.

7.2 : Asynchronous Programming Before ES2015 (Or, Why Promises?)

Callback functions before ES2015 were the typical means in which one dealt with asynchronous programming situations. And even today, a simple callback function works just fine in many situations (e.g. the user clicks on a button and the corresponding callback function is run asynchronously).

However, asynchronous situations do exits that make using callback functions buggy and laborious. These situations can involve complex network exchanges found between a client and a server. Imagine you need to make five different requests to the server from the client and the requests have a complex relationship with each other. For example, imagine that the first request has to finish before the second and third request can begin. And both the second and third request have to finish before the fourth and fifth request can begin. And, the fourth and fifth request are not both required to be finished, you only need one to finish, whichever one is first. Also imagine, for each request you have to create an error handling situation.

I hope you can see that using callbacks alone, to complete the task just mentioned, using something like the XMLHttpRequest web API will either lead to a pyramid of callback functions:

 // A function within a function within a function within a function etc... getData1(function(x){ ... getMoreData2(x, function(y){ ... getMoreData3(y, function(z){ // on and on it could go }); }); })(); // oh no the pyramid of doom!

Or, a long list of linked callback functions:

 // function 1 calls function 2, function 2 calls function 3 etc... getData1(function(x){ ... getMoreData2(x) })(); getData2(function(y){ ... getMoreData3(y) }); getData3(function(z){ // on and on it could go });

Either way, many consider this situation, callback hell.

To combated the complexity of complicated asynchronous programming and avoid callback hell ES2015 provided the native Promise API as an alternative to callback functions alone. The remainder of this chapter will cover the new Promise API in further detail.

Notes:

7.3 : Producing & Consuming a Promise

These methods and static methods provide a cleaner API when dealing with complicated relationships among asynchronous code.

 // Create a Promise called myPromise const myPromise = new Promise( (resolve, reject) => { // this is an executor function try{ // do some async work, like an XHR request or a setTimeout() // ... // then call resolve() when done, pass it some data setTimeout(function(){resolve('foo');}, 1000); // comment out the line above and un-comment line below to see error thrown // foo; }catch(error){ // if an error occurred, call reject() reject(error); } } ); // Consume myPromise myPromise.then( // takes two functions, // if promise calls resolve() this first function is called (data) => { console.log(data); }, // logs 'foo' // if promise calls reject() this second function is called (error) => { console.log(error.toString()) } // logs Error );

Let's take the promise API for a spin. In the code example below I am wrapping a Promise around the older XMLHttpRequest object and concealing its older callback function API in order to create a mini Github Promise based API.

 // Create a function that will return a Promise const getGitHubData = (gitHubRESTPath) => { // return a Promise so the .then() method can be called on returned value return new Promise((resolve, reject) => { // this is the executer function // start asynchronous work const xhr = new XMLHttpRequest(); xhr.onload = function () { // callback function if (this.status === 200) { // call resolve() with async results when async work is done resolve(this.response); } else { // call reject() with statusText if server returns anything but a 200 reject(this.statusText); } }; xhr.onerror = function () { // callback function // call reject() with error message if XHR errors occur reject('XHR Error:'); }; xhr.open('GET', 'https://api.github.com/' + gitHubRESTPath); xhr.send(); }); }; // Now call getGitHubData() and consumer the Promise wrapped around XMLHttpRequest // Get number of stars for React on github getGitHubData('repos/facebook/react').then( // use then() to consume the eventual results //resolve function (response) => { // convert the JSON string response to a JS object console.log(JSON.parse(response).stargazers_count); // logs 11XXXX }, //reject function (error) => { console.log(error); } ); // Send a bad URL, to see reject function run getGitHubData('repos/nothing/nothing').then( // use then() to consume the eventual results //resolve function (response) => { // convert the JSON string response to a JS object console.log(JSON.parse(response).stargazers_count); }, //reject function (error) => { console.log(error); // logs 'Not Found' } );

To consume the returned promise the then() method is used to capture both the resolution of the asynchronous code and potentially any resulting errors (i.e. then() takes two arguments. First argument is resolution function, called when promise is resolved, second is a rejection function, called if the promise is rejected).

Notes:

7.4 : Consuming Promises

Since promises are native to the language several JavaScript runtimes can make use of Promises. For example, the new Fetch API, which replaces the older XMLHttpRequest API returns a promise by default. Thus, instead of having to create a promise, all you have to do is consume the promise returned from calling fetch().

I've re-written the code from the previous section to use the new Fetch API. By using the Fetch API I don't need to produce a Promise object manually, one is simply given to me by the web platforms Fetch API. As you can see in the code example below when a promise is returned all that is left to do is to consume the promise using promise methods (e.g. then() method)

 // Get number of stars for React on github fetch('https://api.github.com/repos/facebook/react') .then( // use then() to consume the eventual results //resolve function (response) => { // note that calling response.json() is itself a promise response.json().then(json => console.log(json.stargazers_count)); // logs 11XXXX }, //reject function (error) => { console.log(error.toString()); // logs "undefined" } ); // Send a bad URL, to see reject function run fetch('htttps://www.badnogoodurl.com') .then( // use then() to consume the eventual results //resolve function (response) => { // note that calling response.json() is itself a promise response.json().then(json => console.log(json.stargazers_count)); // logs 11XXXX }, //reject function (error) => { console.log(error.toString()); // log "undefined" } );

7.5 : Producing an already Resolved or Rejected Promise

The Promise.resolve() static method returns a resolved promise with a specific value passed to it:

 Promise.resolve('value1') .then(value => console.log(value)); // logs "value1" // The above is a shortcut for this: new Promise(resolve => resolve('value2')) .then(value => console.log(value)); // logs "value2"

The Promise.reject() static method returns a rejected promise with a specific value passed to it:

 Promise.reject('error1') .then(() => {}, error => console.log(error)); // logs "error1" // The above is a shortcut for this: new Promise((resolve, reject) => {reject('error2');}) .then(() => {}, error => console.log(error)); //logs "error2"

Don't over think these two static methods they simply side step the executor function and return a promise in a specific state.

7.6 : Chaining Promises with then()

The then() method is used to provide a resolution and rejection function for a promise. Remember, a promise runs/contains asynchronous code. This asynchronous code when complete can call one of two functions either resolve() or reject(). The then() method accounts for both of these calls. If resolve() is called then the first function to then() is invoked. If reject() is called then the second function pass to then() is called.

In the code example below I am using then() to extract the commits on Github for React, then extract the author of the last commit, then log that author to the console.

 // get the name of the last person to commit to the React github repository // fetch all commits for React fetch('https://api.github.com/repos/facebook/react/commits') // handle response, pass json to next then() .then(response => response.json(), error => console.log(error)) // fetch user from Github API .then((json) => { // use commit data to get user name of last person to commit // use user name to get author data // pass response to next then() return fetch('https://api.github.com/users/'+json[0].author.login); }, error => console.log(error)) // handle response pass json to next then() .then(response => response.json(), error => console.log(error)) // get name, pass it to the next then(), note I am not passing a promise but just a simple value .then(user => user.name, error => console.log(error)) // log the name of the last person to commit code to the react repository .then(name => console.log(name + ' is the last person to commit to React repository'));

It is important to remember, and you may have noticed in the previous code example, that the then() method can be used to chain any value not just promises. In the code example below I demonstrate using the promise API to simply transfer data through a promise chain.

 // create a promise that is already resolved with a specific 'foo' value. var myPromise = Promise.resolve('foo'); // show how a promise can chain any value indefinitely. myPromise.then((data)=>{ return data; }).then((data)=>{ return data; }).then((data)=>{ console.log(data); // logs 'foo' });

However, the then() method was specifically designed to chain promises that are doing asynchronous activities. In the following code example I use the promise chain to verify all the starwars API endpoints are functioning.

 let starWarsAPICheck = []; console.log('Wait for it...! Data from another Galaxy yo!'); // chain a set of promise to occur one after the other // check the starwars api to see if all endpoints are working. fetch('https://swapi.co/api/people') .then((response)=>{ starWarsAPICheck.push(response.ok); return fetch('https://swapi.co/api/planets'); }).then((response)=>{ starWarsAPICheck.push(response.ok); return fetch('https://swapi.co/api/films'); }).then((response)=>{ starWarsAPICheck.push(response.ok); return fetch('https://swapi.co/api/species'); }).then((response)=>{ starWarsAPICheck.push(response.ok); return fetch('https://swapi.co/api/vehicles'); }).then((response)=>{ starWarsAPICheck.push(response.ok); return fetch('https://swapi.co/api/starships'); }).then(()=>{ console.log(starWarsAPICheck); // logs [true, true, true, true, true, true] }); // Note the previous chain all happen sequentially // To make all the calls run in parallel, Promise.all() could be used.

 // create a promise that is already resolved with a specific a 'foo' value. var myPromise = Promise.resolve('foo'); // show how error returned in the second then(), calls reject callback function, but chain goes on myPromise.then((data)=>{ return data; }).then((data)=>{ throw Error('yo this then() is no good'); // will cause reject callback in next then() to run }).then( (data)=>{console.log(data)}, // does not run (error)=>{console.log(error.toString())}, //logs 'yo this then() is no good' ).then((data)=>{ console.log('note this still runs'); console.log(data); // logs undefined, foo is undefined });

Basically, using then() allows a developer to push data through a set of functions that can deal with both synchronous and asynchronous results interchangeable. When an error occurs, the chain does not stop, the next then() simply captures the error and runs the second function passed to it.

7.7 : Catching Rejections in the Chain with catch()

When rejection errors occur within a promise chain the catch() method can be used to capture the rejection. This can be handy for two reasons. First off, you can write a single error handle for a long list of chained promises and the first rejection in the chain will get passed on to the catch(). Secondly, because catch() returns a promise, just like then(), you can keep chaining with more then()'s or catch()'s. Basically, one could perform several asynchronous routines and use one catch() if any errors occur, then continue on with more then()'s or catch()'s' at will.

In the code example below a broken API call is kicked off and a catch() method at the end of the chain captures the error.

 fetch('https://api.github.com/repos/fanebook/react/commits') // broken URL, facebook not fanebook .then(response => response.json()) .then((json) => { // this throws an error because the json passed in is bad // it is bad because the original URL is wrong facebook, not fanebook // so json[0].author.login is a bad reference // so this function throws an error which is caught in the first catch() in the chain return fetch('https://api.github.com/users/'+json[0].author.login); }) .then(response => response.json()) // response.json() returns a promise .then(data => console.log(data.name + ' is the last person to commit to React repository')) // never logs .catch(error => { // any error issue in the previous then()'s are trapped here console.log(error.toString()); }) .then(() => { console.log('yup you can still chain after a catch()'); });

Notes:

7.8 : Running a Final Function, Regardless of Promise Fulfillment State with finally()

When a situation exists that you'd like to run a function regardless of if a promise is resolved or rejected you can use the finally() method. This method makes it possible to run code no matter what occurs previously in the promise chain.

In the code example below I demonstrate how the finally() method is invoked regardless of the fulfillment paths through the promise chain.

 let stateOfLoading = 'Not Loading'; // this is the default state fetch('https://swapi.co/api/peoples/') // breaks because the URL is people not peoples .then((response) => { if(!response.ok){ // run if fetch fails throw Error('api call broke'); // catch() is called } stateOfLoading = 'Loaded'; return stateOfLoading; // passed from finally() to the last then() in chain }) .catch(error => { stateOfLoading = 'Loading Error'; return stateOfLoading; // passed from finally() to the last then() in chain }) .finally(() => { // finally does not take in parameters // runs no matter what, because we want to return state to default // regardless of if the catch or then is fulfilled stateOfLoading = 'Not Loading'; }) /* Basically a finally() eliminates redundant functions in a then() The above finally is just shorthand for using a then() like so: .then( () => { // finally does not take in parameters // runs no matter what stateOfLoading = 'Not Loading'; }, () => { // finally does not take in parameters // runs no matter what stateOfLoading = 'Not Loading'; }, ) */ .then((data) => { // get value from previous catch() or then() // change the initial api call from /people to /peoples to get different values console.log(data); // either 'loaded' or 'loading error' console.log(stateOfLoading); // verify finally statement returned state to default });

Notes:

7.9 : Waiting for a List of Parallel Promises to Complete with Promise.all()

If you want to kick off several asynchronous activities simultaneously using promises and get notified when they are all complete the Promise API offers Promise.all(). The Promise.all() static method takes an array of promises and will return a single promise when all the promises in the Array are fulfilled.

 Promise.all([ fetch('https://api.github.com/repos/facebook/react/commits'), fetch('https://api.github.com/repos/facebook/react/stargazers') ]) .then(([commits, stargazers]) => { console.log(commits.ok, stargazers.ok); // logs true, true });

7.10 : Waiting for the First, of a List, of Parallel Promises to Complete with Promise.race()

If you want to kick off several asynchronous activities simultaneously using promises and get notified when the first promise fulfills the Promise API offers Promise.race(). The Promise.race() static method takes an Array of promises and will return only the first promise that is fulfilled.

 Promise.race([ fetch('https://api.github.com/repos/facebook/react/commits'), fetch('https://api.github.com/repos/facebook/react/stargazers'), ]) .then(response => { console.log(response.url); // logs whichever one finishes first });

Chapter 8 : ES2017 Async Functions & await operator

8.1 : The async/await syntax is not a replacement for promises

Ultimately what you need to keep in mind is that the async/await syntax enhances promises, it does not replace promises!

8.2 : The benefits of using async functions and the await operator

Using async functions and the await operator to handle asynchronous code is a stylistic choice with some subjective benefits over traditional promises.

 let stateOfLoading = 'Not Loading'; // this is the default state // add async keyword to arrow function, now this function returns a promise and can use await operator const getLastGitHubCommitAuthor = async (owner, repo) => { try { stateOfLoading = "Loading"; // await pauses this function until the promise from fetch is fulfilled const commits = await fetch(`https://api.github.com/repos/${owner}/${repo}/commits`); // await pauses this function until the promise from .json() is fulfilled const jsonCommits = await commits.json(); // json() returns a promise // await pauses this function until the promise from fetch is fulfilled const author = await fetch(`https://api.github.com/users/${jsonCommits[0].author.login}`); // await pauses this function until the promise from .json() is fulfilled const jsonAuthor = await author.json(); // json() returns a promise return jsonAuthor.name; // a string is returned, but it is wrapped in a Promise } catch (error) { // any and all errors from the try and caught here, sort of like .catch() stateOfLoading = 'Error Loading'; throw new Error(error); // throw error so async function will return rejected promise. } finally { // can replace the .finally() method functional from a promise chain stateOfLoading = 'Not Loading'; } }; // Now consume the async function, which returns a promise, with promise methods. getLastGitHubCommitAuthor('facebook', 'react') .then(name => console.log(name + ' is the last person to commit to the React repository')) .catch(error => console.log(error.toString()));

Now compare the async/await solution you just looked at to the promise only solution:

 let stateOfLoading = 'Not Loading'; // this is the default state const getLastGitHubCommitAuthor = (owner, repo) => { // explicitly return a promise from the end of the chain return fetch(`https://api.github.com/repos/${owner}/${repo}/commits`) .then(response => response.json()) // json() returns a promise .then(jsonCommits => fetch(`https://api.github.com/users/${jsonCommits[0].author.login}`)) .then(response => response.json()) // json() returns a promise .then(jsonAuthor => jsonAuthor.name ) .catch((error) => { stateOfLoading = 'Error Loading'; throw new Error(error); }) .finally(() => { stateOfLoading = 'Not Loading'; }); }; // Now consume the async function, which returns a promise, with promise methods. getLastGitHubCommitAuthor('facebook', 'react') .then(name => console.log(name + ' is the last person to commit to the React repository')) .catch(error => console.log(error.toString()));

You should note the async/await solution offers the following subjective benefits:

Notice how asynchronous code has moved closer to a synchronous/procedural style (i.e. do this, then do this, then do this). Many people find this easier to read and maintain than using method chaining boilerplate.

Notice the reduction of chaining boilerplate (i.e. only used one then() not a long chain of them).

Notice the efficiency of using a try, catch, and finally to capture both asynchronous and synchronous errors and run code regardless of where the error occurs. (i.e. similar to how .catch() and .finally() works for long promise chains). In general, avoiding callback functions passed to then() means less cruft around errors being thrown.

Consider also that using the async/wait syntax could flat out potential child chains (i.e. then() chains inside of then() chains) and simplify conditional asynchronous activity.

The benefits just mentioned are often touted as the benefits for using async functions and the await operator over promise chaining. In short, many simply consider the async/await syntax an intuitive and cleaner replacement for promise chaining. Personally, I simply consider the use of async/await as a way to avoid chaining hell which is simply a hell wrapped around callback hell.

Notes:

8.3 : Asynchronous functions return an implicit Promise

If a promise is not explicitly returned from an async function then one is implicitly returned. The result is that a promise is always returned from an async function.

 // an async function that returns the value 5 var myAsyncFunction = async () => { return 5; } // verify async returns an implicit promise, wrapping the value 5 console.log(myAsyncFunction() instanceof Promise); // logs true // use then() to get value returned from myAsyncFunction myAsyncFunction().then((value) => { console.log(value) }); // logs 5

8.4 : The await operator awaits a Promise or creates an implicit Promise

 // an async function that returns the value 5 var myAsyncFunction = async () => { const awaitedPromiseValue = await 5; // The above is like explicitly writing: // const awaitedPromiseValue = await Promise.resolve(5); } // use then() to get value returned from myAsyncFunction myAsyncFunction().then((value) => { console.log(value) }); // logs undefined // nothing was returned so implicitly undefined is returned // i.e. Promise.resolve(undefined);

8.5 : The await operator is sequential

 (async () => { // create async function that is immediately invoked // sequential fetch's const responsePlants = await fetch('https://swapi.co/api/planets'); // API call above has to finish before the API below can start const responseFilms = await fetch('https://swapi.co/api/films'); console.log(responsePlants.ok, responseFilms.ok) // logs true true // parallel fetch's, faster than sequential fetch's using Promise.all() const [parallelResponsePlanets, parallelResponseFilms] = await Promise.all([ fetch('https://swapi.co/api/planets'), fetch('https://swapi.co/api/films') ]); console.log(parallelResponsePlanets.ok, parallelResponseFilms.ok) // logs true true // parallel fetch's, return first one to finish, using Promise.race() const fastestResponseFromStarWarsApi = await Promise.race([ fetch('https://swapi.co/api/species'), fetch('https://swapi.co/api/vehicles'), fetch('https://swapi.co/api/starships') ]); console.log(fastestResponseFromStarWarsApi.ok); // logs true })()

Chapter 9 : Using ES2015 Modules Today

9.1 : Why JavaScript Modules (aka EcmaScript Modules)?

Before ES2015 JavaScript didn't offer native modules. Oh, everyone faked it for years in all sorts of amazing ways but all of these solutions were temporary fixes to a significant deficit with the language. What was needed was a native module syntax built into the language and a runtime loading system that offered the following:

Modules with a native private scope that did not have to reach into the global scope to talk to other modules (i.e. the ability to import and export modules from within modules without reaching into the global scope).

Explicitly defined dependencies within a module (i.e. import).

Explicitly defined values within a module that can be shared with other modules (i.e. export).

A runtime loading API with a native runtime dependency tree.

All of the above requirements as of today have been satisfied by:

The JavaScript module syntax (e.g. import and export)

Runtime module loading API's. As an example, the web platforms Javascript module loading API that loads module files (i.e. <script type="module" src="myModule.js" />)

9.2 : Understanding Module Syntax V.S. the Module Loader API

JavaScript modules require two separate parts/specifications working together. The first part specifies how the module is defined and the implications of this definition within the language. (e.g. import and export). The second part is how the module is loaded (e.g. The browser module loader API e.g.<script type="module" src="myModule.js" /> and the Node ES module Loading API).

The module syntax is what is defined by the ECMAScript standard. The loader API is not defined by the ECMAScript standard. The details on how a module is loaded are details that JavaScript runtimes have to iron out (e.g. Browsers and Node.js).

9.3 : Loading/Running Static Modules in a Browser using <script type="module">

Before examining how static modules are loaded by browsers lets recap how the <script> element was used historically to load/run non-ES2015 JavaScript modules (aka script files, classic script files, or historical script files instead of ES modules).

Below three external <script src=""></script>'s' and one inline<script></script> are run in the the HTML document:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <script src="script1.js"></script> <script src="script2.js"></script> <script src="script3.js"></script> <script>console.log(this) // logs window object</script> </body> </html>

1. Values define in script files loaded into an HTML document are defined in the global scope (except for function and block scoped values contained in the script files).

2. By default, the script1.js is loaded/parsed by the browser engine before moving on toscript2.js (unless the attribute is used). By default, scripts are loaded/parsed synchronously.

3. By default all <script>'s' block the HTML parser (unless the attribute is used).

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <!-- Entry module is module1.js, dependency graph starts here --> <script type="module" src="./module1.js"></script> <!-- module1.js imports and uses module2.js --> <!-- module1.js import text from "./module2.js"; console.log(text); // logs "Hello from module 2"; --> <!-- module2.js const text = "Hello from module 2"; export default text; --> <!-- Entry module is inline script, dependency graph starts here --> <!-- inline script below imports and uses module3.js --> <script type="module"> import text from './module3.js'; console.log(text) // logs "Hello from module 3"; </script> <!-- module3.js const text = "Hello from module 3"; export default text; --> </body> </html>

The implications of loading JS modules using the browser module loading API are as follows:

1. The type="module" attribute is required so the browser will use the native browser module loading API to parse/load each module.

2. Each <script> has its own entry file anddependency graph.

3. An ES module can be written inline or be written in a separate file and pulled into the current HTML file using the src attribute.

4. An ES module runs code in strict mode by default.

5. Values defined in an ES module that are not export'ed are scoped only to that module, these values don't leak into the global scope.

6. ES modules are singletons in the sense that only a single instance of it exists. Basically, only one instance of it is used no matter how many times it is import'ed.

7. ES Modules still have access to the global context (i.e. the top level runtime scope). In a browser this would be the global window context. However, the use of the keywordthis will not work inside of a module to reference the global runtime scope.

8. The use of the import and export syntax can be used within the module to import other modules and export values, so other modules can import those values. By doing this you create a graph of dependencies between modules that the loading API uses to figures out how to run the JavaScript (i.e. managed dependencies).

9. Exports from an ES module are static. Meaning, once they have been defined and imported they can not be changed later.

10. ES Modules and their dependencies (i.e. imported modules) are fetched with CORS.

Notes:

9.4 : Conditionally loading a Module using import()

The statement has a dual purposed. It can be used to import other modules statically as well as dynamically. When the import statement is used as a function, and the module path/specifier is passed to it as an argument, a module can be loaded dynamically (e.g. import('./module1.js')) ). The return value from using import as a function is a Promise. Essentially this means you can asynchronously load ES modules after all the static modules have been loaded into the runtime.

In the code below after clicking anywhere on the HTML document, in the browser window, the lodash forEach ES module is loaded from the unpkg.com CDN and used to log out the context of an array.

 <html> <head> <meta charset="UTF-8" /> <style> body { cursor:pointer; } p { position: relative; height: 100%; text-align: center } strong { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: normal; } </style> </head> <body> <p> <strong> Click anywhere in this window <br> to load a module dynamically.<br> Then view console. </strong> </p> <script type="module"> const getModule = () => { (async () => { // I am in an inline module, using import('module') const module = await import('https://unpkg.com/lodash-es@4.17.11/forEach.js'); const forEach = module.default; forEach(['one','two'], console.log); })() } // still have access to window from module (no this however) // run getModule when the body is clicked window.document.body.onclick = getModule; </script> </body> </html>

9.5 : Parsing JS Module Syntax with Asset Bundlers

Bundlers like Webpack and Parcel can also analyze JavaScript files written using ES module syntax and create from these files a dependency graph that is then used to output one or many (aka code splitting) production runnable ES5 files. The outputted JavaScript won't typically use the web browser module loading API or module syntax but instead will load as an ES5 script file would have before ES modules.

Basically asset bundlers when dealing with ES modules can read ES2015 module syntax and convert it to runnable bundled ES5 code in the form of a historical script file. Then these files are loaded into a browser using the historical <script> element.

Today, most developers use an asset bundler. The reason most developers choose a bundler over the browser loading API is a combination of performance concerns, browser support concerns, and the fact that bundlers will bundle not only JavaScript files, but also other collaborating assets (i.e. treating HTML, CSS, and image files like importable modules).

Notes:

Chapter 10 : Writing ES2015 Module Syntax

10.1 : Module Syntax Overview

A lot of details and stylistic choices exist around the importing and exporting of values in JavaScript modules. However, fundamentally JS module syntax basically boils down to these two concepts:

1. A module can export multiple values and or a single default value from within a module using the keywords export anddefault:

 // myModule.js const value1 = 'value1'; const value2 = 'value2'; // export specific named values using export keyword export {value1, value2}; // named exports // Note export syntax, looks like destructuring syntax but is not destructuring // inline export export const value3 = 'value3'; // default export, using default keyword export default value4 = 'value4';

2. A module can simultaneously import multiple values and a single default value from other modules using the keywords import and from along with a URL specifier string identifier (i.e. the relative or full URL file path to the module whose values are being imported):

 // some other module that imports values from myModule.js // import the default value and three named values from myModule.js import nameGivenToDefaultValue, {value1, value2, value3} from './myModule.js'; // Note how the default value along with named values are imported together // Note export syntax, looks like destructuring syntax but is not destructuring // This module now has access to the imported values above console.log(nameGivenToDefaultValue, value1, value2, value3); //logs value4, value1, value2, value3

The rest of this chapter will break down some additional details about modules and the differing export'ing and import'ing styles that can be used when authoring JavaScript using ES module syntax.

Notes:

10.2 : Importing and Exporting Named values

The export keyword can be used to export an unlimited number of named values from a module.

Three styles are available when exporting named values from a module:
1. Exporting values inline when expressed/declared:
 // module1.js // exporting values inline, when defining export const simpleString = 'simpleString'; export const simpleFunction = () => {}; export const simpleNumber = 5; export class myClass {}; export function myFunction(){}; // Note these won't work // this will throw an error an expression or declaration is expected export 5; export simpleString;
2. Exporting values by reference:
 // module1.js const simpleString = 'simpleString'; const simpleFunction = () => {}; const simpleNumber = 5; class myClass {}; function myFunction(){}; // style for multiple references export {simpleString, simpleFunction, simpleNumber, myClass, myFunction};
3. Exporting renamed referenced values:
 // module1.js const sF = 'simpleString'; const sS = () => {}; const sN = 5; class mC {}; function mF(){}; // exporting multiple renamed references export {sF as simpleFunction, sS as simpleString, sN as simpleNumber, mC as myClass, mF as myFunction}

Four styles are available when importing the above named exported values into another module:
1. Importing a single named export:
 // This is module2.js, import a single value into this module from module1.js import {simpleString} from './module1.js'; console.log(simpleString);
2. Importing multiple named exports:
 // This is module2.js, import multiple values into this module from module1.js import {simpleString, simpleFunction, simpleNumber, myFunction} from './module1.js'; console.log(simpleString, simpleFunction, simpleNumber, myFunction);
3. Importing multiple named exports using an import namespace (i.e. importing an entire module):
 // This is module2.js, import all values into this module from module1.js import * as m1 from './module1.js'; console.log(m1.simpleString, m1.simpleFunction, m1.simpleNumber, m1.myClass, m1.myFunction);
4. Importing multiple named exports, renamed:
 // This is module2.js, import renamed values into this module from module1.js import {simpleString as sS, myClass as mF } from './module1.js'; console.log(sS, mF);

10.3 : Importing and Exporting a Default Value

A module can export one default value using the default keyword in combination with the export keyword.

Two styles are available when exporting a default value from a module:
1. Inline default exporting:
 // moduleA.js // Of course only one default can be used per module. // Each export below would not live in the same file, it would throw an error // Consider each line below to be in its own module // literal values (no const or let used) export default 'string'; export default 5; export default true; export default {}; export default []; // expressions const simpleString = 'simpleString'; const simpleNumber = 5; export default simpleString; export default simpleNumber; export default (() => {}); // declarations export default class myClass {} // semicolon optional with this style export default function myFunction(){} // semicolon optional with this style // unnamed declarations export default class {} // semicolon optional with this style export default function(){} // semicolon optional with this style
2. Renamed to default exporting
 // moduleA.js const simpleString = 'simpleString'; // No default keyword here export {simpleString as default}; // Exporting as default

One style is available when importing the above default exports into another module:
1. Renamed default
 // This is moduleB.js, import default from moduleA.js // assumes you know that moduleA.js exports one default value // the default is imported and renamed where it is imported import nameGivenHereToDefault from './moduleA.js'; console.log(nameGivenHereToDefault);

10.4 : Combining a Default and Named Exports When Exporting and Importing

Modules can export both a single default value, along with other named values:

 // moduleA.js const myString = 'myString'; export default myString; const myFunction = () => { }; export const myNumber = 5; export { myFunction };

All the values export from moduleA.js above can be imported together using the following two styles:
By name:
 // moduleB.js import nameGivenHereToDefault, {myFunction, myNumber} from './moduleA.js'; console.log(nameGivenHereToDefault, myFunction, myNumber);
Using a single namespace:
 // moduleB.js import * as namespace from './moduleA.js'; console.log(namepsace.default, namespace.myFunction, namespace.myNumber);

10.5 : Imported Values Are Live References, Not Copies

ES modules do not create copied values when importing values. Instead, ES modules create pointers/references to live values.

 <html> <head> <meta charset="utf-8" /> </head> <body> <!-- Entry module is module1.js, dependency graph starts here --> <script type="module" src="./module1.js"></script> <!-- module1.js imports and uses module2.js --> <!-- module1.js import { counter, addToCounter } from "./module2.js"; console.log(counter); // logs 0 addToCounter(10); console.log(counter); // logs 10 // Note, can't do this: // counter = 10; --> <!-- module2.js export let counter = 0; export const addToCounter = function(amountToAdd) { counter = counter + amountToAdd; }; export const foo = "foo"; --> </body> </html>

Keep in mind that imported values can't directly be changed. In other words, in the code example above directly changing the counter value from module1 will throw an error.

10.6 : Re-exporting imports

While not commonly done it's possible to re-export, imported values, using the URL string specifier. When re-exporting, the values never enter the scope of the module that is re-exporting them. Values simply pass through to the scope where they are not re-exported.

Re-exporting imported values can be done using the following styles:
Single namespace:
 export * from 'myModule.js';
Named values:
 export {value1FromMyModule, value2FromMyModule} from 'myModule.js';
Re-named values:
 export {value1FromMyModule as renamed1, value2FromMyModule as renamed2} from 'myModule.js';
As a default value:
 export {default} from 'myModule.js'; // or export {value1FromMyModule as default} from 'myModule.js';

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.readable_text
JavaScript ( JS) es un lenguaje de programación ligero, interpretado, o compilado justo-a-tiempo (just-in-time) con funciones de primera clase. Si bien es más conocido como un lenguaje de scripting (secuencias de comandos) para páginas web, y es usado en muchos entornos fuera del navegador, tal como Node.js, Apache CouchDB y Adobe Acrobat JavaScript es un lenguaje de programación basada en prototipos, multiparadigma, de un solo hilo, dinámico, con soporte para programación orientada a objetos, imperativa y declarativa (por ejemplo programación funcional). Lee más en acerca de JavaScript.

Esta sección está dedicada al lenguaje JavaScript en sí, y no a las partes que son específicas de las páginas web u otros entornos host. Para información acerca de APIs específicas para páginas Web, consulta APIs Web y DOM.

El estándar para JavaScript es ECMAScript (ECMA-262) y la especificación de la API para la Internacionalización de ECMAScript (ECMA-402). La documentación en MDN está basada enteramente en las últimas versiones preliminares de ECMA-262 y ECMA-402. Y en algunos casos donde algunas propuestas para nuevas funciones para ECMAScript ya hayan sido implementadas en los navegadores, la documentación y algunos artículos de MDN pueden hacer uso de algunas de estas funciones.

No confundas JavaScript con el lenguaje de programación Java. Ambos "Java" y "JavaScript" son marcas o marcas registradas de Oracle en los Estados Unidos y otros países. Sin embargo, los dos lenguajes de programación tienen sintaxis, semántica y usos muy diferentes.

¿Quieres transformarte en un desarrollador web front-end?
Hemos reunido un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.
Empieza aquí

Aprende a programar en JavaScript con guías y tutoriales.

Dirígete a nuestro tema del Area de Aprendizaje JavaScript si quieres aprender JavaScript pero no tienes experiencia previa de JavaScript o programación. Los módulos completos disponibles allí son los siguientes:

Primeros pasos en JavaScript

Responde algunas preguntas fundamentales tales como "¿qué es JavaScript?", "¿cómo se ve?", y "¿qué puede hacer?", junto con la discusión de características clave de JavaScript, como variables, cadenas, números y arreglos.

Bloques de construcción JavaScript

Continúa nuestra cobertura de las características fundamentales clave de JavaScript, dirigiendo nuestra atención a los tipos de bloques de código que se encuentran comúnmente, tales como declaraciones condicionales, bucles, funciones y eventos.

Introducción a objetos JavaScript

Es importante comprender la naturaleza de la orientación a objetos en JavaScript si deseas ir más allá con tu conocimiento del lenguaje y la escritura de código más eficiente, por lo tanto, hemos proporcionado este módulo para ayudarte.

JavaScript asíncrono

Analiza el JavaScript asíncrono, por qué es importante y cómo se puede usar para manejar eficazmente las potenciales operaciones de bloqueo, tales como recuperar recursos de un servidor.

API web del lado del cliente

Explora qué son las APIs y cómo usar algunas de las APIs más comunes que encontrarás a menudo en tu trabajo de desarrollo.

Guía de JavaScript

Una guía mucho más detallada del lenguaje JavaScript, dirigida a aquellos con experiencia previa en programación, ya sea en JavaScript u otro lenguaje.

Comprendiendo los frameworks JavaScript de lado del cliente

Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, ya que proporcionan a los desarrolladores herramientas probadas y comprobadas para crear aplicaciones web interactivas y escalables. Este módulo te brinda algunos conocimientos básicos sobre cómo funcionan los frameworks del lado del cliente y cómo encajan en tu conjunto de herramientas, antes de pasar a la serie de tutoriales que cubren algunos de los más populares en la actualidad.

Una reintroducción a JavaScript

Una descripción general para aquellos que piensan que saben JavaScript.

Estructuras de datos en JavaScript

Descripción general de las estructuras de datos disponibles en JavaScript.

Comparaciones de igualdad y similaridad

JavaScript proporciona tres diferentes operadores de comparación de valores: igualdad estricta usando ===, igualdad abstracta usando == y el método .

Cierres (clousures)

Un cierre es la combinación de una función y un entorno léxico dentro del cual se declaró esa función.

Herencia y la cadena de prototipos

Explicación de la herencia basada en prototipos ampliamente incomprendida y subestimada.

Modo estricto

El modo estricto define que no puedes usar ninguna variable antes de iniciarla. Es una variable restringida de ECMAScript 5, para un rendimiento más rápido y una depuración más fácil.

Arreglos tipados en JavaScript

Los arreglos tipados en JavaScript proveen un mecanismo para acceder a datos binarios sin formato.

Gestión de la Memoria

Ciclo de vida de la memoria y recolección de basura en JavaScript.

Modelo de Concurrencia y Bucle de Eventos

JavaScript tiene un modelo de concurrencia basado en un "bucle de eventos".

Herramientas útiles para escribir y depurar tu código JavaScript.

Herramientas para Desarrolladores de Firefox

Consola Web, Generador de Perfiles de JavaScript, Depurador y más.

Consola de Javascript

Una consola de JavaScript te permite probar rápidamente fragmentos de código JavaScript.

Aprende JavaScript

Un excelente recurso para aspirantes a desarrollador web - Aprende JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratis y el curso completo está disponible por un pequeño pago único.

TogetherJS

Colaboración fácil. Al agregar TogetherJS a tu sitio web, ¡tus usuarios pueden ayudarse mutuamente en un sitio web en tiempo real!

Stack Overflow

Preguntas en Stack Overflow etiquetadas con "JavaScript".

Edita JavaScript, CSS, HTML y obtén resultados en vivo. Usa recursos externos y colabora con tu equipo en línea.

Plunker es una comunidad en línea para crear, colaborar y compartir sus ideas de desarrollo web. Edita sus archivos JavaScript, CSS, HTML y obtén resultados en vivo y estructuras de archivos.

JSBin es una herramienta de depuración de desarrollo web colaborativo de código abierto.

Codepen es otra herramienta colaborativa de desarrollo web usada como un espacio para mostrar resultados en vivo.

StackBlitz

StackBlitz es otra herramienta de depuración/visualización en línea, que puede alojar e implementar aplicaciones full-stack usando React, Angular, etc.

# data[].attributes.attachment_link.description
JavaScript (JS) es un lenguaje de programación ligero, interpretado, o compilado justo-a-tiempo (just-in-time) con funciones de primera clase. Si bien es más conocido como un lenguaje de scripting (secuencias de comandos) para páginas web, y es usado en muchos entornos fuera del navegador, tal como Node.js, Apache CouchDB y Adobe Acrobat JavaScript es un lenguaje de programación basada en prototipos, multiparadigma, de un solo hilo, dinámico, con soporte para programación orientada a objetos, imperativa y declarativa (por ejemplo programación funcional).

# data[].attributes.body
Trabajo práctico número 1

# data[].attributes.attachment_link.readable_text
CONCEPTOS BÁSICOS DE TELEINFORMÁTICA. COMPONENTES DE UN SISTEMA DE COMUNICACIÓN DE DATOS. MODOS DE TRANSMISIÓN DE DATOS.
En esta época del desarrollo tecnológico, se puede expresar que la informática y las comunicaciones se encuentran en un grado tan alto de integración que es muy difícil determinar con exactitud cuál es la frontera entre estas disciplinas.

Las tecnologías usadas para satisfacer los problemas de comunicaciones y los de informática son exactamente las mismas.

La teleinformática, expresión que proviene de las palabras telecomunicaciones e informática, es el resultado de la irrupción de técnicas conocidas como de procesamiento distribuido, donde la importancia del puesto de trabajo individual, desplazó al criterio de cómputos centralizado, preparado para el procesamiento de datos.

Por otra parte el hecho de que transmisión de voz, textos, datos y vídeo, sea posible por un único medio físico, nos está mostrando un nuevo escenario tecnológico. El arrollador avance de la fibra óptica y otros sistemas de vanguardia permitirán en muy poco tiempo, más sistemas integrados como los señalados.

A todo lo expuesto debemos agregar el crecimiento de la microinformática, llamada "la revolución dentro de la revolución", el uso de sistemas interconectados de todos los tamaños es una realidad impuesta por la necesidad.

Todo este avance está encadenado con el progreso que en forma simultánea se ha dado en las comunicaciones de datos y que permiten a estos pequeños microordenadores conectarse a las redes públicas de transmisión de datos con conmutación y a través de ellas a los grandes bancos de datos.

Respecto a los campos de acción del proceso teleinformático cabe señalar las siguientes:

Es lo que conocemos como procesamiento electrónico de datos, donde el instrumento básico es el ordenador.

Concierne al cálculo científico y al diseño asistido por ordenador.

Es lo que se conoce como "Sistemas de fabricación asistidos por ordenador", entre los que podemos destacar los "robots".

Tiene que ver con la tendencia a incorporar en los productos finales, criterios informáticos o más precisamente microprocesadores de uso específico.

Se entiende por transmisión de datos al movimiento de información codificada, de un punto a uno o más puntos, mediante señales eléctricas, ópticas, eletroópticas o electromagnéticas.

Este requerimiento, originado en las organizaciones gubernamentales, industriales, comerciales, bancarias, empresariales, militares, etc., ha nacido por la necesidad de poner a disposición de ellas en un punto remoto la capacidad de proceso de un ordenador, ubicado en un punto que podríamos llamar central.

Ese punto puede estar dentro de la propia organización, próximo o alejado del ordenador central.

La diferencia importante reside en la distancia y la geografía del problema a considerar, pues en función de estos parámetros, puede ser necesario o no el uso de redes de comunicaciones.

Se puede así hablar de dos formas de transmisión de datos:

La propia organización generalmente construye las líneas de comunicaciones necesarias y, por lo tanto, los problemas técnicos cuando las distancias son pequeñas resultan mínimos y no requieren consideraciones especiales. Es el caso simple de un ordenador central o un miniordenador, que tiene conectadas, dentro de un edificio o en una superficie geográfica reducida, una serie de terminales. Generalmente, las comunicaciones físicas entre los diversos equipamientos se resuelven mediante cables coaxiales. Se trabaja con velociadades mayores y tanto las interfases eléctricas como los protocolos de comunicación son provistos por el fabricante del hardware.

Se necesitan líneas de telecomunicaciones para que sea efectiva, por lo que hay que tener en cuenta una serie de técnicas especiales: la Teleinformática o Telemática. En estos casos existen fuertes restricciones externas derivadas de las regulaciones legales de los sistemas de comunicaciones públicos. Los sistemas teleinformáticos se tienen así que adaptar a las características técnicas de la infraestructura de telecomunicaciones existente, que inicialmente es siempre la construida para el "servicio telefónico".

La palabra Teleinformática está constituida por la contracción de las palabras telecomunicaciones e informática. En ella se reúnen los aspectos técnicos de ambas especialidades.

Se puede definir la teleinformática como "la ciencia que estudia el conjunto de técnicas que es necesario usar para poder transmitir datos dentro de un sistema informático o entre puntos de él situados en lugares remotos o usando redes de telecomunicaciones".

Lo que se intenta con la teleinformática es lograr que un ordenador pueda dialogar con equipos situados geográficamente distantes, reconociendo las características esenciales de la información como si la conexión fuera local, usando redes de telecomunicaciones.

1.2.3. Modos de explotación de los sistemas informáticos y de los sistemas teleinformáticos.

En los sistemas informáticos, se puede procesar la información de las siguientes formas:

Cuando los trabajos se preparan antes de procesar y luego se ingresan ordenadamente (por lotes) al ordenador, que los procesa con la prioridad que se le indique.

Cuando sufre un procedimiento idéntico al proceso por lotes, pero con la variante que los datos son enviados usando redes de telecomunicaciones al ordenador que se encargará de procesarlos.

Cuando el ordenador y sus periféricos son compartidos, simultáneamente, por varios usuarios remotos, que efectúan trabajos diferentes entre sí, pero con apariencia de simultaneidad.

Un ordenador actúa en diálogo con sus equipos terminales en tiempo real, cuando devuelve los resultados con suficiente rapidez como para afectar el funcionamiento o interactuar con el medio que los produjo.

Cuando el tiempo de respuesta no tiene relación ni importancia con el medio que produjo la consulta.

En los sistemas teleinformáticos la información se puede procesar de las siguientes formas:

Cuando los datos que serán usados por el ordenador, se reciben en una terminal local, siendo grabados primero en tarjetas perforadas, medios magnéticos u otros equipos intermedios, para ser posteriormente ingresados al ordenador.

Si se tratara de la salida de datos con destino a un usuario remoto, el proceso sería análogo. Los datos que se han procesado en un ordenador se colocan en un soporte intermedio y a través de un terminal periférico son enviados al terminal distante.

Las características de estos procesos teleinformáticos, permiten un uso de los medios de comunicaciones en los momentos en que las tarifas son más bajas; tienen la particularidad de que no condicionan el inmediato uso del equipo central en el mismo momento de la llegada de datos.

Sin embargo son procesos lentos, que necesitan de soportes intermedios.

Su uso puede interesar, en los casos en que los datos no son necesitados en el centro de cómputos en forma inmediata o cuando , además, el uso de medios de transporte convencionales es poco confiable o demasiado lento, lo que obliga a usar medios de telecomunicaciones.

Cuando los datos de entrada pasan desde su lugar de origen a donde se utilizan en forma directa y, viceversa los datos procesados se envían desde el ordenador al usuario directamente.

Este proceso evita las etapas intermedias de perforación o grabación, para su posterior procesamiento.

Su uso es necesario en aquellas aplicaciones donde se necesita una rápida reacción por parte del sistema informático.

Cuando los datos enviados solicitan y reciben datos de respuesta.

Cuando los datos enviados no son procesados en forma directa con el objeto de dar una respuesta inmediata. Sin embargo, sí se puede confirmar la correcta recepción de ellos.

En este caso, los datos pueden o no ser recibidos por el ordenador hacia el cual están dirigidos. Lo que deberá quedar claro es que no se esperará una respuesta en forma inmediata.

En consecuencia, un proceso no interactivo puede estar conectado en cualquiera de las dos modalidades ya analizadas, en línea o fuera de línea.

Los sistemas teleinformáticos o también llamados "sistemas funcionales de comunicación de datos" son formas de trabajo que en general responden a necesidades concretas de los usuarios informáticos que trabajan en la modalidad "fuera de planta o remota".

Los principales objetivos que tiene que satisfacer un sistema teleinformático son los siguientes:

Reducir tiempo y esfuerzo.

Capturar datos en su propia fuente.

Centralizar el control.

Aumentar la velocidad de entrega de la información.

Reducir costos de operación y de captura de datos.

Aumentar la capacidad de las organizaciones, a un costo incremental razonable.

Aumentar la calidad y la cantidad de la información.

Mejorar el sistema administrativo.

Casos en que los sistemas informáticos, son especialmente aptos para que utilicen técnicas teleinformáticas:

Cuando se desea reducir un elevado volumen de correo, de llamadas telefónicas o de servicios de mensajería.

En los casos en que se efectúen muy a menudo operaciones repetitivas, tales como crear o copiar a ser procesados o directamente duplicar información ya procesada.

Cuando sea necesario aumentar la velocidad de envío de la información, mejorando las funciones administrativas.

En la ejecución de operaciones descentralizadas.

Para mejorar el control, descentralizando la captura de datos y centralizando su procesamiento.

En los casos en que es necesario disminuir riesgos en el procesamiento de la información, debido a problemas técnicos del hardware.

Cuando sea menester mejorar la actividad de planificación en la organización.

Cada sistema teleinformático cubre un conjunto de necesidades y, por lo tanto, posee especiales características que diferencian unos de otros.
2.1.1. Sistemas remotos por lotes ("batch remoto").
Son sistemas que ponen a disposición de un usuario remoto (localizado en un punto alejado del ordenador), la capacidad de proceso de éste en la modalidad "por lotes".

Este sistema teleinformático posee dos variantes:

Las características que distinguen a este sistema teleinformático son las siguientes:

No es crítico el tiempo en que se debe efectuar el proceso. Esto permite en muchos casos el uso de horas nocturnas, que en general poseen mejores tarifas de telecomunicaciones y una mejor tasa de errores de transmisión.

Llevan implícito la modalidad de trabajo por lotes, sea para hacer llegar datos al ordenador o bien para enviar por medios de telecomunicaciones trabajos a ser procesados en un ordenador central.

La entrada, proceso y salida de los resultados se producen secuencialmente.

No hay procesos interactivos, salvo en algunos casos particulares, en los que se efectúe el control de errores.

Se manejan en los procesos grandes cantidades de datos.

Utilizan normalmente los siguientes medios para la entrada o salida de datos:

Los ordenadores que se usan en estos procesos son de tamaño grande o mediano.

Todos los sistemas que usan estas modalidades de trabajo tienen equipos de almacenamiento por acceso directo (en general discos fijos o removibles). La capacidad de este almacenamiento depende del tamaño de la instalación y de la aplicación que está en línea.

Se utilizan en todos los sistemas de gran porte procesadores de comunicaciones delanteros ("front end processor") que además de manejar las comunicaciones efectúan el preprocesamiento de la información teletrasmitida. En algunos casos estos equipos poseen su propio almacenamiento y algunas funciones, tales como edición de datos o programas, conversión de formatos, etc.

Los equipos terminales que se usan desde un punto remoto, pueden ir desde una terminal común tipo teleimpresor, hasta equipos miniordenadores o equipos auxiliares asociados como pueden ser unidades de discos o de cintas magnéticas.

Se utilizan normalmente líneas de transmisión de datos a velocidades iguales o superiores a 1.200 Baudios

En este caso se puede usar para el envío de los datos o trabajos la modalidad "en línea" o "fuera de línea".

Cuando se trabaja en la modalidad "en línea", los datos se suelen transmitir al ordenador en unidades pequeñas tipo mensajes o transacciones, que son procesadas si bien son recibidas.

Cuando se trabaja en el modalidad "fuera de línea", los datos se suelen transmitir del terminal remoto directamente a un soporte magnético, en general unidades de cinta o discos.

La memoria central y periférica es diseñada de acuerdo con los volúmenes de datos a almacenar y también con la frecuencia con que éstos son procesados.

Es muy importante la seguridad del sistema, pues en caso de caída puede haber un gran número de operadores inactivos.

Son aquellos que permiten el acceso desde un equipo terminal de datos a información mantenida en archivos de un ordenador central.

Este sistema tiene por finalidad la recuperación de la información contenida en los archivos o bases de datos, la modificación de ella o una combinación de ambas. Por ejemplo: sistemas de banca automática, reservas de pasajes, sistemas "MIS" (sistemas de información a la dirección), etc.

Algunas de las características de estos sistemas son:

La información se mantiene generalmente almacenada en unidades de acceso directo.

Cuando se usan aplicaciones que emplean bases de datos, se observan las siguientes particularidades:

La planificación de las consultas está estructurada para permitir el acceso y la actualización de los archivos, pero nunca la modificación del diseño de la base de datos.

Estos sistemas están caracterizados por procedimientos de diálogos interactivos, entre el operador del equipo terminal de datos y el ordenador central.

El proceso de las transacciones se realiza en al modalidad "on line" y permite a los usuarios acceder simultáneamente a una o más bases de datos.

Estos sistemas son posiblemente los más complejos en cuanto a la implementación del hardware y del sofware. Por ello, se suele estructurar el mantenimiento y la actualización de las bases de datos en forma separada, realizándolo personal autorizado y en el ordenador central. Esto tiene una gran importancia en sistemas donde muchos usuarios distintos acceden a una base de datos única, para distintos propósitos.

Los datos o combinaciones son accesibles selectivamente a cada aplicación y pueden ser modificados en cualquier momento independientemente de la aplicación. Su tráfico es estructurado en transacciones de unos pocos mensajes.

Los tiempos de respuesta no deben exceder los 2 a 4 segundos.

El tamaño de los ordenadores puede ser de variados tipos.

Respecto a la seguridad y privacidad de los datos a manejar, se deben tomar las medidas correspondientes para que solamente las personas autorizadas puedan acceder a la información según el grado de responsabilidad de las mismas. También se pueden implementar sistemas de clave de acceso de diferentes niveles. La seguridad física de este tipo de sistemas se basa en la redundancia.

Debido a que las transacciones de consulta o modificación son de una pequeña cantidad de bytes, no se requiere en general velocidades mayores a los 1.200 Baudios.

Un sistema especial que responde a las características de este tipo de sistemas teleinformáticos es el "servicio videotex".

2.1.4. Sistemas teleinformáticos interactivos.
Son aquellos que se caracterizan por un diálogo continuo entre el equipo terminal de datos del usuario y el ordenador central.

Algunas de las características de estos sistemas son:

Son aquellos en que un ordenador central (o miniordenador), recibe datos del estado de un proceso que está controlado, los procesa, obtiene resultados y luego en base a ellos toma decisiones, las cuales están en capacidad de influir en el desarrollo del mismo.

Características de estos sistemas:

Son sistemas muy especializados para cada tipo de aplicación.

Normalmente, recogen mediante sensores estratégicamente ubicados, medidas sobre el estado de un proceso y compara estas medidas con el estado deseado del mismo.

Operan en tiempo real; es decir que el tiempo de respuesta a una medición de datos debe ser lo suficientemente pequeño, como para que la acción correctora producto del proceso en el ordenador, influya en el sistema con el que actúa.

Los datos siempre son enviados sobre un conjunto determinado de parámetros preestablecido.

Un ejemplo de este tipo de sistemas son los sistemas de navegación de los cohetes portadores de vehículos espaciales.

Son aquellos en que un ordenador central atiende a distintos equipos terminales de datos ubicados en forma remota, con trabajos independientes uno del otro, y que van alternando la ocupación del procesador por pequeños intervalos de tiempo.

Algunas de las características de estos sistemas son:

Son aquellos que permiten el envío de mensajes entre distintos puntos de una red teleinformática mediante el uso de uno o más ordenadores que efectúan la recepción de los mismos, los almacenan y luego se encargan de retransmitirlos a los puntos de la red, para los que estaban destinados.

Algunas de las características de estos sistemas son:

La finalidad de este circuito es permitir la intercomunicación de un equipo terminal de datos (ETD) denominado fuente, con otro equipo ETD, denominado colector, a través de un medio de comunicaciones analógico.

La necesidad de establecer este circuito radica en el problema siguiente: los equipos terminales de datos producen señales digitales y solamente están en condiciones de recibir y procesar este tipo de señales. Sin embargo, estos datos deben ser transportados por redes de comunicaciones que sólo admiten señales del tipo analógicas. Por lo tanto, deben existir elementos que posibiliten la modificación de las señales digitales mediante un procedimiento que se denomina modulación, a los efectos de que su transmisión sea posible sobre las redes analógicas.

Hay tres formas básicas de comunicación:

Entendiendo por equipos terminales aquellos que no tienen capacidad de procesamiento de la información.
2.2.1. Equipos terminales de datos (ETD).
Se pueden dividir en dos partes: fuente y colector de datos y el controlador de comunicaciones.

La parte que actúa como fuente o colector de datos es, en realidad, el equipo informático propiamente dicho, con aptitud de generar, recibir o procesar información en modo local. Estos, pueden cubrir una gama muy amplia de equipos informáticos, que pueden ir desde terminales no inteligentes hasta grandes ordenadores, pasando por equipos periféricos, como pueden ser unidades de cinta magnética, unidades de discos, lectoras de tarjetas o simples ordenadores personales o miniordenadores.

El controlador de comunicaciones, como su nombre lo indica, posee los elementos encargados de las funciones de comunicación, incluyendo en algunos casos facilidades de detección y corrección de errores, elementos que permitan controlar el diálogo y la interconexión de las interfases con la red.

Entre los equipos informáticos y las redes analógicas, deben conectarse equipos que actúan como interfases que se denominan "Equipos terminales de circuitos de datos", comúnmente conocidos como equipos Modems de datos o simplemente Modems. La palabra Modem es una contracción de las palabras MODulador-DEModulador, funciones éstas principales en el trabajo de estos equipos.

Su misión básicamente es la de transformar las señales digitales producidas por el ETD, en señales analógicas capaces de ser transmitidas por la red y viceversa.

Adicionalmente, los equipos modems, realizan otras funciones como, por ejemplo, el establecimiento y liberación del circuito de comunicaciones.

Es el conjunto de medios de transmisión que permite unir los dos equipos de terminación del circuito de datos - ETCD (Modems), cuya constitución dependerá de la distancia, velocidad, etc., y que debe cumplir unas determinadas especificaciones apoyándose en el infraestructura de comunicaciones permanente, pública o privada.

Es el circuito de unión entre el equipo ETD que actúa como fuente de datos y el ETD que actúa como colector de datos.

Tanto al iniciarse el circuito como al finalizar las señales que salen o llegan al ETD de este circuito son señales digitales, que pueden entender los equipos informáticos.

Es el camino formado por los modems y la línea de comunicaciones. Su misión es entregar en la interfase con el ETD (Colector), las señales bajo la misma forma y con idéntica información que recibió en al interfase con el ETD (Fuente).
3. MODOS DE TRANSMISIÓN DE DATOS.
Se denomina " Byte ", al número de bits necesarios, en un dado sistema de codificación, para poder representar un carácter. Así, un Byte puede tener un número variable de bits, dependiendo de que se usen cinco, seis, siete u ocho bits para formar un carácter.

Esta unidad de medida se suele usar frecuentemente para indicar la capacidad de almacenamiento de la información en memoria o en equipos auxiliares. Con ello se indica precisamente el número de caracteres que pueden ser almacenados en ellos.

Cuantos más bits son necesarios en un sistema dado de codificación para tener un Byte, mayor es la cantidad de información que lleva cada carácter.

Se define como palabra a un número de caracteres fijos (Bytes), que un ordenador trata como una unidad, cuando los transfiere entre sus distintas unidades o los somete a distintos procesos, como lectura, escritura en memoria, operación aritmética, etc. Entendiendo por caracteres, letras, números o símbolos especiales.

El bloque es un conjunto formado por algunas decenas de bits, que recibe un tratamiento único a los efectos de la transferencia que un ordenador realiza entre su memoria y los equipos periféricos.

Se denomina velocidad de modulación, a la inversa de la medida del intervalo de tiempo nominal más corto, entre dos instantes significativos sucesivos de la señal modulada.

También se suele definir como "la inversa del tiempo que dura el elemento más corte de señal que se utiliza para crear un pulso".

La velocidad de modulación se mide en Baudios.

Vm = 1 / T(seg)

La velocidad de modulación, también se suele llamar velocidad de señalización.

Esta velocidad está relacionada con la "línea de transmisión".

Se usa en las transmisiones asincrónicas.

Se denomina velocidad binaria, a la velocidad global de transmisión expresada en bits por segundo.

Se denomina velocidad de transmisión en un canal de datos, al número de dígitos binarios transmitidos en la unidad de tiempo, independientemente que los mismos lleven o no información.

La velocidad binaria o de transmisión se mide en bits por segundo.

Esta velocidad está relacionada con el "circuito de datos".

Se usa en los sistemas sincrónicos.

Es aquella en la que los n bits que componen cada Byte o carácter se transmiten en un solo ciclo de n bits.

La transmisión en modo paralelo posee las siguientes características:

Este modo es que se usa en los ordenadores para realizar la transferencia interna de los datos.

En estos casos se transmite cada conjunto de n bits, seguido por un espacio de tiempo y luego nuevamente otro conjunto de n bits, y así sucesivamente.

En la transmisión en paralelo se pueden usar dos formas de transmisión distintas. Una es disponer de n líneas diferentes a razón de una por bit a transmitir: la otra, es usar una única línea, pero enviando cada bit mediante un procedimiento técnico que se denomina multiplexación.

Cuando se usa la transmisión en paralelo, se emplean generalmente altas velocidades, dado que esa es precisamente, una de sus características más importantes: enviar más bits en menor tiempo posible. En estos casos las velocidades se miden en Bytes o caracteres por segundo.

En general no se usa este tipo de transmisión, cuando las distancias superan las decenas de metros debido a que el tiempo de arribo de los bits difiere de una línea a otra, situación ésta que se agrava con el aumento de la distancia.

Es aquella en las que los bits que componen cada carácter se transmiten en n ciclos de 1 bit cada uno.

La transmisión en modo serie posee las siguientes características:

En este caso, se envían un bit detrás de otro, hasta completar cada carácter.

Este modo de transmisión es el típico de los sistemas teleinformáticos.

En muchas ocasiones, las señales que son transmitidas por los vínculos de telecomunicaciones, al llegar a los equipos informáticos deben pasar al modo paralelo y viceversa. Este proceso de transformación se denomina deserialización y serialización, respectivamente.

La secuencia de los bits transmitidos se efectúa siempre al revés de cómo se escriben las cifras en el sistema de numeración binario. Cuando se transmite con bit de paridad, éste se transmite siempre en último término.

La transmisión en modo serie tiene dos procedimientos diferentes, el denominado asincrónico y el sincrónico.

En el procedimiento asincrónico, cada carácter a ser transmitido es delimitado por un bit denominado de cabecera o de arranque, y uno o dos bits denominados de terminación o de parada. El bit de arranque tiene funciones de sincronización de los relojes del transmisor y del receptor. El bit o bits de parada, se usan para separar un carácter del siguiente.

En el procedimiento sincrónico, existen dos relojes uno en el receptor y otro en el transmisor. La información útil es transmitida entre dos grupos, denominados genéricamente delimitadores.

Es el recorrido físico que es necesario establecer para que una señal eléctrica, óptica o electro-óptica, se pueda desplazar entre dos puntos (uno llamado fuente y otro colector). Existen otras denominaciones tales como: línea, enlace, facilidad, etc.

Los canales pueden ser analógicos o digitales. Tanto los canales analógicos pueden llevar señales digitales previamente moduladas, como los canales digitales pueden llevar señales analógicas previamente digitalizadas.

Los distintos tipos de transmisión de un canal de comunicaciones pueden ser de tres clases diferentes:
Método simplex.
Es aquel en que una estación siempre actúa como fuente y la otra siempre como colector. Este método permite la transmisión de información en un único sentido. Un ejemplo de servicio simplex es el que brindan las agencias de noticias a sus asociados
Método semidúplex.
Es aquel en que una estación A en un momento de tiempo, actúa como fuente y otra estación corresponsal B actúa como colector; y en el momento siguiente, la estación B actuará como fuente y la A como colector. Este método permite la transmisión en las dos direcciones, aunque en momentos diferentes. Por ejemplo, la conversación entre dos radioaficionados que están dialogando, pero donde uno espera que el otro termine de hablar para continuar el diálogo; nunca pueden ambos hablar simultáneamente.
Método dúplex.
Es aquel en que dos estaciones A y B, actúan como fuente y colector, transmitiendo y recibiendo información simultáneamente. Este método permite la transmisión en las dos direcciones, en forma simultánea. Por ejemplo, la conversación telefónica entre dos personas que no se escuchan y pretenden hablar simultáneamente.

1

# data[].attributes.attachment_link.keywords[]
componentes de un sistema de comunicación de datos. modos de transmisión de datos

# data[].attributes.attachment_link.title
Encuentra aquí información de Teleinformática para tu escuela ¡Entra ya! | Rincón del Vago

# data[].attributes.attachment_link.description
CONCEPTOS BÁSICOS DE TELEINFORMÁTICA. COMPONENTES DE UN SISTEMA DE COMUNICACIÓN DE DATOS. MODOS DE TRANSMISIÓN DE DATOS. En esta época del desarrollo tecnológico, se puede expresar que la informática y las comunicaciones se encuentran en un grado tan alto de integración que es muy difícil determinar con exactitud cuál es la frontera entre estas disciplinas.

# data[].attributes.attachment_link.description
La TeleInformática es una disciplina con bases científicas y tecnológicas, que fusiona las Telecomunicaciones, la Informática y Multimedia; su dominio, conocimiento está sobre el tratamiento de los datos en forma remota, utilizando sistemas de comunicaciones.

# data[].attributes.body
Teleinforatica

# data[].attributes.attachment_link.readable_text
La teleinformática es algo que muchas personas ponemos en práctica diariamente y no nos damos cuenta de ello. A través de la informática, bien sea accediendo a internet o intercambiando ciertos datos entre redes de computadora, esto es lo que nos ha ayudado hoy en día a hacer más fácil nuestro trabajo, en este resumen tendrá la información necesaria para entender la teleinformática.

¿Qué es la teleinformática?

La teleinformática es la técnica utilizada para la transmisión de todos los datos de computadoras o redes que se encuentran a distancia, con la finalidad de intercambiar información o cualquier otro contenido que se desee. Para llevar a cabo este proceso es obligatorio utilizar las telecomunicaciones bien sea a través de un proveedor de servicio telefónico o de cualquier otro medio que pueda ser utilizado para la transmisión de cualquier información.

Términos relacionados a la teleinformática

Algunos términos que le servirán para desarrollar este tema se muestran a continuación:

Terminales remotos: Este término se les da a todos aquellos sistemas teleinformáticos en los que todos los datos a transmitir son enviados a un equipo central el cual puede ser llamado también como unidad terminal remota. Es básicamente el lugar donde la información a difundir será depositada y es donde se conectarán los demás equipos o computadoras para acceder a ella y poder distribuirla para los demás.

Módem: Un módem es un aparato de funcionamiento electrónico el cual tiene como finalidad transformar una señal analógica en una señal digital, igualmente en el caso contrario, esto con la finalidad de proveer a una red de un servicio de transmisión de datos lo que en términos generales podría ser conocido como una conexión LAN o cualquier otra similar donde se accede a Internet.

Adaptadores: La función que tienen estos es únicamente aumentar la magnitud de la señal que se va a transmitir a una red y permitir que esta sea lo suficientemente decente para poder transmitir datos con una buena velocidad.

Unidad de control de comunicaciones: Este es un dispositivo que tiene como función principal la gestión de cualquier tarea relacionada con la comunicación de una red, aliviando la carga de trabajo que tiene una computadora principal.

Red de telecomunicaciones: El trabajo de esta red es actuar como transmisor para lo que son los datos guardados en una computadora principal, esta se encarga de enviar la información bien sea de forma analógica o digital para que luego el módem se encargue de transmitir esta señal como deba realizarlo.

Velocidad de transmisión: Esta es la rapidez con la que el tráfico de datos es transmitido por una línea de telecomunicaciones. Esto se calcula en diferentes unidades tales como bits por segundo, caracteres por segundo o baudios.

El canal de comunicación: Este último se refiere al medio utilizado para que tanto el equipo emisor como el equipo receptor puedan intercambiar datos de la manera más rápida y segura posible y poder ofrecer un servicio bastante óptimo.

Saber sobre Redes informáticas, sin duda le ayudará a entender un poco más este tema si desea dominar esta área aún más.

¿Cuáles son los métodos de transmisión de datos que utiliza la teleinformática?

Para la transmisión de datos o información, la teleinformática utiliza dos métodos óptimos los cuales son los que se muestran a continuación:

El método de transmisión en serie: La transmisión de información en este método se da enviando cada bit detrás del otro en un solo circuito.

Método de transmisión en paralelo: Con este método los datos o la información son transmitidos de forma simultánea recurriendo a hilos de comunicación por ejemplo los bits, estos se encargan de componer cada palabra para luego transmitirla con la mayor integridad posible.

¿Cuáles son los procesos de sincronización de datos?

Los procesos que se utilizan en la teleinformática para esta sincronización se clasifican en 3 niveles y son los siguientes:

La transmisión de caracter se realiza a través de dos métodos básicos y estos son los siguientes:

La transmisión Asíncrona: Este método consiste en transmitir la información sea el momento que sea. Cada octeto de transmisión viene junto a un bit de arranque y un bit para su parada. Esta transmisión en situaciones normales puede alcanzar una velocidad máxima de 1200 bps (Bites por segundo).

La transmisión Síncrona: En este método tanto el receptor como el emisor cuentan con una sincronización a través de relojes cuya finalidad es controlar la transmisión de cada octeto utilizado en este proceso. Este rango de velocidad puede variar partiendo desde 2400 bps hasta 19200 bps.

Según el sentido del flujo, la teleinformática también transmite en tres formas diferentes y estas son:

¿Cómo es la circulación de datos?

En la teleinformática, la circulación de datos se da gracias a una señal digital que se codifica de formas diferentes de acuerdo a la electricidad. Está demostrado que esta transmisión no sirve mucho para distancias largas y por esta razón se han podido diseñar varios especializados para la circulación de los datos a parte de contar con ciertos medios que ya existen con anterioridad.

Medios utilizados en la teleinformática para la transmisión de datos

Tal vez ya conozca estos medios de transmisión, pero no tenía idea de ello, los medios que utilizan para esto son los siguientes:

Cables de cuadretes: Este tipo de cable utiliza internamente cuatro hilos que actuarán como conductores y levan un trenzado entre sí de diferentes formas, la forma del trenzado puede variar dependiendo del uso que se vaya a dar al cable o el tipo de datos que se vaya a transmitir.

Cables de pares: Este es un tipo diferente de cable que se utiliza en comunicaciones de teléfonos. Cuentan con dos hilos conductores y tienen un material aislante que los protege, los mismos tienen un trenzado especial que sirve para evitar las interferencias.

Los cables coaxiales: Estos se conforman de un hilo central que actúa como conductor y otro hilo de tipo cilindro en su exterior. Este tipo de cable prácticamente no tiene interferencias sirve para trabajar con anchos de banda de tamaño grande, esto permite soportar una gran cantidad de canales de transmisión sin inconvenientes.

Microondas: Este consiste en la transmisión de datos a través de unas ondas electromagnéticas y el ancho de banda no cuenta con un límite como tal. Aguanta una separación de máximo 50 km a menos que se manden a instalar ciertos repetidores de transmisión.

Transmisión por satélite: Para esta transmisión se requieren los repetidores y estos se deben enlazar a una microondas. De esta forma se establece un satélite de tipo artificial y se desarrolla un alcance de distancias bastante largas, el punto vulnerable de esta es cuando hay humedad atmosférica o precipitaciones ya que se reduce enormemente su capacidad.

Transmisión por fibra óptica: Esta transmisión se utiliza como una señal de luz que se emite a fin de proteger todos los rayos láser. Esta funciona en un 100%, pero es bueno que sepan que los costos de esta transmisión son bastante elevados.

Los Puertos de comunicación podrán brindar el refuerzo en conocimiento necesario para entender un poco más la transmisión de datos.

¿Qué es un protocolo de comunicaciones? Un protocolo de comunicaciones es el procedimiento que se utiliza para controlar de la mejor manera la transmisión de cada dato y como se comparten estos cuando hay conexión entre un equipo principal y una estación de trabajo o un equipo secundario. Para controlar estas transmisiones y comunicaciones, existen unos protocolos internacionales que llevan a cabo esta labor y esos son los siguientes:

El protocolo ISO (International Standard Organization): Gracias a este protocolo que algunos lo asocian con el protocolo OSI, es que un equipo puede conectarse con otro de diferentes marcas.

El protocolo CCITT (Consultive Commite for International Telephone and Telegram): Este es un protocolo que permite acceder al intercambio de información a través de correos electrónicos y otros sistemas de envío de información en bandejas de entrada y salida.

¿Qué son las redes de transmisión de datos en la teleinformática?

Estas redes de transmisión representan el resultado de un trabajo entre equipos o unidades físicas y lógicas permitiendo el intercambio de información entre usuarios sin importar la distancia en la que estos se encuentren. Estas redes se clasifican en tres grupos los cuales son los siguientes:

Redes dedicadas: Estas redes se adquieren de forma alquilada entre una o más personas y así poder utilizarlas exclusivamente. Son redes cerradas y no están disponibles para usuarios externos, estas a su vez se clasifican en:

1. Red punto a punto: Esta es una conexión fija que se reserva para que siempre se mantenga exclusiva, un ejemplo de esto un terminal bancario, el cual tiene una conexión con la central del banco que posee el derecho de la misma.

2. Red multipunto: Esta se realiza entre varios terminales a una computadora central. Para esta conexión solamente se utiliza una línea de teleproceso. Cómo ejemplo podemos citar oficinas bancarias que tienen conexión con una computadora de forma remota.

3. Red de multipunto en serie: En este caso ningún terminal depende de un concentrador de comunicaciones, los terminales se encargan de formar un lazo de conexión entre sí con el que trabajarán luego.

Redes de transmisión de datos en un área extensa

Red tipo Télex: Esta es una de las redes más antiguas de categoría pública. Con esta se puede obtener un intercambio textual en tema de información y esto se da a través de unas terminales que llevan por nombre Teletipo o Téletype en francés.

Red telefónica conmutada: Este tipo de red ofrece cobertura amplia bien sea a nivel nacional e internacional. Se utiliza para todas las comunicaciones que se llevan a cabo vía teléfono.

Red Iberpac: Este tipo de red es utilizado por los bancos. El objetivo de esta red es establecer un sistema único para la transmisión de datos totalmente segura.

Estas son las famosas redes WAN (Wide Área Network) este tipo de redes pertenece a organismos del estado o compañías muy grandes que mantienen una comunicación directa con cada usuario. Estas se muestran así:

Redes locales para la transmisión de datos

Estas son las famosas redes LAN (Local Área Network). Estas son de corto alcance y se instalan en oficinas, hogares o edificios de tamaños no tan grande, la idea de estas es conectar todos los equipos cercanos para que compartan sus datos de forma bastante rápida sin complicaciones, estas redes permiten que se establezcan conexiones de enlace para ampliar su rango operativo, se clasifican de la siguiente forma:

Es una estructura que se utiliza para poder hacer una transmisión de datos en varios equipos conectados a una red, esta estructura se clasifica en:

Para establecer estas redes se necesita saber de conexiones, los Conectores eléctricos podrán ayudarle a tener una mejor idea sobre esto.

Servicios de valor añadido

La función de estos es transmitir los archivos de acuerdo al formato de cada página. Se dividen en 3 tipos diferentes:

# data[].attributes.attachment_link.title
Teleinformática: ¿Qué es? Y todo lo que debes saber

# data[].attributes.attachment_link.description
La teleinformática es algo que muchas personas ponemos en práctica diariamente y no nos damos cuenta de ello. A través de la informática, bien sea accediendo a internet o intercambiando ciertos datos entre redes de computadora, esto es lo que nos ha ayudado hoy en día a hacer más fácil nuestro trabajo, en este resumen tendrá la información necesaria para entender la teleinformática.

# data[].attributes.attachment_link.keywords[]
empresa verifica si sus traajadores cumplen con las metas propuestas

# data[].attributes.attachment_link.keywords[]
teleinformatica transmision y comunicacion de la informacion

# data[].attributes.attachment_link.keywords[]
tecnica que utilizo para enviar un mensaje

# data[].attributes.attachment_link.keywords[]
unioversidades verifican si sus estudiantes cumplen con las metas o trabajos solicitados

# data[].attributes.attachment_link.title
TELEINFORMATICA - que es teleinformatica

# data[].attributes.attachment_link.description
Este Cmap, tiene información relacionada con: TELEINFORMATICA, Emisor Banco me transfiere informacion a mi cuenta Quien crea el mensaje y lo envia, TELEINFORMATICA Transmision y Comunicacion de la informacion Estudio y tecnicas y manejo de la informacion Telecomunicacion, Receptor Recibo la informacion de mi cuenta Quien recibe el mensaje y

# data[].attributes.attachment_link.readable_text
TeleinformáticaIntroducción Todos los días
cada uno de nosotros emplea las Telecomunicaciones en las
actividades personales y de trabajo. Siempre utilizamos el
teléfono para tener conversaciones a distancia y poco a
poco estamos integrando a una sociedad en la cual la computadora
personal y la transferencia de información juegan un papel
muy importante de desarrollo.

TeleinformáticaConceptos y Definiciones
Teleinformática es la técnica que trata de
comunicar los datos y los equipos informáticos distantes.
Terminal remoto es un sistema teleinformático donde se
envían los datos a una computadora central. Red de
telecomunicaciones es un medio físico empleado par a la
transmisión de datos. En esta se envía la
información en forma de señal analógica o
digital. Los Módem transforman la señal digital en
analógica y viceversa. Los adaptadores no varían la
forma de la señal si no solamente la magnitud de
está. La Unidad de control de comunicaciones dispositivo
especializado en la gestión de todas las tareas inherentes
a la comunicación, descargando de este trabajo la
computadora central. Canal de comunicación es el enlace
que se establece entre un equipo emisor y un equipo receptor
permitiendo la trasmisión de datos en un sentido
único. Velocidad de trasmisión cantidad de
información que se trasmite por una línea de
telecomunicación (baudios, bits por segundo,
carácter por segundo).

TeleinformáticaModos de Transmisión La
transmisión de información se realiza de dos
formas: Serie: Se envía un bit tras otro en un
único circuito Paralelo: Se transmiten
simultáneamente tanto en hilos de comunicación como
bits que componen la palabra

TeleinformáticaModos de Transmisión Existen tres
niveles en el proceso de sincronización A nivel de bit A
nivel de carácter A nivel de Bloque Existen dos modos
básicos de transmisión de caracteres
Asíncrona: Envían la información en
cualquier momento, cada uno de los octetos va precedido de un bit
de arranque y uno de parada , la velocidad de transmisión
máxima es a 1200 bps Síncrona: El emisor y el
receptor disponen de relojes sincronizados que controlan la
duración constante de cada octeto transmitido, las
velocidades oscilan entre 2400 y 19200 bps

TeleinformáticaModos de Transmisión Existen tres
modos de trasmisión según el sentido de flujo.
Simplex: los datos se envían en un único sentido de
una estación emisora a una receptora. Semiduplex o
Half-dúplex: el envió de datos se realizan en ambos
sentidos pero no simultáneamente, cada equipo hace las
veces de emisor y receptor. Dúplex o full-Dúplex:
se realiza a través de la línea de tele-proceso en
ambos sentidos simultáneamente es mas ágil pero
menos utilizado por costos.

TeleinformáticaMedios de Transmisión La
información circula en forma de señal digital y
esta es codificada de dos formas que corresponden a intensidades
diferentes de corriente eléctrica, se ha demostrado que
esta forma de transmisión es inadecuada para largas
distancias y por esto se han diseñado diferentes medios de
transmisión especializados y además se han
utilizado medios ya existentes.

TeleinformáticaMedios de Transmisión Los medios de
transmisión mas utilizados son los siguientes: Cables de
Pares: Se emplean también en comunicaciones
telefónicas, estos cables son dos hilos conductores y
están recubiertos de material aislante y trenzados para
disminuir interferencias Cables de Cuadretes: Parecidos a los
anteriores pero se utilizan cuatro hilos conductores, de
diferentes tipos según el trenzado

TeleinformáticaMedios de Transmisión Cables
Coaxiales: Formado por un hilo conector central y otro
cilíndrico exterior. Este sistema reduce enormemente las
interferencias, permite transmitir a altas frecuencias y su
capacidad o ancho de banda es bastante grande, con lo cual puede
soportar un elevado número de canales de
información. Microondas: La información se
transmite por el aire mediante ondas electromagnéticas. El
ancho de banda es prácticamente ilimitado con
separación máxima de 50 km salvo que se instalen
repetidores intermedios

TeleinformáticaMedios de Transmisión Vía
Satélite: Es la transmisión con repetidores, en un
enlace microondas, de un satélite artificial lo cual
alcanza grandes distancias , el inconveniente se presenta cuando
la transmisión falla debido a los cambios
climáticos Fibra Óptica: Se utiliza como medio
físico la fibra de vidrio y como señal la luz,
emitida como proyector de rayos laser , no tiene casi perdidas
pero el método es muy costoso

TeleinformáticaProtocolos de Comunicaciones Protocolo de
comunicaciones : es un conjunto de normas, convenciones y
procedimientos que regulan la comunicaciones de datos y la
compartición de procesos entre diferentes equipos, bien
totalmente o bien en algunos de sus aspectos Para ello existen
organismos internacionales encargados de dictar las normas
necesarias como son: ISO (International Standard Organization)
CCITT (Consultive Commite for International Telephone an
Telegragh)

TeleinformáticaProtocolos de Comunicaciones

TeleinformáticaProtocolos de Comunicaciones

TeleinformáticaRedes de transmisión de datos
Conjunto formado por los equipos y los medios físicos y
lógicos que permiten la comunicación de
informaciones y la compartición de procesos entre
diferentes usuarios a cualquier distancia que se encuentren. Se
clasifican en tres grandes grupos. Redes dedicas Redes de
área extensa Redes de área local.

TeleinformáticaRedes de transmisión de datos Redes
dedicadas: Son instaladas o alquiladas por uno o varios usuarios
para uso exclusivo, estando cerradas, por tanto, a las
comunicaciones de otros usuarios ajenos: Las principales son: Red
punto a punto: consiste en una conexión fija, reservada en
exclusividad. Ej: Un terminal bancario está conectado a su
computadora central. Red multipunto: Se conectan varios
terminales a una computadora central por medio de una sola
línea de teleproceso. Ej: Aquellas oficinas bancarias que
disponen de varios terminales conectados a una computadora
remota. Red multipunto serie: los terminales no se conectan a un
concentrador de comunicaciones, sino entre ellos forman un
lazo.

TeleinformáticaRedes de transmisión de datos Redes
de área extensa Redes WAN (Wide Area Network), perteneces
a grandes compañías u organismos oficiales abiertas
a la comunicación de cualquier usuario. Red télex :
una de las más antiguas redes públicas, permite
intercambio de información textual por medio de terminales
denominadas teleimpresoras o teletipos. Red telefónica
conmutada: amplia cobertura, nacional e internacional, es
utilizada en las comunicaciones orales por teléfono. Red
Iberpac: utilizada por el sector bancario, su objetivo es el
establecimiento de una red nacional especializada en
transmisión de datos.

TeleinformáticaRedes de transmisión de datos Redes
locales Conocidas también como redes LAN (Local Area
Network) son las instaladas en un dominio geográfico
limitado, como puede ser el interior de una empresa u organismo
con el objetivo de satisfacer las necesidades
informáticas, integrando todos los equipos existentes para
aprovechar al máximo sus capacidades de proceso y
almacenamiento. Existe la posibilidad de establecer un punto de
enlace con otras redes locales o extensas ampliando de esta
manera las posibilidades de comunicación de todos los
usuarios de la red mediante diferentes conexiones que
según sus características pueden ser: Puentes
(bridges). Pasarelas (gateways). Encaminadotes (rotures).

TeleinformáticaRedes de transmisión de datos
Denominados topología de una red a la estructura utilizada
en la distribución de los equipos conectados a la misma.
Las principales topologías para redes locales son: Red en
bus La comunicación queda establecida de todos a todos por
medio de una línea bus que los recorre. Red en anillo
Consiste en un bus cerrado en sus extremos al cual están
conectados todos lo equipos. Red en estrella Todos lo equipos
están conectados mediante líneas independientes a
un controlador central encargado de realizar la
conmutación de comunicaciones y la gestión de los
recursos de la red.

TeleinformáticaMétodos de Acceso en redes locales
Las redes locales utilizan un canal de comunicación
común que conecta sus distintos nodos. Sólo uno de
ellos puede transmitir en cada momento, por lo que es necesario
establecer algún método que permita el mejor
aprovechamiento del canal, distribuyendo su utilización de
una manera racional. El factor más característico
de una red local es un protocolo de control de acceso al medio.
De é l dependen los parámetros básicos del
funcionamiento de la red como son el rendimiento, la fiabilidad y
la gestión de la red. Métodos de Acceso mas
utilizados: Método CSMA/ CD (Carrier Sense Multiple Access/
Collision Detect), es el mas habitual en redes con
topología en bus. Así funciona: Cada nodo de la red
que desea acceder a la misma, primero escucha para detectar si
hay otra transmisión de proceso. Si es así, espera
un periodo de tiempo aleatorio antes de volver a intentarlo. Pero
puede suceder que dos o más nodos inicien una
transmisión a la vez, con lo que se produce una
colisión y la señal se deteriora haciéndose
irreconocible. Método de paso de testigo (Token Pass), se
utiliza en redes con topología de anillo y en menor medida
en redes en bus. Consiste este método en la
utilización de un paquete de información especial,
el testigo que cada nodo recibe el anterior y retransmite al
siguiente, indicándole de este modo que la red esta
libre.

TeleinformáticaServicios de valor añadido Son
servicio ofrecidos por distintas empresas u organismos a
través de las redes de transmisión de datos,
característicos por las siguientes propiedades:
Están abierto a cualquier usuario Permiten conexión
de equipos de diferentes características mediante los
correspondientes interfaces. Proporciona un buen aprovechamiento
de los recursos y una alta rentabilidad al ser utilizados por un
gran número de usuarios. Son servicios relativamente
económicos, estando determinado su coste, principalmente,
por el uso que se hace de ellos.

TeleinformáticaServicios de valor añadido Servicio
Teletex Servicio Internacional. Su función es la
transferencia de archivos de texto, formateados en páginas
Los terminales empleados permiten el almacenamiento, la
edición y la impresión de los textos. Servicio
Telefax También posee cobertura internacional. Permite el
envió de documentos, textos, gráficos o
imágenes mediante el sistema denominado facsímil.
Servicio Videotex y red Ibertex Se accede por medio de terminales
de bajo coste, a bases de datos proporcionadas por empresas
públicas y privadas.

TeleinformáticaRed digital de servicios integrados Es una
red revolucionada de la telefonía integrada digital que,
proporcionando una conectividad digital extremo a extremo, da
soporte a una amplia gama de servicios a los cuales los usuarios
tienen acceso a través de un conjunto limitado de
interfaces normalizadas de propósito general. El objetivo
principal es poner a disposición del usuario la capacidad
de acceder fácilmente, integrar y compartir
información de todo tipo: voz sonido texto, imagen, dato y
video, sin limitaciones geográficas o tecnológicas.

# data[].attributes.attachment_link.description
Todos los días cada uno de nosotros emplea las Telecomunicaciones en las actividades personales y de trabajo. Siempre utilizamos el teléfono para tener conversaciones a distancia y poco a poco estamos integrando a una sociedad en la cual la computadora personal y la transferencia de información juegan un papel muy importante de desarrollo.

# data[].attributes.body
Ejemplos de JavaScrpt

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

# data[].attributes.attachment_link.readable_text
Este vocablo se refiere a la rama de la ciencia que estudia la transmisión y comunicación de información mediante vía de equipos informáticos. En palabras más simples, se encarga de estudiar como es el proceso por el cual se puede transmitir información de un equipo informático a otro. En el envío de esa información tenemos varios elementos que interviene. En primer lugar un ordenador que envía el mensaje, y otro que la reciba (llamados remotos).

Estos pueden ser el mismo ordenador, si lo que está solicitando alguna información a un servidor u ordenador central, o bien distintos, si se intercambia información, por ejemplo, entre dos usuarios. Además de estes equipos, debe existir un canal, por el cual se envíe la información, que puede ser el propio aire, en caso de conexiones inalámbricas, o bien mediante cables telefónicos, de fibra óptica.. etc, dependiendo de la conexión que haya en los equipos. Este mnesaje debe tener un código común, y será enviado en ese código, usando un modem (modulador/demodulador), que lo modula (lo codifica) y cuando llega a su destino lo demodula (lo descodifica). Puede sonar algo lioso, pero es el mismo proceso que el usado para hablar: un emisor que habla, un receptor que recibe, un canal, que es el aire, un mensaje, y un código común, que sería el lenguaje. En este caso el modem serían los propios cerebros de cada persona.

La gran diferencia es sin duda que toda la comunicación se hace automáticamente entre equipos informáticos, y además existe un elemento que no está presente en la comunicación verbal: el ordenador central. El ordenador central es un equipo que recibe la información, la trata, y la envía de nuevo. Es como una especie de intermediario que verifica que todo el proceso se lleva a cabo bien, mostrando si hay algún error de conexión o si la información no ha llegado bien a su destino o está incompleta. Como los ordenadores no razonan como nosotros, no tienen medios de conocer si esa información que reciben está completa, algo que verifica el ordenador central.

Cabe destacar que aunque la teleinformática se hace por vía telemática, no son vocablos sinónimos, puesto que la telemática es una disciplina más amplia y que no excluye a equipos no informáticos. Así, la teleinformática es el resultado de integrar las telecomunicaciones con los equipos informáticos, que aunque han evolucionado por separado, recientemente y cada vez más se han terminado por unir para mejorar las comunicaciones a nivel global. No hay más que ver Internet para darnos cuenta que el presente y el futuro de las comunicaciones remotas pertenecen a la teleinformática.

# data[].attributes.attachment_link.description
Este vocablo se refiere a la rama de la ciencia que estudia la transmisión y comunicación de información mediante vía de equipos informáticos. En palabras más simples, se encarga de estudiar como es el proceso por el cual se puede transmitir información de un equipo informático a otro.

# data[].attributes.attachment_link.title
TEMA 1 Introducción a la Teleinformática