lunes, 12 de diciembre de 2011

Recibir los datos del formulario

hora ya sabes crear un formulario. Una vez que rellenas el formulario y lo envías, la página web que contiene el programa debe recibir los datos del formulario y procesarlos.

Lo ideal sería que si por ejemplo introduces un nombre, en el programa en javascript existiera automáticamente una variable llamada nombre cuyo valor fuera lo que el usuario ha introducido en el campo nombre del formulario. Pero no es tan sencillo.

Hay varios métodos para enviar la información al programa. Estan el GET y el POST. EL POST no funciona en javascript, así que usaremos el GET.

Este método incluye los datos del formulario en la dirección web que se escribe en la barra de direcciones. Por ejemplo, yo acabo de hacer un formulario que llama a una página web que se llama programa.html. El formulario te pide un nombre. Yo he metido antonio.

Al pulsar enviar, el navegador abre programa.html y en la barra de direcciones del navegador aparece lo siguiente:

file:///C:/Documents%20and%20Settings/%C3%alvaro/Mis%20documentos/Documents/paco/programa.html?nombre=antonio

Fíjate que aparece la ruta del fichero programa.html y al final ?nombre=antonio

Ahora deberiamos extraer de esa cadena de caracteres el dato antonio y meterlo en una variable por ejemplo nombre. Para eso debemos hacer varias cosas: Primero deberíamos tener una variable que contenga toda esa cadena de caracteres y después sacar de esa cadena el dato que queremos.

la variable que contiene esa cadena se llama location.href. De manera que si yo escribo en el programa document.write(location.href) me escribirá en el documento toda esa cadena, es decir:

file:///C:/Documents%20and%20Settings/%C3%alvaro/Mis%20documentos/Documents/paco/programa.html?nombre=antonio

El ejercicio ahora consiste en tomar el formulario del ejercicio anterior, pasar los datos a un fichero con un script que escriba en el documento la dirección que está escrita en la barra de direcciones, es decir, la url.

Formularios

Un formulario es una parte de una página web que se utiliza para recoger datos. Se rellenan una serie de campos y se pulsa un botón para transmitirlos.

Normalmente queremos hacer un formulario para recoger la información que luego va a ser utilizada por un script. El formulario lo hacemos en html, y después un script recoge esa información y realiza los cálculos correspondientes. Es decir, que el formulario se hace en html, no en javascript.

Lee el siguiente tutorial y crea una página web con un formulario para recoger los siguientes datos: nombre, apellido1,apellido2, nota1, nota2, nota3.
http://www.htmlquick.com/es/tutorials/forms.html

jueves, 1 de diciembre de 2011

arrays

A veces queremos introducir en un programa una serie de datos en lugar de uno solo. Imagina por ejemplo que tenemos 25 alumnos y queremos guardar los datos de cada uno en una serie de variables, por ejemplo nombre y apellidos. En vez de crear 25 variables nombre como nombre1, nombre2, etc, creamos una sola variable nombre que guardará los nombres de los veinticinco alumnos. Por ejemplo nombre[1], nombre [2] etc. Esta variable que es como una lista numerada de variables se llama array.

Lo primero que tenemos que hacer es crear la variable nombre como array. Esto no es necesario para otros tipos de variables. Lo qu ese escribe es por ejemplo:

nombre =new Array(25);

Esto crea un array de 25 elementos. Cada uno puede ser por ejemplo el nombre de un alumno. Ahora podemos escribir por ejemplo nombre[1]="José";

si queremos recorrer la lista entera de nombres y mostrarlos podemos escribir este programa:

for(i=1;i<26;i=i+1){

document.write(nombre[i])

}

Este programa es un bucle. Ejecuta la instrucción document.write muchas veces, una para cada alumno, con un valor diferente de i. Empieza con i=1, tal como se dice al principio de la sentencia for. Ejecuta lo que está entre llaves siempre que i sea menor que 26, y cada vez que llegue al final, aumentará i en uno, tal como se dice al final de la instrucción, de modo que ejecutará la instrucción 25 veces con valores de i de uno a 25, y al final recorrerá todo el array mostrando todos los nombres.

vamos a ver otro ejemplo. Imagina que queremos sumar todos los números del 1 al 1000. Podemos hacer este programa:

suma=0;
for(i=1;i<1001;i++){
suma =suma+i;
}
document.write(suma);

Ejercicio: Haz un script que te pida el número de notas y luego te pida las notas una por una y al final haga la media. Es igual que el ejercicio anterior pero en vez de crear las variables nota1, nota2... creas un array de notas. Al principio debes pedir el número de notas y guardarlo en una variable, por ejemplo total, y creas un array igual que el del ejemplo anterior pero en vez de 25 elementos, con total.

JAVASCRIPT

Un programa es un conjunto de órdenes o instrucciones que se le dan al ordenador para que realice cualquier tarea.

Un script es un programa que está incluido dentro del código html de una página web, y puede escribirse en diferentes lenguajes. Nosotros vamos a aprender un poco de uno llamado javascript.

Para crear un script primero hay que escribir la página tal como la hemos escrito siempre, pero hay que escribir un código para comenzar el script y otro para acabarlo, y en medio de estos dos códigos se introduce el script, tal como se ve en el siguiente ejemplo:




y en medio es donde se escribe el script.

Vamos a escribir programas que nos pidan información, hagan una serie de cálculos o tareas sobre esa información, calculen un resultado y lo muestren.

Para ello debemos conocer instrucciones que nos permitan recoger información del usuario, instrucciones para calcular e instrucciones para mostrar resultados:

Para tomar información vamos a usar la instrucción prompt. Se usa como en el siguiente ejemplo:

c = prompt(“escribe un numero);

Esa instrucción muestra al usuario un recuadro de diálogo con el texto escribe un número y un recuadro de texto para que el usuario escriba un número. El número que el usuario escriba será el valor de c.

Ejercicio 1. Escribe una página web con un script en javascript con la instrucción anterior.

Para realizar el cálculo simplemente hacemos algo como b=c+2; entonces suma 2 a c, y el resultado será el valor de c. Podemos hacer por ejemplo c=c+2; entonces suma 2 a c. Para multiplicar no se usa la x, sino el *.

Para escribir el resultado podemos usar la instrucción document.write. Por ejemplo:

document.write (a);

escribirá en el documento el valor de a. document.write (“a”); escribirá la letra a.

Este es un ejemplo de script que calcula el índice de masa corporal



Haz una página web que tenga un enlace donde se te pregunten tres notas y te calcule la media. Ten en cuenta una cosa: una página será aquella donde se presenta el enlace con la opción de calcular la media, y otra página será similar a la anterior, y contendrá el script que calcula la media.

domingo, 20 de noviembre de 2011

MODELO DE CAJAS

Lee el siguiente tutorial:

http://www.cristalab.com/tutoriales/el-modelo-de-caja-de-css-c180l/

Y haz el modelo que se indica

Ejercicio de CSS

Haz una página con las siguientes condiciones

1. Debe tener una hoja de estilo independiente de la página de contenidos
2. Debe tener un estilo definido para el título de la página, otro para los títulos de los párrafos y otro para el texto de contenido
3. Debe tener una imagen
4. Debe tener un enlace.

martes, 15 de noviembre de 2011

CSS

Lee el siguiente tutorial:
http://www.desarrolloweb.com/articulos/183.php
Y prueba los diferentes códigos de ejemplo para ver el efecto
Asegúrate de entender todo bien para poder hacer los ejercios que vendrán después