b3t8 - Front

Question 1

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

Answer 1

ECMA262

Question 2

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

Chrome
Opera
Edge
Safari
Firefox

Answer 2

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

Question 3

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

Answer 3

es en gran parte funcional

Otros lenguajes funcionales son
f#
haskell
lisp

Question 4

Qué lenguajes de alto nivel de javascript hay?

Answer 4

TypeScript
CoffeeScript
Dart (Goolge)
ClojureScript

Question 5

Nombra 3 transpiladores de javascript

Answer 5

Babel
Traceur
Esc
TypeScript Compiler

Question 6

Qué es el fichero package.json?

Answer 6

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

Question 7

En qué fichero se descarga las dependencias node?

Answer 7

en la carpeta node_modules

Question 8

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

Answer 8

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

Question 9

Qué son Grunt o Gulp y Yeoman?

Answer 9

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

Question 10

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

Answer 10

Node
Dentro, V8 sería como la jvm

Question 11

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

Answer 11

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

Question 12

Qué son los package bundles o empaquetadores? Nombra algunos

Answer 12

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

webpack
browserify
fusebox
rollup
parcel

Question 13

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

Answer 13

Angular -> ng : ng new nominas

Question 14

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

Answer 14

pug
handlebars
moustache

Question 15

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

Answer 15

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{
…
})

Question 16

Por qué se caracteriza AJAX?

Qué tipo de contenido devuelven las llamadas AJAX?

Answer 16

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

Question 17

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

Answer 17

XMLHttpRequest (XHR)

Question 18

Atributos importantes del objeto XHR de AJAX
readyState
status
responseXml
responseText

Answer 18

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

Question 19

Métodos importantes del objeto XHR de AJAX

open
send

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

Answer 19

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

Question 20

Eventos importantes de objeto XHR de AJAX

onreadystatechange

Answer 20

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

Question 21

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

Answer 21

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

Question 22

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

Answer 22

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

Question 23

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

Answer 23

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

Question 24

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

Answer 24

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/

Question 25

tipos de datos en js

Number
String
Boolean
Array
Object
undefined
null

Answer 25

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

La función typeof(i) devuelve el tipo

Question 26

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

Answer 26

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

Question 27

Ver laboratorio de js

Answer 27

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

Question 28

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

Answer 28

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

Question 29

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

Answer 29

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

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

Crear fecha con -> new Date()

Question 30

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

Answer 30

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

Question 31

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

Answer 31

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>

Question 32

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

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

Answer 32

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

Question 33

Dos métodos del objeto JSON en js para

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

Answer 33

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

Question 34

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?

Answer 34

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

Question 35

Qué estados tiene una promesa en js?

Answer 35

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

Question 36

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

Answer 36

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)

Question 37

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ó

Answer 37

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ó

Question 38

propagación o burbujeo
captura

Answer 38

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

Question 39

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

Answer 39

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

Question 40

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

Answer 40

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

Question 41

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

Answer 41

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”

Question 42

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

Answer 42

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

Question 43

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

Answer 43

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};

Question 44

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

Answer 44

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

Question 45

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

Answer 45

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();

Question 46

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