Tema_8 FRONT Flashcards
Pequeña historia de la evolución de Scripting FRONT
Por orden cronológico, se fué llamando:
Mocha → LiveScript → JavaScript → EcmaScript [262]
Motores de JavaScript según el navegador:
V8 → (CEO) CHROME, EDGE Y OPERA
SPIDER MONKEY → FIREFOX
JAVASCRIPTCORE→ SAFARI
¿Que otros lenguajes Script han salido, de forma paralela a JavaScript?
- TYPESCRIPT (Microsoft)
- COFFESCRIPT
- CLOJURESCRIPT
- DART (Google)
Aunque no funcionan directamente con nuestro navegador. Hay que transpilarlos.
Dí alguna herramienta para transpilar lenguajes Script, a JavaScript:
BTTJD
- BABEL
- TRACEUR
- TYPE SCRIPT COMPILER (TSC)
- J2Coffe
- Decaffeinate
Herramientas que intervienen en el desarrollo de Frontend.
- BOWER → Construida con Node.JS (Osea, JavaScript) y se usa para gestionar dependencias/versiones de librerías JS. Se instala con npm (node package manager)
- GULP → (GRUNT es la competencia) Sobre Node.JS y automatiza tareas de desarrollo.
- YEOMAN → También hecho con Node.JS, se usa para generar estructuras de directorios y ficheros básicos. Es una herramienta de andamio.
¿Cual es la última versión de ECMAScript?
La Versión 14ª, ECMAScript 2023.
Dí características de JavaScript:
- Lenguaje de programación ligero, interpretado.
- A sus funciones se les llama de CIUDADANOS DE PRIMERA CLASE.
- Basado en objetos.
- En vez de clases, tiene PROTOTIPOS
- Dinámico
- Orientado a eventos
- Clausulas
- Imperativo y Declarativo.
Dí características específicas de ECMA 6:
- Promesas, se ejecuta código de forma asíncrona
- Clases
- Array Functions por ejm:for each, map, filter
- ARROW FUNCTIONS
Dí algunas versiones de ECMASCRIPT:
- La 5 es conocida como ES5 o ECMAScript 2009
- Luego van de la 6 a la 14, empezando por la ES2015 hasta la ES2023.
Como podemos encontrar en inglés, la explicación de Transpilador.
Source-to-source-compilation
A diferencia de los compiladores, un transpilador se usa para pasar de un lenguaje de programación, a otro de similar nivel de abstracción.
¿Qué es Vanilla JS?
Es JavaScript puro, no necesita Frameworks ni nada.
¿Como gestionamos dependencias en JavaScript?
En la mayoría de los casos se hace con módulos de NODE.JS, que se instalan con NPM.
package.json
- BOWER - En desuso
- YARN
- WEBPACK
- PARCEL
- PNPM
¿Qué es node_modules?
La carpeta node_modules es un directorio que se crea en la carpeta raíz de nuestro proyecto cuando instalamos paquetes o dependencias mediante npm, teniéndolos en nuestro proyecto local (no dependen de una ruta externa al proyecto) y sin necesidad de manipularlos manualmente.
¿Qué es un Lintador en JavaScript?
Es como SonarQube, pero orientada a analizar específicamente el código JavaScript.
¿Cual es la carpeta de Bower, donde se descargan las dependencias?
bower_components
¿Qué es MINIFICAR?
Es comprimir un JavaScript, para mejorar su rendimiento.
¿Qué son ROLLUP, PARCEL Y WEBPACK?
Son Bundler’s o empaquetadores. Que no están limitados solo a contenido JavaScript.
¿Como funciona AJAX?
Funciona en todos los navegadores.
Con el objeto → XMLHTTPRequest
Hace recargas parciales de la WEB
Peticiones en segundo plano
Peticiones HTTP Asíncronas (eventos)
Favorece el desarrollo de aplicación web RIA. (rich Internet application).
Un ejemplo de Ajax:
Por ejemplo nos sale en pantalla un botón que al pulsarlo, nos carga una lista.
Mientras está buscando o cargando esa lista, programamos el html, para que nos ponga “cargando”
Cuando termina de cargar la lista, también programamos el html, para que nos ponga “cargado”
Esto se puede controlar con READYSTATE, que es una property de XMLHTTPREQUEST, que nos devuelve el estado en el que se encuentra nuestra petición.
¿Qué estados tiene READYSTATE?
0: UNINITIALIZED
1: LOADING
2: LOADED: Encabezados y estado disponibles.
3: INTERACTIVE: responseText, responseXML
4: COMPLETED
¿Donde se guarda la información que pedimos por medio de AJAX?
Si es una cadena, se guarda en ResponseText (es un Json)
Si nos devuelve un XML, se guarda en RESPONSEXML.
¿Como se pone abreviado XmlHttpRequest?
XHR
¿AJAX es siempre asíncrono?
No, si ponemos la property “False”, al preparar la petición, ya no es asíncrona.
¿Qué es SonarQube?
Analizador de código estático.
Es una herramienta que evalua el código fuente. Lo lee sin ejecutarlo, para determinar si se están haciendo buenas practicas de programación, detectar herrores, etc..
Dí otras herramientas que se usaban como Lintadores:
Son analizadores ESTÁTICOS, de código abierto.
- Checkstyle
- PMD
- FindBugs
¿Qué es Axios?
- Es una librería que nos permite hacer peticiones o llamadas al contenido de un enlace HTTP.
- Se usa en AJAX.
- Nos devuelve una promesa, con los métodos THEN y CATCH
¿Cual fué la primera versión de ECMASCRIPT?
ECMA-262
¿Qué alternativa hay a JavaScript?
- WebAssembly. Está en Bytecode.
- También llamado WASM, de forma abreviada.
- En código binario portable (bytecode)
Qué es Front-End?
Es la conversión de datos en una interfaz gráfica para que el usuario pueda ver e interactuar con la información de forma digital usando HTML, CSS y JavaScript. Se la conoce como LADO DEL CLIENTE.
¿Qué son YARN, NPM Y PNPM?
Son gestores de paquetes para JavaScript.
¿Cual es el estandar ISO de ECMASCRIPT?
ISO/IEC 22275:2018
¿Qué es ES.NEXT?
Es el nombre que se le pone a las nuevas versiones que se están desarrollando para JavaScript.
Atributos de XmlHttpRequest
readyState->Devuelve el estado del objeto
responseBody->Devuelve la respuesta como un array de bytes
responseText->Devuelve la respuesta como una cadena
responseXML->Devuelve la respuesta como XML. Esta propiedad devuelve un objeto documento XML, que puede ser examinado usando las propiedades y métodos del árbol del Document Object Model.
status->Devuelve el estado como un número de código de estado de HTTP
statusText->Devuelve el estado como una cadena.
Métodos importantes de XHR:
Open-> Especifica el método, la URL y los atributos opcionales. El método puede ser “GET”, “POST” o “PUT”.
Send-> Envía la petición.
Eventos a recordar de XHR:
onreadyStateChange-> Evento que se dispara con cada cambio de estado.
Cosas de XMLHttpRequest
- Es asíncrono
- Es un objeto con Atributos y Métodos
Operadores aritméticos de JavaScript:
Los de suma, resta, etc, son los normales, pero hay otros dos que habría que estudiar, que son:
Módulo –> a % b= Devuelve el resto de la división de a entre b.
Exponenciación –>a ** b Eleva a a la potencia de b.
Operadores unarios de JavaScript
Operadores de comparación de JavaScript
¿Qué es un NaN en JavaScript?
Not a Number.
Es un dato de tipo number, que no devuelve un número.
¿Para que se usa POP y PUSH en JavaScript?
Para los Arrays.
¿Qué métodos podemos usar con los Arrays de JavaScript?
- PUSH-> Añade un elemento al final del array y nos devuelve el nuevo tamaño del array.
- POP-> Saca el último elemento del array y nos lo devuelve. Cambia el tamaño del array.
- FILTER->Para obtener un resultado filtrando lo que queramos
- MAP-> Para establecer correspondencias
- REDUCE-> Enfocado a que el resultado sea uno, reduciendo el array original.
- SLICE-> Para trozear el array.
¿Qué son las promesas?
- SON PARA VOLVER ASÍNCRONO A JAVASCRIPT.
- Usa los métodos .THEN, si hay éxito y .CATCH si da error
¿Qué es FETCH?
- Es la recomendación actual, para sustituir a XHR.
- Usa PROMESAS.
¿Para qué usamos ASYNC + AWAIT?
- Se usan en las promesas. En vez de THEN y CATCH.
- En este caso ASYNC y AWAIT bloquean la promesa, hasta que se cumpla.
- ASYNC, se pone delante de una función REQUEST (Síncrona), para hacerla ASÍNCRONA.
- AWAIT detiene la función, hasta que se cumpla.
WEB para estudiar JavaScript
https://lenguajejs.com/javascript/introduccion/ecmascript/
Eventos de formulario de HTML
JAVA vs JAVASCRIPT
- JAVA es COMPILADO, de TIPADO FUERTE y para APLICACIONES INTEGRADAS
- JAVASCRIPT es INTERPRETADO, de TIPADO DÉBIL y para APLICACIONES WEB
En Java Script, qué es Función de Primera clase:
- Una función se puede pasar como parámetro de entrada a otra
- Una función se puede retornar
- Una función es asignable a una variable
En JavaScript, ¿Que es package.json?
Al crear un nuevo proyecto con npm init, se lanzará un asistente que tras algunas preguntas, crea un archivo llamado package.json en la carpeta raíz del proyecto, donde coloca toda la información que se conoce sobre el mismo. Este archivo es un simple fichero de texto, en formato JSON que incorpora a través de varios campos información muy variada.
¿Qué es AJAX?
Asynchronous JavaScript And XML
Uniendo HTML o XHTML, CSS, JAVASCRIPT, DOM, XML, XSLT y lo más importante, XMLHttpRequest, podemos crear páginas WEB, que se actualizan continuamente sin tener que volver a cargar la página completa.
