No conozco todo sobre Javascript ya que también soy nuevo en esto. Pero me parece bien crearla como base rápida...
Antes de empezar, serian indispensables:
Conocimientos básicos de programación estructurada
Un navegador web.
De forma opcional:
Fundamento del paradigma orientado a objetos.
Un IDE cualquiera .
Introducción
Para poder ejecutar nuestros programas escritos en Javascript, necesitamos un navegador web. Ya que el lenguaje en si, corre empotrado dentro de una pagina escrita en HTML, contenido en el interior de una etiqueta <script></script>; para poder verlo, aquí un hola mundo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<title>"Hola mundo"</title>
<head>
Este es un ejemplo<br>
</head>
<script><!--
document.write("Hola mundo<br>");
//-->
</script>
<body>
</body>
</html>
Si guardamos el archivo con extensión ".html" y lo abrimos en el navegador web, aparecerá:
Este es un ejemplo
Hola mundo
Por fines prácticos, el código de aquí en adelante se escribirá solo lo que iría contenido dentro de la etiqueta <script></script>.
Variables y tipos de datos
Los tipos de datos son iguales a los de C y Python. Para definir una variable, se utiliza la palabra reservada var seguida del nombre de la variable y sus tipos de datos se definen "sobre la marcha" al igual que en Python:
- Código: Seleccionar todo
//ejemplo:
var entera = 1;
var flotante = 1.5;
var caracter = 'h';
var cadena_caracteres = 'hola mundo';
document.write("entera es: "+entera+"<br>");
document.write("flotante es: "+flotante+"<br>");
document.write("carácter es: "+caracter+"<br>");
document.write("cadena de caracteres es: "+cadena_caracteres+"<br>");
Las operaciones en javascrip son igual que en C:
- Código: Seleccionar todo
//ejemplo:
var entera = 1
document.write("entera vale: "+entera+"<br>");
document.write("entera +1 vale: "+(entera + 1)+"<br>");
document.write("entera -1 vale: "+(entera-1)+"<br>");
document.write("entera *5 vale: "+(entera * 5)+"<br>");
document.write("entera /2 vale: "+(entera/2)+"<br>");
Esto muestra:
entera vale: 1
entera +1 vale: 2
entera -1 vale: 0
entera *5 vale: 5
entera /2 vale: 0.5
Y las operaciones de asignación son muy similares a las de Python:
- Código: Seleccionar todo
var entera = 0;
document.write("entera vale: "+entera+"<br>");
entera = 1; //entera ahora vale 1
document.write("entera vale: "+entera+"<br>");
entera+=1;
document.write("entera+=1 vale: "+entera+"<br>");
entera-=1;
document.write("entera-=1 vale: "+entera+"<br>");
entera*=5;
document.write("entera *=5 vale: "+entera+"<br>");
entera/=2;
document.write("entera /=2 vale: "+entera+"<br>");
Y el resultado del código anterior es:
entera vale: 0
entera vale: 1
entera+=1 vale: 2
entera-=1 vale: 1
entera *=5 vale: 5
entera /=2 vale: 2.5
Arrays en Javascript
Continuando. Los arreglos en Javascript son sumamente versátiles, y tienen la ventaja que, al igual que en Python, pueden contener datos de cualquier tipo:
- Código: Seleccionar todo
//este es un arreglo vacio
var arreglo_1 = new Array();
//este es un arreglo con 5 "espacios"
var arreglo_2 = new Array(5);
/*esta es una forma de crear
un array que tiene elementos de distinto tipo...*/
var arreglo_3 = new Array(2.5,4,'hola','mundo');
/*esta es la otra forma de crear
un array que tiene elementos de distinto tipo...*/
var arreglo_4 = [2.5,4,'hola','mundo'];
document.write("hola "+arreglo_1+"<br>");//arreglo_1 es un arreglo vacio
document.write("hola "+arreglo_2+"<br>");//arreglo_2, contiene solo "lugares vacios"
document.write("hola "+arreglo_3+"<br>");
document.write("hola "+arreglo_4+"<br>");
El resultado es:
hola
hola ,,,,
hola 2.5,4,hola,mundo
hola 2.5,4,hola,mundo
La forma de asignar valores a un arreglo y trabajar con los mismos, es igual que en C y Python:
- Código: Seleccionar todo
var arreglo_1 = new Array();
document.write("hola "+arreglo_1+"<br>");
arreglo_1[0] = 1; //este punto, asignamos al primer espacio el lugar numero 0
document.write("hola "+arreglo_1+"<br>");
arreglo_1[0]+=5; //sumamos e igualamos a 5 en el lugar 0
arreglo_1[1] = 4;//asignamos 4 al lugar 1
document.write("hola "+arreglo_1+"<br>");
/*hacemos que el siguiente valor sea una suma de los dos anteriores*/
arreglo_1[2]= arreglo_1[0]+arreglo_1[1];
document.write("hola "+arreglo_1+"<br>");
Podremos ver al ejecutarlo:
hola
hola 1
hola 6,4
hola 6,4,10
Y he aquí una de las cosas que mas me ha llamado la atención de Javascript. Con notable diferencia, podemos darle un valor a cualquier punto del arreglo...
- Código: Seleccionar todo
var arreglo_1 = new Array(); //un arreglo vacio
var arreglo_2 = new Array(10); //un arreglo de 10 lugares vacios
document.write("hola arreglo_1 "+arreglo_1+"<br>");
arreglo_1[50] = 1; //crea "lugares vacios" hasta llegar al punto
document.write("hola otra vez arreglo_1 "+arreglo_1+"<br>");
document.write("hola arreglo_2, que tiene 10 lugares "+arreglo_2+"<br>");
arreglo_2[50] = 1; //de nuevo,crea "lugares vacios" hasta llegar al punto
document.write("hola arreglo_2, que tiene 50 lugares "+arreglo_2+"<br>");
Al correrlo, este es el curioso resultado:
hola arreglo_1
hola otra vez arreglo_1 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1
hola arreglo_2, que tiene 10 lugares ,,,,,,,,,
hola arreglo_2, que tiene 50 lugares ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1
La gran ventaja y desventaja de esto, nunca nos dirá nada por "salirnos" del arreglo, pero... si de casualidad, intentamos tomar un valor de un punto fuera de nuestro arreglo, nos regresara como valor un NaN (Not a Number)
Arrays de caracteres (A.K.A. Cadenas)
La forma de trabajar con cadenas en Javascript es sustancialmente diferente a como estamos acostumbrados en Python o C; aun que la operación de concatenación de cadenas es igual que en Python.
Como las cadenas de caracteres en Javascript son objetos, se trabaja con ellas utilizando sus métodos.
Aquí el ejemplo de todo lo dicho:
- Código: Seleccionar todo
var cadena_1 = "hola";
var cadena_2 = " mundo";
//concatenación:
var cadena = cadena_1+cadena_2;
document.write("cadena dice: "+cadena+"<br>");
//longitud
//notese que la medida de la cadena no es un metodo, es una propiedad...
document.write("cadena mide: "+cadena.length+"<br><br>");
//--- charAt(indice) ---//
//nos permite saber el caracter en ese indice de la cadena.
document.write("en la cadena "+cadena+" el caracter con el indice 0 es: "+
cadena.charAt(0)+"<br><br>");
//--- indexOf(carácter,empezar_en) ---///
//nos permite saber el indice del primer caracter que coinsida en la cadena
//o podemos empesar a revisar desde un punto dado...
//si no existe, regresa como resultado -1
document.write("el indice de la o en la cadena es: "+cadena.indexOf('o')+"<br>");
document.write("el indice de la o en la cadena es desde el 2 es: "+cadena.indexOf('o',2)+"<br>");
document.write("el indice de la z en la cadena es: "+cadena.indexOf('z')+"<br>");
Y aquí el resultado de ese código.
cadena dice: hola mundo
cadena mide: 10
en la cadena hola mundo el caracter con el indice 0 es: h
el indice de la o en la cadena es: 1
el indice de la o en la cadena es desde el 2 es: 9
el indice de la z en la cadena es: -1
Como me da mucha flojera hacer ejemplos de todos los métodos, aquí están: http://www.desarrolloweb.com/articulos/726.php
Bucles For, While y Do-while
Estos bucles, tienen la misma estructura que en C. El bucle For continua respondiendo a la estructura:
for (entero_inicio ; condicion_termino ; entero_incremento ) { //código a ejecutar }
ejemplo:
- Código: Seleccionar todo
var i;
for(i=1; i<10; i++){
document.write("hola por "+i+" vez <br>");
}
Y el resultado:
hola por 1 vez
hola por 2 vez
hola por 3 vez
hola por 4 vez
hola por 5 vez
hola por 6 vez
hola por 7 vez
hola por 8 vez
hola por 9 vez
Lamentablemente, en java script, no marcara un error por la falta de alguna -o todas- las partes, lo cual puede causar dolores de cabeza....
- Código: Seleccionar todo
var i;
//este le falta el incremento, sera bucle infinito...
for(i=0; i<10; ){
document.write("hola por "+i+" vez <br>");
}
- Código: Seleccionar todo
var i;
//este le falta la condición de fin, bucle infinito...
for(i=0; ; i++ ){
document.write("hola por "+i+" vez <br>");
}
- Código: Seleccionar todo
var i = 0;
//este le falta el valor de inicio, no arrancara...
for( ; i<10 ; i++ ){
document.write("hola por "+i+" vez <br>");
}
Continuando.
Los bucles while y do while tienen un funcionamiento idéntico:
- Código: Seleccionar todo
var i=1;
while(i<5){
document.write("hola por "+i+" vez... Con while!! <br>");
i++;
}
do{
document.write("hola por "+i+" vez... Con do-while!! <br>");
i++;
}while(i<10);
al ejecutar nuestro script, en el navegador, la pagina aparece así:
hola por 1 vez... Con while!!
hola por 2 vez... Con while!!
hola por 3 vez... Con while!!
hola por 4 vez... Con while!!
hola por 5 vez... Con do-while!!
hola por 6 vez... Con do-while!!
hola por 7 vez... Con do-while!!
hola por 8 vez... Con do-while!!
hola por 9 vez... Con do-while!!
Al igual que en C y Python, existe la sentencia del lenguaje break para detener un bucle.
Condicionales y operadores lógicos
Los operadores lógicos en Jascript son exactamente los mimos que en C y Python, solo hay un par de diferencias...
"Mayor que" .................................. >
"Menor que" ................................. <
"Mayor o igual que" .................... >=
"Menor o igual que" .................... <=
"Iguales" ....................................... ==
"Idénticos" ................................... ===
"No iguales" ................................ !=
"No idénticos" .............................. !==
"Y (AND)"....................................... &&
"O (OR) " ....................................... ||
Algo que desconcierta es el termino "idéntico". La diferencia entre identico e igual es que igual, compara entre números y cadenas de texto, mientras que a identico le interesa si son el mismo tipo de dato.
Las condicionales en Javascript son iguales a las de Python, pero con la sintaxis de C, siguen la misma estructura básica:
if (condición 1){
codigo a ejecutar si la condición 1 es verdadera.
}
else if (condición 2) {
código a ejecutar si la condición 2 es verdadera.
}
else{
código a ejecutar si ninguna de las condiciones anteriores en verdadera.
}
Donde el "else fi" vendria a ser lo que en Python escribiamos con elif...
Una curiosidad, es que su funcionamiento, solo entra a la primera condición que sea verdadera. Un ejemplo esto:
- Código: Seleccionar todo
var i=0;
//obiamente las condiciónes i==0, y i<1, son verdaderas...
if (i===0){
document.write("i entro al 'if'<br>");
}
else if(i<1){
document.write("i entro al 'else if' <br>");
}
else{
document.write("para todo lo demas... else <br>");
}
El resultado de esto es simplemente:
i entro al 'if'
También, existe la variable de control exclusiva de C, switch y su uso es igual que en C. Solo la explico como "cultura general" ya que en teoría solo vasta con la sentencia if ; además de que su funcionamiento solo queda restringido a enteros....
...switch(n){
case 1:
ejecuta un primer bloque de código...
break;
case 2:
ejecuta un segundo bloque de código...
break;
default:
para todo lo demás, si ninguna de las condiciones anteriores fue valida...
}
un ejemplo:
- Código: Seleccionar todo
var n = 5;
switch(n){
case 1:
document.write("si n fuese 1 <br>");
break;
case 5: //obio, entrara aquí...
document.write("bien, es el numero 5 <br>");
break;
default:
document.write("entra aqui solo si no paso las demas... <br>");
}
Y su resultado:
bien, es el numero 5
Funciones
Finalmente, llegamos a esto. Para definir funciones, utilizamos la palabra reservada function , y su forma de uso es la siguiente:
function nombre_funcion(argumentos) { código a ejecutar }
Para llamar a la función solo tenemos que llamarla
nombre_funcion(argumentos);
Un ejemplo en código:
- Código: Seleccionar todo
function hola_mundo(){
document.write("hola mundo <br>");
}
hola_mundo();
Al ejecutarse:
hola mundo
El paso de argumentos es igual que en C:
- Código: Seleccionar todo
//un argumento
function cuadrado(x){
return x*x;
}
//varios argumentos
function suma(x, y){
return x+y;
}
//otro ejemplo
function Fibonacci(x){
if (x<2){
return x;
}
else{
return Fibonacci(x-1) + Fibonacci(x-2); // sí javascript aguanta recursividad...
}
};
document.write("el 10 al cuadrado es "+cuadrado(10)+" <br>");
document.write("el 10 + 5 es "+suma(10,5)+" <br>");
document.write("el decimo numero en la serie Fibonacci es "+Fibonacci(10)+" <br>");
Al ejecutarlo podemos ver:
el 10 al cuadrado es 100
el 10 + 5 es 15
el decimo numero en la serie Fibonacci es 55
También, al igual que en Python podemos definir valores predefinidos, o al menos emularlo...
- Código: Seleccionar todo
function suma(x, y){
//en caso de que no se de un valor a y...
if(!y){
var y = 15; //... tendrá un valor por defecto igual a 15
}
return x+y;
}
document.write("El valor de 10 + 5 es "+suma(10,5)+" <br>");
document.write("El valor por defecto con solo 10 es..."+suma(10)+"<br>");
Al correr, el resultado es simplemente:
El valor de 10 + 5 es 15
El valor por defecto con solo 10 es...25
Las funciones anónimas
Esta parte la pueden dejar pasar, y es mas como breviario cultura....
Javascript tiene también otra forma de definir funciones, conocida como "funciones anónimas", las cuales tienen la siguiente estructura:
var nombre_funcion = funcion(argumentos){código}
y para llamarla, igual:
nombre_funcion(argumentos)
Las funciones anónimas, como en el ejemplo anterior no estan ligadas a un nombre, razón por la cual, si no le asignamos uno, nunca se llamara. (Por esa razón, le asignamos un nombre con la primera linea var nombre_función = ... ).
- Código: Seleccionar todo
var hola_mundo = function(){
document.write("hola mundo <br>");
}
hola_mundo();
El resultado es simplemente este:
hola mundo
Otro ejemplo muy interesante de funciones anónimas es el siguiente. Una funcion la cual, se ejecuta a si misma. No hablo de recursividad, es mejor que lo vean....
- Código: Seleccionar todo
( function(nombre){
document.write(nombre+"<br>");
} ) ("Marco Polo");
Esto muestra:
Marco Polo
Las funciones anónimas son un terreno mucho mas extenso y no me meteré mas con ellas por que se sale del propósito general de este texto....
Orientado a Objetos: El concepto de Prototipo
Esta es la parte interesante del manual. Hasta ahora, solo hemos trabajado con lenguajes muy estrictos (Asumo, que han utilizado C o Python con anterioridad ). Así que el concepto de prototipo resulta muy extraño.
Según la buena Wikipedia:
Programación basada en prototipos es un estilo de programación orientada a objetos en el cual, las "clases" no están presentes, y la re-utilización de procesos (conocida como herencia en lenguajes basados en clases) se obtiene a través de la clonación de objetos ya existentes, que sirven de prototipos, extendiendo sus funcionalidades. Este modelo es conocido como orientado a prototipos, o programación basada en instancias.
Sí, estamos hablado de un lenguaje orientado a objetos sin clases.
En ese caso, como se supone que hacemos orientado a objetos en un lenguaje que no tiene clases....
Comencemos por el concepto básico de la programación orientada a Objetos.
Imaginemos que tenemos un automóvil . Este coche tiene una serie de pequeñas características, como puede ser el numero de ruedas, el color; estas caracteristicas son lo que llamamos en orientado a objetos "Atributos".
- Código: Seleccionar todo
function Automovil( ){
this.ruedas = 4;
this.color = "verde";
}
auto = new Automovil();
document.write("el automovil tiene "+auto.ruedas+" ruedas <br>");
Para los programadores en C, recordaran esto bajo el nombre de estructuras. La palabra reservada "this" es equivalente a la palabra reservada en Python "self". Su uso es para decirle a nuestro objeto cuando lo declaramos, que el atributo posterior "pertenece a si mismo".
La palabra reservada "new" es para crear un nuevo objeto tomando como base a Automovil, y este objeto sera independiente de otros objetos creados con "new".
De forma obvia, el resultado del código anterior es:
el automovil tiene 4 ruedas
También, con un automóvil podemos realizar ciertas cosas, por ejemplo, -y obviamente- conducir, llenarle el tanque de gasolina, o pintarlo. Estas cosas que puede realizar, reciben el nombre de Métodos. Los métodos son funciones asociadas a nuestro objeto que lo manipulan. Hay dos formas principales de agregar metodos a un objeto. Cuando lo definimos (la razón por la cual son importantes las funciones anónimas) o una vez creados sobre la marcha.
La primera forma para crear métodos
- Código: Seleccionar todo
function Automovil( ){
this.ruedas = 4;
this.color = "verde";
//aquí es donde creamos una función que altera el objeto
this.pintar_auto = function(color){
if (!color){
var color = "verde agua";
}
this.color = color;
}
}
auto = new Automovil();
auto_1 = new Automovil();
auto_1.pintar_auto("rojo");
document.write("el automovil es de color "+auto.color+" <br>");
document.write("el automovil 1 es de color "+auto_1.color+" <br>");
Esta primera forma tiene algo en que no pensamos cuando programamos POO en Python y que damos por asumido, ya que cada vez que creamos un nuevo objeto, estamos copiando las funciones que hay en cada uno, que les parecería si pudiesen compartir las funciones. Y aquí esta la segunda forma, donde podemos apreciar el poder de los prototipos:
- Código: Seleccionar todo
function Automovil( ){
this.ruedas = 4;
this.color = "verde";
}
//sí, es mucho mas largo...
Automovil.prototype.pintar_auto= function(color){
if (!color){
var color = "verde agua";
}
this.color = color;
}
auto = new Automovil();
auto_1 = new Automovil();
auto_1.pintar_auto("rojo");
document.write("el automovil es de color "+auto.color+" <br>");
document.write("el automovil 1 es de color "+auto_1.color+" <br>");
¿Qué es lo que sucede aquí?. la palabra reservada "prototype"; prototype es un objeto compartido por todos los objetos creados (en este caso, por todos los "new Automovil()" ). Forma parte de una cadena de búsqueda (que tiene un nombre especial, “prototype chain”); cada vez que se intenta acceder a un atributo o método que no está asignado al objeto por medio de "this", JavaScript comprobará en prototype para ver si existe ahí. Como resultado, cualquier cosa que asignemos a con prototype estará disponible en todos los nuevos objetos.
El resultado del código, en ambos casos, es el mismo:
el automovil es de color verde
el automovil 1 es de color rojo
Lo que sigue es corrección y ampliación (falta explicar como hacer herencia utilizando los prototipos). Dudas y sugerencias en los comentarios
