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.
<!-- Hay 3 formas de escribir JavaScript en un archivo HTML.
1 - Primera: Como texto con las etiquetas script-->
<script type="text/javascript"><!--
 alert("Hola mundo embebido en el fuente.");
// --></script>
<!-- 2 - Segunda: Como evento para una etiqueta -->
<p onclick="alert('Hola desde una etiqueta.');">Haga clic para que salude.</p>
<!-- 3 - Tercera: En un archivo separado-->
<script src="CodigoHola.js" type="text/javascript"></script>
 <!-- El archivo separado se llama CodigoHola.js y tiene el código:
 alert("Hola mundo desde un archivo."); en él-->
 
<!--Hay más funciones para interactuar con el temido usuario: -->
 <script type="text/javascript"><!--
 prompt("Pido datos"); confirm("Pido confirmación");
// --></script>

Podemos también usar variables:

<!--Uso de variables: Se declaran pero no necesitan un tipo de dato, 
éste es definido cuando se le asigna un valor a la variable..-->
<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)

 
<script src="codigo.js" type="text/javascript"></script> 
<!-- Cuando se cargue la página, ejecuta el evento onLoad del Body:--> 
 
<!-- Usar funciones:--> 
<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:

<script src="archivo.js" type="text/javascript"></script>
<h1>Acceso a datos de una página</h1>
<input id="txtDato" type="text" /> 
<input onclick="obtener()" type="button" value="Aceptar" />
<input id="txtRecibe" size="100" type="text" />

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é.";
}