MÓDULO 6 - Códigos; HTML, CSS, Latex, MathJax y JavaScript - Anki Macrocurso

◁ Lección anterior | Próxima lección ▷

Base teórica

Usar JavaScript

<script>   Código JavaScript </script>

Para poder usar JavaScript añadiremos al final del html una región de código:
todo el JavaScript que usemos tendrá que estar entre <script> y </script>.

JS sirve para cosas como pintar la respuesta verde si es cierta pero roja si es falsa, por ejemplo.

Acceder a las cosas por el DNI

cosa = document.getElementById("DNI_de_la_cosa");

Usamos document.getElementById para coger del html cosas que tengan DNI.
Lo de cosa = lo que hace es darle un nombre a lo que cogemos para tenerlo a mano después.

Cuidado con el punto y coma que acaba las frases de JavaScript (es obligatorio).

Cambiar el contenido de algo

cosa.innerHTML = "Nuevo contenido";

Usamos .innerHTML para hablar de lo que sea que hay dentro de cosa.
Aquí le damos un nuevo contenido poniendo = seguido del contenido nuevo entre comillas.

El "contenido nuevo" puede ser texto o cualquier cosa que esté en html,
y sustituirá todo lo que había dentro hasta ahora.

Cambiar el aspecto de algo

cosa.style.propiedad = "nuevo valor";

Usamos .style para cambiar el estilo (CSS) de la cosa.
Después de .style ponemos .laPropiedadQueQueremosCambiar.
Y a continuación = y entre comillas el nuevo valor (tal como lo pondríamos en CSS).

Por ejemplo, cosa.style.backgroundColor = "red"; pintará de rojo el fondo de la cosa.

...ojo que en CSS las propiedades eran con guiones (font-size) pero aquí es en camelCase (.fontSize)

Comprobar condiciones

if (tal == cual) {   cambios; }

Usamos if (condición) para para hacer cambios sólo si la condición se cumple.
Los cambios serán cada uno una línea dentro de los corchetes (acabada en punto y coma).

Como estamos en Anki, a menudo ese "tal" será uno de nuestros campos de la tarjeta:
  if ({{Edad}} == 42) {
    cartel.innerHTML = "Oh enhorabuena qué edad tan bonita!";
  }

También puedo hacer que pase cuando son distintos (tal != cual)
...o cuando uno es mayor que el otro (tal > cual) (si son números, claro!)

...ojo que el igual de comparar es doble (un igual sirve para asignar, dos iguales para comparar).

Comprobar alternativas

if (animal == 'vaca') {   cambios; } else if (animal == "alcachofa") {   cambios; } else {   cambios; }

Usamos else if para comprobar otras condiciones (cuando la primera no se cumple).
Usamos else si queremos cambiar cosas cuando falle todo lo anterior.

Aquí obviamente animal tiene que significar algo para que funcione:
puedo hacer animal = {{Animal}}; al principio (o simplemente usar {{Animal}} en su lugar).

...y vale la pena notar que a diferencia de los números el texto necesita comillas (no importa si simples o dobles).

Comillas en el texto

texto = "este texto tiene 'comillas' dentro"

Si necesito que mi texto tenga un tipo de comillas dentro, lo rodeo con las otras.
Funciona como en el ejemplo y 'también "funciona" al revés'.

Campos

Javascript no tiene idea de lo que significa {{Word}} porque los campos son un concepto exclusivo de Anki. Lo que Anki hace antes de que se muestre cada tarjeta es reemplazar {{Word}} con lo que sea que sea para la tarjeta actual. Entonces, cuando tu código entra en juego, {{Word}} ya no existe, ya ha sido reemplazado por la palabra real.

Afortunadamente, la solución es simple: en la plantilla, en lugar de {{Word}}, escribe <span id=«word»>{{Word}}</span>. Ahora tienes algo que puedes llamar y modificar desde Javascript a través del id de «word».

Ejemplos prácticos con código funcional

Temporizador (reloj)

**<!--** **Esto es un comentario: Temporizador -->**

<span class="timer" id="s2" style='font-size:16px; color: #A6ABB9;'></span>
<script>
function countdown( elementName, minutes, seconds)
{
var element, endTime, hours, mins, msLeft, time;
function twoDigits( n )
{
return (n <= 9 ? "0" + n : n);
}
function updateTimer()
{
msLeft = endTime - (+new Date);
if ( msLeft < 1000 ) {
element.innerHTML = "<span style='color:#CC5B5B'>TIME</span>";
} else {
time = new Date( msLeft );
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
}
}
element = document.getElementById( elementName );
endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
updateTimer();
}
countdown("s2", 0, 10 ); //2nd value is the minute, 3rd is the seconds
</script>

En el apartado countdown("s2", 0, 10 ); podemos modificar el segundo valor, 0, modificando así los minutos, y en el tercer valor, 10, los segundos de nuestro temporizador.

Botón que oculta información extra

{{#Info extra}} es el nombre del campo que hará como contenedor de información extra.

{{#Info extra}}
<div class="extra">
    <button onclick="toggleInfo()">📖 Info Extra 📖</button>
    <div id="extraInfo" style="display:none">{{edit:Info extra}}</div>
</div>

<script>
function toggleInfo() {
    var info = document.getElementById("extraInfo");
    if (info.style.display === "none") {
        info.style.display = "block";
        info.scrollIntoView({ behavior: 'smooth', block: 'center' }); // Scroll to the center of the view
    } else {
        info.style.display = "none";
    }
}
</script>
{{/Info extra}}

◁ Lección anterior | Próxima lección ▷

MÓDULO 6 - Códigos; HTML, CSS, Latex, MathJax y JavaScript - Anki Macrocurso