Vimos de forma rápida cómo conectar eventos del navegador con código nuestro. Eventos en JavaScript es un tema mucho más amplio, pero para nuestras necesidades es suficiente con ver los pasos necesarios para poner en funcionamiento un botón.
Para llegar a que un evento se conecte con una funcion “handler()” tenemos que agregar esa función hander() a la lista de “escuchadores” (listeners) de determinado evento. En nuestro caso queremos escuchar el evento "click". Podemos conseguirlo de 2 maneras altenativas.
1- A partir de HTML, usando el atributo onclick=""
<button id="miBoton" onclick="miFuncionHandler()">Mi Botón</button>
<script type="text/javascript">
function miFuncionHandler(event) {
// mi código
}
</script>
2- Desde JavaScript, agregando un listener al elemento HTML con elemento.addEventListener("click", handler)
<button id="miBoton">Mi Botón</button>
<script type="text/javascript">
let elementoBoton = document.querySelector("#miBoton");
elementoBoton.addEventListener("click", miFuncionHandler);
function miFuncionHandler(event) {
// mi código
}
</script>
En este ejercicio vimos que no contamos con código JavaScript como parte del enunciado, así que todo lo vamos a tener que armar nosotros.
Para las funciones de modificar puntaje, vismos que –a grandes rasgos– se puden pensar con la forma
function incrementarLocal() {
// modifico puntaje actual
// muestro puntaje modificado
}
function incrementarVisitante() {
// modifico puntaje actual
// muestro puntaje modificado
}
function decrementarLocal() {
// modifico puntaje actual
// muestro puntaje modificado
}
function decrementarVisitante() {
// modifico puntaje actual
// muestro puntaje modificado
}
function reinicar() {
// modifico puntaje actual
// muestro puntaje modificado
}
Para la operación de modificar puntaje, tenemos que pensar donde va a estar guardado ese puntaje. Una opción puede ser una variable, otra opción puede ser el mismo DOM.
<script type="text/javascript">
// guardo "estado" en variables "globales"
let puntajeLocal = 0;
let puntajeVisitante = 0;
function incrementarLocal() {
// modifico puntaje actual
puntajeLocal++;
// muestro puntaje modificado
// ...
}
</script>
<span id="puntajeLocal">0</span>
<span id="puntajeVisitante">0</span>
<script type="text/javascript">
function incrementarLocal() {
// obtengo puntaje actual del DOM
let puntajeLocalString = document.querySelector("#puntajeLocal").innerText;
// convierto el valor a número entero
let puntajeLocal = parseInt(puntajeLocalString);
// modifico puntaje actual
puntajeLocal++;
// muestro puntaje modificado
// ...
}
</script>
Para deshabilitar un botón vimos que tenemos varias opciones, pero la opción más semántica (donde el código transmite la intención de lo que queremos representar) sería haciendo uso del atributo disabled de los elementos HTML.
<button disabled>Boton Deshabilitado</button>
<script type="text/javascript">
let elementoBoton = document.querySelector("button");
elementoBoton.disabled // vale true
elementoBoton.disabled = false // vuelvo a habilitar el botón
</script>
Para este ejercicio volvemos a encontrarnos con el esquema de:
Podemos empezar por la segunda parte, mostrar en pantalla:
function mostrarListado() {
// vaciar el elemento <ul> actual
// encontrar elemento <ul>
// asignar contenido "" al elemento
// recorrer la lista en la variable contactos
// mostrar cada objeto contacto de esa lista
// crear nuevo elemento <li>
// agregar los campos del objeto contacto como contenido del <li>
// agregar el <li> al DOM como hijo del <ul>
}
Para modificar el listado podemos usar las operaciones de listas y objetos que ya conocemos.