Archive: diciembre 2013

Curso de Javascript: Clases Básicas

7 diciembre 2013
pepesan
No comments
Categories: Arrays JS, curso javascript, Date JS, String JS

String

     //Clase String
      
      var cadena = new String(“Ejemplo”);
      
      console.log(“longitud de la cadena:”+cadena.length);
      
      //concatenación 
      
      console.log(“primer literal “+cadena+ ” segundo literal”);
      
      var concatenado=cadena.concat(” concatenado”);
      console.log(concatenado);
      
      var entero=3;
      
      cadena=“Hola”+entero;
      console.log(cadena);
      
      console.log(cadena+concatenado);
      
      var mayusculas=cadena.toUpperCase();
      console.log(mayusculas);
      var minusculas=mayusculas.toLowerCase();
      console.log(minusculas);
      
      var caracter=minusculas.charAt(0);
      console.log(caracter);
      
      var posicion=minusculas.indexOf(“h”);
      console.log(posicion);
      //substring con un parámetro
      var email=“pepesan@consultec.es”;
      var subcadena=email.substring(8);
      console.log(subcadena);
      
      //substring con 2 parámetros
      subcadena=email.substring(0,7);
      console.log(subcadena);
      
      //separador
      var separados=email.split(“@”);
      console.log(separados[0]);
      console.log(separados[1]);
      

Arrays

     

      
      //Arrays
      var array=new Array(5);
      
      var i=0;
      for (i=0;i<5;i++){
      array[i]=i;
      console.log(array[i]);
      }
      console.log(array.length);
      //concatenación de arrays
      var array2=array.concat([5,6,7]);
      //recorrido de arrays
      for(item in array2){
      console.log(array2[item]);
      }
      //unión de elementos
      var union=array2.join(“,”);
      console.log(union);
      //eliminación del último elemento
      array2.pop();
      for(item in array2){
      console.log(array2[item]);
      }
      
      //inclusión al final de un elemento al final
      array2.push(7);
      for(item in array2){
      console.log(array2[item]);
      }
      //eliminación con posición
      delete array2[0];
      for(item in array2){
      console.log(array2[item]);
      }    
      
      //quita el primer elemento
      var array3=[1,2,3,4];
      for(item in array3){
      console.log(array3[item]);
      }
      var quitado=array3.shift();
      console.log(“quitado:”+quitado);
      for(item in array3){
      console.log(array3[item]);
      }
      array2.unshift(0);
      for(item in array3){
      console.log(array3[item]);
      }
      
  

Date

  

      //Objeto Date Fecha
      //fecha actual
      var fecha=new Date();
      //inicializaciones
      var fecha2=new Date(“10/02/2000”);
      var fecha3=new Date(1990, 11, 10, 20,00);
      
      console.log(fecha);
      console.log(fecha.getFullYear());
      //empiezan en 0
      console.log(fecha.getMonth()+1);
      console.log(fecha.getDay()+1);
      
      console.log(fecha.getHours());

      console.log(fecha.getMinutes());





Licencia Creative Commons

Curso de Javascript: Objetos window, document y forms

7 diciembre 2013
pepesan
No comments
Categories: curso javascript, document, forms js, window

Introducción

En Javascript existen una serie de objetos predefinidos que permiten acceder al DOM, dichos objetos sustentan la representación de la ventana, el documento y los formularios presentes en el mismo.  window, document y forms son los tres objetos principales de Javascript, ya que siempre podemos interactuar con ellos.

El objeto window

El objeto window, representa a la actual “ventana” lo que a día de hoy representa a una pestaña dentro del navegador. A través de window podemos saber sus dimensiones y podremos interactuar con ella. 

Propiedades principales

  • document: el objeto principal de window, representa el documento que se está presentando en pantalla. 
  • innerHeigth, innerWidth: representan el tamaño en alto y ancho, respectivamente de la ventana que dibuja la página. 
  • history: histórico de páginas visitadas.
  • location: dirección URL actual.
  • name: nombre de la ventana.

Métodos principales

  • alert(): presenta un popup con un mensaje
  • back(): vuelve atrás en el histórico 
  • close(): cierra la ventana
  • home(): vuelve a la página inicial del navegador
  • forward(): a la siguiente url del histórico
  • open(): abre una nueva ventana
  • resizeTo(): redimensiona la pantalla
  • setInterval(): define un script que se ejecute cada cierto tiempo
  • setTimeout(): define un script para que se ejecute una vez pasado cierto tiempo

El objeto document

Representa el documento (HTML) actual en memoria, permite buscar, modificar y eliminar elementos del documento. 

Propiedades principales

  • body: representa el elemento body, etiqueta html.
  • cookie: pares clave-valor de las cookies relacionadas con el documento
  • forms: array de formularios del documento
  • images: array de imágenes del documento
  • links: enlaces del documento
  • referer: url de la página de la que venimos
  • title: título del documento
  • URL: url completa del documento

Métodos principales

  • addEventListener(): permite cambiar el comportamiento de ante un evento
  • createAttribute(): crea un atributo de Elemento
  • createElement(): crea un nuevo elemento-etiqueta
  • createTextNode(): crea un nuevo nodo de texto
  • getElementById(): busca un elemento por su id
  • getElementsByTagName(): busca elementos por etiqueta
  • write(): escribe dentro de body
  • writeln(): escribe dentro de body una nueva línea

Eventos principales

  • onload: cuando se termina de leer la página
  • onunload: cuando salimos de una página

El Objeto forms

Forms representa a los formularios presentes dentro de la página. document.forms
Representa un array con todos los formularios. Para acceder a cada una de las propiedades del objeto representarán cada uno de los campos del formulario, según hayamos rellenado el atributo “name”.

Propiedades principales

  • length: número del elementos del formulario
  • action: url donde enviaremos el formulario
  • method: get o post según vayamos a enviar el formulario
  • name: nombre del formulario
  • encoding: codificación de envío del formulario
Métodos principales
  • submit(): envía el formulario
  • reset(): reinicia los valores de los campos del formulario
Eventos principales
  • onsubmit(): función que realizará al enviar el formulario
  • onreset(): función que limpiará los campos del formulario

Referencias

Curso de Javascript: Estructuras de Control

7 diciembre 2013
pepesan
No comments
Categories: bucles JS, curso js, if JS, try catch JS

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

6 diciembre 2013
pepesan
No comments
Categories: curso javascript, operadores Javascript, operadores js

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_1–numero_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

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