RSS

Sección 0 – Introducción a Javascript

21 Jul

Javascript es un lenguaje de programación que se utiliza para crear páginas web dinámicas.
Es un lenguaje de programación interpretado, es decir, no es necesario compilar el código fuente.

Sintaxis

  • No se tienen en cuenta los espacios en blanco y las nuevas líneas
  • Se distinguen las mayúsculas y minúsculas
  • No se define el tipo de las variables
  • No es necesario terminar cada sentencia con el carácter de punto y coma (se recomienda hacerlo)
  • Se pueden incluir comentarios:
 // una línea


 /* varias
    líneas
 */

Variables

Declarar una variable explícitamente:

 var resultado = 1 + 2 ;

ó

var num1 = 1;
var num2 = 2;
var resultado = num1 + num2;

Si no se utiliza la palabra var se crea una variable global.

Identificadores

Pueden incluir letras. números, y los símbolos $ y _ . Además el primer carácter no puede ser un número.

Tipos de variables

  • Variables numéricas:  var costo = 16;
  • Variables de texto:    var mensaje = “Hola”;
/* El contenido de texto1 tiene comillas simples, por lo que
        se encierra con comillas dobles */
    var texto1 = "Una frase con 'comillas simples' dentro";
 
/* El contenido de texto2 tiene comillas dobles, por lo que
        se encierra con comillas simples */
    var texto2 = 'Una frase con "comillas dobles" dentro';

Si se quiere incluir…         Se debe incluir…
Una nueva línea                     \n
Un tabulador                          \t
Una comilla simple                 \’
Una comilla doble                   \”
Una barra inclinada                 \\

Booleanos

Son variables de tipo lógico que pueden tomar los valores falso o verdadero, se declarar de la siguiente manera:

var encendido = true;
var apagado = false;

Arreglos

Se le llaman también vectores. Los arreglos pueden almacenar una colección de variables.

var numeros = [1,2,3,4,5,6,7,8,9,10];var primero = numeros[0];
var tercero = numeros[2];


Operadores


Asignación

La asignación siempre se realiza a una variable.

var num 1 = 2;
var texto = "Hola";


Incremento y decremento

Estos operadores son válidos para variables numéricas:

var num = 5;
++num; // num = 6
--num; // num = 5


Lógicos

  • Negación
var visible = true;
    !visible; // false
  • Conjunción
var si = true;
    var no = false;
    resultado = si && no; // resultado = false
  • Disyunción
var si = true;
    var no = false;
    resultado = si || no; // resultado = true

Numéricos

  • Suma +
  • Resta –
  • Multiplicación *
  • División /


Relacionales

  • Mayor que  >
  • Menor que <
  • Mayor o igual >=
  • Menor o igual <=
  • Igual         ==
  • Distinto      !=


Estructuras de control de Flujo

Las estructuras de control en Javascript se utilizan de la siguiente manera:

If

if(condición){
    ...
}


If-else

if(condicion) {
  ...
}
else {
  ...
}


For

for(inicializacion; condicion; actualizacion) {
  ...
}

For-in

for(indice in array) {
  ...
}

ejemplo:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
 
    for(i in dias) {
      alert(dias[i]);
    }


Funciones básicas

Transforma caracteres a mayúsculas

var mensaje1 = "Hola";
    var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

Transforma caracteres a minúsculas

var mensaje1 = "HolA";
    var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"

Obtiene carácter en la posición indicada:

  var mensaje = "Hola";
    var letra = mensaje.charAt(0); // letra = H
    letra = mensaje.charAt(2);     // letra = l

indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado dentro de la cadena de texto.

var mensaje = "Hola";
    var posicion = mensaje.indexOf('a'); // posicion = 3
    posicion = mensaje.indexOf('b');     // posicion = -1

Su función análoga es lastIndexOf():

var mensaje = "Hola";
    var posicion = mensaje.lastIndexOf('a'); // posicion = 3
    posicion = mensaje.lastIndexOf('b');     // posicion = -1

substring(inicio, final), extrae una porción de una cadena de texto.

var mensaje = "Hola Mundo";
    var porcion = mensaje.substring(2); // porcion = "la Mundo"
    porcion = mensaje.substring(5);     // porcion = "Mundo"
    porcion = mensaje.substring(7);     // porcion = "ndo"

split(separador), convierte una cadena de texto en un array de cadenas de texto. La función parte la cadena de texto determinando sus trozos a partir del carácter separador indicado:

var palabra = "Hola";
    var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]

length, calcula el número de elementos de un array

var vocales = ["a", "e", "i", "o", "u"];
    var numeroVocales = vocales.length; // numeroVocales = 5

concat(), se emplea para concatenar los elementos de varios arrays

var array1 = [1, 2, 3];
    array2 = array1.concat(4, 5, 6);   // array2 = [1, 2, 3, 4, 5, 6]
    array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]

join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado

var array = ["hola", "mundo"];
    var mensaje = array.join(""); // mensaje = "holamundo"
    mensaje = array.join(" ");    // mensaje = "hola mundo"

pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.

var array = [1, 2, 3];
    var ultimo = array.pop();
    // ahora array = [1, 2], ultimo = 3

push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];
    array.push(4);
    // ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.

  var array = [1, 2, 3];
    var primero = array.shift();
    // ahora array = [2, 3], primero = 1

unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];
    array.unshift(0);
    // ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:

var array = [1, 2, 3];
    array.reverse();
    // ahora array = [3, 2, 1]

Las siguientes instrucciones permiten controlar la ejecución de los ciclos for, deteniendo o saltándose algunas ejecuciones.

Uso de break

    var cadena = "Hola Uno Dos Tres Cuatro Cinco Seies Siete ...";
    var letras = cadena.split("");
    var resultado = "";
     
    for(i in letras) {
      if(letras[i] == 'a') {
        break;
      }
      else {
        resultado += letras[i];
      }
    }
    alert(resultado);


Uso de continue

    var cadena = "Hola Uno Dos Tres Cuatro Cinco Seis Siete ...";
    var letras = cadena.split("");
    var resultado = "";
     
    for(i in letras) {
      if(letras[i] == 'a') {
        continue;
      }
      else {
        resultado += letras[i];
      }
    }
    alert(resultado);
    // muestra "Hol Uno Dos Tres Cuatro Cinco Seis Siete ..."

While

   while(condicion) {
      ...
   }


do – While

    do {
      ...
    } while(condicion);


Switch

   switch(variable) {
      case valor_1:
        ...
        break;
      case valor_2:
        ...
        break;
      ...
      case valor_n:
        ...
        break;
      default:
        ...
        break;
    }


Funciones

Una función es un conjunto de instrucciones que se pueden utilizar para realizar una tarea concreta, de tal modo que
no es necesario escribir dos veces el mismo código dentro del mismo programa.

Una función se define de la siguiente manera:

    function nombre_funcion() {
      ...
    }

Ejemplo:

   function suma() {
      resultado = numero1 + numero2;
    }

y usando la función:

    var resultado;   
    var numero1 = 3;
    var numero2 = 5;
    resultado = suma_y_muestra();

Argumentos y valores de retorno:

function calcula(precio) {
      var impuestos = 1.16;
      var gastosEnvio = 10;
      var precioTotal = ( precio * impuestos ) + gastosEnvio;
    }

con valor de retorno:

function calcula(precio) {
      var impuestos = 1.16;
      var gastosEnvio = 10;
      var precioTotal = ( precio * impuestos ) + gastosEnvio;
      return precioTotal;
    }

Ámbito de las variables

En la variable local, no se muestra el mensaje porque la variable mensaje está definida dentro de la función.

    function creaMensaje() {
      var mensaje = “Mensaje de prueba”;
    }

creaMensaje();

    alert(mensaje);

Variable globales se pueden definir en cualquier parte del programa:

var mensaje = “Mensaje de prueba”;
function muestraMensaje() {
    alert(mensaje);
}

Si una variable es declarada dentro de una función sin la palabra var, entonces será una variable global.


Clases y objetos

Para definir clases en Javascript se hace por medio de funciones como se muestra en el siguiente ejemplo:

       function Persona(nombre) {
           this.nombre = nombre;
           this.peso = 75;
           this.altura = 165;
           this.sexo = 'Hombre';
           this.edad= 26;
       }

A esta función se le llama constructor de la clase. Hay dos formas para crear esta función constructora:

function Funcion( parametros )
    {
        // Codigo
    };

o también así:

var Funcion = function (parametros) {
    /* Codigo*/
}

Para definir un objeto de la clase, se deber hacer de la siguiente manera:

var hombre = new Persona('Isma');

