Introducci贸n a javascript.
JavaScript es un lenguaje de programaci贸n lijero, interpretado, o compilado just-in-time con funciones de primera clase. Si bien es m谩s conocido como un lenguaje de scripting (secuencias de comandos) para p谩ginas web, es usado en muchos entornos fuera del navegador, tal como Node.js, Apache CouchDB y Adobe Acrobat.
JavaScript es un lenguaje de programaci贸n basado en prototipos, multi-paradigma, de un solo hilo, din谩mico, con soporte para programaci贸n orientada a objetos, imperativa y declarativa (por ejemplo programaci贸n funcional).
Este m贸dulo que empiezas est谩 dedicado al lenguaje JavaScript en s铆, y no a las partes que son espec铆ficas de las p谩ginas web u otros entornos host.
El est谩ndar para JavaScript es ECMAScript. A partir del 2012, todos los navegadores modernos soportan completamente ECMAScript 5.1. Los navegadores viejos soportan al menos ECMAScript 3. Desde el 17 deJunio de 2015, ECMA International publico la sexta versi贸n principal de ECMAScript, que oficialmente se llama ECMAScript 2015, y que inicialmente se denomin贸 ECMAScript 6 o ES6. Desde entonces, los est谩ndares ECMAScript est谩n en ciclos de lanzamiento anuales. Esta documentaci贸n hace referencia a la 煤ltima versi贸n preliminar, que actualmente es ECMAScript 2020.
No confunda JavaScript con el lenguaje de programaci贸n Java. Ambos Java y JavaScript son marcas o marcas registradas de Oracle en los Estados Unidos y otros pa铆ses. Sin embargo, los dos lenguajes de programaci贸n tiene sintaxis, sem谩ntica y usos muy diferentes.
Bien, vamos a empezar para no perder tiempo. Javascript puede, al igual que un documento CSS, cargarse en el propio documento en el que se encuentre o ejecutarse desde fuera del documento, llamandolo desde un atributo src.
En este curso vamos a empezar a incluir los script dentro del documento.
Primer programa.
Antes de empezar, 驴donde es mejor insertar el script de javascript?
Pues bien, cuando seas un programador experto (dentro de poco, espero), tendr谩s que desarrollar scripts de gran tama帽o y que llamen a varias funciones y procesos. Eso har谩 que afecte a la carga del documento si en lugar de llamarlo desde la cabecera lo llama desde el final del documento.
Pues si, es un error llamar o cargar scripts al inicio del documento, ya que el navegador no mostrar谩 el contenido de la p谩gina hasta que no se cargue o lea el script (cosas que ver谩s como solventar desde AJAX y la sincronizaci贸n de archivos). Asi que en archivos grandes, los incluiremos dentro del cuerpo del documento, pero al final antes del cierre del </body>
Primer programa.Cuando estudiaba en una academia privada el curso de MCSD App Builder para obtener la certificaci贸n de HTML5 y Javascript, el profesor nos pidi贸 el primer d铆a de clase que hiciesemos el siguiente ejercicio.
"Como es el primer d铆a del curso, vamos a crear un tablero de ajedrez en javascript. Solo el tablero. Cada cuadro del tablero tendra que tener un ancho y alto de 100px; y como siempre, por cada cuadrado blanco hay otro cuadrado negro. Y en total hay 64 cuadrados.驴Sabr铆as hacerlo?"
Es verdad que para ser el primer d铆a de clase, no era el mejor ejemplo, ya que para ello tienes que utilizar un bucle for anidado y darle un estilo con CSS lo cual a mi parecer, me parece una forma de ense帽ar mala pues si una habitaci贸n est谩 vacia no puedes pedir a alguien que le llene si no le das la llave para entrar en ella.
A煤n as铆 haciendo honor a ese mal profesor aqu铆 va el primer ejercicio de este m贸dulo.
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript">
function showChessBoard(){
//Incluye un tablero de ajedrez como 煤nico elemento de la p谩gina
var html = "<table border='1' cellspacing='0'>";
var index1=0, index2=0;
var odd=false;;
var backgroundColor ="";
var rowCounter=0;
var cellCounter=0;
//Generaci贸n de las filas
for (index1=1;index1<9; index1++)
{
html += "<tr>";
cellCounter = rowCounter;
//Generaci贸n de las columnas para cada una de las filas del tablero
for (index2=1;index2<9; index2++)
{
odd = ((cellCounter % 2) != 0);
backgroundColor = odd?"black":"white";
html += "<td><div style='width:100px;
height:100px;
background-color:"+ backgroundColor + "'>
</div></td>";
cellCounter++;
}
html +="</tr>";
rowCounter++;
}
html +="</table>";
document.write(html);
}
window.onload= showChessBoard;
</script>
</head>
<body></body>
</html>
Y el resultado lo puedes ver en la siguiente imagen.
Analizando el c贸digo anterior.
Vamos a analizar el anterior c贸digo. Para empezar el c贸digo se incluye dentro de la cabecera. Esto es factible porque la p谩gina se basa exclusivamente en el script y no existe m谩s contenido.
Las etiquetas que se van a utilizar en el script se tienen que declarar mediante la etiqueta <script> y se puede utilizar el atributo que designa el lenguaje.
NOTA: En las primeras versiones de los navegadores se sol铆a usar el atributo languaje porque estos usaban otros lenguajes de scripting como el VBScript de Microsoft, o lo Aplets de Java, entre otros. Hoy en d铆a no hace falta especificar el lenguaje en la etiqueta <script> porque por defecto los navegadores entienden por defecto que el lenguaje es el de Javascript.
Todo empieza con la funci贸n showChessBoard() que se crea seg煤n la sintasis que ves en el c贸digo es decir utilizando la instrucci贸n function().
Para empezar declaramos varias variables con la palabra var (de variable) seguida del nombre que la declaramos (identificador). Observa que no necesitamos establecer tampoco el tipo de variable que es ya que javascript es un lenguaje de programaci贸n no tipado (no hace falta declarar las variables).
Las 6 variables siguientes son necesarias para generar la estructura de la tabla. La primera de ellas, html, es la variable que genera el objeto tabla del navegador, asignando un border y espaciado de tablas. Tambi茅n necesitamos un par de variables index1 e index2 para usarlas m谩s adelante en nuestros bucles for. Como vamos a utilizar un bucle anidado, necesitamos dos variables para ello. La variable odd nos permitir谩 establecer una condici贸n para cuando creemos los cuadrados, uno sea blanco y otro negro. Otra variable backgroundColor nos permitira almacenar el valor de las cajas y asignar el valor a dichas cajas. Por 煤ltimo las variables cellCounter y rowCounter nos servir谩n de soporte de la estructura for anidado.
No te preocupes si no lo entiendes hasta ahora. Ya lo ir谩s pillando.
Salidas por pantalla.
Con javascript puedes realizar salidas por pantalla de la forma que se muestre un mensaje por la ventana del navegador o por la consola del explorador del navegador, cosa que se utiliza para el desarrollador mediante la tecla de funciones F12 (seg煤n navegador).
Existe otro tipo de salida que genera una ventana de alerta del navegador. Esa ventana se genera con la instrucci贸n alert (alerta) y se usa igual que las sintaxis anterior, entre par茅ntesis y con comillas dobles o simples haciendo referencia al tipo de dato (en este caso string).
Puedes ver que cuando llamo sin comillas a un variable, me devuelve su valor, e incluso si llamo a una funci贸n como el tipo de la funci贸n (que me devuelva el tipo de dato que contiene el contenido), tambi茅n se procesar谩 bien.
Observa que hasta que no pulses aceptar, el contenido de la p谩gina Web se queda en blanco y no se ejecuta. Esto es un fallo que veremos como evitarlo m谩s adelante.
Enlace externo.
Para terminar, hemos visto como enlazar scripts de javascript directamente en la cabecera o en el cuerpo, pero tambi茅n podemos enlazar scripts externos mediante la propiedad src de la forma que muestra la sintaxis siguiente:
<script src="ruta;" type="text/javascript">
Con eso garantizamos la inclusi贸n de archivos externos javascript dentro de nuestro documento. Y esa inclusi贸n suele realizarse dentro de la cabecera.