parent
a09e0afa0c
commit
d838b9b570
@ -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>
|
@ -1,17 +1,33 @@
|
|||||||
//Formas de agregar javascript a una web
|
<!--
|
||||||
/*
|
Formas de agregar javascript a una web
|
||||||
- Guión en linea
|
|
||||||
- Guión interno
|
- 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
|
- Guión externo
|
||||||
- Múltiples scripts externos
|
- Múltiples scripts externos
|
||||||
*/
|
-->
|
||||||
// Guión en linea
|
<!-- Guión en linea -->
|
||||||
<!DOCTYPE HTML>
|
<!DOCTYPE HTML>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>30DaysOfScripts:Inline Scripts</title>
|
<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>
|
</head>
|
||||||
<body>
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</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