Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript1»
De WikiEducator
(→Cambio de contexto en vue) |
|||
| (18 revisiones intermedias por el mismo usuario no mostrado) | |||
| Línea 1: | Línea 1: | ||
| − | + | {{Indice | |
|Titulo=Contenido de JavaScript | |Titulo=Contenido de JavaScript | ||
|Imagen=javaScript.jpg | |Imagen=javaScript.jpg | ||
|Subtitulo=Lista de contendio | |Subtitulo=Lista de contendio | ||
| − | |Listado=[[Usuario:ManuelRomero/JavaScript/Inicio| | + | |Listado=#[[Usuario:ManuelRomero/JavaScript/Inicio|Introducción a la programación]] |
| − | + | #[[Usuario:ManuelRomero/JavaScript/lenguajeJS|Conceptos generales de javaScript.]] | |
| − | [[Usuario:ManuelRomero/JavaScript/lenguajeJS| | + | #[[Usuario:ManuelRomero/JavaScript/sintaxis|Sintaxis básica del lenguaje.]] |
| − | + | #[[Usuario:ManuelRomero/JavaScript/programación|Ejemplos de programación]] | |
| − | [[Usuario:ManuelRomero/JavaScript/sintaxis| | + | #[[Usuario:ManuelRomero/JavaScript/dom|El DOM]] |
| − | + | #[[Usuario:ManuelRomero/JavaScript/canvas|Canvas en html5]] | |
| − | [[Usuario:ManuelRomero/JavaScript/programación| | + | #[[Usuario:ManuelRomero/JavaScript/eventos|Eventos]] |
| − | + | #[[Usuario:ManuelRomero/JavaScript/formularios|Formularios]] | |
| − | [[Usuario:ManuelRomero/JavaScript/dom| | + | #[[Usuario:ManuelRomero/JavaScript/jquery|JQuery]] |
| − | + | #[[Usuario:ManuelRomero/JavaScript/actualizado|Charla JS 2022]] | |
}} | }} | ||
| + | ;Librerías de javascript para gráficos | ||
| + | https://ourcodeworld.co/articulos/leer/159/top-5-las-mejores-bibliotecas-de-javascript-de-diagramas-gratuitos | ||
| + | https://ingenieriadesoftware.es/10-librerias-javascript-dibujar-diagramas/ | ||
| + | https://www.youtube.com/watch?v=RqQ1d1qEWlE | ||
| + | ==Cuestiones para tener en cuenta== | ||
| + | ===Cambio de contexto en vue=== | ||
| + | *Usando vue, tengo accesible this en toda la sección. | ||
| + | *Se puede perder el contexto cuando se intenta accedere a él en un método de otra función | ||
| + | *Si esa función es una función flecha el contexto se mantiene. | ||
| + | *Esta es una sección de código donde se puede reproduce esta situación | ||
| + | <source lang=javascript> | ||
| + | //ascendente es una variable booleana que me indica cómo quiero ordenar (ascendente o descendente) | ||
| + | // además se usa con una directiva v-if para mostar un svg (flecha arriba o abajo) en el botón de cada campo | ||
| + | //campo indica el nombre del campo por el que quiero ordenar | ||
| + | //Este código funciona bien (con función flecha no pierdo el contexto de this) | ||
| + | this.ascendente[campo] = !this.ascendente[campo]; | ||
| + | this.filas.data.sort((a, b)=> | ||
| + | this.ascendente[campo]? | ||
| + | String(a[campo]).localeCompare(String(b[campo])) : | ||
| + | String(b[campo]).localeCompare(String(a[campo])) | ||
| − | + | </source> | |
| − | + | *Sin embargo si no uso función flecha no funcionaría | |
| − | + | <source lang=javascript> | |
| − | < | + | this.filas.data.sort(function (a, b){ |
| − | { | + | if (this.ascendente[campo]===true) |
| − | + | return String(a[campo]).localeCompare(String(b[campo])); | |
| − | + | else | |
| − | + | return String(b[campo]).localeCompare(String(a[campo]))}); | |
| − | [[ | + | </source> |
| − | + | *Y es porque se pierde el contexto de this dentro del método sort, para conseguir el objetivo, tendría que perservar dicho contexto en otra variable | |
| − | [[ | + | *Sin embargo si no uso función flecha no funcionaría |
| − | < | + | <source lang=javascript> |
| − | + | const self = this; | |
| − | + | this.filas.data.sort(function (a, b){ | |
| − | + | if (self.ascendente[campo]===true) | |
| − | + | return String(a[campo]).localeCompare(String(b[campo])); | |
| − | + | else | |
| − | + | return String(b[campo]).localeCompare(String(a[campo]))}); | |
| − | [ | + | |
| − | + | </source> | |
| − | [[ | + | |
| − | + | ||
| − | [[ | + | |
| − | + | ||
| − | + | ||
| − | + | ||
Última revisión de 06:37 2 jul 2024
|
|
- Librerías de javascript para gráficos
https://ourcodeworld.co/articulos/leer/159/top-5-las-mejores-bibliotecas-de-javascript-de-diagramas-gratuitos https://ingenieriadesoftware.es/10-librerias-javascript-dibujar-diagramas/
https://www.youtube.com/watch?v=RqQ1d1qEWlE
Cuestiones para tener en cuenta
Cambio de contexto en vue
- Usando vue, tengo accesible this en toda la sección.
- Se puede perder el contexto cuando se intenta accedere a él en un método de otra función
- Si esa función es una función flecha el contexto se mantiene.
- Esta es una sección de código donde se puede reproduce esta situación
//ascendente es una variable booleana que me indica cómo quiero ordenar (ascendente o descendente) // además se usa con una directiva v-if para mostar un svg (flecha arriba o abajo) en el botón de cada campo //campo indica el nombre del campo por el que quiero ordenar //Este código funciona bien (con función flecha no pierdo el contexto de this) this.ascendente[campo] = !this.ascendente[campo]; this.filas.data.sort((a, b)=> this.ascendente[campo]? String(a[campo]).localeCompare(String(b[campo])) : String(b[campo]).localeCompare(String(a[campo]))
- Sin embargo si no uso función flecha no funcionaría
this.filas.data.sort(function (a, b){ if (this.ascendente[campo]===true) return String(a[campo]).localeCompare(String(b[campo])); else return String(b[campo]).localeCompare(String(a[campo]))});
- Y es porque se pierde el contexto de this dentro del método sort, para conseguir el objetivo, tendría que perservar dicho contexto en otra variable
- Sin embargo si no uso función flecha no funcionaría
const self = this; this.filas.data.sort(function (a, b){ if (self.ascendente[campo]===true) return String(a[campo]).localeCompare(String(b[campo])); else return String(b[campo]).localeCompare(String(a[campo]))});
