b3t8 - Front Flashcards by Daniel Pelado

Qué versión de ECMA es el ECMAScript6 o ECMAScript2015?

ECMA262

How well did you know this?

Not at all

Perfectly

Cuáles son los motores de js de los siguientes navegadores?

Chrome
Opera
Edge
Safari
Firefox

Chrome -> V8
Opera -> V8
Edge -> V8
Safari -> Javascript Core
Firefox -> SpiderMonkey

How well did you know this?

Not at all

Perfectly

Qué tipo de lenguaje es Javascript?
Qué otros lenguajes hay de ese tipo?

es en gran parte funcional

Otros lenguajes funcionales son
f#
haskell
lisp

How well did you know this?

Not at all

Perfectly

Qué lenguajes de alto nivel de javascript hay?

TypeScript
CoffeeScript
Dart (Goolge)
ClojureScript

How well did you know this?

Not at all

Perfectly

Nombra 3 transpiladores de javascript

Babel
Traceur
Esc
TypeScript Compiler

How well did you know this?

Not at all

Perfectly

Qué es el fichero package.json?

Fichero donde se configuran las dependencias de javascript
Lo usan npm y yarn

How well did you know this?

Not at all

Perfectly

En qué fichero se descarga las dependencias node?

en la carpeta node_modules

How well did you know this?

Not at all

Perfectly

Qué herramientas de gestión de dependencias y paquetería hay en js?

yarn
npm (node package manager)
Bower (se usa poco)

How well did you know this?

Not at all

Perfectly

Qué son Grunt o Gulp y Yeoman?

Grunt o Gulp automatiza tareas de desarrollo en js, como minificar código, transpilar, ejecución test.. ya no se usan porque se usan en su lugar package bundles

Yeoman es como los archetypes en maven, genera estructuras de directorios/ficheros para tipos de proyectos predefinidos

How well did you know this?

Not at all

Perfectly

Cual es lo equivalente a la JRE de java pero en javascript?

Node
Dentro, V8 sería como la jvm

How well did you know this?

Not at all

Perfectly

Cuáles son los comandos básicos de npm para hacer lo siguiente

Inicializar el proyecto crea el archivo package.json

Buscar paquetes

Instalar un paquete

Eliminar paquete

Listar las dependencias de mi proyecto

Actualizar todas las librerías de tu proyecto que sean compatibles

https://vortexbird.com/comandos-basicos-de-npm/

Inicializar el proyecto crea el archivo package.json
npm init

Buscar paquetes
npm search [paquete]

Instalar un paquete
npm install [paquete]@[version]

Eliminar paquete
npm rm [paquete]
npm uninstall [paquete]

Listar las dependencias de mi proyecto
npm ls

Actualizar todas las librerías de tu proyecto que sean compatibles
npm update -save

How well did you know this?

Not at all

Perfectly

Qué son los package bundles o empaquetadores? Nombra algunos

Son herramientas que facilitan la construcción de paquetería de elementos de front para el navegador.

webpack
browserify
fusebox
rollup
parcel

How well did you know this?

Not at all

Perfectly

Los framework de js (angular, react, vue, …) vienen con una herramienta de comandos
Cómo empiezan los comandos en Angular?

Angular -> ng : ng new nominas

How well did you know this?

Not at all

Perfectly

Tres productos que son superlenguajes de HTML5, también llamados motores de plantillas

pug
handlebars
moustache

How well did you know this?

Not at all

Perfectly

cómo se llama la función js que atiende a un evento?

manejador de eventos, handler, callback, event listener…

es el concepto de en el árbol DOM asignar funciones a eventos

mielemento.onclick = function(evento){
…
}

también se puede hacer así, con addEventListener

