b3t8 - Front Flashcards
Qué versión de ECMA es el ECMAScript6 o ECMAScript2015?
ECMA262
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
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
Qué lenguajes de alto nivel de javascript hay?
TypeScript
CoffeeScript
Dart (Goolge)
ClojureScript
Nombra 3 transpiladores de javascript
Babel
Traceur
Esc
TypeScript Compiler
Qué es el fichero package.json?
Fichero donde se configuran las dependencias de javascript
Lo usan npm y yarn
En qué fichero se descarga las dependencias node?
en la carpeta node_modules
Qué herramientas de gestión de dependencias y paquetería hay en js?
yarn
npm (node package manager)
Bower (se usa poco)
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
Cual es lo equivalente a la JRE de java pero en javascript?
Node
Dentro, V8 sería como la jvm
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
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
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
Tres productos que son superlenguajes de HTML5, también llamados motores de plantillas
pug
handlebars
moustache
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{
…
})
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
Cuál es el objeto en AJAX, que está en todos los navegadores y que sirve para
XMLHttpRequest (XHR)
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
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 «_space;b
Operador RIGHT SHIFT -> a»_space; b
Operador RIGHT SHIFT sin signo-> a»_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 «_space;b Desplazamiento de bits hacia la izquierda. Ej: 11 (3) pasa a 110 (6).
Operador RIGHT SHIFT -> a»_space; b Desplazamiento de bits hacia la derecha. Ej: 11 (3) pasa a 1 (1).
Operador RIGHT SHIFT sin signo-> a»_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/
