Merge d838b9b570 into 09f408a1b7
TheInfernal7
7 months ago
committed by
GitHub
commit
565ec6de9e
@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>30 Days Of React Challenge</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="root"></div>
|
||||
<script
|
||||
crossorigin
|
||||
src="https://unpkg.com/react@16/umd/react.development.js"
|
||||
></script>
|
||||
<script
|
||||
crossorigin
|
||||
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
|
||||
></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<script type="text/babel">
|
||||
// Aqui se indicará el codigo React.
|
||||
|
||||
// Para obtener el elemento raiz del documento HTML
|
||||
const rootElement = document.querySelector('.root');
|
||||
|
||||
// JSX elemento
|
||||
/* const jsxElemento = <h1> Bienvendidos al Curso de React </h1> */
|
||||
// Creamos el encabezado, cuerpo de la pagina y pie de la página.
|
||||
// Para unirlos y poder mostrarlos podemos crear un elemento JSX que los envuelva a los tres o colocandolos en una matriz.
|
||||
// Para envolverlos en un JSX usaremos los corchetes ({}) y llamaremos el elemento JSX dentro del mismo.
|
||||
// Styles
|
||||
const headerStyles = {
|
||||
backgroundColor: 'red',
|
||||
color: 'black',
|
||||
|
||||
|
||||
}
|
||||
// Información
|
||||
const header = (
|
||||
<header
|
||||
style={headerStyles}
|
||||
>
|
||||
<h1> Bienvenido a 30 dias de react</h1>
|
||||
<h2> Empezemos con React</h2>
|
||||
<h3> JavaScript libreria</h3>
|
||||
<p> Sergio García Pérez</p>
|
||||
<small> Jun 23, 2022</small>
|
||||
</header>
|
||||
)
|
||||
const main = (
|
||||
<main>
|
||||
<p> Prerequisitos para empezar con React</p>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>JavaScript</li>
|
||||
</ul>
|
||||
</main>
|
||||
)
|
||||
const footer = (
|
||||
<footer>
|
||||
<p>Copyright 2022</p>
|
||||
</footer>
|
||||
)
|
||||
const app = (
|
||||
<div>
|
||||
{header}
|
||||
{main}
|
||||
{footer}
|
||||
</div>
|
||||
)
|
||||
// Renderizamos el elemento JSX usando el paquete ReactDOM
|
||||
// ReactDOM tiene el método render y el método render toma dos argumentos.
|
||||
ReactDOM.render(app, rootElement)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,16 @@
|
||||
// JSX sintaxis
|
||||
const jsxElement = <h1> Soy un elemento de JSX</h1>
|
||||
const bienvenido = <h1> bienvenido a 30 dias de React Challenge</h1>
|
||||
const data = <small> Jun 23, 2022</small>
|
||||
|
||||
const title = <h2> Comenzemos a aprender React</h2>
|
||||
|
||||
const header = (
|
||||
<header>
|
||||
<h1> Bienvenido a 30 dias de react</h1>
|
||||
<h2> Empezemos con React</h2>
|
||||
<h3> JavaScript libreria</h3>
|
||||
<p> Sergio García Pérez</p>
|
||||
<small> Jun 23, 2022</small>
|
||||
</header>
|
||||
)// Tiene que ir dentro de parentesis.
|
||||
@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>30 Days Of React Challenge</title>
|
||||
<style>
|
||||
/* Estilos generales */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
line-height: 1.5;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 300;
|
||||
color: black;
|
||||
}
|
||||
.root {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.header-style,
|
||||
.main-style,
|
||||
.footer-style {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
}
|
||||
.header-style,
|
||||
.main-style {
|
||||
padding: 10px;
|
||||
margin: 2px auto;
|
||||
}
|
||||
h1 {
|
||||
font-size: 70px;
|
||||
font-weight: 300;
|
||||
}
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
}
|
||||
header {
|
||||
background-color: #61dbfb;
|
||||
padding: 10px;
|
||||
}
|
||||
main {
|
||||
padding: 10px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
ul {
|
||||
margin-left: 15px;
|
||||
}
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
background: #6cf;
|
||||
}
|
||||
.footer-style {
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="root"></div>
|
||||
<script
|
||||
crossorigin
|
||||
src="https://unpkg.com/react@16/umd/react.development.js"
|
||||
></script>
|
||||
<script
|
||||
crossorigin
|
||||
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
|
||||
></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<script type="text/babel">
|
||||
// Aqui se indicará el codigo React.
|
||||
|
||||
// Para obtener el elemento raiz del documento HTML
|
||||
const rootElement = document.querySelector('.root');
|
||||
|
||||
// JSX elemento
|
||||
/* const jsxElemento = <h1> Bienvendidos al Curso de React </h1> */
|
||||
// Creamos el encabezado, cuerpo de la pagina y pie de la página.
|
||||
// Para unirlos y poder mostrarlos podemos crear un elemento JSX que los envuelva a los tres o colocandolos en una matriz.
|
||||
// Para envolverlos en un JSX usaremos los corchetes ({}) y llamaremos el elemento JSX dentro del mismo.
|
||||
/*
|
||||
Podemos realizar calculos aritmeticos y operaciones ternarias con la inyección.
|
||||
const numero = 5
|
||||
const numero2 = 5
|
||||
const result = (
|
||||
<p>
|
||||
{numero} + {numero2} = {numero + numero2};
|
||||
</p>
|
||||
)
|
||||
*/
|
||||
// Styles
|
||||
// Información
|
||||
const welcome = 'Bienvenido a 30 dias de react';
|
||||
const react = 'Empezemos con React';
|
||||
const libreria = 'JavaScript libreria';
|
||||
const autor = 'Sergio García Pérez';
|
||||
const fecha = 'Jun 23, 2022';
|
||||
const matriz = ['HTML','CSS','JavaScript'];
|
||||
const header = (
|
||||
<header>
|
||||
<div className="header-style">
|
||||
<h1>{welcome} </h1>
|
||||
<h2>{react}</h2>
|
||||
<h3>{libreria}</h3>
|
||||
<p>{autor}</p>
|
||||
<small>{fecha}</small>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
)
|
||||
const main = (
|
||||
<main>
|
||||
<div className="main-style">
|
||||
<p> Prerequisitos para empezar con React</p>
|
||||
<ul>{matriz}</ul>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
const footer = (
|
||||
<footer>
|
||||
<div className="footer-style">
|
||||
<p>Copyright 2022</p>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
const app = (
|
||||
<div className='app'>
|
||||
{header}
|
||||
{main}
|
||||
{footer}
|
||||
</div>
|
||||
)
|
||||
// Renderizamos el elemento JSX usando el paquete ReactDOM
|
||||
// ReactDOM tiene el método render y el método render toma dos argumentos.
|
||||
ReactDOM.render(app, rootElement)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
Formas de agregar javascript a una web
|
||||
|
||||
- Guión en linea (EL Script va "en linea" con un elemento del html sin especificar que es un script)
|
||||
- Guión interno (Aquí el script lo podemon incluir en la cabecera(head) o en el cuerpo(body). Tenemos que indicar que es un script con "<script></script>")
|
||||
- Guión externo
|
||||
- Múltiples scripts externos
|
||||
-->
|
||||
<!-- Guión en linea -->
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>30DaysOfScripts:Inline Scripts</title>
|
||||
<script>
|
||||
console.log("Guión interno prueba");// Lo hemos localizado en el head del codigo
|
||||
</script>
|
||||
<script src="pruebas.js">
|
||||
// Aqui traemos el script de un fichero externo y lo llamamos para que se ejecute.
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Con la función alert() crearemos una alerta que aparecerá en pantalla, en este ejemplo se ejecutará al hacer click en el boton -->
|
||||
<button onclick="alert('Bienvenido a 30 days of script!')">Click Aqui</button>
|
||||
<script>
|
||||
console.log("Guión interno prueba 2");// En este caso hemos introducido el script dentro del body
|
||||
</script>
|
||||
<div>
|
||||
<script>
|
||||
const PI = Math.PI
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1 @@
|
||||
console.log("Guión externo");
|
||||
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Repaso de javascript</title>
|
||||
<script src="repaso.js">
|
||||
// Aqui traemos el script de un fichero externo y lo llamamos para que se ejecute.
|
||||
</script>
|
||||
<script src="repaso2.js";>
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,206 @@
|
||||
/*
|
||||
Objeto matemático (SUS PROPIEDADES Y MÉTODOS)
|
||||
*/
|
||||
const PI = Math.PI // Declaramos la constante PI con el valor de PI
|
||||
console.log(PI); // Mostramos por consola la variable PI
|
||||
|
||||
//Metodos de rendondeo de la función Math
|
||||
console.log(Math.round(PI)); // Con round redondeas a la baja si el siguiente decimal es menor a 5 y a la alza si es mayor o igual 5, con PI = 3.141592653589 se redondea a 3
|
||||
|
||||
console.log(Math.round(9.81)); // Esta prueba es para mostrar el redondeo a la alza, como es 9,81 se pasa a 10
|
||||
|
||||
console.log(Math.floor(PI)); // Con floor siempre se redondea a la baja independientemente del valor de los decimales
|
||||
|
||||
console.log(Math.ceil(PI)); // Con ceil siempre se redondea a la alza, independientemente del valor de los decimales
|
||||
|
||||
console.log(Math.min(-5,3,20,25,5)); // Con min al pasarle un conjunto de numeros, este tomará el de menor valor, en este caso al haber un valor negativo este será tomando
|
||||
|
||||
console.log(Math.max(-5,3,20,25,5)); // Con max al pasarle un conjunto de numeros, este tomará el de mayor valor, en este caso será tomando como valor el 25
|
||||
|
||||
console.log(Math.abs(-15)); // Con abs el valor que le indiquemos lo pasará a absoluto, un positivo seguirá positivo y un negativo pasará a positivo
|
||||
|
||||
console.log(Math.sqrt(200)); // la función sqrt devuelve la raiz cuadrada del número que le indiquemos.
|
||||
|
||||
console.log(Math.pow(3,2)); // La base elevada a la exponente siendo pow(base, exponente)
|
||||
|
||||
console.log(Math.E); // Representa la base de los algoritmos naturales, e, aproximadamente 2,718
|
||||
|
||||
console.log(Math.log(2)); // Devuelve la base neutral de un número (base e)
|
||||
|
||||
console.log(Math.log(10));
|
||||
|
||||
console.log(Math.LN2); // Representa el algoritmo natural de 2, aproximadamente 0,693
|
||||
|
||||
console.log(Math.LN10); //Representa el algoritmo natural de 10, aproximadamente 2,302
|
||||
|
||||
Math.sin(0); // Devuelve el seno de un número
|
||||
|
||||
Math.sin(60); // Devuelve el seno de un número
|
||||
|
||||
Math.cos(0); // Devuelve el coseno de un número
|
||||
|
||||
Math.cos(60); // Devuelve el coseno de un número
|
||||
|
||||
console.log(Math.random()); // El método random, nos devolverá un valor aleatorio entre 0 y 0,99999999
|
||||
|
||||
// Si queremos un valor distinto aleatorio tendremos que hacer calculos con este método, ya sea multiplicar si valor por otro, o pudiendo
|
||||
// usar los otros métodos para generar un valor.
|
||||
|
||||
// Aquí unos ejemplos:
|
||||
const valor = Math.random();
|
||||
|
||||
console.log(valor * 5);
|
||||
|
||||
console.log(Math.floor(valor * 5));
|
||||
|
||||
console.log(Math.ceil(valor * 10));
|
||||
/**********************************/
|
||||
|
||||
/*
|
||||
Métodos de cadena
|
||||
|
||||
length: devuelve el número de caracteres de una cadena incluido los espacios.
|
||||
Este método accede al indice de la cadena, este empieza en el 0. Aunque la cadena tenga un valor de 10 caracteres, estos van del 0 al 9
|
||||
|
||||
*/
|
||||
let cadena = 'Hola a todos me llamo sergio';
|
||||
let lista = 'España, Noruega, Finlancia, Francía, Alemania';
|
||||
let js = 'JavaScript';
|
||||
|
||||
console.log(js.length);
|
||||
|
||||
let firtname = 'Sergio';
|
||||
|
||||
console.log(firtname.length);
|
||||
|
||||
//Probemos a acceder a distintos caracteres de las cadenas anteriores.
|
||||
|
||||
let PrimerLetra = js[0];
|
||||
console.log(PrimerLetra); // Nos mostrará la letra J
|
||||
let SegundaLetra = js[1]; // Para referirnos a un indice especifico usaremos los corchetes[]
|
||||
let TercerLetra = js[2];
|
||||
|
||||
console.log('PrimerLetra: '+PrimerLetra+' '+'SegundaLetra: '+SegundaLetra+' '+'TerceraLetra: '+TercerLetra)
|
||||
|
||||
let Mayus = js.toUpperCase(); // toUpperCase transforma las letras de la cadena en Mayusculas.
|
||||
console.log(Mayus);
|
||||
|
||||
let Minus = js.toLowerCase(); // toLowerCase transforma las letras de la cadena en Minusculas.
|
||||
console.log(Minus);
|
||||
|
||||
let substraer = js.substring(0,4); // Toma dos argumentos, del indice primero y final, pero no se incluye el indice del final.
|
||||
console.log(substraer); // Estamos extreyendo los 4 primeros caracteres, indicamos que empiece con el 0 = J y finalice en 4 = S, pero mostrará 'Java'.
|
||||
// este metodo substring hace un lenght - 1 al final de forma predefinida.
|
||||
/* El metodo split divide la cadena en un lugar específico, esto quiere decir que si no le indicamos ningun argumento al metodo este creara un array con valor unico
|
||||
que será la cadena en cuestión.
|
||||
|
||||
Si la cadena es una palabra unicamente, si indicamos split('') esta creará un array en el que cada letra ocuperá un hueco del array.
|
||||
Si la cadena es de una frase/oración, tendremos que indicar split(' ') para que cada palabra ocupe un hueco del array.
|
||||
Si la cadena es un conjunto de elementos separados por comas a modo de lista, indicaremos split(',') para que nos cree un array de cada elemento.
|
||||
*/
|
||||
console.log(js.split()); // Array de un solo elemento.
|
||||
console.log(js.split('')); // Array con cada letra de la variable ocupando un hueco.
|
||||
console.log(cadena.split(' ')); // Array con cada palabra de la variable ocupando un hueco.
|
||||
console.log(lista.split(',')); // Array con cada palabra de la lista ocupando un hueco.
|
||||
|
||||
// Usamos trim(), para quitar los espacios iniciales y finales de la cadena. Si es cadena compleja usamos trim(''), y si es simple trim().
|
||||
let QuitarEspacioFin = ' Aqui se quita el espacio final ';
|
||||
console.log(QuitarEspacioFin);
|
||||
console.log(QuitarEspacioFin.trim(''));
|
||||
|
||||
// Usamos includes() para comprobar si una cadena contiene el argumento que nosotros le pasemos, si existe da un valor true, en caso contrario false.
|
||||
// Este metodo es case sensitive, es decir, a de estar el argumento perfecto, si la palabra es igual pero con una minuscula dará false.
|
||||
console.log(cadena.includes('Sergio'));
|
||||
console.log(cadena.includes('sergio'));
|
||||
|
||||
// Usamos replace() para reemplazar una cadena antigua por una nueva, primero le pasamos el elemento antiguo, y después el nuevo.
|
||||
// Ej. cadena.replace(oldcadena, newcadena): Este metodo tambien el case sensitive.
|
||||
console.log(cadena.replace('sergio', 'juan'));
|
||||
|
||||
// Usamos charAt() para tomar el valor del indice.
|
||||
let letra = cadena.length - 1;
|
||||
console.log(cadena.charAt(0));
|
||||
console.log(cadena.charAt(letra))
|
||||
// Usamos charCodeAt() para conseguir el codigo char del valor del indice que le indiquemos.
|
||||
console.log(cadena.charCodeAt(0));
|
||||
console.log(cadena.charCodeAt(letra));
|
||||
|
||||
// Usamos indexOf() para conseguir la primera posición donde exita el elemento que le pasemos, este comprobará si existe, en caso de no existir no devolverá -1.
|
||||
//
|
||||
let NewCadena = '30 Dias de curso de JavaScript';
|
||||
console.log(NewCadena.indexOf('D')); // Devolverá el valor 3 que es donde empieza el elemento.
|
||||
console.log(NewCadena.indexOf('Dias')); // Devolverá el valor 3 que es donde empieza el elemento indicado.
|
||||
console.log(NewCadena.indexOf('c')); // aqui devuelve el valor 11
|
||||
|
||||
// lastIndexOf() usa la misma logica que indexOf pero este nos dará el ultima posición donde aparezca el elemento dado. En caso de no encontrarse nos devolverá -1.
|
||||
console.log(NewCadena.lastIndexOf('c')); // en cambio en este caso devuelve el valor 25
|
||||
|
||||
// Usamos concat() para unir varios elementos.
|
||||
let string = '30';
|
||||
console.log(string.concat('Days','Of','JavaScript'));
|
||||
|
||||
// Usamos startsWith() o endsWith() para comprobar si el argumento que le pasamos coincide con le inicio de la cadena o el final de la cadena.
|
||||
// En caso de coincidir nos devolverá el valor booleano true, en caso de no coincidir nos devolverá el valor booleano false.
|
||||
|
||||
console.log(cadena.startsWith('Hola')); // Devuelve true
|
||||
console.log(cadena.startsWith('hola')); // Devuelve false
|
||||
console.log(cadena.endsWith('sergio')); // Devuelve true
|
||||
console.log(cadena.endsWith('Sergio')); // Devuelve false
|
||||
|
||||
// search(): le pasamos un argumento de busqueda y este nos devolverá el índice de la primera coincidencia.
|
||||
console.log(cadena.search('todos')); // indice 7
|
||||
|
||||
// match(): se le puede pasar el argumento de forma normal, o con un patrón de expresión. Si existe una coincidencia este devolverá una matriz, de lo contrario un
|
||||
// valor nulo.
|
||||
|
||||
// Un patrón de expresión se indica de la siguiente manera.
|
||||
let patron = 'love';
|
||||
let patterOne = /love/;
|
||||
let patterTwo = /love/gi; // el atributo 'g' sirve para que busque en todo el texto, el atributo 'i' no distingue entre mayusculas y minusculas.
|
||||
|
||||
let cadena2 = 'I love JavaScript. If you do not love JavaScript what else can you love.';
|
||||
console.log(cadena2.match(patron));
|
||||
console.log(cadena2.match(patterOne));
|
||||
console.log(cadena2.match(patterTwo));
|
||||
|
||||
// repeat(): le pasamos un numero como argumento y este repetirá la cadena tantas veces como le indiquemos.
|
||||
console.log(cadena.repeat(2)); // Aparecerá esto: Hola a todos me llamo sergioHola a todos me llamo sergio
|
||||
|
||||
/*
|
||||
Comprobación de datos y conversión.
|
||||
*/
|
||||
let num = 0;
|
||||
let afirmativo = true;
|
||||
const Objeto = new Object();
|
||||
console.log(typeof cadena); // string
|
||||
console.log(typeof cadena2); // string
|
||||
console.log(typeof num); // number
|
||||
console.log(typeof afirmativo); // boolean
|
||||
console.log(typeof Objeto); // object
|
||||
|
||||
// Para poder convertir un tipo de dato a otro tipo de dato tendremos que usar los siguientes metodos:
|
||||
/*
|
||||
-parseInt();
|
||||
-parseFloat();
|
||||
-Number();
|
||||
- '+' signo.
|
||||
- str();
|
||||
*/
|
||||
// Cualquier número dentro de comillas, es un numero de cadena. Si queremos pasar un numero_cadena a número usaremos lo siguiente:
|
||||
let num1 = '10';
|
||||
let num2 = '9.81';
|
||||
let numInt = parseInt(num1);
|
||||
let numInt2 = Number(num1);
|
||||
let numInt3 = +num1;
|
||||
let numFloat = parseFloat(num2);
|
||||
let numFloat2 = Number(num2);
|
||||
let numFloat3 = +num2;
|
||||
console.log(num1); // string
|
||||
console.log(numInt2); // convertido con Number()
|
||||
console.log(numInt); // convertido con parseInt()
|
||||
console.log(numInt3); // convertido con +
|
||||
console.log(num2); // string
|
||||
console.log(numFloat); // convertido con numFloat()
|
||||
console.log(numFloat2); // convertido con Number()
|
||||
console.log(numFloat3); // convertido con +
|
||||
// Con parseInt podemos transforma un número flotante (9.10) a numero entero.
|
||||
@ -0,0 +1,123 @@
|
||||
/*
|
||||
MATRICES
|
||||
*/
|
||||
// constructor de matrices
|
||||
const arr = Array();
|
||||
// or
|
||||
// let arr = new Array();
|
||||
console.log(arr); // []
|
||||
|
||||
// usando corchetes
|
||||
const arr2 = [];
|
||||
console.log(arr2); // []
|
||||
|
||||
const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // array of numbers
|
||||
const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of strings, fruits
|
||||
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of strings, vegetables
|
||||
const animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // array of strings, products
|
||||
const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // array of web technologies
|
||||
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // array of strings, countries
|
||||
|
||||
// Mostrar por pantalla los arrays y el tamaño de este
|
||||
console.log('Numbers: ',numbers);
|
||||
console.log('Numero de Numbers: ',numbers.length);
|
||||
console.log('Fruits: ',fruits);
|
||||
console.log('Numero de fruits: ',fruits.length);
|
||||
console.log('vegetables: ',vegetables);
|
||||
console.log('Numero de vegetables: ',vegetables.length);
|
||||
console.log('AnimalProducts: ',animalProducts);
|
||||
console.log('Numero de AnimalProducts: ',animalProducts.length);
|
||||
console.log('webTechs: ',webTechs);
|
||||
console.log('Numero de webTechs: ',webTechs.length);
|
||||
console.log('countries: ',countries);
|
||||
console.log('Numero de countries: ',countries.length);
|
||||
|
||||
// Podemos crear una matriz con diferentes datos dentro de la misma
|
||||
const arr3 = [
|
||||
'Sergio', // Strings
|
||||
26, // Number
|
||||
{ pais: 'España', ciudad: 'León'}, // array
|
||||
{ skills: ['HTML', 'CSS','JS','React']} // array
|
||||
];
|
||||
console.log(arr3);
|
||||
|
||||
// Para acceder a cualquier dato dentro del array haremos uso de los indices. Como los arrays empiezan desde el 0 hasta el tamaño -1 el primer valor
|
||||
// del array se encontrará en el indice 0.
|
||||
console.log(numbers[2]); // Con esto accederemos al valor numero 3 de array que es 9.81
|
||||
// Si queremos modificar el valor de dicha posición haremos lo siguiente:
|
||||
numbers[2] = 10.82; // Le hemos dado otro valor a la posición de array.
|
||||
console.log(numbers[2]);
|
||||
|
||||
/*
|
||||
Metodos para manipular arrays
|
||||
*/
|
||||
// Array
|
||||
const arr4 = Array(3); // Creamos un array. El valor que indiquemos entre parentesis indicará el tamaño del mismo.
|
||||
console.log(arr4);
|
||||
|
||||
// Fill (relleno)
|
||||
arr4.fill('X'); // Rellenamos el array con el valor que le indiquemos, en este caso con 'X'
|
||||
console.log(arr4); // ['X','X','X'] esto será lo que veamos dentro.
|
||||
|
||||
// Concat: Para concatenar dos arreglos.
|
||||
const PrimerArreglo = ['1','2','3'];
|
||||
const SegundoArreglo = ['4','5','6'];
|
||||
const TercerArrerglo = PrimerArreglo.concat(SegundoArreglo);
|
||||
console.log(TercerArrerglo); // ['1','2','3','4','5','6']
|
||||
|
||||
// lenght : Longitud del array.
|
||||
console.log('Longitud: ',TercerArrerglo.length);
|
||||
|
||||
// indexOf: Para comprobar si un indice existe dentro de la matriz, si existe devuelve el valor dentro de la matriz, si no existe devuelve -1
|
||||
console.log(TercerArrerglo.indexOf('4')); // Existe en la posición 3
|
||||
console.log(TercerArrerglo.indexOf('0')); // No existe entonces devuelve -1
|
||||
|
||||
// join: Para unir elementos de la matriz. El argumento que indiques unirá la matriz y devolvera todo los elementos como una cadena.
|
||||
|
||||
const numeros = [1,2,3,4,5];
|
||||
console.log(numeros.join());
|
||||
|
||||
const webTechs2 = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JS',
|
||||
'React',
|
||||
'MongDB'
|
||||
];
|
||||
console.log(webTechs2);
|
||||
console.log(webTechs2.join(' # '));
|
||||
|
||||
// Slice : Usado para cortar elementos de un rango que le indiquemos. Toma dos parametros, posición inicial y final. No incluye la posición final.
|
||||
/*
|
||||
En estos tres casos el resultado será el mismo. Nos mostrará todos los resultados
|
||||
console.log(numeros.slice());
|
||||
console.log(numeros.slice(0));
|
||||
console.log(numeros.slice(0, numeros.length));
|
||||
*/
|
||||
console.log(numeros.slice(0,2)); // Mostrará los elementos [1,2]
|
||||
|
||||
// Splice : Toma tres parámetros: Posición inicial, número de veces que se quitará y número de elementos que se agregarán.
|
||||
// Este método funciona haciendo los cambios a la matriz, probando usandolo dentro del console.log() da fallos.
|
||||
|
||||
const numeros2 = [1,3,4,5,6];
|
||||
//console.log(numeros2.splice()); // Elimina todos los elementos.
|
||||
//console.log(numeros2.splice(0,1));
|
||||
console.log(numeros2);
|
||||
numeros2.splice(1,0,2);
|
||||
console.log(numeros2);
|
||||
numeros2.splice(3,3,7,8,9);
|
||||
|
||||
// Push: Metodo para añadir elementos al array. Estos se añaden al final de la matriz
|
||||
// unshift: Metodo para añadir elementos al array. Estos se añaden al inicio de la matriz.
|
||||
const numeros3 = [1,2,3,4,5,6];
|
||||
numeros3.unshift(0);
|
||||
numeros3.push(7);
|
||||
console.log(numeros3);
|
||||
|
||||
// Pop: Elimina el ultimo valor del array.
|
||||
// shift: Elimina el primer valor del array.
|
||||
numeros3.shift();
|
||||
numeros3.pop();
|
||||
console.log(numeros3);
|
||||
|
||||
|
||||
Loading…
Reference in new issue