Curso de Javascript: Estructuras de Control

A la hora de controlar el flujo de nuestra aplicación deberemos conocer la sintaxis básica de las estructuras de control en JS.

Sentencias condicionales 

If, if-else, if-else-if

La sentencia condicional por excelencia el IF, aquí veremos una serie de ejemplos de su uso
  //sentencias condicionales
    var numero=4;
    //if simple
    if(numero>3){
    console.log(“es mayor que 3”);
    }
    
    //if -else
    if(numero>=3){
    console.log(“es mayor o igual que 3”);
    }else{
    console.log(“es menor que 3”);
    }
    
    //if else if
    if(numero==3){
    console.log(“es igual que 3”);
    }else if(numero>3){
    console.log(“es mayor que 3”);
    }
    
    var numero2=2;
    
    if(numero>3 && numero2<3){
    console.log(“cumple las dos condiciones”);
    }
    
    var booleana=false;
    if(!booleana){
    console.log(“debería entrar si booleana es false, porque al negarla es true”);
    }
    
    if(numero==3 || numero2==2){
    console.log(“entra si se cumple una de las dos condiciones”);
    }

Switch, condicional múltiple

Esta sentencia nos permitirá sobre una variables establecer una serie de posibles valores con los case, no olvides colocar el break; siempre antes del siguiente caso.
El caso especial default permite definir que pasa si no se da el caso de los case que hayamos definidos previamente. Si no coincide con ninguno de los casos se entrará al default:
    
    //sentencia switch
    var edad=20;
    switch(edad){
    case 10:
    console.log(“tiene 10 años”);
    break;
    case 18:
    console.log(“acaba de ser ayor de edad”);
    break;
    case 30:
    console.log(“es un adulto”);
    break;
    default:
    console.log(“tiene “+edad+” años”);
    break;
    }
    

Bucles

While

El bucle while o como me enseñaron en la facultad “el jhon wayne” es el que primero pregunta y luego dispara 🙂
    
    //bucle while
    var i=0;
    
    while(i<10){
    console.log(i);
    i++;
    }

For

El bucle for o “la ametralladora” tiene un cargador de X balas, o dará un número de vueltas mientras que se cumpla la condición. 
    
    //bucle for
    
    for(i=0;i<10;i++){
    console.log(i);
    }
    

Do-While

El bucle do-while o como me enseñaron en la facultad “Harry el sucio” es el que primero dispara y luego pregunta 🙂 Aunque yo últimamente lo llamo el “Vin Diesel” por XXX
    //bucle do-while
    i=0;
    do{
    console.log(i);
    i++;
    }while(i<10);
    

FOR-IN

Este bucle es lo más parecido a un foreach de PHP,  en la parte derecha de la condición ponemos el objeto que queremos recorrer y en la izquierda el nombre de la variable que representará el objeto porque iteremos cada propiedad del objeto. Si copiáis y pegais el código que hay a continuación y descomentáis la línea del consolé.log, veréis por consola todas la propiedades del objeto document. No os agobiéis 😉
    //bucle for in
    for( item in document){
    //descomenta la siguiente línea si quieres saber todas las propiedades de document
    //console.log(item);
    }
    

FOR-IN para arrays

El for in también puede utilizarse para recorrer arras, por lo que en este caso, ítem, valdrá en cada vuelta, 1, 2, 3 y 4 en la última vuelta.
    var array=[1,2,3,4];
    for( item in array){
    console.log(item);
    console.log(array[item]);
    }
    

Ruptura de bucles 

Como en otros lenguajes podemos usar el break y el continue para romper los bucles, por ejemplo:

    var i=0;
    
    while(i<10){
     console.log(i);
     if(i==2){
          break;
        }
        i++;
    }

Gestión de Excepciones 

Hay casos donde tenemos que controlar posibles excepciones que puedan llegar a saltar, como al abrir un fichero o llamar a una función que no existe, para ellos usaremos el try catch. El finaly lo utilizaremos para que pueda ejecutares en cualquier caso.

    //try-catch-finnaly
    
    try {
    funcion_que_no_existe();
} catch(ex) {
    console.log(“Error detectado: “ + ex.description);
}finally{
console.log(“hazlo de todas maneras”);
}

Licencia Creative Commons

Curso de Javascript: Operadores

A continuación veremos los distintos tipos de operadores que podemos usar en JS.

Operadores aritméticos

Los operadores aritméticos de JS son como en otros lenguajes nos que nos van a permitir realizar operaciones aritméticas con variables de tipo numérico. 
Aquí están los ejemplos de su uso básico de: suma , resta multiplicación y módulo, tanto en su forma normal como de manera abreviada.
//operaciones con variables
var numero_1=2;
var numero_2=3;
var res1=numero_1+numero_2;
var res2=numero_1numero_2;
var res3=numero_1*numero_2;
var res4=numero_1/numero_2;
var res5=numero_1%numero_2;
console.log(res1);
console.log(res2);
console.log(res3);
console.log(res4);
console.log(res5);
//operadores apreviados
var numero_7=5;
numero_7+=8;
console.log(numero_7);
numero_7-=4;
numero_7*=8;
numero_7/=2;
numero_7%=3;
console.log(numero_7);

Incrementos y decrementos

Existen de dos tipos los pre y los post, lo pre se realizará en incremento o el decremento antes de cualquier otro tipos e operación y los post se realizarán posteriormente a la operación. De esta manera funcionará muy similar a en C o C++.
//incrementos y decrementos
numero_7++;
++numero_7;
numero_7–;
numero_7;

Operadores relacionales

Este tipo de operadores podrán establecer comparaciones entre dos variables, así podremos saber si son mayores > , menores < , menos o igual <=, mayor o igual >=, iguales ==, o distintos != antro ellas. 
//operadores relacionales
var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2// resultado = false
resultado = numero1 < numero2// resultado = true
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false

Operadores Lógicos

Este tipo de operadores nos permitirán gestionar Operaciones lógicas, del álgebra de bool,  tales como la negación, AND y OR.

NOT

La negación de una variable booleana.
variable !variable
true false
false true

AND

Sólo se cumple si las dos variables son true
variable1 variable2 variable1 && variable2
true true true
true false false
false true false
false false false

OR

Se cumple si cualquiera de las dos variables de true
variable1 variable2 variable1 || variable2
true true true
true false false
false true true
false false false

Curso de Javascript: Comentarios y Variables

Comentarios

Como todo lenguaje de programación en JS existen los comentarios, es decir aquella manera de definir líneas o conjuntos de líneas que nos permitan evitar que el intérprete o compilador tenga en cuenta para su posterior ejecución. JS evidentemente no es una excepción.

Comentarios de una línea

Simplemente colocando dos barras seguidas conseguirmos evitar que se ejecute nada de lo que esté colocado desde ahí hasta el fin de línea.
//Comentario de una línea

Comentario de varias líneas, empezará por un /* y terminará con un */. Todo lo que esté entre estos dos conjuntos de caracteres será ignorado por en el programa.

/*
 * Comentario de varias líneas
 */

En JS son muy importantes los comentarios debido a la falta de definición de tipos de variables que veremos más adelante.

Variables

Una de las cuestiones principales de cualquier lenguaje de programación son las variables para ello será necesario saber como declararlas, inicializarlas y utilizarlas.
A continuación veremos varios tipos de declaraciones de variables JS. Pero antes debemos indicar que toda variable Js será un objeto y que no tendrán en su inicialización un tipo de datos fijo, como en otros lenguaje más estructurados, sino que el tipo de la variable cambiará dependiendo del valor que le asignemos, por lo que es un lenguaje muy flexible en el uso de variables.

Declaración

Para declarar una variable será suficiente con anteponer la palabra reservada var antes del nombre de la variable. En el caso de que queramos declarar una variable global, no antepondremos la aplanar reservada var.
                        vari;
var variable;
var variable1, variable2;

Para asignarle un valor podremos hacer colocando el operador de asignación = y luego el valor antes del ;
Dependiendo del valor que pongamos a la derecha así será el tipo de variable, veamos varios ejemplos de asignaciones de valor en la declaración de la variable:

                       var numero_1 = 2;
numero_1=3;
var numero_2 = 3;
var resultado = numero_1 + numero_2;

Para aprender cómo funcionan las variables utilizaremos la consola de JS del navegador, para sacar esta consola, en firefox o chrome, será necesario pulsar el botón derecho del ratón en cualquier punto de una página y seleccionar la opción inspeccionar elemento. En las pestañas que salgan a continuación seleccionaremos Console.

//esto permite sacar un mensaje por la consola JS en el navegador
console.log(resultado);


/*
* las variables pueden contener letras números y los caracteres $ y _
* las variables no pueden empezar por un número
*/

var uno;
//eso no sería válido
//var 1coche;

Los tipos de datos base de JS son: números, booleanos, cadenas de caracteres, nulos y valores sin definir (undefined). En el siguiente ejemplo veremos sus inicializaciones:

/*
* Tipos de datos primitivos en JS
*/
var numero = 1;
var booleano = true;
booleano=false;
var cadena = “Caracteres alfanumericos 234”;
var nulo = null;
var sindefinir;
//tipo undefined

Aunque en JS casi no se tienen en cuenta los tipos hay veces que nos puede interesar cambiar el tipo de una variable, para ello será necesario realizar un casting.
/*
* Casting de variables
*/

var entero = 7;

Paso a cadena desde número

var enterocadena = parseInt(entero);
console.log(enterocadena);

Paso de Float a cadena

var flotante = 2.8;
var floatcadena = parseFloat(flotante);
console.log(floatcadena);

Paso de booleano a Cadena

var booleano_2 = false;
console.log(booleano_2.toString());

Las cadenas de caracteres es uno de los tipos más usados en JS a continuación veremos cómo se utilizan.

//Cadenas de caracteres
var cadenai = new String(“Hola”);
var cadena2 = “Cadena”;

//imprime la longitud de la cadena
console.log(cadena2.length);

