Introduccion a java script

Autor:Luis Pilo Aceituno.
E-mail:luispiloaceituno@gmail.com (para cualquier sugerencia y/o información sobre errores detectados)
Última actualización:27/03/2015
1.INTRODUCCIÓN
1.1.-Origen de JavaScript
1.2.-Utilidades de JavaScript
1.3.-Como y donde colocar el código JavaScript.
1.4.-Formas de ejecutar un script
1.5.-Modelo cliente/servidor
1.6.Ejemplo:Nuestro primer script
2.ELEMENTOS BÁSICOS
2.1.-Normas de escritura en JavaScript.
2.2.Caracteres especiales
2.3.-Tipos de datos
2.3.-Variables
2.4.-Declaración de variables
2.5.-Ámbito de las variables
2.6.-Conversión de datos
2.7.-Operadores
2.8.-Mensajes
3.ESTRUCTURAS DE CONTROL
3.1.-Estructuras condicionales
3.2.Bucles
3.3.-Otras sentencias de control
4.FUNCIONES
4.1.-Sintaxis
4.2.-Invocación
4.3.-Múltiples retornos
4.4.-Funciones básicas
4.5.-Nuestra librería de funciones
5.ESTRUCTURAS DE DATOS
5.1.Arrays
5.1.1.Concepto de Array
5.1.2.Declaración de un Array como un objeto de la clase Array
5.1.3.Asignación de valores a un Array
5.1.4.Declaración resumida
5.1.5.Arrays multidimensionales. Tablas
5.1.6.Recorrer los elementos de un Array
5.1.7.Métodos para trabajar con Arrays
5.1.8.Propiedades del objeto Array
5.OBJETOS
5.1.-Introducción
5.2.-Instanciar un objeto.
6.PROGRAMACIÓN DE EVENTOS
6.1.-Tipos de eventos.
6.2.-Objetos en JavaScript
INTRODUCCIÓN A JAVA SCRIPT

1.INTRODUCCIÓN
1.1.-Origen de JavaScript
“El primer ayudante del lenguaje HTML fue Java mediante el uso de Applets. Los
Applets son pequeños programas incrustados en las páginas web, que fueron usadas por
Netscape para programar en las páginas web.Netscape construyo sus navegadores
compatibles con los Applets y desarrollo un lenguaje de programación llamado LiveScript,
que era más fácil de usar que Java.
Luego surgió una alianza entre Netscape y Sum Microsystem (creador de Java), para
desarrollar en forma conjunta este nuevo lenguaje , de manera que se creo el JavaScript,
útil dentro de páginas web, fácil de programar y que permite crear programas pequeños
dentro de una página.
La sintaxis de JavaScript se parece a la de Java, pero son cosas distintas, a
javaScript se lo interpreta, mientras que a los programas de Java se los compila.”
(Bases de JavaScript. Ana Nieves Rodríguez)
En los lenguajes compilados todo el programa se traduce al lenguaje maquina ,
necesitándose un compilador. En los interpretados la traducción se realiza instrucción a
instrucción (suelen ser mas lentos).
1.2.-Utilidades de JavaScript
Las instrucciones de JavaScript permiten crear pequeños programas dentro de una
pagina web. Los objetivos son interaccionar con el usuario (páginas dinámicas) u obtener
efectos visuales atractivos.
• Permite la creación de efectos especiales
• Validas los datos introducidos a través de un formulario
• Otros.

1.3.-Como y donde colocar el código JavaScript.
El código JavaScript se escribe en un documento HTML. Podemos incrustarlos en:
• En la cabecera del documento HTML. Entre las etiquetas <HEAD> </HEAD>
• En el cuerpo del documento HTML. Entre las etiquetas <BODY> </BODY>
• En cualquier parte de un documento HTML, entre las tags de JavaScript. Ana
Las tags (etiquetas) que permiten introducir código JavaScript incrustado en un
documento HTML son:
• <script language=”JavaScript”>
código JavaScript
</script>
• <script>
código JavaScript
</script>
• <script type=”text/javascript”>
código JavaScript
</script>
También se puede importar un archivo que contenga el código JavaScrip. Esto suele hacerse
si deseamos crear una biblioteca de funciones. La sintaxis para importar el archivo es:
<script src=”nombreArchvo.JS”>
</script>
1.4.-Formas de ejecutar un script
1) Directa:Incorporamos el script en la cabecera o el cuerpo del documento HTML.
2) Como respuesta a un evento:Un evento es una acción realizada por el usuario. El
programa captura el evento, realiza una tarea y emite una respuesta.

