Ejercicios Java Script

Ejercicios

Lenguaje Java Script

1.- Este será el primer ejercicio en JavaScript. El código aparecerá entre las etiquetas <script> y </script>. Este código se situará a veces en la cabecera y a veces en el cuerpo de la página web. Para que aparezca una ventana emergente hemos de utilizar el comando alert.

Uso de variables y operadores

Las variables se utilizan en el código de Java Script para poder trabajar con valores, almacenarlos, modificarlos y tomar decisiones en función de su cuantía. Una variable es un elemento que se emplea para almacenar y hacer referencia a un valor. Las variables en los lenguajes de programación siguen una lógica similar a las variables utilizadas en matemáticas.

Alguna información conviene memorizarla para su uso posterior. Esta información se puede guardar en variables tal como se indica.

2.- Escribe un código similar al segundo del ejemplo del enlace anterior. También habrá cuatro botones. Uno de ellos cambiará el valor de la variable a "Rojo", el otro a "Verde" y el último a "Amarillo". El botón escribir tendrá la misma función.

También cabe la posibilidad de declarar y asignar un valor a una variable, todo al mismo tiempo. A continuación se escribe el contenido de la variable.

3.- Haz ahora lo mismo que en el ejemplo anterior. El texto ahora será "Prueba las variables".

Las variables se pueden sumar, restar, multiplicar y dividir entre ellas y con otros números. En el ejemplo se declaran dos variables numéricas y se crea una tercera que será la suma de las dos primeras.

4.- En este ejercicio escribirás un código similar al del ejercicio anterior, pero cambiando los valores de las primeras variables y la operación a realizar entre ellas.

Las variables pueden ser locales y globales. Los variables locales se declaran dentro de una función y sólo se pueden utilizar dentro de ella. Las variables globales se declaran fuera de toda función y se pueden utilizar en todas ellas.

Las variables se pueden agrupar en matrices (Arrays)

Cuando se ha de trabajar con gran cantidad de variables se pueden agrupar, formando una matriz, que es una lista de variables.

En el siguiente ejemplo veremos como trabajar con matrices. Lo primero será definir esa matriz (array).

5.- A continuación escribe un código similar al del ejemplo anterior. En lugar de capitales de provincia utiliza los nombres de cuatro equipos de fútbol.

Eventos

Java Script permite añadir dinamismo a una página web. Se pueden hacer animaciones, cambiar los atributos de la letra, modificar imágenes, realizar cálculos, etc.

Para iniciar estos cambios muchas veces hemos de hacer clic con el ratón sobre algún elemento de la página web (Botón, imagen, texto). El hecho de hacer clic es lo que se entiende como un evento. Estos eventos incluyen acciones que podemos llevar a cabo con el ratón y el teclado, y también relacionados con la página web que se ha cargado.

En este ejemplo se utiliza el evento "onclick" para modificar una variable y sustituir el contenido de un párrafo por el contenido de la citada variable.

6.- En este ejercicio escribe un código similar al del ejemplo anterior, pero cambiando los números por nombres de personas.

7.- Sobre el mismo ejercicio anterior utiliza los eventos "onmouseover" y "ondblclick", en lugar de "onclick".

Funciones

Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra vez las mismas instrucciones. Un script para una tienda de comercio electrónico por ejemplo, tiene que calcular el precio total de los productos varias veces, para añadir los impuestos y los gastos de envío.

Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado el código fuente de la aplicación, ya que:

• El código de la aplicación es mucho más largo porque muchas instrucciones están repetidas.
• Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer tantas modificaciones como veces se haya escrito esa instrucción, lo que se convierte en un trabajo muy pesado y muy propenso a cometer errores.

Las funciones son la solución a todos estos problemas, tanto en JavaScript como en el resto de lenguajes de programación. Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.

En este ejemplo primeramente se crea una función que se ejecutará al presionar un botón.

8.- En este ejercicio escribe un código de Java Script similar al del ejemplo anterior, pero cambiando el nombre de la función y el texto que escribe "document.write".

En este otro ejemplo también se utiliza una función para imprimir un texto en la pantalla, pero se añaden atributos al botón que llama a la función.

9.- Utiliza el ejemplo anterior para crear un código Java Script cambiando los colores y el tamaño de la letra del botón.

Algunas funciones en Java Script

10.- A continuación pasaremos a escribir un pequeño texto en la pantalla, mediante el comando document.write.

Observa el siguiente ejemplo. De la misma forma que se puede utilizar una ventana emergente para informar, también se puede utilizar para introducir información. En este otro ejemplo se puede observar como funciona. Al pulsar un botón se abren ventanas emergentes para introducir datos que posteriormente se muestran en pantalla.

11.- En este ejercicio has de conseguir que podamos introducir los nombres de dos personas en ventanas emergentes y, posteriormente, se impriman en la pantalla.

12.- Escribe ahora otro programa en Java Script para pedir dos números, mediante ventanas emergentes, e imprimir después el resultado de su producto.

Estructuras de control de flujo

Analiza este ejemplo de programa que utiliza una función condicional. En estas funciones condicionales la operación realizada depende del valor de la variable que se compara.

13.- Realiza un ejercicio sobre la base del ejemplo anterior, variando las cantidades de las diferentes condiciones.

En estos ejemplos se utiliza una repetición mediante el comando "for".

14.- Realiza un ejercicio utilizando el comando "for" para imprimir los cinco valores de una matriz de texto.

Modificación de un texto y sus atributos

Tal como se muestra en el ejemplo, mediante una función se puede modificar el contenido del texto situado en un párrafo o en una celda de una tabla. Para todos estos cambios se utiliza el comando "style".

15.- Realiza un ejercicio en el que mediante una función se cambie una frase por otra en un párrafo de la página web.

También se pueden cambiar los atributos de la letra, fuente, tamaño, color, etc. En este ejemplo se utiliza una función que permite cambiar el color de un texto.

16.- Realiza un ejercicio similar al del ejemplo anterior para cambiar la fuente, el tamaño y el color de la letra de un párrafo de la página web.

Modificación de una imagen y sus atributos

En este ejemplo podemos ver como se puede cambiar una imagen por otra pulsando un botón.

17.- Realiza un ejercicio similar al del ejemplo anterior para cambiar una imagen por otra. Busca otras dos imágenes que te gusten.

En este ejemplo podemos ver como se cambia el tamaño de una fotografía.

18.- Realiza un ejercicio similar al del ejemplo anterior, pero de forma que se cambie el tamaño de la imagen por un valor fijo.

Uso de formularios

La programación de aplicaciones que contienen formularios web siempre ha sido una de las tareas fundamentales de JavaScript. De hecho, una de las principales razones por las que se inventó el lenguaje de programación JavaScript fue la necesidad de validar los datos de los formularios directamente en el navegador del usuario.

Un formulario permite introducir datos mediante elementos <input> del tipo text, textarea, button, checkbox, radio, select, range slider, etc.

En este ejemplo se utiliza un formulario para introducir información que posteriormente se imprime en pantalla.

19.- Realiza un ejercicio similar al del ejemplo anterior, pero utilizando una lista de opciones "select" para imprimer el valor seleccionado en pantalla.

En este otro ejemplo se utiliza un formulario con cuatro tipos de elementos de entrada de datos: "text", "radio", "checkbox" y "select".

20.- Realiza un ejercicio similar al del ejemplo anterior, pero utilizando otros datos, con otra información.

En este ejemplo se utiliza una barra de desplazamiento (input type=”range”) para introducir el valor de la edad en un formulario.

21.- Realiza un ejercicio similar al del ejemplo anterior, pero utilizando tres barras de desplazamiento para tres tipos de datos numéricos.

Esperando un tiempo antes de hacer algo

En Java Script podemos utilizar temporizadores que retardan la realización de alguna acción. En el siguiente ejercicio se puede ver como utilizar la orden de temporización "setInterval" para retrasar la aparición de una ventana emergente.

22.- Realiza un ejercicio similar al del ejemplo anterior, pero utilizando "setinterval" para cambiar alternativamente la imagen que aparece en la página web por dos posibles.

Uso de un canvas

Java Script nos permite crear un lienzo de dibujo en una página web. Vamos a ver ahora de que forma podemos hacerlo.

23.- Crea un lienzo de dibujo y dentro de él un rectángulo rojo de 80 x 80 pixels.

24.- Dentro de un lienzo de dibujo dibuja un rectángulo rojo y sobre este dos círculos, uno verde y otro azul (arc())..

25.- Dentro de un lienzo de dibujo dibuja un pez, mediante lineas curvas (quadraticCurve()).

Algún ejemplo algo más complejo

26.- En este ejercicio podemos hacer que gire una fotografía.

27.- En este ejercicio se construye, mediante funciones, un reloj digital, para colocar en la pantalla.

28.- Este script nos permite ver la fecha y la hora cuando hacemos clic sobre el botón.

29.- En este ejercicio se introducen tres datos que se guardan en variables. Uno de estos datos, la edad, se introduce desplazando un cursor. Pulsando el botón se imprimen los datos en una barra inferior.

30.- Creación de una calculadora mediante código html.

31.- En este ejercicio se crea una calculadora múltiple de superficies.

Proyecto definitivo

Has de elegir entre estas ideas para realizar un proyecto de página web que utilice Java Script para realizar animaciones, cálculos, simulaciones, etc.

32.- En este ejercicio hemos de conseguir mover una bola por la pantalla. Dispone de dos espacios, en el de la izquierda tenemos una tabla de 4x4 casillas, aquí es donde se moverá la bola. En el espacio de la derecha disponemos de cuatro botones con flechas sobre los que actuamos mediante el ratón para provocar el movimiento de la bola.

33.- En este ejercicio vamos a construir una calculadora básica que realice la suma, resta, multiplicación y división. La pantalla podría tener este aspecto.

34.- En este ejercicio vamos a hacer un juego de habilidad del tipo tres en raya. Los dos jugadores utilizan el ratón para colocar y mover las fichas y juegan por turnos.

38.- Aquí puedes encontrar otros ejemplos.

Ejercicio final

39.- La base del ejercicio es una tabla como la que se muestra. En la esquina superior izquierda se sitúa un canvas. En este canvas ha de aparecer una imagen que podremos girar, un cañón. Otra imagen, el pájaro estará fija. Otra imagen, la bala de cañón, se moverá, avanzando, al apretar el botón correspondiente.

Los otros dos botones permitirán girar el cañón para poder disparar al pájaro. Si la bala llega hasta el pájaro, este desaparecerá.

Para hacer el ejercicio se ha de utilizar el comando setInterval( , );.

Contenidos básicos

Entre los conceptos que cabe tener en cuenta sobre programación en JavaScript se pueden citar:

• Comando alert.
• Declaración y uso de variables numéricas y alfanuméricas.
• Elemento button.
  • Comando document.write( );
• Comando document.getElementById( ).innerHTML= ;
• Declaración y uso de matrices.
• Eventos de ratón (onclick, ...).
• Creación de nuevas funciones con el comando function.
• Introducción de información por el teclado mediante el comando prompt( ).
• Funciones condicionales if( ), else if ( ), else ( ).
  • Estructura de repetición for (var i=0; i<variable.length; i++).
  • Comando de temporización setInterval( , );.
• Comando document.getElementById( ).src= ;.
• Uso del canvas.