TEMA 4. Introducción a la programación con el lenguaje JavaScript. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)

Tamaño: px

Comenzar la demostración a partir de la página:

Download "TEMA 4. Introducción a la programación con el lenguaje JavaScript. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)"

Jaime Crespo Bustamante
hace 8 años
Vistas:

1 TEMA 4. Introducción a la programación con el lenguaje JavaScript Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)

2 Sesión 9 Formularios, funciones y eventos

3 1 Introducción etiquetas Hasta ahora, la entrada de datos por teclado se ha realizado con la función prompt. Esta función, aunque útil, no resulta cómoda de usar por el visitante de nuestra página web y eso se debe a que, cada vez que necesitamos un dato, aparece un cuadro de diálogo independiente a la propia página que en muchas ocasiones resulta poco práctico. cuadros de texto botón Pero afortunadamente, existen otras formas de pedir datos en HTML. Es posible diseñar un formulario con etiquetas, cuadros de textos y botones que tenga la misma finalidad que la función prompt. E n el ejemplo, los cuadros de texto nombre, apellidos y edad recogen los datos que serán procesados cuando se pulse el botón S aludo

independiente a la propia página que en muchas ocasiones resulta poco práctico. cuadros de texto botón Pero afortunadamente, existen otras formas de pedir datos en HTML.

name="ficha"> <p><b>nombre:</b> <input type="text" name="nombre"> <p><b>apellidos:</b> <input

4 1 E ntrada de datos por formulario. Ejemplo. etiquetas cuadros de texto botón <html> <head><title>e jemplo</title></head> <body> <form name="ficha"> <p><b>nombre:</b> <input type="text" name="nombre"> <p><b>apellidos:</b> <input type="text" name="apellidos"> <p><b>e dad:</b> <input type="text" name="edad" size="2"> <input type="button" value="s aludo"> </form> </body> </html>

5 2 Estructura de un formulario. Introducción. Se utiliza las etiquetas <form>... </form> para delimitar los límites del formulario. Un formulario es un conjunto de elementos de entrada de datos, tales como: etiquetas, cuadros de textos, botones, casillas de verificación, cuadros des plegables,... De todos ellos, estudiaremos las etiquetas, los cuadros de texto y los botones. Si el formulario va a ser procesado por un lenguaje de programación, como por ejemplo JavaScript, debe estar nombrado. Se usa el parámetro name dentro de la etiqueta form. <form name="ficha"> <p>e sto es un formulario compuesto por una sola etiqueta </form>

plegables,... De todos ellos, estudiaremos las etiquetas, los cuadros de texto y los botones.

6 2 Estructura de un formulario. Etiquetas. Las etiquetas de un formulario son mensajes escritos dentro del límite de <form>...</form> En el ejemplo anterior, vimos un formulario de una sola etiqueta. En cambio en el siguiente ejemplo, el formulario está formado por tres etiquetas distintas: Nombre, Apellidos y E dad. <form name="ficha"> <p><b>nombre:</b> <p><b>apellidos:</b> <p><b>e dad:</b> </form>

..</form> En el ejemplo anterior, vimos un formulario de una sola etiqueta.

7 2 Estructura de un formulario. C uadros de texto. Los cuadros de texto son variables definidas en el formulario. Gráficamente se representan como cajas blancas en las que podemos escribir texto. Para definir cuadros de texto, se usa la etiqueta <input type= text name= nombre_de_la_variable >. Posteriormente, en nuestras funciones JavaScript, usaremos nombre_formulario.nombre_de_la_variable.value para referirnos al contenido del cuadro de texto. <form name="ficha"> function mensaje_para() { JavaScript <p><b>nombre:</b> <input type="text" name="nombre"> <p><b>apellidos:</b> <input type="text" name="apellidos"> <p><b>e dad:</b> <input type="text" name="edad" size="2"> } document.write('hola ' + ficha.nombre.value); HTML </form>

