Javascript

Lección 1. Introducción a Javascript

Javascript es un lenguaje de programación que se ejecuta en el ámbito de una página web. Es una herramienta muy importante sobre todo para la realización de una web dinámica.

Estos programas se cargan en el navegador, ya que es un lenguaje de programación del lado del cliente. El lenguaje más utilizado de este tipo es el propio Javascript.

También existe una parte de Javascript dedicada del lado del servidor (Server-side JavaScript o SSJS), pero en eso no nos vamos a meter, solo veremos su funcionamiento del lado del servidor.

Como aclaración, recomendamos algunos conocimientos de HTML para comprender mejor algunos conceptos de este curso. El HTML es muy básico y se utiliza en prácticamente todas las páginas web, aquí en Mundo Grrosac disponemos de un curso:

 

Si ya has echado un vistazo a dicho curso estás listo para continuar. ¡Empezamos!

 

 

Lección 2: Preparando entorno de trabajo

Para comenzar a programar en Javascript lo único que nos hace falta es un editor de texto y un navegador de Internet. Se puede utilizar cualquier navegador; en los ejemplos del curso utilizaremos Google Chrome.

También se puede utilizar cualquier editor de texto, pero vamos a descargar un editor gratuito ideal para programar.

Se llama Notepad++, vamos a instalarlo en nuestro ordenador.

1.- Entramos en la web: http://notepad-plus-plus.org/ y hacemos click en el menú "Download".

2.- En la siguiente pantalla que nos aparece, hacemos click en el botón "Download".

3.- Esperamos que se descargue el programa, y ahora lo ejecutamos:

4.- Seleccionamos el idioma "Español" y continuamos:

5.- Click en Siguiente:

6.- Aceptamos el acuerdo de licencia:

7.- Elegimos el directorio donde queremos que se instale el programa (recomiendo dejarlo por defecto) y hacemos click en Siguiente:

8.- En la siguiente ventana dejamos todo tal cual aparece, y click en Siguiente:

9.- Y para acabar, en esta ventana también seguimos hacia adelante. Si queréis un acceso directorio en el escritorio, debéis marcar la 3ª casilla.

Ya tenemos instalado el Notepad++, estamos listos para aprender a programar en Javascript.

Lección 3: Primera aplicación

Vamos a comenzar realizando el típico "Hola Mundo" en javascript. Este es el programa más sencillo posible por el que siempre se empieza.

Como ya h comentado en la primera lección, debéis conocer un poco de lenguaje HTML, puesto que lo que ahora aprendemos está relacionado con páginas web, y HTML siempre está presente en estos temas.

Abrimos el editor de texto Notepad++.

Una vez tengamos el programa abierto, tenemos que crear un nuevo archivo de texto para empezar a hacer nuestro primera aplicación en javascript.

Nos vamos al menú Archivo > Nuevo

Ya podemos escribir el programa. Las líneas necesarias son las siguientes:

Lo único que hará este programa es mostrar por pantalla "Hola Mundo". No os asustéis que en la siguiente lección se explicará el funcionamiento de dicho programa.

Ahora, una vez escrito el código, hay que guardar el archivo en el ordenador. Para ello es MUY IMPORTANTE guardarlo con la extensión ".html".

De esa forma nos permitirá que el ordenador ejecute el archivo como un archivo de página web, y se ejecutará el código de javascript.

 

Lección 4: Explicando funcionamiento de la primera aplicación

Vamos a explicar el funcionamiento del programa que hemos creado en la lección anterior. En realidad, lo único que hay de javascript son 3 líneas, puesto que el resto es la estructura de una web en HTML.

Para cuando queramos programar en javascript es necesario encerrar todo el código de javascript entre las etiquetas "script". A la etiqueta script se le asigna la propiedad "type" para indicarle que el lenguaje que vamos a utilizar es javascript.

Todo el código que escribamos entre las etiquetas:

<script type="text/javascript">

...Código javascript...

</script>

Es lo que se va a ejecutar.

En este caso, solo tenemos una instrucción, que es la de escribir por pantalla "Hola Mundo". Para ello, hay que utilizar la función write del objeto document. Si aún no sabéis lo que es una función u objeto en programación, se entenderán más adelante en el curso. De momento, no preocuparos por ello.

document.write('Hola Mundo');

Lo que escribamos entre paréntesis y las comillas es lo que el navegador mostrará por pantalla, asi de sencillo.

Es muy importante aclarar que javascript es sensible a mayúsculas y minúsculas, esto quiere decir, que si por ejemplo escribieramos: DOCUMENT.Write('Hola Mundo'); , no funcionaría.

 

Lección 5: Variables

Las variables son el elemento más básico e importante de un lenguaje de programación. Antes que nada, hay que conocer qué tipos de variables hay y como funcionan. Realmente, son muy similares en casi todos los lenguajes existentes.

Dichas variables sirven para almacenar valores.

Vamos a conocer las variables más utilizadas. En javascript tenemos la ventaja de que no hace falta indicarle qué tipo de variable estamos creando. Es decir, no hace falta indicar que la variable tenga que ser un número entero o una cadena de caracteres; simplemente se inicia con el valor que queramos directamente.

Para crear variables utilizaremos el comando "var" <nombre_variable>.

Pongamos ejemplos para entenderlo.

var nombre = 'Pepe';

Así se declaran y asignan valores a las variables. En este caso, hemos asignado el nombre de "Pepe" que es una cadena de caracteres. Pero como javascript no distingue de tipos (esto es muy bueno), podemos asignar valores numéricos, decimales, booleanos (true o false), etc...

Creando variables de distinto tipo...

Hemos creado 4 variables, y si os fijáis cada una con un tipo de valor diferente.

Si abrimos este ejemplo con el navegador, veremos que no ocurre nada. Porque las variables están creadas y asignadas, pero el sistema las tiene guardada en memoria sin más. Para saber qué valor contiene cada variable es necesario mostrarlas por pantalla, y lo vamos a aprender en la siguiente lección.

 

Lección 6: Mostrar variables

Ya hemos visto la creación de variables en javascript, y como podemos asignarle valores a esas variables. Pero claro, si no mostramos ese contenido y no sabemos acceder a él, los valores no nos servirían de nada. Ahora aprenderemos a mostrar el contenido de esas variables por pantalla.

Siguiendo con las variables del ejemplo anterior, vamos a mostrarlas a través de la función write.

Se muestra el valor de cada variable. El "<br>" en HTML significa salto de línea, por eso lo ponemos así, para que se muestre de forma más visual, un valor por línea.

Ahora, si abrimos este ejemplo en el navegador, obtendremos el siguiente resultado:

Podéis trastear un poco con las variables, y modificar sus valores para ir comprendiendo su funcionamiento.

Aquí adjunto el ejemplo de las variables por si queréis mirarlo:

Ejemplo variables

IMPORTANTE: Si quieres descargar el código, pulsa botón derecho sobre el enlace y click en la opción "Guardar enlace como...". A lo largo del curso se irán poniendo ejemplos y puedes descargarlo de esta forma.

 

Lección 7: Datos por teclado

Hasta el momento el valor de las variables lo hemos introducido nosotros a mano, pero en ocasiones necesitamos que sea el propio usuario el que introduzca los valores de ciertas variables.

Para ello utilizaremos la función prompt.

Vamos a crear 2 variables, "nombre" y "altura" y hagamos que el usuario sea el que introduzca los valores. Se realiza de la siguiente forma:

Creamos las variables como ya sabemos:

Ahora, tenemos que hacer que el usuario les de valor a esas variables, con sus datos, utilizamos la función de la siguiente forma:

Esta función funciona de la siguiente forma:

prompt ('<Texto que se muestra al usuario>', '<valor por defecto>') => El valor por defecto se refiere al que aparece en la caja de texto donde escribe el usuario, por eso lo dejamos vacío ' '.

Y escribiendo la variable "nombre" = , lo que hacemos es asignar el valor que escribe el usuario a esa variable.

Ya solo nos queda mostrar por pantalla los datos de las variables:

Lo mostramos por pantalla con document.write como hemos aprendido anteriormente.

El ejercicio en cuestión: Datos por teclado

 

Lección 8: Estructuras condicionales simples

La sentencia IF no es más que una sentencia condicional, o sea, que si se cumple "x" condición, el programa hace una cosa, y si no se cumple, el programa hace otra.

Las sentencias IF se construyen de la siguiente forma:

if (condición)

{

instrucciones...

}

Dichas instrucciones solo se ejecutarán si se cumple la condición del IF.

Lo vamos a entender mejor con el siguiente ejemplo :

Pedimos al usuario que introduzca nombre y edad. Y comparamos con el IF, que si su edad es mayor o igual que 18, es mayor de edad.

En el ejemplo que he puesto es edad >= 18. Bien, estos operados que he utilizado para la condición, son operadores de comparación. Los operadores de comparación son los siguientes:

Operador	Uso	Devuelve verdadero si
>	op1 > op2	op1 es mayor que op2
>=	op1 >= op2	op1 es mayor o igual que op2
<	op1 < op2	op1 es menor que op2
<=	op1 <= op2	op1 es menor o igual que op2
==	op1 == op2	op1 y op2 son iguales
!=	op1 != op2	op1 y op2 son distintos

Esos son los distintos operadores que se pueden utilizar para comparar.

Este programa solo muestra algo por pantalla si se cumple la condición, en caso de que el usuario no sea mayor de edad, no ocurriría nada. Esto se puede completar de alguna forma, y lo veremos en la siguiente lección. Las condiciones compuestas.

Fijaos que a la hora de mostrar por pantalla que el usuario es mayor de edad, hemos utilizado el operador "+", que sirve para concatenar cadenas de caracteres.

Podéis probar el ejercicio aquí: If simple

 

Lección 9: Estructuras condicionales compuestas

Ahora vamos a hacer que, pase lo que pase, el programa muestre algo por pantalla. En el caso anterior, si no se cumplía la condición, no se mostraba nada.

¿Como hacemos esto?

Añadiendo al IF la cláusula ELSE. . De esta forma:

Ahora, si el usuario introduce una edad menor a 18, el programa ejecuta las instrucciones que haya dentro del ELSE { ... }.

El ejercicio podéis probarlo aquí: If compuesto

 

Lección 10: Ejercicio nº 1

A lo largo del curso, voy a ir introduciendo ejercicios, para que vayáis poniendo en práctica todo lo aprendido anteriormente. Porque por más teoria y práctica que se explique, cuando realmente se aprende a programar es programando, no hay otra opción más fiable que esa.

A continuación, os propongo el enunciado del ejercicio:

Escribe un programa con 2 variables, las cuales deben introducir el usuario su valor. Una vez introducidos los valores, pueden ocurrir tres cosas:

- Que el número 1 sea mayor que el número 2.

- Que el número 2 sea mayor que el número 1.

- Que los números sean iguales.

El program debe mostrar por pantalla cual de las 3 opciones se ha cumplido.

 

Lección 11: Solución ejercicio nº 1

¿Has sido capaz de crear el programa por ti mismo? ¡Muy bien! Aquí tenemos la solución...

Este programa lo vamos a dividir en dos secciones; primero la creación de variables y como pedir al usuario que introduzca los valores, y luego las comprobaciones.

Creamos las variables y pedimos al usuario que introduzca los números:

Ahora, dependiendo de qué valores haya introducido, ocurrirá una cosa u otra. Como decía el enunciado del ejercicio, pueden ocurrir 3 cosas, es decir, que tendremos que hacer 3 sentencias IF.

A continuación vemos como queda:

Puedes investigar la forma de como hacerlo con IF...ELSE...IF. En cualquier caso, el programa funciona tal y como nos indicaba el enunciado del ejercicio. He puesto la solución más sencilla, pero hay más formas de hacerlo.

Bien, ya has hecho tu primer ejercicio en Javascript sin ayuda.

Lección 12: Operador lógico &&

El operador && se entiende como si fuera un "y". Es decir, en la condición de la sentencia IF, se puede añadir este operador para que en vez de una sola condición, se cumplan 2 o más condiciones.

Entonces, para que se ejecuten las instrucciones del IF, se tienen que cumplir todas las condiciones que escribamos con el operador &&.

Vamos a ver un ejemplo en el cual se tienen que cumplir 2 condiciones. Introduciremos 2 números, y ambos tienen que ser mayor que 5, sino, no se cumplirá la condición:

Como vemos, hemos añadido otra condición, y el IF tiene ahora 2 condiciones. Si no se cumplen las 2 condiciones, se ejecutará el ELSE. Recuerda que puedes añadir todas las condiciones que quieras.

 

Lección 13: Operador lógico ||

El funcionamiento de este operador es muy similar al que hemos visto en la lección anterior. Utilizaremos el mismo ejemplo, pero cambiaremos de operador en la condición.

De esta forma, ahora lo que ocurre es que el IF se ejecuta en caso de que UNA de las dos condiciones (cualquiera) o las dos se cumplan. Es decir, que con que se cumpla alguna de las condiciones que hemos programado, ya se ejecuta el IF, no hace falta que se cumplan todas.

