Ahora Aprender A Programar está en Facebook. Noticias, novedades y mucho más. Síguenos en Facebook
Mostrar Mensajes
Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.
Responde estas preguntas (mantén la consola activada para ver posibles mensajes de error):Antes de nada metemos en una variable los elementos que son radio buttons
a) ¿Qué código es el que hace posible que cuando se selecciona el radio button Sr aparezca la imagen caraHombre.jpg y que cuando se selecciona el radio button Sra aparezca la imagen caraMujer.jpg?
radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttonsDespués le añadimos un evento en caso de hacer click en cualquiera de los radio y llamamos a la funcion actualizarDatosfor(var i=0; i<elementosDelForm.length;i++) {
if (elementosDelForm[i].type == 'radio') {elementosDelForm[i].addEventListener("click", actualizarDatos);} for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButSelValue= radioButTrat[i].value;} }
if (radioButSelValue != ''){
if (radioButSelValue =='Sr.') {rutaImagen='http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/CU01179E_1_zps77ab9108.jpg?t=1412436617';} else {rutaImagen='http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/CU01179E_2_zpsf09ad002.jpg?t=1412436624';}
document.getElementById('encuadraImagen').innerHTML = '';
document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';
}b) ¿ radioButTrat es una variable global o local a una función? ¿Por qué?radioButTrat es una variable global, está definida en la función anónima que se carga cuando la página está abierta, y posteriormente es usada por la funcion actualizarDatos. En JavaScript es reconmendable definir las variables al principio del cuerpo de la función y preferibremente con ámbito global para posteriormente al manejar otras funciones no tener `problemas de ámbito (SCOPE).
c) ¿radioButTrat es una array o un objeto NodeList de tipo array-like? ¿El método length es aplicable a objetos de tipo array? ¿El método length es aplicable a objetos de tipo array-like?radioButTrar es una array de nodos que tienen como name='tratamiento'.El metodo getElementsByTagName() devuelve un node list. Un node list es una colecion de nodos array-like.
d) ¿Qué ocurre si tratas de aplicar el método push a radioButTrat? Escribe el código para ello. ¿Qué mensaje visualizas en la consola? Busca información y trata de explicar por qué ocurre esto.Nos da un error.
e) ¿Las imágenes son el fondo de un elemento HTML distinto de img o es el atributo source de un elemento img?
document.getElementById('encuadraImagen').innerHTML = '';
document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';
.........
<div id="encuadraImagen"><h1> ? </h1></div><br/>
Las imagenes son el fondo del elemento HTML con id='encuadraImagen', primero eliminamos el codigo innerHTMML interno a él y posteriormente asignamos una url con la imagen.f) ¿checkBoxSel es un array o un NodeList de tipo array-like?
var checkBoxSel = new Array();checkBoxSel se define como un array vacio.g) ¿Qué significa y para qué sirve este código: checkBoxSel||' --- ' ?Significa que si no tiene ningún valor asignado checkBoxSel coja el valor que se encuentra entre comillas en este caso ' --- '
h) ¿Y este otro: elementoCiudad.options[elementoCiudad.selectedIndex].text ?En este código elementoCiudad es la variable que hemos utilizado para asignar el elemento select.
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body { font-family: Helvetica, Arial, sans-serif;}
h2 { font-size: 1.5em;} h3 { font-size: 1.2em;}
div div {color:blue; margin:10px;}
</style>
<script type="text/javascript">
function cambiarDimensionFuente(size) { return function() { document.body.style.fontSize = size + 'px';};
}
function cambiarDimensionFuentebind(size) {
document.body.style.fontSize = size + 'px'
}
var size8 = cambiarDimensionFuente(8);
var size16 = cambiarDimensionFuente(16);
var size24 = cambiarDimensionFuente(24);
function setClicks(){
document.getElementById('fuente-8').onclick = size8;
document.getElementById('fuente-16').onclick = size16;
document.getElementById('fuente-24').onclick = size24;
document.getElementById('fuente-8_bind').onclick = cambiarDimensionFuentebind.bind('undefined',8);
document.getElementById('fuente-16_bind').onclick = cambiarDimensionFuentebind.bind('undefined',16);
document.getElementById('fuente-24_bind').onclick = cambiarDimensionFuentebind.bind('undefined',24);
}
</script></head>
<body onload="setClicks()">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div id ="fuente-8" > Poner texto a 8 </div> <div id ="fuente-16" > Poner texto a 16 </div>
<div id ="fuente-24" > Poner texto a 24 </div> </div>
<br/><br/><br/>
<h2>Esto lo hacemos con bind</h2>
<div>
<div id ="fuente-8_bind" > Poner texto a 8 </div>
<div id ="fuente-16_bind" > Poner texto a 16 </div>
<div id ="fuente-24_bind" > Poner texto a 24 </div>
<p>En las praderas de la estepa de la Tierra del Fuego suele hacer frío</p>
</div>
</body></html>
function conversor(toUnit, factor, offset, input) {
offset = offset || 0;
return [((offset+input)*factor).toFixed(2), toUnit].join(" ");
}
var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0);
var poundsToKg = conversor.bind(undefined, 'kg', 0.45460, 0);
var farenheitToCelsius = conversor.bind(undefined, 'gradosC',0.5556, -32);
alert(milesToKm(10));
alert(poundsToKg(2.5));
alert(farenheitToCelsius(98)); a) ¿Cuántas funciones ligadas (copias parametrizadas) de la función conversor se crean en este código?Se crean tres funciones ligadas.
b) ¿Qué es lo que devuelve la función conversor?conversor devuelve un string, que es la unión de los valores de un vector. Une los valores de un vector separandolos por un espacio.
c) ¿Qué objeto actúa como this en la función milesToKm?No actua ningun objeto como this, no nos hace falta trabajar directamente sobre el objeto en esta ocación .Si tuvieramos que trabajar o manipular un mismo objeto con la referencia a otra funcion pondriamos this en la primera posicion de la llamada de la función de referencia.
d) ¿Qué tarea cumple y con qué fórmula trabaja la función milesToKm?La función milesToKm trabaja con la referencia que se hace sobre la funcion conversor que es la que contiene la fórmula.
e) ¿Qué tarea cumple y con qué fórmula trabaja la función poundsToKg?Al igua que la funcion milesToKm esta funcion esta definida con una referencia sobre la funcion conversor que es la que realiza la operacion del calculo.
f) ¿Qué resultado devuelve milesToKm(10) y qué significa este resultado?El resultado es 16.09 kms, este resultado es la transformación de 10 millas a kilometros.
g) ¿Qué resultado devuelve poundsToKg(2.5) y qué significa este resultado?El resultado es 1.14 kg, este resultado es la forma de transformar la unidad de peso pound a kilogramos.
h) ¿Qué resultado devuelve farenheitToCelsius(98) y qué significa este resultado?El resultado es 36.67 grados centígrados, este es el resultado de transformar 98 grados farenheit a grados centigrados.
i) ¿Qué significado tiene la expresión offset = offset || 0;?Significa que si la variable offset no está declarada en la llamada de su función valdrá 0
j) ¿Cuál es la finalidad del uso de toFixed(2)?Redondear en dos decimales el resultado del cálculo.
k) ¿Por qué crees que se usa el parámetro offset en la función conversor?Se usa offset para que la fórmula sea más general y se pueda usar en diferentes cálculos.
l) Modifica el código para ampliar la información que se nos muestra: introduce un parámetro fromUnit en la función conversor de modo que el resultado nos informe del dato de origen, sus unidades, y el dato convertido y sus unidades.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function conversor(toUnit, factor, offset, fromUnit, input) {
offset = offset || 0;
return [((offset+input)*factor).toFixed(2), toUnit].join(" ");
}
var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0, 'millas');
var poundsToKg = conversor.bind(undefined, 'kg', 0.45460, 0, 'pounds');
var farenheitToCelsius = conversor.bind(undefined, 'gradosC',0.5556, -32, 'farenheit');
alert(milesToKm(10));
alert(poundsToKg(2.5));
alert(farenheitToCelsius(98));
</script>
</head>
<body>
</body>
</html>
elementoHTML.addEventListener('click',cambiaColor(variable1,variable2))
....
....
....
function cambiaColor(evento,variable1,variable2){
....... }
y claro está, como se explica en el tema, me daba error. Yo pensaba que no se podría hacer, y me hacia pensar que era una cosa que le quitaba potencia a JavaScript. Pero con este tema todo ha quedado más claro. Crea un código HTML donde tengas un formulario con seis inputbox de texto que servirán para pedir al usuario Nombre, Apellidos, Correo electrónico, Teléfono, Domicilio y País. Crea el código JavaScript para que los elementos 1, 4, 7, 10 etc. del formulario tomen color de fondo amarillo cuando el usuario pulse sobre ellos. Los elementos 2, 5, 8, 11, etc. del formulario deberán tomar color de fondo azul claro cuando el usuario pulse sobre ellos. Los elementos 3, 6, 9, 12, 15, etc. del formularios deberán tomar color de fondo verde claro cuando el usuario pulse sobre ellos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label {
display:block;
margin:10px;
}
input{
margin-left:20px;
}
</style>
<script>
window.onload = function(){
formularios=document.forms;
for (var i=0;i<formularios.length;i++){
for (var j=0;j<formularios[i].elements.length;j++){
if (formularios[i].elements[j].type == 'text' && (j+1)%3 == 0){
formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'lightgreen',this)});
formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
}else if (formularios[i].elements[j].type == 'text' && (j+1 == 1) || (j+1)%3 == 1){
formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'yellow',this);});
formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
}else{
formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'aquamarine',this);});
formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
}
}
}
}
function cambiaColorFondo(evento,color,objeto){
objeto.style.backgroundColor = color;
}
function cambiaColorInicial(evento){
this.style.backgroundColor = 'white';
}
</script>
</head>
<body>
<form name='formularioContaco' id='formulario' method='get' >
<label>Nombre<input type='text' name='name' id='name'/></label>
<label>Apellidos<input type='text' name='surname' id='surname'/></label>
<label>Edad<input type='text' name='age' id='age'/></label>
<label>Direccion de correo<input type='text' name='email' id='email'/></label>
<label>Direccion<input type='text' name='adress' id='adress'/></label>
<label>Profesion<input type='text' name='job' id='job'/></label>
<label><input type='submit' id='botonEnvio' value='Enviar'/></label>
</form>
</body>
</html>Crea un script que recorra todos los elementos input dentro de cada uno de los formularios presentes y si son de tipo text, modifique su atributo asociado maxlength usando el método setAttribute de los objetos tipo Element para limitar a 8 el número máximo de caracteres que pueda introducir el usuario. Una vez modificado el atributo, muestra por pantalla el valor que tiene dicho atributo para todos los elementos de tipo input usando el método getAttribute.
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
label{
display:block;
margin:5px;
}
#ejemplo {
width: 300px;
height: 30px;
background-color:bisque;
border-radius:10px;
border : solid 2px black;
box-shadow: 10px 5px 3px;
position: absolute;
left: 400px;
cursor: pointer;
text-align:center;
line-height: 30px;
}
</style>
<script>
var formulario = document.forms;
window.onload = function (){
var boton = document.getElementById('ejemplo');
boton.addEventListener('click',manejo);
}
function manejo(){
asignarmaxLength();
mostrarmaxLength();
}
function asignarmaxLength(){
for (var i = 0;i<formulario.length;i++){
for (var j=0;j<formulario[i].elements.length;j++){
if (formulario[i].elements[j].type=='text'){
formulario[i].elements[j].setAttribute ('maxlength',8);
}
}
}
}
function mostrarmaxLength(){
msg = 'Hay '+formulario.length+' formularios';
for (var i = 0;i<formulario.length;i++){
msg += '\n El formulario '+(i+1)+' tiene los siguientes elementos: ';
for (var j=0;j<formulario[i].elements.length;j++){
if (formulario[i].elements[j].type == 'text'){
msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' con name '+formulario[i].elements[j].name+' su id es '+formulario[i].elements[j].id+' y su maxlength es de '+formulario[i].elements[j].maxLength+' caracteres';
// en caso de uso de getAttribute seria:
// formulario[i].elements[j].getAttribute('maxlength');
}else{
msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' su id es '+formulario[i].elements[j].id+' y no tiene definido el atributo maxlength';
}
}
}
alert (msg);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo"> setAttribute/getAttribute con maxLength</div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
<form name ="formularioReclamacion" method="get" action="accion2.html">
<h2>Formulario de reclamación</h2>
<label>Motivo reclamación:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body>
</html>Un uso habitual de JavaScript con formularios es usar JavaScript para validar que el contenido introducido por el usuarios sea válido. Crea un formulario que conste de cinco campos: nombre, apellidos, email, ciudad y país. Usando el evento onsubmit, realiza la validación para:
a) Comprobar que en el momento del envío ninguno de los campos tiene menos de dos caracteres (es decir, si está vacío, contiene una letra o dos letras se considerará no válido) accediendo a los campos mediante document.forms y elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label{
display:block;
margin:10px;
}
input{
margin:10px;
}
</style>
<script>
function validar(){
var envioFormulario = true;
var formulario = document.forms['formularioContacto'];
var expReg = /^\S{3,}$/;
var msg= 'Los elementos que no tienen almenos tres caracteres son:';
for (var i=0;i<formulario.elements.length-1;i++){
if (!expReg.test(formulario.elements[i].value)){
envioFormulario = false;
msg += '\n'+formulario.elements[i].name;
}
}
if (!envioFormulario){
alert (msg);
return false;
}else{
alert ('OK.Procedemos a enviar el formulario');
return true;
}
}
</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
<label>Nombre<input name="nombre" id="nombre"/></label>
<label>Apellidos<input name="apellidos" id="apellidos"/></label>
<label>Email<input name="email" id="email"/></label>
<label>Ciudad<input name="ciudad" id="ciudad"/></label>
<label>Pais<input name="pais" id="pais"/></label>
<label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>b) Igual que el apartado a) pero accediendo a los campos directamente usando el atributo name (por ejemplo formularioContacto.apellidos haría alusión a un elemento input cuyo atributo name es apellidos en un formulario cuyo atributo name es formularioContacto)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label{
display:block;
margin:10px;
}
input{
margin:10px;
}
</style>
<script>
function validar(){
var envioFormulario = true;
var formulario = document.forms['formularioContacto'];
var expReg = /^\S{3,}$/;
var msg= 'Los elementos que no tienen almenos tres caracteres son:';
if (!expReg.test(formulario.nombre.value)){
envioFormulario = false;
msg += '\n'+formulario.nombre.name;
}
if (!expReg.test(formulario.apellidos.value)){
envioFormulario = false;
msg += '\n'+formulario.apellidos.name;
}
if (!expReg.test(formulario.email.value)){
envioFormulario = false;
msg += '\n'+formulario.email.name;
}
if (!expReg.test(formulario.ciudad.value)){
envioFormulario = false;
msg += '\n'+formulario.ciudad.name;
}
if (!expReg.test(formulario.pais.value)){
envioFormulario = false;
msg += '\n'+formulario.pais.name;
}
if (!envioFormulario){
alert (msg);
return false;
}else{
alert ('OK.Procedemos a enviar el formulario');
return true;
}
}
</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
<label>Nombre<input name="nombre" id="nombre"/></label>
<label>Apellidos<input name="apellidos" id="apellidos"/></label>
<label>Email<input name="email" id="email"/></label>
<label>Ciudad<input name="ciudad" id="ciudad"/></label>
<label>Pais<input name="pais" id="pais"/></label>
<label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>
Un uso habitual de JavaScript con formularios es usar JavaScript para validar que el contenido introducido por el usuarios sea válido. Crea un formulario que conste de cinco campos: nombre, apellidos, email, ciudad y país. Usando el evento onsubmit, realiza la validación para:
a) Comprobar que en el momento del envío ninguno de los campos tiene menos de dos caracteres (es decir, si está vacío, contiene una letra o dos letras se considerará no válido) accediendo a los campos mediante document.forms y elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label{
display:block;
margin:10px;
}
input{
margin:10px;
}
</style>
<script>
var envioFormulario = true;
function validar(){
var formulario = document.forms['formularioContacto'];
var expReg = /^\S{3,}$/;
var msg= 'Los elementos que no tienen almenos tres caracteres son:';
for (var i=0;i<formulario.elements.length-1;i++){
if (!expReg.test(formulario.elements[i].value)){
envioFormulario = false;
msg += '\n'+formulario.elements[i].name;
}
}
if (!envioFormulario){
alert (msg);
return false;
}else{
alert ('OK.Procedemos a enviar el formulario');
return true;
}
}
</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
<label>Nombre<input name="nombre" id="nombre"/></label>
<label>Apellidos<input name="apellidos" id="apellidos"/></label>
<label>Email<input name="email" id="email"/></label>
<label>Ciudad<input name="ciudad" id="ciudad"/></label>
<label>Pais<input name="pais" id="pais"/></label>
<label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>b) Igual que el apartado a) pero accediendo a los campos directamente usando el atributo name (por ejemplo formularioContacto.apellidos haría alusión a un elemento input cuyo atributo name es apellidos en un formulario cuyo atributo name es formularioContacto)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label{
display:block;
margin:10px;
}
input{
margin:10px;
}
</style>
<script>
var envioFormulario = true;
function validar(){
var formulario = document.forms['formularioContacto'];
var expReg = /^\S{3,}$/;
var msg= 'Los elementos que no tienen almenos tres caracteres son:';
if (!expReg.test(formulario.nombre.value)){
envioFormulario = false;
msg += '\n'+formulario.nombre.name;
}
if (!expReg.test(formulario.apellidos.value)){
envioFormulario = false;
msg += '\n'+formulario.apellidos.name;
}
if (!expReg.test(formulario.email.value)){
envioFormulario = false;
msg += '\n'+formulario.email.name;
}
if (!expReg.test(formulario.ciudad.value)){
envioFormulario = false;
msg += '\n'+formulario.ciudad.name;
}
if (!expReg.test(formulario.pais.value)){
envioFormulario = false;
msg += '\n'+formulario.pais.name;
}
if (!envioFormulario){
alert (msg);
return false;
}else{
alert ('OK.Procedemos a enviar el formulario');
return true;
}
}
</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
<label>Nombre<input name="nombre" id="nombre"/></label>
<label>Apellidos<input name="apellidos" id="apellidos"/></label>
<label>Email<input name="email" id="email"/></label>
<label>Ciudad<input name="ciudad" id="ciudad"/></label>
<label>Pais<input name="pais" id="pais"/></label>
<label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>
El siguiente código nos sirve al mismo tiempo de ejemplo y de ejercicio. Ejecuta el código y comprueba sus resultados. Luego responde las preguntas y cuestiones que se plantean más abajo.
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
nuevaVentana.focus();
nuevaVentana.moveTo(0,positionY);
nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
start += 2;
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
</body>
</html>a) ¿Qué representa la variable start? ¿Qué significado tiene que su valor inicial sea cero?
b) ¿Qué representa la variable positionY? ¿Qué significado tiene que su valor inicial sea window.innerHeight/2-125 ?
c) ¿Con qué frecuencia (cada cuánto tiempo) se produce el refresco o redibujado de la pantalla?
d) ¿Cuántos píxeles se desplaza hacia la derecha la ventana en cada refresco de pantalla que realiza el navegador?
e) La base matemática del movimiento que describe la ventana es el movimiento ondulatorio. ¿Por qué la ventana sube y baja?
f) Modifica el código para que cuando la ventana llegue al lateral derecho de la pantalla se detenga su movimiento y aparezca un mensaje (alert) con el texto ¡Se terminó!
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
var llamada;
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
nuevaVentana.focus();
nuevaVentana.moveTo(0,positionY);
llamada = nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
start += 2;
if ((window.screen.availWidth-(250+(nuevaVentana.outerWidth-nuevaVentana.innerWidth))) >= start){
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
}else{
nuevaVentana.clearInterval(llamada);
alert ('Se terminó');
}
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
</body>
</html>g) Modifica el código para que cuando la ventana llegue al lateral derecho de la pantalla haga un efecto de “rebote” y empiece a moverse en sentido opuesto al que venía (es decir, subiendo y bajando pero ahora de derecha a izquierda), hasta llegar al lateral izquierdo y volver a rebotar, y así indefinidamente….
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
var llamada;
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
nuevaVentana.focus();
nuevaVentana.moveTo(0,positionY);
llamada = nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
if (start ==(window.screen.availWidth-(250+(nuevaVentana.outerWidth-nuevaVentana.innerWidth)))){
sentido = false;
}
if (start == 0){
sentido = true;
}
if (sentido == true){
start += 2;
}else{
start -= 2;
}
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
</body>
</html>Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.
Abraham Lincoln (1808-1865) Presidente estadounidense.
aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación
RSS -
WAP2