domingo, 20 de marzo de 2022

javascript notas 2022-2023

 Aclaracion a pag 60 de jon duckett

Métodos en tipos primitivos

JavaScript nos permite trabajar con tipos de datos primitivos (string, number, etc) como si fueran objetos. Los primitivos también brindan métodos para ser llamados. Los estudiaremos pronto, pero primero veamos cómo trabajan porque, por supuesto, los primitivos no son objetos. (y aquí lo haremos aún más evidente).

Veamos las diferencias clave entre primitivos y objetos.

Un primitivo

  • Es un valor de tipo primitivo.
  • Hay 7 tipos primitivos: string, number, bigint, boolean, symbol, null y undefined.

Un objeto

  • Es capaz de almacenar múltiples valores como propiedades.
  • Puede ser creado con {}. Ejemplo: {name: "John", age: 30}. Hay otras clases de objetos en JavaScript; las funciones, por ejemplo, son objetos.

Una de las mejores cosas de los objetos es que podemos almacenar una función como una de sus propiedades.

let john = {
  name: "John",
  sayHi: function() {
    alert("Hi buddy!");
  }
};

john.sayHi(); // Hi buddy!

Aquí hemos creado un objeto john con el método sayHi.

Ya existen muchos objetos integrados al lenguaje, como los que trabajan con fechas, errores, elementos HTML, etc. Ellos tienen diferentes propiedades y métodos.

¡Pero estas características tienen un precio!

Los objetos son más “pesados” que los primitivos. Ellos requieren recursos adicionales para soportar su maquinaria interna.

Un primitivo como objeto

Aquí el dilema que enfrentó el creador de JavaScript:

  • Hay muchas cosas que uno querría hacer con los tipos primitivos como string o number. Sería grandioso accederlas usando métodos.
  • Los Primitivos deben ser tan rápidos y livianos como sea posible

La solución es algo enrevesada, pero aquí está:

  1. Los primitivos son aún primitivos. Con un valor único, como es deseable.
  2. El lenguaje permite el acceso a métodos y propiedades de strings, numbers, booleans y symbols.
  3. Para que esto funcione, se crea una envoltura especial, un “object wrapper” (objeto envoltorio) que provee la funcionalidad extra y luego es destruido.

Los “object wrappers” son diferentes para cada primitivo y son llamados: String, Number, Boolean, Symbol y BigInt. Así, proveen diferentes sets de métodos.

Por ejemplo, existe un método str.toUpperCase() que devuelve un string en mayúsculas.

Aquí el funcionamiento:

let str = "Hello";

alert( str.toUpperCase() ); // HELLO

Simple, ¿no es así? Lo que realmente ocurre en str.toUpperCase() es:

  1. El string str es primitivo. Al momento de acceder a su propiedad, un objeto especial es creado, uno que conoce el valor del string y tiene métodos útiles como toUpperCase().
  2. Ese método se ejecuta y devuelve un nuevo string (mostrado con alert).
  3. El objeto especial es destruido, dejando solo el primitivo str.

Así los primitivos pueden proveer métodos y aún permanecer livianos.

El motor JavaScript optimiza este proceso enormemente. Incluso puede saltarse la creación del objeto extra por completo. Pero aún se debe adherir a la especificación y comportarse como si creara uno.

Un number tiene sus propios métodos, por ejemplo toFixed(n) redondea el número a la precisión dada:

let n = 1.23456;

alert( n.toFixed(2) ); // 1.23

Veremos más métodos específicos en los capítulos Números y Strings.


https://es.javascript.info/primitives-methods

***************************

EVALUACIÓN DE CORTO CIRCUITO (SHORT - CIRCUIT EVALUATION

Las expresiones lógicas son evaluadas de izquierda a derecha. 

Si la primera condición puede proporcionar  suficiente información para obtener la  respuesta, entonces no hay necesidad de  que evalúe la segunda condición.

false && anything

^ ha encontrado falso

No tiene sentido seguir determinando el otro resultado. Esto no puede ser verdadero    

true || anything

^ ha encontrado true

No tiene sentido continuar porque al menos uno de los valores es verdadero.

********************

document.write() 

• Los programadores utilizan muy rara vez este método. en estos días y generalmente está mal visto.

********************

MANIPULACIÓN DOM

La manipulación de DOM se refiere al uso de un conjunto de métodos y propiedades para acceder, crear y actualizar nodos elementos y  de texto. (pág. 227)

******************

XSS involucra a un atacante que coloca un código malicioso en un sitio(site)

*****************

Nunca coloque el contenido de ningún usuario en los siguientes lugares sin una experiencia detallada de los problemas involucrados (que están más allá del alcance de este libro):

Script tags:<script>n ot here</script>

HTML comments:<!-- not here -->

Tag names:<notHere href=" / test" / >

Attributes:<div notHere="norHere" / >

CSSvalues: {color: not here}

******************

Primero que nada keyPress no es igual que KeyDown

KeyPress = KeyDown + KeyUp

   |    KeyDown     ^     KeyUp 
   v                |            KeyPress
|Tecla|          |Tecla|

Para entenderlo mejor véamos qué pasa cuando el usuario no suelta la tecla

   |    KeyDown    |     KeyDown     |    KeyDown    ^     KeyUp 
   v               v                 v               |            KeyPress
|Tecla|         |Tecla|           |Tecla|         |Tecla|
*******************************
El orden en que se disparan los eventos se conoce como flujo de eventos 
y los eventos fluyen en dos direcciones.(260)


BURBUJEO DE EVENTOS

El evento comienza en el nodo más específico y fluye hacia el menos específico. Este es el tipo predeterminado de flujo de eventos con soporte de navegador muy amplio.

CAPTURA DE EVENTOS

El evento comienza en el nodo menos específico y fluye hacia adentro hacia el más específico, esto no es compatible con Internet Explorer 8 y versiones anteriores,

***************

EL OBJETO EVENTO

Cuando ocurre un evento, el objeto evento le brinda información sobre el evento y el elemento con el que sucedió.

*****************

El objeto JavaScript JSON puede convertir datos JSON en un objeto JavaScript. También puede convertir un objeto JavaScript en una cadena.

JSON.stringify() convierte objetos de JavaScript en una cadena, formateados usando JSON. Esto le permite enviar JavaScript objetos del navegador a otra aplicación.

JSON.parse() procesa una cadena que contiene datos JSON.y los convierte en objetos JavaScript listos para que los use el navegador.

-------------------------

Cuando los datos JSON se envían desde un servidor a un navegador web, se transmiten como una cadena (JSON).

Cuando llegan los datos al navegador, tu script debe convertir la cadena en un objeto JavaScript. Esto se conoce como deserializar un objeto.

Esto se hace usando el método parse() de un objeto integrado( built-in) llamado JSON. Este es un objeto global, por lo que puede usarlo sin crear  una instancia de él.

El objeto JSON también tiene un método llamado stringify(), que convierte los objetos en una cadena utilizando la notación JSON para que pueda enviarse desde el navegador  a un servidor. Esto también se conoce como serializar un objeto.


JSONP (JSON CON PADDING (RELLENO))

JSONP (a veces escrito JSON-P) implica agregar un elemento <script> en la página, que carga los datos JSON de otro servidor. Esto funciona porque no hay restricciones sobre la fuente del script en un elemento <script>


***************

2023 por que se usa :const callback y no callback

El uso de const callback en lugar de solo callback es una convención común en JavaScript para declarar una variable que almacena una función.

Cuando se utiliza const, se está declarando una constante que hace referencia a la función definida. En este caso, const callback se utiliza para declarar una constante llamada callback que almacena la función definida en el código.

Al utilizar const, se asegura que el valor de callback no se pueda reasignar a otro valor en el transcurso del programa. Esto es útil para garantizar la coherencia y evitar posibles errores causados por la reasignación accidental de la función.

En resumen, const callback se utiliza para declarar una constante que almacena la función callback, lo que ayuda a mantener la integridad y consistencia del código.

*****************

tutorial básico sobre las funciones flecha en JavaScript:

  1. Sintaxis básica:

    • La sintaxis de una función flecha se ve así: (parámetros) => { código }.
    • Si solo hay un parámetro, los paréntesis pueden ser omitidos: parámetro => { código }.
    • Si no hay parámetros, se deben usar paréntesis vacíos: () => { código }.

  2. Retorno implícito:

    • Si el cuerpo de la función flecha consiste en una sola expresión, se puede omitir la palabra clave return YO Y CREO SE PUEDE OMITIR LAS LLAVES.
    • Ejemplo: (x, y) => x + y.

  3. Retorno de objetos literales:

    • Si deseas devolver un objeto literal de manera directa, debes envolverlo entre paréntesis para evitar la ambigüedad de la sintaxis.
    • Ejemplo: () => ({ nombre: "Juan", edad: 30 }).

  4. Uso en callbacks:

    • Las funciones flecha son especialmente útiles como callbacks en métodos como forEach, map, filter, entre otros.
    • Ejemplo: [1, 2, 3].forEach(num => console.log(num)).

  5. No vinculación de this:

    • A diferencia de las funciones normales, las funciones flecha no tienen su propio contexto this.
    • El valor de this en una función flecha se hereda del contexto circundante.
    • Esto puede ser beneficioso en ciertos casos, evitando problemas con la referencia errónea de this.

  6. Uso en funciones de orden superior:

    • Las funciones flecha son útiles en funciones de orden superior como map, filter, reduce, etc., para escribir código más conciso.
    • Ejemplo: [1, 2, 3].map(num => num * 2).

Recuerda que las funciones flecha tienen algunas diferencias clave con las funciones normales, como el manejo de this y la incapacidad de ser utilizadas como constructores. Es importante comprender estas diferencias antes de utilizar funciones flecha en tu código.

----------


(mutations) => es una sintaxis de función flecha en JavaScript que define una función anónima con un parámetro llamado mutations.

En este caso, la función flecha se utiliza como un callback para el método forEach que se llama en el arreglo mutations. Cada elemento del arreglo mutations se pasa como argumento a esta función.

La sintaxis (mutations) => { ... } es equivalente a function(mutations) { ... }, pero con una sintaxis más concisa y clara. Es comúnmente utilizada en JavaScript para definir funciones en línea, especialmente cuando se pasan como argumentos a otros métodos o funciones.

---------------

La función setTimeout se utiliza en JavaScript para programar la ejecución de una función o la ejecución de un fragmento de código después de un cierto período de tiempo, especificado en milisegundos.

La sintaxis básica de setTimeout es la siguiente:

javascript
setTimeout(función, tiempo);

Donde:

  • función es la función que se ejecutará después de que expire el tiempo especificado.
  • tiempo es la cantidad de tiempo en milisegundos que se debe esperar antes de que se ejecute la función.

Algunos usos comunes de setTimeout son:

  1. Retardar la ejecución de una función:

    • Se puede utilizar setTimeout para retrasar la ejecución de una función o un bloque de código.
    • Esto es útil cuando se necesita introducir una pausa o esperar que ocurra algo antes de ejecutar una acción.

  2. Animaciones y transiciones:

    • setTimeout se utiliza a menudo en combinación con CSS o manipulación del DOM para crear animaciones o transiciones suaves.
    • Puede usarse para cambiar gradualmente los estilos de un elemento en un intervalo de tiempo determinado.

  3. Actualizar datos en tiempo real:

    • setTimeout se utiliza a veces para realizar actualizaciones periódicas en una aplicación web sin tener que recargar la página completa.
    • Por ejemplo, se puede utilizar para solicitar actualizaciones de datos del servidor cada cierto intervalo de tiempo.

  4. Retrasar la ejecución de código asincrónico:

    • En situaciones donde se trabaja con código asincrónico, como operaciones de red o peticiones a APIs, setTimeout puede ser útil para retrasar la ejecución de cierto código hasta que se obtengan los resultados.

Es importante tener en cuenta que setTimeout no garantiza una precisión exacta en el tiempo de ejecución. La función o el código especificado se ejecutarán después del tiempo indicado, pero puede haber una pequeña variación debido a otros factores en el entorno de ejecución.

En resumen, setTimeout se utiliza para programar la ejecución de una función o fragmento de código después de un intervalo de tiempo determinado. Su uso es común en diversas situaciones, como retrasar acciones, animaciones, actualizaciones de datos y manejo de código asincrónico.

**************

2023 if con varles indeterminados

Cuando la condición de un if en JavaScript tiene valores indeterminados, la evaluación de la condición sigue las reglas normales de la semántica de JavaScript y puede dar lugar a diferentes resultados dependiendo de la situación. Veamos algunas de las situaciones más comunes:

  1. Condición con valores numéricos: Si la condición tiene valores numéricos, los siguientes valores se consideran falsos: 0, NaN (Not a Number) y undefined. Todos los demás valores numéricos se consideran verdaderos.

  2. Condición con valores de tipo string: Si la condición es una cadena de texto (string), los siguientes valores se consideran falsos: una cadena vacía (''), null y undefined. Todos los demás valores de cadena se consideran verdaderos.

  3. Condición con valores booleanos: Si la condición es un valor booleano (true o false), se evaluará de manera directa y no tendrá valores indeterminados.

  4. Condición con otros tipos de datos: Si la condición es un objeto, función o cualquier otro tipo de dato, generalmente se considera verdadera, incluso si el objeto está vacío o no contiene propiedades.

Es importante destacar que JavaScript tiene una coerción automática para convertir ciertos tipos de datos a booleanos cuando se utilizan en contextos booleanos, como en una condición de if. Esto significa que un valor que no es de tipo booleano se convertirá automáticamente a booleano antes de la evaluación. La regla general es que cualquier valor que no sea falso, undefined, null, 0, NaN o una cadena vacía se considerará verdadero.

Ejemplo:

javascript
let x = 'hello';

if (x) {
  console.log('La condición es verdadera.');
} else {
  console.log('La condición es falsa.');
}

En este ejemplo, x contiene la cadena de texto 'hello', que no es una cadena vacía. Por lo tanto, la condición se evaluará como verdadera y se mostrará en la consola el mensaje "La condición es verdadera."

Es importante tener en cuenta estas reglas al utilizar condiciones en JavaScript y asegurarse de que la condición tenga el resultado esperado según el tipo de dato que se esté evaluando.

Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)