Ejemplos en JavaScript

Algunos ejemplos de códigos sencillos de gran utilidad.

Vamos a ver una serie de efectos rápidos que se pueden programar con Javascript, lo que nos puede hacer una idea más clara de las capacidades y potencia del
lenguaje. A continuación veremos varios ejemplos, que hemos destacado para esta introducción en el Manual de Javascript, por tener un mínimo de
complejidad y aunque sean muy básicos, nos vendrán bien para tener una idea más exacta de lo que es Javascript .

1. Abrir una ventana secundaria

Primero vamos a ver que con una línea de Javascript podemos hacer cosas bastante atractivas. Por ejemplo podemos ver cómo abrir una ventana secundaria
sin barras de menús que muestre el buscador Google. El código sería el siguiente.

<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>

Podemos ver el ejemplo en marcha aquí.

2. Un mensaje de bienvenida
Podemos mostrar una caja de texto emergente al terminarse de cargar la portada de nuestro sitio web, que podría dar la bienvenida a los visitantes.

<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>

Puedes ver el ejemplo en una página a parte.

3. Fecha actual
Veamos ahora un sencillo script para mostrar la fecha de hoy. A veces es muy interesante mostrarla en las webs para dar un efecto de que la página está al "al
día", es decir, está actualizada.

<script> document.write(new Date()) </script>

Estas líneas deberían introducirse dentro del cuerpo de la página en el lugar donde queramos que aparezca la fecha de última actualización. Podemos ver el
ejemplo en marcha aquí.
Nota: Un detalle a destacar es que la fecha aparece en un formato un poco raro, indicando también la hora y otros atributos de la misma, pero ya aprenderemos a obtener exactamente lo que deseemos

en el formato correcto.

4.Botón de volver
Otro ejemplo rápido se puede ver a continuación. Se trata de un botón para volver hacia atrás, como el que tenemos en la barra de herramientas del
navegador. Ahora veremos una línea de código que mezcla HTML y Javascript para crear este botón que muestra la página anterior en el historial, si es que la
hubiera.

<input type=button value=Atrás onclick="history.go(-1)">

El botón sería parecido al siguiente. Podemos pulsarlo para ver su funcionamiento (debería llevarnos a la página anterior).

Como diferencia con los ejemplos anteriores, hay que destacar que en este caso la instrucción Javascript se encuentra dentro de un atributo de HTML, onclick,

que indica que esa instrucción se tiene que ejecutar como respuesta a la pulsación del botón.

Se ha podido comprobar la facilidad con la que se pueden realizar algunas acciones interesantes. Como podréis imaginar, existirían muchas otras muestras

sencillas de Javascript que nos reservamos para capítulos posteriores.

Si lo deseas, puedes ver cómo hemos desarrollado algunos de estos efectos rápidos Javascript paso por paso y en vídeo. En el siguiente artículo empezaremos

ya a hablar del propio lenguaje de programación Javascript.

6. Dar la fecha de hoy:

1
<script languaje=JavaScript> }

<!--

today = new Date hours = today.getHours()

day = today.getDay() minutes = today.getMinutes()

if ( day == 0 ) { zerom = ''

document.write(""); zeroh = ''

} if ( minutes < 10 ) { zerom = 0 }

if ( day == 1 ) { if ( hours < 10 ) { zeroh = 0 }

document.write("");

} if ( today.getMonth() == 0 ) { month = "Enero" }

if ( day == 2 ) { if ( today.getMonth() == 1 ) { month = "Febrero" }

document.write(""); if ( today.getMonth() == 2 ) { month = "Marzo" }

} if ( today.getMonth() == 3 ) { month = "Abril" }

if ( day == 3 ) { if ( today.getMonth() == 4 ) { month = "Mayo" }

document.write(""); if ( today.getMonth() == 5 ) { month = "Junio" }

} if ( today.getMonth() == 6 ) { month = "Julio" }

if ( day == 4 ) { if ( today.getMonth() == 7 ) { month = "Agosto" }

document.write(""); if ( today.getMonth() == 8 ) { month = "Septiembre" }

} if ( today.getMonth() == 9 ) { month = "Octubre" }

if ( day == 5 ) { if ( today.getMonth() == 10 ) { month = "Noviembre" }

document.write(""); if ( today.getMonth() == 11 ) { month = "Diciembre" }

} document.write(today.getDate()," de ",month);

if ( day == 6 ) { // -->

document.write(""); </script>

7. CAMBIAR UNA IMAGEN POR OTRA AL PASAR EL RATON POR ENCIMA

Se puede hacer de 2 formas:

<img src="imagen_que_aparece_antes.jpg"

id="img"

onmouseover="img.src='imagen_que_aparece_despues.jpg'"

onmouseout="img.src='imagen_que_aparece_antes.jpg';">

Otra forma:

</SCRIPT>
2
</HEAD>
<BODY>
<H2>EJEMPLOS EN JAVASCRIPT </H2><BR>
<a href="http://www.lawebdelprogramador.com" onMouseOver="Cambia('enlace','img2')"
onMouseOut="Cambia('enlace','img1')"><img src="imagen1.gif" border=0 name="enlace">Enlace</a>
</BODY>
</HTML>
8. VALIDAR UN NÚMERO EN JAVASCRIPT (ENTRE 1 Y 10)
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript permite validar datos de entrada a un formulario</h1>
<p>Introduzca un numero entre 1 ay10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Tomar el valor de entrada en id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

9. Busca un ejemplo en JavaScript para visualizar un reloj digital en pantalla.

10. Busca un ejemplo en JavaScript para visualizar un calendario en la pagina web.

Mas ejemplos de JavaScript en:

http://www.uv.es/jac/guia/jscript/javascr.htm

http://recursostic.educacion.es/observatorio/web/gl/software/programacion/490-lorena-arranz

EFECTOS RAPIDOS CON JAVASCRIPT. EJEMPLOS: http://www.desarrolloweb.com/articulos/495.php

MANUAL PARA LOS ALUMNOS, RESUMIDO:

www.eartvic.net/cbatallerc/materials/TUTORIALS/javascript/Manual_de_JavaScript.pdf

Manual de Desarrollo web online: http://www.desarrolloweb.com/manuales/20/

http://www.manualdejavascript.com/ http://www.manualdejavascript.com/section/manualdejavascript/