Tema_8 FRONT Flashcards

1
Q

Pequeña historia de la evolución de Scripting FRONT

A

Por orden cronológico, se fué llamando:

Mocha → LiveScript → JavaScript → EcmaScript [262]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Motores de JavaScript según el navegador:

A

V8 → (CEO) CHROME, EDGE Y OPERA

SPIDER MONKEY → FIREFOX

JAVASCRIPTCORE→ SAFARI

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

¿Que otros lenguajes Script han salido, de forma paralela a JavaScript?

A
  • TYPESCRIPT (Microsoft)
  • COFFESCRIPT
  • CLOJURESCRIPT
  • DART (Google)

Aunque no funcionan directamente con nuestro navegador. Hay que transpilarlos.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Dí alguna herramienta para transpilar lenguajes Script, a JavaScript:
BTTJD

A
  • BABEL
  • TRACEUR
  • TYPE SCRIPT COMPILER (TSC)
  • J2Coffe
  • Decaffeinate
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Herramientas que intervienen en el desarrollo de Frontend.

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

¿Cual es la última versión de ECMAScript?

A

La Versión 14ª, ECMAScript 2023.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Dí características de JavaScript:

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Dí características específicas de ECMA 6:

A
  • Promesas, se ejecuta código de forma asíncrona
  • Clases
  • Array Functions por ejm:for each, map, filter
  • ARROW FUNCTIONS
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Dí algunas versiones de ECMASCRIPT:

A
  • La 5 es conocida como ES5 o ECMAScript 2009
  • Luego van de la 6 a la 14, empezando por la ES2015 hasta la ES2023.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Como podemos encontrar en inglés, la explicación de Transpilador.

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

¿Qué es Vanilla JS?

A

Es JavaScript puro, no necesita Frameworks ni nada.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

¿Como gestionamos dependencias en JavaScript?

A

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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

¿Qué es node_modules?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

¿Qué es un Lintador en JavaScript?

A

Es como SonarQube, pero orientada a analizar específicamente el código JavaScript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

¿Cual es la carpeta de Bower, donde se descargan las dependencias?

A

bower_components

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

¿Qué es MINIFICAR?

A

Es comprimir un JavaScript, para mejorar su rendimiento.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

¿Qué son ROLLUP, PARCEL Y WEBPACK?

A

Son Bundler’s o empaquetadores. Que no están limitados solo a contenido JavaScript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

¿Como funciona AJAX?

A

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).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Un ejemplo de Ajax:

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

¿Qué estados tiene READYSTATE?

A

0: UNINITIALIZED
1: LOADING
2: LOADED: Encabezados y estado disponibles.
3: INTERACTIVE: responseText, responseXML
4: COMPLETED

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

¿Donde se guarda la información que pedimos por medio de AJAX?

A

Si es una cadena, se guarda en ResponseText (es un Json)

Si nos devuelve un XML, se guarda en RESPONSEXML.

22
Q

¿Como se pone abreviado XmlHttpRequest?

A

XHR

23
Q

¿AJAX es siempre asíncrono?

A

No, si ponemos la property “False”, al preparar la petición, ya no es asíncrona.

24
Q

¿Qué es SonarQube?

A

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..

25
Q

Dí otras herramientas que se usaban como Lintadores:

A

Son analizadores ESTÁTICOS, de código abierto.

  • Checkstyle
  • PMD
  • FindBugs
26
Q

¿Qué es Axios?

A
  • 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
27
Q

¿Cual fué la primera versión de ECMASCRIPT?

A

ECMA-262

28
Q

¿Qué alternativa hay a JavaScript?

A
  • WebAssembly. Está en Bytecode.
  • También llamado WASM, de forma abreviada.
  • En código binario portable (bytecode)
29
Q

Qué es Front-End?

A

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.

30
Q

¿Qué son YARN, NPM Y PNPM?

A

Son gestores de paquetes para JavaScript.

31
Q

¿Cual es el estandar ISO de ECMASCRIPT?

A

ISO/IEC 22275:2018

32
Q

¿Qué es ES.NEXT?

A

Es el nombre que se le pone a las nuevas versiones que se están desarrollando para JavaScript.

33
Q

Atributos de XmlHttpRequest

A

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.

34
Q

Métodos importantes de XHR:

A

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.

35
Q

Eventos a recordar de XHR:

A

onreadyStateChange-> Evento que se dispara con cada cambio de estado.

36
Q

Cosas de XMLHttpRequest

A
  • Es asíncrono
  • Es un objeto con Atributos y Métodos
37
Q

Operadores aritméticos de JavaScript:

A

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.

38
Q

Operadores unarios de JavaScript

A
39
Q

Operadores de comparación de JavaScript

A
40
Q

¿Qué es un NaN en JavaScript?

A

Not a Number.
Es un dato de tipo number, que no devuelve un número.

41
Q

¿Para que se usa POP y PUSH en JavaScript?

A

Para los Arrays.

42
Q

¿Qué métodos podemos usar con los Arrays de JavaScript?

A
  • 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.
43
Q

¿Qué son las promesas?

A
  • SON PARA VOLVER ASÍNCRONO A JAVASCRIPT.
  • Usa los métodos .THEN, si hay éxito y .CATCH si da error
44
Q

¿Qué es FETCH?

A
  • Es la recomendación actual, para sustituir a XHR.
  • Usa PROMESAS.
45
Q

¿Para qué usamos ASYNC + AWAIT?

A
  • 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.
46
Q

WEB para estudiar JavaScript

A

https://lenguajejs.com/javascript/introduccion/ecmascript/

47
Q

Eventos de formulario de HTML

A
48
Q

JAVA vs JAVASCRIPT

A
  • JAVA es COMPILADO, de TIPADO FUERTE y para APLICACIONES INTEGRADAS
  • JAVASCRIPT es INTERPRETADO, de TIPADO DÉBIL y para APLICACIONES WEB
49
Q

En Java Script, qué es Función de Primera clase:

A
  • 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
50
Q

En JavaScript, ¿Que es package.json?

A

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.

51
Q

¿Qué es AJAX?

A

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.