lunes, 7 de marzo de 2016

Métodos array

La fortaleza de los arrays de JavaScript reside en sus métodos.
Del contenido del capítulo JS Array Methods W3Schools.

Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>toString()</i> devuelve el array como un <i>string</i> con una coma como separador.</h2>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>

Ejercicio 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>join()</i> es como el <i>toString()</i>.</h2>
<p>Solo que, además permite elegir el separador.</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits.join(" - ");
</script>
</body>
</html>

Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>pop()</i> borra el último elemento del arrar.</h2>
<button onclick="myFunction()">Púlsame varias veces</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;

 function myFunction() {
    fruits.pop();
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>pop()</i> devuelve el (borrado) último elemento del array.</h2>
<button onclick="myFunction()">Púlsame varias veces</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;

 function myFunction() {
    document.getElementById("demo").innerHTML = fruits.pop();
}
</script>
</body>
</html>

Ejercicio 5.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>push()</i> añade un nuevo elemento al array</h2>
<button onclick="myFunction()">Púlsame varias veces</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
    fruits.push(" Kiwi");
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 6. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>push()</i> devuelve la dimensión (<i>length</i>) del nuevo array.</h2>
<button onclick="myFunction()">Púlsame varias veces</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
    document.getElementById("demo").innerHTML = fruits.push(" Kiwi");
}
</script>
</body>
</html>

Ejercicio 7. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>shift()</i> borra el primer elemento del array</h2>
<button onclick="myFunction()">Púlsame varias veces</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;

 function myFunction() {
    fruits.shift();
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 8.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>unshift()</i> añade un nuevo elemento al principio del array.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;

 function myFunction() {
    fruits.unshift(" Lemon");
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 9.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>A los elementos de un array se accede por su índice.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
    fruits[0] = " Kiwi";
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 10. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>La propiedad <i>length</i> proporciona una forma fácil de añadir un nuevo elemento.</h2>
<p>Sin tener que emplear el método <i>push()</i>.</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;

 function myFunction() {
    fruits[fruits.length] = " Kiwi";
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 11.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Suprimir elementos deja <i>undefined</i> huecos en el array.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
    delete fruits[0];
    document.getElementById("demo").innerHTML = fruits[0];
}
</script>
</body>
</html>

Ejercicio 12. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>splice()</i> añade nuevos elementos al array.</h2>
<p>El primer parámetro numérico indica la posición en el que se añaden los elementos.</p>
<p>El segundo parámetro numérico indica los elementos que se van a borrar.</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
    fruits.splice(2, 0, " Lemon", " Kiwi");
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 13. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Podemos usar el método <i>splice()</i> para borrar elementos del array.</h2>
<p>En este caso solo pasamos los parámetros numéricos de posición y número de elementos a eliminar.</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
    fruits.splice(0, 1);
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 14.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>sort()</i> ordena alfabéticamente el array.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
    fruits.sort();
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 15. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Una vez ordenados los elementos con <i>sort()</i>,<br />
con <i>reverse()</i> les damos la vuelta.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
    fruits.sort();
    fruits.reverse();
    document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ejercicio 16. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Cuando el array está formado por números hay que emplear una función de comparación.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;    
function myFunction() {
    points.sort(function(a, b){return a-b});
    document.getElementById("demo").innerHTML = points.join(";  ");
}
</script>
</body>
</html>

Ejercicio 17.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>También se puede hacer con <i>></i> o con <i><</i>.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  
function myFunction() {
    points.sort(function(a, b){return a>b});
    document.getElementById("demo").innerHTML = points.join(";  ");
}
</script>
</body>
</html>

Ejercicio 18.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Podemos cambiar <i>b - a</i> en vez de <i>a - b</i> para ordenar en orden descendente.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
    points.sort(function(a, b){return b-a});
    document.getElementById("demo").innerHTML = points.join(";  ");
}
</script>
</body>
</html>

Ejercicio 19.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>O usar <i>b - a</i> en vez de <i>a - b</i>.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
    points.sort(function(a, b){return b>a});
    document.getElementById("demo").innerHTML = points.join(";  ");
}
</script>
</body>
</html>

Ejercicio 20. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Encontrar el valor más alto de los elementos del array.</h2>
<p>El valor más alto es <span id="demo"></span></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>

Ejercicio 21. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Encontrar el valor más bajo de los elementos del array.</h2>
<p>El valor más bajo es <span id="demo"></span></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>

Ejercicio 22.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>concat()</i> crea un nuevo array juntando los elementos de dos arrays.</h2>
<p>Pulsa el botón para mostrar todos mis hijos e hijas.</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var misChicas = [" Cecilie", " Lone"];
    var misChicos = [" Emil", " Tobias", " Linus"];
    var misHijos = misChicas.concat(misChicos);
    document.getElementById("demo").innerHTML = misHijos;
}
</script>
</body>
</html>

Ejercicio 23. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Unir los elementos de tres arrays.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var arr1 = [" Cecilie", " Lone"];
    var arr2 = [" Emil", " Tobias", " Linus"];
    var arr3 = [" Robin", " Morgan"];
    document.getElementById("demo").innerHTML =
    arr1.concat(arr2, arr3);
}
</script>
</body>
</html>

Ejercicio 24. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>slice()</i> saca una parte de un array a partir de uno de los elementos.</h2>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Lemon", " Apple", " Mango"];
var citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br>" + citrus;
</script>
</body>
</html>

Ejercicio 25.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>En este ejemplo con <i>slice()</i> se obtiene el array a partir del elemento 3 ("Apple").</h2>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Lemon", " Apple", " Mango"];
var citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br>" + citrus;
</script>
</body>
</html>

Ejercicio 26.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Cuando al método <i>slice()</i> se le pasan dos argumentos...</h2>
<p>Se empieza en la posición del 1er. argumento y se acaba en la posición anterior al segundo argumento.</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br>" + citrus;
</script>
</body>
</html>

Ejercicio 27. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>JavaScript convierte automáticamente un array en un string.</h2>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>

Ejercicio 28.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>valueOf</i> devuelve el primitivo valor de un objeto.</h2>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.valueOf();
document.getElementById("demo2").innerHTML = typeof fruits;
</script>
</body>
</html>

Ejercicio 29. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Métodos Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El método <i>toString()</i> devuelve un array como un string separando por comas.</h2>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
document.getElementById("demo2").innerHTML = typeof fruits.toString();
</script>
</body>
</html>
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)