$<form name="ficha"> function mensaje_para() { JavaScript <p><b>nombre:</b> <input type="text" name="nombre"> <p><b>apellidos:</b> <input type="text" name="apellidos"> <p><b>e dad:</b>$

8 2 Estructura de un formulario. B otones y eventos. Los botones sirven para enlazar la información guardada en los cuadros de texto con funciones escritas en JavaScript. Hacer clic en un botón significa activar la ejecución de una función JavaScript. La sintaxis básica para dibujar botones en nuestras páginas web es la siguiente: evento onclick <input type="button" value="mostrar mensaje" onclick= mensaje_para() > <form name="ficha"> function mensaje_para() { JavaScript HTML <p><b>nombre:</b> <input type="text" name="nombre"> <p><b>apellidos:</b> <input type="text" name="apellidos"> <p><b>e dad:</b> <input type="text" name="edad" size="2"> <input type="button" value="mostrar mensaje" onclick= mensaje_para() > </form> } document.write('hola ' + ficha.nombre.value); Botón Mostrar mensaje

$mensaje_para() { JavaScript HTML <p><b>nombre:</b> <input type="text" name="nombre"> <p><b>apellidos:</b> <input type="text" name="apellidos"> <p><b>e dad:</b> <input type="text" name="edad"$

9 3 Eventos. B otones y eventos. Los eventos son el nexo de unión entre el formulario y las fucniones escritas en JavaScript. Existen muchos tipos de eventos, pero solamente veremos el evento onclick ligado a los botones. La manera de usarlos es la siguiente: evento onclick <input type="button" value="mostrar mensaje" onclick= mensaje_para() > <form name="ficha"> function mensaje_para() { JavaScript HTML <p><b>nombre:</b> <input type="text" name="nombre"> <p><b>apellidos:</b> <input type="text" name="apellidos"> <p><b>e dad:</b> <input type="text" name="edad" size="2"> <input type="button" value="mostrar mensaje" onclick= mensaje_para() > </form> } document.write('hola ' + ficha.nombre.value); Botón Mostrar mensaje

$La manera de usarlos es la siguiente: evento onclick <input type="button" value="mostrar mensaje" onclick= mensaje_para() > <form name="ficha"> function mensaje_para() { JavaScript$

10 Ejercicio Modifica el ejercicio 4.23 (calcular nif) para que pida: el nif usando un formulario con una etiqueta llamada DNI, un cuadro de texto (variable dni) donde se recoja el dni a tranformar en nif y un botón que al pulsarlo muestre en la página (document.write) el nif calculado.

etiqueta llamada DNI, un cuadro de texto (variable dni) donde se recoja

11 Ejercicio Modifica el ejercicio 4.19 para que pida el lado de la celda del tablero (cuadro de texto) y muestre por pantalla el tablero de ajedrez. Convierte en función el código JavaScript usado para pintar el tablero. Sustituye la instrucción prompt por un formulario con una etiqueta, un cuadro de texto (lado) y un botón que al pulsarlo active la función llamada dibuja_tablero_ajedrez(lado). La función admite un parámetro de entrada (lado) y no devuelve ningún valor (en este caso, no se usa la palabra return). Solamente dibujará el tablero de ajedrez.

Convierte en función el código JavaScript usado para pintar el tablero.

12 Ejercicio Dada la ecuación de segundo grado: hay que calcular el discriminante: Se pueden presentar tres casos distintos: Si discr>0 las dos raíces son reales y distintas, y valen: Si discr=0 las dos raíces son reales e iguales, y valen: Finalmente, si discr<0 las dos raíces son complejas conjugadas. Las partes real e imaginaria valen: Haz un programa en JavaScript que recoja los datos de los coeficientes a, b y c, usando un formulario y calcule cualquier ecuación de segundo grado que se le indique.

dos raíces son reales y distintas, y valen: Si discr=0 las dos raíces son reales e iguales, y valen: Finalmente, si discr<0 las

Documentos relacionados

RECUPERAR DATOS DE UN FORMULARIO HTML USANDO PHP. USO DE $_GET. EJEMPLOS Y EJERCICIOS RESUELTOS. (CU00833B)

APRENDERAPROGRAMAR.COM RECUPERAR DATOS DE UN FORMULARIO HTML USANDO PHP. USO DE $_GET. EJEMPLOS Y EJERCICIOS RESUELTOS. (CU00833B) Sección: Cursos Categoría: Tutorial básico del programador web: PHP desde