Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Tarjetas MBH > B3-T8_FRONTEND > Flashcards

B3-T8_FRONTEND Flashcards

1
Q

Nombre 3 MOTORES DE EJECUCIÓN (o interprete) de JavaScript presentes en los navegadores (User Agent)+ el correspondiente (Motor de Renderizado):

A
  • v8: M. Edge, Chrome y Opera (BLINK)
  • Nitro: Safari (WebKit)
  • SpiderMonkey: FireFox (Gecko)

NOTA: cada motor ofrece la compatibilidad entre el navegador y javascript, hace de interprete.

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

¿Cualés son los MOTORES DE RENDERIZADO de los navegadores más habituales?

A

*BLINK: Chrome, Opera Y M. Edge (desde 2020).

*WEBKIT: Safari y M. Edge (hasta 2020).

*GECKO -> QUANTUM: FireFox.

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

¿Cómo se denomina al lenguaje que ha estandarizado a JavaScript?

A

ECMAScript 262

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

¿Qué son jasmine, mocha y jest ?

A

Herramientas para testing de javascript

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

Dado que TypeScript es un lenguaje de scripting de alto nivel que no comprenden los navegadores, ¿que habría que hacer?

A

Transpilarlo.
Herramientas –> Babel, traceur y tsc

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

¿A que responden las siglas SPA hablando de aplicaciones Web?

A

Aplicaciones de una única página (Single Page Application)

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

¿Qué significa en javascript NaN?

A

Un tipo de retorno cuando la expresión no se corresponde con un número (Not a Number)

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

¿Que devolverá la siguiente expresión 1 == “1” y la expresión 1 === “1”?

A

1 == “1” => TRUE (igualdad)

1 === “1” => FALSE, porque ese operador además, de comparar si los valores son iguales, compara los tipos también (identico)

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

¿Para qué sirve el operador => ?

A

Para definir funciones Lambda o ARROW FUNCTIONS.

*Permiten escribir una Sintaxis de Función de manera + corta.

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

¿Con que “técnica podemos conseguir herencia en javascript?

A

prototipos

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

¿Cómo se añade un elemento a un array en javascript?

A

método push

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

¿Que devuelve typeof(null) en javascript?

A

Object

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

¿Se puede pasar una función como parámetro de entrada de otra?

A

Sí, porque las funciones son objetos de primera clase.

También, se pueden asignar una variable y poner como retorno de otra función.

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

¿Qué efecto tiene una clousure (en funciones anidadas) ?

A

Que a la función más interna se le asocia/encapsula el ambiente de ejecución (las posibles variables) que haya entre la función más externa y ella (incluso después de que termine de ejecutarse la función externa).

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

¿Cómo se denomina la siguiente expresión y que representa?
(function () {
….
})();

A

Se denomina expresión IIFE (Expresión de Función Invocada Inmediatamente).

Sirve para definir y ejecutar una función => TODO A AL VEZ.

NOTA: usa doble paréntesis.

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

¿Con que comando se crea un proyecto “vacío” en angular?

A

ng new mi-proyecto

(Para poder usar ng hay que instalar –> npm install @angular/cli)

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

¿Cómo se llama el objeto principal del módulo de AJAX?

A

XMLHttpRequest (XHR)

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

¿Qué son mustache, jade y dust?

A

Motores de plantillas para FRONT.

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

¿Para qué sirven los sourceMap (ficheros con extensión .map) ?

A

Ya que los JS y CSS están muy compactados (minify), se generan estos ficheros con el propósito de que podamos depurar en el navegador con un CÓDIGO “LEGIBLE”.

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

Expón algunas versiones de EcmaScript:

A

ES5: 2009 => es la usada hoy en día (si usas otro hay que TRANSPILAR).

ES6: 2015
ES7: 2016
ES8: 2017

ES12: 2021 (el último)

NOTA: el ES 262 es el estándar Ecma de JS.

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

Organiza las denominaciones que ha tenido JS:

A

Mocha -> LiveScript -> JavaScript -> ECMAScript

  • Mocha es el primer nombre que tuvo y ECMA Script el último.

NOTA: el ES 262 es el estándar Ecma de JS.

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

Comenta algunos de los nuevos lenguajes del FRONT y sus transpiladores:

A

LENGUAJES:
*TypeScript (Microsoft): forma sencilla de crear clases.

*CoffeScript: añade azúcar sintáctico inspirado en: Ruby, Python y Haskell.

*Dart (Google): para aplicaciones móviles.

*ClojureScript (Amazon): procesamiento de datos y programación concurrente.

TRANSPILADORES:
*Babel: JavaScript -> navegador

*Traceur: JavaScript.net -> JavaScript

*tsc (Micrososft): TypeScript -> JavaScript

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

¿En qué se diferencian transpilador de compilador?

A

TRANSPILADOR, programa que transforma un código fuente en otro código fuente.

COMPILADOR, valida la sintaxis y transforma el código fuente en un código + cercano a la máquina (binario).

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

¿Qué es API REST (Representational State Transfer)?

A

Es un tipo de arquitectura de desarrollo web, que consiste en una lista de reglas que se deben cumplir en el diseño de un API.

Si el API cumple dicha arquitectura (reglas) hablaremos del servicio RESTFUL.

*Aunque NO ESTA ESTANDARIZADO, Se apoya en el estándar HTTP.

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

Describe las principales ideas de API REST:

A
  1. Que cada funcionalidad quede descrita por dos cosas:
    VERBO HTTP+URL:
    Ej1: get/facturas
    Ej2: DELETE/facturas/3
    Ej3:get http://www.formandome.es
  2. Para comunicar errores a los chats de estos servicios se usan los propios códigos HTTP:
    200: OK (recurso modificado correctamente)
    201: recurso creado correctamente.
    400: petición incorrecta.
    403: acceso prohibido.
    404: NOT FOUND
    500:error en el servidor.
  3. Para documentar, producir, consumir y visualizar los servicios se usa OpenAPI (ántes conocido como Swagger).
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

¿qué utiliza la API REST a nivel de seguridad?

A

OAuth o JWT, como técnicas de generación de TOKENS a los clientes (donde presentarán: certificados, usar/pass, …).

*OAuth (Open Authorization): protocolo para pasar la autorización de un servicio a otro sin compartir las credenciales de usuario reales, como un nombre de usuario y contraseña.

*JWT (JSON Web Token): basado en JSON. Crea TOKENS de acceso que permiten la propagación de identidad y privilegios.
Ej: un servidor podría generar un token indicando que el usuario tiene privilegios de administrador.

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

Define la librería AXIOS:

A

Librería de JS, que sirve para hacer peticiones AJAX y a servicios REST.

Permite hacer sencillas las operaciones como cliente HTTP.

Se descargaría con: npm, bower o yarn.
Ej: npm install AXIOS

*VERBOS a ejecutar sobre una URL: get, delete, options, post, patch, …
Ej: axios.get (url[config])

28
Q

¿Qué es un ARTEFACTO de Maven?

A

Es como una gran librería que engloba un conjunto de estas para no tener que ir descargando una a una.
Además, incluye toda la información para su correcta gestión => ARTEFACTO: Nombre, grupo, versión y dependencias.

29
Q

Expón herramientas necesarias para el desarrollo FrontEnd:

A
  1. GESTORES DE DEPENDENCIAS:
    bower (en desuso)
    npm
    yarn
  2. AUTOMATIZADORES DE TAREAS: minificar (compactar) el código, comprimir, transpilar, ejecución de test …
    Gulp
    Grunt
  3. YEOMAN (plantillas): te hace una propuesta de estructura, con sus directorios y ficheros, para tu proyecto por medio de unas plantillas predefinidas => en MAven son los “Archetypes”.

NOTA: Maven (Java) hace sóla la función de los 3 juntos.

30
Q

Explica el funcionamiento de Gestor de Dependencias “npm”:

A

Para instalar un paquete en nuestro proyecto, simplemente debemos utilizar el comando npm install situados en la carpeta de nuestro proyecto. Esto instalará dicho paquete y todas sus dependencias en la carpeta “node_modules” (ubicado en raíz) , a la vez que actualiza el fichero package.

*package.json: fichero de gestor de dependencias de JavaScript.

NOTA: también podemos IMPORTAR paquetería instalada mediante “npm” con “import”.

31
Q

Funcionamiento del Administrador de Tareas GULP:

A

Automatiza tareas: minimizar (compactar) archivos (JS, CSS y HTML), optimizar imagenes, … cada una de esas tareas (pluggins) se instala por separado:

  1. INSTALAR “GULP”:
    npm install -g gulp
  2. INSTALAR TAREAS:
    npm install gulp-minify-css

*gulp.js => es donde están las tareas que tenemos automatizadas.

Se diferencia de GRUNT, en que este está estrictamente orientada a los archivos. Y GULP lleva a cabo los procesos en la memoria principal, lo que proporciona una mayor velocidad al programa.

LOS “BUNDLER” (empaquetadores) son + avanzados que ambos (RollUp, WebPack y Parcel).

32
Q

¿Qué es un BUNDLER (empaquetador)?

A

Son herramientas que empaquetan y transpilan tú código fuente para que el navegador lo entienda.
Son más avanzadas que GULP/GRUNT.
De hecho, hay 3 empaquetadores (BUNDLERs) que han sustituido a GULP y GRUNT:

*ROLLUP (enrollar)
*PARCEL
*WEBPACK (el + usado)

33
Q

Expón las nuevas funciones de ARRAYs introducidas en ES6:

A

*forEach : para recorrer los elementos de una colección.
Ej. con PHP:
foreach ($conjunto $ as $ variable)

*map: actuar sobre cada elemento de la colección.

*filter: filtra cada elemento del conjunto o colección.

34
Q

¿Para qué sirve “tipeof” en JavaScript?

A

Para identificar el tipo de variable declarada:

EJEMPLO:
var i=10
typeof(i) => number

OTROS TIPOS:
*number => NAN ( … ): (not a number) saldría cuando el resultado NO es un número.

*string => SLICE ( … ): (rodaja) trocea cadenas

*boolean => replace ( … ): reemplaza cadenas o partes.

*Array => PUSH ( … ) o POP ( … ): para meter o sacar algo del array.

*También: “unll” y “undefined”.

35
Q

¿Para qué sirven los operadores: instanceof, delete, void e in, en JavaScript?

A

*instanceof: si un objeto es una instancia de otro.

*delete: elimina una propiedad de un objeto.

*void: descarta el valor de retorno de una expresión.

*in: determina si un objeto tiene una determinada propiedad.

36
Q

¿Cuáles son los operadores CORTOCIRCUITOS de JavaScript?

A

Los operadores && (y) y || (o) se llaman operadores en cortocircuito porque si no se cumple la condición de un término no se evalúa el resto de la operación.

Por ejemplo: (a == b && c != d && h >= k) tiene tres evaluaciones: la primera comprueba si la variable a es igual a b. Si no se cumple esta condición, el resultado de la expresión es falso y no se evalúan las otras dos condiciones posteriores.

37
Q

¿Para qué se usan los signos “=”, “+=” y “++” en JavaScript?

A

= : se usa para ASIGNACIONES (para guardar un valor específico en una variable) => NOconfundir con el operador ==)
var numero1 = 3;

++ o – : solamente son válidos para las variables numéricas y se utilizan para incrementar o decrementar en una unidad el valor de una variable.
var numero = 5;
++numero;
alert(numero); // numero = 6

+= : Asignación de adición (es un operador aritmético, se utiliza para sumarle un valor a cierta variable)
Ej1: x = x + y => x += y
Ej2: var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8

NOTA: adjunto foto con operadores lógicos.

38
Q

¿Qué quiere decir que JS es un lenguaje “funcional”?

A

