A la hora de crear una página web se usa como base código HTML para crear la estructura de la misma, y hojas de estilo CSS para modificar la apariencia y colocar los diferentes elementos.
Además, disponemos del lenguaje de Programación Orientado a Objetos JavaScript, con el que podremos acceder a los distintos elementos de la página web así como al propio navegador web, permitiendo crear webs dinámicas gracias a la interacción con el usuario.
JavaScript está soportado en la mayoría de los navegadores web, y aunque existe un estándar de dicho lenguaje de programación algunas características no funcionan en todos ellos.
Para seguir este curso son necesarios conocimientos básicos de programación (variables, sentencias de control, funciones, etc.), que puedes aprender en nuestro tutorial de Introducción a la programación.
Antes de comenzar a estudiar este tutorial de JavaScript es importante que hayas aprendido a usar el lenguaje HTML, y recomendable que conozcas también el uso de hojas de estilo CSS.
Si observas que no se ejecuta el código JavaScript dos de las cosas que debes comprobar primero puesto que son de los errores más comunes, es comprobar si has olvidado colocar algún punto y coma y si has cerrado correctamente llaves, corchetes y paréntesis.
JavaScript y Java son dos lenguajes de programación diferentes.
Vea también: [ Tutorial HTML ] - [ Tutorial CSS ] - [ Tutorial PHP ]
Hay dos formas de hacerlo. Consulta el siguiente enlace: Incluir JavaScript en una página WEB.
IMPORTANTE: observa que en el código HTML no utilizamos ningún Doctype por no ser necesario para su correcto funcionamiento, pero te recomendamos que utilices XHTML 1.0 Transitional para escribir XHTML válido. Para más información consulta los enlaces mostrados a continuación.
Relacionado: [ Doctype ] - [ Escribir código XHTML válido ]
Los comentarios en JavaScript se crean del mismo que el indicado en el siguiente enlace: Comentarios en lenguajes de programación.
En JavaScript podemos usar tipos de datos lógicos (true / false), numéricos y de texto.
Relacionado: [ Tipos de datos en lenguajes de programación ]
Las variables en JavaScript no tienen un tipo de dato definido, pudiéndose almacenar cualquier tipo de valor en ellas.
Podemos declarar e inicializar una variable en JavaScript del siguiente modo:
var c123 = 57;
var nombre = "Pepe";
var PI = 3.14;
var miVariable;
miVariable = "3P8";
Como hemos visto, una constante se declara en JavaScript del mismo modo que una variable.
Una variable en puede devolver también como valor undefined, cuando ha sido declarada pero no le hemos asignado un valor (aunque también podemos asignarle un valor null).
var variable1;
var variable2 = null;
alert( variable1 ); // Devuelve 'undefined'
alert( variable2 ); // Devuelve 'null'
Hay que tener cuidado puesto null y undefined suelen ocasionar confusión al aprender a programar en lenguaje JavaScript, ya que al compararlos usando el operador de comparación '==' indica que son iguales, pero si usamos '===' muestra que no lo son (tienen el mismo valor, pero son tipos diferentes):
var variable1;
var variable2 = null;
alert( variable1 == variable2 ); // Devuelve true (son iguales)
alert( variable1 != variable2 ) ; // Devuelve false (no son diferentes)
alert( variable1 === variable2 ); // Devuelve false (son iguales, pero de diferente tipo)
alert( variable1 !== variable2 ); // Devuelve true (son diferentes en cuanto a valor y tipo)
Cuando deseemos comprobar un valor si un valor está vacío, nos serviría un código JavaScript como el siguiente, usando !=:
var variable1 = 44;
if( variable1 != null )
{
// 44 es diferente de null, se entra por aquí.
}
else
{
// Si 'variable1' tuviese valor 'undefined' o 'null' se entraría por aquí.
}
Un poco más adelante veremos el uso de if() en la sección estructuras de control selectivas.
Vea también: [ Sentencias de Control Condicionales ]
Relacionado: [ Variables en lenguajes de programación ] - [ Identificadores ]
Para averiguar el tipo de dato contenido en una variable, elemento de un array o arreglo o propiedad de un Objeto usaremos la función typeof():
var var1 = "Antonio";
var var2 = true;
var var3 = "true";
var var4 = 33;
var var5 = "33";
var var6 = "33 44";
var var7 = "33.44";
var var8 = "33,44";
var var9 = 33.44;
var miArray = [];
miArray[0] = "05/06/2011";
miArray[1] = new Date();
miArray[2] = new Date(2011, 5, 5);
document.write( "var1: " + typeof(var1) + "<br />" ); // Devuelve: string
document.write( "var2: " + typeof(var2) + "<br />" ); // Devuelve: boolean
document.write( "var3: " + typeof(var3) + "<br />" ); // Devuelve: string
document.write( "var4: " + typeof(var4) + "<br />" ); // Devuelve: number
document.write( "var5: " + typeof(var5) + "<br />" ); // Devuelve: string
document.write( "var6: " + typeof(var6) + "<br />" ); // Devuelve: string
document.write( "var7: " + typeof(var7) + "<br />" ); // Devuelve: string
document.write( "var8: " + typeof(var8) + "<br />" ); // Devuelve: string
document.write( "var9: " + typeof(var9) + "<br />" ); // Devuelve: number
document.write( "miArray[0]: " + typeof(miArray[0]) + "<br />" ); // Devuelve: string
document.write( "miArray[1]: " + typeof(miArray[1]) + "<br />" ); // Devuelve: object
document.write( "miArray[2]: " + typeof(miArray[2]) + "<br />" ); // Devuelve: object
Los arrays en JavaScript se crean del siguiente modo:
// Array de 7 elementos con el nombre de un día de la semana en cada uno de ellos
var aDias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
// Array de 4 elementos con un número contenido en cada posición
var aNumeros = [33, 12, 83, 55];
// Array de 5 elementos, sin asignar valor en ninguna posición
var aNombres = [5];
// Array vacío, sin posiciones definidas
var aVacio = [];
Las posiciones de los arrays en JavaScript comienzan desde cero. Para acceder a un determinado elemento ya sea para asignar un valor como para obtenerlo, tenemos que indicar su posición o índice del siguiente modo:
alert( aDias[2] ); // Se muestra 'Miércoles'
alert( aNumeros[1] ); // Se muestra el número 12
aNombres[0] = "MARTA";
aNombres[1] = "MIGUEL";
aNombres[2] = "ANDRÉS";
alert( aNombres[1] ); // Se muestra 'MIGUEL'
// Aunque el array 'aVacio' se creó sin definir el número de elementos, podemos crearlos así:
aVacio[0] = 333;
aVacio[1] = 444;
alert( aVacio[0] ); // Se muestra 333
alert( aVacio[1] ); // Se muestra 444
La función alert() (que explicaremos también más adelante) es usada para mostrar un cuadro de diálogo con un mensaje para el usuario.
Con el objeto Array() que veremos más adelante, podremos realizar varias operaciones con los arrays.
Vea también: [ Más sobre arrays en JavaScript ]
Relacionado: [ Vectores en lenguajes de programación ] - [ Identificadores ]
