Sim
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 simple, que normalmente está incluido dentro de otra estructura como una página web, un videojuego, etc, 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:
<html>
<head>
<title="prueba>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<script language="javascript">
</script>
</body>
</html>
y entre los códigos <script language="javascript"> y </script>es donde se escribe el script Es decir, que para los siguientes ejercicios, copia el texto anterior, y todo lo que escribas lo haces entre <script language="javascript"> y </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.
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
<html>
<head>
<title="prueba>
</head>
<body>
<script language="javascript">
peso=prompt("introduce tu peso en kilos");
altura=prompt("introduce tu altura en centímetros");
altura=altura/100;
indice=peso/(altura*altura);
document.write("Tu índice de masa corporal es ");
document.write(indice);
</script>
</body>
</html>
Las variables en javascript pueden ser de varios tipos, al igual que pasaba con los campos en las bases de datos: pueden ser textos, números, fechas, etc. Las variables que se toman con el prompt son por defecto textos, y si se suman lo hacen como texto. De esta manera 2+2 = 22. En el ejemplo anterior, al multiplicarse, el navegador entiende que son números y las convierte automáticamente. Si voy a sumar números que he cogido con el prompt debo previamente pasarlos de texto a número. Esto se hace así. a= parseFloat(prompt("Introduce un número"); La función parseFloat cambia de texto a número. Fíjate que la F es mayúscula.
Ejercicio 1. 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.
BUCLE FOR
A veces queremos hacer algo que se repite. Por ejemplo escribir hola mil veces. No queremos escribir document.write("hola"); mil veces.
En scratch había una instrucción que era repetir 10 veces, o el número que quisiéramos. Aquí hay algo parecido. Tenemos una variable contador. Le diríamos al programa algo así:
Contador vale 1
Si contador vale menos de 1001, pasa a 3. Si no, pasa a 6
Escribe hola
Suma 1 al contador
Vuelve a la instrucción 2
Fin
Esto escribe hola 1000 veces, y si quisiérmamos escribirlo 2000 veces, sólo tendríamos que cambiar el 1000 por un 2000
En javascript se escribe así:
for(i=1; i<1001; i=i+1){
document.write("hola");
}
En Scratch podíamos poner un bucle que repitiera algo 1000 veces. Esto es lo mismo. Todo lo que queramos que se repita tendrá que estar entre las dos llaves del for.
El for funciona de la siguiente manera: cuando dice for (i=1 quiere decir que la variable i valdrá 1 al principio.
Cuando dice i<1001 quiere decir que para entrar en el bucle se tiene que cumplir esa condición
Cuando dice i=i+1 quiere decir que al acabar el bucle, sumará 1 al valor de i
De esta manera, al principio i vale 1, y como es menor que 1001, entra en el bucle. Al final, i=i+1, es decir, 2, al ser menor que 1001, entra en el bucle, y así hasta 1001 que no es menor que 1001 y por tanto no entra en el bucle
Recuerda que el código para el salto de línea es <br>
Ejercicio 2. Escribe un programa que escriba hola cinco veces en diferentes líneas.
3. Escribe un programa que escriba los números del uno al cinco en diferentes líneas. Usa la i, que va variando de uno a cinco
Vamos a ver otro ejemplo que sume los números del uno al 10. La suma se guarda en la variable total:
var total = 0;
for(i=1; i<11; i++){
total = total + i;
}
document.write (total);
La primera vez, total vale 0, e i=1, entonces total =total + i, o sea 0 + 1 = 1. Luego i = 2. total = 1 + 2 = 3, y así hasta i= 10
Ejercicio 3. Haz un programa que calcule el producto de los cinco primeros números. Es decir: 5*4*3*2*1. El resultado debe dar 120. Ten en cuenta que el signo de multiplicación es * y no x
ARRAYS
Si quiero hacer la media de cinco notas, puedo hacer esto:
nota1= parseFloat(prompt("dame una nota"));
nota2= parseFloat(prompt("dame una nota"));
nota3= parseFloat(prompt("dame una nota"));
nota4= parseFloat(prompt("dame una nota"));
nota5= parseFloat(prompt("dame una nota"));
media =(nota1+nota2+nota3+nota4+nota5)/5;
document.write(media);
Este programa funcionaría bien, pero si quisiéramos sumar por ejemplo 100 notas, sería demasiado largo de escribir. Sería mejor algo así utilizar un bucle, de manera que i vaya de uno a 100, y cada vez que pase por el bucle me pida nota i. Ese tipo de variable con una palabra y un número, se llama array, y se escribe así: nota[1], nota[2]....
Primero hay que escribir una instrucción creando el array. Declarándolo
nombre =new Array(25);
Esto declara un array de 25 nombres: nombre[0], nombre[1]....hasta nombre[24]
Si quiero pedir 25 notas, escribo:
var nota =new Array(25);
for(i=1;i<25;i=i+1){
nota[i] = parseFloat(prompt("dame una nota");
}
Si por ejemplo, quiero subir un punto a todas las notas
for(i=0;i<25;i=i+1){
nota[i] = nota[i] + 1;
}
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.
Ejercicio 4 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.
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.
Ejercicio 5 Lee el siguiente tutorial y crea una página web con un formulario para recoger los siguientes datos: nombre, apellido1,apellido2, nota1, nota2, nota3. No es necesario que utilices todos los tipos de datos. Sólo el texto.
http://www.htmlquick.com/es/tutorials/forms.html
RECIBIR LOS DATOS DEL FORMULARIO
Ahora 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
Ejercicio 6. 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.
TRABAJAR CON CADENAS
Ya hemos visto que los datos del formulario llegan al fichero del script en la barra de direcciones del navegador.
Pero la dirección web (url) es una cadena de caracteres muy larga. Dentro de esa cadena está la información que queremos, pero tenemos que sacarla. Para eso tenemos que aprender a dividir una cadena de caracteres en otras cadenas más pequeñas.
Imagina que tenemos un texto y queremos dividirlo en palabras. Por ejemplo, tenemos una variable así: cadena= "esto es una frase" y queremos hacer un script que de como resultado:
esto
es
una
frase
Tenemos una variable que se llama cadena y queremos tener una variable que valga "esto" otra que valga "es" y así hasta el final de la frase. Mejor un array: array[0]="esto" array[1]="es" array[2]="una"
Necesitamos una instrucción que cree el array a partir de la cadena. Esta es la instrucción split.
Se escribe así:
array=cadena.split('separador');
array es el nombre del array que va a contener las palabras. Se puede llamar array o llamarlo con otro nombre
cadena es el nombre de la variable que contiene la cadena que quiero dividir.
.split hay que escribirlo así tal cual.
separador es el caracter por el cual se va a separar la cadena. Si quiero dividir una frase en palabras, el separador será el espacio. Hay que escribirlo entre comillas simples. Así ' '.
8. Escribe un script que te pida una frase y la divida en palabras
Ejercicio 7 Haz un programa que pida una frase con el prompt y la divida en palabras escribiendo cada una en una columna
Proyecto
Haz un formulario que te pida un número, con un botón de enviar que te dirija a una página con un script. En ese script, el número aparecerá en la página de direcciones separado de la dirección por una interrogación. Utiliza el split para separar el dato de la dirección. Te quedarás con una variable que se llame por ejemplo numero=5. Utiliza el split nuevamente para separar el dato (5) del resto. Calcula el factorial del número.
Tendrás al final una página que te pida un número mediante un formulario y te calcule su factorial.
Proyecto 2
Haz una página que te pida la altura y el peso mediante un formulario, te calcule tu índice de masa corporal y te indique si estás demasiado delgado, normal, sobrepeso u obeso