informaticaPC

Tutorial de JavaScript

Tipos de datos, variables, arrays...

¿Qué es JavaScript?

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.

Informació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.

Información

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.

Información

JavaScript y Java son dos lenguajes de programación diferentes.

Más información

Vea también: [ Tutorial HTML ] - [ Tutorial CSS ] - [ Tutorial PHP ]

Incluir código JavaScript en una página web

Hay dos formas de hacerlo. Consulta el siguiente enlace: Incluir JavaScript en una página WEB.

Información

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.

Más información

Relacionado: [ Doctype ] - [ Escribir código XHTML válido ]

Comentarios

Los comentarios en JavaScript se crean del mismo que el indicado en el siguiente enlace: Comentarios en lenguajes de programación.

Tipos de datos en JavaScript

En JavaScript podemos usar tipos de datos lógicos (true / false), numéricos y de texto.

Variables y constantes

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.

Descargar ejemplo

Información sobre el tipo de dato

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

Descargar ejemplo

Arrays

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.

Descargar ejemplo

Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso