Manual de Javascript tutorial de Javascript curso de Javascript avanzado

manuales, tutoriales, programacion
programming tutorials, programming manuals
Manual de Javascript tutorial de Javascript curso de Javascript avanzado
Manual de Javascript tutorial de Javascript curso de Javascript avanzado
Javascript
 
Básico » Intermedio » Avanzado
 
1. ¿Qué es JavaScript?
2. Tipos de datos en JavaScript
    2.1 Números (Number)
    2.2 Cadenas (String)
    2.3 Booleanos (Boolean)
    2.4 Arreglos (Array)
          2.4.1 Propiedades de los Arreglos
                   2.4.1.1length
          2.4.2 Métodos de los Arreglos
              ??m0?A????????¾     2.4.2.1 join()
                   2.4.2.2 reverse()
                   2.4.2.3 sort()
                   2.4.2.4 concat()
                   2.4.2.5 slice()
                   2.4.2.6 splice()
                   2.4.2.7 push() & pop()
                   2.4.2.8 shift & unshift()
                   2.4.2.9 toString()
          2.4.3 Tipos de Arreglos
                   2.4.3.1 Arreglos Literales
                   2.4.3.2 Arreglos de Arreglos (Simulación de Arreglos ??m0?A????????¾Multidimensionales)
    2.5 Funciones (function())
          2.5.1 Argumentos o Parámetros de una función
          2.5.2 Agregando propiedades a las funciones
    2.6 Objetos (Object())
3 Wrapper
4 Variables
    4.1 Ámbito de las variables
    4.2 Undefined Vs. Unassigned
5 Identificadores
6 Sentencias de Control
    6.1 if
    6.2 else if
    6.3 switch
    6.4 while
    6.5 do while
    6.6 for
    6.7 for/in
    6.8 with
7 Palabras reservadas
8 Valores Especiales
    8.1 NaN
    8.2 Null
    8.3 Undefined
    8.3.1 Escenarios en los cuales se presenta el valor especial "undefined"
9 Objeto Global (Global Object)
10 Contexto de ejecución (Execution Contexts)
11 Expresiones
12 Operador void (void operator)

¿Qué es JavaScript?

JavaScript es un lenguaje de Alto Nivel con capacidades orientadas a objetos, incrustado en los navegadores como Netscape e Internet Explorer, es decir, no se necesita instalar ningun software adicional pues estos navegadores tienen a JavaScript integrado, lo unico que se requiere es agregar los scripts en los documentos HTML bajo la sintaxis propia tanto de JavaScript como de HTML.

Sintacticamente el nucleo de JavaScript se parece al de C, C++ y JAVA, permitiendo utilizar estructuras de control como if, while y operadores como

JavaScript es un lenguaje untyped, lo cual significa que las variables no necesitan tener un tipo especifico de datos, es decir, las variables pueden contener cualquier tipo de dato.

Los objetos en JavaScript son mas parecidos a los arreglos asociativos en Perl los cuales son como las estructuras en C o los objetos en C++ o JAVA.

Los mecanismos de herencia de la programacion orientacion a objetos en JavaScript son como en los pequeños lenguajes Self y NewtonScript, los cuales son completamente diferentes de la herencia en C++ y JAVA.

Como Perl, JavaScript es un interprete derivado de la inspiración de Perl como sus expresiones regulares y características de manipulación de arreglos.

JavaScript no es JAVA

Microsoft hizo una implementación de JavaScript a la cual le llamo JScript.

Omitir el punto y coma (;) no es una buena practica de programación. Aunque JavaScript inserta automáticamente el punto y coma despues del break keyword, es mejor hacerlo explicitamente.

Tipos de Datos en JavaScript