mielemento.addEventListener(‘click’, function(evento{
…
})

How well did you know this?

Not at all

Perfectly

Por qué se caracteriza AJAX?

Qué tipo de contenido devuelven las llamadas AJAX?

Técnica de desarrollo web que favorece el desarrollo de aplicaciones web RIA (Rich Internet Application)

Peticiones asíncronas (eventos)
Peticiones en segundo plano
Recargas parciales de página

Devuelve normalmente información en xml o json

How well did you know this?

Not at all

Perfectly

Cuál es el objeto en AJAX, que está en todos los navegadores y que sirve para

XMLHttpRequest (XHR)

How well did you know this?

Not at all

Perfectly

Atributos importantes del objeto XHR de AJAX
readyState
status
responseXml
responseText

readyState : estado del objeto XHR (0 sin incializar, 4 finalizado..)
status: status html de la llamada asíncrona
responseXml: el contenido de la respuesta en xml
responseText: el contenido de la respuesta en JSON

How well did you know this?

Not at all

Perfectly

Métodos importantes del objeto XHR de AJAX

open
send

con qué API se se hace actualmente en lugar con el XHR?

open: prepara la llamada http asíncrona (URL, verbo html, si debe ser asíncrona o no)
send: envía la petición

ahora se hace con la FETCH API:
fetch() -> envía la petición
then() -> se ejecuta si se resuelve la petición

Eventos importantes de objeto XHR de AJAX

onreadystatechange

Evento que se dispara con cada cambio de estado (cambios en la property readystate)

Qué dos APIs asíncronas hay y qué librería de terceros?

APIs asíncronas: AJAX y FETCH
Librería de terceros: Axios

Cómo son los operadores js de
módulo
exponenciación

módulo -> a % b
exponenciación -> a * * b

En js los operadores de comparación == no es como en java. Qué hace aquí?
Y los siguientes?
a === b
a != b
a !== b

a == b -> en js devuelve true si el valor es igual, aunque el tipo sea distinto (en java daría false). Se llama igualdad
a === b -> compara tanto valor como tipo. Se llama identidad
a != b -> solo compara valor
a !==b -> compara tanto valor como tipo

Operadores binarios js, qué hacen¿

Operador AND -> a & b
Operador OR -> a | b
Operador XOR (OR exclusivo) ->a ^ b
Operador NOT (unario) -> ~a
Operador LEFT SHIFT -> a &laquo_space;b
Operador RIGHT SHIFT -> a&raquo_space; b
Operador RIGHT SHIFT sin signo-> a&raquo_space;> b

Operador AND -> a & b Devuelve 1 si ambos operandos son 1.
Operador OR -> a | b Devuelve 1 si al menos un operando es 1.
Operador XOR (OR exclusivo) ->a ^ b Devuelve 1 si ambos operandos son diferentes.
Operador NOT (unario) -> ~a Invierte los bits del operando (por ejemplo, 000101 pasa a 111010). Trunca a 32 bits.
Operador LEFT SHIFT -> a &laquo_space;b Desplazamiento de bits hacia la izquierda. Ej: 11 (3) pasa a 110 (6).
Operador RIGHT SHIFT -> a&raquo_space; b Desplazamiento de bits hacia la derecha. Ej: 11 (3) pasa a 1 (1).
Operador RIGHT SHIFT sin signo-> a&raquo_space;> b Desplazamiento de bits hacia la derecha, como un operador sin signo.

https://lenguajejs.com/javascript/

tipos de datos en js

Number
String
Boolean
Array
Object
undefined
null

Number
String -> slice(…), replace(..)
Boolean
Array -> push(), pop()
Object
undefined
null

La función typeof(i) devuelve el tipo

Qué es un NaN en js?
Qué es Infinity?

Not a Number, valor especial cuando se hace alguna operación con números que no se puede representar con un número, como 0*0, o 4-‘a’, ….

Infinitiy es el valor que devuelve por ejemplo 1/0

Ver laboratorio de js

la parte de functions es menos preguntable y más compleja

Cómo se crea una función en js, php y phyton?

function sumar(){…}
Es como en php
En python era def sumar(){}

Cómo se puede crear un array en js?
Cómo se puede crear una fecha en js?

Con corchetes directamente
let frutas = [“Manzana”, “Banana”]

O con la función Array.of(“Manzana”, “Banana”)

Crear fecha con -> new Date()

Cómo es el operador condicional en una línea en js?

let accessAllowed = (age > 18) ? true : false

En qué etiqueta HTML5 se puede poner código js?

En la etiqueta code

< code class=”language-js”>
Fijarse que usa el atributo class para indicar el lenguaje

La etiqueta para importar un js externo es script, con el atributo type y src
< script type=”text/javascript” src=”js/eventos.js”></script>

Métodos importantes de arrays en js, qué hacen?

foreach()
push()
pop()
filter()
map()
reduce()
slice()
splice()

forEach() -> array1.forEach(element => console.log(element));
push() -> añade elemento al final
pop() -> elimina el último elemento
filter() -> se aplica una condición a cada elemento y quita los que no la cumplan
map()-> crea un nuevo array aplicando a cada elemento una operación, sin modificar el original
reduce() -> devuelve un solo elemento aplicando alguna operación a todos los elementos del array (por ejemplo un acumulador o sumatorio total, …)
slice(a,b) -> cortar un array, devuelve desde la posicion a hasta la b
splice() -> Cambia el contenido del array eliminando o reemplazando elementos existentes sobre el array original

Dos métodos del objeto JSON en js para

pasa de un objeto javascript a cadena
pasa de cadena a objeto javascript

stringify() -> pasa de un objeto javascript a cadena
parse()-> pasa de cadena a objeto javascript

Para qué sirve el objeto Promise de js?
Cómo se crea una Promise, cómo se ejecuta y cómo se ejecuta el código cuando esta es rechazda?

Para ejecutar una función de forma asíncrona se crea dentro de
new Promise ( function (..) {….})
Cuando esa función se ejecute será en asíncrono. Cuando dentro de esa función se llame a resolve(), se saltará fuera al bloque then.

En el .then(…) se pone el código a ejecutar cuando se cumpla la promesa
En el .catch(…) se pone el código si la promesa se ha rechazado

Qué estados tiene una promesa en js?

Pendiente (Pending): El estado pendiente no tiene un código numérico asociado directamente. Es simplemente el estado inicial de una promesa antes de que se cumpla o se rechace.

Cumplida (Fulfilled): El estado cumplido se asocia con el código numérico 1. También se conoce como el código de éxito (fulfilled).

Rechazada (Rejected): El estado rechazado se asocia con el código numérico 0. También se conoce como el código de fallo (rejected).

Qué dos operadores se usan ahora en lugar de las promesas encadenadas?

operadores async -> se le pone delante al definir de la función y ya es asíncrona
async funcionAsincrona (…){..}

operador await -> se pone delante al llamar a la función para esperar su resolución de forma asíncrona
const asyncValue = await funcion(2)

Qué eventos se disparan cuando ocurre lo siguiente?

clickar
recibir el foco
perder el foco
pulsar una tecla dentro del campo
entrada de datos en el campo
seleccionar parte del texto (ojo que parece que tiene que ver con un campo select, y no)
cambiar de opción en un combo por ejemplo
cuando pierde el foco, si el contenido ha cambiado desde cuando lo recibió

click -> clickar
focus -> recibir el foco
blur -> perder el foco
keypress -> pulsar una tecla dentro del campo
input -> entrada de datos en el campo
select -> seleccionar parte del texto (ojo que parece que tiene que ver con un campo select, y no)
change ->
- en campo select ->cambiar de opción en un combo por ejemplo
- en campo input text -> cuando pierde el foco, si el contenido ha cambiado desde cuando lo recibió

propagación o burbujeo
captura

Propagación o burbujeo -> cuando se dispara un evento en un elemento, se propaga de padre a padre hasta la raíz del DOM (incluso un elmento superor a Document, que es Window)
En cualquiera de esos elementos padre se podría añadir un addEventListener para manejar ese evento en concreto cuando ocurra en cualquiera de sus hijos.

Captura -> Después del burbujeo hasta la raíz del DOM, se vuelve a ir bajando por esos mismos elementos hasta el que originó el evento.
En el manejador de eventos, para indicar que quieres manejarlo solo en la fase de captura, hay que poner true como tercer parámetro del addEventListener

Qué es el método evento.preventDefault?
Qué es el método evento.stopPropagation?

preventDefault -> Se puede poner en un manejador de eventos para evitar que se produzca el comportamiento por defecto del evento.
Por ejemplo, al pulsar un ancla de referencia, se podría evitar que al pulsar se navegue directamente a la dirección puesta en el href del ancla

stopPropagation -> evita la fase de burbujeo, pero no la fase de captura

En js hay tres formas de declara una variable. Di cuáles y el por qué de cada una

var -> se crea en el objeto window, se puede declarar y más tarde inicializar. Se puede re-declarar.
let -> se crea en window, pero si se crea entre llaves (un if, o un blucle, ..) se destruye al salir de ese bloque
const -> se inicializa a la vez que se declara. Luego no se puede cambiar su valor. Esto es porque lo que se mantiene constante es la referencia al objeto, pero el objeto sí puedes cambiarlo, por ejemplo puedes modificar los elementos si es un array, o las propiedades si es un objeto

Con qué estructuras harías en js un array de elementos de clave-valor?
Y en php y phyton?

En js sería hacer un array de objetos json
let facturas = [];
facturas.push({id:100,fecha:”abril-2019”,total:30});

En php sería con arrays asociativos`
$miArryAsociativo = array(
“clave1” => “valor1”,
“clave2” => “valor2”,
“clave3” => “valor3”
);

echo $diccionario[“clave1”]; // Imprime “valor1”
echo $diccionario[“clave2”]; // Imprime “valor2”

En phyton sería con diccionarios
diccionario = {
“clave1”: “valor1”,
“clave2”: “valor2”,
“clave3”: “valor3”
}

print(diccionario[“clave1”]) # Imprime “valor1”
print(diccionario[“clave2”]) # Imprime “valor2”

Las expresiones regulares, cómo se crean y se usan para comprobar si una cadena las cumple?

Crearla -> let re1 = new RegExp(“hey”);
Usarla -> re1.test(‘hey’)

En js se pueden usar comillas simples y dobles, incluso comilla simple al revés (backtick), que diferencia hay entre ellas?

Simples y dobles son iguales: pero hay que escapar el caracter de comillas si se quiere usar dentro (cada tipo de comilla en su caso)

las comillas al revés interpretan los saltos de línea, sin tener que poner /n
y permite evaluar variables, sin tener que usar eval(cadenaconvariables)
cadena2 = esto es otra cadena ${1+2};

Cómo definirías el concepto de Closure en js?

Cuando hay funciones anidadas, node crea un contexto de memoria para la función interior, que se queda en memoria.

Qué es el concepto de Prototype en js y para qué dos cosas se puede usar?

Es una propiedad de la función constructora de un objeto

Permite crear funciones “de clase” en el sentido de que si se le asigna a la propiedad prototype una función, esta no se duplicará en cada objeto creado con la función constructora.
Si se trata de ejecutar una función de un objeto, el sistema primero la busca en el objeto, y si no la encuentra, la busca en la propiedad prototype de su función constructora.

También sirve para simular herencia: Primero, en la función constructora de un objeto se hace una llamada a la función .call() de otra función constructora, de forma que el primer objeto toma toda la definición del segundo

function Empleado(nombre,edad,salario){
Persona.call(this,nombre,edad);
this.salario = salario;
}

También se puede hacer así
Empleado.prototype=new Persona();

Expresiones regulares
https://flaviocopes.com/javascript-regular-expressions/

Brainscape's Knowledge GenomeTM

b3t8 - Front Flashcards

Brainscape's Knowledge Genome^TM