Estaremos utilizando los siguiente elementos HTML:
Elemento HTML | ¿Qué hace? |
---|---|
<form> | Indica que vamos a aceptar input del usuario |
<input> | Tags de input de usuario |
Estaremos utilizando los siguiente elementos de Javascript:
Evento | ¿Qué hace? |
---|---|
onClick | Ejecuta una acciòn cuando se hace click al elemento html |
onmouseover | Ejecuta una acciòn cuando se le para el cursor encima al elemento |
onmouseout | Ejecuta una acciòn cuando el cursor sale del area encima del elemento HTML |
Para poder identificar los elementos únicamente le estaremos colocando su propiedad de identificación como en el tutorial anterior( id=“” )
*IMPORTANTE:
Nuestras funciones utilizan varias propiedades de Javascript:
<input type="text" onclick="function()"> </input>
<form id="form" onsubmit="return false;">
<input style="" type="text" id="userInput" />
<input style="" type="submit" onclick="hello()"; />
</form>
function hello() { var input = document.getElementById("userInput").value; alert("Hello" + " " + input + ", welcome to D-Coding"); }*IMPORTANTE:
<script src="script.js"></script>*IMPORTANTE:
<div id="buttons"> <input type="button" onclick="chBackcolor('red');" value="red"> <input type="button" onclick="chBackcolor('yellow');" value="yellow"> </div>
function chBackcolor(color) { document.body.style.background = color; }*IMPORTANTE:
a. <img src="http://populardcoding.com/tutorial1/img-icon-1.gif""> por: <img onmouseover="bigImg(this)" onmouseout="regImg(this)" src="http://populardcoding.com/tutorial1/img-icon-1.gif"> b. <img src="http://populardcoding.com/tutorial1/img-icon-2.gif""> por: <img onmouseover="bigImg(this)" onmouseout="regImg(this)" src="http://populardcoding.com/tutorial1/img-icon-2.gif"> c. <img src="http://populardcoding.com/tutorial1/img-icon-3.gif""> por: <img onmouseover="bigImg(this)" onmouseout="regImg(this)" src="http://populardcoding.com/tutorial1/img-icon-3.gif">
function bigImg(x) { x.style.height = "64px"; x.style.width = "64px"; } function regImg(x){ x.style.height = "40px"; x.style.width = "40px"; }