EXPO JAVASCRIPTJavaScript es un lenguaje de programacin,
JavaScript se utiliza principalmente del lado del cliente (es
decir, se ejecuta en nuestro ordenador, no en el servidor)
permitiendo crear efectos atractivos y dinmicos en las pginas
webJavascript tiene la ventaja de ser incorporado en cualquier
pgina web, puede ser ejecutado sin la necesidad de instalar otro
programa para ser visualizado.Qu es Javascript?Javascript es un
lenguaje con muchas posibilidades, utilizado para crear pequeos
programas que luego son insertados en una pgina web y en programas
ms grandes, orientados a objetos mucho ms complejos. Con Javascript
podemos crear diferentes efectos e interactuar con nuestros
usuarios.Este lenguaje posee varias caractersticas, entre ellas
podemos mencionar :Que es un lenguaje basado en acciones que posee
menos restricciones. Adems, es un lenguaje que utiliza Windows y
sistemas X-Windows, Gran parte de la programacin en este lenguaje
est centrada en describir objetos, escribir funciones que respondan
a movimientos del mouse, aperturas, utilizacin de teclas, cargas de
pginas entre otros.Es compatible con navegadores?Javascript es
soportado por la mayora de los navegadores como Internet Explorer,
Netscape, Opera, Mozilla Firefox, entre otros.QU ES Y PARA QU SIRVE
JAVASCRIPT?permite crear efectos atractivos y dinmicos en las
pginas web. Los navegadores modernos interpretan el cdigo Java
Script integrado en las pginas web.La ventaja de JavaScript es
queAl estar alojado en el ordenador del usuario los efectos son muy
rpidos y dinmicos. Al ser un lenguaje de programacin permite toda
la potencia de la programacin como uso de variables, condicionales,
bucles, etc. Tambin podemos citar algn inconveniente: por ejemplo
si el usuario tiene desactivado JavaScript en su navegador, no se
mostrarn los efectos. No obstante, hoy da la mayora de los usuarios
navegan por la web con Java Script activado.La sintaxis Las normas
bsicas que definen la sintaxis de Java Script son las siguientes:
No se tienen en cuenta los espacios en blanco y las nuevas lneas:
el intrprete de Java Script ignora cualquier espacio en blanco
sobrante, por lo que el cdigo se puede ordenar de forma adecuada
para entenderlo mejor (tabulando las lneas, aadiendo espacios,
creando nuevas lneas, etc.) Se distinguen las maysculas y
minsculas: al igual que sucede con la sintaxis de las etiquetas y
elementos XHTML. Sin embargo, si en una pgina XHTML se utilizan
indistintamente maysculas y minsculas, la pgina se visualiza
correctamente, siendo el nico problema la no validacin de la pgina.
En cambio, si en JavaScript se intercambian maysculas y minsculas
el script no funciona. No se define el tipo de las variables: al
crear una variable, no es necesario indicar el tipo de dato que
almacenar. De esta forma, una misma variable puede almacenar
diferentes tipos de datos durante la ejecucin del script. No es
necesario terminar cada sentencia con el carcter de punto y coma
(;): en la mayora de lenguajes de programacin, es obligatorio
terminar cada sentencia con el carcter;. Aunque Java Script no
obliga a hacerlo, es conveniente seguir la tradicin de terminar
cada sentencia con el carcter del punto y coma (;). Se pueden
incluir comentarios: los comentarios se utilizan para aadir
informacin en el cdigo fuente del programa. Aunque el contenido de
los comentarios no se visualiza por pantalla, si que se enva al
navegador del usuario junto con el resto del script, por lo que es
necesario extremar las precauciones sobre la informacin incluida en
los comentarios. Palabras reservadas: son las palabras (en ingls)
que se utilizan para construir las sentencias de JavaScript y que
por tanto no pueden ser utilizadas libremente. Las palabras
actualmente reservadas por JavaScript
son:break,case,catch,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with.3.2.Tipos
de variablesAunque todas las variables de Java Script se crean de
la misma forma (mediante la palabra reservada var), la forma en la
que se les asigna un valor depende del tipo de valor que se quiere
almacenar (nmeros, textos, etc.)3.2.1. NumricasEn este caso, el
valor se asigna indicando directamente el nmero entero o decimal.
Los nmeros decimales utilizan el carcter.(Punto) en vez de,(coma)
para separar la parte entera y la parte decimal:var iva = 16; //
variable tipo enterovar total = 234.65; // variable tipo
decimal3.2.2. Cadenas de textoPara asignar el valor a la variable,
se encierra el valor entre comillas dobles o simples, para
delimitar su comienzo y su final:var mensaje = "Bienvenido a
nuestro sitio web";var nombreProducto = 'Producto ABC';var
letraSeleccionada = 'c';No obstante, a veces las cadenas de texto
contienen tanto comillas simples como dobles. Adems, existen otros
caracteres que son difciles de incluir en una variable de texto
(tabulador,ENTER, etc.) Para resolver estos problemas, JavaScript
define un mecanismo para incluir de forma sencilla caracteres
especiales y problemticos dentro de una cadena de texto.El
mecanismo consiste en sustituir el carcter problemtico por una
combinacin simple de caracteres. A continuacin se muestra la tabla
de conversin que se debe utilizar:Si se quiere incluir...Se debe
incluir...
Una nueva lnea\n
Un tabulador\t
Una comilla simple\'
Una comilla doble\"
Una barra inclinada\\
Este mecanismo de JavaScript se denomina"mecanismo de escape"de
los caracteres problemticos, y es habitual referirse a que los
caracteres han sido"escapados".3.2.3. ArraysUn array es una
coleccin de variables, que pueden ser todas del mismo tipo o cada
una de un tipo diferente. En este tipo de casos, se pueden agrupar
todas las variables relacionadas en una coleccin de variables o
array. Para definir un array, se utilizan los caracteres[y]para
delimitar su comienzo y su final y se utiliza el carcter,(coma)
para separar sus elementos:var nombre_array = [valor1, valor2, ...,
valorN];Una vez definido un array, es muy sencillo acceder a cada
uno de sus elementos. Cada elemento se accede indicando su posicin
dentro del array. La nica complicacin, que es responsable de muchos
errores cuando se empieza a programar, es que las posiciones de los
elementos empiezan a contarse en el0y no en el1:var diaSeleccionado
= dias[0]; // diaSeleccionado = "Lunes"var otroDia = dias[5]; //
otroDia = "Sbado"3.2.4. BooleanosUna variable de
tipobooleanalmacena un tipo especial de valor que solamente puede
tomar dos valores:true(verdadero) ofalse(falso). Los nicos valores
que pueden almacenar estas variables sontrueyfalse, por lo que no
pueden utilizarse los valoresverdaderoyfalso. A continuacin se
muestra un par de variables de tipobooleano:var clienteRegistrado =
false;var ivaIncluido = true;
3.3.OperadoresLos operadores permiten manipular el valor de las
variables, realizar operaciones matemticas con sus valores y
comparar diferentes variables. De esta forma, los operadores
permiten a los programas realizar clculos complejos y tomar
decisiones lgicas en funcin de comparaciones y otros tipos de
condiciones.3.3.1. AsignacinEl operador de asignacin es el ms
utilizado y el ms sencillo. Este operador se utiliza para guardar
un valor especfico en una variable. El smbolo utilizado es=var
numero1 = 3;3.3.2. Incremento y decrementoEstos dos operadores
solamente son vlidos para las variables numricas y se utilizan para
incrementar o decrementar en una unidad el valor de una
variable.Ejemplo:var numero = 5;++numero;alert(numero); // numero =
6De forma equivalente, el operador decremento (indicado como un
prefijo--en el nombre de la variable) se utiliza para decrementar
el valor de la variable:El resultado de ejecutar el script anterior
es el mismo que cuando se utiliza el operador++numero, por lo que
puede parecer que es equivalente indicar el operador++delante o
detrs del identificador de la variable. Sin embargo, el siguiente
ejemplo muestra sus diferencias:var numero1 = 5;var numero2 =
2;numero3 = numero1++ + numero2;// numero3 = 7, numero1 = 6var
numero1 = 5;var numero2 = 2;numero3 = ++numero1 + numero2;//
numero3 = 8, numero1 = 6Si el operador++se indica como prefijo del
identificador de la variable, su valor se incrementaantesde
realizar cualquier otra operacin. Si el operador++se indica como
sufijo del identificador de la variable, su valor se
incrementadespusde ejecutar la sentencia en la que aparece.3.3.3.
LgicosLos operadores lgicos son imprescindibles para realizar
aplicaciones complejas, ya que se utilizan para tomar decisiones
sobre las instrucciones que debera ejecutar el programa en funcin
de ciertas condiciones.El resultado de cualquier operacin que
utilice operadores lgicos siempre es un valor lgico
obooleano.3.3.3.1. NegacinUno de los operadores lgicos ms
utilizados es el de la negacin. Se utiliza para obtener el valor
contrario al valor de la variable:var visible =
true;alert(!visible); // Muestra "false" y no "true"La negacin
lgica se obtiene prefijando el smbolo!al identificador de la
variable. El funcionamiento de este operador se resume en la
siguiente tabla:3.3.3.2. ANDLa operacin lgicaANDobtiene su
resultado combinando dos valores booleanos. El operador se indica
mediante el smbolo&&y su resultado solamente estruesi los
dos operandos sontrue:var valor1 = true;var valor2 =
false;resultado = valor1 && valor2; // resultado =
falsevalor1 = true;valor2 = true;resultado = valor1 &&
valor2; // resultado = true3.3.3.3. ORLa operacin lgicaORtambin
combina dos valores booleanos. El operador se indica mediante el
smbolo||y su resultado estruesi alguno de los dos operandos
estrue:var valor1 = true;var valor2 = false;resultado = valor1 ||
valor2; // resultado = true3.3.4. MatemticosJavaScript permite
realizar manipulaciones matemticas sobre el valor de las variables
numricas. Los operadores definidos son: suma (+), resta (-),
multiplicacin (*) y divisin (/). Ejemplo:var numero1 = 10;var
numero2 = 5;resultado = numero1 / numero2; // resultado =
2resultado = 3 + numero1; // resultado = 13resultado = numero2 4;
// resultado = 1resultado = numero1 * numero 2; // resultado =
50Adems de los cuatro operadores bsicos, JavaScript define otro
operador matemtico que no es sencillo de entender cuando se estudia
por primera vez, pero que es muy til en algunas ocasiones.Se trata
del operador"mdulo", que calcula el resto de la divisin entera de
dos nmeros. Si se divide por ejemplo10y5, la divisin es exacta y da
un resultado de2. El resto de esa divisin es0, por lo que mdulo de
10 y 5es igual a0.Sin embargo, si se divide9y5, la divisin no es
exacta, el resultado es1y el resto4, por lo quemdulo de 9 y 5es
igual a4.El operador mdulo en JavaScript se indica mediante el
smbolo%, que no debe confundirse con el clculo del porcentaje:var
numero1 = 10;var numero2 = 5;resultado = numero1 % numero2; //
resultado = 0numero1 = 9;numero2 = 5;resultado = numero1 % numero2;
// resultado = 4Los operadores matemticos tambin se pueden combinar
con el operador de asignacin para abreviar su notacin:var numero1 =
5;numero1 += 3; // numero1 = numero1 + 3 = 8numero1 -= 1; //
numero1 = numero1 - 1 = 4numero1 *= 2; // numero1 = numero1 * 2 =
10numero1 /= 5; // numero1 = numero1 / 5 = 1numero1 %= 4; //
numero1 = numero1 % 4 = 13.3.5. RelacionalesLos operadores
relacionales definidos por JavaScript son idnticos a los que
definen las matemticas: mayor que (>), menor que (=), menor o
igual ( numero2; // resultado = falseresultado = numero1 <
numero2; // resultado = trueSe debe tener especial cuidado con el
operador de igualdad (==), ya que es el origen de la mayora de
errores de programacin, incluso para los usuarios que ya tienen
cierta experiencia desarrollando scripts. El operador==se utiliza
para comparar el valor de dos variables, por lo que es muy
diferente del operador=, que se utiliza para asignar un valor a una
variableLos operadores relacionales tambin se pueden utilizar con
variables de tipo cadena de texto:var texto1 = "hola";var texto2 =
"hola";var texto3 = "adios";resultado = texto1 == texto3; //
resultado = falseresultado = texto1 != texto2; // resultado =
false
3.5.Funciones y propiedades bsicas de JavaScriptJavaScript
incorpora una serie de herramientas y utilidades (llamadas
funciones y propiedades, como se ver ms adelante) para el manejo de
las variables. De esta forma, muchas de las operaciones bsicas con
las variables, se pueden realizar directamente con las utilidades
que ofrece JavaScript.3.5.1. Funciones tiles para cadenas de textoA
continuacin se muestran algunas de las funciones ms tiles para el
manejo de cadenas de texto:length, calcula la longitud de una
cadena de texto (el nmero de caracteres que la forman)var mensaje =
"Hola Mundo";var numeroLetras = mensaje.length; // numeroLetras =
10+, se emplea para concatenar varias cadenas de textovar mensaje1
= "Hola";var mensaje2 = " Mundo";var mensaje = mensaje1 + mensaje2;
// mensaje = "Hola Mundo"Adems del operador+, tambin se puede
utilizar la funcinconcat()var mensaje1 = "Hola";var mensaje2 =
mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"Las cadenas de
texto tambin se pueden unir con variables numricas:var variable1 =
"Hola ";var variable2 = 3;var mensaje = variable1 + variable2; //
mensaje = "Hola 3"Cuando se unen varias cadenas de texto es
habitual olvidar aadir un espacio de separacin entre las
palabras:var mensaje1 = "Hola";var mensaje2 = "Mundo";var mensaje =
mensaje1 + mensaje2; // mensaje = "HolaMundo"Los espacios en blanco
se pueden aadir al final o al principio de las cadenas y tambin se
pueden indicar forma explcita:var mensaje1 = "Hola";var mensaje2 =
"Mundo";var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola
Mundo"toUpperCase(), transforma todos los caracteres de la cadena a
sus correspondientes caracteres en maysculas:var mensaje1 =
"Hola";var mensaje2 = mensaje1.toUpperCase(); // mensaje2 =
"HOLA"toLowerCase(), transforma todos los caracteres de la cadena a
sus correspondientes caracteres en minsculas:var mensaje1 =
"HolA";var mensaje2 = mensaje1.toLowerCase(); // mensaje2 =
"hola"charAt(posicion), obtiene el carcter que se encuentra en la
posicin indicada:var mensaje = "Hola";var letra =
mensaje.charAt(0); // letra = Hletra = mensaje.charAt(2); // letra
= lindexOf(caracter), calcula la posicin en la que se encuentra el
carcter indicado dentro de la cadena de texto. Si el carcter se
incluye varias veces dentro de la cadena de texto, se devuelve su
primera posicin empezando a buscar desde la izquierda. Si la cadena
no contiene el carcter, la funcin devuelve el valor-1:var mensaje =
"Hola";var posicion = mensaje.indexOf('a'); // posicion = 3posicion
= mensaje.indexOf('b'); // posicion = -1Su funcin anloga
eslastIndexOf():lastIndexOf(caracter), calcula la ltima posicin en
la que se encuentra el carcter indicado dentro de la cadena de
texto. Si la cadena no contiene el carcter, la funcin devuelve el
valor-1:var mensaje = "Hola";var posicion =
mensaje.lastIndexOf('a'); // posicion = 3posicion =
mensaje.lastIndexOf('b'); // posicion = -1La
funcinlastIndexOf()comienza su bsqueda desde el final de la cadena
hacia el principio, aunque la posicin devuelta es la correcta
empezando a contar desde el principio de la palabra.3.5.2.
Funciones tiles para arraysA continuacin se muestran algunas de las
funciones ms tiles para el manejo de arrays:length, calcula el
nmero de elementos de un arrayvar vocales = ["a", "e", "i", "o",
"u"];var numeroVocales = vocales.length; // numeroVocales =
5concat(), se emplea para concatenar los elementos de varios
arraysvar array1 = [1, 2, 3];array2 = array1.concat(4, 5, 6); //
array2 = [1, 2, 3, 4, 5, 6]array3 = array1.concat([4, 5, 6]); //
array3 = [1, 2, 3, 4, 5, 6]pop(), elimina el ltimo elemento del
array y lo devuelve. El array original se modifica y su longitud
disminuye en 1 elemento.var array = [1, 2, 3];var ultimo =
array.pop();// ahora array = [1, 2], ultimo = 3push(), aade un
elemento al final del array. El array original se modifica y
aumenta su longitud en 1 elemento. (Tambin es posible aadir ms de
un elemento a la vez)var array = [1, 2, 3];array.push(4);// ahora
array = [1, 2, 3, 4]shift(), elimina el primer elemento del array y
lo devuelve. El array original se ve modificado y su longitud
disminuida en 1 elemento.var array = [1, 2, 3];var primero =
array.shift();// ahora array = [2, 3], primero = 1unshift(), aade
un elemento al principio del array. El array original se modifica y
aumenta su longitud en 1 elemento. (Tambin es posible aadir ms de
un elemento a la vez)var array = [1, 2, 3];array.unshift(0);//
ahora array = [0, 1, 2, 3]reverse(), modifica un array colocando
sus elementos en el orden inverso a su posicin original:var array =
[1, 2, 3];array.reverse();// ahora array = [3, 2, 1]
