Hoja de trucos de JavaScript

Hoja de trucos de JavaScript PDFA continuación puede encontrar la hoja de trucos de Javascript en .pdf, así como en el texto.


Hoja de trucos de JavaScript

  • Enlace de descarga

Conceptos básicos de JavaScript

Comencemos con lo básico: cómo incluir JavaScript en un sitio web.

Incluir JavaScript en una página HTML

Para incluir JavaScript dentro de una página, debe envolverlo en

Con esta entrada, el navegador puede identificar y ejecutar el código correctamente.

Llamar a un archivo JavaScript externo

También puede colocar JavaScript en su propio archivo y nombrarlo dentro de su HTML. De esa manera, puede mantener diferentes tipos de código separados entre sí, para crear archivos mejor organizados. Si su código está en un archivo llamado myscript.js, lo llamarías:

Incluyendo comentarios

Los comentarios son importantes porque ayudan a otras personas a comprender lo que sucede en su código o le recuerdan si olvidó algo usted mismo. Tenga en cuenta que deben marcarse correctamente para que el navegador no intente ejecutarlos.

En JavaScript tienes dos opciones diferentes:

  • Comentarios de una línea - Para incluir un comentario que se limita a una sola línea, preceda con //
  • Comentarios de varias líneas - En caso de que desee escribir comentarios más largos entre varias líneas, envuélvalas / * y * / para evitar que se ejecute

Variables en JavaScript

Las variables son valores suplentes que puede usar para realizar operaciones. Deberías estar familiarizado con ellos en la clase de matemáticas.

var, const, dejar

Tiene tres posibilidades diferentes para declarar una variable en JavaScript, cada una con sus propias especialidades:

  • var - La variable más común. Se puede reasignar pero solo se puede acceder dentro de una función. Variables definidas con var pasar a la parte superior cuando se ejecuta el código.
  • const - No se puede reasignar y no se puede acceder antes de que aparezcan dentro del código.
  • dejar - Similar a const, la dejar variable puede reasignarse pero no volver a declararse.

Tipos de datos

Las variables pueden contener diferentes tipos de valores y tipos de datos. Tu usas = para asignarlos:

  • Números var age = 23
  • Variables var x
  • Texto (cadenas) - var a = "init"
  • Operaciones var b = 1 + 2 + 3
  • Declaraciones verdaderas o falsas var c = verdadero
  • Números constantes const PI = 3.14
  • Objetos - nombre var = {firstName: "John", apellido: "Doe"}

Hay mas posibilidades. Tenga en cuenta que las variables distinguen entre mayúsculas y minúsculas. Eso significa apellido y apellido será manejado como dos variables diferentes.

Objetos

Los objetos son ciertos tipos de variables. Son variables que pueden tener sus propios valores y métodos. Estas últimas son acciones que puede realizar en objetos..

var persona = {
firstName: "John",
apellido: "Doe",
edad: 20,
nacionalidad: "alemán"
};

El siguiente nivel: matrices

Lo siguiente en nuestra hoja de trucos de JavaScript son las matrices. Las matrices son parte de muchos lenguajes de programación diferentes. Son una forma de organizar variables y propiedades en grupos. Aquí se explica cómo crear uno en JavaScript:

var fruit = ["Plátano", "Manzana", "Pera"];

Ahora tienes una matriz llamada Fruta que contiene tres elementos que puede usar para futuras operaciones.

Métodos de matriz

Una vez que haya creado arreglos, hay algunas cosas que puede hacer con ellos:

  • concat () - Unir varias matrices en una
  • índice de() - Devuelve la primera posición en la que aparece un elemento dado en una matriz
  • unirse() - Combina elementos de una matriz en una sola cadena y devuelve la cadena
  • lastIndexOf () - Da la última posición en la que aparece un elemento dado en una matriz
  • popular() - Elimina el último elemento de una matriz
  • empujar() - Agregar un nuevo elemento al final
  • contrarrestar() - Ordenar elementos en orden descendente
  • cambio() - Eliminar el primer elemento de una matriz
  • rebanada() - Extrae una copia de una parte de una matriz a una nueva matriz
  • ordenar() - Ordena elementos alfabéticamente
  • empalme() - Agrega elementos de una manera y posición especificadas
  • Encadenar() - Convierte elementos en cadenas
  • unshift () —Agrega un nuevo elemento al principio
  • valor de() - Devuelve el valor primitivo del objeto especificado

Operadores

Si tiene variables, puede usarlas para realizar diferentes tipos de operaciones. Para hacerlo, necesitas operadores.

Operadores Básicos

  • + - Además
  • - - Resta
  • * * - Multiplicación
  • / / - División
  • (...) - Operador de agrupación, las operaciones entre paréntesis se ejecutan antes que las que están fuera
  • % - Módulo (resto)
  • ++ - Incremento de números
  • -- - Disminuir números

Operadores de comparación

  • == - Igual a
  • === - Igual valor e igual tipo
  • != - No es igual
  • !== - Valor no igual o tipo no igual
  • > - Mas grande que
  • < - Menos que
  • > = - Mayor qué o igual a
  • <= - Menos que o igual a
  • ? - Operador ternario

Operadores logicos

  • && - Lógico y
  • || - Lógico o
  • ! - Lógico no

Operadores bit a bit

  • Y - Y declaración
  • El | - OR declaración
  • ~ - NO
  • ^ - XOR
  • << - Shift izquierdo
  • >> - Giro a la derecha
  • >>> - Relleno cero desplazamiento a la derecha

Las funciones

Las funciones de JavaScript son bloques de código que realizan una determinada tarea. Una función básica se ve así:

nombre de función (parámetro1, parámetro2, parámetro3) {
// lo que hace la función
}

Como puede ver, consiste en el función palabra clave más un nombre. Los parámetros de la función están entre paréntesis y tiene corchetes alrededor del desempeño de la función. Puede crear el suyo propio, pero para facilitarle la vida: también hay una serie de funciones predeterminadas.

Datos de salida

Una aplicación común para funciones es la salida de datos. Para la salida, tiene las siguientes opciones:

  • alerta() - Salida de datos en un cuadro de alerta en la ventana del navegador
  • confirmar() - Abre un cuadro de diálogo sí / no y devuelve verdadero / falso dependiendo del clic del usuario
  • console.log () - Escribe información en la consola del navegador, buena para fines de depuración
  • document.write () - Escribir directamente en el documento HTML
  • rápido() - Crea un diálogo para la entrada del usuario

Funciones globales

Las funciones globales son funciones integradas en cada navegador capaz de ejecutar JavaScript.

  • decodeURI () - Decodifica un Identificador uniforme de recursos (URI) creado por encodeURI o similar
  • decodeURIComponent () - Decodifica un componente URI
  • encodeURI () - Codifica un URI en UTF-8
  • encodeURIComponent () - Lo mismo pero para componentes URI
  • eval () - Evalúa el código JavaScript representado como una cadena
  • isFinite () - Determina si un valor pasado es un número finito
  • isNaN () - Determina si un valor es NaN o no
  • Número() —- Devuelve un número convertido de su argumento
  • parseFloat () - Analiza un argumento y devuelve un número de coma flotante
  • parseInt () - Analiza su argumento y devuelve un entero

JavaScript Loops

Los bucles son parte de la mayoría de los lenguajes de programación. Le permiten ejecutar bloques de código el número deseado de veces con diferentes valores:

para (antes del bucle; condición para el bucle; ejecutar después del bucle) {
// qué hacer durante el ciclo
}

Tiene varios parámetros para crear bucles:

  • para - La forma más común de crear un bucle en JavaScript
  • mientras - Configura condiciones bajo las cuales se ejecuta un bucle
  • hacer mientras - Similar a mientras bucle pero se ejecuta al menos una vez y realiza una comprobación al final para ver si se cumple la condición para ejecutar nuevamente
  • rotura —Utilizado para detener y salir del ciclo en ciertas condiciones.
  • Seguir - Omita partes del ciclo si se cumplen ciertas condiciones

Si - Más Declaraciones

Este tipo de declaraciones son fáciles de entender. Al usarlos, puede establecer condiciones para cuando se ejecuta su código. Si se aplican ciertas condiciones, se hace algo; de lo contrario, se ejecuta otra cosa..

if (condición) {
// qué hacer si se cumple la condición
} más {
// qué hacer si no se cumple la condición
}

Un concepto similar a si más es el cambiar declaración. Sin embargo, con el interruptor, selecciona uno de varios bloques de código para ejecutar.

Instrumentos de cuerda

Las cadenas son lo que JavaScript llama al texto que no realiza una función pero puede aparecer en la pantalla.

var person = "John Doe";

En este caso, John Doe es la cuerda.

Personajes de escape

En JavaScript, las cadenas están marcadas con comillas simples o dobles. Si desea usar comillas en una cadena, debe usar caracteres especiales:

  • \ ' - Una frase
  • \ " - Doble cita

Aparte de eso, también tiene caracteres de escape adicionales:

  • \\ - Barra invertida
  • \si - Retroceso
  • \F - Formulario de alimentación
  • \norte - Nueva línea
  • \ r - Devolución del carro
  • \ t - Tabulador horizontal
  • \ v - Tabulador vertical

Métodos de cuerda

Hay muchas formas diferentes de trabajar con cadenas:

  • charAt () - Devuelve un carácter en una posición especificada dentro de una cadena
  • charCodeAt () - Te da el Unicode de un personaje en esa posición
  • concat () - Concatena (une) dos o más cadenas en una
  • fromCharCode () - Devuelve una cadena creada a partir de la secuencia especificada de unidades de código UTF-16
  • índice de() - Proporciona la posición de la primera aparición de un texto especificado dentro de una cadena
  • lastIndexOf () - Igual que índice de() pero con la última ocurrencia, buscando hacia atrás
  • partido() - Recupera las coincidencias de una cadena contra un patrón de búsqueda
  • reemplazar() - Buscar y reemplazar texto especificado en una cadena
  • buscar() - Ejecuta una búsqueda de un texto coincidente y devuelve su posición
  • rebanada() - Extrae una sección de una cadena y la devuelve como una nueva cadena
  • división() - Divide un objeto de cadena en una matriz de cadenas en una posición especificada
  • substr () - Similar a rebanada() pero extrae una subcadena dependiendo de un número específico de caracteres
  • subcadena () - También similar a rebanada() pero no puedo aceptar índices negativos
  • toLowerCase () - Convertir cadenas a minúsculas
  • toUpperCase () - Convertir cadenas a mayúsculas
  • valor de() - Devuelve el valor primitivo (que no tiene propiedades o métodos) de un objeto de cadena

Sintaxis de expresiones regulares

Las expresiones regulares son patrones de búsqueda utilizados para combinar combinaciones de caracteres en cadenas. El patrón de búsqueda se puede usar para búsqueda de texto y texto para reemplazar operaciones.

Modificadores de Patrones

  • mi - Evaluar reemplazo
  • yo - Realizar coincidencias entre mayúsculas y minúsculas
  • sol - Realizar una correspondencia global
  • metro - Realizar coincidencia de varias líneas
  • s - Tratar las cadenas como una sola línea
  • X - Permitir comentarios y espacios en blanco en el patrón
  • U - Patrón no greedy

Soportes

  • [a B C] - Encuentra cualquiera de los caracteres entre paréntesis
  • [^ abc] - Encuentra cualquier personaje que no esté entre paréntesis
  • [0-9] - Se usa para encontrar cualquier dígito del 0 al 9
  • [Arizona] - Encuentra cualquier carácter de mayúscula A a minúscula z
  • (a | b | c) - Encuentra cualquiera de las alternativas separadas con El |

Metacaracteres

  • . - Encuentra un solo carácter, excepto línea nueva o terminador de línea
  • \ w - Carácter de la palabra
  • \ W - Carácter no verbal
  • \re - un dígito
  • \RE - Un carácter sin dígitos
  • \ s - Carácter de espacio en blanco
  • \ S - Carácter sin espacios en blanco
  • \si - Encuentra una coincidencia al principio / al final de una palabra
  • \SI - Una coincidencia no al principio / al final de una palabra
  • \ 0 - personaje NUL
  • \norte - Un nuevo personaje de línea
  • \F - Forma de alimentación de caracteres
  • \ r - Carácter de retorno de carro
  • \ t - Carácter de tabulación
  • \ v - Carácter de tabulación vertical
  • \ xxx - El carácter especificado por un número octal xxx
  • \ xdd - Carácter especificado por un número hexadecimal dd
  • \ uxxxx - El carácter Unicode especificado por un número hexadecimal XXXX

Cuantificadores

  • norte+ - Coincide con cualquier cadena que contenga al menos un n
  • norte* - Cualquier cadena que contenga cero o más ocurrencias de n
  • norte? - Una cadena que contiene cero o una aparición de n
  • n {X} - Cadena que contiene una secuencia de X n
  • n {X, Y} - Cadenas que contienen una secuencia de X a Y n
  • n {X,} - Coincide con cualquier cadena que contenga una secuencia de al menos X n
  • n $ - Cualquier cadena con n al final
  • ^ n - Cadena con n al comienzo
  • ?= n - Cualquier cadena seguida de una cadena específica n
  • ?!norte - Cadena que no es seguida por una cadena específica ni

Números y Matemáticas

En JavaScript, también puede trabajar con números, constantes y realizar funciones matemáticas..

Propiedades numéricas

  • VALOR MÁXIMO - El valor numérico máximo representable en JavaScript
  • MIN_VALUE - El valor numérico positivo más pequeño representable en JavaScript
  • Yaya - El valor "No es un número"
  • NEGATIVO_INFINIDAD - El valor infinito negativo
  • POSITIVO_INFINIDAD - Valor positivo infinito

Métodos numéricos

  • toExponential () - Devuelve la cadena con un número redondeado escrito como notación exponencial
  • toFixed () - Devuelve la cadena de un número con un número específico de decimales
  • toPrecision () - Cadena de un número escrito con una longitud especificada
  • Encadenar() - Devuelve un número como una cadena
  • valor de() - Devuelve un número como un número

Propiedades matematicas

  • mi - El número de Euler
  • LN2 - El logaritmo natural de 2
  • LN10 - Logaritmo natural de 10
  • LOG2E - Base 2 logaritmo de E
  • LOG10E - Base 10 logaritmo de E
  • Pi - El número PI
  • SQRT1_2 - Raíz cuadrada de 1/2
  • SQRT2 - La raíz cuadrada de 2

Métodos matemáticos

  • abs (x) - Devuelve el valor absoluto (positivo) de x
  • acos (x) - El arcocoseno de x, en radianes
  • asin (x) - Arcoseno de x, en radianes
  • atan (x) - El arcotangente de x como valor numérico
  • atan2 (y, x) - Argumento del cociente de sus argumentos.
  • techo (x) - Valor de x redondeado a su entero más cercano
  • cos (x) - El coseno de x (x está en radianes)
  • exp (x) - Valor de EX
  • piso (x) - El valor de x redondeado a su entero más cercano
  • log (x) - El logaritmo natural (base E) de x
  • max (x, y, z, ..., n) - Devuelve el número con el valor más alto
  • min (x, y, z, ..., n) - Lo mismo para el número con el valor más bajo
  • pow (x, y) - X al poder de y
  • aleatorio() - Devuelve un número aleatorio entre 0 y 1
  • redondo (x) - El valor de x redondeado a su entero más cercano
  • sin (x) - El seno de x (x está en radianes)
  • sqrt (x) - Raíz cuadrada de x
  • bronceado (x) - La tangente de un ángulo.

Manejo de fechas en JavaScript

También puede trabajar y modificar fechas y horas con JavaScript. Este es el próximo capítulo en la hoja de trucos de JavaScript.

Establecer fechas

  • Fecha() - Crea un nuevo objeto de fecha con la fecha y hora actuales
  • Fecha (2017, 5, 21, 3, 23, 10, 0) - Crear un objeto de fecha personalizado. Los números representan un año, mes, día, hora, minutos, segundos, milisegundos. Puede omitir lo que quiera, excepto un año y un mes..
  • Fecha ("2017-06-23") - Declaración de fecha como una cadena

Extracción de valores de fecha y hora

  • obtener la fecha() - Obtenga el día del mes como un número (1-31)
  • getDay () - El día de la semana como un número (0-6)
  • getFullYear () - Año como un número de cuatro dígitos (aaaa)
  • getHours () - Obtenga la hora (0-23)
  • getMilliseconds () - El milisegundo (0-999)
  • getMinutes () - Obtenga el minuto (0-59)
  • getMonth () - Mes como un número (0-11)
  • getSeconds () - Consigue el segundo (0-59)
  • consigue tiempo() - Obtenga los milisegundos desde el 1 de enero de 1970
  • getUTCDate () - El día (fecha) del mes en la fecha especificada según la hora universal (también disponible para día, mes, año completo, horas, minutos, etc.)
  • analizar gramaticalmente - Analiza una representación de cadena de una fecha y devuelve el número de milisegundos desde el 1 de enero de 1970

Establecer parte de una fecha

  • Establece la fecha() - Establecer el día como un número (1-31)
  • setFullYear () - Establece el año (opcionalmente mes y día)
  • setHours () - Establecer la hora (0-23)
  • setMilliseconds () - Establecer milisegundos (0-999)
  • setMinutes () - Establece los minutos (0-59)
  • setMonth () - Establecer el mes (0-11)
  • setSeconds () - Establece los segundos (0-59)
  • fijar tiempo() - Establecer el tiempo (milisegundos desde el 1 de enero de 1970)
  • setUTCDate () - Establece el día del mes para una fecha específica de acuerdo con la hora universal (también disponible para día, mes, año completo, horas, minutos, etc.)

Modo DOM

El DOM es el Modelo de objeto de documento de una página. Es el código de la estructura de una página web. JavaScript viene con muchas formas diferentes de crear y manipular elementos HTML (llamados nodos).

Propiedades del nodo

  • atributos - Devuelve una colección en vivo de todos los atributos registrados en un elemento
  • baseURI - Proporciona la URL base absoluta de un elemento HTML
  • childNodes - Da una colección de nodos secundarios de un elemento
  • primer hijo - Devuelve el primer nodo hijo de un elemento
  • último niño - El último nodo hijo de un elemento.
  • proximo hermano - Le da el siguiente nodo en el mismo nivel de árbol de nodos
  • nombre del nodo : Devuelve el nombre de un nodo
  • nodeType - Devuelve el tipo de un nodo
  • nodeValue - Establece o devuelve el valor de un nodo
  • propietarioDocumento - El objeto de documento de nivel superior para este nodo
  • parentNode - Devuelve el nodo padre de un elemento
  • anterior Hermano - Devuelve el nodo inmediatamente anterior al actual
  • contenido del texto - Establece o devuelve el contenido textual de un nodo y sus descendientes.

Métodos de nodo

  • añadir Niño() - Agrega un nuevo nodo hijo a un elemento como el último nodo hijo
  • cloneNode () - Clona un elemento HTML
  • compareDocumentPosition () - Compara la posición del documento de dos elementos
  • getFeature () - Devuelve un objeto que implementa las API de una característica específica
  • hasAttributes () - Devuelve verdadero si un elemento tiene algún atributo, de lo contrario falso
  • hasChildNodes () - Devuelve verdadero si un elemento tiene nodos secundarios, de lo contrario falso
  • insertBefore () - Inserta un nuevo nodo secundario antes de un nodo secundario existente especificado
  • isDefaultNamespace () - Devuelve verdadero si un espacio de nombres especificadoURI es el predeterminado, de lo contrario falso
  • isEqualNode () - Comprueba si dos elementos son iguales
  • isSameNode () - Comprueba si dos elementos son el mismo nodo
  • esta apoyado() - Devuelve verdadero si una característica especificada es compatible con el elemento
  • lookupNamespaceURI () - Devuelve el URI del espacio de nombres asociado con un nodo dado
  • lookupPrefix () - Devuelve un DOMString que contiene el prefijo para un URI de espacio de nombres dado si está presente
  • normalizar() - Une nodos de texto adyacentes y elimina nodos de texto vacíos en un elemento
  • removeChild () - Elimina un nodo hijo de un elemento
  • replaceChild () - Reemplaza un nodo hijo en un elemento

Métodos de elementos

  • getAttribute () - Devuelve el valor de atributo especificado de un nodo de elemento
  • getAttributeNS () - Devuelve el valor de cadena del atributo con el espacio de nombres y el nombre especificados
  • getAttributeNode () - Obtiene el nodo de atributo especificado
  • getAttributeNodeNS () - Devuelve el nodo de atributo para el atributo con el espacio de nombres y el nombre dados
  • getElementsByTagName () - Proporciona una colección de todos los elementos secundarios con el nombre de etiqueta especificado
  • getElementsByTagNameNS () - Devuelve una colección HTMLC en vivo de elementos con un cierto nombre de etiqueta que pertenece al espacio de nombres dado
  • hasAttribute () - Devuelve verdadero si un elemento tiene algún atributo, de lo contrario falso
  • hasAttributeNS () - Proporciona un valor verdadero / falso que indica si el elemento actual en un espacio de nombres dado tiene el atributo especificado
  • removeAttribute () - Elimina un atributo especificado de un elemento
  • removeAttributeNS () - Elimina el atributo especificado de un elemento dentro de un determinado espacio de nombres
  • removeAttributeNode () - Elimina un nodo de atributo especificado y devuelve el nodo eliminado
  • setAttribute () - Establece o cambia el atributo especificado a un valor especificado
  • setAttributeNS () - Agrega un nuevo atributo o cambia el valor de un atributo con el espacio de nombres y el nombre dados
  • setAttributeNode () - Establece o cambia el nodo de atributo especificado
  • setAttributeNodeNS () - Agrega un nuevo nodo de atributo de espacio de nombres a un elemento

Trabajando con el navegador de usuario

Además de los elementos HTML, JavaScript también puede tener en cuenta el navegador del usuario e incorporar sus propiedades en el código.

Propiedades de ventana

  • cerrado - Comprueba si una ventana se ha cerrado o no y devuelve verdadero o falso
  • defaultStatus - Establece o devuelve el texto predeterminado en la barra de estado de una ventana
  • documento - Devuelve el objeto del documento para la ventana
  • marcos - Devuelve todo