Bienvenidos sean a este post, hoy veremos un atributo del tag bastante particular.
Esta particularidad que nos permite el tag script es que podamos cargar un archivo con todas las funciones de javascript por fuera de este, esto lo hace atraves del atributo src, veamos como es su sintaxis:
<html>
<head>
<title>Atributo src</title>
<script src="file.js"></script>
</head>
<body>
<button type="button" id="boton1" onclick="ejecutar(this.id)">Ejecutar</button><br>
<button type="button" id="boton2" onclick="cambiar(this.id)">Nombre</button><br>
<input type="text" id="texto" value="">
<button type="button" onclick="ir(document.getElementById('texto').value)">Go</button>
</body>
</html>
Este sera el cuerpo del HTML y es bastante simple veamos primero este tag:
<script src="file.js"></script>
Vean como tenemos solo este tag sin ningun codigo solo con la carga del archivo que contendra todo nuestro codigo, despues en el cuerpo tenemos tres botones, donde los dos primeros ejecutaran a una funcion llamada ejecutar y otra cambiar, de las cuales hablaremos en el proximo archivo, pero en ambos casos le pasamos el id de cada boton, por medio del this del cual hablamos en este post, pero en el ultimo boton tenemos un campo de texto para entrar una direccion URL y el boton para llamar a la funcion ir, a la cual le pasaremos como argumento el valor que esta en el campo de texto anterior, para ello usamos a getElementById del cual hablamos en este post, con esto mencionamos tres funciones para cada boton, pasemos al archivo JS y agreguemos el siguiente codigo:
file.js
function ejecutar(id)
{
alert("Este es el " + id);
}
function cambiar(id)
{
document.getElementById(id).innerHTML="Otro Nombre";
}
function ir(url)
{
if (url=="")
url = "tinchicus.com";
location.href="https://" + url;
}La primera funcion, ejecutar, sera la del primer boton y este recibira el id del boton, en este caso por medio de alert notificaremos el valor recibido, la segunda funcion (cambiar) por medio del id recibido lo buscara a traves de todo el documento o pagina a traves de getElementById y escribira en este gracias al metodo innerHTML otro titulo para el boton, y la ultima funcion sera la encargada de recibir una URL para redireccionar a otra pagina, pero en ella tenemos un condicional donde si el valor es en blanco procede a asignar un valor a la variable url, lo siguiente sera usar a location para ir a la direccion informada, ponemos el HTTPS porque el archivo sera ejecutado de forma local y necesitamos cambiar el protocolo para poder redireccionarnos a la nueva pagina, observen que todo esto seria el codigo que estaria contenido en el tag script y no es necesario nada mas alla de lo usual para poder utilizarlo en nuestra pagina, con todo esto comentado veamos como funciona mediante el siguiente video
Como pueden ver en el video todo funciono perfectamente y tal como lo detallamos anteriormente, si bien esta es una practica bastante habitual tampoco es obligatoria y muchas veces se adecuara a nuestras necesidades, en paginas simples se puede usar directamente en el codigo HTML, en varias paginas que necesitan acceder a la misma funcion desde distintas paginas haciendolo de esta forma podra resultar mas practica, pero como digo habitulamente eso queda al criterio de cada programador.
En resumen, hoy hemos visto al atributo src del tag script, que es, para que sirve, como se utiliza, despues vimos un ejemplo de como se genera y como se utiliza, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 