Programacin bsica con JavaScript

Escribir cdigo JavaScript

Entre las etiquetas <scripttype=text/javascript></script>
Ejemplo:
<scripttype="text/javascript">
alert("HolaMundo!");
</script>

o en un fichero con extensin .js e indicndolo en la cabecera en una etiqueta <script>

de la siguiente manera:
<scripttype=text/javascriptsrc=rutaalarchivo.js></script>
Ejemplo:
<scripttype="text/javascript"src="codigo.js"></script

Variables
Las variables se declaran tras la palabrabra reservada var. El nombre de las variables
se llama identificador. Para escribir un identificador se siguen dos reglas:

Slo puede estar formado por letras, nmeros y los smbolos $ (dlar) y _ (guin
bajo).

El primer carcter no puede ser un nmero.

No es obligatorio declarar las variables, pero es recomendable para evitar errores
sintcticos

Tipos de datos
Las variables en JavaScript no son tipadas, es decir, no se especifica un tipo de datos
para ellas, pueden almacenar cualquier tipo de datos. Los dividiremos en numricos,
cadenas de texto y booleanos o lgicos.

Numricos
Se utilizan para almacenar valores numricos enteros (llamados integer en ingls) o
decimales (llamados float en ingls). En 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;
var total = 234.65;

// variable tipo entero

// variable tipo decimal

Cadenas de texto
Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor
a la variable, se encierra el valor entre comillas dobles o simples, para delimitar su
comienzo y su final:

varmensaje="Bienvenidoanuestrositioweb";
varnombreProducto='ProductoABC';
varletraSeleccionada='c';
En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si por
ejemplo el propio texto contiene comillas simples o dobles, la estrategia que se sigue es
la de encerrar el texto con las comillas (simples o dobles) que no utilice el texto:
/*Elcontenidodetexto1tienecomillassimples,porloque
seencierraconcomillasdobles*/
vartexto1="Unafrasecon'comillassimples'dentro";
/*Elcontenidodetexto2tienecomillasdobles,porloque
seencierraconcomillassimples*/
vartexto2='Unafrasecon"comillasdobles"dentro';
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

\\

De esta forma, el ejemplo anterior que contena comillas simples y dobles dentro del
texto se puede rehacer de la siguiente forma:
vartexto1='Unafrasecon\'comillassimples\'dentro';
vartexto2="Unafrasecon\"comillasdobles\"dentro";

Booleanos
Las variables de tipo boolean o booleano tambin se conocen con el nombre de
variables de tipo lgico.

Una variable de tipo boolean almacena un tipo especial de valor que solamente puede
tomar dos valores: true (verdadero) o false (falso). No se puede utilizar para
almacenar nmeros y tampoco permite guardar cadenas de texto.

Los nicos valores que pueden almacenar estas variables son true y false, por lo
que no pueden utilizarse los valores verdadero y falso. A continuacin se muestra
un par de variables de tipo booleano:
varclienteRegistrado=false;
varivaIncluido=true;

Mensajes
Se trata de ventanas que desde el cdigo se lanzan al usuario para hacer que ste
reaccione ante una situacin o nos informe ante una duda. (Realmente todos los
mensajes se obtienen a travs del objeto window
)

alert

Es el mensaje ms usado. Saca un mensaje por la pantalla el cual slo deja la

posibilidad de aceptarle. Su uso es mostrar informacin al usuario pero resaltndola
de la pgina. Su sintaxis es:

alert(texto_del_mensaje);

prompt

En este caso se trata de una ventana que pide entrar datos al usuario. De modo que
esta funcin devuelve un valor que se puede usar en el cdigo si es asignado a una
variable. Su sintaxis es:

prompt(texto_del_mensaje,valor_por_defecto);
El segundo parmetro (valor por defecto) no es obligatorio incluirle y permite asignar
un valor al cuadro de texto en el que el usuario tendr que introducir informacin.

Ejemplo de uso de prompt:

respuesta=prompt(Ququiereshacer?,comer);
En el ejemplo, el resultado de lo que el usuario responde se almacena en la variable
resultado y al principio la ventana contendr el valor comer en el cuadro de texto
destinado al usuario. Naturalmente, el usuario podr variar este valor si lo desea.

El cuadro de dilogo que saca prompt posee dos botones, uno es el de Aceptar y
el otro es el de Cancelar. Si el usuario pulsa Cancelar, la funcin prompt devuelve el

valor nulo (null).

confirm

Saca un mensaje de confirmacin el cual suele tener dos botones: Aceptar y Cancelar.
Sintaxis:

confirm(texto_del_mensaje)
;
La ventana mostrar el texto elegido (normalmente es una pregunta) y el usuario
elegir si desea aceptar o no el contenido. Confirm devuelve un valor true en el caso
de que el usuario acepte el mensaje, y false si no lo hace.

ok=confirm(quiereseguir?);
ok tendr valor true o false en funcin de si se puls Aceptar o Cancelar

operadores

Los operadores son los elementos que permiten realizar operaciones con los datos del
cdigo.

operadores aritmticos

Operador

Significado

Suma (a + b)

Resta (a - b)/ cambiar de signo (-a)

Multipliacin (a * b)

Divisin (a / b)

Resto de la divisin (a % b)

++

Incremento (en uno) (a++)

--

Decremento (en uno) (a--)

Ejemplo:

var
valor1=50;
var
valor2=10;
var
valor3=20;
var
suma,resta,producto,division,resto;
var
incremento,decremento;
suma=valor1+valor2;//sumavale60
resta=valor1valor2;//restavale40
producto=valor1*valor2;//productovale5000
division=valor1/valor3;//divisionvale2,5
resto=valor1%valor3;//restovale10

valor1++;//valor1vale51
valor1;//valor1vale50
incremento=valor1++;//incrementovale50yvalor1vale51
decremento=valor1;//decrementovale51,valor1vale50
incremento=++valor1;//incrementovale51yvalor1tambin
decremento=valor1;//decrementoyvalor1valen50

Operadores lgicos

Trabajan con valores lgicos y devuelven un valor lgico:

Operador

Significado

&&

AND ( Y lgico ) (A && B)

||

OR ( O lgico ) (A || B)

NOT ( NO lgico ) ( !A )

Operadores de comparacin
Trabajan con valores del mismo tipo y el resultado es true o false
Operador

Significado

==

Es igual? (A == B)

!=

Es distinto? (A != B)

>=

Mayor o igual que (A >= B)

<=

Menor o igual que (A <= B)

>

Mayor que (A > B)

<

Menor que (A < B)

Estructura if

La estructura ms utilizada en JavaScript y en la mayora de lenguajes de programacin

es la estructura if. Se emplea para tomar decisiones en funcin de una condicin. Su
definicin formal es:
if(condicion){
...
}
Si la condicin se cumple (es decir, si su valor es true) se ejecutan todas las
instrucciones que se encuentran dentro de {...}. Si la condicin no se cumple (es decir,
si su valor es false) no se ejecuta ninguna instruccin contenida en {...} y el programa
contina ejecutando el resto de instrucciones del script.

Estructura if...else

En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la
condicin, hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelen
ser del tipo "si se cumple esta condicin, hazlo; si no se cumple, haz esto otro".

Para este segundo tipo de decisiones, existe una variante de la estructura if llamada
if...else. Su definicin formal es la siguiente:
if(condicion){
...
}
else{
...
}
Ejemplo:
varedad=18;
if(edad>=18){
alert("Eresmayordeedad");
}
else{
alert("Todavaeresmenordeedad");
}

La estructura if...else se puede encadenar para realizar varias comprobaciones

seguidas:
if(edad<12){
alert("Todavaeresmuypequeo");
}

elseif(edad<19){
alert("Eresunadolescente");
}
elseif(edad<35){
alert("Aunsiguessiendojoven");
}
else{
alert("Piensaencuidarteunpocoms");
}

Funciones
Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado el
cdigo fuente de la aplicacin, ya que:

El cdigo de la aplicacin es mucho ms largo porque muchas instrucciones

estn

repetidas.

Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer

tantas

modificaciones como veces se haya escrito esa instruccin, lo que se convierte en

un trabajo muy pesado y muy propenso a cometer errores.

Las funciones son la solucin a todos estos problemas, tanto en JavaScript como en el
resto de lenguajes de programacin. Una funcin es un conjunto de instrucciones que
se

agrupan para realizar una tarea concreta y que se pueden reutilizar fcilmente.

Las funciones en JavaScript se definen mediante la palabra reservada

function, seguida del nombre de la funcin. Su definicin formal es la siguiente:

functionnombre_funcion(){
...
}

El nombre de la funcin se utiliza para llamar a esa funcin cuando sea necesario. El
concepto es el mismo que con las variables, a las que se les asigna un nombre nico
para
poder utilizarlas dentro del cdigo. Despus del nombre de la funcin, se incluyen dos
parntesis cuyo significado se detalla ms adelante. Por ltimo, los smbolos { y } se
utilizan para encerrar todas las instrucciones que pertenecen a la funcin
Ejemplo:
functionsuma_y_muestra(){
resultado=numero1+numero2;
alert("Elresultadoes"+resultado);
}
varresultado;
varnumero1=3;

varnumero2=5;
suma_y_muestra();
numero1=10;
numero2=7;
suma_y_muestra();
numero1=5;
numero2=8;
suma_y_muestra();
...

Argumentos y valores de retorno

Las funciones ms sencillas no necesitan ninguna informacin para producir sus

resultados. Sin embargo, la mayora de funciones de las aplicaciones reales deben
acceder al valor de algunas variables para producir sus resultados.
Las variables que necesitan las funciones se llaman argumentos. Antes de que pueda
utilizarlos, la funcin debe indicar cuntos argumentos necesita y cul es el nombre de
cada argumento. Adems, al invocar la funcin, se deben incluir los valores que se le
van
a pasar a la funcin. Los argumentos se indican dentro de los parntesis que van
detrs
del nombre de la funcin y se separan con una coma (,).

Siguiendo el ejemplo anterior, la funcin debe indicar que necesita dos argumentos,
correspondientes a los dos nmeros que tiene que sumar:

functionsuma_y_muestra(primerNumero,segundoNumero){...}
A continuacin, para utilizar el valor de los argumentos dentro de la funcin, se debe
emplear el mismo nombre con el que se definieron los argumentos:

functionsuma_y_muestra(primerNumero,segundoNumero){...}
varresultado=primerNumero+segundoNumero;
alert("Elresultadoes"+resultado);
}
Dentro de la funcin, el valor de la variable primerNumero ser igual al primer valor que
se le pase a la funcin y el valor de la variable segundoNumero ser igual al segundo
valor
que se le pasa. Para pasar valores a la funcin, se incluyen dentro de los parntesis
utilizados al llamar a la funcin:
//Definicindelafuncin
functionsuma_y_muestra(primerNumero,segundoNumero){...}
varresultado=primerNumero+segundoNumero;
alert("Elresultadoes"+resultado);
}
//Declaracindelasvariables
varnumero1=3;

varnumero2=5;
//Llamadaalafuncin
suma_y_muestra(numero1,numero2);

En el cdigo anterior, se debe tener en cuenta que:

Aunque casi siempre se utilizan variables para pasar los datos a la funcin, se

podra haber utilizado directamente el valor de esas variables:

suma_y_muestra(3,5);

El nmero de argumentos que se pasa a una funcin debera ser el mismo que el

nmero de argumentos que ha indicado la funcin. No obstante, JavaScript no

muestra ningn error si se pasan ms o menos argumentos de los necesarios.

El orden de los argumentos es fundamental, ya que el primer dato que se indica

en

la llamada, ser el primer valor que espera la funcin; el segundo valor indicado
en la llamada, es el segundo valor que espera la funcin y as sucesivamente.

Se puede utilizar un nmero ilimitado de argumentos, aunque si su nmero es

muy grande, se complica en exceso la llamada a la funcin.

No es obligatorio que coincida el nombre de los argumentos que utiliza la funcin

y el nombre de los argumentos que se le pasan. En el ejemplo anterior, los

argumentos que se pasan son numero1 y numero2 y los argumentos que utiliza la
funcin son primerNumero y segundoNumero.