Hoja de trucos de JS

Ocultar comentarios
?↖X
Lo esencial➤
Guión en la página
< tipo de script = "texto/javascript" > ...
</ guión >

Incluir archivo JS externo

< secuencia de comandos src = "nombre de archivo.js" ></ secuencia
de comandos >

Retraso: 1 segundo de tiempo de espera

establecerTiempo de espera ( función ( ) {

} , 1000 ) ;

Funciones
function sumarNúmeros (a, b) {
return a + b; ;
}
x = sumarNúmeros( 1 , 2 );

Editar elemento DOM

documento _ getElementById ( "elementID" ).innerHTML = "¡Hola
mundo!" ;

Producción
consola .log (a); // escribir en el
documento de la consola del navegador . escribir (a); //
escribir en la
alerta HTML (a); // salida en un cuadro de alerta
confirmar ( "¿En serio?" ); // cuadro de diálogo sí/no,
devuelve verdadero/falso dependiendo de
la solicitud de clic del usuario ( "¿Su edad?" , "0" ); //
diálogo de entrada. El segundo argumento es el valor inicial.

Comentarios
/* Línea múltiple
comentario */
// Una línea

?↖X
Bucles↶
En bucle
for (var i = 0 ; i < 10 ; i ++ ) {
documento . escribe (i + ": " + i * 3 + "<br />" );
}
var suma = 0 ;
 for (var i = 0 ; i < a. longitud ; i ++ ) {
suma + = a[i];
} // analizando una matriz
html = "" ;
for (var i de custOrder) {
html + = "<li>" + i + "</li>" ;
}

Mientras bucle
var i = 1 ; // inicializa
while (i < 100 ) { // entra en el ciclo si la
afirmación es verdadera
i * = 2 ; // incremento para evitar
un documento de bucle infinito . escribir (i + ", " ); //
producción
}

hacer mientras bucle

var i = 1 ; // inicializa
do { // entra en ciclo al menos una vez
i * = 2 ; // incremento para evitar
un documento de bucle infinito . escribir (i + ", " ); // salida
} while (i < 100 ) // repite el ciclo si la
declaración es verdadera al final

Romper
for (var i = 0 ; i < 10 ; i ++ ) {
if (i == 5 ) { break ; } // detiene y sale del
documento de ciclo . escribir (i + ", " ); // el último
número de salida es 4
}

Continuar
for (var i = 0 ; i < 10 ; i ++ ) {
if (i == 5 ) { continuar ; } // salta el resto del
documento del ciclo . escribir (i + ", " ); // salta 5
}

?↖X
anuncios📣
?↖X
Si - Más⇵
if ((edad >= 14 ) & & (edad < 19 )) { //
estado de condición lógica = "Elegible". ; // se
ejecuta si la condición es verdadera
} else { // el bloque else es
opcional
status = "No elegible". ; // ejecutado si la condición
es falsa
}

Declaración de cambio
switch ( new Date (). getDay ()) { // la entrada es el día
actual
 case 6 : // if (day == 6)
text = "Saturday" ;
romper ;
caso 0 : // si (día == 0)
texto = "Domingo" ;
romper ;
predeterminado : // más...
texto = "Lo que sea" ;
}

?↖X
VariablesX
var a; // variable
var b = "init" ; // cadena
var c = "Hola" + " " + "Joe" ; // = "Hola Joe"
var d = 1 + 2 + "3" ; // = "33"
var e = [ 2 , 3 , 5 , 8 ]; // matriz
var f = falso ; // variable booleana
g = /()/; // RegEx
var h = función(){}; // objeto de función
const PI = 3.14 ; // constante
var a = 1 , b = 2 , c = a + b; // una línea
sea z = 'zzz' ; // variable local de ámbito de
bloque

Modo estricto
"uso estricto" ; // Usa el modo estricto para escribir código
seguro
x = 1 ; // Lanza un error porque la variable no está
declarada

Valores
falso , verdadero // booleano
18 , 3.14 , 0b10011, 0xF6 , NaN // número
"flor" , 'Juan' // cadena
indefinida , nulo , infinito // especial