JavaScript permite trabajar con tres tipos primitivos básicos de datos:

  1. Números

  2. Existe un método llamado toString(), que tienen los tipos de dato númericos, el cual sirve para convertir a un tipo string, se recomienda usar parentesis para no provocar que se interprete el punto (.) como un punto decimal, ejemplo:

    var y = (257).toString

  3. Cadenas o Strings

  4. var sCadena = 'Hola mundo!.';

    Comparacion de Cadenas en JavaScript

    JavaScript es un lenguaje de Alto Nivel y reconoce cuando se estan comparando cadenas (strings) que frecuentemente son comparaciones por valor (copia del dato). Por eficiencia las cadenas en JavaScript son supuestamente copiadas y pasadas por referencia??m0?A????????¾ (el dato mismo o dato original) y son comparadas por valor

    Como comparar cadenas de caracteres

    A diferencia de lenguajes de nivel más bajo como C, C++ o JAVA donde las cadenas o strings son comparados por referencia.

  5. Booleanos

  6. var bRespuesta = true;

ver : Manipulación de Tipos de Datos

Arreglos (Array)

JavaScript define un arreglo como:

Un arreglo es un tipo de dato que contiene o almacena piezas de datos a las cuales les corresponden un número o índice. Cada dato numerado es llamado elemento del arreglo y el número asignado a un elemento es llamado indice.

Ya que JavaScript es un lenguaje sin tipo, un elemento de un arreglo puede ser de cualquier tipo de dato (entero, booleano, string, etc.), un mismo arreglo puede contener diferentes elementos los cuales pueden ser de un tipo de dato diferente. Los elementos del arreglo pueden contener otros arreglos lo cual permite crear estructuras que son arreglos de arreglos.

Los arreglos se crean con el constructor Array() y el operador new.

Las siguientes declaraciones son validas:

  1. var a = new Array()

    Crea un arreglo vacio sin elementos

  2. var a = new Array(5,4,3,2,1,"Arreglos, prueba")

    Invoca el constructor Array() que permite especificar explicitamente los valores para los primeros n elementos de un arreglo.

  3. var a = new Array(10)

    Invoca el constructor Array() que permite especificar la longitud del arreglo.

  4. 
    var aVocales = new Array();
    aVocales[0] = 'a';
    aVocales[4] = 'u';
    

    Click aquí mostrar la longitud del arreglo 'aVocales'

En lenguajes como C, C++ y JAVA un arreglo posee un número fijo de elementos el cual debe ser especificado cuando se crea el arreglo, en JavaScript el mecanismo es diferente y un arreglo puede contener cualquier número de elementos y cambiar el número de elementos en cualquier momento.

Propiedades de los Arreglos

length

Cuando se crea un arreglo con el constructor Array() o se define un arreglo literal se tiene un propiedad especial llamada length la cual especifica cuantos elementos contiene el arreglo. La porpiedad length de un arreglo se actualiza automáticamente para mantener su consistencia cuando: se agregan nuevos elementos o se sobre escribe el arreglo. Si se utiliza el operador delete para borrar el elemento de un arreglo, este asume el valor especial undefined. Ejemplos:


var a = new Array();
document.write('Longitud del arreglo a : ' + a.length + '<br>');
a = new Array(10);
document.write('Longitud del arreglo a(10) : ' + a.length + '<br>');
a = new Array(1,2,3);
document.write('Longitud del arreglo a(1,2,3) : ' + a.length + '<br>');
a = [4,5];
document.write('Longitud del arreglo a[4,5] : ' + a.length + '<br>');
a[5] = -1;
document.write('Longitud del arreglo a[5] = -1 : ' + a.length + '<br>');
for(var i = 0; i < a.length; i++){
	document.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		Elemento ' + i  + ' : ' + a[i] + '<br>');
}
delete a[0];
a[49] = 0;
document.write('Longitud del arreglo a[49] = 0 : ' + a.length + '<br>');

Salida :

Lo que podemos concluir es que la propiedad length de un arreglo nos da la longitud de elementos de un arreglo hasta la última posición definida.

Métodos de los Arreglos

Algunos métodos de los arreglos son inspirados en el lenguaje de programacion Perl.

El Método join() de un Arreglo

El método join() de un arreglo convierte todos los elementos de un arreglo a un string y los concatena. Como parte de un argumento que acepta este método, se puede especificar un string que sirva de separador, siendo el default una (,). Ejemplo:


var aNumeros = [1,2,3];
s = aNumeros.join();
document.write(s);
s = aNumeros.join(" ")
document.write('<br>');
document.write(s);

Salida:

El método join() funciona a la inversa del método String.split() el cual crea un arreglo.