Que las funciones cobran un papel muy importante en JS, pues son OBJETOS y todo objeto tiene una propiedad llamada “prototype”, con la que podemos construir o extender objetos.

Funciones de PROTOTYPE:
a) Extiende el objeto y ponemos nuevas propiedades, nuevos métodos, etc => HERENCIA

b) Constructor: construir objetos.

ACLARACIÓN:Las funciones se tratan como objetos:
*Se pueden asignar a una variable.
*Se pueden pasar como PARÁMETRO DE ENTRADA de otra función.
*Se pueden RETORNAR desde otra función.
*Se pueden declarar funciones ANÓNIMAS.

39
Q

¿A qué se llama CLAUSURA en JS?

A

Al poner una función INTERNA dentro de otra EXTERNA => las variables asignadas solo afectaran a la INTERNA.

*Una “función” en JS es el “objeto” de Java.

40
Q

¿Qué conseguimos al poner 2 pares de paréntesis en una función?

A

DEFINIMOS e INVOCAMOS la función a la vez.

function (con o sin nombre) {
}) ( )

*Una “función” en JS es el “objeto” de Java, por eso decimos que JS es un lenguaje funcional.

41
Q

¿Qué es API DOM (Document Object Model)?

A

TODO NAVEGADOR TIENE UNO.

Es la representación de los datos de un documento web, por ejemplo, una página HTML, un gráfico SVG, o un archivo XML.
Es decir, es un conjunto de objetos, que constituye una página web.
A estos objetos (NODE=> Element (etiquetas), Atributos, DataText (Texto y comentarios) y Document: el propio documento), se acceden desde el API DOM.

NOTA: NODE es la interfaz más básica, las otras interfaces amplían la interfaz Node y heredan sus propiedades.

El navegador web organiza todos estos nodos en un árbol del documento (DOM tree) que representa todos los nodos y las relaciones entre ellos de forma jerárquica (ADJUNTO FOTO).

42
Q

¿Qué es un API?

A

API es el acrónimo de “Application Programming Interface” (Interfaz de programación de aplicaciones), y es una colección de clases, interfaces, propiedades, métodos, y otras estructuras de código que los desarrolladores pueden utilizar para acceder a la funcionalidad de una aplicación o navegador.

EJEMPLOS DE APIs Web: existen API de bajo nivel como la Web Workers API (para operaciones de fondo) y otras de alto nivel como el propio DOM API.

43
Q

¿Qué diferencia hay entre DOM y API DOM?

A

Mientras existen muchos DOM (cada documento HTML, XML, y SVG cuenta con un DOM), solo existe un DOM API, el cual es una especificación de W3C. La DOM API está escrita en JavaScript, y puedes usarla para manipular el DOM de un documento web usando JavaScript.

44
Q

Expón algunas instrucciones de la API DOM:

A

*PARA ACCESO A LOS ELEMENTOS:
document.getElementByID ( id )
document.querySelector (selector)

*PARA CREAR ELEMENTOS NUEVOS EN LA PÁGINA:
document.createElement (‘elemento’)
document.createTextNode (‘texto’)

*2 MANERAS DE INSTALAR UN MANEJADOR DE EVENTOS: (onclick y addeventlistener)

a) nombreDelElemento.onclick = function (evento){
…
}

b) nombreDelElemento.addEventlistener (‘click, function (evento) {
…
} )

NOTA: en JS, HTML y DOM se manejan eventos, es decir, sobre un “elemento” (etiqueta) del DOM se pueden desencadenar eventos.
Ej: MOUSEDOWN: ejecuta un javascript al presionar un botón del ratón sobre un párrafo:

<p>
Click the next!
</p>

45
Q

Enumera algunos eventos del API DOM:

A

Con este API manipulamos la página.

BLUR: (difuminar) cuando el texto pierde el focus.

CHANGE: este evento ocurre cuando el contenido de un elemento de un formulario (<input, <select o <textarea ), la selección o el estado marcado, han cambiado.

CLICK: el evento ocurre cuando el usuario hace click en el elemento.

KEYDOWN: cuando el usuario esta presionado una tecla.

MOUSEDOWN: cuando esta presionando un botón del ratón sobre el elemento.

WHEEL: (rueda) cuando se desplaza la rueda del ratón (arriba o abajo)

TOOGLE: cuando el usuario abre o cierra el elemento.

NOTA: en JS, HTML y DOM se manejan eventos, es decir, sobre un “elemento” (etiqueta) del DOM se pueden desencadenar eventos.

46
Q

¿Qué es un fichero ASHX?

A

Un archivo ASHX es una página web que utiliza el controlador HTTP de ASP.NET, para proporcionar al usuario las páginas a las que se hace referencia dentro de este archivo.

47
Q

¿Cómo se informa al usuario de que esta ocurriendo con la petición que ha realizado (asincronamente) con el objeto XHR (XMLHttpRequest)?

A

Por medios de ESTADOS y EVENTOS propios del objeto XHR.

“readystate”, devuelve el estado del objeto:

0: UNINITIALIZED (No inicializado) => todavía no se llamó a open ()

1: LOADING (cargando) => todavía no se llamó a send () => ABIERTO

  1. LOADED (cargado) => send () ya fue invocado, y los encabezados y el estado están disponibles => CABECERAS RECIBIDAS
  2. INTERACTIVE (interactivo) => descargando ; respondeText contiene información parcial => CARGANDO
  3. COMPLETED (completado) => la operación esta terminada

*open () => especifica si la petición puede o no gestionase asincronamente (TRUE or FALSE)

*SEND () =>ENVÍA LA PETICIÓN

48
Q

¿En qué se diferencian las propiedades “status” y “statustext” del objeto XHR de Ajax?

A

“status” devuelve el estado como un NÚMERO:
200: OK (modificado correctamente)
201: creado correctamente
400: petición incorrecta
404: NOT FOUND

“statustext” devuelve el estado como un TEXTO.
Ejemplos:
NOT FOUND
OK

49
Q

Los datos pedidos ASÍNCRONAMENTE con el objeto XHR de Ajax, ¿dónde se quedan?

A

Los datos pedidos, ya sean un fichero o un recurso REST, se quedan en:
responsetext => si es de tipo JSON

responseXML => si es de tipo XML

Es decir, con “xhttp.responsetext” se carga un fichero JSON.

*En REST lo que se publican son recursos, que es un estado que representa un concepto de negocio al que se puede acceder públicamente.
Ej: “Empleados” o “Empleado42”.

50
Q

¿Qué tipo de aplicación es una aplicación RIA (Rich Internet Application)?

A

Aplicación WEB que tiene la mayoría de las características de las aplicaciones tradicionales, como si fuera de escritorio, facilitando su manejo.

Existen las WAI-ARIA, que son el conjunto de aplicaciones ricas en internet accesible, que definen una forma de hacer que el contenido web y sus aplicaciones sean mas accesibles para discapacitados.

51
Q

¿Cuáles son los 2 mecanismos de ALMACENAMIENTO WEB de HTML5?

A
  1. WEBSTORAGE: API que proporciona los mecanismos mediante los cuales el navegador almacena datos tipo CLAVE/VALOR (Clave:OLIVER/Valor:BENÍTEZ) de una forma más intuitiva que utilizando “cookies”:

a) SESSION-STORAGE: la información se borra cuando cerramos el navegador.

b) LOCAL-STORAGE: la información se mantiene (persiste).

NOTA: esta pequeña BD no había existido hasta “HTML5”.

  1. INDEXEDDB: la API de la BD de datos “indexada” de JavaScript, proporcionada por los navegadores para adminsitrar una BD NoSQL de objetos JSON.
52
Q

Diferencia entre las APIs de HTML5 WEBSOCKET y SERVER-SENT EVENTS (SSE):

A

Son 2 tecnologías diferentes que definen como los navegadores y los usuarios se comunican entre sí.

1.WEBSOCKET: API que hace posible la comunicación BIDIRECCIONAL (full-duplex) entre el navegador del usuario (cliente) y un servidor en tiempo real, por medio de una conexión TCP.
Los lados o “sockets” del cliente y servidor, pueden comunicarse sin interrupciones, porque LA CONEXIÓN PERMANECE ABIERTA después de una respuesta del servidor. Pudiendo el servidor enviar información al cliente sin que este se la solicitase (Ej: publicidad).

  1. SSE: crea una vía para que el navegador (cliente) reciba automáticamente datos del servidor (Ej: actualizaciones), sin solicitarlo, en tiempo real, por medio de una conexión HTTP de larga duración.

DIFERENCIAS: los WEBSOCKET son bidireccionales (ful-duplex) y usan conexión TCP.
En cambio, los SSE son unidireccionales (simplex), es decir, solo permiten recibir datos desde el servidor, además, la conexión que usan es HTTP.

53
Q

¿Cómo funciona la API de HTML5 “WebWorker”?

A

Es un script de JS ejecutado en 2º plano, independientemente del resto de script ejecutados desde la misma página HTML. Es decir, es una forma de ordenar el código de manera asíncrona, cuando no quieres tener ningún obstaculo al ejecutar tu script ni bloquear al principal.

54
Q

¿Para qué sirve la API que NO forma parte de HTML5: “File”? y pon un ejemplo:

A

Para representar objetos de archivo en aplicaciones web, y seleccionar y acceder a sus datos. Describe como se manejan las interacciones con los archivos: leerlos y cargarlos .

EJEMPLO: si tenemos un archivo de 1 GB y tuviera 1 error, con este API File podemos leer el contenido del fichero y tratarlo => desgranando dicho error.

NOTA: Antes de existir esta API File no se podían modificar archivos, sólo examinarlos.

55
Q

¿Qué es un “lintador” y cuál es el lintador de ES?

A

“ESLINT”: es el lintador o LINT de ECMAScript.

Un lintador o LINT es una herramienta para analizar el código fuente de un programa en busca de malas praxis y obtener métricas que puedan ayudar a mejorar la calidad del código del programa.
Muy utilizado en JS.
También se les conoce como “Herramienta de Calidad de Código Estático”.

EJEMPLOS:
a) Sonarqube: plataforma para evaluar código fuente.

b) Las antiguas de Java: CheckStyle, PMD y FingBugs.

56
Q

¿Cuál es la herraminta o API incorporada en HTML5 para la generación de gráficos?

A

CANVAS: elemento incorporado en HTML5 para la generación de gráficos dinámicamente por medio de “scripting”. Además, tiene su propia API de dibujo 2D, también compatible con la API WebGL (en navegador) para representaciones 3D con OpenGL (en PC).

*WebGL: (biblioteca de gráficos Web) API de JS par presentar gráficos 2D y 3D interactivos dentro de cualquier NAVEGADOR.

*OpenGL: para representar gráficos por COMPUTADORA en 2D y 3D (como los que se usan en los videojuegos).

57
Q

¿Con qué API de HTML5 hacemos el gesto del dispositivo señalador (ratón) de arrastrar y soltar para manejar objetos virtuales?

A

Drag and Drop
(Arrastrar y soltar).

58
Q

¿Para qué sirve el SELECTOR de HTML?

A

Para manipular documentos modelados en forma de objetos estructurados en forma de árbol (DOM).
Define 2 métodos para acceder a los nodos del árbol DOM seleccionandolos mediante un “selector” CSS:

*QuerySelectorAll (selector) => devuelve la lista de TODOS los nodos que coinciden con el selector.

*QuerySelector (selector) => SÓLO devuelve el primer nodo coincidente.

59
Q

¿Qué se consiguió con el FrameWork “Angular” de HTML?

A

Se gobierna la ejecución total de la aplicación (SPA): navegación, estado de la página frente a objetos, … Es decir, pasamos de modelo muy funcional y muy orientado a eventos (JS) a un paradigma de desarrollo en el que realmente hay un control absoluto sobre toda la navegación de usuario (SPA).

