JavaScript - Metodos Array

JavaScript Array concat() Method

Uniendo dos arrays:
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);  //["Cecilie","Lone","Emil","Tobias","Linus"]

Syntax
array1.concat(array2, array3,..., arrayX)

Uniendo tres arrays:
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);  //["Cecilie","Lone","Emil","Tobias","Linus","Robin"]

JavaScript Array indexOf() Method

Busca el elemento Apple en el array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");  //Resultado 2

Syntax
array.indexOf(item,start)

Busca el item "Apple"en el array, empezando desde la posición 4:
var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.indexOf("Apple", 4);  //Resultado 6

JavaScript Array join() Method

Une los elementos de un array dentro de un string:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();  //"Banana,Orange,Apple,Mango"

Syntax
array.join(separator)

Usando diferentes separadores:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");  //"Banana and Orange and Apple and Mango"

JavaScript Array pop() Method

Borra el ultimo elemento de un array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();  //["Banana","Orange","Apple"]

Syntax
array.pop()

JavaScript Array push() Method

Agrega un nuevo item a un array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  //["Banana","Orange","Apple","Mango","Kiwi"]

Syntax
array.push(item1, item2, ..., itemX)

Agrega mas de un elemento:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon", "Pineapple");  //["Banana","Orange","Apple","Mango","Kiwi","Lemon","Pineapple"]


JavaScript Array reverse() Method

Invierte el orden del array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();  //["Mango","Apple","Orange","Banana"]

Syntax
array.reverse()

JavaScript Array shift() Method

Remove the first item of an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();  //["Orange","Apple","Mango"]

Syntax

array.shift()

JavaScript Array unshift() Method

Agrega nuevos elementos al inicio del array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");  //["Lemon","Pineapple","Banana","Orange","Apple","Mango"]

Syntax
array.unshift(item1,item2, ..., itemX)

JavaScript Array slice() Method

Selecciona elementos de un array:
var fruits = ["Banana", "Orange", "Lemon","Apple", "Mango"];
var citrus = fruits.slice(1, 3);  //["Orange","Lemon"]

Syntax
array.slice(start,end)

JavaScript Array sort() Method

Ordena un array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();  //["Apple","Banana","Mango","Orange"]

Syntax
array.sort(compareFunction)

Valores del parametro        
compareFunction: Es una función opcional que define un orden de clasificación alternativo. La función debe devolver un valor negativo, cero o positivo, dependiendo de los argumentos, como:
           - function(a, b){return a-b}
Cuando el método sort () compara dos valores, envía los valores a la función de comparación, y ordena los valores de acuerdo al valor (cero, negativo, positivo) devuelto.

Ordenamos los números de un array de forma ascendente:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});  //["1","5","10","25","40","100"]

JavaScript Array splice() Method

Agrega elementos en el array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");  //["Banana","Orange","Lemon","Kiwi","Apple","Mango"]

Syntax
array.splice(index,howmany,item1,.....,itemX)

En la posicion 2 agregamos un nuevo elemento y removemos 1 elemento:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");  //["Banana","Orange","Lemon","Kiwi","Mango"]

En la posicion 2, removemos 2 elementos:
ar fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2);  //["Banana","Orange"]

JavaScript Array toString() Method

Convierte un array en una string:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var  x = fruits.toString();  //"Banana,Orange,Apple,Mango"

Syntax

array.toString()

JavaScript - Metodos String

JavaScript String charAt() Method

Retorna el primer caracter de una string:
var str = "HELLO WORLD";
var res = str.charAt(0);  // Resultado es H

JavaScript String charCodeAt() Method

Retorna el Unicode del primer carácter en el string(el valor Unicode para "H"):
var str = "HELLO WORLD";
var n = str.charCodeAt(0);  //Resultado es 72

JavaScript String concat() Method

Une X strings:
var str1 = "Hello ";
var str2 = "world!";
var str3 = " Have a nice day!";
var res = str1.concat(str2,str3);  //Resultado Hello world! Have a nice day!

JavaScript String indexOf() Method

Busca el string "welcome":
var str = "Hello world, welcome to the universe.";
var n = str.indexOf("welcome");  //Resultado 13

Syntax
string.indexOf(searchvalue,start)

Encuentra la primera aparición de la letra "e" en un string, empezando a buscar en la posición 5:
var str = "Hello world, welcome to the universe.";
var n = str.indexOf("e", 5);  //Resultado 14

JavaScript String lastIndexOf() Method

Busca la ultima aparicion del string "planet":
var str = "Hello planet earth, you are a great planet.";
var n = str.lastIndexOf("planet");  // Resultado 36

Syntax
string.lastIndexOf(searchvalue,start)

Busca la ultima aparicion del string "planet", empezando desde la posicion 20:
var str = "Hello planet earth, you are a great planet.";
var n = str.lastIndexOf("planet", 20);  //Resultado 6

JavaScript String localeCompare() Method

Compara dos cadenas en la localización actual:
var str1 = "ab";
var str2 = "cd";
var n = str1.localeCompare(str2);  //Resultado -1

Syntax
string.localeCompare(compareString)

Detalles
Valor de retorno:
Un número, que indica si la cadena de referencia viene antes, después o es el mismo que el CompareString en orden de clasificación. Devuelve uno de tres valores:
        -1 Si la cadena de referencia se ordena antes de la CompareString
        0 si las dos cadenas son iguales
        1 si la cadena de referencia se ordena después de la CompareString

Compara dos cadenas en la localización actual:
var str1 = "cd";
var str2 = "ab";
var n = str1.localeCompare(str2);  //Resultado 1 str1 is sorted after str2

Compara dos cadenas iguales en la localización actual:
var str1 = "ab";
var str2 = "ab";
var n = str1.localeCompare(str2);  //Resultado 0 the two strings are equal

JavaScript String match() Method

Busca un string "ain":
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/g);  //Resultado ain, ain, ain

Syntax
string.match(regexp)

Realiza una busqueda global intensiva de "ain":
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/gi);  //Resultado ain,AIN,ain,ain

JavaScript String replace() Method

Retorna un string donde "Microsoft" es remplazada con "W3Schools":
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3Schools");  //Resultado Visit W3Schools!

Syntax
string.replace(searchvalue,newvalue)

Realiza un reemplazo global:
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/g, "red");  //Resultado Mr Blue has a red house and a red car

Realiza un reemplazo global mas intensivo:
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/gi, "red");  //

Usando una funcion que retorna el remplazo de texto:
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue|house|car/gi, function myFunction(x){return x.toUpperCase();});
//Resultado Mr BLUE has a BLUE HOUSE and a BLUE CAR.

JavaScript String search() Method

Buscando "W3Schools":
var str = "Visit W3Schools!";
var n = str.search("W3Schools");  //Resultado 6

Realiza una busqueda en un caso mas sensitivo:
var str = "Mr. Blue has a blue house";
var n = str.search("blue");  //Resultado 15

Realiza una busqueda en un caso mas insensible:
var str = "Mr. Blue has a blue house";
var n = str.search(/blue/i);  //Resultado 4

JavaScript String slice() method

Extrae partes del string:
var str = "Hello world!";
var res = str.slice(1,5);  //Resultado ello

Syntax
string.slice(start,end)

Extrae la posición 3 hasta el final:
var str = "Hello world!";
var res = str.slice(3);  //Resultado lo world!

Extrae los caracteres desde la posición 3 hasta la posición 8:
var str = "Hello world!";
var res = str.slice(3, 8);  //Resultado lo wo

JavaScript String split() Method

Divide un string en un array:
var str = "How are you doing today?";
var res = str.split(" ");  //Resultado ["How","are","you","doing","today?"]

Syntax
string.split(separator,limit)

Omit the separator parameter:
var str = "How are you doing today?";
var res = str.split();  //Resultado ["How are you doing today?"]

Separa los caracteres incluyendo espacios en blanco:
var str = "How are you doing today?";
var res = str.split("");  //Resultado ["H","o","w"," " ,"a","r","e"," ","y","o","u"," ","d","o","i","n","g"," ","t","o","d","a","y","?"]

Usando el parametro limit:
var str = "How are you doing today?";
var res = str.split(" ",3);  //Resultado ["How","are","you"]

Usando una letra como separador:
var str = "How are you doing today?";
var res = str.split("o");  //Resultado ["H","w are y","u d","ing t","day?"]

JavaScript - Objeto String

Normalmente, las cadenas de JavaScript son valores primitivos, creados a partir de literales: var firstName = "Juan"

Pero las cadenas también pueden ser definidos como objetos con la palabra clave new: var firstName = new String ("Juan")

var x = "John";

var y = new String("John");

// typeof x retorna un string

// typeof y retorna un objet

Crear cadenas como objetos ralentiza la velocidad de ejecución  

Cuando se utiliza el operador de igualdad ==, los string se ven igual

var x = "John";             

var y = new String("John");

// (x == y) is true because x and y have equal values

Cuando se utiliza el operador de igualdad ===, los string no son iguales, porque el operador === espera la igualdad tanto en tipo y valor.

var x = "John";             

var y = new String("John");

// (x === y) is false because x and y have different types

Los objetos no se pueden comparar:

var x = new String("John");             

var y = new String("John");

// (x == y) is false because objects cannot be compared

Propiedades String

JavaScript - Tipos de datos

Resumen sobre tipos de datos en JavaScript.

“undefined” en Javascript

Undefined es un tipo de dato, al igual que lo son el Number, String, Boolean, Object o el Array. Javascript, al ser un lenguaje débilmente tipado, nos permite declarar variables sin especificar de qué tipo serán los valores que contenga. De esa forma, Javascript considerará a la variable de un tipo de dato u otro en función de su contenido, por ejemplo:

var number1 = 123     // Tipo Number
var number2 = "123" // Tipo String
var number3;

La variable “number3″ no tiene un valor asignado, ¿de qué tipo es? Dado que todas las variables han de tener siempre un tipo, en este caso Javascript considera la variable “number3″ de tipo undefined.

En resumen, en Javascript, todas aquellas variables que no han sido definidas (por lo tanto, no existen) o que han sido definidas sin asignárseles un valor, son siempre de tipo undefined.

“null” en Javascript

El valor null es en sí mismo un valor, pero un valor que indica la ausencia de contenido, el valor vacío. Si escribimos el siguiente código:

var number1 = null;

¿De qué tipo es la variable “number1″ ahora? Para Javascript, dado que a la variable number1 se le ha asignado el valor null, es una variable de tipo Object ahora mismo.

Resumiendo

Si lo que necesitamos es saber simplemente si una variable tiene el valor null o no ha sido definida, podemos utilizar el operador de negación:

var data;
if (!data) //true

Si necesitamos saber si una variable contiene realmente el valor null, hemos de utilizar el operador de identidad:

var data = null;
if (data === null) //true

Si necesitamos saber si una variable es de tipo undefined, para ello hemos de utilizar el operador typeof, el cual retorna en formato String, el nombre del tipo de dicha variable:

var data;
if (typeof(data) == "undefined") //true

Con esto ya tenemos un poco más claro cómo podemos comparar variables a las que no se les ha asignado un valor y variables con valor null. También hemos aprendido cuál es realmente la diferencia que Javascript hace entre undefined y null.

JavaScript - HTML DOM

El HTML DOM (Document Object Model)

Cuando se carga una página web, el navegador crea un Document Object Model de la página.

¿Qué es el DOM?

El DOM es un W3C (World Wide Web Consortium) estándar.

El DOM define un acceso estándar a los documentos:

El W3C del Modelo de Objetos del Documento (DOM) es una interfaz de la plataforma y del lenguaje neutro que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, a la estructura y al estilo de un documento.

El W3C DOM estándar se separa en 3 partes:

Core DOM - modelo estándar para todos los tipos de documentos

DOM XML - modelo estándar para documentos XML

HTML DOM - modelo estándar para documentos HTML

¿Qué es el DOM HTML?

El DOM HTML es un objeto estándar del modelo y del interfaz de la programación HTML. 

Se define:

Los elementos HTML como objetos

Las propiedades de todos los elementos HTML

Los métodos para acceder a todos los elementos HTML

Los eventos de todos los elementos HTML

En otras palabras: El DOM HTML se trata de cómo obtener, cambiar, añadir o eliminar elementos HTML.

HTML DOM Árbol de objetos

Con el modelo de objetos, JavaScript recibe toda la energía que necesita para crear HTML dinámico:
JavaScript puede cambiar todos los elementos HTML de la página
JavaScript puede cambiar todos los atributos HTML en la página
JavaScript puede cambiar todos los estilos CSS en la página
JavaScript puede quitar elementos y atributos HTML existente
JavaScript puede agregar nuevos elementos y atributos HTML
JavaScript puede reaccionar a todos los eventos de HTML existentes en la página
JavaScript puede crear nuevos eventos HTML en la página

El HTML DOM modelo está construido como un árbol de objetos

JavaScript - Prototype

//La propiedad prototype permite añadir nuevas propiedades a un prototipo existente: 
function person(first, last, age, eye) {
 this.firstName = first;
 this.lastName = last;
 this.age = age;
 this.eyeColor = eye;
}
person.prototype.nationality = "English";

var myFather = new person("John", "Doe", 50, "blue");
  
console.log ("My father is " + myFather.nationality); //My father is English


//La propiedad prototype también permite añadir nuevos métodos a un prototipo existente:
function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
person.prototype.name = function() {
    return this.firstName + " " + this.lastName
};

var myFather = new person("John", "Doe", 50, "blue");

console.log("My father is " + myFather.name()); //My father is John Doe

JavaScript - Algoritmo de ordenamiento

function quitaElmasGrande(v){
    var max = 0;
    var posMasgrande = 0;
    for(var i=0; i<v.length;i++){
        if(v[i] > max){
            max = v[i]   
            posMasgrande = i;
        }
    }    
    v.splice(posMasgrande,1)    //quita el elemento
    return max;
}

function ordenarDeMayorAMenor(arr){
    var original = arr.slice() //hago una copia del vector
    var vec_ordenado = []
    var max=0;    
    
    while( original.length > 0 ){ //corto cuando no tengo mas elementos en el array
        max = quitaElmasGrande(original)
        vec_ordenado.unshift(max)       //agrega al inicio 
    }
    
    return vec_ordenado;
}

/* --------------- aca empieza ----------------- */
var vec = [5,4,2,9,4,6,3,2,6]
//console.log(vec, quitaElmasGrande(vec), vec)

var vec2 = ordenarDeMayorAMenor(vec)
//vec.splice(3,1)
console.log("le mando este vector desordenado: ", vec)
console.log("y me lo devuelve ordenado: ", vec2) //[2, 2, 3, 4, 4, 5, 6, 6, 9]