Conceptos básicos para programar
Las variables
Para comenzar a utilizar Javascript (y cualquier lenguaje de programación) es necesario conocer algunos conceptos básicos, no podemos empezar a hacer una casa si no sabemos que existen los ladrillos.
Un programa es una lista de instrucciones escritas usando algún lenguaje informático. Las instrucciones del programa procesan datos y producen resultados.
Un ejemplo de la vida cotidiana: si quiero programar el horno para que mantenga una temperatura le tengo que dar un dato: la temperatura que quiero que mantega.
Otro ejemplo: si le ordenamos a alguien que pinte una habitación le tenemos que decir al menos que debe pintar y de que color. Debemos darle datos.
En programación ocurre igual: las instrucciones deben ir acompañadas de los datos.
Por ejemplo, puedo escribir un programa para que escriba en pantalla la palabra "Hola" seguida del nombre de una persona . Habrá que darle el nombre de esa persona, el programa tiene que recibir ese dato.
Si quiero que un progrma me calcule el precio de las manzanas que voy a comprar le tengo que dar datos como los kilos de manzanas a comprar y el precio del kilo. Si le digo que quiero 2 kg y el kilo vale 0.75 Euros, el programa dirá que me cuestan 1.50 € ( 2*0.75).
Los programas usan los datos de acuerdo a las instrucciones que lo forman. Vamos al ejemplo del saludo, si quiero que salude a alguien de nombre Jose, escribiría un programa algo como
escribe "Hola José"
Pero si quiero que salude a María lo cambiaría por
escribe "Hola María"
¿Un programa para cada nombre diferente ? No tiene mucho sentido. Esto se soluciona con las variables: elementos con nombre donde se guardan los datos.
En los ejemplo previos usaría una variable, que podría llamar nombre, para guarda el dato "Juan" o una variable precio para guardar el número 0,75 y cantidad para guardar el peso en el ejemplo de las manzanas.
Si ahora digo al ordenador que escriba nombre el programa mira lo que hay dentro de la variable nombre y escribirá su contenido, o sea, Juan.
Un pequeño ejemplo para no aburrirnos
cantidad = 5;
precio = 4;
window.alert( precio * cantidad);
Como resultado al ejecutar este programita se escribiría la cantidad 20, resultado de multiplicar cantidad por precio, o sea , 5*4.
Puedes ejecutar este código y ver el resultado
Si quieres escribirlo tu mismo puedes usar el editor en linea
¿Como ha funcionado este script?
- Guarda 5 en la variable cantidad
- Guarda 4 en la variable precio
- Escribe el resultado de cantidad * precio
Fíjate que para guardar un valor en una variable se usa el símbolo = (no es el de las matemáticas). Es el usado habitualmente en los lenguajes de programación.
Este ejemplo te puede servir para entender el concepto de variable y también para ver otro concepto básico en programación, los operadores:
Son simbolos para representar operaciones con datos. En este ejemplo se usa el operador * para multiplicar, pero hay muchos más que iras viendo si sigues este tutor.
En resumen
Los datos son las piezas sobre las que actúan los programas cuando se ejecutan.
Las variables son como cajas con nombre capaces de almacenar un valor en cada momento.
cantidad = 5;
precio = 4;
echo cantidad*numero;
Resultado de este programita: 20
Visto a bajo nivel (hardware) esas cajas no son más que espacios de memoria
Funciones
Sigo con el ejemplo del precio. Supon que lo vas a usar para crear un tickect de compra con muchos productos, o sea, con muchas cantidades y precios.
Para calcular el precio de cada producto tendrías que escribir una y otra vez el código de arriba. Un poco repetitivo, imagina si en lugar de dos lineas de código hubieran cien. Desesperante.
Pues bien, cualquier lenguaje de programación nos ofrece una solución para que no nos cansemos: las funciones.
Las instrucciones del ejemplo podrían encerrarse en un bloque con un nombre, por ejemplo precio() y tendrías una función.
function precio(cantidad, precio){
var resultado = cantidad*precio;
return resultado;
}
window.alert(precio(5,4)+"\n"+precio(4,10));
Si ejecutas este ejemplo verás que aparecen dos valores 20 (5*4) y 40 (4*10), pero no has tenido que repetir las instrucciones de multiplicar.
Si quieres calcular un precio llamas a la función y le pones entre paréntisis dos números para que la función calcule el producto de ambos y nos devuelva el resultado.
Es decir mediante las funciones creamos órdenes que luego podremos usar en el resto del programa. Son como ampliar el vocabulario del lenguaje.
En resumen
Puedes ver las funciones como miniprogramas, que se ejecutan y realizan tareas con los datos que le enviamos como argumentos.
Una función puede devolver un valor o resultado de lo que haya hecho.Objetos
Como has visto una variable solo puede guardar un dato cada vez y se usa para ser procesada por funciones o por insturcciones del programa.
Los objetos son una extensión del concepto de variable.
Se trata de unas estructuras que permite englobar datos y funciones relacionadas entre sí de alguna manera.
- Un objeto puede almacenar valores (propiedades)
- Un objeto puede almacenar funciones (métodos)
- Un objeto puede contener otros objetos
En el primer ejemplo de esta página veías en el código window.alert() para mostrar un resultado del programa. Pues window es un objeto y alert() es un método de ese objeto.
En el ejemplo de las manzanas yo podría definir un objeto manzana que tuviera una propiedad para guardar el precio y una función o método para calcular el precio de comprar la cantidad que le diga (ticket(cantidad) ).
manzana.precio = 4;
manzana.ticket(10);
Me diría el precio de comprar 10 manzanas. Me daría como resultado 40.
Otro caso, salgamos de la tienda. Un objeto para geometría, objeto para representar la entidad rectángulo.
- Propiedades: largo y ancho del rectángulo
- Métodos: calcular área y calcular perímetro
Puedo definir cualquier rectángulo y obtener su área y su perímetro.
miRectangulo = new rectangulo(4,6);
area1 = miRectangulo.area();
otroRect = new rectangulo(10,20);
area2 = otroRect.area();
El resultado de miRectangulo.area() sería 24, mientras que el segundo sería 200. No me tengo que preocupar de la función para calcular el area, ya está contenida en el objeto rectangulo.
Por ahora no te preocupes por como se crean los objetos, se trata solo de que conozcas el concepto y utilidad de este elemento del programa.
JavaScript es un lenguaje que trabaja con objetos desde su nacimiento, pero a partir de la ECMAScript 5, también podemos definir nuestros objetos, y actualizaciones posteriores han convertido a JavasScript en un lenguaje orientado a objetos con algunas particularidades.
En resumen
Los objetos permiten englobar propiedades y funciones relacionados entre sí por la entidad que representan.
Son descripciones abstractas de información real.
Un objeto coche es un motor, una potencia y un combustible.
Mi coche es un Fiat, 100 CV y eléctrico. Esto es una instancia del objeto.