Bienvenidos sean a este post, hoy nos centraremos en crear un ejemplo practico con algunas de las acciones mas habituales de una pagina web con algunos de los objetos anteriormente vistos, para este ejemplo usaremos los objetos:
- window
- location
- document
Y utilizaremos algunos de estos metodos propios del lenguaje:
- switch
- for
Y tambien aplicaremos el concepto de funciones, pasemos al codigo fuente para analizarlo luego:
<html>
<head>
<title>Pagina 01 con varios ejemplos.</title>
<script language="javascript">
<!--
function escribirCuerpo()
{
document.write("Mensaje de Prueba.<br>");
document.write("<a href=\"\" onClick=\"linkInterno();return false;\">"
+ "Ejemplo de Anchor</a><br>");
document.write("<a href=\"\" onClick=\"linkExterno();return false;\">"
+ "Ejemplo de Link</a><br>");
document.write("<a href=\"\" onClick=\"nvaVentana('uno');return false;\">"
+ "Nueva Ventana</a><br>");
document.write("<img src=\"https://tinchicus.files.wordpress.com/2018/05/c2.png?w=816\" width=\"230\" height=\"100\" border=\"0\"");
for(a=0;a<100;a++)
document.write("<br>");
document.write("<a id=\"1\" href=\"\" onClick=\"nvaVentana('dos');return false;\">Link interno :p</a>");
}
function linkInterno()
{
location.href="#1";
}
function linkExterno()
{
location.href="https://tinchicus.com";
}
function nvaVentana(A)
{
switch(A)
{
case "uno":
window.open("https://tinchicus.com","nueva","toolbar=no,"
+ "scrollbars=no,width=480,height=220,resizable=no,"
+ "location=no,alwaysRaised=yes, left=10, top=500");
break;
case "dos":
window.open("https://tinchicusplays.wordpress.com","nueva","");
break;
}
}
//-->
</script>
</head>
<body>
<script language="javascript">escribirCuerpo();</script>
</body>
</html>Antes de hablar sobre el javascript hablemos sobre el codigo HTML, tendremos los clasicos tags de HTML, HEAD, TITLE y BODY pero en BODY crearemos un tag de tipo SCRIPT donde llamaremos a la funcion escribirCuerpo, pasemos a hablar sobre el codigo Javascript, este sera un tag SCRIPT dentro de los tags HEAD, en el codigo en si tendremos varias funciones, analicemos la primera:
function escribirCuerpo()
{
document.write("Mensaje de Prueba.<br>");
document.write("<a href=\"\" onClick=\"linkInterno();return false;\">"
+ "Ejemplo de Anchor</a><br>");
document.write("<a href=\"\" onClick=\"linkExterno();return false;\">"
+ "Ejemplo de Link</a><br>");
document.write("<a href=\"\" onClick=\"nvaVentana('uno');return false;\">"
+ "Nueva Ventana</a><br>");
document.write("<img src=\"https://tinchicus.files.wordpress.com/2018/05/c2.png?w=816\" width=\"230\" height=\"100\" border=\"0\"");
for(a=0;a<100;a++)
document.write("<br>");
document.write("<a id=\"1\" href=\"\" onClick=\"nvaVentana('dos');return false;\">Link interno :p</a>");
}La primera funcion nombrada escribirCuerpo sera la que llamaremos luego en el tag BODY y sera la encargada de crear los elementos de la pagina, observen como usamos el objeto document y el metodo write donde escribiremos nuestro texto y le agregamos tags de HTML para hacer un salto de linea o para crear un link, tambien he utilizado algo que explique en otros lenguajes como los modificadores de texto, en general es un una contrabarra o backslash (\) y seguido de un caracter por ejemplo el \» simboliza la comilla, el \n simboliza un salto de linea, el \t simboliza al tabulador o tab, en fin les recomiendo este post donde muestro los mas generales, observen como en href no le asignamos nada y si para el evento onClick, hablaremos de este evento mas adelante pero basicamente solamente se encarga de interceptar la accion de pulsar sobre el enlace, en el primer caso llamara a linkInterno y luego lo sigue un return false, es decir devolvera un estado false y esto evitara que se use el link, la siguiente linea muestra otro mensaje en pantalla y el link es exactamente igual al descripto anteriormente pero en este lugar llamara a otra funcion, linkExterno, por ultimo tendremos otro texto con otro link que llamara a la funcion nvaVentana la cual enviara un dato, de esto hablaremos luego.
En el siguiente document.write utilizaremos el tag img para agregar una imagen, luego usaremos un bucle for donde agregaremos 100 tag de salto de linea en HTML, por ultimo escribiremos un anchor que lo identificaremos con un id de nombre 1, para finalmente agregar un evento onClick que llamara a la funcion nvaVentana y con otro valor, pasemos a la siguient funcion:
function linkInterno()
{
location.href="#1";
}En este caso usaremos al objeto location y modificaremos el href para que vaya a nuestro anchor que antes creamos, nuestra siguiente funcion sera:
function linkExterno()
{
location.href="https://tinchicus.com";
}Es similar a la anterior pero le diremos que vaya a una direccion de internet, veamos nuestra ultima funcion:
function nvaVentana(A)
{
switch(A)
{
case "uno":
window.open("https://tinchicus.com","nueva","toolbar=no,"
+ "scrollbars=no,width=480,height=220,resizable=no,"
+ "location=no,alwaysRaised=yes, left=10, top=500");
break;
case "dos":
window.open("https://tinchicusplays.wordpress.com","nueva","");
break;
}
}En esta funcion recibiremos un dato que almacenaremos en la variable A, despues usaremos un switch para chequear a esta variable, el primer case chequea si el valor es uno, en ese caso abrira una nueva ventana, la sintaxis es:
window.open(URL,NombreDeLaVentana,Modificadores)
Primero pondremos la direccion web que usaremos, luego le asignaremos el nombre a la ventana (ya veremos para que) y finalmente usaremos los siguientes modificadores:
- toolbar, lo usaremos para que no muestre esta barra
- scrollbars, lo usaremos para que no muestre las barras de scroll
- width, lo usamos para establecer el ancho de la nueva ventana
- height, establece la altura de la nueva ventana
- resizabe, no permitira cambiar el tamaño de la ventana
- location, lo usamos para que no muestra la barra de ubicacion
- alwaysRaised, para que este siempre arriba de las otras ventanas
- left, le diremos que posicion desde el borde izquierdo de la pantalla
- top, le diremos que posicion desde la parte superior de la pantalla
Antes de continuar con la funcion hablemos un poco sobre los modificadores, de los modificadores que usamos, scrollbars, location, resizable y alwaysRaised actualmente no funcionan por un tema de seguridad, left y top los usa para poder ubicarlos en una posicion mejor para grabarlos pero de paso vemos un ejemplo de como usarlo, en el siguiente case utilizaremos otra vez a window.open pero en este caso modificaremos la URL, utilizaremos el mismo nombre que en el case anterior pero la diferencia radicara en que no usaremos modificadores sino que aprovecharemos las ya utilizadas en el case anterior, veamos como quedo en el siguiente video
En el video podemos ver todas las acciones, como abrir una nueva ventana con contenido (Pop-up), hemos ido a una parte interna de la misma y hemos modificado el contenido de nuestra ventana emergente.
En resumen, hoy hemos visto algunos de los topicos mas usados en internet, hemos aplicado algunos de los objetos antes mencionados, tambien algunas funciones, hemos hecho el contenido de una pagina con Javascript, espero les haya sido util 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.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 