Algunos ejemplos básicos

Aquí encontraras las cosas básicas que se pueden hacer en JavaScript.

1. Escribir algo en documento actual

Lo primero que aprenderemos a hacer sera escribir algo en el documento actual. Para esto usaremos el método write del objeto document. Mas adelante hablare de algunos otros métodos de este mismo objeto como son: clear, close, open y writeln.

document.write("Texto");

Además de un texto, también se pueden mostrar variables, resultados de funciones, etc. Recuerda que basta introducir el código en el lugar que quieres que aparezca el texto sobre tu pagina.

<Script>
   document.write ("Hola que tal...");
</Script>

El gran problema es que sobreescribira todo el documento por lo que no resulta nada practico.

<A HREF=""  onClick="window.open('js110a.htm','','width=300,height=200');">Ejemplo 1</A>

Pulsa para ver el efecto del

2. Escribir algo en un nuevo documento

Ahora usaremos el mismo ejemplo anterior pero lo mostraremos en un nuevo documento, que sera abierto en una nueva ventana. Para esto usaremos el método open del objeto window cuya sintaxis es:

[ventana=]window.open('URL','nombre',['características'])

Parámetros usados
ParámetroDescripción
ventanaNombre de la nueva ventana (opcional)
URL_black|_parent|_self|_top|nombre
nombreNombre para referirse a la ventana en los atributos
característicasSon todos opcionales:
width
Ancho en px de la ventana (min 100)
height
Alto en px de la ventana (min 100)
resizable
yes|no|1|0 (solo IE)
scrollbars
yes|no|1|0
fullscreen
yes|no|1|0 (solo IE)
status
yes|no|1|0
menubar
yes|no|1|0
toolbar
yes|no|1|0 (solo IE+Firefox)
titlebar
yes|no|1|0
location
yes|no|1|0 (solo Opera)
channelmode
yes|no|1|0 (solo IE)
top
Distancia en px (>0)
left
Distancia en px (>0)

Te en cuenta que las caractericas deben estar separadas por coma y todas juntas deben estar entre comillas.

Para dispara la apertura de esta ventana usamos el evento onClick del objeto link, con la siguiente sintaxis:

<A HREF=""  onClick="window.open('js110b.htm','','width=400,height=200');">Ejemplo 2</A>

Pulsa para ver el efecto del

3. Mostrar el resultado de una función de usuario

Primero creamos una función de usuario y le asignamos parámetros y luego mostramos el resultado de dicha función usando el método write del objeto document y añadiendo algunas de sus propiedades.

<HTML>
<HEAD>
   <TITLE>Ejemplo 3</TITLE>
</HEAD>

<BODY>
<SCRIPT>
   function Suma(a,b) {
      return a+b;
   }
   document.write("La suma de 4+7 es = ".fontcolor('red'),Suma(4,7));
</SCRIPT>
<button onClick="window.close()">Regresar</button>
</BODY>
</HTML>

En esta pagina usamos la siguiente sintaxis.

<Button onClick="window.open('js110c.htm','','width=400,height=200,resizable=yes');">Ejemplo 3</Button>

Pulsa para ver el efecto del

Nota ademas que active resizable en esta ventana.

4. Escribir algo en pantalla

En este ejemplo usaremos la propiedad link del objetos document para hacer un enlace desde esta nueva ventana.

<SCRIPT>
   <!-- esconder código
   document.write("Si estas interesado en aprender los etiquetas HTML consulta " + "mi manual".link("http://www.uap.edu.pe/samples/demo/demo.htm").big())

   // Fin esconder -->
</SCRIPT>

Pulsa para ver el efecto del Ejemplo 4

Nota ademas que active status en esta ventana.

5. Función que convierte Decimal en Hexadecimal

Pulsa para ver el efecto del Ejemplo 5

Ademas que active toolbar en esta ventana.

6. Hora coordinada universal

<Script>
		<!-- esconder codigo
		function Dime() {
			var fecha = new Date(document.lastModified);
			var laHora = Hoy.getHours();
			var Diferencia = (Hoy.getTimezoneOffset() / 60);
			laHora -= Diferencia;
			if (Hoy > 23)  {laHora -= 24 }
			document.write(laHora + " horas, " + Hoy.getMinutes() + " minutos");
			window.setTimeout("Dime();", 60000);
		}
		// Fin esconder -->
	</SCRIPT>
</HEAD>

<BODY>
<SCRIPT>
	<!-- llama a la funcion
	Dime();
</SCRIPT>
</BODY>
</HTML>

Pulsa para ver el efecto del

Ademas que active menubar en esta ventana.