Bienvenidos

a JS!

@bjrmatos

borismcr9

Introducción al lenguaje JavaScript

Un poco de historia

1995: Brendan Eich crea JavaScript

Brendan Eich creó en 10 días la primera versión de un lenguaje de programación orientado a ser ejecutado en navegadores.

Este lenguaje empezó con el nombre "Mocha", fue renombrado a "LiveScript" y finalmente hoy en día es llamado "JavaScript".

Brendan Eich

1996: Aparicion de JavaScript en el browser, Creacion de ECMAScript

Los navegadores web empiezan a implementar JavaScript

Se crea una especificación de lenguaje de programación orientada a estandarizar la implementación de JavaScript en los navegadores

NetScape, Internet Explorer 3

1999: ECMAScript 3

2001: JSON

Douglas Crockford crea JSON (JavaScript Object Notation) con el proposito de ser un formato ligero de intercambio de datos, un reemplazo a XML

Douglas Crockford

2008: Google V8 Javascript Engine

Motor de JavaScript super rápido escrito en C++, su mision es convertir codigo JavaScript en codigo maquina para su ejecucion.

 

Forma parte de Google Chrome

2009: Node.js

Ryan Dahl crea Node.js, un entorno de programación JavaScript del lado del servidor, con una arquitectura orientada a eventos y manejo de I/O asincrono.

Ryan Dahl

JS Hoy?

Browser

Aplicaciones de escritorio

Server

BD

Mobile

Hardware/Robotics

Multiplataforma!!

Conceptos basicos

Variables

Definicion

var miVariable;
var miSegundaVariable;

Nomenclatura

var no spaces; // sin espacios en el nombres
var 3miVariables; // no puede empezar con digitos

// guiones abajo estan bien, pero mayormente irritantes
var nombre_largo;

var dolar$; // simbolo del dolar es valido
var $dolar;
var $_$; // un poco tonto, pero tambien valido

// esta es la convencion, empezar con minuscula,
// las siguientes palabras en mayuscula (camel case)
var buenNombre;

o

var miVariable,
    miSegundaVariable;

Variables

Asignación/Manipulacion

var numero = 2, // declaracion y asignacion a la vez
    incremento = 5,
    resultado; 

numero = 6; // asignacion

numero = numero + incremento;

resultado = numero + 4; // manipulacion/uso de variable
                        // resultado -> 15

Variables

Tipos/Valores permitidos

var miVariable; // undefined, valor que JavaScript 
                // le da por defecto a una variable

var miString = 'hola'; // strings - cadenas

var miEntero = 10; // ambos son numbers
var miDecimal = 25.32; // tanto enteros como números con decimales

var miBoolean = true; // boolean true/false

var miArray = [1, 2, 3]; // arreglo de numeros
var miArrayMix = [1, 'hola', false]; // los arreglos pueden contener valores mixtos

// variable de tipo objeto
var persona = {
  nombre: 'Julian',
  edad: 15,
  soltero: true
};

// miFecha es una variables de tipo objeto que hereda del objeto Date
var miFecha = new Date(2014, 0, 20); // el mes es basado en 0,
                                     // por lo cual esta fecha es 20/01/2014

Variables = Dinámicas y de tipado débil

var miVariable;

// son dinamicas, por que no requieren
// que se les declare un tipo de dato.
// su tipo de dato será lo que se asigne a ellas
miVariable = 4;

// son de tipado debil, por que a una variable
// se le puede asignar valores de cualquier tipo
// sin lanzar un error
miVariable = true;
miVariable = 15;
miVariable = [3];
miVariable = 'acepto cualquier tipo';

Strings

var cadena;

// Para representar una cadenas pueden usarse comillas simple '' o doble ""
cadena = 'comilla simple';
cadena = "o comilla doble";
cadena.length; // la propiedad length devuelve el total de caracteres
               // cadena.length -> 15

// concatenacion de cadenas
cadena = 'hola esto' + ' es un texto ' + 'concatenado';

// cuando un valor es concatenado con una cadena
// el valor es primero convertido en cadena y concatenado despues
cadena = 'Y el resultado es: ' + 100; // cadena -> 'Y el resultado es: 100'

// algunos caracteres necesitan representarse con un backslash '\'
// por delante

cadena = 'Caracter escapado: \\'; // \\ -> \
cadena = 'Este es un texto\tlargo\ny concantenado'; // \t -> tabulacion
                                                   // \n -> salto de linea

/*
  cadena -> "Este es un texto   largo
            y concantenado"
 */

Strings

// los indices en las cadenas son basados en 0
var cadena = 'Ejemplo de texto';

// para encontrar el indice de la letra 'j'
cadena.indexOf('j'); // -> 1

// para saber que letra se encuentra en un indice
cadena.charAt(1); // -> 'j'
cadena[1]; // -> 'j'

// conversion a minusculas
cadena.toLowerCase(); // -> 'ejemplo de texto'

// conversion a mayusculas
cadena.toUpperCase(); // -> 'EJEMPLO DE TEXTO'

Arrays

var conjunto = [2, 4, 5],
    conjunto2 = [[1, 2, 3], [4, 5, 6]]; // arrays pueden contener otros arrays

conjunto[1]; // -> 4
conjunto[20] // undefined

conjunto.push(7); // agrega un valor al arreglo

conjunto.pop(); // remueve el ultimo elemento

conjunto.shift(); // remueve el primer elemento del array

Objects

var objeto = {
  nombre: 'Pablo',
  apellidos: 'Ramirez',
  edad: 30
};

objeto.nombre; // -> 'Pablo'
objeto['nombre']; // también se puede acceder a una propiedad de esta forma
objeto.desconocido; // cuando se accede a una propiedad no definida, se devuelve undefined

// definiendo una nueva propiedad
objeto.ocupacion = 'dentista';
objeto['ocupacion']; // tambien se puede definir de esta forma

// la ventaja de usar la notación objeto['propiedad']
// es que puedes definir propiedades con espacios
// o nombres reservados
objeto['propiedad con espacios'] = 'texto';

// la desventaja es que solo puedes acceder a ellas
// de la misma forma
objeto['propiedad con espacios']; // -> 'texto'

Functions

/*
  Las funciones en JS, son objetos de primera clase, esto quiere decir que las 
  funciones de JS son solo un tipo especial de objeto, que puede hacer todas las cosas
  que un objeto puede hacer.

  Tambien quiere decir que el lenguaje soporta la creacion de nuevas funciones 
  en tiempo de ejecucion, guardarlas en estructuras de datos, pasarlas como argumentos
  de otras funciones, y retornarlas como resultado de otras funciones
 */

// las funciones pueden retornar o no un valor

// no retorna nada
function suma(x, y) {
  console.log(x + y);
}

// retorna el resultado de x + y
function suma(x, y) {
  return x + y;
}

suma(2, 3); // llamada a una funcion -> 5

// las funciones, como cualquier objeto
// pueden almacenar propiedades
suma.propiedad = 2;

Operadores

Aritmeticos

/*
  Operadores basicos
 */
var numero = 10;

6 + 4 // suma

5 - 3 // resta

3 * 12 // multiplicacion

12 / 4 // division

43 % 10 // modulo, devuelve el resto de la division

numero = numero + 10; // -> 20
numero += 10; // esta es lo mismo que la expresion de arriba
numero++; // incrementa su valor en 1, es igual a numero = numero +1;

// asegurar el orden de los Operadores
5 + 7 * 3 // primero multiplicara 7 por 3 y luego sumara 5
(5 + 7) * 3 // sumara 7 mas 5 y luego multiplicara por 3

Comparadores

/*
  Comparadores basicos
 */

6 > 4 // mayor que
6 >= 3 // mayor igual que

10 < 7 // menor que
10 <= 5 // menor igual que

3 == 3 // igualdad (comparacion de valor)
3 === 3 // igualdad (comparacion de valor y tipo) *RECOMENDADO

5 != 7 // desigualdad (comparacion de valor)
5 !==7 // desigualdad (comparacion de valor y tipo) *RECOMENDADO

Condicionales

/*
  IF
 */
var numero = 10;

if (numero > 2) {
  // hacer algo
} else {
  // hacer algo
}

if (numero > 15) {
  // hacer algo
} else if (numero === 10) {
  // hacer algo
} else if (numero < 0) {
  // hacer algo
}
/*
  SWITCH: NO ES MUY USADO EN JS
 */
var numero = 10;

switch (numero) {
  case 1:
    // hacer algo
    break;
  case 2:
    // hacer algo
    break;
  default:
    // esto se ejecutara en caso de 
    // no cumplir ninguna condición
}

// el switch no es muy usado en JS
switch (numero) {
  case 1:
  case 2:
  case 3:
    // esto se ejecutara en caso 
    // de ser 1, 2 o 3
    break;
  default:
    // codigo aqui
}

Condicionales

/*
  Operadores de condiciones complejas

  && -> Operador 'And' retorna true si ambos valores son true
  || -> Operador 'Or' retorna true si alguno de los valores es true
 */

true && false // -> false
true && true // -> true
false || true // -> true
false || false // -> false
( 11 >= 11 ) && ( -7 < 6 ) // -> true && true -> true
( 2 >= 0 ) && ( 9 < 4 ) // -> true && false -> false
( 5 < 7 ) || ( 8 > 10 ) // -> true || false -> true
( 3 > 8 ) || ( 7 < 3 ) // -> false || false -> false

if (( 2 >= 0 ) && ( 9 < 4 )) {
  // codigo aqui
} else {
  // codigo aqui
}

Loops

/*
  FOR
 */

var i;

for (i = 0; i <= 10; i++) {
  // console.log es una funcion 
  // para imprimir valores en consola
  console.log('El valor de i es: ' + i);
}
/*
  WHILE
 */

var number = 1;

while (number <= 5) {
  console.log(number);
  number++;
}
/*
  DO - WHILE
 */

var i = 0;

do {
  console.log('El valor de i es: ' + i);
  i++;
} while (i <= 10);

typeof

/*
  typeof, devuelve el tipo de una variable
  como cadena
 */

typeof true; // -> 'boolean'

typeof 'soy una string'; // -> 'string'

typeof 42; // -> 'number'

typeof {}; // -> 'object'

typeof []; // -> 'object'

typeof undefined; // -> 'undefined'

typeof null; // -> 'object'

Bienvenidos a JavaScript!

By Boris Matos Morillo

Bienvenidos a JavaScript!

Introducción al lenguaje de programacion JavaScript

  • 523