Introducción a JavaScript

Publicado el Domingo, 14 de octubre de 2007

En el curso de Hipermedia -por fín-, empezamos a PROGRAMAR! Ya terminamos la teoría de HTML y CSS, ahora arrancamos con JavaScript.
Acá están los ejemplos que usamos en clase. Dejo el código que hay que guardar en un archivo con extensión "htm" o "html" y probar los resultados. Los códigos en JavaScript se guardan en un archivo aparte con extensión "js", o se pueden escribir directo en el html dentro de los tags "<script type="text/javascript" language="javascript"></script>".

JavaScript tiene la sintaxis de Java, aunque es una versión recortada de todas sus clases. Sin embargo, se puede trabajar con Strings, Date, Math y Arrays, los operadores matemáticos, lógicos y de comparación, estructuras de control (for, while, switch-case, do-while) de Java y nos permite crear nuestros objetos.

JavaScript es un lenguaje de Scripts a nivel de cliente. Se ejecuta en el navegador.

<script type="text/javascript">
alert("Hola mundo embebido en el fuente.");
</script>

<p onclick="alert('Hola desde una etiqueta.');">Haga clic para que salude.</p>

<script src="CodigoHola.js" type="text/javascript"></script>

<script type="text/javascript">
prompt("Pido datos"); confirm("Pido confirmación");
</script>

Podemos también usar variables:

<script type="text/javascript">
var nombre, apellido, edad;
nombre = prompt("Ingrese su nombre");
apellido = prompt("Ingrese su apellido");
edad = prompt("Ingrese su edad");
alert("Tu nombre es " + nombre + " " + apellido + "\n" + "Tienes "+ edad);
</script>

Otro ejemplo de Javascript. En éste, hay distintos botones que acceden a eventos de un archivo externo de javascript (*.js)

<input onmouseover="hover()" type="button" value="Botón" />
<input onclick="nombre()" type="button" value="Te digo tu nombre" />
<input onmousemove="acercar()" type="button" value="No te me acerces..." />
<input onclick="escribir()" type="button" value="Escribir" />

Y el código de codigo.js sería:

// Función que se carga en el onLoad del body:
function cargar(){
alert("Se cargó la página");
}

// Función que uno ingresa, y te dice tu nombre
function nombre(){
var nombre = prompt("Decime cuál es tu nombre:");
alert("Hola " + nombre + ". \n ¿Todo bien?");
}

// Función cuando pasa encima del botón botón
function hover(){
alert("El cursor del mouse pasó por encima del botón.");
}

// Función paranoica
function acercar(){
alert("TE ACERCASTE!!");
}

// función para escribir en documentos, se puede incluír HTML en el
// document.write, y va a ser interpretado como HTML por el navegador:
function escribir(){
document.write("Esto es una página nueva. Hola ;");
}

El último ejemplo, para acceder a datos de una página con JavaScript. A través de las funciones también podemos manipular esos datos y volverlos a mostrar:

El código del archivo.js:

// document.getElementById(" ") - Permite acceder al objeto que tiene id=" "
function obtener(){
  var dato = document.getElementById("txtDato").value;
  document.getElementById("txtRecibe").value="Ingresaste '" +
  dato + "' en la casilla anterior. Invitame un café.";
}