Angular (comúnmente llamado Angular 2+ o Angular 2) es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página (SPA). Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

60
Q

¿Cómo se crea un nuevo proyecto con Angular?

A

ng new nombre_proyecto

2 Apreciaciones:

a) Esta herramienta (ng) lee del paquete: package.json, por lo que habría que instalarlo para usarla:
npm package.json

b) Entonces, se crearía en el directorio raíz el directorio o repositorio: “node_modules” de nuestro proyecto cuando instalamos paquetes o dependencias mediante npm.

61
Q

¿Cuál es etiqueta principal de Angular?

A

<router-outlet> AQUÍ SE VOLCARÍA EL CONTENIDO DEL COMPONENTE </router-outlet>

62
Q

¿Qué directorios se generan al crear un nuevo proyecto en Angular?

A

app.component.html => la parte más visual.

app.component.ts => TypeScript con el que definimos el componente.

app.component.css

NOTA: el proyecto con Angular se crea con:
ng new nombre_proyecto

63
Q

Respecto a la estructura de Angular, ¿de qué página partimos y cuál es la etiqueta que se da al primer componente?

A

index.html => es la página de la que parte toda estructura de Angular y contiene la etiqueta:

<app-root> </app-root>

que es la que se asigna al PRIMER componente.
Esta etiqueta la defines tú con “TS” (TypeScript), una vez que ya tenemos el componente incrustado en la página HTML.

NOTA: la siguiente necesidad es la de “navegación”. Definimos dentro de dicho componente principal la etiqueta:

<route-outlet> </route-outlet>

donde se volcaría el contenido del componente al que se accedería por medio de un link establecido en otro directorio.

64
Q

¿Qué tipo de aplicaciones son las PWA (Progressive Web Apps)?

A

Las Progressive Web Apps (PWA) son aplicaciones web que tienen la capacidad de funcionar como una aplicación nativa en un dispositivo móvil o de escritorio.

Las PWA son un híbrido entre una aplicación web y una aplicación nativa, y se pueden utilizar en el navegador sin necesidad de descargarlas.

65
Q

Sabiendo que SPA es una evolución de Ajax y que trabajan de forma conjunta para mostrarnos las páginas de la manera más dinámica y rápida posible, comenta 2 integraciones comunes del FRONT con el BACK:

A
  1. GraphQL: lenguaje de consulta y en tiempo de ejecución del servidor para las APIs. Su función es brindar a los clientes exactamente los datos que solicitan y nada más.
    *Es una tecnología de FACEBOOK => NO es un estándar.
    *Como en SOAP, volvemos a tener un único EndPoint o punto final (dispositivo informático remoto que se comunica a través de la red).
    *Existen Types (módulos de información), Querries y Mutations (modificaciones), que son funcionalidades de actualización.
  2. REST: conjunto de principio arquitectónicos que se ajustan a las necesidades de las aplicaciones móviles y servicios Web ligeros, implementadas por el propio desarrollador.

*Cuando se envía una solicitud de datos a un API REST, se suele hacer a través de un protocolo de transferencia de hypertexto (HTTP).
*Una vez que reciben la solicitud las APIs diseñadas para REST (conocidas como APIs o servicios RESTFUL), pueden devolver mensjaes en distintos formatos: HTML, XML, texto sin formato y JSON (formato preferido).

66
Q

GraphQL es un sistema de integración cliente/servidor en el que el cliente puede enviar una petición con los datos que necesita concretamente, pon 2 ejemplos de productos que se encarguen de procesar dichas peticiones:

A

*Para procesar estas llamadas en CLIENTE:
Apollo- Client: es un cliente JavaScript para GraphQL.

*Para procesar peticiones en SERVIDOR:
Lighthouse: es un FrameWork para servicios GraphQL de Laravel (PHP).

NOTA: otro sistema de integración C/S puede ser REST o SOAP.

Tarjetas MBH (25 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions