lunes, 22 de febrero de 2016

Arrays

Los arrays en JavaScript son utilizados para almacenar múltiples datos en una única variable.
Del contenido del capítulo JS Arrays W3Schools.

Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Crear un array y asignarle valores</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>

Ejercicio 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Los espacios y saltos de línea no son importantes.</h2>
<p id="demo"></p>
<script>
var cars = [
    "Saab",
    "Volvo",
    "BMW" //cuidado con NO poner coma detrás del último valor
];
document.getElementById("demo").innerHTML = cars[1];
</script>
</body>
</html>

Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Creando un array con la sintaxis "new".</h2>
<p id="demo"></p>
<script>
var cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</body>
</html>

Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Acceso a los elementos de un array con números.</h2>
<p id="demo"></p>
<script>
var person = ["John", "Doe", 46]; //Los números no llevan comillas
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
</html>

Ejercicio 5.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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 objetos JS se accede con sus propiedades.</h2>
<p>La sintaxis puede ser <i>valor.propiedad</i> o bien <i>valor["propiedad"]</i></p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo1").innerHTML = person["firstName"];
document.getElementById("demo2").innerHTML = person.firstName;
</script>
</body>
</html>

Ejercicio 6. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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> devuelve el número de elementos del array.</h2>
<p id="demo"></p>
<script>
var frutas = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = frutas.length;
</script>
</body>
</html>

Ejercicio 7. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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</button>
<p id="demo"></p>
<script>
var frutas = ["Plátano", " Naranja", " Manzana", " Mango"];
document.getElementById("demo").innerHTML = frutas;
function myFunction() {
    frutas.push(" Limón ")
    document.getElementById("demo").innerHTML = frutas;
}
</script>
</body>
</html>

Ejercicio 8.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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 elementos a un array.</h2>
<p>Es una forma alternativa al método push().</p>
<p>El número de elementos del array coincide con la posición a añadir pues el índice empieza en cero.</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
var frutas = [" Plátano", " Naranja", " Manzana", " Mango"];
document.getElementById("demo").innerHTML = frutas;
function myFunction() {
    frutas[frutas.length] = " Limón";
    document.getElementById("demo").innerHTML = frutas;
}
</script>
</body>
</html>

Ejercicio 9.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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ñadir elementos empleando índices más altos crea "agujeros" <i>undefined</i> en el array.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var frutas = [" Plátano", " Naranja", " Manzana", " Mango"];
document.getElementById("demo").innerHTML = frutas;
function myFunction() {
    frutas[10] = "Limón";
    document.getElementById("demo1").innerHTML = frutas;
document.getElementById("demo2").innerHTML = frutas[8];
}
</script>
</body>
</html>

Ejercicio 10. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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 mejor forma de recorrer un array es ulizando un <i>for</i>.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var index;
    var text = "<ul>";
    var frutas = ["Plátano", "Naranja", "Manzana", "Mango"];
    for (index = 0; index < frutas.length; index++) {
        text += "<li>" + frutas[index] + "</li>";
    }
    text += "</ul>";
    document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

Ejercicio 11.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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 siempre emplea índices numéricos</h2>
<p id="demo"></p>
<script>
var persona = [];
persona[0] = "Juan";
persona[1] = "Pérez";
persona[2] = 46; 
document.getElementById("demo").innerHTML =
persona[0] + " " + persona.length;
</script>
</body>
</html>

Ejercicio 12. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Mejor no emplear <i>new Array()</i>. Emplear [] en su lugar.</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var points1 = new Array(40, 100, 1, 5, 25, 10);
var points2 = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points1[0];
document.getElementById("demo2").innerHTML = points2[0];        
</script>
</body>
</html>

Ejercicio 13. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Arrays</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Evitar usar <i>new Array()</i>.</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var points1 = new Array(40);
var points2 = [40];
document.getElementById("demo1").innerHTML = points1[0];    
document.getElementById("demo2").innerHTML = points2[0];  
</script>
</body>
</html>

Ejercicio 14.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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 operador <i>typeof</i> usado en un array devuelve un objeto.</h2>
<p id="demo"></p>
<script>
var frutas = ["Banana", "Naranja", "Manzana", "Mango"];
document.getElementById("demo").innerHTML = typeof frutas;
</script>
</body>
</html>

Ejercicio 15. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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 nuevo ECMAScript método <i>isArray</i> devuelve <i>true</i> usado en un array.</h2>
<p id="demo"></p>
<script>
var frutas = ["Plátano", "Naranja", "Manzana", "Mango"];
document.getElementById("demo").innerHTML = Array.isArray(frutas);
</script>
</body>
</html>

Ejercicio 16. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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 construir una función para comprobar si es un array.</h2>
<p id="demo"></p>
<script>
var frutas = ["Plátano", "Naranja", "Manzana", "Mango"];
document.getElementById("demo").innerHTML = isArray(frutas);
function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>

Ejercicio 17.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Javascript 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 operador <i>instanceof</i> devuelve <i>true</i> cuando es usado con un array.</h2>
<p id="demo"></p>
<script>
var frutas = ["Plátano", "Naranja", "Manzana", "Mango"];
document.getElementById("demo").innerHTML = frutas instanceof Array;
</script>
</body>
</html>
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)