El Método reverse() de un Arreglo

El método reverse() de un arreglo, ordena al revés los elementos de un arreglo. Ejemplo:


s = aNumeros.reverse();
document.write('<br>');
doc??m0?A????????¾ument.write(s);

Salida :

El Método sort() de un Arreglo

El método sort() de un arreglo, ordena los elementos de un arreglo. Ejemplo:


var aNombres = ['Maria Elena','Gerardo','Jessica','Angel','Genoveva'];
aNombres = aNombres.sort();
document.write('<br>');
document.write(aNombres);

Salida:

La ordenación se hace en orden alfabético, para especificar otro orden que no sea el alfabético, se debe pasar como argumento una función de comparación (recibe dos argumentos), la cual tiene la tarea de decidir cual de los dos argumentos deberia aparecer primero, esto es, si la función regresa un número menor a cero, entonces el primer argumento aparece antes que el segundo, pero si la función regresa un número mayor a cero, entonces el primer argumento aparecere despues que el segundo argumento, y la función regresara cero si los dos argumentos son iguales.

Analice el siguiente ejemplo y vea con atención cual es su salida, comparelo con el ejemplo posterior.


var aNumeros = [4,33,222,1111];
aNumeros = aNumeros.sort();
document.write(aNumeros);

Salida:


aNumeros = aNumeros.sort(function(a,b){return a-b;});
document.write(aNumeros);

Salida:

NOTA: Se debe tener cuidado con los nombres que tengan ace??m0?A????????¾ntos ya que el orden cambia

El Método concat() de un Arreglo

El método concat() de un arreglo, crea y regresa un arreglo que contiene los elementos del arreglo original con el cual se invoco el método concat(). Si algún argumento es un arreglo se agregan los elementos de este no el arreglo como tal, pero no así los arreglos de arreglos ya que el método no es recursivo. Ejemplo:


var aLetras = new Array('a','b','c');
var aTmp = aLetras.concat('d','e');
for(var i = 0; i < aTmp.length; i++){
	if(typeof aTmp[i] === 'object'){
		document.write('[' + aTmp[i] + ']');
	}else{
		document.write(aTmp[i]);
	}
	if(i != aTmp.length-1){
		document.write(',');
	}
}


aTmp = aLetras.concat(['d','e']);
for(var i = 0; i < aTmp.length; i++){
	if(typeof aTmp[i] === 'object'){
		document.write('[' + aTmp[i] + ']');
	}else{
		document.write(aTmp[i]);
	}
	if(i != aTmp.length-1){
		document.write(',');
	}
}


aTmp = aLetras.concat(['d','e'],['f','g']);
for(var i = 0; i < aTmp.length; i++){
	if(typeof aTmp[i] === 'object'){
		document.write('[' + aTmp[i] + ']');
	}else{
		document.write(aTmp[i]);
	}
	if(i != aTmp.length-1){
		document.write(',');
	}
}


aTmp = aLetras.concat('d',['e',['f','g']]);
for(var i = 0; i < aTmp.length; i++){
	if(typeof aTmp[i] === 'object'){
		document.write('[' + aTmp[i] + ']');
	}else{
		document.write(aTmp[i]);
	}
	if(i != aTmp.length-1){
		document.write(',');
	}
}

Salida :

El Método slice() de un Arreglo

El método slice() de un arreglo, regresa una parte o un subarreglo del arreglo especificado. El primer argumento especifica el inicio y el segundo el fin del subarreglo que regresará. Si sólo se especifica un argumento el arreglo que regresa contiene todos los elementos del arreglo contenidos despues de donde se indico su inicio. Ejemlo:


var aLetras = ['a','e','i','o','u'];
var aTmp = aLetras.slice(0,3);
document.write(aTmp + '<br>');
aTmp = aLetras.slice(3);
document.write(aTmp + '<br>');
aTmp = aLetras.slice(1,-1);
document.write(aTmp + '<br>');
aTmp = aLetras.slice(-3,-2); //Existe un error en I. E. 4, regresa a,e,i
document.write(aTmp + '<br>');

Salida :

El Método splice() de un Arreglo

