Seguimos traballando no DOM que é a estrutura da páxina web. Agora traballaremos con .hml co que programamos en .js
Dise que JavaScript é unha linguaxe dirixida por eventos, e nós xa falamos dos eventos, lembrades aquelo de onclick, onmousever hai moitísimos máis.
Precisamos unha carpeta á que imos chamar tarefa11_formulario que terá coma sempre un .html xunto cun .css e tamén un .js. Podemos facer o mesmo que na anterior tarefa: Tarefa 0: Crear infraestrutura
Primeiro imos inserir un nadita de código JavaScript no mesmo .html para facer probas rápidas. No ficheiro index.html e deixando o .js en branco, tecleamos:
<body>
<button onclick="alert('😀 Moi ben 😃');">Que tal?</button>
</body>
Fixádevos ben: estou metendo unha alerta no medio dunha etiqueta de HTML. A etiqueta é coa que creamos un botón. No .css podedes cambiarlle a pinta.
✏️ Cambios interesantes:
► que pasa se poñemos document.write en troques da alerta?
► modifica o código para que o evento non sexa onclick Escolle algún dos que indican aquí
Volvemos ó noso .js e probamos todas estas liñas de código. Analizade ben como se vai liando a cousa: tres funcións: unha sen parámetros, outra con un e outra con dous. Chulísimo.
function presentar(){
var resposta = prompt("Como te chamas?");
document.write("Sei que te chamas " + resposta)
}
function ducias2ovos(duc){
alert( duc * 12);
}
function sumita (a,b) {
alert (a+b);
}
document.write('<button onclick="sumita(3,5);" > Canto son 3+5 ? </button>');
document.write('<button onclick="ducias2ovos(10);" > cantos ovos son 10 ducias? </button>');
document.write('<button onclick="presentar();" > Podo cotillear? </button>');
Nestes casos as funcións teñen un nome rimbombante: manexadores de eventos
✏️ Cambios interesantes:
► cambia a función sumita por outra que concatene dúas cadeas de caracteres.
► modifica ducias2ovos por unha función que pase de quilómetros a metros.
Queda fatal que document.write(); invada a páxina!! Imos ver de solucionalo
No ficheiro .html escribimos unha páxina web que teña varios input. Lembrades? pero engadíndolles un atributo id para nomealos:
<body>
<h2> Todo un pouco: html, css, js </h2>
<p> O teu nome: </p> <input id="nomecito">
<p> O teu apelido: </p> <input id="apelidazo">
<p>
<button onclick="saudar()"> Enviar </button>
</p>
<p id="parrafada"> </p>
</body>
ou sexa temos un titulazo, varios parágrafos, caixas de texto para que usuario teclee o seu nome e outro parágrafo de entrada non ten nada… polo de agora….
Admito que os nomes dos identificadores son un tanto chorra, pero asi queda claro o que fago con eles, penso eu.
Agora o código que vai no ficheiro .js con funcións novas desas que veñen de fábrica. Mirade ben como colle javascript os valores que teclea o usuario no documento e mete nunha variable.
function saudar() {
var nn = document.getElementById("nomecito").value;
var ap = document.getElementById("apelidazo").value;
document.getElementById("parrafada").innerHTML = "Benvido "+ ap + ", " + nn ;
document.getElementById("parrafada").style.color = "green";
}
✏️ Cambios interesantes:
► engade todo o necesario para que na páxina haxa que cubrir tamén a idade e que apareza na parrafada
► xoga con modificar todo o que se te ocurra do que iría no .css pero dende .js