Aquí el ejemplo:

Así, con que mínimo una de las dos condiciones se cumpla, ya se ejecutará el IF. Podéis comprobarlo ejecutando el ejercicio y trasteando, para entender mejor el funcionamiento de estos dos operadores.

 

Lección 14: Switch

También existen ocasiones o programas donde se exige evaluar muchas condiciones a la vez, en estos casos, o se usan una condición compuesta muy grande o se debe intentar convertir el problema a uno que se pueda resolver usando la instrucción switch();

Se escribe así:

switch (num) => Entre paréntesis ponemos la variable que vamos a utilizar para la instrucción, en este caso es "num".

case 1:

document.write("Has elegido la opción 1");

break;

Podemos crear todos los "case" que queramos. Vamos a verlo con un ejemplo para entenderlo mejor. En este caso, haremos 3 case, y un default, que ya veremos como funciona.

Lo primero, para que el Switch funcione correctamente, hemos de añadir esta instrucción:

num = parseInt(num);

Esto nos sirve para transformar el valor de esa variable, en un número entero, el parseInt transforma la variable en entero, y luego se le asigna a "num", de esa forma ya tenemos en "num" el valor numérico introducido por el usuario.

Una vez hecho eso, actúa el Switch, que como vemos, nos muestra por pantalla el valor elegido, si elegimos el 1, el 2 o el 3. Como veis son casos concretos, es decir, que los "case" funcionan como un " == ". Pero no sirve con ">=" "<=" "<" ">"...Solo son igualdades.

El default se suele poner al final, para que se ejecute en caso de que no se cumpla ningún "case".

 

Lección 15: Bucle While

La sentencia "While" existe en la mayoría de lenguajes de programación, y es algo que hay que saber si o si para el aprendizaje de la programación.

El propósito de los bucles es hacer que se ejecute un fragmento de código (el que esté dentro del While), mientras una condición sea verdadera.

La sintaxis del bucle "While" es la siguiente...Recuerda mucho a la estructura de los IF vistos anteriormente:

while (condición)

{

si se cumple la condición, se ejecuta todas las instrucciones que haya aquí...

}

Son estructuras repetitivas, y hay que tenerlas muy en cuenta, puesto que son muy útiles en programación.

Creamos una variable "n" que empieza con el valor 1. Y el while "pregunta": ¿n es menor o igual que 10?

La respuesta es si, o sea, la condición se cumple, y entra dentro del While, y se muestra el numero "n" por pantalla...Así sucesivamente, hasta que "n" supere el numero 10, que ya no se cumple la condición, y ya el "While" deja de trabajar.

***IMPORTANTE***: Es muy común cuando se esta empezando, cometer un error en este tipo de bucles. Los bucles While SIEMPRE tienen que modificar los valores de la condición...En este caso, la "n", dentro del bucle se tiene que modificar...porque si no nunca va a ser falsa la condición, y por tanto se producirá un bucle infinito.

 

Lección 16: Bucle Do/While

Este tipo de bucle es quizá el menos utilizado, pero aún así lo explicaré para que tengáis constancia de su existencia. Para algunas ocasiones es útil, aunque todo se puede remediar con un While.

La particularidad del Do/While, es que al menos una vez, se ejecuta la parte repetitiva, cosa que no ocurría con el While, que puede no ejecutar el bloque repetitivo.

La sintaxis es la siguiente:

do

{

...Instrucciones que se repiten...

}

While (condición)

Vamos a ver un ejemplo para entenderlo mejor.

Creamos una variable "num" con el valor de 1. Se ejecuta lo que hay dentro del do { ... }, y luego entra en la condición del While, o sea que este programa nos muestra por pantalla los numeros del 1 al 9.

Pero...¿Qué ocurriría si le damos el valor de 10 a la variable "num"? Vamos a comprobarlo:

De esta forma, se ejecuta el do { ... } (ya hemos dicho que siempre se ejecuta al menos una vez), y luego la condición no se cumple, o sea que ya saldría del bucle. El resultado del programa sería mostrar el número 10 por pantalla.

Fijaos como aunque no se cumpla la condición, se ejecutan las instrucciones que contiene el do { ...}. Esto es porque la condición se comprueba después, y no antes como en el caso del bucle While visto en la lección anterior.

 

Lección 17: Bucle For

El bucle "For" será la última estructura repetitiva que veremos. Es muy utilizada a la hora de recorrer arrays (ya veremos más adelante el uso de arrays).

La sintaxis del bucle "for" es la siguiente:

for (<inicializar variable>; <condición>; <aumento/decremento variable>)

{ ... }

A diferencia de los "while", el for lleva implícito el aumento o decremento de la variable en cuestión, y en el while había que modificar la variable dentro del bucle.

Veamos un ejemplo de "for":

El programa nos muestra por pantalla los números del 1 al 5. Como veis, todos los bucles son muy similares, solo hay algunos detalles que hacen que en ocasiones resulte mejor utilizar uno u otro. En el caso de los "for", son perfectos para recorrer arrays

 

Lección 18: Uso de acumuladores

Un acumulador es una variable que se incrementa o decrementa con valores variables durante la ejecución del programa. Para ello, lo ideal es incluirlos en bucles. Por ejemplo, crear una variable "acumulador" que vaya sumando 3 números introducidos por teclado.

Vamos a ver el código del ejemplo propuesto para entender el uso de acumuladores:

Vamos por partes; lo primero es la creación de variables.

"n" empieza en 1, es la encarga de contar cuantas veces se repetirá el bucle.

"suma" es la variable que hace de acumulador, debe empezar en 0.

"num" es la variable donde iremos introduciendo los números que pidamos al usuario.

Ahora, comienza el bucle, con la condición de si "n" es mejor o igual que 3 (o sea, el bucle se ejecutará 3 veces, ya que tenemos que introducir 3 números).

Dentro del bucle, pedimos al usuario que introduzca un número y lo guardamos en la variable "num". Convertimos ese número a tipo entero (es muy importante, porque sino el programa trata a esa variable como una cadena de caracteres).

Y ahora viene el concepto de acumulador:

suma = suma + num; -> Con esto, vamos añadiendo el valor de "num", al valor que ya tenía "suma" anteriormente, es decir que lo vamos acumulando. Por ejemplo si ha introducido el número 2, se haría: suma = 0 + 2.

Y si luego introduce un 3...

suma = 2 + 3...y así sucesivamente. Se van sumando los valores, acumulando el resultado.

Luego se le suma +1 a "n" para que cuando llegue a 3, ya salga del bucle while.