El método splice() de un arreglo, insert??m0?A????????¾a (al final del arreglo) y/o elimina elementos en un arreglo, no regresa un arreglo, la inserción o eliminación se hace directamente sobre el arreglo en cuestión.

El primer argumento del método splice() especifica la posición a partir de la cual se hará la inserción y/o eliminación. El segundo argumento especifica el número de elementos que serán eliminados, si este argumento es omitido se eliminan todos los elementos del arreglo. Ejemplos:


var aLetras = ['a','b','c','d','e','f','g','h'];
aLetras.splice(4);
document.write(aLetras + '<br>');
aLetras.splice(1,2);
document.write(aLetras + '<br>');
aLetras.splice(1,1);
document.write(aLetras + '<br>');
var aLetras = ['a','e','i','o','u'];
aLetras.splice(2,0,1,2);
document.write(aLetras + '<br>');
aLetras.splice(2,2,['a','e'],'i');
document.write(aLetras + '<br>');

Salida:

NOTA: en I.E. la eliminación dá un resultado diferente utilizando el código anterior, en Netscape dá el resultado esperado.

El Método push() y pop() de un Arreglo

El método push() de un arreglo, inserta uno o más elementos al final del arreglo y regresa el último valor que inserto. El método pop() de un arreglo, elimina el último elemento de un arreglo, decrementa la longitud del arreglo y regresa el valor que elimino.


var a = new Array();
a.push(1,2);
document.write('[' + a + ']<br>');
a.pop();
document.write('??m0?A????????¾[' + a + ']<br>');
a.push(3);
document.write('[' + a + ']<br>');
a.pop();
document.write('[' + a + ']<br>');
a.push([4,5]);
document.write('[');
for(var i = 0; i < a.length; i++){
	if(typeof a[i] === 'object'){
		document.write('[' + a[i] + ']');
	}else{
		document.write(a[i]);
	}
	if(i != a.length-1){
		document.write(',');
	}
}
document.write(']');
document.write('<br>');
a.pop();
document.write('[');
for(var i = 0; i < a.length; i++){
	if(typeof a[i] === 'object'){
		document.write('[' + a[i] + ']');
	}else{
		document.write(a[i]);
	}
	if(i != a.length-1){
		document.write(',');
	}
}
document.write(']');
document.write('<br>');
a.pop();
document.write('[');
for(var i = 0; i < a.length; i++){
	if(typeof a[i] === 'object'){
		document.write('[' + a[i] + ']');
	}else{
		document.write(a[i]);
	}
	if(i != a.length-1){
		document.write(',');
	}
}
document.write(']');

Salida:

El Método shift() y unshift() de un Arreglo

El método shift() de un arreglo, elimina elementos al inicio del arreglo y regregesa el primer elemento eliminado. El método unshift() de un arreglo, agrega un elemento o más al comienzo del arreglo. Ejemplos :


var a = new Array();
a.unshift(1);
document.write('[' + a + ']<br>');
a.unshift(22);
document.write('[' + a + ']<br>');
a.shift();
document.write('[' + a + ']<br>');
a.unshift(3,[4,5]);
document.write('[');
for(var i = 0; i < a.length; i++){
	if(typeof a[i] === 'object'){
		document.write('[' + a[i] + ']');
	}else{
		document.write(a[i]);
	}
	if(i != a.length-1){
		document.write(',');
	}
}
document.write(']');
document.write('<br>');
a.shift();
document.write('[');
for(var i = 0; i < a.length; i++){
	if(typeof a[i] === 'object'){
		document.write('[' + a[i] + ']');
	}else{
		document.write(a[i]);
	}
	if(i != a.length-1){
		document.write(',');
	}
}
document.write(']');
document.write('<br>');
a.shift();
document.write('[');
for(var i = 0; i < a.length; i++){
	if(typeof a[i] === 'object'){
		document.write('[' + a[i] + ']');
	}else{
		document.write(a[i]);
	}
	if(i != a.length-1){
		document.write(',');
	}
}
document.write(']');
document.write('<br>');
a.shift();
document.write('[');
for(var i = 0; i < a.length; i++){
	if(typeof a[i] === 'object'){
		document.write('[' + a[i] + ']');
	}else{
		document.write(a[i]);
	}
	if(i != a.length-1){
		document.write(',');
	}
}
document.write(']');

