0% encontró este documento útil (0 votos)
95 vistas

Javascript

Este documento proporciona una introducción a JavaScript. Explica que JavaScript es un lenguaje de programación interpretado que se ejecuta en los navegadores web. Traza brevemente la historia de JavaScript y las diferencias entre JavaScript y Java. También describe cómo escribir y ejecutar código JavaScript dentro de páginas web y el uso de archivos externos.

Cargado por

Maxi Castiglioni
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
95 vistas

Javascript

Este documento proporciona una introducción a JavaScript. Explica que JavaScript es un lenguaje de programación interpretado que se ejecuta en los navegadores web. Traza brevemente la historia de JavaScript y las diferencias entre JavaScript y Java. También describe cómo escribir y ejecutar código JavaScript dentro de páginas web y el uso de archivos externos.

Cargado por

Maxi Castiglioni
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 37

JAVASCRIPT

Wilson Cruz, Julio Pippa

CUALQUIER SUGERENCIA O COMENTARIO


SOBRE ESTE MANUAL A

[email protected]
 BIOS - Escuela de Sistemas
18 de Julio 1253, esq. Yí • Montevideo
Teléfono 902 92 84 / 9019186
[email protected]
http://www.bios.edu.uy
Indice

1- Que es Javascript?
2- Historia
3- Diferencias entre Java y Javascript
4- El lenguaje Javascript
5- Formas de ejecutar scripts
6- Ocultar Scripts en navegadores antiguos
7- Usar ficheros externos para la colocación de scripts
8- Sintaxis javascript
9- Variables
10- Ámbito de las variables
11- Que podemos guardar en variables
12- Tipos de Datos
13- Operadores I
14- Operadores II
15- Operadores III
16- Estructuras de Control
17- Estructura IF
18- Estructura IF – parte 2
19- Estructura Switch
20- Bucles For
21- Bucles While y Do While
22- Break & Continue
23- Bucles Anidados
24- Funciones en Javascript
25- Donde insertar las funciones
26- Parámetros de la funciones
27- Valores de retorno
28- Arrays en javascript
29- Arrays multidimensionales
1- Que es Javascript:

En el mundo de los lenguajes de programación hay dos grandes ramas, los lenguajes
compilados y los interpretados.
Los lenguajes compilado son aquellos que a partir de un “código fuente”, se genera un
archivo o conjunto de archivos que son transformados (compilados) a un lenguaje que el
computador comprende (código nativo), y este archivo es posible ejecutarlo tantas veces
como sea necesario sin necesidad de re-compilarlo, es decir es leído una sola vez y
compilado, para luego ser ejecutado cuantas veces sea necesario.
En cambio en los lenguajes “interpretados” el “programa” o instrucciones son escritas
en un archivo de “código fuente” y este es interpretado de alguna forma por la
computadora cada vez que sea necesario ejecutarlo, es decir que es necesario “traducir”
ese programa o grupo de instrucciones cada vez que sea necesario ejecutarlo.
JAVASCRIPT es un lenguaje interpretado, y el encargado de interpretar este lenguaje
es el navegador (Internet Explorer, Mozila, Netscape Navigator, etc).

Con javascript podemos incluir efectos especiales a nuestras páginas o definir


interacciones con el usuario.

2- Historia :
A medida que la web fue creciendo, se necesitaban interacciones mayores y mejores, y
el HTML se fue quedando “corto” para definir e implementar estas nuevas
funcionalidades, ya que solo sirve para presentar texto, definir su estilo, y poco mas.
El primer agregado realizado fue a través de JAVA, que a través de la tecnología de
Applets (pequeños programas incrustados en el HTML) mejoro las posibilidades de la
web.
Netscape, el primero en implementar JAVA en su explorador, comenzó a desarrollar un
lenguaje de programación que llamo “LiveScript” que permitía crear pequeñas
animaciones en las páginas, y que era mas fácil de utilizar que JAVA. El lenguaje
“LiveScript” no duró mucho, pues Netscape hizo un acuerdo con Sun Microsystems
(creador de Java) para desarrollar en conjunto este nuevo lenguaje.
Esta alianza hizo que javascript se convirtiera en el hermano menor de Java, solamente
útil dentro de las páginas webs.
El primer navegador compatible con “Javascript” fue el Netscape Navigator 2.0, y luego
lo siguió Microsoft con la versión 3.0 de Internet Explorer.

3- Diferencias entre Java y Javascript :

En realidad Java y Javascript solo guardan en común la sintaxis básica, y algunos otros
elementos, pero básicamente no tienen nada que ver.
Diferencias :
• Compilador : para programar en java necesitamos un kit de desarrollo y un
compilador, sin embargo javascript es interpretado por el navegador cuando
se lee la página.
• Orientado a Objetos : Java es un lenguaje de programación orientado a
objetos, en cambio javascript no lo es, esto quiere decir que podemos
programar en javascript sin la necesidad de crear clases.
• Propósito : Java es un lenguaje mucho mas potente que javascript, esto es
debido a que java es un lenguaje de propósito general con el que se pueden
hacer aplicaciones de variados tipos, en cambio con javascript solo podemos
hacer programas que se ejecuten en páginas web.
• Estructuras Fuertes : Java es un lenguaje de programación fuertemente
“tipado” esto quiere decir que al declarar una variable, tendremos que indicar
su tipo, y no podrá cambiar de un tipo a otro automáticamente, en cambio
Javascript no tiene esa característica, se puede almacenar información en una
variable sin definir el tipo, y luego cambiarla por información de otro tipo
cuando así lo queramos.

4- El lenguaje Javascript :

Que se necesita para programar en javascript ?


Básicamente lo mismo que para escribir HTML, un editor de texto, y un navegador
compatible con javascript.
La escritura de javascript se realiza dentro del mismo documento HTML, es decir que
en la misma página se mezclan los dos lenguajes de programación, pero para que esto
sea posible, hay que introducir delimitadores que separen el código HTML del código
Javascript.
Estos delimitadores son etiquetas HTML, <SCRIPT> y </SCRIPT>, todo el código
javascript de nuestra página debe ir encerrado dentro de estos delimitadores.
En una misma página podemos introducir varios bloques de sentencias Javascript, y
pueden ser escritos en cualquier parte de la página, aunque hay zonas especiales que en
algunos casos será importante respetar.
También es posible escribir código Javascript dentro de determinados atributos de
elementos de página, como el atributo “onclick” de un botón.
Estos atributos están relacionados con las acciones de usuario, y se llaman manejadores
de eventos.

5- Formas de Ejecutar scripts :

Existen dos formas básicas de ejecución de scripts, por ejecución directa ó en respuesta
a una acción del usuario.
La ejecución directa :
El código javascript se escribe en la página dentro de las etiquetas
<script></script> y el navegador las lee línea por línea y las
interpreta y ejecuta una tras otra. La ejecución se da al leer de la
página, cuando se está cargando.
Respuesta a un evento :
Los eventos son acciones que realiza el usuario, los programas
javascript están preparados para atrapar estas acciones realizadas
por el usuario, y realizar acciones como respuesta. De esta forma
se pueden realizar programas Interactivos.
Entre los eventos posibles, los mas comunes son, el clic de un
botón, movimiento del mouse, etc.
Las acciones que queremos realizar en repuesta a las acciones del
usuario se escriben dentro de los atributos de las etiquetas
HTML correspondientes.
6- Ocultar scripts en navegadores antiguos :

Ya que javascript se implemento a partir de la versión 2.0 de Netscape


