Diario IFCD0110 Castro Urdiales: 2015-01-04

JS

//Ejercicio 1

function cuentame123()
{

//Con esto y gracias al onKeyDown y al onKeyUp podremos contar cada vez que se escriba un caracter

formulariouno.nopulses.value = formulariouno.minombreestexto.value.length

}

function cambiacolor234()

{

//Cuando dejemos de hacer click en el texto, se cambiará el color del textarea
//También puedes escribir en la caja de texto donde está escrito el código de color, para cambiarlo manualmente

document.getElementById('editores').style.background=formulariouno.color.value

}

//Cambia el fondo del form al hacer click en la imagend de color rosa
function cambiaborde1()
{

document.getElementById('formu').style.background='pink'

}
//Cambia el fondo del form al hacer click en la imagend de color azul

function cambiaborde2()
{

document.getElementById('formu').style.background='aquamarine'

}

//Ejercicio 2

function cambiodiv()
{

//cuando cargue la página saldrá el saludo y cambiará el color de fondo
window.alert("Bienvenido")
document.body.style.backgroundColor= "orange"; document.body.style.backgroundImage='none'
}

//Al pulsar, el fondo cambiará, se eliminará la imagen y se quedará el color morado

function fondonuevo()
{

document.body.style.backgroundColor= "purple"; document.body.style.backgroundImage='none'
}
//Mientras el mouse esté encima del botón (sin clicar) será de color rojo
function botonnuevo()
{
document.getElementById('nuevoboton').style.backgroundColor='red'
}
//Mientras el mouse esté fuera del botón, éste será verde
function colordenuevo()
{
document.getElementById('nuevoboton').style.backgroundColor='green'
}

//Ejercicio 3

//para lograr parar la carga de la imagen

// Internet Explorer specific
function OnAbortImage () {
var info = document.getElementById ("info");
info.innerHTML += "<br />The loading of the image has been aborted.";
RemoveEsc ();
}

function OnLoadImage () {
var info = document.getElementById ("info");
info.innerHTML += "<br />The image has been loaded.";
RemoveEsc ();
}

// Internet Explorer specific
function OnStateChangeImage (image) {
var info = document.getElementById ("info");
info.innerHTML += "<br />readyState: " + image.readyState;
}

function RemoveEsc () {
var esc = document.getElementById ("esc");
esc.parentNode.removeChild (esc);
}


//Ejercicio 4

//Al seleccionar el texto, cambiará el color de fondo de la caja al amarillo
function nino()
{

document.getElementById("demo2").style.backgroundColor = "yellow";
}
//Al escribir en la caja de texto, cambiará a color rojo el fondo de ésta
function rojo1()
{
document.getElementById("demo").style.backgroundColor = "red";
}
//Al seleccionar el texto, cambiará el color de fondo de la caja al verde
function nino2()
{

document.getElementById("demo3").style.backgroundColor = "green";
}

//Al pulsar el botón, éste será de color rosa
function mevoy()
{

document.getElementById("nue").style.backgroundColor = "pink";

}

CSS

body{ background-image: url( "gatito.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

#menu
{ background-color: #CEF6F5;
width: 1310px;
height:5900px;
margin-top: 20px;
margin-right: 10%;
margin-left: 7%;
border-radius: 15px;
opacity: 0.7;
padding: 20px;

}

h1{
text-align: center;
font-family: "Segoe Script";
position: relative;

width:300px;
}

.nombre{
text-align: center;
font-family: "Segoe Script";
position: relative;
top:5px;
font: bold 90%;

}

#menu1{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 25px;

}

#menu2{width: 500px;
height: 200px;
border: solid 1px black;

margin-left: 750px;

}

li{font-size: 26px;
}

h2{position: relative;

width:300px;
}

#menu3{width: 500px;
height: 250px;
border: solid 1px black;
float: left;
margin-left: 25px;
position: relative;
top: 50px;
left: 3px;

}

.dos{ position: relative;
top: 5px;
left: 450px;
}

#menu4{width: 500px;
height: 250px;
border: solid 1px black;
float: left;
margin-left: 250px;
position: relative;

}

#contenedor{ width: 100%;
height: 300px;
position: relative;

}

.ir{position:fixed;
right:0;
top:0;
}

table{

width:451px;
height:160px;
border:0px;
}

.resul{

text-align:right;
}

form{

width:500px;
height:260px;

}

#menu123{

width: 500px;
height: 200px;
border: 0px;
float: left;
margin-left: 25px;

}

#num:hover{

background-color: yellow;

}

.tabla2{

width:200px;
border:0px;
}

.tabla3{

width:200px;
border:0px;

}

#cambiacolor{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 25px;

}

#naranja{

color:#666;
background-color:orange;
padding:5px;
}

#rojo{

color:#666;
background-color:red;
padding:5px;

}

#morao{
color:#666;
background-color:purple;
padding:5px;

}

#amarillo{
color:#666;
background-color:yellow;
padding:5px;

}

#marino{
color:#666;
background-color:aquamarine;
padding:5px;

}

#verde{
color:#666;
background-color:green;
padding:5px;

}

#fondos{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 25px;

}
.menu1{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 25px;

}

HTML

<!Doctype html>
<html lang="es">
<head>
<TITLE>index</TITLE>
<LINK REL="stylesheet" HREF="index.css" TYPE="text/css">
<meta name="Description" content="ejercicios UF1305.5">

<meta charset"utf-8" />


<NOSCRIPT>

Este navegador no comprende los scripts que se están ejecutando, debe actualizar su versión de

navegador a una más reciente. Por favor escoja entre las diversas opciones que le mostramos.

<br><br>

<a href=http://windows.microsoft.com/es-es/windows/downloads>Microsoft</a>.<br>
<a href=http://www.opera.com/es-es>Opera</a>.<br>
<a href=http://support.apple.com/kb/dl1531?viewlocale=es_ES>Safari</a>.<br>
<a href=https://www.mozilla.org/es-ES/firefox/new/>Firefox</a>.<br>
<a href=http://www.google.com/intl/es/chrome/>Chrome</a>.<br>

</NOSCRIPT>

<script>
//Para poder arrastrar a uno y otro div
/* Events fired on the drag target */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
document.getElementById("demo").innerHTML = "The p element is being dragged";
}

/* Events fired on the drop target */
function allowDrop(event) {
event.preventDefault();
}

function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped";
}
</script>

<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>

<style>
#flying {
position: fixed;
}
</style>


<script type="text/javascript">
function UpdateFlyingObj (event) {
var mouseX = Math.round (event.clientX);
var mouseY = Math.round (event.clientY);

var flyingObj = document.getElementById ("flying");
flyingObj.style.left = mouseX + "px";
flyingObj.style.top = mouseY + "px";

}
</script>
<script type="text/javascript" src="index.js"></script>

</head>
<body onmousemove="UpdateFlyingObj (event);" onload="cambiodiv()" onunload="window.alert('Abandonó la página')">

<img id="flying" src="huellas.gif" />
<a name="arriba"></a>
<div id="menu" >
<h1 class="nombre">Melani</h1>

<div id="contenedor">
<div id="menu1">
<ul>
<a href="#uno" title="Ir Arriba"><li>Ejercicio uno</li></a>
<p></p>
<a href="#dos" title="Ir Arriba"><li>Ejercicio dos</li></a>
<p></p>
<a href="#tres" title="Ir Arriba"><li>Ejercicio tres</li></a>
<p></p>
<a href="#cuatro" title="Ir Arriba"><li>Ejercicio cuatro</li></a>
</ul>

</div>
<div id="menu2">
<ul>
<a href="#nueve" title="Ir Arriba"><li>Ejercicio nueve</li></a>
<p></p>
<a href="#diez" title="Ir Arriba"><li>Ejercicio diez</li></a>
<p></p>
<a href="#once" title="Ir Arriba"><li>Ejercicio once</li></a>
<p></p>
<a href="#doce" title="Ir Arriba"><li>Ejercicio doce</li></a>
</ul>
</div>
<div id="menu1">
<ul>
<a href="#cinco" title="Ir Arriba"><li>Ejercicio cinco</li></a>
<p></p>
<a href="#seis" title="Ir Arriba"><li>Ejercicio seis</li></a>
<p></p>
<a href="#siete" title="Ir Arriba"><li>Ejercicio siete</li></a>
<p></p>
<a href="#ocho" title="Ir Arriba"><li>Ejercicio ocho</li></a>
</ul>