Salida :

El Método toString() de un Arreglo

El Método toString() de un arreglo, no recibe argumentos, regresa un string que de algún modo representa el tipo y/o valor del objeto sobre el cual se invoco. JavaScript invoca este método de un objeto cada vez que es necesario para convertir el objeto a string. La salida separa cada elemento con una coma (,). Ejemplo:


var a = ['H','e','l','l','o']
document.write(a.toString());
document.write('<br>');
a = ['H','e','l','l','o',['w','o','r','l','d','!'],'.']
document.write(a.toString());

Salida:

Tipos de Arreglos

Arreglos Literales

Un arreglo literal per??m0?A????????¾mite incrustar valores directamente en un programa JavaScript.

Creación de un arreglo literal:

var primes = [2,3,5,7,11]
var a = ['a', true, 4.78]

Los arreglos literales pueden contener objetos literales u otros arreglos literales.

Arreglos de Arreglos (Simulación de Arreglos Multidimensionales)

Realmente JavaScript no soporta arreglos multidimensionales, excepto como arreglos de arreglos, pero permite aproximarnos agradablemente a lo que serian arreglos multidimensionales.

Para acceder a los elementos de un arreglo multidimensional simplemente se usa el operador [] dos veces.

Ejemplos:


ArregloA = new Array("Gerardo", 1971, "Ángeles", 3.1416, "Nava");
document.write("Elemento 0 del ArregloA : " + ArregloA[0] + "<br>")
document.write("Elemento 1 del ArregloA : " + ArregloA[1] + "<br>")
document.write("Elemento 2 del ArregloA : " + ArregloA[2] + "<br>")
document.write("Elemento 3 del ArregloA : " + ArregloA[3] + "<br>")
document.write("Elemento 4 del ArregloA : " + ArregloA[4] + "<br>")

Salida :


ArregloB = new Array(2);
ArregloB[0] = "Jessica"
ArregloB[1] = "Ángeles"
ArregloB[2] = "Méndez"
document.write("Elemento 0 del ArregloB : " + ArregloB[0] + "<br>")
document.write("Elemento 1 del ArregloB : " + ArregloB[1] + "<br>")
document.write("Elemento 2 del ArregloB : " + ArregloB[2] + "<br>")

??m0?A????????¾

Salida:


//Declaracion de arreglos unidimensionales
ArregloD = new Array()
ArregloE = new Array()
ArregloF = new Array()

//Declaracion de un arreglo de arreglos (simula un arreglo multidimensional)
ArregloC = new Array(ArregloD, ArregloE, ArregloF)

//Inicialización del primer elemento del Arreglo de arreglos 
for(d = 0; d <= 2; d++){
	ArregloC[0][d] = 'd'
}
//Inicialización del segundo elemento del Arreglo de arreglos 
for(e = 0; e <= 2; e++){
	ArregloC[1][e] = 'e'
}
//Inicialización del tercer elemento del Arreglo de arreglos 
for(f = 0; f <= 2; f++){
	ArregloC[2][f] = 'f'
}

//Accesando a los elementos del Arreglo de Arreglos
for(i = 0; i <= 2; i++){
	for(j = 0; j <= 2; j++)
		document.write("ArregloC[" + i + "," + j + "] : " + 
			ArregloC[i][j] + "<br>")
}

document.write("<hr>")

//Asignando nuevos valores al primer elemento del Arreglo de Arreglos
ArregloC[0][0] = 'Maria Elena'
ArregloC[0][1] = 'Méndez (1)'
ArregloC[0][2] = 'Armenta'
//Asignando nuevos valores al segundo elemento del Arreglo de Arreglos
ArregloC[1][0] = 'Gerardo'
ArregloC[1][1] = 'Ángeles (1)'
ArregloC[1][2] = 'Nava'
//Asignando nuevos valores al tercer elemento del Arreglo de Arreglos
ArregloC[2][0] = 'Jessica'
ArregloC[2][1] = 'Ángeles (2)'
ArregloC[2][2] = 'Méndez (2)'

//Accesando a los nuevos elementos del Arreglo de Arreglos
for(i = 0; i <= 2; i++){
	for(j = 0; j <= 2; j++)
		document.write("ArregloC[" + i + "," + j + "] : " + 
			ArregloC[i][j] + "<br>")
}

Salida:

funciones (function())

Una función o function consta de:

  • El nombre de la función
  • Una lista de nombres de argumentos o parámetros opcionales contenidos entre parentesis y delimitos por (,)
  • El cuerpo o body que son el conjunto de sentencias que la componen y contenidas entre llaves de inicio y fin ({,})

JavaScript no checa si se pasaron correctamente el número de argumentos. Cuando se pasan más arg??m0?A????????¾umentos de los que la función espera, los argumentos sobrantes son ignorados. Cuando se pasan menos argumentos que los esperados, los argumentos restantes tendran un valor undefined, por ejemplo :


var e1 = 2, e2 = 3, e3 = 4;
f(e1,e2);

function f(e1,e2,e3){
document.write('arg1 : ' + e1 + '<br>arg2 : ' + e2 + '<br>arg3 : ' + e3);
}

Dara como resultado :

Argumentos o Parámetros de una función

Los argumentos, son la lista fija de valores con los que una función trabajará.

Los argumentos son una propiedad especial del call object esta propiedad se refiere a un objeto conocido como arguments object.

El arguments object tiene un par de propiedades : callee y caller, así como length, por ejemplo nombre_de_la_funcion.length dá como resultado el número de argumentos exacto que espera la función. arguments[] es un arreglo.

La propiedad callee de arguments object se refiere a la función que que actualmente es ejecutada.

La propiedad caller de arguments object se refiere al calling context, es decir, el contexto actual desde donde la funcion fue invocada.

Agregando propiedades a las funciones

JavaScript permite agregar propiedades a una función, por ejemplo si se requiere de un contador para la función, es decir, saber cuantas veces a sido invocada la misma función tendriamos un código de la siguiente forma:


function f(){
	f.count++;
	if(f.count == 1){
		alert('La función se ha invocado : ' + f.count + ' vez.');
	}else{
		alert('La función se ha invocado : ' + f.count + ' veces.');
	}
}??m0?A????????¾	
f.count = 0;

Click aquí mostrar el resultado de f.count

Wrapper (Envoltura)

Cada tipo de dato primitivo (number, string y boolean) tiene su correspondiente clase definida, es decir, JavaScript también soporta las clases : Number, String y Boolean

Un wrapper contiene el mismo valor de tipo de dato primitivo pero además define propiedades y métodos los cuales son usados para manipular los datos.

JavaScript automáticamente convierte los objetos de una clase a su correspondiente tipo de dato primitivo, es decir, convierte un String a un string.

Observe el siguiente código:


	var sCadena = "Hello";
	var oScadena = new String(' world!');
	var msg = sCadena + oScadena

Se define sCadena que tiene asignado el string "Hello", se define oScadena como un objeto de la clase String que tiene asignado el string " world!", se define msg que tiene asignado el valor de la concatenación de sCadena con oScadena, para hacer posible esta operación JavaScript crea un valor de tipo de dato primitivo string del objeto oScadena.

Click aquí mostrar el valor de msg

Variables

Una variable es un nombre asociado con el valor de un dato, se dice que una variable "guarda" o "contiene" el valor.

Las variables que son declaradas con l??m0?A????????¾a sentencia var son permanentes, por ejemplo:


	var i = 0, j = k = 1;

Si se omite la sentencia var, lo cual no es una buena practica de programación, al asignar un valor a la variable que no está declarada, JavaScript automáticamente crea una variable global, por ejemplo:


	var i = 0, j = k = 2;
	x = 3	//Automáticamente se crea una variable global
		//ya que la variable x no está declarada

Ámbito de las variables

El ámbito de una variable es la región de tu programa en la cual es definida. Una variable global tiene un ámbito global, pero las variables declaradas dentro de un a función son definidas únicamente dentro del cuerpo de la función son variables locales y su ámbito es local esto mismo se aplica a los parámetros o argumentos de la función.

Las variables locales tienen prioridad sobre las variables globales que tienen el mismo nombre. Por ejemplo:


var ambito = "global"
function showScope(){
	var ambito = "local"
	alert(ambito)
}

Click aquí mostrar el valor de ambito

Undefined Vs. Unassigned

Existen dos tipos diferentes de variables undefined:

  • El primer tipo de variable undefined es uno que nunca fue declarado
  • El segundo tipo de variable undefined es uno que fue declarado pero nunca se le asigno un valor en este caso seria mejor llamarlo "unassigned"

Identificadores

Un identificador es un nombre que le damos a una variable. Puede ser cualquier nombre siempre y cuando el primer carácter ??m0?A????????¾ sea:

  • una letra,
  • un guión bajo,
  • un signo de pesos o dollar.

Sentencias de Control

if, control-statement

if es una sentencia de control que permite a JavaScript hacer decisiones, es decir, ejecutar sentencias condicionalmente. Sintaxis:


if (expression)
	statement

La expresión es evaluada y si el resultado es verdadero o se puede convertir a verdadero (por ejemplo 1) la sentencia se ejecuta, si es falsa la sentencia no se ejecuta.

Una segunda forma de la sentencia de control if es la siguiente sintaxis:


if (expression)
	statement1
else
	statemenet2

La expresión es evaluada y si el resultado es verdadero o se puede convertir a verdadero (por ejemplo 1) la sentencia se ejecuta, si el resultado es falso la sentencia1 no se ejecuta y se ejecuta entonces la sentencia2.

else if, control-statement

else if es una sentencia de control que se utiliza para evaluar una condición y ejecutar una de dos piezas de código. Sintaxis:


if (expression)
	statement1
else if (expression)
		statement2
	 else
	 	statement3

switch

switch es una mejor alternativa que if cuando se está evaluando a una misma variable para ejecutar distintas acciones para caad caso posible, además de ser más optimo. Sintaxis:


switch (expression){
	case a:
		statements
		break;
	case b:
		statements
		break;
	case c:
		statements
		break;
	default:
		statements
		break;
}

while, control statement

while permite evaluar acciones repetitivamente, se justifica su uso cuando no sabemos el número de veces que deseamos repetir un bloque de código. Sintax??m0?A????????¾is:



while (expression)
	statement

do while, control statement

La diferencia de do while con while, es que do while al menos ejecuta una vez el código contenido en la sentencia do ya que secuencialmente se ejecuta primero y despues se evalua y que sintacticamente la sentencia while termina con punto y coma. Sintaxis:


do{
  statement;
}while (expression);

for, control statement

Al igual que while, la sentencia de control for permite repetir la ejecución de un bloque de código, se justifica su uso cuando se conoce el número de veces que se tiene que repetir el código. Sintaxis:


for(initialize; test; increment)
	statement

for/in

for/in permite acceder a cada una de las propiedades que tiene un objeto. Sintaxis:

for(variable in object) statement

variable puede ser el nombre de una variable, un elemento de un arreglo o una propiedad de un objeto.

objeto, es el nombre de un objeto o una expresión que evalua a un objeto.

Por ejemplo para mostrar las propiedades y valores del objeto window :


	for(p in window){
		str += p + ' : ' + object[p] + '<br>';
	}
	document.write(str);

Ejemplo :

Object :

with

with se utiliza para modificar temporalmente el scope chain, agregando un objeto al inicio del scope chain, ejecutando el bloque de código y restaurar de nuevo el scope chain a su estado original. Sintaxis:


with(object)
	statement

Click aquí mostrar el resultado de with(title)

Palabras reservadas en JavaScript

  • break
  • case
  • continue
  • default
  • delete
  • do
  • else
  • export
  • false
  • function
  • if
  • import
  • in
  • new
  • null
  • return
  • switch
  • this
  • true
  • typeof
  • var
  • void
  • while
  • with

Nota: Para futuras extensiones (ECMA, JAVA, etc) existen otros grupos de palabras reservadas.

Valores Especiales

NAN - Not a Number

Observe cual es el resultado de las siguientes operaciones:

Click aquí mostrar el valor de la división de cero entre cinco. (0/5)

Click aquí mostrar el valor de la división de cinco entre cero. (5/0)

Click aquí mostrar el valor de la división de cero entre cero. (0/0)