Navigator, y la versión 3.0 de Internet Explorer, entonces los navegadores más
antiguos que esas versiones no entienden este código, otro problema son los
navegadores que funcionan en entornos de “solo texto” por lo que este tipo de
código no es comprendido en estos navegadores, pues no es necesario.
Los navegadores que no soportan scripts presentan el texto del código javascript
como texto plano (de hecho esto es lo que es), y este aparecerá escrito en la
página.
Para evitar esto el código Javascript debe ir entre etiquetas de “comentario”
HTML, para evitar que el navegador lo interprete como texto.
Es decir :
<script>
<!--
código javascript
//-->
</script>
Los caracteres “//” se incluyen para evitar que javascript interprete el “-->” como
operadores y presente un error de sintaxis, pues seria una sentencia no válida.

A través de una etiqueta especial se le puede indicar a los navegadores que no


soportan javascript que la página que están visitando implementa
funcionalidades javascript que su navegador no soporta.
Esto se logra a través de la etiqueta <NOSCRIPT></NOSCRIPT>
Todo lo que esté dentro de esas etiquetas se mostrara tal cual en los navegadores
que no soporten javascript.

7- Usar ficheros externos para la colocación de scripts :

Dentro de la etiqueta de apertura del script se puede especificar parámetros


como por ejemplo, la versión de javascript que estamos utilizando.
<SCRIPT language=”javascript 1.2”>
Aunque normalmente solo se indica el lenguaje sin hacer referencia a la versión.

Otra manera de incluir scripts dentro de una página web es a través de ficheros
externos, esta funcionalidad esta incluida en javascript a partir de la versión 1.1
del lenguaje.
Los ficheros de script suelen tener extensión .js y se incluyen a través del
atributo src de la etiqueta Script.
<SCRIPT languege=”javascript” src=”funciones.js”>
Dentro de las etiquetas <SCRIPT> </SCRIPT> se puede escribir cualquier cosa,
pues será ignorada por el navegador, pues el código lo buscara en el archivo
indicado.
Un archivo .js es un archivo de texto que solo contiene instrucciones javascript,
no contiene HTML.
8- Sintaxis Javascript :

Comentarios.- Un comentario es una parte del código que no es interpretada por


el navegador, y cuya utilidad es la de facilitar la lectura del
código para el programador.
// comentario de una sola línea
/* comentario de
varias líneas */

Mayúsculas y Minúsculas.- En javascript se debe respetar la escritura en


mayúsculas o minúsculas, si nos equivocamos, el navegador respondera con
un error de sintaxis

Separación de Instrucciones.- Las instrucciones que escribimos en nuestro


código se deben serparar para que el navegador no nos indique errores de
sintaxis, javascript acepta dos formas de separar instrucciones, la primera es a
través de un salto de línea, y la segunda a través de un punto y coma (;)
Las instrucciones javascript no necesitan terminar en punto y coma salvo que
tengamos dos instrucciones en la misma línea, sin embargo se utiliza esta
convención para mantener el orden del código, y acostumbrarse a la
programación de lenguajes mas complejos como Java, C, C++, y C#.

9- Variables :

Una variable es un espacio en memoria donde se almacena un dato, un espacio


donde se puede guardar algún tipo de información que luego necesitaremos para
realizar alguna acción dentro de nuestro programa.
Ej.:
numero1 = 20;
numero2 = 30;
suma = numero1 + numero2;

En este ejemplo hay tres variables, numero1, numero2 y suma.


El uso de las variables es como si estuviésemos trabajando con el valor real de la
variable en todo momento, el nombre de nuestra variable opera como “puntero”
ó “referencia” a el espacio en memoria reservado para este fin.

Reglas de nombrado de variables:


Las variables pueden ser escritas de casi cualquier forma, con cualquier
combinación de caracteres alfanuméricos, incluyendo el carácter de
subrayado _
La regla que hay que seguir es que un nombre de variable no puede
comenzar con un número, solo puede comenzar con un carácter
alfabético, o un carácter de subrayado.
Ejemplo de nombres de variables :
edad
Nombre
_numero
Declaración de Variables :
Es normal en los lenguajes de programación el definir el nombre de las
variables
antes de comenzar a utilizarlas, pero en la mayoría de esos lenguajes las
reglas de definición son estrictas, mientras que en javascript esto no es
así.
El proceso de definición de una variable implica el indicarle al sistema
que vamos a utilizar un espacio de la memoria para almacenar algún
dato, y asignarle un nombre a ese dato.
Javascript no nos obliga a declarar las variables, pero es una buena
costumbre el hacerlo antes de comenzar a utilizarlas.
Javascript nos brinda la palabra reservada “var” con la que le indicamos
al sistema que estamos definiendo una variable.

var nombre;
var edad;
También es posible asignarle un valor a la variable al mismo tiempo que
la estamos declarando.

var nombre = ”juan”;


var edad = 30;

También se permite declarar varias variables en la misma línea siempre y


cuando se separen por comas.

var apellido, dirección, teléfono;

10- Ámbito de las variables

Se llama ámbito de una variable a el lugar desde donde están disponibles.


Por lo general cuando declaramos una variable, hacemos que esté disponible
desde el lugar donde la declaramos, como javascript se ejecuta dentro de una
página web, las variables estarán disponibles dentro de la página.
No se podrá acceder a variables definidas dentro de otra página.
El ámbito mas habitual de una variable en javascript es el de la página, es decir
que siempre es valida desde cualquier punto de la página, por lo que se le llaman
variables globales.

Variables globales :
Las variables globales son aquellas que fueron declaradas en el ámbito
mas amplio posible, la página web.
Cualquier variable declarada fuera de todo ámbito, sean funciones o
eventos, será global, pues es posible accederla desde cualquier punto de
la página.
Variables Locales :

Para poder definir variables dentro de ciertos ámbitos más acotados,


como por ejemplo el código contenido dentro de una función, a estas
variables se les llama locales.
Para acceder a esas variables solo podemos acceder a ellas desde el
mismo lugar donde se declararon, pues fuera de ese lugar no son válidas.
Si fue declarada dentro de una función, solo puede ser accedida desde
dentro de esa función.
Para declarar una variable local lo hacemos también con la palabra
reservada “var”.

function funcionDePrueba( ){
var variableLocal;
}
En este ejemplo la variable “variableLocal” solo tendrá valides dentro de
los limites de la función (lo encerrado entre las llaves “{“ y “}”).
No existe problema en definir una variable local con el mismo nombre
que una variable global, el único tema a tener en cuenta es que dentro del
ámbito donde existe la variable local, esta será la única válida, y la
variable global valdrá en toda la página, menos donde esta la variable
local con el mismo nombre.

var numero=10;
function miFuncion( ){
var numero=20;
alert(numero); // aparece 20
}
alert(numero); // aparece 10

Diferencias entre utilizar o no la palabra “var” :

En javascript tenemos la libertad de declarar o no las variables con la


palabra “var”, pero los efectos conseguidos en cada caso son distintos.
Cuando utilizamos “var” hacemos que la variable sea local respecto al
ámbito donde se declara. Por lo tanto, si no utilizamos “var” esta variable
será global, o sea válida para toda la página.
La diferencia puede ser crucial en algunas aplicaciones, pues si hacemos
por ej.:

var numero=2;
function miFuncion( ) {
numero=19;
alert(numero); //despliega 19
}
alert(numero); //despliega 2 (la función no se
ejecuto todavía)

miFuncion( ); //llamo a “miFunción”


alert(numero); //despliega 19

Lo que sucede aquí es que dentro de la función hay una “declaración” de


la variable número, pero está hecha sin la palabra “var”, por lo que es
tomada como global, pero resulta que ya hay una variable global con el
nombre “numero” por lo que se toma como que estoy modificando el
valor de la variable “numero”, por lo que cuando hago el segundo
alert(numero) fuera de la función, me devuelve 19, porque dentro de la
función se modifico el valor de la variable.
Si nosotros no queríamos eso deberíamos de haber llamado a la variable
interna con un nombre distinto, o la deberíamos de haber declarado con
la palabra “var” para hacerla interna a la función.