Y para terminar, al salir de "while", mostramos el valor de suma por pantalla, para comprobar que se ha realizado correctamente.

 

Lección 19: Funciones

Las funciones, como su propio nombre indica, se encargarán de hacer una "función" concreta de nuestro programa. El sistema ya tiene muchas funciones establecidas, pero tu mismo también puedes crear funciones.

Por ejemplo cuando mostramos algo por pantalla, estamos utilizando la función del sistema document.write().

Vamos a suponer, que queremos mostrar un mensaje de error cada vez que queramos y de forma fácil, podemos hacer lo siguiente:

Para crear una función, se hace con la sintaxis:

function <nombre_funcion> ()

{...}

La palabra clave "function", más el nombre que quieras darle a la función. Entre paréntesis irían los parámetros de la función, pero en este caso, es una función sin parámetros. En la siguiente lección aprenderemos a hacer funciones con parámetros.

Esta función lo único que hace es mostrar por pantalla el mensaje de error. Así pues, cada vez que en el programa ocurra un error, solo tenemos que llamar a la función, en vez de escribir siempre el mensaje de error...¿Se entiende el cometido de las funciones?

La llamada a la función se hace como veis en el código, se escribe el nombre de la función y los paréntesis:

MensajeError();

 

Lección 20: Funciones con parámetros

Las funciones con parámetros funcionan y se crean de forma igual. La única novedad es que si tienen parámetros (variables), puedes utilizar dentro de esa función las variables que te pasan por parámetro. Por ejemplo, en una función de suma, los parámetros serían los números a sumar, y dentro de la función se suman todos esos valores.

Para entenderlo mejor, vamos a poner este ejercicio. He creado una función que se encarga de sumar 3 números pasados por parámetro. Veamos su funcionamiento:

Expliquemos como funciona la función, valga la redundancia:

function Suma(num1, num2, num3)

{

var suma;

suma = num1 + num2 + num3;

document.write("Suma = ", suma);

}

La función "Suma" recibe 3 valores por parámetro, num1, num2, y num3. Como veis, simplemente escribimos nombre de variables separados por comas.

Dentro de la función, creamos una variable llamada "suma". En esa variable, almacenamos la suma de los 3 valores pasados por parámetro, y finalmente, la mostramos por pantalla.

Ahora, vamos con la segunda parte del programa:

var n1, n2, n3;

n1 = 3;

n2 = 5;

n3 = 2;

Suma(n1,n2,n3);

Creamos 3 variables, n1, n2, y n3. Le asignamos los valores numéricos que queramos a estas variables. Y hacemos la llamada a la función "Suma". Entre paréntesis, se les pasa las variables que hemos creado. También se pueden pasar por parámetro directamente los números que queramos, pero es para que se entienda que se pueden pasar variables.

De hecho, una buena mejora del programa sería que los números que sume la función, los introduzca el usuario, te puedes animar a realizar ese programa.

No confundir las variables n1, n2, y n3 con las num1, num2, num3. Estas últimas son variables que se utilizan SOLO dentro de la función "Suma" y nada tienen que ver con las otras y viceversa. Es un error común confundir las variables. O sea, que si en la función "Suma" se modifica el valor de num1, el valor de n1 sigue intacto...Son independientes

 

Lección 21: Ejercicio nº 2

Es el momento de realizar el ejercicio nº 2, ya que llevamos unas cuantas lecciones de aprendizaje. Vamos a poner en práctica todo lo aprendido anteriormente. El enunciado es el siguiente:

Escribe un programa que tenga 2 funciones. Una función "Suma", que sume dos números pasados por parámetro, y otra igual pero para "Restar".

Se mostrará por pantalla lo siguiente:

1. Suma

2. Resta

Depende qué número elija el usuario (1 o 2), se ejecutará la función correspondiente.

 

Lección 22: Solución Ejercicio nº 2

Este ejercicio era un poco más complejo que el anterior. A ver si has sido capaz de realizarlo por tu cuenta. Y si no, no te preocupes, que mirando las soluciones a los problemas también se aprende cuando estás empezando a adquirir conocimientos de algo.

Vamos con ello. Dividiremos el problema en 2 partes. La primera será la parte de las funciones, y luego la parte 'principal' del programa.

Las funciones son las siguientes:

Son muy parecidas como veis. Simplemente una Suma y la otra Resta. Las funciones reciben 2 parámetros que son los números a sumar o restar. Los transforma a tipo entero con el "parseInt", y realiza la operación, y finalmente, la muestra por pantalla.

Eso en cuanto a las funciones. Ahora, la parte principal del programa es la que ha podido crear problemas:

Creamos 3 variables.

"n" será la variable que guarde el valor 1 o 2, que nos servirá para saber qué opción eligió el usuario.

"n1" será el primero número para la suma o resta.

"n2" será el segundo número para la suma o resta.

Luego, mostramos por pantalla el menú, pedimos al usuario que introduzca la opción que quiera, guardamos ese valor en "n". Pasamos ese valor a tipo entero con "parseInt".

Ahora creamos el "Switch" para hacer una cosa u otra depende la opción que haya elegido el usuario.Solo hay dos casos, si elige 1 o si elige 2.

Lo único que hay que hacer en cada caso, es pedirle que introduzca los 2 números (n1 y n2) y llamar a la función correspondiente. Opcionalmente, podemos añadir un "default" al Switch.

 

Lección 23: Funciones que devuelven un valor

Hasta ahora las funciones que hemos visto no han devuelto ningún valor. Por ejemplo, la de la Suma, mostraba el resultado en la propia función. Ahora, lo que nos interesa es que ese valor lo devuelva la función, y podamos obtener ese valor en el programa principal, de esa forma, la función es más independiente del programa y queda todo más abstracto, que es lo que interesa en programación.

Para que la función devuelva un valor no hay más que hacerlo con la cláusula "return":

La función de Suma actúa igual que como la que creamos anteriormente, solo que esta vez, en vez de mostrar el resultado (n), devuelve ese valor, a través del return.

Entonces, en el programa principal, cuando llamamos a la función, le asignamos ese valor que retorna a la variable "resultado", como veis en el ejemplo.

De esta forma, la variable "resultado" obtiene el valor de la suma que hemos hecho, en este caso, 3 + 5.

Por último, se muestra el valor de "resultado" por pantalla.

 

Lección 24: POO (Programación orientada a objetos)

La programación orientada a objetos trata de amoldarse al modo de pensar del hombre y no al de la máquina.

El elemento básico de este paradigma no es la función (elemento básico de la programación estructurada), sino un ente denominado objeto. Un objeto es la representación de un concepto para un programa, y contiene toda la información necesaria para abstraer dicho concepto: los datos que describen su estado y las operaciones que pueden modificar dicho estado, y determinan las capacidades del objeto.