Para cambiar las propiedades de un objeto:

    var mujer = new Persona('Ana');
    mujer.peso = 67;
    mujer.sexo = 'mujer';

Para crear una función miembro, es decir, una función que forma parte del objeto, se debe declarar e inicializar dentro de
la función constructor de la clase, de la siguiente manera:

function Persona(nombre) {
            this.nombre = nombre;
            this.peso = "75kg";
            this.altura = 165;
            this.dormir = dormir; // Nueva función miembro
 } function dormir() {
            alert(this.nombre + ' está durmiendo');
 }

Para utilizar la función se hace de la siguiente manera, por ejemplo:

     mujer.dormir();

Los objetos están compuestos de prototipos en Javascript, esto permite agregar métodos al prototipo del objeto directamente
de la siguiente manera:

//No tocamos la funcion constructora
Persona.prototype.comer = function() {
     alert(this.nombre + ' está comiendo');
}//[...]

mujer.comer();

Herencia

Podemos heredar de una clase de la siguiente manera:

   var Trabajador = function(){
        this.numero = 12;
        this.antiguedad = 5;   
   }   // heredamos de persona
   Trabajador.prototype = new Persona();

   
   var empleado1 = new Trabajador();
   alert(empleado1.peso);

Una variable de una clase puede hacerse privada si se define como local, en el siguiente ejemplo se puede ver esta característica:

var Gato = function (nombre) {
        //Creamos una variable privada sin asignarle "this" a esta
        this.nombre = nombre;
        // Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
        var frecuencia = "moderada";
        function irAlBano(frecuencia) {
            alert("El gato va al baño con frecuencia "+frecuencia);
        }
        irAlBano(frecuencia);
    }
    var Michin = new Gato("Michifu");

El código anterior crea la variable privada “frecuencia”, y la función privada “irAlBano”. Para comprobar que la variable sea privada, ejecutemos alert(Michin.frecuencia), lo que devuelve undefined

var Gato = function (nombre) {
        this.nombre = nombre;
        //Creamos una variable privada sin asignarle "this" a esta
        var frecuencia = "moderada";
        // Creamos un metodo privado
        function irAlBano(frecuencia) {
            alert("El gato va al baño con frecuencia "+frecuencia);
        }
        this.leerFrec = function() {
            irAlBano(frecuencia);
        }
    }
    var Michin = new Gato("Michifu");
    Michin.leerFrec();
    //Nos retorna "El gato va al baño con frecuencia moderada" ;)


Clases predeterminadas en JavaScript

  • Array
var famname = new Array(3);
       famname[0] = "Jani";
       famname[1] = "Tove";
       famname[2] = "Hege";
  
       famname.length;
       famname.join(".");
       famname.reverse();
       famname.push("Ola","Jon");
       famname.pop();
       famname.shift();

-length sirve para conocer la cantidad de elementos que contiene la matriz propiamente dicha.
-join permite unir todos los elementos separados por una cádena de caracteres que pasamos como parámetro, en este caso, “.”.
-reverse posiciona los elementos actuales de forma inversa.
-push nos permite añadir un nuevo elemento dentro de la matriz (en realidad, podemos añadir cualquier cantidad de ellos).
-pop extrae el último elemento de la matriz y lo devuelve.
-shift extrae y devuelve el primer elemento de la lista.

  • Date
var d = new Date();
       d.getDate();
       d.getMonth() + 1;
       d.getFullYear();
  • Math
Math.round(7.25);
       Math.random();
       no = Math.random()*10;
       Math.round(no);
       Math.max(2,4);
       Math.min(2,4);
  • String

Propiedades

  •     length
  •     prototype
  •     constructor

Métodos

anchor()     big()    blink()     bold()     charAt()     charCodeAt()     concat()     fixed()
fontcolor()     fontsize()     fromCharCode()     indexOf()     italics()     lastIndexOf()     link()
localeCompare()     match()     replace()     search()     slice()     small()     split()     strike()
sub()     substr()     substring()     sup()     toLocaleLowerCase()     toLocaleUpperCase()
toLowerCase()     toString()     toUpperCase()     valueOf()

 

😄

http://www.librosweb.es/javascript/
http://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/OOP
http://www.krispytech.com/blog/?p=304
http://www.cristalab.com/tutoriales/programacion-orientada-a-objetos-oop-con-javascript-c232l/

 
Deja un comentario

Publicado por en 21 julio, 2012 en Uncategorized

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: