Documentos de Académico
Documentos de Profesional
Documentos de Cultura
JavaScript (Semana 04)
JavaScript (Semana 04)
1. ¿Qué es JavaScript?
una <input>etiqueta.
Esta limitación es, nuevamente, para la seguridad del usuario. Una página desde
desde allí.
Estos límites no existen si JavaScript se utiliza fuera del navegador, por ejemplo,
en un servidor. Los navegadores modernos también permiten complementos /
extensiones que pueden solicitar permisos extendidos.
Eso es lo que hace que JavaScript sea único. Por eso es la herramienta más
extendida para crear interfaces de navegador.
Eso es de esperar, porque los proyectos y los requisitos son diferentes para
todos.
Resumen
El código es propenso a errores. Es muy probable que cometa errores ... Oh, ¿de
qué estoy hablando? Usted está absolutamente va a cometer errores, al menos
si eres un humano y no un robot .
Para ver los errores y obtener mucha más información útil sobre los scripts, se
han integrado "herramientas de desarrollo" en los navegadores.
Google Chrome
Abra la página bug.html .
Se parece a esto:
ejecutarlos.
Entrada multilínea
Resumen
habilitarlo). Cmd+Opt+JCmd+Opt+C
3. La etiqueta "script"
Marcado moderno
La <script>etiqueta tiene algunos atributos que rara vez se usan hoy en día,
El typeatributo:<script type=…>
extensión type. Normalmente lo era type="text/javascript". Ya no
El languageatributo:<script language=…>
<script type="text/javascript"><!--
...
//--></script>
Guiones externos
<script src="/path/to/script.js"></script>
carpeta actual.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lo
dash.js"></script>
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
Tenga en cuenta:
Como regla general, solo los scripts más simples se colocan en HTML. Los más
complejos residen en archivos separados.
código.
Esto no funcionará:
<script src="file.js">
</script>
regular <script>.
<script src="file.js"></script>
<script>
alert(1);
</script>
Resumen
una página.
src="path/to/script.js"></script>.
Hay mucho más que aprender sobre los scripts del navegador y su interacción
con la página web. Pero tengamos en cuenta que esta parte del tutorial está
dedicada al lenguaje JavaScript, por lo que no debemos distraernos con
implementaciones específicas del navegador. Usaremos el navegador como una
forma de ejecutar JavaScript, que es muy conveniente para la lectura en línea,
pero solo uno de muchos.
4. Estructura de código
Declaraciones
alert('Hello'); alert('World');
alert('Hello');
alert('World');
Punto y coma
alert('Hello')
alert('World')
Aquí, JavaScript interpreta el salto de línea como un punto y coma
"implícito". Esto se denomina inserción automática de punto y coma .
En la mayoría de los casos, una nueva línea implica un punto y coma. ¡Pero "en
la mayoría de los casos" no significa "siempre"!
Hay casos en los que una nueva línea no significa un punto y coma. Por
ejemplo:
alert(3 +
+ 2);
Pero hay situaciones en las que JavaScript "falla" al asumir un punto y coma
donde realmente se necesita.
Los errores que ocurren en tales casos son bastante difíciles de encontrar y
corregir.
Un ejemplo de error
Si tiene curiosidad por ver un ejemplo concreto de tal error, consulte este
código:
[1, 2].forEach(alert)
coma:
[1, 2].forEach(alert)
tenemos un error!
Pero todo vuelve a estar bien si agregamos un punto y coma después de alert:
[1, 2].forEach(alert)
Pero deberían ser dos declaraciones separadas, no una. Tal fusión en este caso
es simplemente incorrecta, de ahí el error. Esto puede suceder en otras
situaciones.
Comentarios
A medida que pasa el tiempo, los programas se vuelven cada vez más
complejos. Es necesario agregar comentarios que describan qué hace el código
y por qué.
diagonal //.
Como aquí:
alert('Hello');
Me gusta esto:
alert('Hello');
alert('World');
A veces puede resultar útil deshabilitar temporalmente una parte del código:
alert('Hello');
*/
alert('World');
/*
*/
alert( 'World' );
Este fue el caso hasta 2009 cuando apareció ECMAScript 5 (ES5). Añadió nuevas
funciones al lenguaje y modificó algunas de las existentes. Para que el código
antiguo siga funcionando, la mayoría de estas modificaciones están
desactivadas de forma predeterminada. Es necesario que les permita
explícitamente de una directiva especial: "use strict".
"Usar estricto"
Por ejemplo:
"use strict";
...
Muy pronto aprenderemos funciones (una forma de agrupar comandos), así que
alert("some code");
"use strict";
antiguo comportamiento.
Una vez que ingresamos al modo estricto, no hay vuelta atrás.
incorrectos.
// ...your code
<Enter to run>
Si no es así, por ejemplo, en un navegador antiguo, hay una forma fea pero
confiable de asegurarse use strict. Ponlo dentro de este tipo de envoltorio:
(function() {
'use strict';
})()
qué es genial?
Variables
Una variable
let message;
let message;
let message;
message = 'Hello!';
alert(message); // Hello!
age = 25,
message = 'Hello';
, age = 25
, message = 'Hello';
en varlugar de let:
let message;
message = 'Hello!';
alert(message);
let message;
message = hello;
Por lo tanto, deberíamos declarar una variable una vez y luego referirnos a ella
sin ella let.
Lenguajes funcionales
En dichos lenguajes, una vez que el valor se almacena "en la caja", está ahí para
siempre. Si necesitamos almacenar algo más, el lenguaje nos obliga a crear una
nueva caja (declarar una nueva variable). No podemos reutilizar el anterior.
Aunque pueda parecer un poco extraño a primera vista, estos lenguajes son
bastante capaces de desarrollarse seriamente. Más que eso, hay áreas como los
cálculos paralelos donde esta limitación confiere ciertos beneficios. Se
recomienda estudiar ese idioma (incluso si no planea usarlo pronto) para
ampliar la mente.
Denominación variable
let userName;
let test123;
pueden usar en los nombres. Son símbolos regulares, como letras, sin ningún
significado especial.
alert($ + _); // 3
El caso importa
let 我 = '...';
Nombres reservados
scripts antiguos.
alert(num); // 5
"use strict";
num = 5; // error: num is not defined
Constantes
de let:
todos.
Constantes mayúsculas
Existe una práctica generalizada de utilizar constantes como alias para valores
difíciles de recordar que se conocen antes de la ejecución.
Por ejemplo, creemos constantes para los colores en el llamado formato "web"
(hexadecimal):
alert(color); // #FF7F00
Beneficios:
Ser una "constante" simplemente significa que el valor de una variable nunca
cambia. Pero hay constantes que se conocen antes de la ejecución (como un
valor hexadecimal para rojo) y hay constantes que se calculan en tiempo de
ejecución, durante la ejecución, pero que no cambian después de su asignación
inicial.
Por ejemplo:
El nombre de una variable debe tener un significado claro y obvio, que describa
los datos que almacena.
relacionadas currentUsero en newUserlugar
de currentVisitoro newManInTown.
¿Reutilizar o crear?
Como resultado, sus variables son como cajas en las que la gente arroja
diferentes cosas sin cambiar sus pegatinas. ¿Qué hay dentro de la caja
ahora? ¿Quién sabe? Tenemos que acercarnos y comprobarlo.
Resumen
Podemos poner cualquier tipo en una variable. Por ejemplo, una variable puede
ser en un momento una cadena y luego almacenar un número:
// no error
message = 123456;
Número
let n = 123;
n = 12.345;
Infinityy NaN.
Infinityrepresenta el infinito matemático ∞. Es un valor especial que es
alert( 1 / 0 ); // Infinity
resultado completo.
El guión nunca se detendrá con un error fatal ("morir"). En el peor de los casos,
obtendremos NaNel resultado.
Empezando
En JavaScript, el tipo "número" no puede representar valores enteros mayores
que (eso es ) o menores que para los negativos. Es una limitación técnica
Como los BigIntnúmeros rara vez se necesitan, no los cubrimos aquí, pero les
Problemas de compatibilidad
Safari / IE.
Cuerda
3. Acentos abiertos: `Hello`.
ejemplo:
// embed a variable
// embed an expression
Tenga en cuenta que esto solo se puede hacer con comillas invertidas. ¡Otras
citas no tienen esta función de incrustación!
Por ejemplo:
El valor "nulo"
anteriormente.
El valor "indefinido"
como null.
let age;
age = undefined;
alert(age); // "undefined"
… Pero no recomendamos hacer eso. Normalmente, se utiliza nullpara asignar
Objetos y símbolos
El objecttipo es especial.
Todos los demás tipos se denominan "primitivos" porque sus valores pueden
contener solo una cosa (ya sea una cadena, un número o lo que sea). Por el
contrario, los objetos se utilizan para almacenar colecciones de datos y
entidades más complejas.
El tipo de operador
1. Como operador: typeof x.
2. En función: typeof(x).
typeof 0 // "number"
Resumen
booleanpara true/ false.
valor null.
un solo valor undefined.
object para estructuras de datos más complejas.
El typeofoperador nos permite ver qué tipo está almacenado en una variable.
realidad no es un objeto.
6. Interacción: alerta, aviso, confirmación
usuario: alert, prompty confirm.
alerta
Por ejemplo:
alert("Hello");
rápido
title
default
Un segundo parámetro opcional, el valor inicial para el campo de
entrada.
opcional, no obligatorio.
obtenemos nullcomo result.
la entrada.
Por ejemplo:
alert(`You are ${age} years old!`); // You are 100 years old!
Por lo tanto, para que las indicaciones se vean bien en IE, recomendamos
proporcionar siempre el segundo argumento:
let test = prompt("Test", ''); // <-- for IE
confirmar
La sintaxis:
result = confirm(question);
Aceptar y Cancelar.
Por ejemplo:
Resumen
alert
muestra un mensaje.
prompt
confirm
muestra un mensaje y espera a que el usuario presione “Aceptar” o
Todos estos métodos son modales: pausan la ejecución del script y no permiten
que el visitante interactúe con el resto de la página hasta que se cierre la
ventana.
Conversión de cadenas
una cadena:
se nullconvierte "null", etc.
Conversión numérica
en un número:
undefined NaN
null 0
true and fals
1 y 0
e
Ejemplos:
alert( Number(true) ); // 1
alert( Number(false) ); // 0
Conversión booleana
La conversión booleana es la más simple.
llamada a Boolean(value).
La regla de conversión:
Por ejemplo:
Resumen
Las tres conversiones de tipo más utilizadas son cadena, numeración y
booleana.
primitivos.
con Number(value).
undefined NaN
null 0
true / fals
1 / 0
e
con Boolean(value).
0, null, undefined, NaN,"" false
booleanas.
de "operandos".
let x = 1;
x = -x;
let x = 1, y = 3;
Matemáticas
Además +,
la resta -,
multiplicación *,
división /,
Resto %,
Exponenciación **.
sobre ellos.
Recordatorio %
porcentajes.
Por ejemplo:
Por ejemplo:
alert( 2 ** 3 ); // 8 (2 * 2 * 2, 3 times)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2, 4 times)
Conozcamos las características de los operadores de JavaScript que van más allá
de la aritmética escolar.
alert(s); // mystring
Tenga en cuenta que si alguno de los operandos es una cadena, el otro también
se convierte en una cadena.
Por ejemplo:
alert( '1' + 2 ); // "12"
Aquí, los operadores trabajan uno tras otro. El primero +suma dos números, por
forma unaria.
Por ejemplo:
// No effect on numbers
let x = 1;
alert( +x ); // 1
let y = -2;
alert( +y ); // -2
// Converts non-numbers
alert( +true ); // 1
alert( +"" ); // 0
¿Por qué se aplican las ventajas unarias a los valores antes que a los
binarios? Como veremos, eso se debe a su mayor precedencia .
ejemplo, escribe (1 + 2) * 2.
Hay muchos operadores en JavaScript. Cada operador tiene un número de
precedencia correspondiente. El que tiene el número más grande se ejecuta
primero. Si la precedencia es la misma, el orden de ejecución es de izquierda a
derecha.
17 unario más +
17 negación unaria -
dieciséis exponenciación **
15 multiplicación *
15 división /
13 adición +
13 sustracción -
3 asignación =
Asignación
let x = 2 * 2 + 1;
alert( x ); // 5
implicación interesante.
Aquí hay una demostración que usa una asignación como parte de una
expresión más compleja:
let a = 1;
let b = 2;
let c = 3 - (a = b + 1);
alert( a ); // 3
alert( c ); // 0
Encadenamiento de asignaciones
let a, b, c;
a = b = c = 2 + 2;
alert( a ); // 4
alert( b ); // 4
alert( c ); // 4
c = 2 + 2;
b = c;
a = c;
Modificar en el lugar
Por ejemplo:
let n = 2;
n = n + 5;
n = n * 2;
let n = 2;
n += 5; // now n = 7 (same as n = n + 5)
n *= 2; // now n = 14 (same as n = n * 2)
alert( n ); // 14
let n = 2;
n *= 3 + 5;
Incremento / decremento
let counter = 2;
alert( counter ); // 3
let counter = 2;
alert( counter ); // 1
Importante:
El incremento / decremento solo se puede aplicar a variables. Intentar usarlo en
+counter.
¿Hay alguna diferencia? Sí, pero solo podemos verlo si usamos el valor devuelto
de ++/--.
let counter = 1;
alert(a); // 2
let counter = 1;
let a = counter++; // (*) changed ++counter to counter++
alert(a); // 1
Para resumir:
let counter = 0;
counter++;
++counter;
let counter = 0;
alert( ++counter ); // 1
let counter = 0;
alert( counter++ ); // 0
Por ejemplo:
let counter = 1;
alert( 2 * ++counter ); // 4
Comparar con:
let counter = 1;
Aunque técnicamente está bien, esta notación suele hacer que el código sea
menos legible. Una línea hace varias cosas, no es bueno.
let counter = 1;
alert( 2 * counter );
counter++;
Los operadores bit a bit tratan los argumentos como números enteros de 32
bits y trabajan en el nivel de su representación binaria.
Coma
se usa para escribir código más corto, por lo que necesitamos saberlo para
comprender qué está pasando.
una coma ,. Cada uno de ellos se evalúa pero solo se devuelve el resultado del
último.
Por ejemplo:
let a = (1 + 2, 3 + 4);
Tenga en cuenta que el operador de coma tiene una precedencia muy baja,
inferior a =, por lo que los paréntesis son importantes en el ejemplo anterior.
= 1 + 2), 3 + 4.
¿Por qué necesitamos un operador que descarte todo excepto la última
expresión?
Por ejemplo:
...
Comparaciones
escribe como a != b.
En este artículo aprenderemos más sobre los diferentes tipos de comparaciones,
cómo las hace JavaScript, incluidas peculiaridades importantes.
Al final, encontrará una buena receta para evitar problemas relacionados con las
"peculiaridades de JavaScript".
Booleano es el resultado
Por ejemplo:
Comparación de cadenas
Para ver si una cadena es mayor que otra, JavaScript utiliza el llamado
"diccionario" o orden "lexicográfico".
Por ejemplo:
alert( 'Z' > 'A' ); // true
por carácter:
Por ejemplo:
Por ejemplo:
let a = 0;
let b = "0";
Igualdad estricta
diferenciar 0de false:
cero.
tipo.
Vamos a intentarlo:
Hay una regla especial. Estos dos son una “dulce pareja”: se igualan (en el
sentido de ==), pero no en ningún otro valor.
que se undefinedconvierte NaN.
Ahora veamos algunas cosas divertidas que suceden cuando aplicamos estas
reglas. Y, lo que es más importante, cómo no caer en una trampa con ellos.
Comparemos nullcon un cero:
mayor o igual que cero", por lo que en una de las comparaciones anteriores
número, tratándolo como 0. Por eso (3) null >= 0es verdadero y (1) null >
0es falso.
de tal manera que, sin ningún tipo de conversiones, que son iguales entre sí y
Un indefinido incomparable
Comparaciones (1)y (2)retorno falseporque undefinedse convierte
La comprobación de la igualdad
de (3)rendimientos falseporque undefinedsólo se iguala null, undefinedy
Evitar problemas
haciendo. Si una variable puede tener estos valores, verifíquelos por separado.
Resumen
La declaración "si"
Por ejemplo:
if (year == 2015) {
}
Recomendamos envolver su bloque de código con llaves {}cada vez que use
mejora la legibilidad.
Conversión booleana
if (0) { // 0 is falsy
...
if (1) { // 1 is truthy
...
este:
...
La cláusula "else"
la condición es falsa.
Por ejemplo:
if (year == 2015) {
} else {
Por ejemplo:
} else {
alert( 'Exactly!' );
muestra el último alert.
Por ejemplo:
let accessAllowed;
accessAllowed = true;
} else {
accessAllowed = false;
alert(accessAllowed);
La sintaxis es:
Por ejemplo:
Tenga en cuenta:
// the same
Múltiples '?'
Por ejemplo:
alert( message );
expresión después de los siguientes dos puntos '":"', marcando age < 100.
unusual age!'.
if (age < 3) {
message = 'Hello!';
message = 'Greetings!';
} else {
alert('Right!') : alert('Wrong.');
if (company == 'Netscape') {
alert('Right!');
} else {
alert('Wrong.');
|| (O)
result = a || b;
de lo contrario, regresa false.
alert( 'truthy!' );
Por ejemplo:
let hour = 9;
El ||operador OR hace lo siguiente:
Por ejemplo:
alert( 1 || 0 ); // 1 (1 is truthy)
opcionales.
2. Evaluación de cortocircuito.
"cortocircuito".
false || alert("printed");
A veces, las personas usan esta función para ejecutar comandos solo si la
condición en la parte izquierda es falsa.
&& (Y)
result = a && b;
y falseno:
Un ejemplo con if:
Al igual que con OR, se permite cualquier valor como operando de AND:
El &&operador AND hace lo siguiente:
Si se han evaluado todos los operandos (es decir, todos eran verdaderos),
devuelve el último operando.
Las reglas anteriores son similares a OR. La diferencia es que AND devuelve el
primer valor falso mientras que OR devuelve el primer valor verdadero .
Ejemplos:
// if the first operand is truthy,
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5
escribir if".
Por ejemplo:
let x = 1;
let x = 1;
! (NO)
result = !value;
Por ejemplo:
alert( !true ); // false
alert( !0 ); // true
incorporada:
b, de lo contrario.
Comparación con ||
??devuelve el primer valor definido .
manera null/undefineddiferente a 0.
let height = 0;
alert(height ?? 100); // 0
Aquí, height || 100golosinas altura cero tan definida, mismo
cual".
Precedencia
antes =y ?.
agregar paréntesis:
alert(area); // 5000
ejecutaría primero.
Eso funcionaría igual que:
operadores.
alert(x); // 2
Resumen
y =.
Por ejemplo, sacar productos de una lista uno tras otro o simplemente ejecutar
el mismo código para cada número del 1 al 10.
El bucle "mientras"
while (condition) {
// code
let i = 0;
alert( i );
i++;
Una sola ejecución del cuerpo del bucle se denomina iteración . El ciclo del
ejemplo anterior realiza tres iteraciones.
Si i++faltara en el ejemplo anterior, el ciclo se repetiría (en teoría) para
let i = 3;
alert( i );
i--;
Los tirantes rizados no son necesarios para un cuerpo de una sola línea
Si el cuerpo del bucle tiene una sola declaración, podemos omitir las llaves {…}:
let i = 3;
usando la do..whilesintaxis:
do {
// loop body
} while (condition);
El bucle primero ejecutará el cuerpo, luego verificará la condición y, si bien es
cierto, lo ejecutará una y otra vez.
Por ejemplo:
let i = 0;
do {
alert( i );
i++;
Esta forma de sintaxis solo debe usarse cuando desee que el cuerpo del bucle
se ejecute al menos una vez, independientemente de que la condición sea
verdadera. Por lo general, se prefiere la otra forma: while(…) {…}.
El bucle "for"
Se parece a esto:
alert(i);
}
Examinemos la fordeclaración parte por parte:
parte
Run begin
→ ...
cada conditionprueba bodyy stepse ejecutan.
Si es nuevo en los bucles, podría ser útil volver al ejemplo y reproducir paso a
paso cómo se ejecutan en una hoja de papel.
// run begin
let i = 0
alert(i); // 0, 1, 2
let i = 0;
alert(i); // 0, 1, 2
Saltar partes
ciclo.
Como aquí:
alert( i ); // 0, 1, 2
let i = 0;
for (; i < 3;) {
alert( i++ );
for (;;) {
Rompiendo el bucle
let sum = 0;
while (true) {
sum += value;
ciclo. En cambio, detiene la iteración actual y fuerza al ciclo a iniciar uno nuevo
(si la condición lo permite).
Podemos usarlo si hemos terminado con la iteración actual y nos gustaría pasar
a la siguiente.
if (i % 2 == 0) continue;
alert(i); // 1, then 3, 5, 7, 9
if (i % 2) {
alert( i );
if (i > 5) {
alert(i);
} else {
continue;
Esta es solo otra razón para no usar el operador de signo de interrogación en ?
lugar de if.
coordenadas (i, j)de (0,0)a (2,2):
for (let i = 0; i < 3; i++) {
alert('Done!');
...
etiqueta:
alert('Done!');
outer:
Resumen
Ofrece una forma más descriptiva de comparar un valor con múltiples variantes.
La sintaxis
Se parece a esto:
switch(x) {
...
[break]
...
[break]
default:
...
[break]
El valor de xse verifica para una igualdad estricta con el valor del
el final de switch).
Un ejemplo
let a = 2 + 2;
switch (a) {
case 3:
break;
case 4:
alert( 'Exactly!' );
break;
case 5:
break;
default:
}
Aquí se switchempieza a comparar adesde la primera casevariante que es 3. El
partido falla.
Un ejemplo sin break:
let a = 2 + 2;
switch (a) {
case 3:
case 4:
alert( 'Exactly!' );
case 5:
default:
alert( 'Exactly!' );
Por ejemplo:
let a = "1";
let b = 0;
switch (+a) {
case b + 1:
break;
default:
correspondiente.
Agrupación de "caso"
código.
switch (a) {
case 4:
alert('Right!');
break;
case 5:
alert('Wrong!');
break;
default:
El tipo importa
Destaquemos que el control de igualdad siempre es estricto. Los valores deben
ser del mismo tipo para coincidir.
switch (arg) {
case '0':
case '1':
break;
case '2':
alert( 'Two' );
break;
case 3:
break;
default:
1. Porque 0, 1el primero alertcorre.
2. Para 2las segundas alertcarreras.
3! La defaultvariante se ejecutará.
14. Funciones
Muy a menudo, necesitamos realizar una acción similar en muchos lugares del
guión.
como alert(message), prompt(message,
funciones.
Declaración de función
Se parece a esto:
function showMessage() {
function name(parameters) {
...body...
}
Por ejemplo:
function showMessage() {
showMessage();
showMessage();
Variables locales
Una variable declarada dentro de una función solo es visible dentro de esa
función.
Por ejemplo:
function showMessage() {
Variables externas
Una función también puede acceder a una variable externa, por ejemplo:
function showMessage() {
alert(message);
Por ejemplo:
alert(message);
showMessage();
function showMessage() {
alert(message);
showMessage();
Variables globales
Las variables globales son visibles desde cualquier función (a menos que sean
sombreadas por los locales).
Parámetros
afuera, porque una función siempre obtiene una copia del valor:
Valores predeterminados
showMessage("Ann");
especificarlo después =:
Aquí "no text given"hay una cadena, pero puede ser una expresión más
function showMessage(text) {
alert(text);
}
showMessage(); // empty message
function showMessage(text) {
...
function showCount(count) {
alert(count ?? "unknown");
showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown
Devolviendo un valor
El ejemplo más simple sería una función que suma dos valores:
function sum(a, b) {
return a + b;
alert( result ); // 3
function checkAge(age) {
return true;
} else {
if ( checkAge(age) ) {
inmediatamente.
Por ejemplo:
function showMovie(age) {
if ( !checkAge(age) ) {
return;
// ...
al alert.
function doNothing() {
return;
Para una expresión larga return, puede ser tentador ponerla en una línea
return
return;
return (
+ or +
whatever * f(a) + f(b)
Es una práctica generalizada comenzar una función con un prefijo verbal que
describe vagamente la acción. Debe haber un acuerdo dentro del equipo sobre
el significado de los prefijos.
Una función debe hacer exactamente lo que sugiere su nombre, nada más.
obtener).
Funciones == Comentarios
Las funciones deben ser cortas y hacer exactamente una cosa. Si eso es grande,
tal vez valga la pena dividir la función en algunas funciones más pequeñas. A
veces, seguir esta regla puede no ser tan fácil, pero definitivamente es algo
bueno.
Una función separada no solo es más fácil de probar y depurar, ¡su misma
existencia es un gran comentario!
genera números primos hasta n.
function showPrimes(n) {
if (i % j == 0) continue nextPrime;
}
alert( i ); // a prime
primalidad:
function showPrimes(n) {
if (!isPrime(i)) continue;
alert(i); // a prime
function isPrime(n) {
if ( n % i == 0) return false;
return true;
}
La segunda variante es más fácil de entender, ¿no? En lugar de la pieza de
Resumen
/* code */
es undefined.
Siempre es más fácil entender una función que obtiene parámetros, trabaja con
ellos y devuelve un resultado que una función que no obtiene parámetros, pero
modifica variables externas como efecto secundario.
Denominación de funciones:
Un nombre debe describir claramente lo que hace la función. Cuando
vemos una llamada a una función en el código, un buen nombre
instantáneamente nos da una comprensión de lo que hace y devuelve.
Una función es una acción, por lo que los nombres de las funciones
suelen ser verbales.
Expresiones de función
function sayHi() {
alert( "Hello" );
Existe otra sintaxis para crear una función que se llama Expresión de función .
Se parece a esto:
};
almacenado en la variable sayHi.
ponerla en la variable sayHi".
function sayHi() {
alert( "Hello" );
alert( "Hello" );
};
// ...
function sayHi() {
// ...
// ...
};
La respuesta es simple:
{ }, function f { }etc.
question
Texto de la pregunta
yes
no
usuario, llamar yes()o no():
if (confirm(question)) yes()
else no();
function showOk() {
alert( "You agreed." );
function showCancel() {
una vida real asky el ejemplo anterior es que las funciones de la vida real
La idea es que pasamos una función y esperamos que sea "llamada de nuevo"
else no();
ask(
);
queremos aquí.
// Function Declaration
function sum(a, b) {
return a + b;
// Function Expression
return a + b;
};
function sayHi(name) {
sayHi("John"); // error!
};
Las expresiones de función se crean cuando la ejecución las alcanza. Eso
function welcome() {
alert("Hello!");
} else {
function welcome() {
alert("Greetings!");
// ...use it later
Eso es porque una Declaración de función solo es visible dentro del bloque de
código en el que reside.
welcome(); // \ (runs)
// |
function welcome() { // |
// |
welcome(); // / (runs)
} else {
function welcome() {
alert("Greetings!");
let welcome;
if (age < 18) {
welcome = function() {
alert("Hello!");
};
} else {
welcome = function() {
alert("Greetings!");
};
welcome(); // ok now
function() { alert("Hello!"); } :
function() { alert("Greetings!"); };
welcome(); // ok now
Como regla general, cuando necesitamos declarar una función, lo primero que
debemos considerar es la sintaxis de Declaración de funciones. Da más libertad
sobre cómo organizar nuestro código, porque podemos llamar a tales funciones
antes de que se declaren.
Resumen
Por lo tanto, debemos usar una expresión de función solo cuando una
declaración de función no sea adecuada para la tarea. Hemos visto un par de
ejemplos de eso en este capítulo y veremos más en el futuro.
15. Funciones de flecha, conceptos básicos
Existe otra sintaxis muy simple y concisa para crear funciones, que a menudo es
mejor que las expresiones de función.
return expression;
};
return a + b;
};
*/
alert( sum(1, 2) ); // 3
Como puede, ver (a, b) => a + bsignifica una función que acepta dos
devuelve el resultado.
Por ejemplo:
alert( double(3) ); // 6
sayHi();
() => alert('Hello') :
() => alert("Greetings!");
welcome();
Son muy convenientes para acciones simples de una línea, cuando somos
demasiado perezosos para escribir muchas palabras.
Me gusta esto:
let result = a + b;
};
alert( sum(1, 2) ); // 3
Por ahora, ya podemos usar funciones de flecha para acciones de una línea y
devoluciones de llamada.
Resumen
Las funciones de flecha son útiles para una sola línea. Vienen en dos sabores:
Sintaxis
Aquí hay una hoja de trucos con algunas reglas sugeridas (consulte a
continuación para obtener más detalles):
if (condition) {
// do this
// ...and that
// ...and that
Aquí están las variantes anotadas para que pueda juzgar su legibilidad por
usted mismo:
3. if (n < 0)
5. 😃 La mejor variante:
6. if (n < 0) {
Para un código muy breve, se permite una línea, por ejemplo if (cond)
return null. Pero un bloque de código (la última variante) suele ser más
legible.
Longitud de la línea
A nadie le gusta leer una larga línea horizontal de código. Es una buena práctica
dividirlos.
Por ejemplo:
let str = `
`;
Y, para ifdeclaraciones:
if (
id === 123 &&
) {
letTheSorceryBegin();
Sangrías
tabulación horizontal (tecla Tab ). Cuál elegir es una vieja guerra santa. Los
Una ventaja de los espacios sobre las pestañas es que los espacios permiten
configuraciones de sangrías más flexibles que el símbolo de pestaña.
Por ejemplo, podemos alinear los argumentos con el corchete de apertura, así:
show(parameters,
one,
after,
another
) {
// ...
function pow(x, n) {
let result = 1;
// <--
result *= x;
// <--
return result;
Inserte una nueva línea adicional donde ayude a que el código sea más
legible. No debe haber más de nueve líneas de código sin sangría vertical.
Punto y coma
Niveles de anidación
if (cond) {
Podemos escribir:
if (!cond) continue;
Opción 1:
function pow(x, n) {
if (n < 0) {
} else {
let result = 1;
result *= x;
return result;
Opcion 2:
function pow(x, n) {
if (n < 0) {
let result = 1;
result *= x;
return result;
El segundo es más legible porque el "caso especial" de n < 0se maneja desde
Colocación de funciones
Si está escribiendo varias funciones "auxiliares" y el código que las usa, hay tres
formas de organizar las funciones.
2. // function declarations
3. function createElement() {
4. ...
5. }
6.
7. function setHandler(elem) {
8. ...
9. }
10.
12. ...
13. }
14.
17. setHandler(elem);
walkAround();
21. setHandler(elem);
22. walkAround();
23.
27. }
28.
30. ...
31. }
32.
34. ...
35. Mixta: una función se declara donde se usa por primera vez.
Guías de estilo
Una guía de estilo contiene reglas generales sobre “cómo escribir” código, por
ejemplo, qué citas usar, cuántos espacios sangrar, la longitud máxima de línea,
etc. Muchas cosas menores.
Idiomatic.JS
StandardJS
(y muchos más)
Linters automatizados
1. Instalar Node.js .
"extends": "eslint:recommended",
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-console": 0,
"indent": ["warning", 2]
}
Resumen
Todas las reglas de sintaxis descritas en este capítulo (y en las guías de estilo a
las que se hace referencia) tienen como objetivo aumentar la legibilidad de su
código. Todos ellos son discutibles.
pueden ser de una sola línea: comenzando con //y de varias líneas: /* ... */.
Normalmente los usamos para describir cómo y por qué funciona el código.
Malos comentarios
Los novatos tienden a utilizar comentarios para explicar "lo que está pasando en
el código". Me gusta esto:
// This code will do this thing (...) and that thing (...)
very;
complex;
code;
Hay una gran regla al respecto: "si el código es tan poco claro que requiere un
comentario, entonces tal vez debería reescribirse".
function showPrimes(n) {
nextPrime:
if (i % j == 0) continue nextPrime;
alert(i);
function showPrimes(n) {
if (!isPrime(i)) continue;
alert(i);
}
function isPrime(n) {
if (n % i == 0) return false;
return true;
smell(drop);
add(drop, glass);
add(juice, glass);
// ...
addWhiskey(glass);
addJuice(glass);
function addWhiskey(container) {
//...
function addJuice(container) {
//...
}
Una vez más, las funciones mismas dicen lo que está sucediendo. No hay nada
que comentar. Y también la estructura del código es mejor cuando se
divide. Está claro lo que hace cada función, lo que necesita y lo que devuelve.
Buenos comentarios
Describe la arquitectura
Por ejemplo:
/**
* Returns x raised to the n-th power.
*/
function pow(x, n) {
...
Resumen
Comenta esto:
Por el contrario, los objetos se utilizan para almacenar colecciones con clave de
varios datos y entidades más complejas. En JavaScript, los objetos penetran en
casi todos los aspectos del lenguaje. Por lo tanto, primero debemos entenderlos
antes de profundizar en cualquier otro lugar.
cosa.
Se puede crear un objeto vacío ("gabinete vacío") usando una de dos sintaxis:
llama literal de objeto .
Literales y propiedades
valor":
let user = { // an object
};
alert( user.age ); // 30
user.isAdmin = true;
delete user.age;
También podemos usar nombres de propiedades de varias palabras, pero luego
deben citarse:
let user = {
name: "John",
age: 30,
};
let user = {
name: "John",
age: 30,
Eso se llama una coma "final" o "colgante". Hace que sea más fácil agregar /
eliminar / mover propiedades, porque todas las líneas se vuelven iguales.
Por ejemplo:
const user = {
name: "John"
};
user.name = "Pete"; // (*)
alert(user.name); // Pete
Hay otra forma de hacer que las propiedades de los objetos sean constantes, la
cubriremos más adelante en el capítulo Indicadores y descriptores de
propiedades .
Corchetes
// get
// delete
Ahora todo esta bien. Tenga en cuenta que la cadena dentro de los corchetes
está correctamente citada (cualquier tipo de comillas servirá).
user[key] = true;
Por ejemplo:
let user = {
name: "John",
age: 30
};
// access by variable
let user = {
name: "John",
age: 30
};
Propiedades calculadas
Por ejemplo:
let fruit = prompt("Which fruit to buy?", "apple");
let bag = {
};
bag[fruit] = 5;
… Pero se ve mejor.
let bag = {
[fruit + 'Computers']: 5 // bag.appleComputers = 5
};
Por ejemplo:
return {
name: name,
age: age,
// ...other properties
};
alert(user.name); // John
En el ejemplo anterior, las propiedades tienen los mismos nombres que las
variables. El caso de uso de hacer una propiedad a partir de una variable es tan
común que hay una abreviatura de valor de propiedad especial para acortarlo.
return {
// ...
};
let user = {
age: 30
};
Como ya sabemos, una variable no puede tener un nombre igual a una de las
palabras reservadas en el idioma como "para", "dejar", "volver", etc.
let obj = {
for: 1,
let: 2,
return: 3
};
clave de propiedad:
let obj = {
};
La sintaxis es:
"key" in object
Por ejemplo:
Si omitimos las comillas, eso significa una variable, debe contener el nombre
real que se va a probar. Por ejemplo:
let obj = {
test: undefined
};
código.
Para caminar sobre todas las teclas de un objeto, existe una forma especial del
La sintaxis:
let user = {
name: "John",
age: 30,
isAdmin: true
};
Tenga en cuenta que todas las construcciones "for" nos permiten declarar la
variable de bucle dentro del bucle, como let keyaquí.
let codes = {
"49": "Germany",
"41": "Switzerland",
// ..,
"1": "USA"
};
El objeto se puede usar para sugerir una lista de opciones al usuario. Si estamos
creando un sitio principalmente para la audiencia alemana, probablemente
... Por otro lado, si las claves no son enteras, entonces se enumeran en el orden
de creación, por ejemplo:
let user = {
name: "John",
surname: "Smith"
};
Me gusta esto:
let codes = {
"+49": "Germany",
"+41": "Switzerland",
// ..,
"+1": "USA"
};
Resumen
La notación de puntos: obj.property.
obj.
simplemente Object.
…Y así.
Por ejemplo:
cadena "Hello!".
let user = {
name: "John"
};
Por ejemplo:
let user = { name: "John" };
Ahora tenemos dos variables, cada una con la referencia al mismo objeto:
exactamente igual.
Aquí dos variables hacen referencia al mismo objeto, por lo que son iguales:
let a = {};
Y aquí dos objetos independientes no son iguales, aunque ambos estén vacíos:
let a = {};
alert( a == b ); // false
Entonces, copiar una variable de objeto crea una referencia más al mismo
objeto.
Me gusta esto:
let user = {
name: "John",
age: 30
};
clone[key] = user[key];
La sintaxis es:
Vuelve la llamada dest.
let user = {
name: "John",
age: 30
};
Clonación anidada
las propiedades pueden ser referencias a otros objetos. Qué hacer con ellos?
Me gusta esto:
let user = {
name: "John",
sizes: {
height: 182,
width: 50
};
Me gusta esto:
let user = {
name: "John",
sizes: {
height: 182,
width: 50
};
Para solucionar eso, debemos usar el ciclo de clonación que examina cada valor
de user[key]y, si es un objeto, luego replicar su estructura también. Eso se
Resumen
Los objetos se asignan y copian por referencia. En otras palabras, una variable
almacena no el "valor del objeto", sino una "referencia" (dirección en la
memoria) para el valor. Entonces, copiar dicha variable o pasarla como un
argumento de función copia esa referencia, no el objeto.
llamada "copia superficial" (los objetos anidados se copian por referencia) o una
función de "clonación profunda", como _.cloneDeep (obj) .
20. Recolección de basura
Accesibilidad
En pocas palabras, los valores "alcanzables" son aquellos que son accesibles o
utilizables de alguna manera. Se garantiza que se almacenarán en la memoria.
Por ejemplo:
llamadas anidadas.
o Variables globales.
Un simple ejemplo
let user = {
name: "John"
};
user = null;
Dos referencias
Ahora imaginemos que copiamos la referencia de usera admin:
let user = {
name: "John"
};
user = null;
eliminar.
Objetos interconectados
woman.husband = man;
man.wife = woman;
return {
father: man,
mother: woman
}
name: "John"
}, {
name: "Ann"
});
delete family.father;
delete family.mother.husband;
No es suficiente eliminar solo una de estas dos referencias, porque todos los
objetos seguirían siendo accesibles.
Pero si eliminamos ambos, entonces podemos ver que John ya no tiene ninguna
referencia entrante:
Isla inalcanzable
family = null;
Es obvio que John y Ann todavía están vinculados, ambos tienen referencias
entrantes. Pero eso no es suficiente.
Algoritmos internos
Resumen
Los objetos generalmente se crean para representar entidades del mundo real,
como usuarios, pedidos, etc.
let user = {
name: "John",
age: 30
};
let user = {
name: "John",
age: 30
};
user.sayHi = function() {
alert("Hello!");
};
user.sayHi(); // Hello!
let user = {
// ...
};
// first, declare
function sayHi() {
alert("Hello!");
};
user.sayHi = sayHi;
user.sayHi(); // Hello!
Método abreviado
Existe una sintaxis más corta para los métodos en un objeto literal:
// these objects do the same
user = {
sayHi: function() {
alert("Hello");
};
user = {
alert("Hello");
};
escribir sayHi().
"Esto" en métodos
Es común que un método de objeto necesite acceder a la información
almacenada en el objeto para hacer su trabajo.
del user.
El valor de thises el objeto "antes del punto", el que se usa para llamar al
método.
Por ejemplo:
let user = {
name: "John",
age: 30,
sayHi() {
alert(this.name);
};
user.sayHi(); // John
let user = {
name: "John",
age: 30,
sayHi() {
};
objeto incorrecto.
let user = {
name: "John",
age: 30,
sayHi() {
}
};
código funcionaría.
function sayHi() {
alert( this.name );
Por ejemplo, aquí se asigna la misma función a dos objetos diferentes y tiene un
"esto" diferente en las llamadas:
function sayHi() {
alert( this.name );
user.f = sayHi;
admin.f = sayHi;
function sayHi() {
alert(this);
sayHi(); // undefined
"normal" externa.
let user = {
firstName: "Ilya",
sayHi() {
arrow();
};
user.sayHi(); // Ilya
Resumen
como object.doSomething().
Los métodos pueden hacer referencia al objeto como this.
desde fuera.
22. Constructor, operador "nuevo"
Función constructora
Por ejemplo:
function User(name) {
this.name = name;
this.isAdmin = false;
alert(user.name); // Jack
alert(user.isAdmin); // false
function User(name) {
this.name = name;
this.isAdmin = false;
let user = {
name: "Jack",
isAdmin: false
};
Observemos una vez más: técnicamente, cualquier función se puede usar como
this.name = "John";
this.isAdmin = false;
};
Cosas avanzadas
La sintaxis de esta sección rara vez se usa, omítala a menos que quieras saberlo
todo.
Dentro de una función, podemos verificar si fue llamada con newo sin ella,
usando una new.targetpropiedad especial .
function User() {
alert(new.target);
// without "new":
User(); // undefined
// with "new":
Eso se puede usar dentro de la función para saber si se llamó con new, "en
function User(name) {
}
this.name = name;
alert(john.name); // John
Este enfoque se utiliza a veces en bibliotecas para hacer que la sintaxis sea más
flexible. Para que la gente pueda llamar a la función con o sin new, y todavía
funciona.
Sin embargo, probablemente no sea algo bueno para usar en todas partes,
Retorno de constructores
resultado.
function BigUser() {
this.name = "John";
después, no importa):
function SmallUser() {
this.name = "John";
Omitir paréntesis
// same as
Métodos en constructor
métodos.
método dado sayHi:
function User(name) {
this.name = name;
this.sayHi = function() {
};
/*
john = {
name: "John",
*/
Para crear objetos complejos, hay una sintaxis más avanzada, clases , que
cubriremos más adelante.
Resumen
final.
estudiar.
23. Encadenamiento opcional '?.'
El problema
Por ejemplo, algunos de nuestros usuarios tienen direcciones, pero pocos no las
proporcionaron. Entonces no podemos leer con
seguridad user.address.street:
alert(user.address.street); // Error!
solucionarlo.
Por ejemplo:
Encadenamiento opcional
parte anterior ?.es undefinedo null.
Más adelante en este artículo, por brevedad, diremos que algo "existe" si no lo
es nully no lo es undefined.
entonces user.address?.streetsería mejor.
user?.address;
Cortocircuito
Por ejemplo, ?.()se utiliza para llamar a una función que puede no existir.
otros no:
let user1 = {
admin() {
alert("I am admin");
user1.admin?.(); // I am admin
user2.admin?.();
Aquí, en ambas líneas, primero usamos el punto .para obtener
seguro leerlo.
las propiedades en lugar del punto .. Al igual que en casos anteriores, permite
let user1 = {
firstName: "John"
};
asignación:
Resumen
2. obj?.[prop]- devuelve obj[prop]si objexiste, de lo
contrario undefined.
regresa undefined.
así.
Aún así, debemos aplicarlo con ?.cuidado, solo donde esté bien que la parte
izquierda no exista.
Por especificación, las claves de propiedad del objeto pueden ser de tipo
cadena o de tipo símbolo. No números, no booleanos, solo cadenas o símbolos,
estos dos tipos.
Hasta ahora hemos estado usando solo cadenas. Ahora veamos los beneficios
que nos pueden dar los símbolos.
Simbolos
// id is a new symbol
let id = Symbol();
Una vez creado, podemos darle al símbolo una descripción (también llamado
nombre de símbolo), que es muy útil para fines de depuración:
let id = Symbol("id");
Por ejemplo, aquí hay dos símbolos con la misma descripción, no son iguales:
Si está familiarizado con Ruby u otro idioma que también tenga algún tipo de
"símbolos", no se equivoque. Los símbolos de JavaScript son diferentes.
let id = Symbol("id");
Eso es una “protección del lenguaje” contra el desorden, porque las cadenas y
los símbolos son fundamentalmente diferentes y no deben convertirse
accidentalmente uno en otro.
let id = Symbol("id");
let id = Symbol("id");
alert(id.description); // id
Propiedades "ocultas"
Los símbolos nos permiten crear propiedades "ocultas" de un objeto, a las que
ninguna otra parte del código puede acceder o sobrescribir accidentalmente.
name: "John"
};
let id = Symbol("id");
user[id] = 1;
dentro user, para sus propios fines. Esa puede ser otra biblioteca de JavaScript,
// ...
let id = Symbol("id");
alrededor.
Me gusta esto:
let id = Symbol("id");
let user = {
name: "John",
};
"id".
Por ejemplo:
let id = Symbol("id");
let user = {
name: "John",
age: 30,
[id]: 123
};
for (let key in user) alert(key); // name, age (no symbols)
let id = Symbol("id");
let user = {
[id]: 123
};
Símbolos globales
Como hemos visto, normalmente todos los símbolos son diferentes, incluso si
tienen el mismo nombre. Pero a veces queremos que los símbolos del mismo
nombre sean las mismas entidades. Por ejemplo, diferentes partes de nuestra
propiedad.
Por ejemplo:
En JavaScript, como podemos ver, eso es correcto para los símbolos globales.
Symbol.keyFor
Por ejemplo:
alert( Symbol.keyFor(sym2) ); // id
regresará undefined.
Dicho esto, cualquier símbolo tiene descriptionpropiedad.
Por ejemplo:
Symbol.hasInstance
Symbol.isConcatSpreadable
Symbol.iterator
Symbol.toPrimitive
…y así.
Resumen
(nombre).
2. Hay muchos símbolos del sistema utilizados por JavaScript a los que se
imprimen objetos usando alert(obj)?
ToPrimitive
"string"
Para una conversión de objeto a cadena, cuando estamos haciendo una
// output
alert(obj);
anotherObj[obj] = 123;
"number"
// explicit conversion
// less/greater comparison
"default"
Ocurre en casos raros cuando el operador "no está seguro" de qué tipo
esperar.
Por ejemplo, binary plus +puede funcionar tanto con cadenas (las
concatena) como con números (las agrega), por lo que tanto cadenas
como números funcionarían. Entonces, si un binario más obtiene un
que "default"se usa la pista.
if (user == 1) { ... };
hacer lo mismo.
Sin "boolean"pista
Símbolo a Primitivo
obj[Symbol.toPrimitive] = function(hint) {
};
let user = {
name: "John",
money: 1000,
[Symbol.toPrimitive](hint) {
alert(`hint: ${hint}`);
};
// conversions demo:
conversión.
toString / valueOf
símbolos no existían hace tanto tiempo), sino métodos "regulares" con nombre
de cadena. Proporcionan una forma alternativa "al estilo antiguo" de
implementar la conversión.
Si no hay Symbol.toPrimitive, JavaScript intenta encontrarlos y probar en el
orden:
no hubiera un método).
let user = {
name: "John",
money: 1000,
// for hint="string"
toString() {
},
valueOf() {
return this.money;
};
con Symbol.toPrimitive.
let user = {
name: "John",
toString() {
return this.name;
};
conversiones primitivas.
Tipos de devolución
Más conversiones
Por ejemplo:
let obj = {
toString() {
return "2";
};
alert(obj * 2); // 4, object converted to primitive "2", then
multiplication made it a number
es una cadena "2").
Binary plus concatenará cadenas en la misma situación, ya que acepta con gusto
una cadena:
let obj = {
toString() {
return "2";
};
Resumen
"number" (para matemáticas)
"default" (pocos operadores)
La especificación describe explícitamente qué operador usa qué sugerencia. Hay
muy pocos operadores que "no saben qué esperar" y usan
let user = {
name: "John",
age: 30,
toString() {
};
JSON.stringify
let student = {
name: 'John',
age: 30,
isAdmin: false,
wife: null
};
alert(json);
/* JSON-encoded object:
"name": "John",
"age": 30,
"isAdmin": false,
"wife": null
*/
cadena.
El resultante jsoncadena se denomina JSON
Objetos { ... }
Matrices [ ... ]
Primitivas:
o instrumentos de cuerda,
o números,
o valores booleanos true/false,
o null.
Por ejemplo:
alert( JSON.stringify(1) ) // 1
A saber:
Propiedades simbólicas.
let user = {
sayHi() { // ignored
alert("Hello");
},
};
Por ejemplo:
let meetup = {
title: "Conference",
room: {
number: 23,
};
alert( JSON.stringify(meetup) );
"title":"Conference",
"room":{"number":23,"participants":["john","ann"]},
*/
Por ejemplo:
let room = {
number: 23
};
let meetup = {
title: "Conference",
};
circular: room.occupiedByreferencias meetupy meetup.placereferencias room:
valor
sustituto
mapeo function(key, value).
espacio
Cantidad de espacio a utilizar para formatear
de JSON.stringify.
Por ejemplo:
let room = {
number: 23
};
let meetup = {
title: "Conference",
};
// {"title":"Conference","participants":[{},{}]}
Aquí probablemente seamos demasiado estrictos. La lista de propiedades se
aplica a toda la estructura del objeto. Entonces los objetos
let room = {
number: 23
};
let meetup = {
title: "Conference",
};
/*
"title":"Conference",
"participants":[{"name":"John"},{"name":"Alice"}],
"place":{"number":23}
*/
bastante larga.
como replacer.
omitir el valor.
devuelve undefined:
let room = {
number: 23
};
let meetup = {
title: "Conference",
};
room.occupiedBy = meetup; // room references meetup
alert(`${key}: ${value}`);
}));
: [object Object]
title: Conference
0: [object Object]
name: John
1: [object Object]
name: Alice
number: 23
*/
propiedad actual.
una clave vacía y el valor es el objeto de destino como un todo. Es por eso que
la primera línea está ":[object Object]"en el ejemplo anterior.
Formateo: espacio
let user = {
name: "John",
age: 25,
roles: {
isAdmin: false,
isEditor: true
}
};
/* two-space indents:
"name": "John",
"age": 25,
"roles": {
"isAdmin": false,
"isEditor": true
*/
"name": "John",
"age": 25,
"roles": {
"isAdmin": false,
"isEditor": true
*/
agradable.
Personalizado "toJSON"
Por ejemplo:
let room = {
number: 23
};
let meetup = {
title: "Conference",
room
};
alert( JSON.stringify(meetup) );
/*
"title":"Conference",
"date":"2017-01-01T00:00:00.000Z", // (1)
*/
de cadena.
let room = {
number: 23,
toJSON() {
return this.number;
};
let meetup = {
title: "Conference",
room
};
alert( JSON.stringify(room) ); // 23
alert( JSON.stringify(meetup) );
/*
"title":"Conference",
"room": 23
*/
codificado.
JSON.parse
La sintaxis:
str
vivificador
Función opcional (clave, valor) que se llamará para cada (key,
Por ejemplo:
// stringified array
numbers = JSON.parse(numbers);
alert( numbers[1] ); // 1
alert( user.friends[1] ); // 1
El JSON puede ser tan complejo como sea necesario, los objetos y las matrices
pueden incluir otros objetos y matrices. Pero deben obedecer el mismo formato
JSON.
Aquí hay errores típicos en JSON escrito a mano (a veces tenemos que escribirlo
con fines de depuración):
let json = `{
name: "John", // mistake: property name
without quotes
}`;
Hay otro formato llamado JSON5 , que permite claves sin comillas, comentarios,
etc. Pero esta es una biblioteca independiente, no en la especificación del
lenguaje.
Usando reviver
Se parece a esto:
¡Ups! ¡Un error!
return value;
});
alert( meetup.date.getDate() ); // now works!
let schedule = `{
"meetups": [
{"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
{"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
}`;
return value;
});
Resumen
¿Qué es HTTP?
Método GET
El método GET se utiliza para solicitar la URL de un servidor web para así
obtener los documentos HTML. El método GET es uno de los métodos HTTP
más utilizado.
/test/demo_form.php?nombre1=valor1&nombre2=valor2
El método GET tiene algunos problemas de seguridad porque los datos
insertados son visibles en la URL. Sólo una cantidad restringida de datos puede
ser pasada a través del método GET, ya que la longitud de la URL que un
navegador puede atravesar podría ser de mil caracteres.
Método POST
El método POST necesita establecer dos contactos con el servidor web mientras
que GET sólo hace uno. Las peticiones en el POST se gestionan de la misma
manera que en el método GET, donde los espacios se representan en el signo
más (+) y los caracteres restantes se codifican en el patrón URL. También puede
enviar los elementos de un archivo.
/test/demo_form.php HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
GET y POST son dos técnicas eficientes que pueden enviar los datos a un
servidor o navegador y necesariamente que estos se comuniquen. Los dos
métodos son distintos cuando el método GET añade los datos codificados a la
URI, mientras que en el caso del método POST los datos se añaden al cuerpo y
no a la URI. Además, se utiliza el método GET para recuperar los datos. Por el
contrario, el método POST se utiliza para almacenar o actualizar los datos.
El método GET coloca los parámetros dentro de la URI mientras que el método
POST los agrega al cuerpo.
2
Los datos del método GET se pueden almacenar en caché, mientras que los
datos del método POST no
28. Fetch (Comunicación con el servidor)
JavaScript puede enviar pedidos por la red a un servidor, cuando se desea obtener
nueva información
Primero, la promesa, devuelta por fetch, resuelve con un objeto de tipo Response tan
pronto cómo el servidor (al que se le realizó el pedido) responda.
En esta fase podemos consultar por el estado HTTP, para saber si el pedido ha sido
respondido con éxito
La promesa es rechazada si el fetch no pudo realizar el pedido HTTP, por ejemplo por
problemas de red, url inválida, etc.
Para ver el estado HTTP (por ejemplo el número 200), en las propiedades del objeto
devuelto de tipo Response:
Árbol de nodos
La raíz del árbol de nodos de cualquier página HTML siempre es la misma: un nodo de
tipo especial denominado document. A partir de ese nodo raíz, cada etiqueta HTML se
transforma en un nodo de tipo "Elemento". Como se puede suponer, las páginas HTML
habituales producen árboles con miles de nodos. Aun así, el proceso de transformación
es rápido y automático.
Tipos de nodo
Document: nodo raíz del que derivan todos los demás nodos del
árbol.
Text: nodo que contiene el texto encerrado por una etiqueta HTML.
Acceso a nodos
Una vez que se ha accedido a un nodo, el siguiente paso consiste en acceder y/o
modificar sus atributos y propiedades. Mediante DOM, es posible acceder de forma
sencilla a todos los atributos HTML y todas las propiedades CSS de cualquier elemento
de la página.
<a href="https://es.wikipedia.org">Wikipedia</a>
Las propiedades CSS no son tan fáciles de obtener como los atributos XHTML. Para
obtener el valor de cualquier propiedad CSS del nodo, se debe utilizar el atributo style .
Si el nombre de una propiedad CSS es compuesto, se accede a su valor modificando
ligeramente su nombre. La transformación del nombre de las propiedades CSS
compuestas consiste en eliminar todos los guiones medios (-) y escribir en mayúscula
la letra siguiente a cada guión medio.
El único atributo HTML que no tiene el mismo nombre en HTML y en las propiedades
DOM es el atributo class. Como la palabra class está reservada por JavaScript, no es
posible utilizarla para acceder al atributo class del elemento HTML. En su lugar, DOM
utiliza el nombre className para acceder al atributo class de HTML.
getElementsByTagName('etiquetaHTML');
getElementsByName('nameHTML');
getElementById('id');
getElementsByClassName('class');
Creación/eliminación de nodos
Ejemplos
Añadir y eliminar clases es una de las tareas más comunes que llevamos a cabo al
trabajar con JavaScript y el DOM. Los elementos del DOM tienen una propiedad
llamada classList la cual es una matriz que contiene todas las clases que tiene el
elemento.
Añadir y eliminar una clase es muy sencillo, simplemente pasa la clase que quieres
añadir/eliminar como argumento al método.