P - Tarea JS - 15

tareaTarea 15 - Arrays

 

Ejercicio: Realiza un programa que cree dos arrays: 1) Frutas dulces, 2) Frutos secos. Al pulsar el botón correspondiente aparecerá, dentro de la caja 'resultado', el array como una lista desordenada ul, indicándo el número de elementos del array. (vista previa)


Guarda la tarea en una carpeta llamada [15-arrays_basicos] que deberá estar dentro de otra carpeta general llamada [tareas_JS] donde irás guardando todas las tareas propuestas del curso.

Detalles teóricos

Los arrays son estructuras que nos permiten almacenar muchos datos, sin tener que preocuparnos por el orden o la organización interna. Como el orden de los elementos en principio nos da igual, utilizaremos un marcador numerico para referirnos a cada elemento de la lista, comenzando por el 0. Cuando añadimos elementos a la lista el orden puede alterarse o no, en función de si se añadiran antes o después de otros elementos.

Se puden declarar de dos formas, igualmente válidas:

  1. var nombreDelArray = new Array();
  2. var nombreDelArray = [];

Los inicializamos colocando sus elementos dentro de los paréntesis o los corchetes, separados por una coma y teniendo en cuenta que si se trata de elementos de texto deben ir entre comillas simples o dobles (eso da igual). Además, los elementos de un array también pueden ser arrays, de manera que podemos crear arrays multidimensionales.

Ejemplo:   var vocales = ['a','e','i','o','u'];

Accedemos a un determinado elemento del array mediante el nombre del array seguido de un número (índice) entre corchetes:

Ejemplo: para obtener la vocal 'e' y guardarla en la variable 'letra' escribimos
var letra = vocales[1];  // observa que hemos puesto un 1, pues los arrays comienzan en 0

Ejemplo resuelto

En este ejemplo se crea un array con un listado de frutas exóticas y cuando el usuario pulsa el botón aparece una lista desordenada con todas ellas.



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Curso de JS">
    <meta name="author" content="(cc) 3con14" />
    <title>Arrays Unidimensionales -1</title>
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
  <div class="contenedor">

    <div id="titulo">Ejemplo: arrays Unidimensionales - 1</div>
    <div id="info">
        <p>Programa que crea un array de frutas exóticas</p>
        <p>Al pulsar el botón aparecerá, dentro de la caja 'resultado', el array como una lista desordenada, indicándo el número de elementos de éste.</p><hr>
        <p>(Exóticas: Aguacate, Carambola, Chirimoya, Coco, Dátil, Kiwi, Litchi, Mango, Papaya, Piña, Plátano)</p>
    </div>

    <button onclick="Exoticas();" class='boton rojo'>Frutas Exóticas</button>
    <div id="resultado"></div>

  </div>

<script src="/js/codigo.js"></script>
</body>
</html>



var salida = document.getElementById('resultado');
function Exoticas(){
    var lista = '<ol style="margin-left:2em;">';
    var exotica = ['Aguacate', 'Carambola', 'Chirimoya', 'Coco', 'Dátil', 'Kiwi', 'Litchi', 'Mango', 'Papaya', 'Piña', 'Plátano'];
    for (var i=0; i<exotica.length; i++){
        lista += '<li>' + exotica[i] + '</li>';
    }
    lista += '</ol>';
    salida.innerHTML = 'Número de elementos del array: ' + exotica.length + '<hr>';
    salida.innerHTML += lista;
}



/* -------------------------------
    CSS para ejemplos JavaScript
    (cc) 3con14, mar-2017
   ------------------------------- */
* { 
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  transition : all 0.25s ease-in;
}
:focus { outline: 0 none transparent; }
body {
  min-height       : 100vh;
  font             : 16px/1.2 sans-serif;
  display          : flex;
  background-color : rgba(70, 130, 180, 0.6);
}
h1,h2,h3,h4,h5,h6,p { padding: 0.2rem; }
hr { 
  border           : 0;
  margin           : 0.5em 0;
  height           : 0.5px;
  background-color : rgba(0, 0, 0, 0.5);
}
.txt-S  { font-size  :  80%;   }
.txt-M  { font-size  :  90%;   }
.txt-L  { font-size  : 110%;   }
.dcha   { text-align : right;  }
.centro { text-align : center; }

.contenedor {
  max-width        : 800px;
  width            : 90%;
  min-height       : 90vh;
  margin           : auto;
  padding          : 2rem;
  border-top       : 10px solid rgba(0, 0,0, 0.2);
  background-color : rgba(0, 0, 0, 0.05);
}
label, input { 
  margin  : 0.5rem 0.1rem 0.5rem 0.1rem;
  padding : 0.3rem 0.2rem 0.2rem 0.2rem;
  border  : 0;
}
input { 
  background-color : rgba(255,255,255,0.2);
  font             : 1.1em "Lucida Console", "Courier New", monospace;
}
.inp-txt { 
  border      : 1px solid #fff;
  font        : 1.1em "Lucida Console", "Courier New", monospace;
  box-shadow  : 0.5px 0.5px 3px 0 rgba(112, 112, 112, 0.8) inset;
}
.inp-chk {
  width          : 1.2rem;
  height         : 1.2rem;
  vertical-align : middle;
  display        : inline-block;
}
#info, #resultado {
  min-height : 10vh;
  margin     : 1em 0;
  padding    : 0.5em;
}
#titulo { 
  font : 900 1.3em/1.2 verdana,sans-serif;
  color: rgba(0, 0, 0, 0.6);
}
#info { 
  font             : italic 1em/1.1 serif;
  background-color : rgba(255, 255, 255, 0.1);
  overflow         : auto;  
}
#resultado { 
  background-color : rgba(0, 0, 0, 0.05);
  font             : 100 1.2em/1.2 "Lucida Console", "Courier New", monospace;
}

/* BOTONES */
 button {
  margin    : 0.5em 0.25em;
  padding   : 0.25em 0.5em;
  cursor    : pointer;
  font-size : 1em;
  border    : 0;
 }
.boton {
  text-align    : center; text-decoration : none;
  font-family   : "Lucida Console", "Courier New", monospace;
  display       : inline-block; position : relative;
  background    : #777; color : #FFF;
  text-shadow   : 1px 1px 1px rgba(0, 0, 0, 0.7);
  padding       : 5px 13px; margin : 10px 5px;
  border-radius : 100px; white-space : nowrap;
  border        : 1px solid transparent;
  transition    : all 0.1s ease-in-out;
  border        : 1px solid transparent;  
}
.gris         { background: #777; box-shadow: 0px 3px 0 0 #444; }
.gris:hover   { background: hsla(0, 0%, 57%, 1); }
.rojo         { background: #E74C3C; box-shadow: 0px 3px 0 0 hsla(6, 63%, 36%, 1); }
.rojo:hover   { background: hsla(5, 100%, 70%, 1); }
.verde        { background: #2ECC71; box-shadow: 0px 3px 0 0 hsla(145, 63%, 32%, 1); }
.verde:hover  { background: hsla(145, 70%, 60%, 1); }
.azul         { background: #3498DB; box-shadow: 0px 3px 0 0 hsla(204, 54%, 44%, 1); }
.azul:hover   { background: hsla(204, 77%, 60%, 1); }
.rojo:active, .verde:active, .azul:active, .gris:active { transform: translateY(4px); }
.rojo:hover, .verde:hover, .azul:hover, .gris:hover     { border: 1px solid rgba(255, 255, 255, 0.4); }

Etiquetas: JavaScript, Tarea

Imprimir Correo electrónico

Visitas...

Hoy ........ 0

Ayer ....... 3

Mes ........ 43

Total ........ 7871

En línea...

Hay 152 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS