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
- 529