Javascript incorpora el uso de la orientación a objetos..

Una de las principales características de la programación orientada a objetos es la abstracción:

Abstraer significa simplificar.

A partir de ahora en adelante vamos a trabajar con clases y objetos. Al principio se puede hacer un poco difícil de entender, pero con constancia y empeño se entenderá y veréis como la programación orientada a objetos ofrece muchísimas ventajas.

Lección 25: Clases

El elemento básico de la programación orientada a objetos es la clase. Las clases definen una estructura de datos, que servirá de "plantilla" para todos los objetos que hagamos de esa 'clase'.

Dicho así es difícil de entender, vamos a poner un ejemplo de la vida cotidiana.

La clase Coche digamos que es como la "plantilla". Y luego, a la hora de crear los coches (recuadros azules) se le asignan los valores que queramos para cada coche. Los coches son los Objetos de dicha Clase.

La clase Coche tendrá una serie de características que le indicaremos nosotros por código. Entonces, a la hora de crear los coches (cuadros azules), todos compartirán esas características, como pueden ser marca, color, etc...

Cada clase tiene métodos y propiedades, como ya veremos en los ejemplos de las próximas lecciones cuando utilicemos clases.

 

Lección 26: Clase Date

Javascript dispone de varias clases predefinidas para acceder a muchas de las funciones normales de cualquier lenguaje, como puede ser el manejo de vectores o el de fechas.

Esta clase nos permitirá manejar fechas. Para crear un objeto de la clase Date (y de cualquiera), se hace de la siguiente forma:

var fecha

fecha = new Date();

Creamos una variable para meter el objeto. Con la cláusula "new" creamos el objeto de la clase Date(). Ahora la variable fecha contiene dicho objeto. Podemos acceder a información de esta clase a través de sus métodos, de esta forma:

<nombre de objeto>.<nombre de método>(parámetros)

Por ejemplo, para acceder al año en el que estamos sería:

fecha.getFullYear()

Para conocer todos los métodos que tiene la clase podemos buscar información por internet, puesto que nadie va a conocer todos los métodos de todas las clases existentes.

En el ejemplo que he realizado, mostraremos por pantalla en qué año estamos y la hora actual en la que nos encontramos.

El programa es el siguiente:

Creamos el objeto de la clase Date. Y desde ese objetos, vamos obteniendo los datos del año y la hora actual, a través de los métodos, como ya he explicado.

También hay métodos que reciben parámetros, ya se irán viendo más adelante en el curso.

 

Lección 27: Clase Array

Un array o vector permite guardar un conjunto de datos. Por ejemplo, en un array podemos guardar las notas de los alumnos de una escuela.

Los arrays se forman en Javascript a través de una clase, de la siguiente forma:

var <nombre_array> = new Array(<longitud>);

Vamos a realizar un ejemplo en el que crearemos un array de 3 posiciones y le asignaremos un valor a cada posición del array. Luego la mostraremos por pantalla, y también trabajaremos con el método "length" de los arrays, que nos permitirá saber cuántos elementos tiene dicho array.

El ejemplo es el siguiente:

Creamos el array de 3 posiciones como se ha explicado anteriormente.

Luego, le asignamos un valor a cada posición:

vector[0] = 3;

Lo que está entre los corchetes indica el índice del array. Cabe destacar que los arrays funcionan con los índices contando desde el 0. Es decir, que si nuestro array tiene 3 posiciones, esas posiciones serán: 0, 1 y 2, y no 1, 2 y 3, como se puede llegar a pensar. Cuidado con eso.

Luego, el programa simplemente muestra los valores del array al completo, y al final, muestra la longitud del array, que como dije, te la da el método length de la clase array.

¿Y qué pasa si mi array tiene 100 posiciones? ¿Tengo que mostrar las 100 posiciones una por una?

Ni mucho menos. Los bucles "for" nos vienen muy bien a la hora de recorrer arrays. Vamos a introducir en este ejemplo un bucle "for" que nos facilite mucho la tarea...Quedaría así:

El bucle recorrerá todo el vector, desde i (que empieza valiendo 0) hasta 3, o la longitud del array que le hayamos dado.

De esta forma solo tenemos que escribir una vez la instrucción de mostrar por pantalla, puesto que el valor del índice del array irá cambiando solo con el ciclo del for.

 

Lección 28: Clase Math

Con esta clase podremos realizar diferentes operaciones matemáticas con facilidad. Por ejemplo, para calcular la raíz cuadrada de un número, y otro método interesante, es el de originar un número aleatorio.

Hay muchas más opciones, como hacer el seno, coseno, potencias...etc.

Pero vamos a ver el ejemplo originando un número aleatorio, y haciendo la raíz cuadrada de dicho número aleatorio:

Con el método random de la clase Math vamos a generar el número aleatorio. Con la siguiente instrucción:

Math.random()*10

Se multiplica por 10 porque queremos que el valor aleatorio sea entre 0 y 10. Si queremos otro número, por ejemplo el 20, solo hay que cambiar el 10 por el 20.

Ese número se le hace un parseInt() y se asigna a la variable "num". Luego lo mostramos y veremos que es un número aleatorio.

Al final del programa, se le hace la raíz cuadrada a ese número, con el método:

Math.sqrt(num)

Por parámetro le pasamos el número al que queremos que le haga la raíz cuadrada.

Puedes ir actualizando el programa para que veas como el número aleatorio va cambiando.

 

Lección 29: Clase String

Una cadena de caracteres (String) es uno o más caracteres encerrados entre comillas simples o dobles. Es decir, una frase completa es una cadena de caracteres. Aunque también puede serlo una letra.

O sea, que cuando creamos una variable a la que le damos como valor una cadena, ya tenemos un String, y podemos utilizar métodos interesantes para transformar la cadena u obtener un valor de esa cadena, etc...Hay muchos métodos para cadenas, vamos a ver algunos de los más utilizados con este ejemplo:

Los métodos que he utilizado son los siguientes:

toUpperCase() -> Sirve para poner la cadena toda en mayúsculas.

toLowerCase() -> Sirve para poner la cadena toda en minúsculas.

charAt(<indice>) -> Recibe por parámetro un número. Este número indicará el índice de la cadena. El método devuelve la letra o valor que hay en ese índice. En el caso del ejemplo, una "r". Recuerda que los índices se empiezan a contar desde 0.

substring(<índice 1>, <índice 2>) -> Recibe 2 parámetros. Este método lo que hace es cortar la cadena. Desde el índice uno, hasta el índice 2. En el caso del ejemplo, desde el 0 hasta el 5, o sea que solo aparecerá la palabra "Curso".

Hay muchos más métodos para utilizar, podéis buscar más información por internet si necesitáis hacer algo concreto con cadenas.

Otra aplicación importante que suele ser muy útil es el operador "+". Con este operador podremos concatenar cadenas. Se pueden juntar 2 o más.

Por ejemplo:

Nos mostrará por pantalla el texto: "Curso de aula facil"

 

Lección 30: Ejercicio nº 3

Es el momento de proponer otro ejercicio de práctica después de tanta teoría. Espero que vaya bien el curso y estéis aprendiendo mucho.

El enunciado del ejercicio es el siguiente:

Realiza un programa con 2 funciones. El programa principal hará una llamada a cada una de las funciones, para comprobar que funcionan correctamente.

Las funciones son las siguientes:

1- Una función llamada "raiz" que reciba un número por parámetro. Esta función realizará la raíz cuadrada de ese número, y devolverá el valor.

2- Una función llamada "letra", que reciba 2 parámetros, una cadena de caracteres, y un índice. La función devolverá la letra cuyo índice ocupe en la cadena. Por ejemplo, si tengo la cadena "Hola", y llamo a la función, le paso la cadena "Hola" y de índice el número 1, el programa devolverá una "o"...O sea, la letra que ocupa la posición del índice en la cadena.

Como ejemplo de funcionamiento del programa, os dejo el resultado que da el programa a estas llamadas de las funciones:

document.write(raiz (9));

document.write("<br>");

document.write(letra ("curso", 1));

El programa muestra por pantalla:

 

Lección 31: Solución ejercicio nº 3

Vamos a resolver el ejercicio número 3. Lo dividiré en 3 partes, primero explicaré cada función por separado y luego el programa principal.

La función "raíz":

Recibe un número "num" al cual tenemos que hacerle la raíz cuadrada. Creamos una variable dentro de la función, llamada "n" para asignarle el valor que devuelve la raíz cuadrada. Lo único que hay que hacer es utilizar el método sqrt() y guardar el valor que devuelve ese método, en la variable "n".

Por último, devolvemos la variable "n" con return. Y ya tenemos hecha la función.

La función "letra":

Recibe por parámetro la cadena y el índice.

Creamos una variable "let" para guardar la letra. Utilizamos el método charAt() para obtener la letra que indique el índice. Finalmente, ponemos la letra "let" en mayúsculas con el método toUpperCase() y se lo asignamos a "let", para que se actualice el valor.

Devolvemos la variable "let" con return, y listo.

Ya están creadas las funciones, ahora solo nos queda hacer las llamadas en el programa principal.

El programa principal:

Los parámetros que recibe la función se pueden ir modificando para comprobar como funciona.

El programa completo quedaría así:

 

 

Lección 32: Formularios y Eventos

Ahora hablaremos del uso de Javascript en los formularios HTML. No vamos a hacer hincapié en los formularios puesto que debe estar aprendido de HTML. Pero vamos a ver como interactuar entre estos formulario y Javascript.

Un evento es una acción del usuario ante la cual puede realizarse algún proceso, por ejemplo, que ocurra algo cuando el usuario haga click en un botón.

Vamos a ver como funciona esto con un ejemplo sencillo. Crearemos un botón en un formulario HTML, y le asignaremo el evento onClick. Dicho evento se ejecutará cuando el usuario pulse el botón.

El ejemplo es el siguiente:

Como veis, el código Javascript es el que hay señalizado en la imagen. Lo que está entre las etiquetas <script>, que solo es la función. Es una función que simplemente muestra un "Hola Mundo" por pantalla (para eso sirve la función "alert" que ya trae Javascript. La diferencia entre el "alert" y el "document.write" es que el alert crea una ventana, y el otro lo muestra por pantalla directamente.

En el código HTML, hay un botón el cual invoca a nuestra función "HolaMundo" a través del evento onClick.

<form>

<input type="button" onClick="HolaMundo()" value="Boton Hola Mundo">

</form>

Simplemente, en el evento onCick, hacemos la llamada a la función, para que se ejecute cuando el usuario haya pulsado el botón. El "value" se refiere a lo que hay escrito dentro del botón.

 

Lección 33: Controles TEXT y PASSWORD

Vamos a ver más controles que se puedan utilizar en un formulario. En este caso, el tipo "text", que es muy importante. Esto nos sirve para que el usuario introduzca un valor en una caja de texto. Y el control "password" es una caja de texto también, pero con la peculiaridad de que no se verá lo que el usuario está escribiendo, por eso es password.

Crearemos un ejemplo donde el usuario tendrá que introducir el nombre y contraseña. Haremos una función en Javascript para mostrar el nombre que ha introducido el usuario. (El password no se puede mostrar, puesto que son datos protegidos, por decirlo así).

Analicemos el ejemplo:

La función "mostrar" simplemente obtiene el valor del "text" de nombre.

var nom = document.getElementById('nombre').value;

Creamos una variable para introducir el valor, y con el método getElementById(<id_text>).value, obtenemos el valor que el usuario ha introducido en dicha "id_text". El "id", como sabréis de HTML, viene dado en el campo de texto del formulario, como veis más abajo en el ejemplo.

Eso por parte de Javascript. Ahora veamos el formulario:

Escribe tu nombre:

<input type="text" id="nombre"><br>

Escribe un password:

<input type="password" id="clave">

<input type="button" value="Confirmar" onClick="mostrar()">

Los campos de texto se ponen con type="text" y se le da de "id" el nombre que queramos, que será el que necesitemos si queremos obtener el valor de ese campo. El password es igual, pero type="password". Es también un campo de texto, pero con los datos ocultos.

Para terminar, creamos un botón que envíe el formulario. Y en el evento onClick, llamamos a nuestra función javascript, para que cuando se pulse el botón se ejecute la función.

 

Lección 34: SELECT

El Select nos permite elegir un string de una lista de string, y cada string tendrá asociado un valor no visible. La función de Javascript lo que hará es saber qué string ha seleccionado el usuario y qué valor asociado tiene.

Vamos a ver un ejemplo para entenderlo todo mejor. Crearemos un Select y al pulsar un botón, nos saldrán diferentes propiedades del Select.

Primero veremos la parte de código HTML:

De esta forma creamos el Select, en este caso tiene 3 opciones, pero podemos añadir las que queramos. El atributo "value" es el valor que le asociamos a cada opción.

Ahora vamos con la parte que nos toca, que es el Javascript. Es una función que nos ofrecerá información sobre el Select; cuantos opciones tiene el Select, índice de la opción seleccionada, etc...

Creamos una variable "texto" para ir introduciendo todos los datos que vamos a mostrar luego por pantalla.

var texto;

texto = "El numero de opciones del select: " + document.formul.Select.length;

Con la propiedad document.formul.Select.length, mostramos el número de opciones que tiene el Select.

formu1 es el nombre del formulario HTML y Select es el nombre que hemos dado al Select. Todo esto puede cambiar depende el nombre que le pongas.

var indice = document.formul.Select.selectedIndex;

texto += "\nIndice de la opcion escogida: " + indice;

En la variable "indice" meteremos el valor del índice del Select del valor seleccionado. O sea, si ha elegido la primera opción, el índice será 0, si ha elegido la segunda, el índice es 1, etc...El índice nos lo indica la propiedad selectedIndex.

texto += nos sirve para que la variable texto vaya recopilando todo lo que vamos escribiendo en ella. El "\n" significa salto de línea.

var valor = document.formul.Select.options[indice].value;

texto += "\nValor de la opcion escogida: " + valor;

En la variable "valor" meteremos el "value" que nos da la opción elegida. Para saber esto, nos hace falta saber con antelación el índice de la opción seleccionada (ya lo sabemos, porque lo hemos hecho anteriormente, está en la variable "indice").

La propiedad document.formul.Select.options[indice].value; nos devuelve el valor de la opción seleccionada.

Y por último:

var textoEscogido = document.formul.Select.options[indice].text;

texto += "\nTexto de la opcion escogida: " + textoEscogido;

document.formul.Select.options[indice].text; Esta propiedad nos sirve para saber el texto que ha seleccionado el usuario. Para ello, también es necesario saber el índice. Entre [] podemos escribir el número de índice que queramos para que nos devuelva el texto correspondiente a ese índice.

El resultado del programa es el siguiente: Select

 

Lección 35: CHECKBOX y RADIOBUTTON

Los RadioButton los utilizamos cuando queremos seleccionar un elemento entre varios elementos de un grupo. En cambio, los Checkbox se utilizan cuando uno o más elementos pueden ser seleccionados.

Primero veamos el ejemplo de RadioButton, donde solo una opción como máximo puede ser seleccionada. La parte HTML es así:

Son type "radio". El id nos servirá luego para acceder a ellos desde Javascript. Y el "name" es Grupo, quiere decir que todos los que tengan de nombre "Grupo" pertenecen al mismo grupo, y de todos ellos, solo se puede elegir uno. Se pueden crear varios grupos de radiobutton.

Finalmente, creamos un botón que llama a la función javascript, que veremos a continuación:

La función lo que hace es, a través de sentencias condicionales "if", saber qué opción ha elegido el usuario. Para ello nos sirve la propiedad checked:

document.getElementById('radio1').checked

Entre paréntesis va la "id" de cada radiobutton, y luego el "checked" para saber si está seleccionado o no. Esta propiedad devuelve un valor bool, o sea verdadero o falso.

Los checkbox se realizan de una forma muy similar. Lo único es que la función en javascript en este caso nos contará cuántos elementos ha seleccionado el usuario.

Veamos la parte de HTML:

Esto es prácticamente igual, solo que en "type" debemos escribir checkbox, obviamente.

Ahora vamos con la función contarSeleccionados():

Creamos una variable "cant" inicializada a 0, que nos va a servir para contar los intereses que tiene el usuario. En cada "if", simplemente aumentamos el valor de la variable cant en 1, con el operador "++". Es lo mismo que escribir:

cant = cant + 1;

Finalmente, mostramos la variable "cant" por pantalla para saber cuántos intereses ha seleccionado.

 

Lección 36: TEXTAREA
Los Textarea son un campo de texto pero más amplio, de más de una línea; le podremos dar nosotros el alto y el ancho, como ahora veremos en el ejemplo.

Vamos a ver como se crea el Textarea en la parte de HTML de nuestro ejemplo:



El "id" será el que queramos, pero lo tenemos que tener en cuenta para luego acceder al textarea con javascript. Las rows son las filas que tendrá y las cols son las columnas. Podemos poner las que creamos necesarias.

Luego creamos un botón, que al pulsarlo, llama a una función javascript. Esta función lo que hará será comprobar que si el texto tiene menos de 500 caracteres. Si tiene menos, es un texto correcto, y si no, no.


La parte de javascript es la siguiente:



Simplemente tenemos que hacer una condición. La siguiente propiedad:

document.getElementById('textolargo').value.length

nos devuelve el número de caracteres del textarea, si ese valor es mayor a 500, es que el texto es demasiado largo, y si no, el texto es correcto.

Si queremos mostrar el texto que hay escrito en el textarea, se hace con la propiedad:

document.getElementById('textolargo').value

Como en los campo de texto "text" que hemos visto anteriormente. Puedes probar a mostrar el texto que ha escrito el usuario.

Lección 37: Eventos onFocus y onBlur

Vamos a ver dos eventos importantes a la hora de crear algo interesante en javascript.

El evento onFocus se ejecuta cuando un componente de nuestra web toma el foco, y el onBlur justamente lo contrario, se ejecuta cuando el componente pierde el foco. En el ejemplo que veremos se va a entender de forma fácil.

Creamos un campo de texto, y haremos que cuando tome el foco, el campo de texto borre el texto que tenga escrito, y que cuando pierda el foco el campo de texto, nos lo avise con una ventana javascript.


La parte de HTML quedaría así:



Ambas funciones reciben como parámetro al componente en cuestión que vamos a utilizar. Por eso se le pasa "this", que significa "este" en inglés. Es decir, que le pasamos por parámetro ese mismo campo de texto "nombre".

Ya solo nos queda ver la parte javascript:



Cuando el evento toma el foco, queremos ejecutar la función vaciar, que simplemente pone el valor del campo de texto vacío. Para acceder al campo de texto, utilizamos la variable que recibimos por parámetro, en este caso "control".

control.value sería el valor del campo de texto, que igualaremos a ' '. O sea, ponerlo vacío.

Y la función verificarEntrada es muy sencilla, simplemente mostramos por pantalla que el componente ha perdido el foco.


Con este ejemplo tan simple entenderemos como funcionan estos 2 eventos. Son útiles para darle dinamismo a nuestra página web.

Lección 38: Eventos onMouseOver y onMouseOut

Estos dos eventos tienen que ver con el ratón o mouse de nuestro ordenador. Funcionan de forma similar a los que hemos visto en la lección anterior. En este caso, un evento se ejecuta cuando el ratón está encima del componente en cuestión, y el otro cuando el ratón se sale del componente.

El ejemplo que vamos a realizar es un campo de texto, que cuando pongas el ratón encima se escriba la palabra "dentro" para saber que estamos dentro, y cuando el ratón se salga del campo de texto, aparezca el texto "fuera", y de esta forma entenderemos el funcionamiento de estos eventos.

La parte del HTML es la siguiente:



Un campo de texto, al cual le ponemos los 2 eventos del ratón. A cada uno de ellas le damos el nombre de una función; para el evento omMouseOver le damos la función "dentro()", y para el onMouseOut la de "fuera()".


Ya solo nos queda programar las funciones. Son muy sencillas, simplemente escribimos el texto "dentro" o "fuera" en la caja de texto. La parte javascript:



Como ya sabemos, para acceder al valor del campo de texto se hace:

document.getElementById('nombre').value

Así que a eso le asignamos el valor de una cadena "Dentro" o "Fuera", y ya tenemos todo listo.

Lección 39: Evento onLoad

Para finalizar, vamos a ver un evento interesante que nos ofrece la etiqueta <body>. El evento onLoad nos sirve para ejecutar algo cuando la web se cargue o recargue.

Vamos a ver un ejemplo sencillito de este evento, puesto que no tiene mucha historia tampoco. En el ejemplo crearemos 2 campos de texto, y en el evento pondremos que el foco lo coja el primer campo de texto y aparezca una ventana que nos indique que se ha cargado la página.

El código es el siguiente:



Lo característico de este evento como veis, es que no se escribe en ningún componente del formulario HTML, sino que se escribe en la parte superior de la página, en la etiqueta <body>

La parte HTML son dos campos de texto sin más, lo único a destacar de este ejemplo es la función Activar() que es la que se llama al ejecutarse el evento onLoad.



En la función hay 2 instrucciones muy sencillitas

document.getElementById('nombre').focus();
alert("Se ha cargado la pagina");

La primera nos sirve para hacer que el campo de texto con id "nombre" coja el foco cuando se cargue la página...Eso lo hacemos con el método focus(). Si quisieramos que el foco lo cogiera el otro campo de texto (aunque no es habitual, lo normal es que lo coja el primero), pues sería:

document.getElementById('edad').focus();

Y lo siguiente es una simple ventana que escribe por pantalla que ya se ha cargado la página.

Lección 40: Ejercicio final

¡Llegamos al ejercicio final del curso! Espero que hayas aprendido mucho con este curso, y ahora, para finalizar propondré un ejercicio final.

(Antes de leer el enunciado, ver el video del resultado del programa, que está abajo del todo)

A continuación se detallarán las funciones que hay que llevar a cabo:

La parte HTML es tal cual véis en el video, lo que nos interesa es la parte javascript, que se compone de 6 funciones:

- Cargar() -> Se cargará en el evento onLoad, y lo único que hará es que el campo de texto "nombre" coja el foco.



- CambiaColor(control) -> Esta función cambiará el color del control que recibe por parámetro. Se ejecuta en el evento onFocus, y para cambiar el color se utiliza la siguiente propiedad: control.style.backgroundColor = "<color>";



- Reset(control) -> Se ejecutará en el evento onBlur, para volver el control a su color original.

- CompruebaDatos() -> Se ejecutará cuando pasemos el ratón por encima del botón "Comprueba Datos". La función comprobará si están rellenos todos los campos o no, y escribirá en el campo de texto la información. El evento que se utilizará será onMouseOver.

-Vaciar() -> Se ejecutará en el onMouseOut para vaciar el campo de texto de cuando se comprueban los datos.

-MuestraDatos() -> Esta función se encargará de mostrar los datos introducidos por el usuario. Se ejecutará en el evento onClick del botón "Mostrar Datos"

Lección 41: Solución ejercicio final

Vamos con la solución del ejercicio final del curso, que será un poco extensa.

Lo primero que hay que recordar, es que tenemos que poner la función Cargar() en la etiqueta <body> de nuestro HTML.





Dicho esto, pasemos a la parte del formulario del ejercicio: (Pulsa botón derecho del ratón encima de la imagen y "Abrir imagen" para verla más grande)



Aquí simplemente estamos creando los campos de texto y los radiobutton y botones que hemos visto en el ejercicio. Podéis ver como están organizados los diferentes eventos en cada componente.

Una vez hecho esto, pasamos a la parte que más nos interesa, el javascript. Vamos a ver las 6 funciones que tenemos que realizar.


Función Cargar():



En esta función simplemente le damos el foco al campo de texto "nombre", que es el primero que aparece. De esta forma cada vez que se cargue la página, el foco lo cogerá este componente.


Funciones CambiaColor() y Reset():



Estas 2 funciones son prácticamente iguales, por eso las pongo a la vez. Se ejecutan en los eventos onFocus y onBlur, y lo que hacen será darle un color diferente al campo de texto para cuando tenga el foco, cosa que hace más visual al programa. Le podemos dar el color que queramos, en el ejercicio le he dado color "cyan", que considero que queda muy bien. Y en la función Reset() volvemos al color original, o sea blanco.



Función CompruebaDatos():

(Pulsa botón derecho del ratón encima de la imagen y "Abrir imagen" para verla más grande)



Creamos una variable "b" que será un booleano, o sea, verdadero o falso. La inicializamos en verdadero, es decir que partimos de la base de que los datos serán verdaderos, y vamos haciendo comprobaciones con los distintos componentes, en el momento que uno esté sin responder por el usuario, esa variable se pone en falso.

Y finalmente, hacemos una comprobación, si "b" es verdadero, entonces todos los campos están rellenos, y si no, pues faltan datos por rellenar.


Función Vaciar():



Muy sencillita, simplemente vaciamos el campo de texto correspondiente.



Función MuestraDatos():



Por último, la función para mostrar por pantalla los valores introducidos por el usuario. Lo primero es saber qué sexo es. Creamos la variable "sexo" y comprobamos los radiobutton para saber si es hombre o mujer.

Una vez tengamos ya la variable "sexo" con el valor correspondiente, ya podemos mostrar todos los datos por pantalla.

Los demás datos se muestran directamente y el sexo, a través de la variable que hemos creado.

Con esto acabamos el ejercicio final.



El ejercicio aquí: Ejercicio Final

RECUERDA: Si quieres descargar el código, pulsa botón derecho sobre el enlace y click en la opción "Guardar enlace como...". A lo largo del curso se irán poniendo ejemplos y puedes descargarlo de esta forma.



Y aquí termina el curso de Javascript, espero que os haya servido de ayuda y hayáis aprendido con el. ¡Hasta la próxima!