P - Tarea JS - 03
Tarea 03 - Seleccionar elementos. Insertar contenido en elementos.
Ejercicio 1: Escribe un programa que muestre en pantalla dos números y posteriormente escriba su suma, resta y multiplicación. El resultado debe aparecer dentro de una caja div id="resultado" cuando el usuario pulse un botón.[vista previa].
Guarda la tarea en una carpeta llamada [03-cambiar_html] que deberá estar dentro de otra carpeta general llamada [tareas_JS] donde irás guardando todas las tareas propuestas del curso.
Detalles teóricos
- En JavaScript existen varias formas de seleccionar un elemento de una página HTML, una de las utilizadas es empleando el método getElementById() del objeto document. Recordar que en una misma página HTML los atributos id son únicos.
- Una forma muy habitual de introducir información (o recuperarla), dentro de una etiqueta HTML es usar la función innerHTML del elemento en cuestión.
- Podemos cambiar cualquier estilo de un elemento HTML apuntando a él como se he dicho antes y, mediante la notación de punto, teclear style.propiedadCss = 'valor'. Debemos recordar que si la propiedad CSS se compone de dos o más palabras separadas por guión, en JS no debemos poner los guiones y seguir la notación "camelCase". Ejemplo:
document.body.style.backgroundColor = '#f00';
- Botones
Un botón se puede poner en HTML de dos formas: a) utilizando el elemento button o b) utilizando el elemento input
a) <button onclick="alert('Hola')">Pulsa</button>
b) <input type="button" onclick="alert('Que tal')" value="Pulsa">
Y si queremos ejecutar código JS al (hacer clic) pulsar un botón lo pondremos entre comillas (simples o dobles) como valor del atributo onclick o llamando a una función que ejecute el código que nos interese:
<button onclick="Sumar()">Pulsa</button>
- Casillas de texto, para introducir datos
Una casilla de texto donde el usuario pueda teclear algún dato se consigue también con el elemento input
<input type="text" id="dato" size="8">
Los posibles atributos del elemento input son estos.