Javascript

String en minusculas

	var str = "Hello World!";
	var res = str.toLowerCase();

Concatenar strings con el operador +=

 	var ourStr = "I come first. ";
	ourStr += "I come second.";

Añadir una string a otra

	var ourName = "Free Code Camp";
	var ourStr = "Hello, our name is " + ourName + ", how are you?";

Longitud de string

	"Alan Peter".length; // 10
	firstName.length

Asignar longitud de string a variable

	lastNameLength = lastName.length;

Seleccionar caractér de una string

	myStr[0];

Nota: No se puede cambiar un solo valor de una string.

Ultima letra de una string

	var lastLetterOfLastName = lastName[lastName.length-1];

Array

	var myArray = ["Gabriel", 26];

Multi-dimensional Array (array dentro de array)

	var ourArray = [["the universe", 42], ["everything", 101010]];

Ejemplo de sintaxis de arrays multi-dimensionales

	var arr = [
		[1,2,3],
	  [4,5,6],
	  [7,8,9],
		[[10,11,12], 13, 14]
	];
	arr[3]; // equals [[10,11,12], 13, 14]
	arr[3][0]; // equals [10,11,12]
	arr[3][0][1]; // equals 11

Añadir elementos al final de un array

	var ourArray = ["Stimpson", "J", "cat"];
	ourArray.push(["happy", "joy"]);

Añadir elementos al comienzo de un array

	var ourArray = ["Stimpson", "J", "cat"];
	ourArray.shift(); // ourArray now equals ["J", "cat"]
	ourArray.unshift("Happy"); 
	// ourArray now equals ["Happy", "J", "cat"]

Quitar el ultimo elemento de un array y añadirselo a una variable

	var ourArray = [1,2,3];
	var removedFromOurArray = ourArray.pop();

Quitar primer elemento de un array y añadirselo a una variable

	var ourArray = ["Stimpson", "J", ["cat"]];
	removedFromOurArray = ourArray.shift();

Condicional

	if (x > 1) {
		console.log("Número positivo");
	}
	else if (x < 0) {
		console.log("Número negativo");
	}
	else {
		console.log("El número es 0");
	}

Funciones

	function ourReusableFunction() {
	  console.log("Heyya, World");
	}
	ourReusableFunction();

Funcion con argumentos

	function ourFunctionWithArgs(a, b) {
	  console.log(a - b);
	}
	ourFunctionWithArgs(10, 5); // Outputs 5

Ejemplo : Crear funcion que añade un elemento al final del array y elimina el primero

	function nextInLine(arr, item) {
	  // Your code here
	  arr.push(item);
	  var eliminado = arr.shift();
	  return eliminado;  // Change this line
	}
	
	// Test Setup
	var testArr = [1,2,3,4,5];
	
	// Display Code
	console.log("Before: " + JSON.stringify(testArr));
	console.log(nextInLine(testArr, 6)); // Modify this line to test
	console.log("After: " + JSON.stringify(testArr));

If
	function test (myCondition) {
 	 if (myCondition) {
	     return "It was true";
	  }
	  return "It was false";
	}
	test(true);  // returns "It was true"
	test(false); // returns "It was false"

Operadores

Operador igualdad (==)
Operador igualdad estricta (===) -> compara tanto valor como tipo de dato
Diferente (!=)
Diferente estricto (!==)
Operador Y (&&) -> Verdadero solo cuando se cumplan ambas condiciones
Operador Ó (||) -> Verdadero con cumplirse una de las condiciones

Ejemplo de golf

	function golfScore(par, strokes) {
		// Only change code below this line
		if (strokes == 1){
			return "Hole-in-one!";
	  }
	  else if (strokes <= (par -2)){
	    return "Eagle";
	  }
	  else if (strokes == (par - 1)){
	    return "Birdie";
	  }
	  else if (strokes == par){
	    return "Par";
	  }
	  else if (strokes == (par + 1)){
	    return "Bogey";
	  }
	  else if (strokes == (par + 2)){
	    return "Double Bogey";
	  }
	  else if (strokes >= (par + 3)){
	    return "Go Home!";
	  }
	  return "Change Me";
	  // Only change code above this line
	}

	// Change these values to test
	golfScore(5, 4);

Programación Orientada a Objetos

Objeto

	var ourDog = {
  	"name": "Camper",
	  "legs": 4,
	  "tails": 1,
	  "friends": ["everything!"]
	};

Leer propiedades de objeto

	var myObj = {
	  prop1: "val1",
	  prop2: "val2"
	};
	var prop1val = myObj.prop1; // val1
	var prop2val = myObj.prop2; // val2

Si la propiedad tiene un espacio en el nombre

	var testObj = {
	  "an entree": "hamburger",
	  "my side": "veggies",
	  "the drink": "water"
	};
	var entreeValue = testObj["an entree"];
	var drinkValue = testObj["the drink"];

Usar variable para acceder a alguna propiedad

	var someProp = "propName";
	var myObj = {
	  propName: "Some Value"
	}
	myObj[someProp]; // "Some Value"

Cambiar alguna propiedad de un objeto

	var ourDog = {
	  "name": "Camper",
	  "legs": 4,
	  "tails": 1,
	  "friends": ["everything!"]
	};
	ourDog.name = "Happy Camper";

Añadir propiedad

	var ourDog = {
	  "name": "Camper",
	  "legs": 4,
	  "tails": 1,
	  "friends": ["everything!"]
	};
	ourDog.bark = "bow-wow";

Borrar propiedades

	var ourDog = {
	  "name": "Camper",
	  "legs": 4,
	  "tails": 1,
	  "friends": ["everything!"],
	  "bark": "bow-wow"
	};
	delete ourDog.bark;

Revisar si un objeto tiene cierta propiedad

	var myObj = {
	  gift: "pony",
	  pet: "kitten",
	  bed: "sleigh"
	};
	function checkObj(checkProp) {
	  // Your Code Here
	  if (myObj.hasOwnProperty(checkProp)){
	  return myObj[checkProp];
	  }
	  else{
	  return "Not Found";}
	}
	// Test your code by modifying these values
	checkObj("gift");

Objetos complejos (combinaciones de distintos tipos de datos como string, numeros, booleanos, etc)

	var myMusic = [
	  {
	    "artist": "Billy Joel",
	    "title": "Piano Man",
	    "release_year": 1973,
	    "formats": [ 
	      "CS", 
	      "8T", 
	      "LP" ],
	    "gold": true
	  },

Acceder a sub-propiedades anidadas

	var ourStorage = {
	  "desk": {
	    "drawer": "stapler"
	  },
	  "cabinet": {
	    "top drawer": { 
	      "folder1": "a file",
	      "folder2": "secrets"
	    },
	    "bottom drawer": "soda"
	  }
	};
	ourStorage.cabinet["top drawer"].folder2;  // "secrets"
	ourStorage.desk.drawer; // "stapler"

Acceder a arrays anidados

	var ourPets = [
	  {
	    animalType: "cat",
	    names: [
	      "Meowzer",
	      "Fluffy",
	      "Kit-Cat"
	    ]
	  },
	  {
	    animalType: "dog",
	    names: [
	      "Spot",
	      "Bowser",
	      "Frankie"
	    ]
	  }
	];
	ourPets[0].names[1]; // "Fluffy"
	ourPets[1].names[0]; // "Spot"

Ejemplo de un catalogo de discos

	// Setup
	var collection = {
	    "2548": {
	      "album": "Slippery When Wet",
	      "artist": "Bon Jovi",
	      "tracks": [ 
	        "Let It Rock", 
	        "You Give Love a Bad Name" 
	      ]
	    },
	    "2468": {
	      "album": "1999",
	      "artist": "Prince",
	      "tracks": [ 
	        "1999", 
	        "Little Red Corvette" 
	      ]
	    },
	    "1245": {
	      "artist": "Robert Palmer",
	      "tracks": [ ]
	    },
	    "5439": {
	      "album": "ABBA Gold"
	    }
	};
	// Keep a copy of the collection for tests
	var collectionCopy = JSON.parse(JSON.stringify(collection));
	// Only change code below this line
	function updateRecords(id, prop, value) {
	  if (prop === "tracks" && value !== "") {
	   if(collection[id][prop]) {
	    collection[id][prop].push(value);
	   }
	   else {
	    collection[id][prop]=[value];
	   }
	  } else if (value !== "") {
	    collection[id][prop] = value;
	  } else {
	    delete collection[id][prop];
	  }
	  return collection;
	}
	// Alter values below to test your code
	updateRecords(5439, "artist", "ABBA");

Ciclos (for)

	for ([initialization]; [condition]; [final-expression]){}

Ejemplo

	var ourArray = [];
	for (var i = 0; i < 5; i++) {
	  ourArray.push(i);
	}

Ej (Ciclo que muestre numeros del 1 al 5)

	var myArray = [];
	for (var j = 1; j < 6; j++){
	  myArray.push(j);
	}

Ej (impares)

	for (var j=1; j<10; j+=2){
	  myArray.push(j);
	}

Ej (reduce en vez de incrementar)

	var ourArray = [];
	for (var i = 10; i > 0; i -= 2) {
	  ourArray.push(i);
	}

Ej (sumar valores de un array a otra variable)

	var ourArr = [ 9, 10, 11, 12];
	var ourTotal = 0;
	for (var i = 0; i < ourArr.length; i++) {
	  ourTotal += ourArr[i];
	}

Ciclos "for" para arrays multidimensionales

	function multiplyAll(arr) {
	  var product = 1;
	  for (p = 0; p < arr.length; p++){
	    for (q = 0; q < arr[p].length; q++){
	      product *= arr[p][q];
	    }
	  }
	  return product;
	}

Ciclos (while)

	i=0;
	while (i<5){
	  myArray.push(i);
	  i++;
	}

Ej (funcion que revisa un objeto)

	function lookUpProfile(firstName, prop){
	  for (i=0; i<contacts.length;i++)
	  if (contacts[i].firstName===firstName){
	    if (contacts[i].hasOwnProperty(prop)){
	      return contacts[i][prop];
	    } else {
	      return "No such property";
	    }
	  }
	  return "No such contact"; 
	}

Número aleatorio

	Math.random(); //Aleatorio 0 <= x < 1

Número aleatorio entre 0 y 19

	var randomNumberBetween0and19 = Math.floor(Math.random() * 20);

Expresiones regulares (para encontrar palabras o patrones dentro de strings)

Por ejemplo Expresión regular: /the/gi

Por partes:

/ es el comienzo de la expresión regular.
"the" es el patron que queremos seleccionar.
/ es el final del patrón de la expresión regular.
g significa global, que causa que el patrón regrese todas las coincidencias, no solo la primera.
i significa que queremos ignorar si es mayúscula o minúscula.

	var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";
	var expression = /and/gi;
	// This code counts the matches of expression in testString
	var andCount = testString.match(expression).length;

Expresion regular para digitos Añadir un signo mas (+) luego del selector permite que esta expresión coincida con uno o mas dígitos.

	/\d/g

Expresion regular para espacios en blanco Los espacios en blanco son \r \n (nueva linea \t (tabulación) \f (alimentación de la forma)

	/\s+/g

Invertir expresion regular Al usar mayusculas invertimos la expresion regular, por ejemplo usando \S contara todos los caracteres que no sean espacios en blanco

	/\S/g

Programación funcional y orientada a objetos

Función constructora

	var Car = function() {
	  this.wheels = 4;
	  this.engines = 1;
	  this.seats = 5;
	};

Usar función constructora

	var myCar = new Car(); //Ahora myCar tiene todas las propiedades de Car(), importante el comando "new"

Función constructora con argumentos

	var Car = function(wheels, seats, engines) {
	  this.wheels = wheels;
	  this.seats = seats;
	  this.engines = engines;
	};	
	var myCar = new Car(4,4,1);}

Variables locales de un objeto (no globales)

	var Car = function() {
	  // Esto es una variable privada
	  var speed = 10;
	
	  // Estos son métodos públicos
	  this.accelerate = function(change) {
	    speed += change;
	  };
	
	  this.decelerate = function() {
	    speed -= 5;
	  };
	
	  this.getSpeed = function() {
	    return speed;
	  };
	};

Método map (itera sobre cada elemento de un array y devuelve un array)

	var oldArray = [1, 2, 3];
	var timesFour = oldArray.map(function(val){
	  return val * 4;
	});
	console.log(timesFour); // returns [4, 8, 12]
	console.log(oldArray);  // returns [1, 2, 3]

Método reduce (itera sobre cada elemento de un array y devuelve un único valor)

	var singleVal = array.reduce(function(previousVal, currentVal) {
  	return previousVal - currentVal;
	}, 0);

Método filter (itera sobre cada elemento de un array y solo deja los que cumplan cierta condicion)

	array = array.filter(function(val) {
	  return val !== 5;
	});

Método sort (ordena un array siguiendo ciertas condiciones)

	var array = [1, 12, 21, 2];
	array.sort(function(a, b) {
	  return a - b;
	});

Método reverse (devuelve el array al contrario)

	var myArray = [1, 2, 3];
	myArray.reverse();

Método concat (concatena un array al final del otro)

	newArray = oldArray.concat(otherArray);

Método split (convierte un string en un array)

	var string = "Split me into an array";
	var array = [];
	array = string.split(" ");

Método join (convierte los elementos de un array en un string unido por el argumento que ingresemos)

	var veggies = ["Celery", "Radish", "Carrot", "Potato"];
	var salad = veggies.join(" and ");
	console.log(salad); // "Celery and Radish and Carrot and Potato"

Método substr (devuelve una parte de un string)

	var str = 'abcdefghij';
	str.substr(1, 2));   // bc

Método slice (corta un array de un punto a otro y devuelve los elementos dentro del intervalo)

	str.slice(0,2);

Método splice (corta un array dentro de un intervalo y permite añadir nuevos elementos)

	var myFish = ["angel", "clown", "mandarin", "surgeon"];
	myFish.splice(2, 0, "drum"); 
	// myFish is ["angel", "clown", "drum", "mandarin", "surgeon"]

Nota: puedes usar typeof() para revisar la estructura de data o tipo, de una variable.

Método parseInt (Convierte un valor de cadena de texto en valor numérico)

	var myAge = "27";
	var age = parseInt(myAge); // age = 27

Método parseFloat (Convierte una cadena de texto con valor flotante en valor numérico con valor flotante)

	var myWeight = "50.5";
	var weight = parseFloat(myWeight); // weight = 50.5

Método prompt (Crea un cuadro de diálogo, solicitandole información al usuario)

	var usuario = prompt("Cual es tu edad?");

document.write (Se usa para añadir algún elemento a la página)

	document.write("Tu peso en marte es <strong>" + peso + " kilos </strong>");

Eventos

Escucha en caso de que ocurra un evento específico

var boton = getElementById("idBoton");
boton.addEventListener("click", inserte_aqui_accion_a_realizar);
	
});

gabolopez90/javascript.md