Los navegadores antiguos no saben interpretar el código JavaScript. Por ello se escribe como si
fuera un comentario, con la notación empleada en html
<script type=”text/javascript”>
<!-- Código JavaScript →
</script>
Podemos mostrar un texto alternativo sin el navegador no puede interpretar el código javascript
<NOSCRIPT>
“Texto que mostrara”
</NOSCRIPT>
1.5.-Modelo cliente/servidor
Es una relación entre procesos que se ejecutan en distintas maquinas
• Denominamos 'Servidor' al proveedor de los servicios
• Denominamos 'Cliente' al consumidor de dichos servicios.
Ambos interaccionan mediante el intercambio de mensajes.
La computadora del usuario (cliente), produce una demanda de información a las
computadoras que proporcionan la información (servidor) el cual da respuesta al cliente.
1.6.Ejemplo:Nuestro primer script
Seguimos los siguientes pasos
i ) Escribimos el script
ii) Lo guardamos con extensión .html
iii)Abrimos el archivo .html
1.El código de este primer script es el famoso ' hola mundo'

2.Programa en respuesta a un evento
2.ELEMENTOS BÁSICOS
2.1.-Normas de escritura en JavaScript.
2.2.Caracteres especiales

2.3.-Tipos de datos
Pueden ser:
• Numéricos
• Cadenas de caracteres:Pueden estar encerradas en comillas simples o dobles. Una
variable de texto sin valor asignado tiene un valor null (desconocido).
• Valores booleanos :Las variables de este tipo pueden tomar los valores true (cierto) o
false (falso).
-------- ---------------------------------------------------------------------------------------------------------------
En JavaScript no se declaran las variables antes de usarlas
(Lenguaje C/C++): int edad /* Edad es una variable entera*/
Lenguaje JavaScript/PHP):edad=47;/*Edad no ha sido declarada, sabemos que es
un entero al asignarle un valor )
2.3.-Variables
Las variables son posiciones de memoria en donde se 'guardan' datos. Imagina la memoria
como celdas capaces de almacenar datos. Una variables es una o mas celdas que almacenan algún
dato.
✔ Las variables deben comenzar con un carácter alfabético o guión bajo.
✔ Están prohibidos los siguientes caracteres.
✔ + , $, espacio
✔ Palabra reservada como for, while,function,...
Es una buena practica dar nombres significativos a las variables
edad=47 ; /*Buena elección para el nombre de la variable*/
a=47 ;/*Si el programa es extenso y complejo tras un tiempo es posible que el autor no sepa
que es 'a'.
2.4.-Declaración de variables
Disponemos de dos sintaxis:
var nombre_variale=valor;
variable nom_variable=valor;
Si no se asigna un valor a la variable esta tomara un valor indeterminado.

2.5.-Ámbito de las variables
El ámbito de una variable es el alcance de dicha variable. Distinguimos entre dos tipos de
variables , según el ámbito.
• Global:Su alcance es todo el programa. Debemos tener cuidado con la declaración de
variables globales. No deben darse el mismo nombre a dos variables distintas.
• Locales:Se declaran en una porción de programa entre llave
2.6.-Conversión de datos
En JavaScript las conversiones de tipo en las variables son implícitas, esto es, una variable
puede almacenar números en una linea de código y en otra almacenar texto
a=47; /*edad*/
a=”Luis”; /*nombre*/
Esto es correcto (otras cuestión es que sea una buena practica de programación)
2.7.-Operadores

Ejemplo:Implementa este script y observa el uso de los operadores aritméticos
OBSERVACIONES:
1.-Para introducir un espacio en blanco 'le pasamos' a document.write() la etiqueta de
html <br>.
2.-Presta atención al uso del operador '+' para concatenar cadenas.
3.-Habrás observado, al ejecutar el script anterior, que no se muestran las tildes.Te
aconsejaría que cuando pruebes los programas omitas las tildes (y cualquier otro
carácter que no admita html).Cuando escribas el script para su explotación debes
hacer uso de los recursos que el html te proporciona para escribir dichos caracteres.
La tabla siguiente puede servirte de ayuda para salvar el problema anterior.

Ejercicio:Implementa un script que realice las siguientes operaciones. Muestralas en el
navegador.

2.8.-Mensajes
Disponemos de una serie de métodos que permite 'lanzar' ventanas, de diferentes
tipos, al usuario para informarle de alguna situación anómala, solicitarle información,..
Mas adelante, cuando estudiemos el modelo de objetos de JavaScript, estudiaras que
estos métodos son propiedad del objeto windows. En este estadio de tu aprendizaje de
JavaScript solo necesitas conocer de su existencia y practicar su uso.
Para 'lanzar' mensajes al usuario disponemos de lo siguientes métodos.
1.-alert
Saca un mensaje por la pantalla, dejando al usuario la posibilidad de aceptarlo. Se emplea
para mostrar información destacándola de la que se mostraría en el navegadores
alert(<texto que se mostrara>)
2.-prompt
Se emplea para solicitar datos al usuario. El valor devuelto por este método será asignado a
una variable.
Su sintaxis es la siguiente: prompt(<texto>,<valor por defecto>)
• <texto> :Suele ser un mensaje informando al usuario del dato que le solicitamos
• <valor por defecto> :En caso de no proporcionar valor alguno tomara el incluido
en este parámetro