//concatenación
var concatenada = “hola” + ” mundo!”;
console.log(concatenada);

concatenada = “hola ” + cadena;
console.log(concatenada);

Los arrays son otro de los principales tipos de datos, a continuación veremos su utilización básica

//definición de un array
var array=[1,2,3,4];
var arraycadenas=[“una”,”dos”,”tres”];
//capturar el valor de la primera posición del array
console.log(array[0]);
                        //Segunda posición
console.log(arraycadenas[1]);
                        //longitud del array
console.log(array.length);

Nos puede interesar en un determinado momento saber el tipo de una variable o bien saber si una variable es de un determinado tipo, para ello utilizaremos respectivamente typeof y instanceof.
Aquí podremos ver el uso principal de estas dos palabras reservadas.

var entero=7;
//typeof devuelve el tipo de la variable que usamos
console.log( typeof entero);
//instanceof devuelve un booleano con valor true si acertamos con el tipo del dato
var cadena_9=new String(“cadenad de caracteres”);
console.log(cadena_9 instanceof String);

Palabras Reservadas

Como en todos los lenguajes contamos con un conjunto de palabras reservadas que no podremos utilizar. 
  •     abstract
  •     boolean break byte
  •     case catch char class const continue
  •     debugger default delete do double
  •     else enum export extends
  •     false final finally float for function
  •     goto
  •     if implements import in instanceof int interface
  •     long
  •     native new null
  •     package private protected public
  •     return
  •     short static super switch synchronized
  •     this throw throws transient true try typeof
  •     var volatile void
  •     while with

Curso de Javascript: Introducción a Javascript

Introducción

Javascript es un lenguaje de Scripting, es decir es un lenguaje interpretado, no se compila por lo tanto, se interpreta línea a línea.  El intérprete principal suele estar colocado en el navegador web por lo que se ejecuta en el cliente web.

El navegador web es el responsable de la ejecución y el análisis de la sintaxis del lenguaje por lo que siempre que vayamos a ejecutar el programa que hayamos hecho en Javascript (JS a partir de ahora)  deberemos probarlo con el navegador.

Es un lenguaje puramente orientado a objetos, por lo que prácticamente todas las variables serán objetos y salvo las sentencias de control, casi siempre trabajaremos con los objetos como variables en las sentencias.

Otras caraterísticas del lenguaje es su orientación a Eventos, dichos eventos tienen una serie de comportamientos por defecto en el navegador. Sobre todo reconoceremos aquellas acciones por defecto que puede realizar el usuario, tales como, pulsar un enlace, que nos llevará a otra página web, o bien enviar un formulario con un botón dentro del mismo. Desde JS podremos modificar e incluso anular estos comportamientos por defecto en el navegador.

Desde JS podemos también modificar la página en la que nos encontramos, esto formalmente se denomina, Modificar el DOM, es decir, desde JS podemos cambiar el contenido y el aspecto de la página dinámicamente, por este hecho se puede considerar a JS un lenguaje que permite la creación de interfaces dinámicos para los usuarios o GUI’s en el navegador.

Finalmente podemos utilizar también JS como un cliente web, deseo cual podemos consultar servicios web en búsqueda de información, tales como RSS/ATOM, en búsqueda de noticias.

¿Cómo introducir Código Javascript en HTML?

Lo primero que debemos saber es cómo incluir el código JS en el html. Para ello utilizaremos la etiqueta <script>. Esta etiqueta contendrá el código JS.

Pongamos un ejemplo sobre HTML4 y XHTML1:

<script type="text/javascript">
//Aqui va el código JS
</script>

De esta manera podemos ver cómo incluir código en cualquier parte del HTML.
Aunque también podemos incluir un fichero externo mediante una URL, por ejemplo:

<script type="text/javascript" src="fichero.js"></script>

De esta manera incluimos todo el contenido del fichero.js como si lo hubiéramos escrito dentro del HTML.

En este caso el fichero.js estará localizado en el mismo directorio que el fichero html. Lo que se denomina una URL relativa al HTML, si la ruta cambiara, cambiaría también la URL. También podríamos llamar a ficheros JS localizados en otros servidores incluyendo en el valor asignado al atributo src una ruta URL absoluta, indicando el http://servidor/ruta/nombre_de_fichero.js

En el fichero.js (o cómo queramos llamarlo) simplemente incluirá el código JS, sin necesidad de incluir la etiqueta <script> por lo que seremos libres de empezar a declarar variables y sentencias a placer.

Hola Mundo

Para realizar nuestro primer Hola Mundo en JS pondríamos en dentro del código HTML lo siguiente:
<script type=”text/javascript”>
//Hola mundo
alert(“Hola Mundo!”);
</script>
Esto debería sacar un cuadro de diálogo por pantalla con el mensaje que hemos puesto entre comillas y un botón de aceptar. 

Ejercicios propuestos

  • Ejercicio 1: Crea un HTML que incluya el código del Hola mundo en JS, ejecútalo y comprueba que sale el mensaje por pantalla. 

Referencias:

Licencia Creative Commons

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies