Hola chicos adjunto mis soluciones a este tema (CU01184E del tutorial básico de programación web: JavaScript desde cero)
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
</head>
<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<a href="javascript:void(0);" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form');
f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input');
m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);
var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token');
s.setAttribute('value', 'aprenderaprogramar.com='); f.appendChild(s);f.submit(); };return false;">Pulsa aquí para proceder</a>
</body></html>a) ¿Para qué se utiliza aquí javascript: void(0)?
Aquí se utiliza para que la etiqueta a de HTML que enlaza a otra página web (en general) al recibir el evento click no se redireccione a ningún sitio y se ejecute el javascript que tenemos dentro de onclick.
b) Explica paso a paso qué es lo que hace el código JavaScript que se ha incluido como respuesta al evento click.
Inicialmente se espera una respuesa Aceptar/Cancelar a la pregunta 'Are you sure?'
Si pulsamos cancelar devuelve false no haria nada, al devolver false el evento anula la accion de href,aunque en este caso con la sentencia que tiene no se redireccionaba a ningun sitio.
var f = document.createElement('form'); crea la etiqueta de formulario
f.style.display = 'none'; // se le da el estilo de la etiqueta del form display:none, por lo que no se mostrará
this.parentNode.appendChild(f); //se añade el elemento form al codigo html a parentNode que era body
f.method = 'POST'; // se añade atributos a la etiqueta form, en este caso method='POST'
f.action = this.href; // se añade atributos a la etiqueta form, en este caso action='javascript:void(0)'(el mismo href de este elemento)
var m = document.createElement('input'); //creamos un elemento input
m.setAttribute('type', 'hidden');// definimos atributos del nuevo elemento y le indicamos que es invisible type=hydden
m.setAttribute('name', '_method'); // definimos atributo name='_method'
m.setAttribute('value', 'delete'); // denimos atributo value='delete'
f.appendChild(m); // añadimos el elemento input y lo insertamos como hujo de f
var s = document.createElement('input'); //creamos un elemento input
s.setAttribute('type', 'hidden'); // definimos atributos del nuevo elemento y le indicamos que es invisible type=hydden
s.setAttribute('name', 'authenticity_token'); // definimos name='authenticity_token'
s.setAttribute('value', 'aprenderaprogramar.com='); // definimos el atributo value=''aprenderaprogramar.com='
f.appendChild(s);// lo añadimos como hijo del form
f.submit(); //enviamos el formulario
};
c) ¿Qué implica el uso de return false; en este código?
el return false; es para que no se ejecute el href='' que tiene definido
d) Modifica el código para que la apariencia y resultados sean iguales pero sin usar un elemento <a> … </a>
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
p.url{
cursor:pointer;
color:blue;
text-decoration:underline;
}
</style>
<script>
window.onload = function(){
var formulario = document.getElementById('enlace').addEventListener('click',anyadir);
}
function anyadir(){
if (confirm('Are you sure?')) {
var f = document.createElement('form');
f.style.display = 'none';
this.parentNode.appendChild(f);
f.method = 'POST';
f.action = '';
var m = document.createElement('input');
m.setAttribute('type', 'hidden');
m.setAttribute('name', '_method');
m.setAttribute('value', 'delete');
f.appendChild(m);
var s = document.createElement('input');
s.setAttribute('type', 'hidden');
s.setAttribute('name', 'authenticity_token');
s.setAttribute('value', 'aprenderaprogramar.com=');
f.appendChild(s);f.submit(); };
return false;
}
</script>
</head>
<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<p class='url' id='enlace' >Pulsa aquí para proceder</p>
</body></html>Saludos!!
Tema: significado de javascript: void(0) para qué sirve dentro href ejemplo CU01184E# (Leído 5052 veces)
RSS -
WAP2