Ejemplo:Implementa el siguiente script. Presta atención la las observaciones que te hago
tras el código.
OBSERVACIONES:Es posible que haya fallado este script. La razón es muchos
navegadores interpretan el operador de suma como el de concatenación de caracteres.
Para solucionar este 'problema' usamos la siguiente función
parseInt(variable)
Ejercicio:Repite el script anterior con la mejora propuesta.
Buenas prácticas de programación:Cada linea de código debería realizar una única
accion. Ademas las sentencias deberían ser lo más simples posibles.
En el ejemplo anterior tienes, entre otras posibilidades, las siguientes
Opción 1: a=(prompt("ingresa numero a",""));
b=(prompt("ingrese numero b",""));
s=parseInt(a)+parseInt(b);
Opción 2: a=parseInt(prompt(“Ingresa numero a”,””);
b=parseInt(prompt(“Ingresa numero b”,””);
s=a+b;
La segunda opción ademas de obtener el dato (acción 1) realiza la conversión (accion
2).En la primera opción tan solo obtenemos los datos y a continuación, en otra linea de
código, realizamos la conversión. Esta es la opción preferible

A medida que se adquiere experiencia programando es más difícil recordar esta regla. Se
tiende a minimizar el número de lineas de código a expensas de la simplicidad. Evitar esto
es uno de los 'eternos caballos de batalla' del programador.
3.confirm
Saca un mensaje de confirmación,con los botones:Aceptar y Cancelar.
Sintaxis: confirm (<texto a mostrar en la ventana>)
La ventana mostrara el texto , que suele ser una pregunta y el usuario elegirá aceptar o no.
Este método retorna un valor booleano (cierto o falso)

3.ESTRUCTURAS DE CONTROL.
Las instrucciones que explicaremos a continuación permiten cambiar el flujo normal
del programa. Sin estas instrucciones deberían ejecutarse los programas secuencialmente.
Esta la forma en que se han desarrollado los ejemplos propuestos hasta ahora.
Es obvio que en problemas de cierta complejidad las sentencias que se ejecuten
dependerán del cumplimiento de ciertas condiciones (sentencias if – else) , en otras
ocasiones deberemos realizar las mismas acciones un número determinado de veces
,conocido a priori (bucles for) o no (bucles while),etc
Con las sentencias de control que se verán en este epígrafe podrás implementar
cualquier programa. No obstante cuando este es de cierta complejidad y/o extensión
deberemos hacer uso de otro elemento de gran potencia:las funciones.
NOTA:Es una práctica frecuente desarrollar los programas empleando pseudocódigo antes
de implementarlos en un lenguaje determinado. No existe una única forma de 'escribir' en
pseudocódigo. Se aprovechara este epígrafe para proponerte una posible notación. No
olvides dos cosas:
i. El código es una ayuda , no un fin en si mismo, siéntete libre de adoptar otra
notación cuando codifiques tus programas en pseudocódigo. Emplea si lo crees
oportuno una notación personal. Pero no olvides que en la documentación entregada
al cliente (o profesor) debes incluir un anexo donde expliques el significado de tu
notación si esta se aparta de los usualmente empleados.
ii. Si al compilar /interpretar el programa/script este no proporciona el resultado
esperado, esta mal desarrollado. No sirve que tus razonamientos sobre el papel
(lease pseudocódigo) te 'digan' lo contrario.

3.1.-Estructuras condicionales
Merced a estas instrucciones nuestro script realizará una u otra opción según el valor
que tome la variable que se evalúe en la condición de la sentencia.
a) Instrucción IF
Cuando se cumpla la condición se llevaran a cabo las instrucciones indicadas .
(pseudocódigo)
( Nota:Acción puede constar de varias instrucciones )
(Implementación en JavaScript)
Cuando se cumple la condición se lleva a cabo el código entre las llaves .De no
cumplirse se ejecuta la siguiente sentencia que este en el script.
b) Instrucción IF-ELSE
En determinadas ocasiones cuando no se cumple la condición deseamos se lleve a
cabo una acción alternativa. Esta se implementa el la clausula ELSE
(pseudocódigo)
si condición entonces
Acción
fsi
si condición entonces
acción A
else
acción B
fsi.

Ejemplo:Prueba el siguiente script.
c) Estructura SWITCH
Cuando las condiciones que debemos evaluar son superiores a dos ( o tres ) no es
práctico emplear los IF-ELSE (demasiadas de estas sentencias, sobre todo si se anidan) son
difíciles de entender.
En estos casos es preferible emplear la siguiente instrucción
(pseudocódigo)
según expresión hacer
caso , valor expresión 1
<instrucciones_1>
caso, valor expresión 2
<instrucciones_2>
….
caso, valor expresión n
<instrucciones_n>
caso, sino
<instrucciones_k>
finsegun

switch (expresión)
{
case valor1:
accion1;
break;
case valor2:
accion2;
break;
…...
case valorn:
accion;
break;
default:
accionk;
}
OBSERVACIONES:
1. Se evalúa expresión. Si su valor coincide con valor1 se ejecutan las sentencias tras
ella,si coincide con valor2 se ejecutan las acciones tras ese valor,...
2. Después de cada grupo de sentencias , correspondiente a un valor dado de expresión ,
se ejecuta una instrucción break para salir del switch y continuar con el flujo normal
del programa.
3. Si expresión no coincide con ninguno de los valores asociados a un 'case' se ejecuta
la instrucción que aparezca tras la sentencia default
Ejemplo:Implementa el siguiente script.

Ejercicio:Implementa un script que realice las 4 operaciones básicas. Debes emplear una
sentencia switch.
3.2.Bucles
a)Bucles WHILE
Lo empleamos cuando no sabemos a priori el numero de veces que debemos iterar las
instrucciones indicadas.
Mientras se cumpla la condición del bucle realizaremos las instrucciones en el
indicadas. A veces nos interesa comprobar el no cumplimiento de dicha condición.
Un detalle importante:Si no se cumple la condición no se ejecuta el cuerpo del
bucle.
(pseudocódigo)
Ejemplo:Implementa este script.Observalo con atención.¿Te sientes capaz de explicar la
necesidad de la ultima sentencia ?
Mientras condición hacer
Acciones
fmientras

B ) Bucle FOR
Lo empleamos cuando conocemos el número exacto de iteraciones.
(pseudocódigo)
Observaciones:
i. var toma un valor inicial y finaliza con un valor, que hemos denominado,
valor_fin. Cuando lo alcance dejara de ejecutarse el cuerpo del bucle.
ii. Inc es opcional. Es el valor que se suma a 'var' para que se incremente. Por
defecto es la unidad.
-------------------------------------------------------------------------------------------------------
Ejemplo:Observa esta otra implementación del script anterior.
Desde var=valor_ino hasta valor_fin [inc] hacer
instrucciones;
fdesde

c) DO WHILE
Esta sentencia garantiza que al menos se ejecuta una vez el cuerpo del bucle
(pseudocódigo)
Ejemplo:Escribe este script.
do {
sentencias;
}while(condición)
hacer
sentencias
hasta (condición)

3.3.-Otras sentencias de control

4.FUNCIONES
Una función es un fragmento de código, que realiza cierta tarea con sentido por si
misma, la cual dada su importancia o necesidad de volver a ser usado , en este u otros
scripts, decidimos codificarlo dándole un nombre y fijando para el los parámetros que
necesita para ser usado y su valor de retorno (en caso de existir estos)
4.1.-Sintaxis
Para que la función retorne una valor debemos incluir en su código, al menos ,
una sentencia
return valor_devuelto ;
4.2.-Invocación
Para usar una función debemos asignar su nombre a una variable,en caso de retornar
esta algún valor, o simplemente escribir su nombre en el punto del script que la necesitemos.
NOTA:Los parámetros son obligatorios, tanto si requiere parámetros como sino.
Ejemplo:Implementa este script.
variable=nom_función(<lista parámetros>);
nom_función(<lista parámetros>);

Este fragmento de código merece especial atención.
i. Cuando se trabaja con funciones debemos tener en cuenta los siguientes detalles.
i. Declararlas entre los tags de JavaScript .
ii. Declararla antes de ser llamada.
iii. Lo mas conveniente es declararlas en el 'HEAD' o en un archivo aparte (esto
es útil si deseamos construir una biblioteca de funciones personal).
ii. Observa que , en previsión de que el script se ejecute en un navegador obsoleto,
se han usado comentarios html para ocultar , a dichos navegadores, el código
javascript.(Esto se ha realizado por razones pedagogicas. Es poco probable que
tu navegador no interprete el código JavaScript.)
Ejercicio:Implementa un script que permitan realizar las cuatro operaciones básicas
usando funciones para implementar cada una de las operaciones.
4.3.-Múltiples retornos
Una función puede retornar varios valores para ello debemos incluir varias sentencias
return valor_retornado
Buenas prácticas de programación:No debe incluirse mas que un return por cada función.
Solo debería haber un punto de salida de la función.

4.4.-Funciones básicas
Dispones de un número considerable de funciones ya implementadas. Estas te permitirán
realizar un número de tareas útiles para tus programas.
No es necesario que memorices estas funciones. Acude a los manuales y/o Internet cuando
tengas duda de si existe o no implementado un método para realizar cierta tarea.
A continuación te muestro alguna de las funciones mas interesantes.
4.5.-Nuestra librería de funciones
Podemos crear una librería con las funciones que creamos de más utilidad para nuestra/s
aplicaciones. Esto presenta como principal ventaja la reutilización de nuestro código.
Las funciones que consideremos de gran utilidad podemos almacenarla en un archivo/s con
extensión .js e importarlas, cuando nos sean necesarias, en nuestros scripts.

Para crear una librería de funciones te propongo los siguientes pasos.
i. Codifica las funciones que consideres de utilidad para tu aplicación ( o cualquier otra
que pienses te será necesaria en futuras aplicaciones) en un archivo y guardalo con la
extensión .js.
ii. Añade la siguiente sentencia de importación en el <head> del archivo .html que vaya
a hacer uso de estas funciones.
Llegados a este punto creo que debo hacer algunas observaciones
I. Podrías escribir la anterior sentencia de importación en cualquier otro punto de tu
script, por ejemplo en el <body>, no obstante dado que hemos aconsejado declarar
las funciones en el <head> e importarlas cuando nos sean necesarias me parece que
lo más coherente es aconsejarte su importación en el <head>
II. La etiqueta src debe ser establecida con el nombre del archivo y su ruta .En el
ejemplo no se incluye la ruta porque se ha guardado el archivo de extensión .js en el
mismo directorio que el script
III.Observa que tras el cierre de la etiqueta <script ….> viene su etiqueta de cierre,
</script>.
Iii. Cuando necesitemos invocar alguna función, de las implementadas en el archivo de
extensión .js, se invocara de la forma habitual, esto es
nombreFuncion(<lista de parámetros>
Observa el siguiente ejemplo, en el que se ha creado una función de 'saludo'.
1.-misFunciones.js
<head>
<script type=”text/javascript” src=”nomArchivo.js”></script>
</head>

2.ejemplo.html
Ejercicio:Crea un script que simule una calculadora sencilla (suma, resta, producto y
división.Las funciones que realizan estas operaciones deben encontrarse en un archivo
externo y ser invocadas desde el script.
5.ESTRUCTURAS DE DATOS
5.1.Arrays
5.1.1.Concepto de Array
Un Array es una estructura de datos que almacena datos de distintos tipo.
Ejemplo:El siguiente Array almacena mi lista de la compra.
Pan Aceite Leche fruta
Una de las diferencias más importantes de JavaScript con respecto a otros lenguajes de
programación, en lo que al manejo de arrays se refiere, es la posibilidad de declarar un
array que almacene datos de distintos tipos.
Ejemplo:Las notas de mis estudiantes.
Francisco Javier 9 4 6
Marta 7 8 7
Rubén 8 8 7

Del ejemplo anterior extraemos dos conclusiones
1. Un mismo array puede almacenar datos de distinta naturaleza (en el ejemplo
números y cadenas de caracteres)
2. Un array puede constar de una o varias filas.
La última de las conclusiones nos lleva a una posible clasificación de los arrays
considerando su dimensión en
1. Arrays unidimensionales o vectores:Aquellos Arrays que constan de una única fila y
varias columnas
2. Arrays multidimensionales :Aquellos Arrays que constan de varias filas y columnas.
Entre los Arrays de la segunda categoría destacan las tablas o Arrays de dos
dimensiones. El ejemplo con las notas de los estudiantes y su nombre correspondería a lo
que hemos convenido en llamar Tabla o Array bidimensional (en la literatura ambas
denominaciones se intercambian nosotros haremos igual).
5.1.2.Declaración de un Array como un objeto de la clase Array
--------------------------------------------------------------------------------------------------------
En el epígrafe que sigue a este se te introducirá en el concepto de Objeto y Clase de
Objetos de momento, para poder seguir los contenidos que se van es exponer a
continuación , te bastará con saber que “un objeto es un ente del mundo real que posee
propiedades y que interactua de determinada forma con su entorno , por ejemplo mediante
el intercambio de información”.En este contexto un Objeto Array seria una colección de
datos , de distinta naturaleza, que pueden ser leídos,modificado su valor, contado su
número,....En el contexto de las Bases de Datos un objeto Cliente es una parte de la Base de
Datos que nos interesa modelar que posee ciertas propiedades (nombre , número de la
seguridad social, dirección, uno o varios teléfonos,...) y que interactua de determinada
forma con el resto de elementos que componen la Base de Datos.
Para declara un Array usaremos la sintaxis siguiente, según indiquemos en la
declaración el número de elementos que contendrá el array o bien no se especifique su
tamaño.
1) Declaración de un Array unidimensional sin especificar su tamaño o número de
elementos.
var nomArray=new Array() ;

2) Declaración de un Array unidimensional especificando su tamaño o número de
elementos.
Ejemplo:Declarar un array que almacenará mi 'lista de la compra', desde el lunes hasta el
viernes.
Var miListaCompra=new Array(5);
Una vez que hemos declarado nuestro vector debemos asignarle valores. Cómo lo
haremos será la razón de ser del siguiente epígrafe.
5.1.3.Asignación de valores a un Array
Para asignar valores a los Arrays usamos la siguiente sintaxis.
Ejemplo:Declarado un array que almacena 'nuestra lista de la compra' deseamos establecer
sus valores.
miListaCompra[0]='Pan';
miListaCompra[1]='Leche';
miListaCompra[2]='Fruta';
miListaCompra[3]='Aceite';
miListaCompra[4]='Sal';
A la luz del ejemplo anterior se observa que la numeración de los Arrays siempre comienza
por el número cero, es decir el primer elemento del array es nomArray[0] y el último
nomArray[indice-1].
var nomArray=new Array (tamaño);
nomArray[indice]=<valor>;

5.1.4.Declaración resumida
Podemos emplear otro método para declarar un array unidimensional.Quizas sea menos
intuitivo pero es práctico y cuando tenemos experiencia en programación puede resultar
cómodo su empleo
--------------------------------------------------------------------------------------------------
Personalmente no me gusta emplear este nuevo modo de declarar arrays, la razón es que
cuando se inicia el estudio de varios lenguajes de programación es fácil confundirse por las
sutiles diferencias en las estructuras de control, declaración de funciones y estructuras de
datos. Por ello considero conveniente buscar las semejanzas entre unos y otro para facilitar
su memorización. La primera forma de declarar Arrays es similar a otros lenguajes muy
populares.
Podemos declarar y asignar valores a un array mediante la siguiente notación.
Ejemplo:Declara, por el método de declaración 'resumido' la lista de la compra,
inicializando el array en su declaración.
var miCompra=["pan","fruta","miel"];
OBSERVACIÓN:Cuando el array contiene números estos no hay necesidad que este entre
comillas (misNotas=[8,9,7.8]), sin embargo cuando el array almacena cadenas de
caracteres debes, como se observa en el ejemplo, almacenarlas contenidas entre comillas
dobles o simples.
var nomArray=[<lista_valores>];

EJERCICIOS:
1) Declara un array que almacenara las notas que obtuve en la asignatura 'lenguaje de
marcas' durante el curso.
2) Declara y asignar , mediante el método resumido, las notas que espero obtener en la
asignatura 'lenguaje de marcas' durante este curso.
5.1.5.Arrays multidimensionales. Tablas
Son una estructura de datos que almacena valores en más de una dimensión.
Centraremos este estudio en los arrays de dos dimensiones (tablas).
JavaScript no dispone, hablando con propiedad de arrays multidimensionales, pero
podemos simular su existencia creando un Array cuyos elementos son a su vez Arrays
Del mismo modo que con los Arrays unidimensionales (vectores) contemplamos dos
forma de declararlos podemos declarar una tabla como sigue:
Declaración de Arrays Bidimensionales.
Método 1:
Método 2: (declaración resumida)
var nomArray=new Array();
nomArray[0]=new Array(<lista _valores_fila_1>);
nomArray[1]=new Array(<lista_valores_fila_2>);
…...
nomArray[tamaño-1]=new Array(<lista_valores_fila_tamaño-1>);
var nomArray=[
[<lista_valores_fila_1>],
[<lista_valores_fila-2>],
…..
[<lista_valores_fila_tam-1>]
];

5.1.6.Recorrer los elementos de un Array
Para recorrer los elementos de un arrays usamos bucles y bucles anidados, en el caso de los
arrays bidimensionales.
Método 1: Procesar un array unidimensional (vector)
Método 2: Procesar un array bidimensional ( Tabla)
for(i=0;i<tam;i++)
{
<procesamiento del array>
}
for(i=0;i<num_filas-1;i++)
{
for(j=0;j<num_columnas-1;j++)
{
<procesamiento de la tabla>
}
}

5.1.7.Métodos para trabajar con Arryays
Los principales métodos (y funciones) para trabajar con objetos de la clase Array son:
• concat():Une el contenido del array que invoca a concat(),el que se encuentra a la
izquierda del operador “.” al contenido del array pasado por parámetro. El resultado
se almacena en otro array, el que se encuentra a la izquierda del signo igual
-----------------------------------------------------------------------------------------------
Ejemplo:Contatenar mi compra de la semana con los 'SUPER' a los que acudo.
• join(separador):Une los elementos del array que invoca a este método y los
almacena en el array que se encuentre a la izquierda del signo igual. En este ultimo
array los elementos se separan unos de otros mediante el carácter 'separador' que se
haya pasado como parámetro.
/* 'b' contiene los elementos del array 'a' separados unos de otro por el carácter
'separador' */
arrayDestino=arrayUno.concat(arrayDos);
arrayDestino=arrayUno.concat(<lista de valores>);
a=new Array(<lista Valores>);
b=a.join(separador);

