Ir a la home de Terra
 
 Argentina
Mi RegistroContactoTerra, tu página de inicioAviso legal Política de Privacidad  
 › Terra › Tecnología

 Buscar en el canal




 Newsletters
Usuario:
Password:
Reciba en su correo:

› Noticias, informes, tutoriales y recomen-daciones (viernes)

› Los mejores downloads (lunes)


 Otras coberturas
› Fotolog Actualidad
Las fotos más impactantes. Dejá tus comentarios.


Que tu celular suene como vos. Cumbia. Pop. Dance. Música de películas y de la TV. Rock. Clásicos de clásicos.



Buenos Aires, 29 de diciembre de 2000 - 19:43 hs.
Última actualización 00:05

Curso de JavaScript
3- Cómo ver el código de una página y reutilizarlo


Una de las mejores cosas que tiene JavaScript es la posibilidad de sacar los scripts que están funcionando en una página web y adecuarlos a nuestro site. Para eso, primero tendrías que saber como ver el código de la pagina web. Es muy fácil: cargando la dirección deseada, te posicionás con el mouse por el navegador sin estar posado sobre una foto o un link y tocas el botón derecho.

Dependiendo del navegador que tengas, tendrías que presionar "View Source", "Show Code", "Mostrar el Código" o "Ver Código" para que se te abra el Notepad con el código fuente.

Luego, localizando las etiquetas antes mencionadas podemos ir sacando los scripts <script languaje = "javascript"> hasta </script> y pegarlos en tu documento en el mismo lugar donde lo encontraste, dentro del <body> o dentro del <head>.

Hay que tener en cuenta que no solo hay que sacar los scripts que estén contenidos dentro del tag antes mencionado. También, como vimos en el ejemplo, hay que extraer el código JavaScript que esté dentro de las imágenes y links, o de cualquier evento que veamos dentro del HTML.

Por ejemplo, los que están en las fotos, como este:
<img scr="hola.gif" onclick="llamarafuncion();">
Todo lo que está después de "onclick" lo vamos a tener que llevar a nuestra página ya que indica cuando se llama a determinado proceso. En este caso cuando se presione sobre la foto, se va a ejecutar la función "llamarafuncion".

Ejemplo 1:

Presionen aquí para ver el ejemplo


<html>
<head>
<title>Ejemplo 1</title>
</head>
<body>
<script languaje="Javascript">
<!--
document.write ("Este es el tutorial de javascript");
//-- >
</script>
<br>
<a href="javascript:alert('Este es el tutorial de javascript')">Presióname</a>
</body>
</html>

En el primer ejemplo podemos ver que en medio de las etiquetas <script> tenemos una instrucción Javascript "document.write("texto")". Esto lo que hace es imprimir texto dentro del HTML. Mas adelante nos va a servir para agregar condiciones y que escriba alguna palabra dependiendo de ese requisito.

Abajo hay un link con una instrucción en el 'alert("texto")'. Esta abrirá una pequeña pantalla con el texto que nosotros queramos poner.

Ejemplo 2:

Presionen aquí para ver el ejemplo

<html>
<head>
<title>Ejemplo 2</title>
</head>
<body onload="alert('Presiona el boton');">
<script languaje="Javascript">
<!--
document.write ("Este es el segundo Ejemplo");
//-- >
</script>
<br>
<input type="button" value="Toca acá" onclick="window.status = 'Mira donde podes escribir ! ! ! ! ! ! ! !';">
</body>
</html>

Este segundo ejemplo es una página que al iniciarse muestra un cartel diciendo "Presioná el boton". Esta instrucción se va a ejecutar apenas se cargue la pagina porque está puesta dentro de la etiqueta <body> con el evento onload (Cuando cargue).

Después tenemos un script igual al del ejemplo 1 que simplemente escribe un texto. Bajando un poco, vemos un botón que al ser presionado va a modificar la barra de status.

Sintaxis de status:
window.status = mensaje
El mensaje puede ser una variable, una concatenación de caracteres o simplemente un texto.

Ejemplo 3:

Presionen aquí para ver el ejemplo


<html>
<head>
<title>Ejemplo 3</title>
</head>
<body onload="alert('Escribi el nombre en el Text Box');">
<script languaje="Javascript">
<!--
document.write ('Este es el tercer Ejemplo');
//-->
</script>
<br>
<form name="nombreform" onsubmit="alert('Hola '+window.document.nombreform.nombretext.value)">
Nombre<input type="text" name="nombretext">
<input type="submit" value="Ver">
</form>
</body>
</html>

Este último ejemplo es un poco más complicado. En primer lugar repite lo del anterior mostrando un cartel al cargar la página. Después imprimimos un texto con "document.write".

Algunas líneas mas abajo se abre un formulario con el evento "onsubmit", este se va a correr cuando apretemos el botón de submit, que seríaa el botón "Ver". Al clickear el texto que escribimos en el textbox, se ejecuta la función alert que tiene una concatenación (unión de caracteres) de la palabra "Hola", luego está el símbolo + que usamos para unir palabras, seguido por una escalera de nombres que llegan al valor del textbox.

Si nos fijamos en esta instrucción vemos que es muy fácil: "window.document.nombreform.nombretext.value". Primero llamamos a la ventana donde estamos (window) después al documento (document) mas tarde al formulario (nombreform) y finalmente al textbox(nombretext). Ahora al método del textbox "values" y ya tenemos el valor incorporado.



Próxima página » Primera Parte: Cómo hacer sitios interactivos




Terra




 Comentarios publicados
Los mensajes publicados por los usuarios no sufren revisión ortográfica o de redacción alguna. Ver reglamento de aprobación.
Mensajes publicados en esta nota: 6
tengo que admitirlo,e aprendido script que no sabi...(elver)
Bueno el tutorial pero muy corto seria bueno que a...(Christian)
me gusta cómo explican los detalles en su tutorial...(jiki roble)
Muy bueno. (Rodrigo)
Gracias a esta pagina me ha ayudado a aprender com...(toyinks)
gracias tengo que darle a esta gente que permite ...(Fabián)
   

Espacio de publicidad


Partes de esta nota
I. Primera Parte: Cómo hacer sitios interactivos
I. 1-Java y JavaScript: Parecidos pero diferentes
I. 2- Cómo insertar código JavaScript
I. 3- Cómo ver el código de una página y reutilizarlo

 Blogs
› Criminal Blog
Casos policiales + investigaciones especiales.

› Dr. Dinero
Ahorros, inversiones, compras y ventas.


 » Terra en otros países » Aviso Legal | Política de Privacidad | Prohibida su reproducción total o parcial © Copyright 2010,Terra Networks, S.A.
  Newsletters | Publicidad | Registro de usuarios | Contactanos | Terra RSS