Buenas tardes. Subo una posible solución del ejercicio CU01184E del curso JavaScript desde cero.
EJERCICIO
Escribe este código en un editor y responde a las siguientes preguntas:
<!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)?
Void es un operador JavaScript que evalúa (ejecuta) la expresión que se le pasa como argumento y a continuación devuelve <<undefined>>. En este caso, javascript:void(0) ejecuta 0, que en realidad no tiene ningún efecto, y devuelve undefined. ¿Y qué significa esto? Pues lo mismo que href="javascript://", es decir, que simplemente se crea un link que no enlaza con ningún lado (o podríamos decir que enlaza con undefined, lo cual es enlazar con ningún lado).
b) Explica paso a paso qué es lo que hace el código JavaScript que se ha incluido como respuesta al evento click.
Primero se establece una condicional mediante el método "confirm()" al que si se cumple se ejecuta el código a continuación. La variable local f es referenciada a la creación de un formulario. Después se establece, para dicho formulario, un estilo de tipo 'none', es decir, que no será visible. Mediante la instrucción "this.parentNode.appendChild(f)" se incluye el formulario en el padre del elemento <a>, es decir, al <body>. Para el atributo method del fomulario se establece "post", para el atributo action se establece el mismo valor que tenía el elemento que recibe el evento. A través de la variable local "m" se crea un elemento tipo "input". Para este elemento se modifican los atributos "type" a "hidden", el "name" a "_method" y el "value" a "delete". Dicho elemento se incluye al formulario mediante la instrucción: "f.appendChild(m)".
La variable local "s" crea otro elemento "input". Para este elemento se modifican los atributos: "type" a "hidden", "name" a "authenticity_token" y "value" a "aprenderaprogramar.com=". También se incluye al formulario (f.appendChild(s)). Se envía el formulario con la instrucción: "f.submit()".
c) ¿Qué implica el uso de return false; en este código?
Impide el envío del formulario, cancela la acción (submit()) que está establecida por defecto a dicho método.
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 type="text/css">
span{
color: blue;
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
<span 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
</span>
</body>
</html>Gracias
Tema: Crear apariencia de link sin serlo con javascript:void(0) en JavaScript CU01184E (Leído 3549 veces)
RSS -
WAP2