- Si la función join() recibe ningún parámetro los elementos del array se almacenan en 'b'
separados por ','
- Si separador es igual a :”” los almacena unos junto a otros, es decir, sin espacios de
separación.
- Si separador es igual a : “ “ los almacena separados por un carácter de espacio.
- ….
Ejemplo:Mostrar mi lista de la compra
--------------------------------------------------------------------------------------------------
• pop():Elimina el último elemento del array y lo devuelve.El array original se
modifica y su longitud disminuye en un elemento
/*ultimoElemento contiene el ultimo de los elementos que componen <lista de
valores> */
Ejemplo:¿Imaginas cúal fue mi concurso favorito de T.V durante mi niñez?
var miArray=new Array(<lista de valores>);
var ultimoElemento= miArray.pop();

• push():Añade un elemento al final de array.El array original se modifica y aumenta
si longitud en un elementos
/*Ahora arrayUno cuenta con un nuevo elemento en su 'lista de valores' */
OBSERVACIÓN:Los vectores son sólo una de las variadas estructuras de datos que nos
proporcionan los lenguajes de programación. Una de las más usadas son las PILAS. En
una PILA el último dato introducido es el primero en ser sacado (recuerda como tomas los
platos para secarlos después de haberlos lavado y colocados sobre el fregadero).JavaScript
nos libera de la tarea de tener que programar las PILAS dado que las funciones para
'poner' (push) y 'quitar' (pop) están implementadas, sólo debemos de invocarlas como se te
ha mostrado en los dos últimos ejemplos.
Quizás te parezca trivial esta situación te aconsejo, para que constates lo ventajoso
de tener implementadas las PILAS en JavaScript, que busques en Internet o algún manual
la implementación de PILAS en, por ejemplo, C.
• shift():Elimina el primer elemento del array y lo devuelve.El array se ve modificado
y su longitud se reduce en un elemento.
• unshift():Añade un elemento al principio del array.El array original se modifica su
longitud en un elemento
El uso de estas dos últimas funciones es similar a las dos que la preceden.
var arrayUno=new Array(<lista de valores>);
arrayUno.push(elemento);

----------------------------------------------------------------------------------------------------------
EJERCICIO.
¿Qué estructura de datos, implementadas de manera transparente para el programador,
son usadas cuando invocamos y usamos estas dos últimas funciones ?
-------------------------------------------------------------------------------------------------------
• reverse():Invierte la posición de los elementos en el array.
5.1.8.Propiedades del objeto Array
• length.Cuenta el número de elementos que posee el array

5.OBJETOS
5.1.-Introducción
Una clase de objetos es un modelo software de un tipo de objetos tomados del mundo real y
que, en el contexto del problema tratado, es de interés para el programador.
Un objetos es la instancia de una clase de objetos. A veces los conceptos de objeto y clase se
intercambian, esto no es del todo correcto pero nosotros, por motivos pedagógicos, lo
haremos así
Un objeto posee
• propiedades:Son las características de los objetos. Se almacenan en variables
• métodos:son funciones que el objeto proporcionan y permiten interactuar con el
(podemos decir que los métodos implementan la interfaz del objeto)
Ejercicio:Que significa la expresión:'la interfaz del objeto”
Podemos, de una forma simplicista, decir que un objeto es un conjunto de variables
(que representan las propiedades del objeto) y un conjunto de métodos o funciones que
permiten interaccionar y/o comunicarnos con el objeto.
5.2.-Instanciar un objeto.
Hasta ahora para usar una variable nos bastaba su declaración
var miVariale=<valor>;
Con los objetos no basta su declaración, ademas deben ser instanciados .La instanciación
de un objeto se lleva a cabo mediante la instrucción new
Ejemplo:Crearemos un objeto de la clase Date, que nos permitirá manejar fechas y horas.
fecha=new Date();
nom_objeto=new Clase_Objeto(<valores de sus propiedades>);

6.PROGRAMACIÓN DE EVENTOS
1-Tipos de eventos
Clasificaremos los eventos en:
1. Eventos asociados al ratón
2. Eventos asociados al teclado
3. Eventos asociados al cuerpo y sus marcos
4. Eventos asociados a formularios.
1. Eventos asociados al ratón:Eventos producidos por la acción del movimiento del ratón
• OnClick. Tras hacer un click
• OnDblClick. Tras hacer un doble click
• OnMouseOver.Al pasar sobre un elemento del documento HTML
• OnMouseOut. Tras salir del area asociada a un elemento.
• OnMouseUp.Tras pulsar un botón del ratón.
• OnMouseDown.Tras 'despulsar' un botón del ratón.
• OnMouseMove.Simplemente al mover el ratón.
2. Eventos asociados al teclado:Eventos producidos por la acción de pulsar una tecla.
• OnKeyDown. Eventos producidos por la acción de pulsar una tecla
• OnKeyUp. Eventos producidos al 'despulsar' una tecla
• OnKeyPress.Eventos producidos al pulsar y 'despulsar' una tecla.
3. Eventos asociados al cuerpo del documento y sus marcos: Eventos asociados a la carga y
descarga del cuerpo del documento HTML o alguno de los marcos que pueden formarla
• OnLoad
• OnUnLoad
4. Eventos asociados a formularios:Eventos producidos sobre los elementos que componen
un formulario HTML:botones, areas de texto, chek box, etc.
• OnFocus
• OnBlur .Se produce cuando se detecta la perdida del enfoque
• OnSelect.
• ONSubmit
• OnReset
Para desencadenar un efecto dinámico al detectar un elemento HTML un evento