JavaScript utiliza varios valores especiales númericos, por ejemplo una operación matemática como la división de cero entre cero regresa un resultado indefinido o un error, en este caso el resultado es el valor especial not a number, desplegado como NAN. Este valor especial tiene un comportamiento inusual:

  • No es comparable con cualquier otro número.
  • No es comparable consigo mismo.

Por lo tanto para trabajar con este valor se requiere la funcion especial isNaN()

Click aquí para mostrar si el valor de la división de cero entre cero. (0/0) es el valor especial NaN. (isNaN(0/0))

Null

En JavaScript existe un valor especial llamado "null" el cual indica "no value" o "sin valor". Algunas veces se considera un valor especial del tipo objeto, es decir, un valor que representa "no object".
En JavaScript null no es equivalente a cero.

Undefined

También existe otro valor especial llamado "undefined" o "no definido", por ejemplo es el valor que regresa cuando se utiliza una variable no definida.

Escenarios en los cuales se presenta el valor especial "undefined"

1. Click aquí mostrar el valor de x

Lo que se aprecia al dar click para probar, es que en tiempo de ejecución ocurre un error puesto que x no está declarada en esta página y nos indica que x es undefined.

Si no se especifica un valor inicial a una variable declarada con la sentencia var la variable en ese momento queda definida, pero su valor es el valor especial undefined hasta que en el código se le asigne un valor.

En cambio si tenemos el siguiente código donde se declara la variable y:


	var y

2. Click aquí mostrar el valor de y

En este caso no ocurre un error aunque la variable y si está declarada pero nunca se le asigno un valor por lo tanto su valor es undefined.

Ahora observe este código:


var undefined;			//se declara la variable undefined
type1 = typeof undefined;	//indicar el tipo de dato de undefined
type2 = typeof null;		//indicar el tipo de dato de null

3. Click aquí mostrar el valor de type1 y type2

En JavaScript undefined no es equivalente a null.

Global Object - Objeto Global

Cuando el interprete de J??m0?A????????¾avaScript comienza, una de las primeras cosas que hace antes de ejecutar cualquier código JavaScript, es crear un global object u objeto global.

Las propiedades de este objeto son las variables globales de los programas JavaScript, cuando se declara una variable global, no se esta haciendo más que definir una propiedad del objeto global.

Execution Contexts - Contexto de ejecución

Cada vez que JavaScript comienza a interpretar la ejecución de una función crea un nuevo contexto de ejecución para esa función, es decir un contexto de ejecución es cualquier pieza de código JavaScript ejecutandose.

Cada función JavaScript se ejecuta en su propio y único contexto de ejecución.

Cada contexto de ejecución tiene asociado un scope chain este scope chain es una lista o cadena de objetos. Cuando un código JavaScript necesita buscar el valor de una variable x (proceso llamado variable name resolution), comienza buscando en el primer objeto de la cadena, si este primer objeto tiene una propiedad llamada x su valor es usado, si no tiene una propiedad x continua buscando en el siguiente objeto de la cadena y así sucesivamente, si la variable x no existe el valor de la variable es undefined. Por ejemplo :


var x = 1;
function f(){
	var y = 2;
	g()
	function g(){
		var z = 3;
		alert(x)
	}
}

Click aquí mostrar el valor de s

??m0?A????????¾
Scope
Scope Chain Variable lookup
global object x : 1
^No
defined here? >Si

Expresiones

Una expresión es una "frase" de JavaScript que JavaScript puede interpretar como evaluar para producir un valor. Las expresiones son literales o nombres de variables.

void Operator - Operador void

void es un operador unario, el cual tiene un proposito inusual:

  • Siempre descarta su valor de operando y simplemente regresa un valor undefined
  • por ejemplo :
Abrir nueva ventana sin void, regresa un objeto

Abrir nueva ventana con void, regresa un valor undefined

Observe el siguiente código y su resultado :


var x, y = 0;
if(x === void 0) alert('x es iagual a ' + x);
else alert('y es igual a ' + y);

Click aquí mostrar el resultado de void 0. (void requiere de un operador arbitrario)

 

 

 

 

 

 


 


Manual de Javascript tutorial de Javascript curso de Javascript avanzado