</div>
<div id="menu2">
<ul>
<a href="#trece" title="Ir Arriba"><li>Ejercicio trece</li></a>
<p></p>
<a href="#catorce" title="Ir Arriba"><li>Ejercicio catorce</li></a>
<p></p>
<a href="#quince" title="Ir Arriba"><li>Ejercicio quince</li></a>
<p></p>
<a href="#dieciseis" title="Ir Arriba"><li>Ejercicio dieciseis</li></a>
</ul>
</div>

</div>

<a name="uno"><h1>Ejercicio uno </h1></a>

<div id="menu1">

<form id="formu" name="formulariouno">
<table width="200" border="0">
<tr>
<td colspan="2"><div align="center">Elige tu color favorito y escribe sobre él</div>
<div align="center"></div></td>
<td width="180" rowspan="5"><div align="center"><textarea name="minombreestexto" id="editores" value="" rows="5" cols="21" wrap="soft"onKeyDown="cuentame123()" onKeyUp="cuentame123()" onfocus="window.alert('Hiciste click en el texto')" onblur="cambiacolor234()"></textarea></div><div align="center"></div><div align="center"></div><div align="center"></div></td>
</tr>
<tr>
<td width="122"><div align="center"><img id="coloruno" name="uncolor" src="rosa.jpg" alt="color rosa" onClick="cambiaborde1()"value="#A9F5F2" border="3px" /></div></td>
<td width="135"><div align="center"><img src="azul.jpg" alt="color azul" onClick="cambiaborde2()" /></div></td>
</tr>
<tr>
<td colspan="2"><div align="center"></div> <div align="center"></div></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input type="text" name="nopulses" value="0" disabled/></div><div align="center"></div></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input type="text" name="color" value="#FA5858" /></div><div align="center"></div></td>
</tr>
</table>
</form>

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

HTML

form id="formu" name="formulariouno">
table width="200" border="0">
tr>
td colspan="2">div align="center">Elige tu color favorito y escribe sobre él/div>
div align="center">/div>/td>
td width="180" rowspan="5">div align="center">textarea name="minombreestexto" id="editores" value="" rows="5" cols="21" wrap="soft"onKeyDown="cuentame123()" onKeyUp="cuentame123()" onfocus="window.alert('Hiciste click en el texto')" onblur="cambiacolor234()">/textarea>/div>div align="center">/div>div align="center">/div>div align="center">/div>/td>
/tr>
tr>
td width="122">div align="center">img id="coloruno" name="uncolor" src="rosa.jpg" alt="color rosa" onClick="cambiaborde1()"value="#A9F5F2" border="3px" />/div>/td>
td width="135">div align="center">img src="azul.jpg" alt="color azul" onClick="cambiaborde2()" />/div>/td>
/tr>
tr>
td colspan="2">div align="center">/div>div align="center">/div>/td>
/tr>
tr>
td colspan="2">div align="center">input type="text" name="nopulses" value="0" disabled/>/div>div align="center">/div>/td>
/tr>
tr>
td colspan="2">div align="center">input type="text" name="color" value="#FA5858" />/div>div align="center">/div>/td>
/tr>
/table>
/form>

JS

function cuentame123()
{

//Con esto y gracias al onKeyDown y al onKeyUp podremos contar cada vez que se escriba un caracter

formulariouno.nopulses.value = formulariouno.minombreestexto.value.length

}

function cambiacolor234()

{

//Cuando dejemos de hacer click en el texto, se cambiará el color del textarea
//También puedes escribir en la caja de texto donde está escrito el código de color, para cambiarlo manualmente

document.getElementById('editores').style.background=formulariouno.color.value

}

function cambiaborde1()
{

document.getElementById('formu').style.background='pink'

}

function cambiaborde2()
{

document.getElementById('formu').style.background='aquamarine'

}

</textarea>
</form>

</div>

<a name="dos"><h1>Ejercicio dos</h1></a>

<div id="menu1" onmouseout="colordenuevo()">
<input type="button" value="Púlsame" onmousedown="fondonuevo()" />
<input type="button" id="nuevoboton" value="No pulses" onmouseover="botonnuevo()" />

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Saltando</p>
</div>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

HTML

div id="menu1" onmouseout="colordenuevo()">
input type="button" value="Púlsame" onmousedown="fondonuevo()" />
input type="button" id="nuevoboton" value="No pulses" onmouseover="botonnuevo()" />

/div>

JS

function cambiodiv()
{
window.alert("Bienvenido")
document.body.style.backgroundColor= "orange"; document.body.style.backgroundImage='none'
}

function fondonuevo()
{

document.body.style.backgroundColor= "purple"; document.body.style.backgroundImage='none'
}

function botonnuevo()
{
document.getElementById('nuevoboton').style.backgroundColor='red'
}

function colordenuevo()
{
document.getElementById('nuevoboton').style.backgroundColor='green'
}

</textarea>
</form>
</div>
<a name="tres"><h1>Ejercicio tres</h1></a>

<div id="menu1">

<img src="fondogatos.png" alt="imagen que nunca cargará" onerror="window.alert('Lo sentimos,su imagen no cargó')"/>
<span id="info" style="color:red">The image is loading.</span>
<br /><br />
<span id="esc">Press the Escape key to abort the process.</span>
<br /><br />
<img src="fde.bmp" width="200px" height="150px"
onabort="OnAbortImage ()" onload="OnLoadImage ()" onreadystatechange="OnStateChangeImage (this)" />

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

HTML

style>
#flying {
position: fixed;
}
/style>


script type="text/javascript">
function UpdateFlyingObj (event) {
var mouseX = Math.round (event.clientX);
var mouseY = Math.round (event.clientY);

var flyingObj = document.getElementById ("flying");
flyingObj.style.left = mouseX + "px";
flyingObj.style.top = mouseY + "px";

}
/script>
script type="text/javascript" src="index.js">/script>

/head>
body onmousemove="UpdateFlyingObj (event);" onload="cambiodiv()">

img id="flying" src="huellas.gif" />





JS


// Internet Explorer specific
function OnAbortImage () {
var info = document.getElementById ("info");
info.innerHTML += "br />The loading of the image has been aborted.";
RemoveEsc ();
}

function OnLoadImage () {
var info = document.getElementById ("info");
info.innerHTML += "br />The image has been loaded.";
RemoveEsc ();
}

// Internet Explorer specific
function OnStateChangeImage (image) {
var info = document.getElementById ("info");
info.innerHTML += "br />readyState: " + image.readyState;
}

function RemoveEsc () {
var esc = document.getElementById ("esc");
esc.parentNode.removeChild (esc);
}

</textarea>
</form>
</div>

<a name="cuatro"><h1>Ejercicio cuatro</h1></a>

<div id="menu1">

<form name="misuperformu" onsubmit="window.alert('Tu formulario fué enviado')" onreset="window.alert('Tu formulario se reseteará')">
<table width="200" border="0">
<tr>
<td colspan="3"><div align="center">Formulario</div> <div align="center"></div> <div align="center"></div></td>
</tr>
<tr>
<td width="181"><div align="center">Nombre</div></td>
<td colspan="2"><div align="center"><input type="text" name="color" id="demo" onkeypress="rojo1()" onchange="window.alert('tu color ha cambiado')" value="Escribe tu nombre aqui" /></div> <div align="center"></div></td>
</tr>
<tr>
<td><div align="center">Apellidos</div></td>
<td colspan="2"><div align="center"><input type="text" name="color" id="demo2" value="Escribe tus apellidos aqui" onselect="nino()" /></div> <div align="center"></div></td>
</tr>
<tr>
<td><div align="center">Edad</div></td>
<td width="127"><div align="center"><input type="text" name="color" id="demo3" onselect="nino2()" value="Tu edad" /></div></td>
<td width="129"><div align="center"></div></td>
</tr>
<tr>
<td><div align="center"><input type="button" id="nue" value="Púlsame" onmouseup="mevoy()" /></div></td>
<td><div align="center"><input type="submit" value="Enviar" /></div></td>
<td><div align="center"><input type="button" value="Reset" onClick="misuperformu.reset()" /></div></td>
</tr>
</table>


</form>

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

HTML

form name="misuperformu" onsubmit="window.alert('Tu formulario fué enviado')" onreset="window.alert('Tu formulario se reseteará')">
table width="200" border="0">
tr>
td colspan="3">div align="center">Formulario/div>div align="center">/div>div align="center">/div>/td>
/tr>
tr>
td width="181">div align="center">Nombre/div>/td>
td colspan="2">div align="center">input type="text" name="color" id="demo" onkeypress="rojo1()" onchange="window.alert('tu color ha cambiado')" value="Escribe tu nombre aqui" />/div>div align="center">/div>/td>
/tr>
tr>
td>div align="center">Apellidos/div>/td>
td colspan="2">div align="center">input type="text" name="color" id="demo2" value="Escribe tus apellidos aqui" onselect="nino()" />/div>div align="center">/div>/td>
/tr>
tr>
td>div align="center">Edad/div>/td>
td width="127">div align="center">input type="text" name="color" id="demo3" onselect="nino2()" value="Tu edad" />/div>/td>
td width="129">div align="center">/div>/td>
/tr>
tr>
td>div align="center">input type="button" id="nue" value="Púlsame" onmouseup="mevoy()" />/div>/td>
td>div align="center">input type="submit" value="Enviar" />/div>/td>
td>div align="center">input type="button" value="Reset" onClick="misuperformu.reset()" />/div>/td>
/tr>
/table>

JS

function nino()
{

document.getElementById("demo2").style.backgroundColor = "yellow";
}

function rojo1()
{
document.getElementById("demo").style.backgroundColor = "red";
}

function nino2()
{

document.getElementById("demo3").style.backgroundColor = "green";
}


function mevoy()
{

document.getElementById("nue").style.backgroundColor = "pink";

}

</textarea>
</form>
</div>

<a name="cinco"><h1>Ejercicio cinco</h1></a>

<div id="menu1">

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

</textarea>
</form>
</div>

<a name="seis"><h1>Ejercicio seis</h1></a>

<div id="menu1">

<form name="cajas">

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

</textarea>
</form>

</div>

<a name="siete"><h1>Ejercicio siete</h1></a>

<div id="menu1">

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

</textarea>
</form>
</div>

<a name="ocho"><h1>Ejercicio ocho</h1></a>

<div id="fondos1" class="menu1">

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

</textarea>
</form>
</div>

<a name="nueve"><h1>Ejercicio nueve</h1></a>

<div id="menu1">

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

</textarea>
</form>
</div>

<a name="diez"><h1>Ejercicio diez</h1></a>

<div id="menu1">

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

</textarea>
</form>
</div>

<a name="once"><h1>Ejercicio once</h1></a>

<div id="menu1">

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

</textarea>
</form>

</div>

<a name="doce"><h1>Ejercicio doce</h1></a>

<div id="menu1">

</div>

<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">

</textarea>
</form>
</div>

<a name="trece"><h1>Ejercicio trece</h1></a>

<div id="menu1">

</div>

<div id="menu2">

</div>

<a name="catorce"><h1>Ejercicio catorce</h1></a>

<div id="menu1">

</div>

<div id="menu2">

</div>

<a name="quince"><h1>Ejercicio quince</h1></a>

<div id="menu1">

</div>

<div id="menu2">

</div>

<a name="dieciseis"><h1>Ejercicio dieciseis</h1></a>

<div id="menu1">

</div>

<div id="menu2">

</div>
</div>
<a class="ir" href="#arriba"><img src="gato.gif"/></a>
</body>
</html>

Diario IFCD0110 Castro Urdiales

menu desplegable

viernes, 9 de enero de 2015

EJERCICIOS JAVASCRIPT

JS

CSS

HTML

analytics