declaramos el evento como un atributo más dentro del atributo HTML y le asociamos el
efecto deseado.
El efecto suele ser un cambio del valor de algún atributo HTML o un estilo.La
sintaxis es :
Ejemplos:
1.-Se llevara a cabo un efecto dinámico cuando se cargue el documento o hagamos click
sobre el
<body style=”baclground-color:pink”
OnLoad=”efecto_dinámico” OnClick=”efecto_dinámico”>
2.-Se llevara a cabo un efecto dinámico al pasar el ratón sobre el parrafo de la clase
'parrafo'.
<p class=”parrafo” OnMouse=”efecto_dinámico”>
---------------------------------------------------------------------------------------------------------
Según XHTML las etiquetas y atributos deben ir en minusculas, tambien los eventos
El elemento que sufre el efecto dinámico puede ser aquel sobre el que se declara el
evento u otro.
A) Si el elemento que 'sufre' el efecto dinámico es aquel en que se definio sólo debemos
indicar el atributo o modificar su valor.
Si el atributo al que se le modifica el valor es style, indicamos la propiedad a
cambiar y su nuevo valor.
-----------------------------------------------------------------------------------------------------------
Ejemplo
Cambiar el colo de un parrafo al pasar sobre el ratón.
<p class=”parrafo” style=”color:blue;” OnMouseOver=”style.color='red'; “
OnMouseOut=”style.color='blue';”>
-----------------------------------------------------------------------------------------------------------------------
<elementoHTML atributos evento=”efecto_dinámico”>

Para hacer referencia de JavaScript a propiedades de CSS formadas por palaras compuestas
de un guion debemos eliminar el guion y escribir la primera letra de la segunda palabra en
mayusculas.
Ejemplo:
background-color ===> style.backgroundColor
Observar que valor es una cadena de caracteres va entre apostrofes .
B) Si el elemento que va a ver modificado su aspecto es otro nos referimos a el a traves de
su identificador (id) usando la función:getElementById(“Identificador elemento HTML”), del
objeto document.
La sintaxis para referirnos al elemento que sufre el efecto es:
Para JavaScript el documento html es un objeto llamado document que tiene
asociado un conjunto de propiedades y métodos que permiten hacer referencia a los distintos
elementos que forman la parte del documento.
¿Cúales son las formas en que podemos hacer referencia a los elementos html que
forman parte del documento?
1. Mediante el valor de su id.
document.getElementById(“valor_id”)
2. Mediante el valor de su atributo name podemos referirnos a todos los elementos que
compartan su valor
document.getElementsByName(“valor_name”);
3.Mediante el nombre de la etiqueta html podemos referirnos a todos los elementos
document.getElementsByTagName(“nombreEtiquetaHTML”);
2.Objetos en JavaScript
Siempre usaremos la sintaxis: “style.propiedadCSS='valor'; “
document.getElementById(“valor-id”).atributo='valor'
document.getElementById(“valor-id”).style.propiedad='valor'

Para JavaScript todos los elementos que forman parte del cliente web o navegador
son objetos. Desde la ventana que abre nuestro navegador hasta una imagen o enlace
Estos objetos se estructuran de forma jerárquica en un árbol invertido, la raíz es la
ventana del navegador
Para hacer referencia a un elemento dentro del árbol se desciende de nivel mediante
la notación “.” y hacemos referencia a alguna de sus propiedades o métodos
Ejemplo:
window.document.form.textarea.metodo
Los objetos más interesantes son document y event
i. document:Permite hacer referencia a los distintos elementos que forman parte del
documento
ii. event:Permite obtener información sore el evento que desencadena la acción
La siguiente tabla muestra las funciones y métodos más importantes asociados a los
objetos de JavaScript

2.1.-Objeto JavaScript style. Propiedades CSS en JavaScript
JavaScript nos permite obtener información sobre el valor de las propiedades CSS
asignadas a un elemento HTML y asignarles un valor deseado.
Hacemos referencia a estas propiedades con el objeto style, los nombres de las
propiedades son similares a CSS

Introduccion a java script

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Introduccion a java script

Ähnlich wie Introduccion a java script (20)

Introduccion a java script