Introducción

Programas de Ejemplo

Enlace a manuales

Capítulos:

Capítulo I
Capítulo II

Enlaces relacionados:

BD de scripts

Aprende algo de Java Script

En el día de hoy, expatriado como estoy en Pekín, aburrido como una ostra, he decidido empezar a buscar información sobre Java Script, lenguaje de internet que me parece más sencillo y rápido que el Java normal y además se cuelga menos. A medida que vaya aprendiendo cosas las pondré en esta página para que no se me olviden. De momento toda la información la estoy encontrando aquí.

Ya sé que lo más didáctico sería empezar haciendo un manual. Pero como ya he encontrado algunos hechos y muy buenos, lo que haré será recopilar los programas más chulos que realizan los mejores efectos vistos en la web.

Aquí va lo básico para empezar. Instrucciones cortas que hacen cosas verdaderamente chulas y útiles.

1. Poner texto en la barra de navegación.

<script>
window.status="Bienvenido a mi página de inicio"
</script>

2. Pone el texto en la barra de navegación cuando pones el ratón encima de un Link y luego lo quita.

<a href="http://www.yahoo.com"
onMouseover="window.status='Pincha aquí para ir a Yahoo';return true"
onMouseout="window.status=''">Yahoo</a>

3. Poner la fecha de modificación de página

<script>
var modifieddate=document.lastModified
document.write(modifieddate)
</script>

4. Mostrar un cuadro de alerta cuando entras en una página.

<script>
alert("Hola amigo, gracias por acceder a mi página")
</script>

5. Mostrar una ventana de confirmación para saltar a una página.

<script>
var answer=confirm("¿Quieres ir a la página de Alex?")
if (answer)
window.location="http://webs.demasiado.com/alexredondo"
</script>

6. Ventana con pregunta.

Este ejemplo abre una ventana de diálogo que te pregunta tu nombre (un input) y te devuelve una ventana de alerta con una bienvenida personalizada con tu nombre.

<script>
var answer=prompt("Por favor, introduzca su nombre")
alert("Bienvenido amigo "+answer)
</script>

7. Botones que cambian.

Este ejemplo es el típico efecto chulo que cambia el botón (pasa de un gif a otro) cuando sitúas el ratón encima. Ojo con la variable, que establece qué imagen es la que cambia al situar el ratón encima. Siendo primero.gif el botón en su estado natural y segundo.gif cuando pones el ratón encima.

<a href="index.htm"
onMouseover="if (document.images) document.images.variable.src='segundo.gif'"
onMouseout="if (document.images) document.images.variable.src='primero.gif'">
<img src="primero.gif" name="variable" border=0></a>

8. Menu desplegable.

Esto lo que hace es poner un menú con una lista de direcciones y un botón al que debes pinchar para "ir" allí.

<form name="c1">
<p><select name="c2" size="1">
<option selected value="http://www.geocities.com">Geocities</option>
<option value="http://www.happypuppy.com">Happypuppy</option>
<option value="http://www.gamespot.com">Gamespot</option>
</select>
<input type="button" value="Go"
onClick="location=document.c1.c2.options
[document.c1.c2.selectedIndex].value"></p>
</form>

También, sin utilizar el java script, en código html se podia hacer lo mismo y es más fácil. La diferencia está en que con este ejemplo va directamente a la página solicitada sin tener que pinchar un botón.

9. El programilla.

Para concluir esta primera parte, pongo a continuación un ejemplo de un programa que pone un reloj en un campo y lo actualiza según el reloj de tu ordenador.

<form name="time">
<input type="text" name="time2" size=15>
</form>
<script>
function liveclock(){
var curdate=new Date()
var hours=curdate.getHours()
var minutes=curdate.getMinutes()
var seconds=curdate.getSeconds()
var suffix="AM"
if (hours>=12){
suffix="PM"
if (hours>=13)
hours-=12
}
if (minutes<10)
minutes="0"+minutes
if (seconds<10)
seconds="0"+seconds
var thetime=hours+":"+minutes+":"+seconds+" "+suffix
document.time.time2.value=thetime
setTimeout("liveclock()",1000)
}
liveclock()
</script>

Siguiente >>

Volver al menú