Embed Size (px)
Citation preview
Autor:Luis Pilo Aceituno.E-mail:[email protected] (para cualquier sugerencia y/o información sobre errores detectados)Última actualización:27/03/2015
1.INTRODUCCIÓN1.1.-Origen de JavaScript1.2.-Utilidades de JavaScript1.3.-Como y donde colocar el código JavaScript.1.4.-Formas de ejecutar un script1.5.-Modelo cliente/servidor1.6.Ejemplo:Nuestro primer script
2.ELEMENTOS BÁSICOS2.1.-Normas de escritura en JavaScript.2.2.Caracteres especiales2.3.-Tipos de datos2.3.-Variables2.4.-Declaración de variables2.5.-Ámbito de las variables2.6.-Conversión de datos2.7.-Operadores2.8.-Mensajes
3.ESTRUCTURAS DE CONTROL3.1.-Estructuras condicionales3.2.Bucles3.3.-Otras sentencias de control
4.FUNCIONES4.1.-Sintaxis4.2.-Invocación4.3.-Múltiples retornos4.4.-Funciones básicas4.5.-Nuestra librería de funciones
5.ESTRUCTURAS DE DATOS5.1.Arrays
5.1.1.Concepto de Array5.1.2.Declaración de un Array como un objeto de la clase Array5.1.3.Asignación de valores a un Array5.1.4.Declaración resumida5.1.5.Arrays multidimensionales. Tablas5.1.6.Recorrer los elementos de un Array5.1.7.Métodos para trabajar con Arrays5.1.8.Propiedades del objeto Array
5.OBJETOS5.1.-Introducción5.2.-Instanciar un objeto.
6.PROGRAMACIÓN DE EVENTOS6.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. LosApplets son pequeños programas incrustados en las páginas web, que fueron usadas porNetscape para programar en las páginas web.Netscape construyo sus navegadorescompatibles 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), paradesarrollar 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ñosdentro de una página.
La sintaxis de JavaScript se parece a la de Java, pero son cosas distintas, ajavaScript 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 ainstrucción (suelen ser mas lentos).
1.2.-Utilidades de JavaScript
Las instrucciones de JavaScript permiten crear pequeños programas dentro de unapagina web. Los objetivos son interaccionar con el usuario (páginas dinámicas) u obtenerefectos 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 undocumento 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 hacersesi 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 sifuera 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 lascomputadoras 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 scriptii) Lo guardamos con extensión .htmliii)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 memoriacomo celdas capaces de almacenar datos. Una variables es una o mas celdas que almacenan algúndato.
✔ 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 devariables , según el ámbito.
• Global:Su alcance es todo el programa. Debemos tener cuidado con la declaración devariables 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 variablepuede 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 dehtml <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.Teaconsejaría que cuando pruebes los programas omitas las tildes (y cualquier otrocarácter que no admita html).Cuando escribas el script para su explotación debeshacer 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 elnavegador.
2.8.-Mensajes
Disponemos de una serie de métodos que permite 'lanzar' ventanas, de diferentestipos, al usuario para informarle de alguna situación anómala, solicitarle información,..
Mas adelante, cuando estudiemos el modelo de objetos de JavaScript, estudiaras queestos métodos son propiedad del objeto windows. En este estadio de tu aprendizaje deJavaScript 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 empleapara 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 auna 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 hagotras el código.
OBSERVACIONES:Es posible que haya fallado este script. La razón es muchosnavegadores 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 únicaaccion. 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 (accion2).En la primera opción tan solo obtenemos los datos y a continuación, en otra linea decó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. Setiende a minimizar el número de lineas de código a expensas de la simplicidad. Evitar estoes 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 normaldel 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 ejecutendependerán del cumplimiento de ciertas condiciones (sentencias if – else) , en otrasocasiones 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 implementarcualquier programa. No obstante cuando este es de cierta complejidad y/o extensióndeberemos hacer uso de otro elemento de gran potencia:las funciones.
NOTA:Es una práctica frecuente desarrollar los programas empleando pseudocódigo antesde implementarlos en un lenguaje determinado. No existe una única forma de 'escribir' enpseudocódigo. Se aprovechara este epígrafe para proponerte una posible notación. Noolvides dos cosas:
i. El código es una ayuda , no un fin en si mismo, siéntete libre de adoptar otranotación cuando codifiques tus programas en pseudocódigo. Emplea si lo creesoportuno una notación personal. Pero no olvides que en la documentación entregadaal cliente (o profesor) debes incluir un anexo donde expliques el significado de tunotación si esta se aparta de los usualmente empleados.
ii. Si al compilar /interpretar el programa/script este no proporciona el resultadoesperado, 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 valorque 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 nocumplirse 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 acabo una acción alternativa. Esta se implementa el la clausula ELSE
(pseudocódigo)
si condición entoncesAcción
fsi
si condición entoncesacción A
elseacción B
fsi.
(Implementación en JavaScript)
Ejemplo:Prueba el siguiente script.
c) Estructura SWITCH
Cuando las condiciones que debemos evaluar son superiores a dos ( o tres ) no espráctico emplear los IF-ELSE (demasiadas de estas sentencias, sobre todo si se anidan) sondifíciles de entender.
En estos casos es preferible emplear la siguiente instrucción
(pseudocódigo)
según expresión hacercaso , 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
(Implementación en JavaScript)
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 trasella,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 normaldel programa.
3. Si expresión no coincide con ninguno de los valores asociados a un 'case' se ejecutala 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 unasentencia switch.
3.2.Bucles
a)Bucles WHILE
Lo empleamos cuando no sabemos a priori el numero de veces que debemos iterar lasinstrucciones indicadas.
Mientras se cumpla la condición del bucle realizaremos las instrucciones en elindicadas. 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 delbucle.
(pseudocódigo)
(Implementación en JavaScript)
Ejemplo:Implementa este script.Observalo con atención.¿Te sientes capaz de explicar lanecesidad de la ultima sentencia ?
Mientras condición hacerAcciones
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.
(Implementación en JavaScript)
-------------------------------------------------------------------------------------------------------
Ejemplo:Observa esta otra implementación del script anterior.
Desde var=valor_ino hasta valor_fin [inc] hacerinstrucciones;
fdesde
c) DO WHILE
Esta sentencia garantiza que al menos se ejecuta una vez el cuerpo del bucle
(pseudocódigo)
(Implementación en JavaScript)
Ejemplo:Escribe este script.
do {sentencias;
}while(condición)
hacersentencias
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 simisma, la cual dada su importancia o necesidad de volver a ser usado , en este u otrosscripts, decidimos codificarlo dándole un nombre y fijando para el los parámetros quenecesita 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 retornaresta 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ásicasusando 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ánrealizar un número de tareas útiles para tus programas.
No es necesario que memorices estas funciones. Acude a los manuales y/o Internet cuandotengas 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/saplicaciones. 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 conextensió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 otraque pienses te será necesaria en futuras aplicaciones) en un archivo y guardalo con laextensión .js.
ii. Añade la siguiente sentencia de importación en el <head> del archivo .html que vayaa hacer uso de estas funciones.
Llegados a este punto creo que debo hacer algunas observacionesI. 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 declararlas funciones en el <head> e importarlas cuando nos sean necesarias me parece quelo 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 elejemplo no se incluye la ruta porque se ha guardado el archivo de extensión .js en elmismo 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 deextensió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 ydivisión.Las funciones que realizan estas operaciones deben encontrarse en un archivoexterno 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 deprogramación, en lo que al manejo de arrays se refiere, es la posibilidad de declarar unarray 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 ejemplonú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 arraysconsiderando su dimensión en
1. Arrays unidimensionales o vectores:Aquellos Arrays que constan de una única fila yvarias 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 dosdimensiones. El ejemplo con las notas de los estudiantes y su nombre correspondería a loque hemos convenido en llamar Tabla o Array bidimensional (en la literatura ambasdenominaciones 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 acontinuación , te bastará con saber que “un objeto es un ente del mundo real que poseepropiedades y que interactua de determinada forma con su entorno , por ejemplo medianteel intercambio de información”.En este contexto un Objeto Array seria una colección dedatos , de distinta naturaleza, que pueden ser leídos,modificado su valor, contado sunúmero,....En el contexto de las Bases de Datos un objeto Cliente es una parte de la Base deDatos que nos interesa modelar que posee ciertas propiedades (nombre , número de laseguridad social, dirección, uno o varios teléfonos,...) y que interactua de determinadaforma con el resto de elementos que componen la Base de Datos.
Para declara un Array usaremos la sintaxis siguiente, según indiquemos en ladeclaración el número de elementos que contendrá el array o bien no se especifique sutamaño.
1) Declaración de un Array unidimensional sin especificar su tamaño o número deelementos.
var nomArray=new Array() ;
2) Declaración de un Array unidimensional especificando su tamaño o número deelementos.
Ejemplo:Declarar un array que almacenará mi 'lista de la compra', desde el lunes hasta elviernes.
Var miListaCompra=new Array(5);
Una vez que hemos declarado nuestro vector debemos asignarle valores. Cómo loharemos 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 establecersus 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 comienzapor el número cero, es decir el primer elemento del array es nomArray[0] y el últimonomArray[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 menosintuitivo pero es práctico y cuando tenemos experiencia en programación puede resultarcómodo su empleo
--------------------------------------------------------------------------------------------------
Personalmente no me gusta emplear este nuevo modo de declarar arrays, la razón es quecuando se inicia el estudio de varios lenguajes de programación es fácil confundirse por lassutiles diferencias en las estructuras de control, declaración de funciones y estructuras dedatos. Por ello considero conveniente buscar las semejanzas entre unos y otro para facilitarsu memorización. La primera forma de declarar Arrays es similar a otros lenguajes muypopulares.
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 entrecomillas (misNotas=[8,9,7.8]), sin embargo cuando el array almacena cadenas decaracteres debes, como se observa en el ejemplo, almacenarlas contenidas entre comillasdobles 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, peropodemos simular su existencia creando un Array cuyos elementos son a su vez Arrays
Del mismo modo que con los Arrays unidimensionales (vectores) contemplamos dosforma 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 losarrays 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 laizquierda del operador “.” al contenido del array pasado por parámetro. El resultadose 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 losalmacena en el array que se encuentre a la izquierda del signo igual. En este ultimoarray los elementos se separan unos de otros mediante el carácter 'separador' que sehaya 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 deseparació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 aumentasi 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 nosproporcionan los lenguajes de programación. Una de las más usadas son las PILAS. Enuna PILA el último dato introducido es el primero en ser sacado (recuerda como tomas losplatos para secarlos después de haberlos lavado y colocados sobre el fregadero).JavaScriptnos 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 teha mostrado en los dos últimos ejemplos.
Quizás te parezca trivial esta situación te aconsejo, para que constates lo ventajosode tener implementadas las PILAS en JavaScript, que busques en Internet o algún manualla implementación de PILAS en, por ejemplo, C.
• shift():Elimina el primer elemento del array y lo devuelve.El array se ve modificadoy su longitud se reduce en un elemento.
• unshift():Añade un elemento al principio del array.El array original se modifica sulongitud 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 yque, 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 seintercambian, esto no es del todo correcto pero nosotros, por motivos pedagógicos, loharemos 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 quepermiten 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ónde 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ón2. Eventos asociados al teclado3. Eventos asociados al cuerpo y sus marcos4. 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 ydescarga 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 componenun 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 elefecto deseado.
El efecto suele ser un cambio del valor de algún atributo HTML o un estilo.Lasintaxis es :
Ejemplos:
1.-Se llevara a cabo un efecto dinámico cuando se cargue el documento o hagamos clicksobre 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 elevento u otro.
A) Si el elemento que 'sufre' el efecto dinámico es aquel en que se definio sólo debemosindicar el atributo o modificar su valor. Si el atributo al que se le modifica el valor es style, indicamos la propiedad acambiar 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 compuestasde un guion debemos eliminar el guion y escribir la primera letra de la segunda palabra enmayusculas.
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 desu identificador (id) usando la función:getElementById(“Identificador elemento HTML”), delobjeto document.
La sintaxis para referirnos al elemento que sufre el efecto es:
Para JavaScript el documento html es un objeto llamado document que tieneasociado un conjunto de propiedades y métodos que permiten hacer referencia a los distintoselementos que forman la parte del documento.
¿Cúales son las formas en que podemos hacer referencia a los elementos html queforman 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 quecompartan 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 navegadorson 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 laventana del navegador
Para hacer referencia a un elemento dentro del árbol se desciende de nivel mediantela 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 deldocumento
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 losobjetos de JavaScript
2.1.-Objeto JavaScript style. Propiedades CSS en JavaScript
JavaScript nos permite obtener información sobre el valor de las propiedades CSSasignadas a un elemento HTML y asignarles un valor deseado.
Hacemos referencia a estas propiedades con el objeto style, los nombres de laspropiedades son similares a CSS