11- Que podemos guardar en variables :

En una variable podemos introducir varios tipos de información, números,


textos, etc. A estas distintas clases de información que podemos guardar las
llamamos “tipos” ó “tipos de datos”.
Los Tipos válidos en javascript son :
Numéricos :
Cualquier número valido (0 , 2.3 , 0.1)
Cadenas :
Cualquier combinación de cadenas de caracteres, texto normal.
Siempre que vallamos a guardar cadenas las debemos escribir entre
comillas dobles “ ”.
Boléanos :
Guarda información de tipo lógica, es decir que tiene solo dos valores
válidos, true (verdadero) y false (falso);

Las variables también pueden contener cosas un poco más complicadas, como
objetos, el valor “null” o funciones.
Aunque en realidad nuestras variables en javascript no están forzadas a guardar
ningún tipo en concreto, por lo que no se especifica ningún tipo de dato
especifico al declarar la variable, la información que se puede introducir en una
variable en cualquier momento es cualquiera, y podemos cambiar el contenido
sin tener en cuenta el tipo de información que contenía anteriormente.

12- Tipos de datos :

Numérico :
En javascript, a diferencia de otros lenguajes todos los números
pertenecen al tipo de datos “numerico”. En otros lenguajes de
programación existen dentro del tipo numérico otros tipos de datos, como
los números enteros, números reales, números decimales, etc.
En javascript todo lo que sea número es un tipo de datos numérico.
El dato numérico puede ser expresado en 3 formas distintas, la normal es
la que se llama “base 10” o sea esta basada en la numeración decimal, del
0 al 9.
También existe la base octal o “base 8”, con números del 0 al 7, para
escribir un número octal basta con escribir un número que comience con
0, por ejemplo 045.
Y por último también puedo escribir números en el sistema hexadecimal
o “base 16”, o sea utilizando números y letras para la representación del
valor. Para representar un número hexadecimal lo hago con una sintaxis
como esta 0x3EF.
Booleano :
El tipo booleano solo acepta dos valores, true ó false, pues es un tipo
“lógico” el cual solo sirve para evaluar lógicamente alguna condición.
El valor true equivale a verdadero, es decir cuando la condición se
cumple, mientras que el valor false equivale a falso, es decir que la
condición no se cumple.

Cadenas de Caracteres :
Este tipo de dato sirve para guardar texto en javascript. Javascript solo
tiene este tipo de datos para guardar texto, y en este se pueden introducir
cualquier número de caracteres.
Un texto válido puede estar compuesto por números, letras, símbolos, ó
cualquier carácter válido.
Los valores de texto se escriben entre comillas para saber donde
comienzan y donde terminan.
Caracteres de escape :
Dentro del tipo de datos de texto, hay una serie de caracteres
especiales que sirven para expresar en una cadena de texto un
cierto comportamiento o control, como pueden ser un salto de
línea ó una tabulación.
Estos caracteres especiales se llaman “caracteres de escape” y se
escriben con una “contrabarra” \ y luego se coloca el código del
carácter a mostrar.
Un carácter muy común es el salto de línea que se consigue
escribiendo \n.
Otra función que nos brindan los caracteres de escape es la
posibilidad de escribir ciertos caracteres que javascript se podría
confundir al interpretarlos, pues para el tienen un significado
especial, como por ejemplo las comillas “. Como javascript utiliza
las comillas para separar el comienzo y fin de una cadena de
caracteres, si no especificamos que queremos escribir una
comilla, javascript la va a interpretar como un final o principio de
cadena.
Para evitar esto se utiliza el carácter de escape \” ó \’ para la
comilla simple.
Y para escribir una “contrabarra” se utiliza el carácter \\.
El tabulador es \t.

13- Operadores Javascript I :

Para desarrollar un programa en cualquier lenguaje se utilizan los operadores,


estos sirven para hacer cálculos y operaciones necesarias para llevar a cabo los
objetivos del programa.
Si por ejemplo tenemos la operación :

3+5
Esta operación no tiene mucho sentido por si sola, pues no hace nada con el
resultado, solo se genera la suma. Normalmente se combina más de un operador
para crear expresiones útiles, por ej.:

miVariable = 3 + 5

Lo que hicimos fue combinar dos tipos de operadores, uno sirve para realizar
una operación matemática “ + ”, y el otro para guardar el resultado “ = ”.
Los operadores se clasifican por el tipo de acción que realizan.

Operadores Aritméticos :

Son los utilizados para realizar operaciones matemáticas simples.

+ suma de dos valores


- resta de dos valores (también utilizado para cambiar el signo –2)
* producto de dos valores (multiplicación)
/ división de dos valores
% resto de la división de dos valores
++ incremento de un numero en una unidad
-- decremento de un numero en una unidad

NOTA - Cuidados de los operadores aritméticos “unarios” :


Los operadores “unarios” es decir “++” y “--“ presentan algunas
características especiales a la hora de la implementación.
Una de las cosas a tener en cuenta es cuando se ejecutan, pues no es lo
mismo a++ que ++a.
Cuando hago una operación del tipo :
b = a++;
Primero asigno el valor de “a” a la variable “b”, y luego incremento el
valor de “a” en una unidad.
En cambio si la operación es del tipo :
b = ++a;
Primero incremento el valor de la variable “a” y luego se asigna ese
nuevo valor a la variable “b”.

Operadores de Asignación :

Sirven para asignar valores a las variables.

= asignación de un valor (asigna lo que está en la parte derecha a la


parte izquierda)
+= asignación con suma, realiza la suma de lo que esta en la parte
derecha con lo que esta en la parte izquierda, y lo asigna a lo que
está en la parte izquierda
-= asignación con resta
*= asignación con multiplicación
/= asignación con división
%= se obtiene el resto y se asigna

14- Operadores Javascript II :

Operadores de cadena :

Las cadenas de caracteres, también tienen sus propios operadores para


poder realizar operaciones típicas sobre cadenas de caracteres.
En realidad solo hay un operador predefinido para cadenas, pero se
pueden hacer otras cosas a través de funciones predefinidas para las
cadenas.
El operador predefinido para cadenas es el de concatenación.

+ operador de concatenación de cadenas

El operador de concatenación lo que hace es pegar lo que pongo a la


derecha al final de la cadena que pongo a la izquierda.

Ej. :
cadena1 = “hola ”;
cadena2 = “ mundo”;
cadenaConcatenada = cadena1 + cadena2;
alert(cadenaConcatenada); //muestra “hola mundo”

El operador + sirve para objetivos distintos dependiendo del tipo de datos en los
que opere, si son números los suma, si son caracteres los concatena.
El operador += también funciona, lo que hace es poner la cadena de la derecha al
final de la cadena de la izquierda.

Operadores Lógicos :

Estos operadores sirven para realizar operaciones lógicas, que son


aquellas que dan como resultado verdadero o falso, y se utilizan para
tomar decisiones en el script.
Los operadores lógicos son :

! operador NO o negación
&& operador Y, si son los dos miembros de la
expresión verdaderos el resultado de la expresión
es verdadero
|| operador O, si por lo menos uno de los miembros
de la expresión es verdadero, la expresión es
verdadera.

Ejemplo:
miBooleano = true;
miBooleano = !miBooleano; //ahora miBooleano vale “false”
pues “negué” la expresión, y si niego un true, tengo
false.
tengoHambre = true;
tengoComida = true;
comoComida = tengoHambre && tengoComida;

Operadores Condicionales :

Sirven para realizar expresiones condicionales complejas, y estas


expresiones condicionales las usaremos para tomar decisiones en
función de la comparación de varios elementos, por ejemplo si un
número es mayor que otro.

== comprueba si dos numeros son iguales


!= comprueba si dos numeros son distintos
> mayor que
< menor que
>= mayor ó igual que
<= menor ó igual que

Operadores a nivel de bit :

Los operadores a nivel de bit no son muy usados, pero son


válidos, se trata de que en realidad por más que nosotros
utilicemos nuestras variables como numéricas o texto o
booleanos, nuestras variables siguen conteniendo adentro solo
ceros y unos, y podemos querer hacer operaciones con esos ceros
y unos.
Solo se explica cuales son los operadores, y no su uso, pues no es
el fin de este curso ni son realmente útiles en la programación
javascript.
Los operadores son :
& - Y a nivel de bit
| - O a nivel de bit
^ - Xor a nivel de bit
otros :
<< , >> , >>> , >>>= , >>= , <<=
15- Precedencia de operadores :

A la hora de evaluar una sentencia, cuando esta es muy complicada y utiliza


muchos tipos de operadores distintos, debe haber un orden en el que son
ejecutadas las operaciones.
En un principio todos los operadores se evalúan de izquierda a derecha, pero
existen una normas adicionales por las que determinados operadores se evaluan
antes que otros. Muchas de estas reglas de precedencia fueron sacadas de las
matemáticas y son comunes a otros lenguajes.

1- ( ) [ ] . Los paréntesis, corchetes y operadores de punto (“objetos”)


2- !, - , ++ , -- Negación, negativo, incremento y decremento.
3- *,/,% Multiplicación, división, y módulo.
4- << , >> , >>> Cambios a nivel de bit
5- < , <= , > , >= Operadores condicionales
6- = = , != Operadores de igualdad y desigualdad
7- &,^,| Operadores Lógicos a nivel de bit.
8- && , || Operadores Lógicos boléanos
9- = , += , -= , *= , /= , etc... Operadores de asignación.

Ejemplo :
12 * 3 + 4 - 8 / 2 % 3
En este caso primero se ejecutan los operadores * y / de izquierda a derecha.

36 + 4 – 4 % 3
Luego el módulo.

36 + 4 – 1

Y por último las sumas y restas de la derecha

40 – 1

resultado 39

Para forzar a que se ejecute antes una parte de la operación que otra, la podemos
encerrar entre paréntesis.

16- Estructuras de control :

Para poder conseguir cosas más complejas con javascript debemos tener un
cierto control sobre el flujo de nuestro programa, es decir evitar que nuestro
programa sea un conjunto de líneas de código que siempre se ejecuta de
comienzo a fin “línea a línea”.
O podemos querer que algo se ejecute varias veces sin tener que escribir las
mismas líneas todas esas veces que se debe ejecutar.
Para realizar este tipo de cosas más complejas, en javascript tenemos las
estructuras de control, que nos ayudan a tomar decisiones en el flujo de nuestro
programa, y hacer bucles para tareas repetitivas.

Tomas de decisiones :
Nos sirven para realizar una acción u otra en función del estado de las
variables, es decir poder decidir si ejecutar unas instrucciones y no otras,
dependiendo de que está ocurriendo en nuestro programa en un momento
dado.
Ej.: Si en mi página deseo restringir un contenido dependiendo de si el
usuario es mayor de edad o no, tengo que decidir en función de su edad.
Si edad es mayor que 18 entonces
Muestro el contenido
Sino
No te muestro el contenido

En javascript tenemos dos estructuras que nos brindan esa toma de


decisiones :
 IF
 SWITCH

Bucles :

Los bucles son estructuras que se utilizan cuando necesitamos realizar


una acción repetidamente, por ejemplo si quisiéramos escribir en una
página los números del 1 al 100 haríamos :

Desde 1 hasta el 100


Escribir el número actual

En javascript tenemos varios tipos de bucles, cada uno para un tipo de


iteración distinto.

 FOR
 WHILE
 DO WHILE

17- La estructura IF :

La estructura IF es un condicional que realiza una u otra operación en función de


una expresión.

Sintaxis :
if( expresión ) {
acciones a realizar en caso positivo
.........
}
También se puede indicar que acciones se deben realizar en caso de que el
resultado de la evaluación sea negativo, la sintaxis en este caso sería :

if ( expresión ) {
acciones a realizar en caso positivo
......
} else {
acciones a realizar en caso negativo
......
}

Las llaves que se ven en los casos, que encierran a las instrucciones que se deben
de realizar en caso positivo, o en caso negativo, se deben colocar siempre, salvo
que la cantidad de instrucciones sea solo de una, en ese caso son opcionales.
Ej. :
if (dia = = “viernes”)
document.write(“feliz fin de semana”);

Si es viernes aparecerá en el documento la frase, pero si no es viernes, no


aparecerá nada.
Ej. :
if ( credito >= precio ){
document.write(“has comprado el articulo” + nuevoArticulo);
carrito += nuevoArticulo;
credito -= precio;
} else {
documento.write(“ se te acabó el crédito “);
}

Lo que se hace en este ejemplo es comprobar si tengo crédito suficiente antes de


autorizar la compra, si tengo dinero suficiente entonces agrega el artículo al
carrito de compras, y deduce el precio del artículo del crédito que tenía.
En caso de no tener suficiente crédito, me lo avisa con un mensaje.

Expresiones condicionales :

La expresión a evaluar siempre va entre paréntesis, y está compuesta por


variables, que se combinan entre si mediante operadores condicionales.
Los operadores condicionales relacionan dos variables, y nos devuelven
un valor de tipo booleano.
Por ejemplo el operador “= =” evalúa la igualdad de dos variables, y
devuelve true en caso de que sean iguales, y false en caso de que no lo
sean.

18- Estructura IF – parte 2 :

Sentencias IF anidadas:
Una de las formas de realizar sentencias condicionales más complejas es
colocar estructuras IF dentro de otras estructuras del mismo tipo.
Con un solo IF podemos evaluar una condición y separar el flujo de
nuestro programa en dos posibles caminos, pero si queremos tener más
posibilidades de evaluación, debemos hacer anidación de IF.
Ej.:
Quiero evaluar si 2 números son mayores menores ó iguales, para
lo cual tengo que compararlos.
Primero comparo si son iguales, si lo son ya resolví el problema,
pero si no lo son, tendré que resolver cual de los dos es el mayor.

var numero1= 23;


var numero2 =63;

if( numero1 = = numero2 ){


document.write( “ los números son iguales “ );
} else {
if( numero1 > numero2 ){
document.write( “ el primer número es mayor que el
segundo “ );
} else {
document.write( “ el segundo número es mayor que el
primero “ )
}
}

El flujo del programa :


1- Se evalúa si los dos números son iguales
2- Si ambos números son iguales, se muestra el resultado
3- En caso contrario, ambos números son distintos
4- Si son distintos debemos averiguar cual es el mayor
5- Se hace otra comparación para saber si el primero es mayor que el
segundo.
6- Si es positiva la evaluación se muestra un mensaje de que “el primer
número es mayor que el segundo”
7- Si la evaluación es negativa, se muestra el mensaje “el segundo
número es mayor que el primero”

Operador IF sencillo :
Este operador cumple la misma función que el IF normal, pero es mas
sencillo de escribir, proviene de el lenguaje C.
Ejemplo :

Variable = (condicion)? valor1 : valor2

No solo realiza la evaluación de una condición, sino que asigna un valor


a una variable, y ese valor depende de la condición que se evalua.
Si la condición es positiva, se asigna el valor1, si es negativa se asigna el
valor2.

momento=(hora > 12)? “antes del mediodia” : “después del mediodia”;


Ejercicios javascript.-

<SCRIPT LANGUAGE=javascript>
<!--
var edad;
edad=parseInt(prompt("su edad",""));

if (edad>18){
alert("mayor de edad");
alert("su edad es " + edad);
}
//-->
</SCRIPT>

<SCRIPT LANGUAGE=javascript>
<!--
var edad;
edad=parseInt(prompt("su edad",""));

if (edad>18)
{
alert("mayor de edad");
alert("ya tenes " + edad + " años");
}else{
alert("menor de edad");
alert("apenas tenes " + edad +" años de vida");
}
//-->
</SCRIPT>

Función isNaN – la función devuelve “true” en caso de que el valor evaluado sea un
número, y devuelve “false” en caso contrario.
Ej.:
var numero = prompt(“ingrese un número”,””);
if(isNaN(numero))
alert(“el válor ingresado no es un valor numérico válido”);
else
alert(“el número ingresado es : “ + numero);

Función eval – la función “eval” evalúa una expresión pasada como parámetro, y
devuelve el resultado de esa evaluación.

Ej.:
var expresion=prompt("ingrese una expresion numerica","")
alert(eval(expresion));
Si por ejemplo hubiésemos escrito “15 + 7” el alert mostraría 22, pues el eval toma la
expresión y la transforma en algo que puede evaluar lógicamente el mismo javascript.
Ejercicio:
Dados 3 números ingresados por el usuario, mostrar un alert con el mayor de
los 3.
Para simplificar, los números no deben ser iguales.

Solución :
numero1=parseInt(prompt(“ingrese el primer número”,””));
numero2=parseInt(prompt(“ingrese el segundo número”,””));
numero3=parseInt(prompt(“ingrese el tercer número”,””));

if(numero1 > numero2){


if(numero1 > numero3){
alert("el primer número es el mayor");
}else{
alert("el tercer número es el mayor");
}
}else{
if(numero2 > numero3){
alert("el segundo número es el mayor");
}else{
alert("el tercer número es el mayor");
}
}

19- Estructura Switch :

Esta expresión se utiliza cuando tenemos múltiples posibilidades en la


evaluación de una condición.
La estructura “switch” se incorporo a partir de la versión 1.2 de javascript, por lo
que está disponible a partir de la versión 4 de internet explorer, y netscape
navigator.

Sintaxis :
switch(expresión){
case valor1:
sentencias a ejecutar para cuando la expresión da “valor1”
break;
case valor2:
sentencias a ejecutar para cuando la expresión da “valor2”
break;
case valor3:
sentencias a ejecutar para cuando la expresión da “valor3
break;
.
.
.
default:
sentencias a ejecutar para cuando no dio ninguna de las
otras.
}

La expresión se evalúa, y se ejecutan las sentencias asociadas a cada caso. En


caso de que el resultado de la expresión sea cualquiera menos los que se listaron,
se ejecutaran las instrucciones listadas para la opción “default”.
La sentencia “break” si bien es opcional, en caso de no ponerla se evaluaría la
condición y si alguna de las opciones propuestas resultara positiva, se ejecutarán
las sentencias para esa opción y para todas las siguientes.
También es opcional la opción “default”.
Ej.:
var dia=prompt(“ingrese el día de la semana”,””);
switch(dia){
case 1:
document.write(“Lunes”);
break;
case 2:
document.write(“Martes”);
break;
case 3:
document.write(“Miercoles”);
break;
case 4:
document.write(“Jueves”);
break;
case 5:
document.write(“Viernes”);
break;
case 6:
case 7:
document.write(“Fin de semana”);
break;
default:
document.write(“no es un día válido”);
}

En este ejemplo lo único distinto de lo normal es la evaluación si el día es 6 ó es


7, puesto que ambos días son parte del “fin de semana”, se evalúan juntos.
En realidad lo que se hace es hacer una evaluación para el día 7, pero como el
día 6 no tiene “break”, al evaluarse ese día, en realidad se ejecutan las
instrucciones del día 7.
20- Bucle For :

El bucle for se utiliza cuando queremos repetir una instrucción varias veces.
Normalmente se elige el bucle “for” cuando sabemos exactamente cuantas veces
vamos a ejecutar el bucle.
Sintaxis:
For(inicio ; condicion; actualización){
Secuencias a ejecutar con cada iteración.
}

Un bucle for se compone de tres partes, la primera es la inicialización, sirve solo


para indicar el comienzo del bucle, con que valores va a comenzar, y cual va a
ser nuestro índice, una variable.
El segundo parámetro del for es la condición que se debe cumplir para que el
bucle continúe, esta condición se evaluara en cada iteración, para saber si ya fue
alcanzada.
Por último se tiene la condición de actualización, que indica cual va a ser el
cambio que queremos efectuar en la variable de índice cada vez que se ejecute
una iteración, esta actualización se dará antes de la comprobación de si se debe
seguir ejecutando o no.
Ej.:
for(i=0; i<=10; I++){
document.write(i);
}
En este caso la inicialización seteo la variable i en 0, para que ese sea nuestro
primer valor.
Luego se da la condición, es decir que el bucle se ejecutará mientras la variable i
sea menor ó igual a 10.
Y por último se setea el parámetro de actualización, que en este caso es un
incremento, o sea que en cada iteración se incrementará en 1 el valor de la
variable i.
Ej.:
for(i=0;i<=100;i+=)
document.write(i);

En este ejemplo se escriben en la página todos los números del 0 al 100, pero de
2 en 2, o sea que en el documento se vería :
0 2 4 6 7 10 12 14 16 .... 100
Esto es así porque en cada iteración se aumenta el valor de i en 2, y no en 1
como en el ejemplo anterior.
Otro detalle es que no se utilizan las llaves, pues cuando lo que queremos hacer
lo podemos expresar con una sola línea de instrucción, no hacen falta las llaves
de apertura y cierre de bloque.
Si queremos hacer un bucle que haga un conteo descendente, debemos aplicar la
misma lógica pero de forma descendente.
for(i=100;i>=0;i--){
documet.write(i);
}
Con esto el conteo es de 100 hacia 0, y lo logramos decrementando el valor de la
variable i en cada iteración.
Ejercicio 1:
Mostrar un listado de números del 1 al 10, y mostrar al lado su cuadrado.
Es decir que la salida por pantalla debería ser :
1 - 1
2 - 4
3 - 9
4 - 16
etc.....

Solución :
for(i=1;i<=10;i++){
document.write(i + “ - ” + i*i + “<br>”);
}

Ejercicio 2 :
Se debe realizar un bucle que escriba en el documento lo siguiente:
<h1> texto nivel 1 </h1>
<h2> texto nivel 2 </h2>
<h3> texto nivel 3 </h3>
<h4> texto nivel 4 </h4>
<h5> texto nivel 5 </h5>
<h6> texto nivel 6 </h6>

Solución :

for(i=1;i<=6;i++){
document.write(“<h” + i + “> texto de nivel “ + i + “</h” + i + “>”);
}
21- Bucles While y Do While

While –

Este tipo de bucles se utilizan habitualmente cuando queremos repetir un


conjunto de sentencias un número indefinido de veces, siempre que se cumpla
una condición.
Al contrario que el bucle for, no indica varias condiciones, de comienzo,
finalización e incremento, sino que solo se debe especificar la condición que
debe cumplirse para que se realice una iteración.
Es decir :
while ( condición ){
sentencias a ejecutar
}

Ej.:
var dinero =... //cantidad de dinero disponible
while ( dinero > 0 ){
sentencias para gastar dinero mientras tenga...
dinero -= gasto;
}

Do – While

Este bucle, al igual que el bucle while, se utiliza cuando no se sabe la cantidad
exacta de veces que se debe ejecutar dicho bucle.
La principal diferencia entre ambos bucles es que en el bucle do-while, sabemos
que se ejecutará por lo menos una vez, pues en esta estructura la condición se
evalúa al final del bucle, no al comienzo como el while normal.
La estructura del bucle es :

do{
sentencias
}while (condición)

El ejemplo anterior ahora sería así :

var dinero =... //cantidad de dinero disponible


do{
sentencias para gastar dinero mientras tenga...
dinero -= gasto;
}while ( dinero > 0 )

Este bucle se ejecuta siempre por lo menos una vez, y al final se evalúa la
condición, en caso de cumplirse se continua la ejecución de bucle.
22 – Break & Continue

Dentro de los bucles javascript nos da dos opciones más para controlar la
ejecución de los mismos.

Break
Con la palabra break detenemos el bucle, o sea nos salimos de el, y
continuamos con la siguiente línea después del bucle.
Ej.:
for (i=0;i<10;i++){
document.write (i)
escribe = dime si continúo
if (escribe == "no")
break;
}
En el ejemplo lo que se hace es escribir un número del 0 al 9 y en cada
iteración se pregunta al usuario si quiere continuar. En caso de que el
usuario escriba cualquier cosa, se toma como que desea continuar, solo se
sale cuando el usuario ingresa “no”, que se ejecuta el “break”.

Continue

Sirve para continuar con la ejecución del bucle con la siguiente iteración
(volver al principio), sin ejecutar las siguientes líneas después del
“continue”.
Ej.:
var i=0;
while (i<7){
incrementar = dime si incremento
if (incrementar == "no")
continue ;
i++ ;
}

Este ejemplo contaría de 0 hasta 7, pero en cada iteración se pregunta al


usuario si desea incrementar la variable usada como índice.
Si el usuario responde cualquier cosa, la variable i se incrementa pues se
ejecuta la instrucción “i++”, pero si el usuario dice “no” se ejecuta el
“continue” y se salta a la ejecución de la siguiente iteración sin ejecutar
la línea “i++”, o sea que no se incrementa la variable índice.
23- Bucles Anidados :

Anidar bucles implica meter un bucle dentro de otro, esto normalmente se


realiza cuando es necesario realizar algún procesamiento más complejo.
Ej.-
for( i = 0; i < 10; i++){
for( j = 0; j < 10; j++){
document.write( i + “ – “ + j + “<br>”);
}
}

Explicación.-
Se comienza inicializando el bucle externo, con la variable indice i que
valdrá 0. A continuación se inicializará el segundo bucle, con la variable j
que iniciará en 0 también.
En cada iteración se imprime el valor de la variable i, seguido de un
guión “ – “, y luego se imprime el valor de la variable j.
El resultado de las primeras iteraciones sería :

0–0
0–1
0–2
0–4
etc.

El bucle que está anidado, el interno, es el que más veces se ejecuta, pues
por cada iteración del bucle más externo, se ejecutara por completo el
bucle interno. Es decir que el bucle interno hará sus 10 iteraciones en
cada una de las iteraciones del bucle externo.
Cuando el bucle externo pase a la siguiente iteración el resultado por
pantalla seria :
1–0
1–1
1–2
1–3
1–4
1–5
etc.

Así se seguiría hasta que en pantalla aparezca el par “9 – 9”, que sería la
última combinación posible de los bucles.
Ejercicio.:
Basado en el ejemplo anterior, escribir por pantalla todas las tablas de
multiplicar desde la del 1 hasta la del 9.

Solución.:
for(i=0;i<10;i++){
document.write(“<br><b>La tabla del “ + i + “ : </b><br>”);
for(j=0;j<=10;j++){
document.write(i + “ x “ + j + “ = “);
document.write(i*j);
document.write(“<br>”);
}
}

Con el primer bucle comenzamos la tabla actual, y con el segundo, la


desarrollamos.

Ejercicio.:
Crear una tabla que tenga 5 filas y 6 columnas por fila, y que en cada
celda aparezca un par de números que representan fila y columna.

Solución.:
document.write(“<table border=0 cellpadding=3 cellspacing=1>”);
for(i=0;i<=5;i++){
document.write("<tr>");
for(j=0;j<=6;j++){
document.write("<td>");
document.write(i + " - " + j);
document.write("</td>");
}
document.write("</tr>");
}
document.write(“</table>”);
24- Funciones:

A la hora de resolver un problema complejo, existen ciertas partes del problema


que se pueden resolver en forma independiente, y que son mas sencillos de
resolver que el problema entero. Además estos pueden requerir ser realizados
repetidas veces a lo largo de la ejecución de nuestro programa.
Estos procesos pueden ser agrupados, en entidades llamadas “funciones”, lo cuál
nos sirve para no tener que escribir repetidas veces el mismo código cada vez
que queremos ejecutarlo.

Entonces una función es una serie de instrucciones que englobamos dentro de un


mismo proceso, este proceso se podrá ejecutar desde cualquier lugar de nuestro
código con solo llamarlo.
Por ejemplo, si en nuestra página web tenemos una función que nos facilita el
cambiar el color de fondo de la página, esta función la podremos llamar desde
cualquier parte de nuestra página, y en cualquier momento.

No solo podemos ejecutar las funciones que escribimos nosotros, sino también
las que ya están predefinidas en el sistema, la mayoría de los lenguajes de
programación tienen funciones predefinidas para realizar procesos habituales,
como obtener la hora del sistema, mandar un mensaje al usuario, o convertir
variables de un tipo a otro.
Ya hemos utilizado algunas funciones sin darnos cuenta, como por ejemplo la
función write del documento cuando hacíamos document.write( ) que escribía un
texto por pantalla.

Como se escribe una función :

Para definir una función debemos utilizar la siguiente sintaxis :

function nombreFuncion(){
instrucciones...
....
....
}
Primero se escribe la palabra “function” que es una palabra reservada del
sistema. Luego se escribe el nombre de la función, el nombre de la
función sigue las mismas normas que los nombres de variables.
Luego se colocan los paréntesis, que pueden ir vacíos, o llevar
parámetros, que veremos luego.
Y por último, las llaves que contienen todas las instrucciones de nuestra
función, en el caso de las funciones la colocación de las llaves no es
opcional.

Ej.:
function mensajeBienvenida( ){
document.write( “<h1>Bienvenido</h1>”);
}
Una función por si sola no se ejecuta, es decir que si no es llamada
explícitamente entonces no será ejecutada.

Como llamar a una función :

Para llamar a una función y con ello ejecutar todas las instrucciones que
esta función agrupa, lo tenemos que hacer a través de su nombre, seguido
de dos paréntesis.

mensajeBienvenida();

El nombre de la función sigue las mismas normas sintácticas, por lo que


para llamarla se debe escribir correctamente, es decir que se debe respetar
el orden de mayúsculas y minúsculas.

25- Donde insertar las funciones :

En principio, las funciones como cualquier código javascript puede ir en


cualquier parte de la página, siempre dentro de etiquetas <script></script>
Pero existe una limitación a la hora de colocarlas, con relación a los lugares
desde donde serán llamadas. Lo normal es colocar las funciones antes de que se
haga cualquier llamada a la misma.

En caso de que la llamada a la función y la función en si misma estén dentro del


mismo bloque de código, entonces la llamada será válida.
Ej.:
<SCRIPT>
miFuncion()
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
Esto es válido, pues la función y la llamada están dentro del mismo bloque de
script.

También es válido que la función este en un bloque de script anterior al que se


hace la llamada.
Ej.:
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
....
....
....
<SCRIPT>
miFuncion()
</SCRIPT>
En este caso la llamada a la función es en otro bloque de script, pero como esta
luego del que contiene a la función, la llamada es válida.

Cuando da error :

<SCRIPT>
miFuncion()
</SCRIPT>

<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>

En este ejemplo daría un error, pues la llamada se hace en un bloque anterior a el


bloque de script donde se define la función, o sea que la función no está
disponible cuando es llamada.

Consejos :

Es aconsejable escribir todas las funciones en la cabecera de la página,


con lo cual siempre estarán disponibles para la ejecución o llamada desde
cualquier lugar de la página.

26- Parámetros de las funciones:

Las funciones no solo se utilizan como vimos en el capitulo anterior, o sea


llamarlas para ejecutar un conjunto de sentencias, las funciones también nos
brindan la posibilidad de enviarle datos de entrada, y obtener resultados, o datos
de salida.
Los parámetros se utilizan para enviar datos a una función, los cuales la función
utilizará para realizar las acciones requeridas.
Por ejemplo, si una función debe realizar una suma entre dos números, la
función debería recibir esos dos números para poder realizar la operación.
Los dos números son la entrada, o parámetros de entrada, y luego veremos como
poder mandar datos de salida, o sea retornar un valor.

Ej.:
function mensajeBienvenida( nombre ){
document.write( “<h1>Hola “ + nombre + “</h1>” );
}

Esta función acepta un parámetro que es el nombre de la persona que vamos a


saludar, y luego la concatena en lo que saldrá escrito por pantalla.
Para definir en una función un parámetro tenemos que asignarle el nombre, que
será el nombre de la variable que va a contener el dato pasado.
La variable que tiene el valor pasado a la función tendrá validez solo mientras la
función exista, o sea dentro de los limites de la función, cuando se termine la
ejecución de esa función la variable dejará de tener validez.
Para poder pasarle un valor a una función en la llamada a la misma, hay que
escribir el o los parámetros dentro de los paréntesis,

mensajeBienvenida( “Pedro” );

Al ejecutarse la función el parámetro tomara el valor “Pedro”, y por pantalla se


escribira “Hola Pedro”.
Los parámetros pueden recibir cualquier tipo de datos, numérico, texto,
booleano, pero no se especifica en la función de que tipo es el dato que va a
admitir, por lo que se debe tener cuidado dentro de la función con el tipo de
operaciones que se realizarán con los parámetros.

Múltiples parámetros :

Una función puede recibir tantos parámetros como queramos, y para


expresarlo se colocan parámetros separados por comas dentro de los
paréntesis.
Ej.:

function mensajeBienvenida( nombre, colorTexto ){


document.write ( “<font color=” + colorTexto + “>” );
document.write ( “<h1> Hola “ + nombre + “</h1>” );
document.write ( “</font>” );
}

Un ejemplo de cómo llamar a la función podría ser este :

var nombre = “Juan Perez”;


var color = “red”;
mensajeBienvenida( nombre , color );

Cuando pasamos variables a una función, en realidad lo que estamos


pasando es el valor que contiene la variable, no la variable en si.

Los parámetros se pasan por valor :

Cuando decimos que los parámetros en javascript se pasan por valor, es


que dentro de la función lo único que tenemos es el valor de lo que se nos
envió, sea esto un valor literal, o una variable.
Ej.:

function pasoPorValor(miParametro){
miParametro = 32;
document.write("he cambiado el valor a 32") ;
}
var miVariable = 5;
pasoPorValor(miVariable)
document.write ("el valor de la variable es: " + miVariable)
En este ejemplo, creamos una variable “miVariable” y le asignamos el
valor 5, luego pasamos esa variable como parámetro a la función
“pasoPorValor”, y dentro de esta función a través de “miParametro”
tenemos acceso al valor de lo que nos fue pasado, o sea al valor que tiene
la variable “miVariable”.
Dentro de la función, se modifica el valor de “miParametro”, pero sin
embargo, el valor de “miVariable” nunca se modifica, pues solo pase el
valor de esta, y no la variable en si mismo.
En javascript solo se pueden pasar parámetros por valor, en otros
lenguajes también se acepta el pasaje de parámetros por referencia.

27- Valores de retorno :

Las funciones no solo pueden recibir parámetros, sino que también pueden
devolver valores como resultado de operaciones internas de la función.
Por ejemplo, una función que calcule la suma de dos números, recibe como
parámetros de entrada a esos dos números, y retorna el valor de la suma de
ambos.
Ej.:
function media( numero1, numero2 ){
var resultado;
resultado = ( numero1 + numero2 ) / 2;
return resultado;
}

Esta función toma dos valores, y devuelve la media de los dos.


Para especificar el valor de retorno se utiliza la palabra clave “return” seguido
del valor que se desea retornar.

Para recibir los valores retornados por una función se debe asignar el mismo a
alguna variable o expresión, a través de los operadores de asignación.
Ej.:
var miMedia;
miMedia = media(12, 8);

En este ejemplo creo una variable “miMedia” y después le asigno el valor que
retorna la función.

Múltiples return :

En la misma función podemos colocar mas de un return, aunque solo


vamos a poder retornar una cosa, pero el retorno depende de lo que
suceda en la función, dependiendo del camino de la función es que valor
se retornará.

Ej.:
function returnMultiple( numero ){
var resto= numero % 2;
if ( resto = = 0){
return 0;
}else{
return numero;
}
}
Esta función recibe un parámetro, y verifica si el número ingresado es
par, en caso de que si lo sea, retorna 0, en caso contrario devuelve el
parámetro recibido.

Ambito de las variables en funciones :

Dentro de las funciones también podemos declarar variables, incluso los


parámetros son como variables que se declaran en la cabecera de la
función, y se inicializan al llamar la función. Todas las variables
declaradas ( con la palabra reservada “var” )en al función son locales
dentro de la función, es decir que solo tendrán validez dentro de esa
función.
En cambio si se referencia a una variable sin declararla con la palabra
“var” javascript la busca dentro de las variables globales de la página, y
si no la encuentra, la crea, siendo entonces una variable global.
En caso de que dentro de la función se haga referencia a una variable sin
declararla dentro de ese ámbito, si javascript encuentra esa variable
dentro del ámbito global de la página, lo que hace es tomar esa referencia
local como una referencia de la variable global, y por lo tanto puede
modificar su contenido.

28- Arrays en Javascript :

En los lenguajes de programación complejos existen estructuras de datos que nos


permiten almacenar información mas compleja que simples variables.
Los Arrays son estructuras comunes a todos los lenguajes de programación, es
como una variable en la que podemos introducir varios valores, en lugar de uno
solo como ocurre con las variables comunes.

Los Arrays nos permiten guardar varias variables, y poder acceder a ellas de
forma independiente, es como tener una variable con distintos compartimentos,
donde podemos introducir datos distintos. Para especificar en que
compartimiento se guarda un valor tenemos un “índice” que nos facilita la
introducción y recuperación de esos valores.
El objeto Array está disponible a partir de la versión 1.1 de javascript.

Creación de Arrays :

El primer paso para utilizar un Array es crearlo, para ello utilizamos un


objeto ya creado en el explorador.
La sentencia para crear un objeto Array es la siguiente :

var miArray = new Array( );

Esto crea un Array de nombre “miArray” en la página donde se está


ejecutando el script, el Array se crea sin ningún contenido, es decir que
no tiene ninguna casilla o compartimiento creado.
También se puede crear el Array especificando el número de
compartimientos que contendrá :

var miArray = new Array ( 10 );

En este caso el Array tendrá 10 posiciones disponibles para guardar


datos.
Tanto si se especifica la cantidad de casillas que contendrá, o si no se
especifica, podemos introducir los datos igualmente.
Si la casilla esta creada, el dato se introduce, si no fue creada, se crea
automáticamente, y luego se introduce el dato. Esta creación de casillas
es dinámica y se crean a medida que el script se ejecuta.
Ej.:
miArray[0]= 290 ;
miArray[1]= 27;
miArray[2]= 127;

Se introducen indicando entre corchetes el índice de la posición donde se


introducirá el dato.
Un dato importante es que los Arrays siempre comienzan en la posición
0, así que un Array que tenga 10 posiciones, tendrá casillas del 0 al 9.

Recorrer un array :

Para recorrer un Array recurrimos a su índice, haciendo referencia


a el dentro de los corchetes.
Ej.:

var miArray = new Array(3)

miArray[0] = 155
miArray[1] = 4
miArray[2] = 499

for (i=0;i<3;i++){
document.write("Posición " + i + " del array: " +
miArray[i])
document.write("<br>")
}

Aquí definimos un Array de tres posiciones, y luego de introducir


los valores en cada una de las posiciones, recorremos el Array con
un bucle for, y utilizando el indice del for ( i ) recorremos cada
una de las posiciones del Array.

Tipos de datos de un Array :

En las casillas de un Array puede guardarse cualquier tipo de dato


existente en javascript, sean numéricos, booleanos o texto.
Inclusive se puede guardar distintos tipos en cada posición, sin
importar donde.
Ej.:

var miArray = new Array( );


miArray[0] = “un texto”;
miArray[1] = 12;
miArray[2] = true;
Longitud del Array :

Todos los Arrays aparte de almacenar en cada posición un valor,


almacenan la cantidad de posiciones que contiene el Array en
todo momento, para ello se utiliza una propiedad del objeto
Array, la propiedad “length”.
Una propiedad es como una variable que guarda un número igual
al número de casillas del Array.
Para acceder a una propiedad de un objeto se accede a través del
operador punto “.”, se escribe el nombre del Array al que
queremos acceder a sus propiedades, seguido de un punto, y luego
la palabra “length”.

Ej.:
var miArray = new Array ( );
miArray[0] = 123;
miArray[1] = 456;
miArray[2] = 789;

document.write (“El largo del Array es : “ + miArray.length);

Este script mostrara “El largo del Array es : 3 “.


Es muy habitual que se utilice la propiedad length para recorrer
un Array por todas sus posiciones cuando no se conoce el total de
las posiciones.
Ej.:
for( i = 0; I < miArray.length; i++){
document.write( miArray [ i ]);
}

Ej.:
var miArray = new Array(2)
miArray[0] = "Colombia"
miArray[1] = "Estados Unidos"

miArray[5] = "Brasil"

for (i=0;i<miArray.length;i++){
document.write("Posición " + i + " del array: " +
miArray[i])
document.write("<br>")
}

Si bien el Array fue declarado con 2 posiciones, luego se agrega


un valor en la posición 5 del Array, y se genera un bucle que
recorre todas las posiciones del Array desde 0 hasta el
miArray.length.
El resultado sería :
Posición 0 del array: Colombia
Posición 1 del array: Estados Unidos
Posición 2 del array: null
Posición 3 del array: null
Posición 4 del array: null
Posición 5 del array: Brasil
Lo que sucede es que al introducir un valor en la casilla 5, se
crean todas las casillas intermedias también, pero como estas
posiciones están sin inicializar, el valor es “null” o “undefined”
según el explorador.

29- Arrays Multidimensionales :

Son estructuras que almacenan los datos en más de una dimensión. Los Arrays
vistos hasta ahora almacenan los datos en una sola dimensión, por ello utilizan
solo un índice.
Los Arrays de dos dimensiones guardan sus datos como si fuesen tablas con filas
y columnas, y por ello necesitamos de dos indices para acceder a cada una de las
posiciones.
Un Array multidimensional es como un Array que en cada posición guardara
otro Array, es decir que para cada posición del Array, existen mas posiciones
internas.
En javascript no existe realmente un Array multidimensional, para simular estas
estructuras podemos definir Arrays y en cada una de las posiciones definir un
Array como contenido de la posición.
Ej.:
var temperaturas_medias_ciudad0 = new Array(3);
temperaturas_medias_ciudad0[0] = 12;
temperaturas_medias_ciudad0[1] = 10;
temperaturas_medias_ciudad0[2] = 11;

var temperaturas_medias_ciudad1 = new Array (3);


temperaturas_medias_ciudad1[0] = 5;
temperaturas_medias_ciudad1[1] = 0;
temperaturas_medias_ciudad1[2] = 2;

var temperaturas_medias_ciudad2 = new Array (3);


temperaturas_medias_ciudad2[0] = 10;
temperaturas_medias_ciudad2[1] = 8;
temperaturas_medias_ciudad2[2] = 10;

Hemos creado 3 Arrays de una dimensión, y tres elementos cada uno. Ahora
creamos un Array de 3 elementos y dentro de cada casilla del Array nuevo
incluiremos los Arrays creados anteriormente.

var temperaturas_cuidades = new Array (3);


temperaturas_cuidades[0] = temperaturas_medias_ciudad0;
temperaturas_cuidades[1] = temperaturas_medias_ciudad1;
temperaturas_cuidades[2] = temperaturas_medias_ciudad2;

Con esto creamos un Array de dos dimensiones.


Para introducir un Array entero, solo debemos hacer referencia a su nombre.
El Array “temperatura_ciudades” es nuestro Array multidimensional.

Recorriendo un Array multidimensional :

Para ello tenemos que hacer un recorrido por cada una de las casillas del
Array bidimensional y dentro de estas hacer un nuevo recorrido para cada
una de sus casillas internas. Es decir, un recorrido por un Array dentro de
otro.
El método para hacer un recorrido dentro de otro es colocar un bucle
dentro de otro, lo que se llama un bucle anidado.
Ej.:
for (i=0;i<temperaturas_cuidades.length;i++){
document.write("<b>Ciudad " + i + "</b><br>");
for (j=0;j<temperaturas_cuidades[i].length;j++){
document.write(temperaturas_cuidades[i][j]);
}
}

Con el primer bucle realizamos un recorrido a la primera dimensión


del Array y utilizamos la variable i para llevar la cuenta de la posición
actual. Por cada iteración de este bucle escribimos el número de la ciudad
que estamos recorriendo en ese momento.
Posteriormente ponemos otro bucle que va recorriendo cada una de las
casillas del Array en su segunda dimensión y escribimos la temperatura
de la ciudad actual en cada uno de los meses.
Una vez que acaba el segundo bucle se han impreso las tres temperaturas.
El primer bucle continúa repitiéndose hasta que todas las ciudades están
impresas.

Inicialización de Arrays :
Vamos a ver una manera de inicializar sus valores a la vez que lo
declaramos, así podemos realizar de una manera más rápida el proceso de
introducir valores en cada una de las posiciones del Array.
El método normal de crear un Array vimos que era a través del objeto
Array, poniendo entre paréntesis el número de casillas del Array o no
poniendo nada, de modo que el Array se crea sin ninguna posición. Para
introducir valores a un Array se hace igual, pero poniendo entre los
paréntesis los valores con los que deseamos rellenar las casillas separados
por coma.

Ej.:
var diasSemana = new Array
("Lunes","Martes","Miércoles,","Jueves","Viernes","Sábado","Do
mingo")

El Array se crea con 7 casillas, de la 0 a la 6 y en cada casilla se escribe


el día de la semana correspondiente (Entre comillas porque es un texto).

Ahora vamos a ver algo más complicado, se trata de declarar el array


bidimensional que utilizamos antes para las temperaturas de las ciudades
en los meses en una sola línea, introduciendo los valores a la vez.

var temperaturas_cuidades = new Array(new Array (12,10,11), new


Array(5,0,2),new Array(10,8,10));

También podría gustarte