Operadores
a = b + c - d; // suma, resta
a = b * (c / d); // multiplicación, división
x = 100 % 48 ; // módulo. 100 / 48 resto = 4
a ++ ; b- ; _ // incremento y decremento de postfijo

Operadores bit a bit

& Y 5 y 1 (0101 y 0001) 1 (1)

| O 5 | 1 (0101 | 0001) 5 (101)
10
~ NO ~5 (~0101)
(1010)
^ XOR 5 ^ 1 (0101 ^ 0001) 4 (100)
10
<< Shift izquierdo 5 << 1 (0101 << 1)
(1010)
>> Giro a la derecha 5 >> 1 (0101 >> 1) 2 (10)
desplazamiento a la derecha de relleno 5 >>> 1 (0101 >>>
>>> 2 (10)
cero 1)
Aritmética
a * (b + c) // agrupando
persona.edad // miembro
persona[edad] // miembro
! (a == b) // lógico no
a ! = b // tipo distinto
de a // tipo (número, objeto, función...)
x < < 2 x > > 3 // desplazamiento minario
a = b // asignación
a == b // igual
a a ! = b // desigual
a === b // estrictamente igual
a ! == b // estricto desigual
a < ba > b // menor y mayor que
a <= ba >= b // menor o igual, mayor o igual
a + = b // a = a + b (funciona con - * %...)
a & & b // lógico y
a || b // lógico o

?↖X
anuncios📣
?↖X
Tipos de datosℜ
var edad = 18 ; // numero
var nombre = "Jane" ; // cadena
var nombre = {primero: "Jane" , último: "Doe" }; // objeto
var verdad = falso ; // hojas booleanas
var = [ "HTML" , "CSS" , "JS" ]; // arreglo
var a; tipo de a; // indefinido
var a = nulo; // valor nulo

Objetos
var estudiante = { // nombre del objeto
firstName: "Jane" , // lista de propiedades y valores
lastName: "Doe" ,
edad: 18 ,
height: 170 ,
fullName : function() { // la función de objeto
devuelve este .firstName + " " + this .lastName;
}
};
estudiante.edad = 19 ; // valor de configuración
estudiante[edad] ++ ; // incrementando
nombre = estudiante.fullName(); // llamar a la función del objeto

?↖X
Instrumentos de cuerda⊗
var abc = "abcdefghijklmnopqrstuvwxyz" ;
var esc = 'No \' no \n sé' ; // \n nueva línea
var len = abc. longitud ; // longitud de la cadena
abc. indexOf ( "lmno" ); // encuentra la subcadena, -1
si no contiene
abc. lastIndexOf ( "lmno" ); // última aparición
 abc. rebanada ( 3 , 6 );
valores negativos cuentan detrás
de abc. reemplazar ( "abc" ,"123" );
toma expresiones regulares
abc. a Mayúsculas ();
abc. a Minúsculas ();
abc. concat ( " " , str2);
abc. charAt ( 2 );
abc[ 2 ];
funciona
abc. charCodeAt ( 2 );
índice: "
a B C. dividir ( "," );
comas da una matriz
abc. dividir ( "" );
128 . a la Cadena ( 16 );
(16), octal (8) o binario (2)
// elimina "def", los
// buscar y reemplazar,
// convertir a mayúsculas
// convertir a minúsculas
// abc + " " + str2
// carácter en el índice: "c"
// inseguro, abc[2] = "C" no
// código de carácter en el
// dividir una cadena en
// división en caracteres
// número a hexadecimal

?↖X
Eventos🕖
< botón al hacer clic = "miFunción();" >
haga clic aquí
</ botón >

Ratón
onclick , oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave,
onmousemove, onmouseover , onmouseout , onmouseup

Teclado
onkeydown , onkeypress, onkeyup

Marco
onabort, onbeforeunload, onerror, onhashchange, onload , onpageshow, onpagehide,
onresize, onscroll, onunload

Forma
onblur, onchange , onfocus, onfocusin, onfocusout, oninput, oninvalid, onreset, onsearch,
onselect, onsubmit

Arrastrar
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop

Portapapeles
al copiar, al cortar, al pegar

Medios de comunicación
onabort, oncanplay, oncanplaythrough, ondurationchange, onfinaled, onerror,
onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress,
onratechange, onseeked, onseeking, onstaled, onsuspend, ontimeupdate,
onvolumechange, onwaiting

Animación
fin de animación, iteración de animación, inicio de animación

Misceláneas
 final de transición, mensaje, rueda del mouse, en línea, sin conexión, en estado
emergente, en exhibición, en almacenamiento, en cambio, en rueda, en toque cancelar, en
toque final, en toque mover, en toque iniciar

?↖X
Números y Matemáticas∑
var pi = 3.141 ;
pi.aFijo( 0 ); // devuelve 3
pi.toFixed( 2 ); // devuelve 3,14 - para trabajar con
dinero
pi.toPrecision( 2 ) // devuelve 3,1
pi. valorDe (); // devuelve el número Número
( verdadero ) ; // convierte a número
Número ( nueva Fecha ()) // número de milisegundos desde
1970
parseInt ( "3 meses" ); // devuelve el primer número: 3
parseFloat ( "3,5 días" ); // devuelve 3.5
número _ MAX_VALUE // número JS más grande posible
Número . MIN_VALUE // número JS más pequeño posible
Número . NEGATIVE_INFINITY //
-Número infinito . POSITIVE_INFINITY // Infinito

Matemáticas.
var pi = Matemáticas . IP ; // 3.141592653589793
Matemáticas . redondo ( 4.4 ); // = matemáticas de 4
redondeos
. redondo ( 4.5 ); // = 5 Matemáticas . pow ( 2 , 8 );
// = 256 - 2 a la potencia de 8 Math . sqrt ( 49 ); // =
Matemáticas de 7 raíces cuadradas . abdominales ( -3,14 ) ;
// = 3.14 - valor absoluto positivo

matemáticas _ techo ( 3.14 ); // = 4 - matemáticas

redondeadas
. piso ( 3,99 ); // = Matemáticas con redondeo de 3 hacia
abajo . pecado ( 0 ); // = 0-seno Matemáticas . cos (
Matemáticas . PI ); // OTROS: tan,atan,asin,acos, Math . min (
0 , 3 , - 2 , 2 ); // = -2 - el valor más bajo Matemáticas .
máximo

( 0 , 3 , - 2 , 2 ); // = 3 - el valor más alto

Math .log ( 1 ); // = 0 logaritmo natural
Matemáticas . exp ( 1 ); // = 2.7182pow(E,x)
Matemáticas . aleatorio (); // número aleatorio entre 0 y
1
Matemáticas . piso ( Math . aleatorio () * 5 ) + 1 ; // entero
aleatorio, de 1 a 5

Constantes como Math.PI:

E, PI, SQRT2, SQRT1_2, LN2, LN10, LOG2E, Log10E

?↖X
fechas📆
 Sáb 03 Jun 2023 17:38:57 GMT+0200 (hora de verano de Europa central)
var d = nueva fecha ();
1685806737274 milisegundos pasaron desde 1970
Número (d)
Fecha ( "2017-06-23" ); // declaración de fecha
Fecha ( "2017" ); // se establece en
la fecha del 1 de enero ( "2017-06-23T12:00:00-09:45" ); // fecha
- hora AAAA-MM-DDTHH:MM:SSZ
Fecha ( "23 de junio de 2017" ); // formato de fecha
larga
Fecha ( "23 de junio de 2017 07:45:00 GMT+0100 (hora de Tokio)" );
// zona horaria

Obtener tiempos
var d = nueva fecha ();
a = d. obtenerDia (); // obtener el día de la semana

obtenerFecha (); // día como número (1-31)

getDay ();
getFullYear ();
getHours ();
getMilisegundos ();
obtenerMinutos ();
getMonth ();
obtenerSegundos ();
obtenerTiempo ();
// día de la semana como un número (0-6)
// año de cuatro dígitos (yyyy)
// hora (0-23)
// milisegundos (0-999)
// minutos (0-59)
// mes (0-11)
// segundos (0-59)
// milisegundos desde 1970

Establecer parte de una fecha

var d = nueva fecha ();
d. fijarFecha (d. obtenerFecha () + 7 ); // agrega una semana a
una fecha

establecer fecha (); // día como un número (1-31)

setFullYear (); // año (opcionalmente mes y día)
setHours (); // hora (0-23)
setMilisegundos (); // milisegundos (0-999)
setMinutes (); // minutos (0-59)
setMonth (); // mes (0-11)
setSeconds (); // segundos (0-59)
establecerHora (); // milisegundos desde 1970)

?↖X
arreglos≡
var perros = [ "Bulldog" , "Beagle" , "Labrador" ];
var perros = new Array ( "Bulldog" , "Beagle" , "Labrador" ); //
declaración

alerta (perros[ 1 ]); // valor de acceso en el índice,

el primer elemento es [0]
perros [ 0 ] = "Bull Terier" ; // cambia el primer elemento

for (var i = 0 ; i < dogs. length ; i ++ ) { // analizando

con array.length
console .log (dogs[i]);
}

Métodos
perros. a la cadena (); // convertir a
cadena: resultados
perros "Bulldog,Beagle,Labrador". unir ( "*" );
// unir:
perros "Bulldog * Beagle * Labrador". estallar ();
// elimina el último elemento
perros. empujar ( "Chihuahua" ); // añade un nuevo
elemento al final
perros[perros. longitud ] = "Chihuahua" ; // lo mismo que
empujar
perros. cambio (); // elimina
los perros del primer elemento.unshift ( "Chihuahua" );
// añade un nuevo elemento al principio
delete dogs[ 0 ]; // cambia el elemento a
perros indefinidos (no recomendados)
. empalme ( 2 , 0 , "Pug" , "Boxeador" ); // agregar elementos
(dónde, cuántos eliminar, lista de elementos)
var animales = perros. concat (gatos, pájaros); // unir dos
arreglos (perros seguidos de gatos y pájaros)
perros. rebanada ( 1 , 4 ); // elementos de
[1] a [4-1]
perros. ordenar (); // ordena la cadena
alfabéticamente
perros. reversa (); // ordena la cadena en
orden descendente
x. ordenar (función (a, b) { retornar a - b}); // clasificación
numérica
x. ordenar (función (a, b) { retornar b - a}); // orden numérico
descendente
más alto = x[ 0 ]; // el primer elemento en
la matriz ordenada es el valor x más bajo (o más alto)
. clasificar(función(a, b){ return 0.5 - Math . random ()});
// clasificación de orden aleatorio

concat, copyWithin, cada, llenar, filtrar, buscar, findIndex, forEach, indexOf, isArray, join,
lastIndexOf, map, pop, push, reduce, reduceRight, reverse, shift, slice, some, sort, splice,
toString, unshift, valor de

?↖X
Funciones globales()
evaluar (); // ejecuta una cadena como si fuera
un código de secuencia de comandos
String ( 23 ); // devuelve la cadena del número
( 23 ). a la cadena (); // devuelve la cadena del número
Número
( " 23" ); // devuelve el número de la cadena
decodeURI(enc); // decodificar URI. Resultado: "mi
página.asp"
encodeURI(uri); // codifica URI. Resultado:
"my%page.asp"
decodeURIComponent(enc); // decodifica un componente URI
encodeURIComponent(uri); // codificar un componente URI
isFinite(); // es variable un número legal finito
isNaN (); // es variable un número ilegal
parseFloat (); // devuelve el número de punto
flotante de la cadena
 parseInt (); // analiza una cadena y devuelve un
entero

?↖X
Expresiones regulares\norte
var a = cadena. buscar ( /CheatSheet/i );

Modificadores
irealizar coincidencias sin distinción entre mayúsculas y minúsculas
gramorealizar un partido global
metrorealizar coincidencias multilínea

