Javascript es un lenguaje de programacion web del lado del cliente, es decir se ejecuta en el navegador.
Hola mundo
Javascript se mezcla en el documento HTML dentro la etiqueta script.
console.log("Hola, Mundo!!");
La funcion console.log sirve como metodo de lectura, la forma de ver los resultados es en la consola del navegador, en Google Chrome la consola se abre con : Ctrl + Shift +J.
Variables
Las variables en javascript no se necesitan declara para ser asignadas, y no se les debe definir un tipo, es lo que se llama variables dinamicas.
a = 10; // entero t = "Hola, Mundo"; // cadena y = true; // booleano n = [1,2,3,4] // array
Son algunos ejemplos ejemplos de variables en javascript.
Para mostrar las variables en la consola simplemente:
console.log(t);
Salida de datos con alert
Alert, en minusculas, es una funcion que permite la salida de datos en forma de una ventana emergente.
alert("Hola, Mundo!!");
En ella se pueden expresar textos y numeros, tiene un uso similar a console.log.
Entrada de datos con prompt
Prompt, en minusculas es una funcion que sirve para dar entrada de datos.
x = prompt("Escribe algo:");
console.log("Escribiste: "+x);
El resultado de prompt es una cadena de texto.
Convertir texto a numeros
Un error que sucede comunmente es la interpretacion de numeros y texto,es decir “10” no es lo mismo que 10.
“10”, si, con comillas, es interpretado como texto y 10, sin comillas, es interpretado como numero.
Si queremos hacer “10”+3, el resultado sera “103”, porque se intepreta una concatenacion de cadenas.
Para poder manipular un numero que esta en forma de cadena se usan las funciones parseInt y parseFloat, funciones que como parametro toman un numero en cadenas y lo devuelven en entero o flotante.
Lo correcto es hacer: parseInt(“10”)+3.
Operaciones numericas
Las operaciones numericas son aquellas que se pueden hacer con los operadores numericos y me refiero a : +, – , * y /.Ejemplo:
a=10; b=20; c=a+b; console.log(c);
Operaciones de cadena
Las operaciones de cadena son aquellas que se pueden hacer con las cadenas de texto.
La operacion mas comun es la concatenacion, es decir juntar 2 o mas cadenas, para lo cual se utiliza el operador +.
a= "Hola"; b= "Mundo!!"; c= a+" "+b; console.log(c);
Condiciones con if-else if- else
Las condiciones nos permiten tomar decisiones, un ejemplo seria verificar una contrase~a o si dado un numero saber si es menor, mayor o igual que 5 y hacer que el script tome un rumbo diferente en cada caso.
Ejemplo 1
password = "123456";
password_correcta = "654321";
if(password==password_correcta){
console.log("Correcto");
}else{
console.log("Incorrecto");
}
En el ejemplo comparamos password con password_correcta, si password es igual a password_correcta entonces se muestra el mensaje “Correcto”, en el caso contrario, se muestra el mensaje “Incorrecto”.
Ejemplo 2
numero=3;
if(numero<5){
console.log("El numero es menor que 5");
}else if(numero>5){
console.log("El numero es mayor que 5");
}else{
console.log("El numero es 5");
}
La sentencia if nos permite hacer nuestra condicion incial, apartir de aqui podemos decidir un rumbo para nuestro script, si la sentencia if resulta cierta se ejecuta el codigo que esta entre llaves, si la condicion es false salta al else if, el cual si resulta verdadero se ejecutara el codigo entre las llaves consecuentes al else if, en caso contrario iremos al else, que se cuyo codigo entre llaves se ejecutara siempre y cuando las cundiciones anteriores resulten falsa.
Ciclo for
El ciclo for permite repetir un bloque de codigo utilizando un parametro de inicio, un parametro de comparacion y uno de modificacion(incremento, decremento).
Un ejemplo clasico:
for(i=0;i<10;i++){
console.log(i);
}
En el ejemplo i se utiliza como variable temporal, la cual solo tiene valor dentro del ciclo, el parametro de inicio i=0, parametro de comparacion i<10 y el de modificacion i++.
Lo cual significa:
- Empezando desde i=0, ejecutar el bloque, ir al paso 2
- Verificar que i sea menor que 10, si es cierto ejecuar el bloque, ir al paso 2, si no, terminar
- Incrementar i en 1
Esto creara como resultado la impresion de los numeros del 0 al 9, 0 por ser el parametro inicial y nueve al ser el ultimo numero i < 10, dado que 10 es igual a 10, se rompe el ciclo y ya no se muestra el numero 10.
Se puede mostrar el numero 10 cambiando i<10 por i<=10, utilizando el comprador “menor o igual a”.
Ciclo while
El ciclo while es muy similar al for, sin embargo while solo soporta la condicion, por lo que el parametro de inicio debe definirse fuera del while y el parametro de modificacion dentro, para evitar ciclos infinitos.
i=0;
while(i<10){
console.log(i);
i++;
}
El funcionamiento del while:
- Se incia el parametro i
- Se compara si i es menor que 10, si es menor se ejecuta el bloque de codigo, si no se finaliza o nunca se entra al bloque.
- Se ejecuta el bloque de codigo
- Una vez finalizado el bloque de codigo se vuelve al paso 2, por lo que es importante modificar la variable i.
Funciones
Vamos a cerrar con broche de oro.
Las funciones son trozos de codigos reutilizables, normalmente estos trozos de codigo se les pone un nombre y pueden recibir o no parametros, los parametros en funciones son datos de entrada.
function hola(){
console.log("Hola, Mundo!!")
}
La funcion hola puede contener todo el codigo que necesite dentro de las llaves.
Llamado de la funcion
La funcion se ejecuta llamandola por su nombre y los parentesis.
hola(); hola(); hola();
Funciones con parametros.
Los parametros de la funcion se definen dentro de los parentesis, separados por coma, y estos parametros representan datos de entrada.
function sumar(num1,num2){
console.log("Resultado: "+num1+num2);
}
La funcion sumar toma 2 parametros que se asumen sean numeros, como resultado envia la suma de los dos numeros por consola.
Devolver valores
Las funciones pueden devolver valores usando return.
Devolver valores significa que la funcion puede meter un valor de resultado en una variable fuera de la funcion.
function sumar(num1,num2,num3){
return num1+num2+num3;
}
Uso:
x = sumar(1,2,3); console.log(x); // 6
Conclusion
En este post hemos podido dar un recorrido por las bases de javascript.