Patrones
\Personaje de escape
\dencontrar un dígito
\sencontrar un carácter de espacio en blanco
\bencontrar coincidencia al principio o al final de una palabra
n+contiene al menos una n
norte*contiene cero o más ocurrencias de n
¿norte?contiene cero o una ocurrencia de n
^Comienzo de cadena
psfin de cadena
\uxxxxencontrar el caracter Unicode
.Cualquier personaje individual
(a|b)a o B
(...)sección de grupo
[a B C]En rango (a, b o c)
[0-9]cualquiera de los dígitos entre paréntesis
[^ abc]Fuera de rango
\sespacio en blanco
¿a?Cero o uno de un
a*Cero o más de un
a*?Cero o más, poco codicioso
un+Uno o más de un
un+?Uno o más, poco codiciosos
un{2}Exactamente 2 de un
un{2,}2 o más de un
un{,5}Hasta 5 de un
un{2,5}2 a 5 de un
un{2,5}?2 a 5 de a, poco codicioso
[:punto:]Cualquier símbolo de puntuación
[:espacio:]Cualquier carácter de espacio
[:blanco:]Espacio o pestaña

?↖X
anuncios📣
?↖X
errores⚠
try { // bloque de código para probar
función indefinida();
}
catch (err) { // bloquear para manejar errores
console .log (err.message);
}
Tirar error
lanzar "Mi mensaje de error" ; // lanzar un texto

Validación de entrada
var x = documento . getElementById ( "minum" ). valor ; // obtiene
el valor de entrada
try {
if (x == "" ) throw "empty" ; // casos de
error
if ( isNaN (x)) throw "not a number" ;
x = Número (x);
si (x > 10 ) lanza "demasiado alto" ;
}
catch (err) { // si hay un
documento de error . escribir ( "La entrada es" + err);
//
consola de salida de error .error (err); //
escribe el error en la consola
}
finalmente {
documento . escribir ( "</br />Terminado" ); //
ejecutado independientemente del resultado de try/catch
}

Valores de nombre de error

RangeErrorUn número está "fuera de rango"
Error de referenciaHa ocurrido una referencia ilegal
Error de sintaxisSe ha producido un error de sintaxis.
Error de tecleadoSe ha producido un error de tipo
URIErrorSe ha producido un error encodeURI()

?↖X
JSONj
var str = '{"names":[' + // crear objeto JSON
'{"primero":"Hakuna","últimoN":"Matata" },' +
'{"primero":"Jane","últimoN ":"Doe" },' +
'{"primero":"Aire","último":"Jordan" }]}' ;
obj = JSON. analizar (str); // analizar
el documento . escribir (obj.nombres[ 1 ].primero); //
acceso

Enviar
var myObj = { "nombre" : "Jane" , "edad" : 18 , "ciudad" :
"Chicago" }; // crear objeto
var myJSON = JSON.stringify(myObj); //
ventana de cadena . ubicación = "demo.php?x=" + myJSON;
// enviar a php

Almacenamiento y recuperación
myObj = { "nombre" : "Jane" , "edad" : 18 , "ciudad" : "Chicago" };
miJSON = JSON.stringify(miObj); // almacenar datos
localStorage.setItem( "testJSON" , myJSON);
texto = localStorage.getItem( "testJSON" ); // recuperando
datos
obj = JSON. analizar (texto);
documento _ escribir (obj. nombre );
 ?↖X
promesasÞ
function sum (a, b) {
return Promise (función (resolver, rechazar) {
setTimeout (function () {
// enviar la respuesta después de 1 segundo
if ( typeof a ! == "number" || typeof b ! == " número" ) {
// probar los tipos de entrada
devuelven rechazo( new TypeError ( "Las entradas deben
ser números" ));
}
resolver(a + b);
}, 1000 );
});
}
var miPromesa = sum( 10 , 5 );
myPromsise.then(función (resultado) {
documento _ escribir ( " 10 + 5: " , resultado);
devuelve la suma ( null , "foo" ); // Datos no válidos
y devuelve otra promesa
}).then(function () { // No se llamará debido al
error
}). catch (función (err) { // En su lugar, se llama
al controlador catch, después de otra
consola .error (err); // => Proporcione dos
números para sumar.
});

estados
pendiente, cumplido, rechazado

Propiedades
Promesa.longitud, Promesa.prototipo

Métodos
Promise.all (iterable), Promise.race (iterable), Promise.reject (motivo), Promise.resolve
(valor)

?↖X
Enlaces útiles↵
Limpiador JS ofuscador ¿Puedo usar? Nodo.js jQuery probador de expresiones
regulares

Hoja de referencia interactiva en línea de JavaScript (JS)