Asabeneh
2 years ago
committed by
GitHub
commit
fb18dc672d
@ -0,0 +1,540 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Expresiones Regulares</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 11](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) | [Día 13>>](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md)
|
||||
|
||||
|
||||
|
||||
- [📘 Día 12](#📘-día-12)
|
||||
- [Expresiones Regulares](#expresiones-regulares)
|
||||
- [Parámetros RegExp](#parámetros-regexp)
|
||||
- [Patrón](#patrón)
|
||||
- [Banderas](#banderas)
|
||||
- [Creación de un patrón con el constructor RegExp](#creación-de-un-patrón-con-el-constructor-regexp)
|
||||
- [Creación de un patrón sin el constructor RegExp](#creación-de-un-patrón-sin-el-constructor-regexp)
|
||||
- [Métodos del objeto RegExp](#métodos-del-objeto-regexp)
|
||||
- [Pruebas de coincidencia](#pruebas-de-coincidencia)
|
||||
- [Array que contiene todas las coincidencias](#array-que-contiene-todas-las-coincidencias)
|
||||
- [Sustitución de una subcadena](#sustitución-de-una-subcadena)
|
||||
- [Corchetes](#corchetes)
|
||||
- [Caracter Escape (\\) en RegExp](#caracter-escape--en-regexp)
|
||||
- [Una o más veces(+)](#una-o-más-veces)
|
||||
- [Punto(.)](#punto)
|
||||
- [Cero o más veces(\*)](#cero-o-más-veces)
|
||||
- [Cero o una vez (?)](#cero-o-una-vez)
|
||||
- [Cuantificador en RegExp](#cuantificador-en-regexp)
|
||||
- [Caret ^](#caret)
|
||||
- [Coincidencia exacta](#coincidencia-exacta)
|
||||
- [💻 Ejercicios](#💻-ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
|
||||
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
|
||||
|
||||
# 📘 Día 12
|
||||
|
||||
## Expresiones Regulares
|
||||
|
||||
Una expresión regular o RegExp es un pequeño lenguaje de programación que ayuda a encontrar patrones en los datos. Una RegExp puede ser utilizada para comprobar si algún patrón existe en diferentes tipos de datos. Para usar RegExp en JavaScript, podemos usar el constructor RegExp o podemos declarar un patrón RegExp usando dos barras inclinadas seguidas de una bandera. Podemos crear un patrón de dos maneras.
|
||||
|
||||
Para declarar una cadena de caracteres utilizamos una comilla simple, una comilla doble y un signo de retroceso; para declarar una expresión regular utilizamos dos barras inclinadas y una bandera opcional. La bandera puede ser g, i, m, s, u o y.
|
||||
|
||||
### Parámetros RegExp
|
||||
|
||||
Una expresión regular toma dos parámetros. Un patrón de búsqueda requerido y una bandera opcional.
|
||||
|
||||
#### Patrón
|
||||
|
||||
Un patrón puede ser un texto o cualquier forma de patrón que tenga algún tipo de similitud. Por ejemplo, la palabra "spam" en un correo electrónico podría ser un patrón que nos interesa buscar en un correo electrónico o un formato de número de teléfono puede ser de nuestro interés para buscar.
|
||||
|
||||
#### Banderas
|
||||
|
||||
Las banderas son parámetros opcionales en una expresión regular que determinan el tipo de búsqueda. Veamos algunas de las banderas:
|
||||
|
||||
- g: una bandera global que significa buscar un patrón en todo el texto
|
||||
- i: indicador de insensibilidad a las mayúsculas y minúsculas (busca tanto en minúsculas como en mayúsculas)
|
||||
- m: multilínea
|
||||
|
||||
### Creación de un patrón con el constructor RegExp
|
||||
|
||||
Declarar una expresión regular sin bandera global y sin distinguir entre mayúsculas y minúsculas.
|
||||
|
||||
```js
|
||||
// sin bandera
|
||||
let pattern = "love";
|
||||
let regEx = new RegExp(pattern);
|
||||
```
|
||||
|
||||
Declarar una expresión regular con un indicador global y un indicador de insensibilidad a las mayúsculas y minúsculas.
|
||||
|
||||
```js
|
||||
let pattern = "love";
|
||||
let flag = "gi";
|
||||
let regEx = new RegExp(pattern, flag);
|
||||
```
|
||||
|
||||
Declarar un patrón regex usando el objeto RegExp. Escribir el patrón y la bandera dentro del constructor RegExp
|
||||
|
||||
```js
|
||||
let regEx = new RegExp("love", "gi");
|
||||
```
|
||||
|
||||
### Creación de un patrón sin el constructor RegExp
|
||||
|
||||
Declarar una expresión regular con un indicador global y un indicador de insensibilidad a las mayúsculas y minúsculas.
|
||||
|
||||
```js
|
||||
let regEx = /love/gi;
|
||||
```
|
||||
|
||||
La expresión regular anterior es la misma que creamos con el constructor RegExp
|
||||
|
||||
```js
|
||||
let regEx = new RegExp("love", "gi");
|
||||
```
|
||||
|
||||
### Métodos del objeto RegExp
|
||||
|
||||
Veamos algunos de los métodos RegExp
|
||||
|
||||
#### Pruebas de coincidencia
|
||||
|
||||
_test()_:Comprueba si hay una coincidencia en una cadena. Devuelve verdadero o falso.
|
||||
|
||||
```js
|
||||
const str = "I love JavaScript";
|
||||
const pattern = /love/;
|
||||
const result = pattern.test(str);
|
||||
console.log(result);
|
||||
```
|
||||
|
||||
```sh
|
||||
true
|
||||
```
|
||||
|
||||
#### Array que contiene todas las coincidencias
|
||||
|
||||
_match()_:Retorna un array que contiene todas las coincidencias, incluyendo los grupos de captura, o null si no se encuentra ninguna coincidencia.
|
||||
Si no utilizamos una bandera global, match() retorna un array que contiene el patrón, el índice, la entrada y el grupo.
|
||||
|
||||
```js
|
||||
const str = "I love JavaScript";
|
||||
const pattern = /love/;
|
||||
const result = str.match(pattern);
|
||||
console.log(result);
|
||||
```
|
||||
|
||||
```sh
|
||||
["love", index: 2, input: "I love JavaScript", groups: undefined]
|
||||
```
|
||||
|
||||
```js
|
||||
const str = "I love JavaScript";
|
||||
const pattern = /love/g;
|
||||
const result = str.match(pattern);
|
||||
console.log(result);
|
||||
```
|
||||
|
||||
```sh
|
||||
["love"]
|
||||
```
|
||||
|
||||
_search()_: Busca una coincidencia en una cadena. Devuelve el índice de la coincidencia, o -1 si la búsqueda falla.
|
||||
|
||||
```js
|
||||
const str = "I love JavaScript";
|
||||
const pattern = /love/g;
|
||||
const result = str.search(pattern);
|
||||
console.log(result);
|
||||
```
|
||||
|
||||
```sh
|
||||
2
|
||||
```
|
||||
|
||||
#### Sustitución de una subcadena
|
||||
|
||||
_replace()_: Ejecuta una búsqueda de una coincidencia en una cadena, y reemplaza la subcadena coincidente con una subcadena de reemplazo.
|
||||
|
||||
```js
|
||||
const txt =
|
||||
"Python es el lenguaje más bello que ha creado el ser humano.\
|
||||
Recomiendo python para un primer lenguaje de programación";
|
||||
|
||||
matchReplaced = txt.replace(/Python|python/, "JavaScript");
|
||||
console.log(matchReplaced);
|
||||
```
|
||||
|
||||
```sh
|
||||
JavaScript es el lenguaje más bello que ha creado el ser humano. Recomiendo python como primer lenguaje de programación
|
||||
```
|
||||
|
||||
```js
|
||||
const txt =
|
||||
"Python es el lenguaje más bello que ha creado el ser humano.\
|
||||
Recomiendo python para un primer lenguaje de programación";
|
||||
|
||||
matchReplaced = txt.replace(/Python|python/g, "JavaScript");
|
||||
console.log(matchReplaced);
|
||||
```
|
||||
|
||||
```sh
|
||||
JavaScript es el lenguaje más bello que ha creado el ser humano. Recomiendo JavaScript para un primer lenguaje de programación
|
||||
```
|
||||
|
||||
```js
|
||||
const txt =
|
||||
"Python es el lenguaje más bello que ha creado el ser humano.\
|
||||
Recomiendo python para un primer lenguaje de programación";
|
||||
|
||||
matchReplaced = txt.replace(/Python/gi, "JavaScript");
|
||||
console.log(matchReplaced);
|
||||
```
|
||||
|
||||
```sh
|
||||
JavaScript es el lenguaje más bello que ha creado el ser humano. Recomiendo JavaScript para un primer lenguaje de programación
|
||||
```
|
||||
|
||||
```js
|
||||
const txt =
|
||||
"%So%y p%r%%of%%es%or%a% y m%e %% enc%an%ta en%se%ña%r.\
|
||||
N%o h%a%y n%a%d%a mas g%r%at%if%icante q%ue e%d%uc%a%r y c%a%p%ac%i%ta%r %a l%a g%e%n%t%e.\
|
||||
L%a e%n%%señ%anza m%e %p%ar%ec%e ma%s% i%n%te%r%esa%nt%e que %cu%alq%uie%r %otro t%ra%ba%jo.\
|
||||
E%s%t%o te mo%ti%v%a a s%er p%ro%fe%sor.";
|
||||
|
||||
matches = txt.replace(/%/g, "");
|
||||
console.log(matches);
|
||||
```
|
||||
|
||||
```sh
|
||||
Soy profesora y me encanta enseñar. No hay nada más gratificante que educar y capacitar a la gente. La enseñanza me parece más interesante que cualquier otro trabajo. ¿Esto te motiva a ser profesor?
|
||||
```
|
||||
|
||||
- []: Un conjunto de caracteres
|
||||
- [a-c] significa, a o b o c
|
||||
- [a-z] significa, cualquier letra de la a a la z
|
||||
- [A-Z] significa, cualquier carácter de la A a la Z
|
||||
- [0-3] significa, 0 o 1 o 2 o 3
|
||||
- [0-9] significa cualquier número del 0 al 9
|
||||
- [A-Za-z0-9] cualquier carácter que sea de la a a la z, de la A a la Z, del 0 al 9
|
||||
- \\: utiliza para evadir caracteres especiales
|
||||
- \d significa: coincide cuando el string contiene dígitos (numeros del 0-9)
|
||||
- \D significa: coincide cuando el string no contiene dígitos
|
||||
- . : cualquier carácter excepto la nueva línea (\n)
|
||||
- ^: comienza con
|
||||
- r'^substring' eg r'^love', una frase que comienza con la palabra love
|
||||
- r'[^abc] significa no a, no b, no c.
|
||||
- $: termina con
|
||||
- r'substring$' eg r'love$', la frase termina con una palabra love
|
||||
- \*: cero o más veces
|
||||
- r'[a]\*' significa un opcional o puede ocurrir muchas veces.
|
||||
- +: una o más veces
|
||||
- r'[a]+' significa al menos una o más veces
|
||||
- ?: cero o una vez
|
||||
- r'[a]?' significa cero veces o una vez
|
||||
- \b: Buscador de palabras, coincide con el principio o el final de una palabra
|
||||
- {3}: Exactamente 3 caracteres
|
||||
- {3,}: Al menos 3 caracteres
|
||||
- {3,8}: De 3 a 8 caracteres
|
||||
- |: O bien
|
||||
- r'apple|banana' significa tanto una manzana como un plátano
|
||||
- (): Capturar y agrupar
|
||||
|
||||
|
||||
|
||||
Usemos un ejemplo para aclarar los metacaracteres anteriores
|
||||
|
||||
### Corchetes
|
||||
|
||||
Usemos el corchete para incluir las minúsculas y las mayúsculas
|
||||
|
||||
```js
|
||||
const pattern = "[Aa]pple"; // este corchete significa A o a
|
||||
const txt =
|
||||
"Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away. ";
|
||||
const matches = txt.match(pattern);
|
||||
|
||||
console.log(matches);
|
||||
```
|
||||
|
||||
```sh
|
||||
["Apple", index: 0, input: "Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away.", groups: undefined]
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const pattern = /[Aa]pple/g; // este corchete significa A o a
|
||||
const txt =
|
||||
"Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. ";
|
||||
const matches = txt.match(pattern);
|
||||
|
||||
console.log(matches);
|
||||
```
|
||||
|
||||
```sh
|
||||
["Apple", "apple"]
|
||||
```
|
||||
|
||||
Si queremos buscar la banana, escribimos el patrón de la siguiente manera:
|
||||
|
||||
```js
|
||||
const pattern = /[Aa]pple|[Bb]anana/g; // este corchete significa A o a
|
||||
const txt =
|
||||
"Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. Banana is easy to eat too.";
|
||||
const matches = txt.match(pattern);
|
||||
|
||||
console.log(matches);
|
||||
```
|
||||
|
||||
```sh
|
||||
["Apple", "banana", "apple", "banana", "Banana"]
|
||||
```
|
||||
|
||||
Utilizando el corchete y el operador or , conseguimos extraer Apple, apple, Banana y banana.
|
||||
|
||||
### Caracter Escape (\\) en RegExp
|
||||
|
||||
```js
|
||||
const pattern = /\d/g; // d es un carácter especial que significa dígitos
|
||||
const txt = "This regular expression example was made in January 12, 2020.";
|
||||
const matches = txt.match(pattern);
|
||||
|
||||
console.log(matches); // ["1", "2", "2", "0", "2", "0"], esto es lo que no queremos
|
||||
```
|
||||
|
||||
```js
|
||||
const pattern = /\d+/g; // d es un carácter especial que significa dígitos
|
||||
const txt = "This regular expression example was made in January 12, 2020.";
|
||||
const matches = txt.match(pattern);
|
||||
|
||||
console.log(matches); // ["12", "2020"], esto es lo que no queremos
|
||||
```
|
||||
|
||||
### Una o más veces(+)
|
||||
|
||||
```js
|
||||
const pattern = /\d+/g; // d es un carácter especial que significa dígitos
|
||||
const txt = "This regular expression example was made in January 12, 2020.";
|
||||
const matches = txt.match(pattern);
|
||||
console.log(matches); // ["12", "2020"], esto es lo que no queremos
|
||||
```
|
||||
|
||||
### Punto(.)
|
||||
|
||||
```js
|
||||
const pattern = /[a]./g; // este corchete significa a y . significa cualquier carácter excepto nueva línea
|
||||
const txt = "Apple and banana are fruits";
|
||||
const matches = txt.match(pattern);
|
||||
|
||||
console.log(matches); // ["an", "an", "an", "a ", "ar"]
|
||||
```
|
||||
|
||||
```js
|
||||
const pattern = /[a].+/g; // . cualquier carácter, + cualquier carácter una o más veces
|
||||
const txt = "Apple and banana are fruits";
|
||||
const matches = txt.match(pattern);
|
||||
|
||||
console.log(matches); // ['and banana are fruits']
|
||||
```
|
||||
|
||||
### Cero o más veces(\*)
|
||||
|
||||
Cero o muchas veces. El patrón puede no ocurrir o puede ocurrir muchas veces.
|
||||
|
||||
```js
|
||||
const pattern = /[a].*/g; //. cualquier carácter, + cualquier carácter una o más veces
|
||||
const txt = "Apple and banana are fruits";
|
||||
const matches = txt.match(pattern);
|
||||
|
||||
console.log(matches); // ['and banana are fruits']
|
||||
```
|
||||
|
||||
### Cero o una vez (?)
|
||||
|
||||
Cero o una vez. El patrón puede no ocurrir o puede ocurrir una vez.
|
||||
|
||||
```js
|
||||
const txt =
|
||||
"I am not sure if there is a convention how to write the word e-mail.\
|
||||
Some people write it email others may write it as Email or E-mail.";
|
||||
const pattern = /[Ee]-?mail/g; // ? significa que es opcional
|
||||
matches = txt.match(pattern);
|
||||
|
||||
console.log(matches); // ["e-mail", "email", "Email", "E-mail"]
|
||||
```
|
||||
|
||||
### Cuantificador en RegExp
|
||||
|
||||
Podemos especificar la longitud de la subcadena que buscamos en un texto, utilizando una llave. Veamos cómo utilizar los cuantificadores RegExp. Imaginemos que estamos interesados en una subcadena cuya longitud es de 4 caracteres
|
||||
|
||||
```js
|
||||
const txt = "This regular expression example was made in December 6, 2019.";
|
||||
const pattern = /\\b\w{4}\b/g; // palabras de cuatro caracteres exactamente
|
||||
const matches = txt.match(pattern);
|
||||
console.log(matches); //['This', 'made', '2019']
|
||||
```
|
||||
|
||||
```js
|
||||
const txt = "This regular expression example was made in December 6, 2019.";
|
||||
const pattern = /\b[a-zA-Z]{4}\b/g; // palabras de cuatro caracteres exactos sin números
|
||||
const matches = txt.match(pattern);
|
||||
console.log(matches); //['This', 'made']
|
||||
```
|
||||
|
||||
```js
|
||||
const txt = "This regular expression example was made in December 6, 2019.";
|
||||
const pattern = /\d{4}/g; // un número y exactamente cuatro dígitos
|
||||
const matches = txt.match(pattern);
|
||||
console.log(matches); // ['2019']
|
||||
```
|
||||
|
||||
```js
|
||||
const txt = "This regular expression example was made in December 6, 2019.";
|
||||
const pattern = /\d{1,4}/g; // 1 to 4
|
||||
const matches = txt.match(pattern);
|
||||
console.log(matches); // ['6', '2019']
|
||||
```
|
||||
|
||||
### Caret ^
|
||||
|
||||
- Comienza con
|
||||
|
||||
```js
|
||||
const txt = "This regular expression example was made in December 6, 2019.";
|
||||
const pattern = /^This/; // ^ significa que comienza con
|
||||
const matches = txt.match(pattern);
|
||||
console.log(matches); // ['This']
|
||||
```
|
||||
|
||||
- Negación
|
||||
|
||||
```js
|
||||
const txt = "This regular expression example was made in December 6, 2019.";
|
||||
const pattern = /[^A-Za-z,. ]+/g; // ^ en un conjunto de caracteres significa negación, no de la A a la Z, no de la a a la z, sin espacio, sin coma y sin punto
|
||||
const matches = txt.match(pattern);
|
||||
console.log(matches); // ["6", "2019"]
|
||||
```
|
||||
|
||||
### Coincidencia exacta
|
||||
|
||||
Debe tener ^ que empieza y $ que es el final.
|
||||
|
||||
```js
|
||||
let pattern = /^[A-Z][a-z]{3,12}$/;
|
||||
let name = "Asabeneh";
|
||||
let result = pattern.test(name);
|
||||
|
||||
console.log(result); // true
|
||||
```
|
||||
|
||||
🌕 Estás llegando lejos. Sigue avanzando. Ahora, estás súper cargado con el poder de la expresión regular. Tienes el poder de extraer y limpiar cualquier tipo de texto y puedes dar sentido a los datos no estructurados. Acabas de completar los retos del día 12 y llevas 12 pasos de tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
|
||||
|
||||
## 💻 Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Calcula los ingresos anuales totales de la persona a partir del siguiente texto. 'Gana 4000 euros de sueldo al mes, 10000 euros de bonificación anual, 5500 euros de cursos online al mes'.
|
||||
1. La posición de algunas partículas en el eje horizontal x -12, -4, -3 y -1 en la dirección negativa, 0 en el origen, 4 y 8 en la dirección positiva. Extrae estos números y encuentra la distancia entre las dos partes más lejanas.
|
||||
|
||||
```js
|
||||
points = ["-1", "2", "-4", "-3", "-1", "0", "4", "8"];
|
||||
sortedPoints = [-4, -3, -1, -1, 0, 2, 4, 8];
|
||||
distance = 12;
|
||||
```
|
||||
|
||||
1. Escribir un patrón que identifique si una cadena es una variable JavaScript válida
|
||||
|
||||
```sh
|
||||
is_valid_variable('first_name') # True
|
||||
is_valid_variable('first-name') # False
|
||||
is_valid_variable('1first_name') # False
|
||||
is_valid_variable('firstname') # True
|
||||
```
|
||||
|
||||
### Ejercicios: Nivel 2
|
||||
|
||||
1. Escriba una función llamada _tenMostFrequentWords_ que obtenga las diez palabras más frecuentes de una cadena?
|
||||
|
||||
```js
|
||||
paragraph = `I love teaching. If you do not love teaching what else can you love. I love Python if you do not love something which can give you all the capabilities to develop an application what else can you love.`;
|
||||
console.log(tenMostFrequentWords(paragraph));
|
||||
```
|
||||
|
||||
```sh
|
||||
[
|
||||
{word:'love', count:6},
|
||||
{word:'you', count:5},
|
||||
{word:'can', count:3},
|
||||
{word:'what', count:2},
|
||||
{word:'teaching', count:2},
|
||||
{word:'not', count:2},
|
||||
{word:'else', count:2},
|
||||
{word:'do', count:2},
|
||||
{word:'I', count:2},
|
||||
{word:'which', count:1},
|
||||
{word:'to', count:1},
|
||||
{word:'the', count:1},
|
||||
{word:'something', count:1},
|
||||
{word:'if', count:1},
|
||||
{word:'give', count:1},
|
||||
{word:'develop',count:1},
|
||||
{word:'capabilities',count:1},
|
||||
{word:'application', count:1},
|
||||
{word:'an',count:1},
|
||||
{word:'all',count:1},
|
||||
{word:'Python',count:1},
|
||||
{word:'If',count:1}]
|
||||
```
|
||||
|
||||
```js
|
||||
console.log(tenMostFrequentWords(paragraph, 10));
|
||||
```
|
||||
|
||||
```sh
|
||||
[{word:'love', count:6},
|
||||
{word:'you', count:5},
|
||||
{word:'can', count:3},
|
||||
{word:'what', count:2},
|
||||
{word:'teaching', count:2},
|
||||
{word:'not', count:2},
|
||||
{word:'else', count:2},
|
||||
{word:'do', count:2},
|
||||
{word:'I', count:2},
|
||||
{word:'which', count:1}
|
||||
]
|
||||
```
|
||||
|
||||
### Ejercicios: Nivel 3
|
||||
|
||||
1. Escribe una función que limpie el texto. Limpia el siguiente texto. Después de la limpieza, cuente tres palabras más frecuentes en la cadena.
|
||||
|
||||
```js
|
||||
sentence = `%I $am@% a %tea@cher%, &and& I lo%#ve %tea@ching%;. There $is nothing; &as& mo@re rewarding as educa@ting &and& @emp%o@wering peo@ple. ;I found tea@ching m%o@re interesting tha@n any other %jo@bs. %Do@es thi%s mo@tivate yo@u to be a tea@cher!?`;
|
||||
console.log(cleanText(sentence));
|
||||
```
|
||||
|
||||
````sh
|
||||
I am a teacher and I love teaching There is nothing as more rewarding as educating and empowering people I found teaching more interesting than any other jobs Does this motivate you to be a teacher
|
||||
```
|
||||
2. Escriba una función que encuentre las palabras más frecuentes. Después de la limpieza, cuente tres palabras más frecuentes en la cadena.
|
||||
|
||||
```js
|
||||
console.log(mostFrequentWords(cleanedText))
|
||||
[{word:'I', count:3}, {word:'teaching', count:2}, {word:'teacher', count:2}]
|
||||
````
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 11](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) | [Día 13 >>](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md)
|
||||
@ -0,0 +1,358 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Métodos del Objeto Console</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 12](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md) | [Día 14>>](../dia_14_Manejo_de_Errores/dia_14_manejo_de_errores.md)
|
||||
|
||||
|
||||
|
||||
- [Día 13](#día-13)
|
||||
- [Métodos del Objeto Console](#métodos-del-objeto-console)
|
||||
- [console.log()](#consolelog)
|
||||
- [console.warn()](#consolewarn)
|
||||
- [console.error()](#consoleerror)
|
||||
- [console.table()](#consoletable)
|
||||
- [console.time()](#consoletime)
|
||||
- [console.info()](#consoleinfo)
|
||||
- [console.assert()](#consoleassert)
|
||||
- [console.group()](#consolegroup)
|
||||
- [console.count()](#consolecount)
|
||||
- [console.clear()](#consoleclear)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios:Nivel 1](#ejerciciosnivel-1)
|
||||
- [Ejercicios:Nivel 2](#ejerciciosnivel-2)
|
||||
- [Ejercicios:Nivel 3](#ejerciciosnivel-3)
|
||||
|
||||
# Día 13
|
||||
|
||||
## Métodos del Objeto Console
|
||||
|
||||
En esta sección, trataremos sobre console y los métodos de los objetos console. Los principiantes generalmente no saben cuál usar: console.log(), document.write() o document.getElementById.
|
||||
|
||||
Usamos métodos de objetos console para mostrar la salida en la consola del navegador y usamos document.write para mostrar la salida en el documento del navegador (view port). Ambos métodos se utilizan únicamente con fines de prueba y depuración. El método console es la herramienta de prueba y depuración más popular en el navegador. Usamos document.getElementById() cuando queremos interactuar con el DOM usando JavaScript. Trataremos el tema del DOM en otra sección.
|
||||
|
||||
Además del famoso método console.log(), console proporciona otros métodos más.
|
||||
|
||||
### console.log()
|
||||
|
||||
Usamos console.log() para mostrar la salida en la consola del navegador. Podemos sustituir valores y también podemos estilizar la salida del registro usando %c.
|
||||
|
||||
- Mostrando la salida en la consola del navegador
|
||||
|
||||
```js
|
||||
console.log("30 Days of JavaScript");
|
||||
```
|
||||
|
||||
```sh
|
||||
30 Days of JavaScript
|
||||
```
|
||||
|
||||
- Sustitución
|
||||
|
||||
```js
|
||||
console.log("%d %s of JavaScript", 30, "Days");
|
||||
```
|
||||
|
||||
```sh
|
||||
30 Days of JavaScript
|
||||
```
|
||||
|
||||
- CSS
|
||||
|
||||
Podemos darle estilo al mensaje de registro usando css. Copia el siguiente código y pégalo en la consola del navegador para ver el resultado.
|
||||
|
||||
```js
|
||||
console.log("%c30 Days Of JavaScript", "color:green"); // la salida del registro es verde
|
||||
console.log(
|
||||
"%c30 Days%c %cOf%c %cJavaScript%c",
|
||||
"color:green",
|
||||
"",
|
||||
"color:red",
|
||||
"",
|
||||
"color:yellow"
|
||||
); // salida del registro texto verde rojo y amarillo
|
||||
```
|
||||
|
||||
### console.warn()
|
||||
|
||||
Usamos console.warn() para dar avisos en el navegador. Por ejemplo para informar o avisar de la depreciación de la versión de un paquete o de malas prácticas. Copia el siguiente código y pégalo en la consola del navegador para ver los mensajes de advertencia.
|
||||
|
||||
```js
|
||||
console.warn("This is a warning");
|
||||
console.warn(
|
||||
"You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!"
|
||||
);
|
||||
console.warn("Warning is different from error");
|
||||
```
|
||||
|
||||
### console.error()
|
||||
|
||||
El método console.error() muestra un mensaje de error.
|
||||
|
||||
```js
|
||||
console.error("This is an error message");
|
||||
console.error("We all make mistakes");
|
||||
```
|
||||
|
||||
### console.table()
|
||||
|
||||
El método console.table() muestra los datos como una tabla en la consola. Muestra los datos en forma de tabla. El método console.table() toma un argumento requerido data, que debe ser un array o un objeto, y un parámetro adicional opcional columns.
|
||||
|
||||
Empecemos con un simple array. El código siguiente muestra una tabla con dos columnas. Una columna índice para mostrar el índice y una columna valor para mostrar los nombres
|
||||
|
||||
```js
|
||||
const names = ["Asabeneh", "Brook", "David", "John"];
|
||||
console.table(names);
|
||||
```
|
||||
|
||||
Comprobemos también el resultado de un objeto. Esto crea una tabla con dos columnas: una columna índice que contiene las claves y una columna valor que contiene los valores del objeto.
|
||||
|
||||
```js
|
||||
const user = {
|
||||
name: "Asabeneh",
|
||||
title: "Programmer",
|
||||
country: "Finland",
|
||||
city: "Helsinki",
|
||||
age: 250,
|
||||
};
|
||||
console.table(user);
|
||||
```
|
||||
|
||||
Comprueba el resto de los ejemplos copiando y pegando en la consola del navegador.
|
||||
|
||||
```js
|
||||
const countries = [
|
||||
["Finland", "Helsinki"],
|
||||
["Sweden", "Stockholm"],
|
||||
["Norway", "Oslo"],
|
||||
];
|
||||
console.table(countries);
|
||||
```
|
||||
|
||||
```js
|
||||
const users = [
|
||||
{
|
||||
name: "Asabeneh",
|
||||
title: "Programmer",
|
||||
country: "Finland",
|
||||
city: "Helsinki",
|
||||
age: 250,
|
||||
},
|
||||
{
|
||||
name: "Eyob",
|
||||
title: "Teacher",
|
||||
country: "Sweden",
|
||||
city: "London",
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: "Asab",
|
||||
title: "Instructor",
|
||||
country: "Norway",
|
||||
city: "Oslo",
|
||||
age: 22,
|
||||
},
|
||||
{
|
||||
name: "Matias",
|
||||
title: "Developer",
|
||||
country: "Denmark",
|
||||
city: "Copenhagen",
|
||||
age: 28,
|
||||
},
|
||||
];
|
||||
console.table(users);
|
||||
```
|
||||
|
||||
### console.time()
|
||||
|
||||
Inicia un temporizador que se puede utilizar para controlar el tiempo que dura una operación. Puedes dar a cada temporizador un nombre único, y puedes tener hasta 10.000 temporizadores funcionando en una página determinada. Cuando llame a console.timeEnd() con el mismo nombre, el navegador mostrará el tiempo, en milisegundos, que ha transcurrido desde que se inició el temporizador.
|
||||
|
||||
```js
|
||||
const countries = [
|
||||
["Finland", "Helsinki"],
|
||||
["Sweden", "Stockholm"],
|
||||
["Norway", "Oslo"],
|
||||
];
|
||||
|
||||
console.time("Regular for loop");
|
||||
for (let i = 0; i < countries.length; i++) {
|
||||
console.log(countries[i][0], countries[i][1]);
|
||||
}
|
||||
console.timeEnd("Regular for loop");
|
||||
|
||||
console.time("for of loop");
|
||||
for (const [name, city] of countries) {
|
||||
console.log(name, city);
|
||||
}
|
||||
console.timeEnd("for of loop");
|
||||
|
||||
console.time("forEach loop");
|
||||
countries.forEach(([name, city]) => {
|
||||
console.log(name, city);
|
||||
});
|
||||
console.timeEnd("forEach loop");
|
||||
```
|
||||
|
||||
```sh
|
||||
Finland Helsinki
|
||||
Sweden Stockholm
|
||||
Norway Oslo
|
||||
Regular for loop: 0.34716796875ms
|
||||
Finland Helsinki
|
||||
Sweden Stockholm
|
||||
Norway Oslo
|
||||
for of loop: 0.26806640625ms
|
||||
Finland Helsinki
|
||||
Sweden Stockholm
|
||||
Norway Oslo
|
||||
forEach loop: 0.358154296875ms
|
||||
```
|
||||
|
||||
De acuerdo con la salida anterior, el bucle for regular es más lento que el bucle for of o forEach.
|
||||
|
||||
### console.info()
|
||||
|
||||
Muestra un mensaje de información en la consola del navegador.
|
||||
|
||||
```js
|
||||
console.info("30 Days Of JavaScript challenge is trending on Github");
|
||||
console.info("30 Days Of fullStack challenge might be released");
|
||||
console.info("30 Days Of HTML and CSS challenge might be released");
|
||||
```
|
||||
|
||||
### console.assert()
|
||||
|
||||
El método console.assert() escribe un mensaje de error en la consola si la afirmación es falsa. Si la afirmación es verdadera, no pasa nada. El primer parámetro es una expresión de aserción. Si esta expresión es falsa, se mostrará un mensaje de error de aserción fallida.
|
||||
|
||||
```js
|
||||
console.assert(4 > 3, "4 is greater than 3"); // no hay resultado
|
||||
console.assert(3 > 4, "3 is not greater than 4"); // Aserción fallida: 3 no es mayor que 4
|
||||
|
||||
for (let i = 0; i <= 10; i += 1) {
|
||||
let errorMessage = `${i} is not even`;
|
||||
console.log("the # is " + i);
|
||||
console.assert(i % 2 === 0, { number: i, errorMessage: errorMessage });
|
||||
}
|
||||
```
|
||||
|
||||
### console.group()
|
||||
|
||||
El console.group() puede ayudar a agrupar diferentes grupos de registro. Copie el siguiente código y péguelo en la consola del navegador para los grupos.
|
||||
|
||||
```js
|
||||
const names = ["Asabeneh", "Brook", "David", "John"];
|
||||
const countries = [
|
||||
["Finland", "Helsinki"],
|
||||
["Sweden", "Stockholm"],
|
||||
["Norway", "Oslo"],
|
||||
];
|
||||
const user = {
|
||||
name: "Asabeneh",
|
||||
title: "Programmer",
|
||||
country: "Finland",
|
||||
city: "Helsinki",
|
||||
age: 250,
|
||||
};
|
||||
const users = [
|
||||
{
|
||||
name: "Asabeneh",
|
||||
title: "Programmer",
|
||||
country: "Finland",
|
||||
city: "Helsinki",
|
||||
age: 250,
|
||||
},
|
||||
{
|
||||
name: "Eyob",
|
||||
title: "Teacher",
|
||||
country: "Sweden",
|
||||
city: "London",
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: "Asab",
|
||||
title: "Instructor",
|
||||
country: "Norway",
|
||||
city: "Oslo",
|
||||
age: 22,
|
||||
},
|
||||
{
|
||||
name: "Matias",
|
||||
title: "Developer",
|
||||
country: "Denmark",
|
||||
city: "Copenhagen",
|
||||
age: 28,
|
||||
},
|
||||
];
|
||||
|
||||
console.group("Names");
|
||||
console.log(names);
|
||||
console.groupEnd();
|
||||
|
||||
console.group("Countries");
|
||||
console.log(countries);
|
||||
console.groupEnd();
|
||||
|
||||
console.group("Users");
|
||||
console.log(user);
|
||||
console.log(users);
|
||||
console.groupEnd();
|
||||
```
|
||||
|
||||
### console.count()
|
||||
|
||||
Imprime el número de veces que se llama a console.count(). Toma un parámetro de etiqueta de cadena. Es muy útil para contar el número de veces que se llama a una función. En el siguiente ejemplo, el método console.count() se ejecutará tres veces
|
||||
|
||||
```js
|
||||
const func = () => {
|
||||
console.count("Function has been called");
|
||||
};
|
||||
func();
|
||||
func();
|
||||
func();
|
||||
```
|
||||
|
||||
```sh
|
||||
Function has been called: 1
|
||||
Function has been called: 2
|
||||
Function has been called: 3
|
||||
```
|
||||
|
||||
### console.clear()
|
||||
|
||||
El console.clear() limpia la consola del navegador.
|
||||
|
||||
🌕 Sigue con el buen trabajo. Sigue esforzándote, ¡el cielo es el límite! Acabas de completar el día 13 de desafíos y llevas 13 pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios:Nivel 1
|
||||
|
||||
1. Mostrar la matriz de países como una tabla
|
||||
2. Mostrar el objeto países como una tabla
|
||||
3. Utilice console.group() para agrupar los registros
|
||||
|
||||
### Ejercicios:Nivel 2
|
||||
|
||||
1. 10 > 2 \* 10 use console.assert()
|
||||
2. Escribe un mensaje de advertencia utilizando console.warn()
|
||||
3. Escribe un mensaje de error utilizando console.error()
|
||||
|
||||
### Ejercicios:Nivel 3
|
||||
|
||||
1. Comprueba la diferencia de velocidad entre los siguientes bucles: while, for, for of, forEach
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 12](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md) | [Día 14>>](../dia_14_Manejo_de_Errores/dia_14_manejo_de_errores.md)
|
||||
@ -0,0 +1,193 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Manejo de Errores</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 13](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md) | [Día 15>>](..)
|
||||
|
||||
|
||||
|
||||
- [Día 14](#día-14)
|
||||
- [Manejo de Errores](#manejo-de-errores)
|
||||
- [Tipo de Error](#tipo-de-error)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios:Nivel 1](#ejerciciosnivel-1)
|
||||
- [Ejercicios: Nivel 2](#ejerciciosnivel-2)
|
||||
- [Ejercicios:Nivel 3](#ejerciciosnivel-3)
|
||||
|
||||
# Día 14
|
||||
|
||||
## Manejo de Errores
|
||||
|
||||
JavaScript es un lenguaje de tipado libre. Algunas veces obtendrá un error en tiempo de ejecución cuando intente acceder a una variable no definida o llamar a una función no definida, etc.
|
||||
|
||||
JavaScript, al igual que python o Java, proporciona un mecanismo de gestión de errores para capturar los errores en tiempo de ejecución mediante el bloque try-catch-finally.
|
||||
|
||||
```js
|
||||
try {
|
||||
// código que puede arrojar un error
|
||||
} catch (err) {
|
||||
// código a ejecutar si se produce un error
|
||||
} finally {
|
||||
// código que se ejecutará independientemente de que se produzca un error o no
|
||||
}
|
||||
```
|
||||
|
||||
**try**: envuelve el código sospechoso que puede arrojar un error en un bloque try. La sentencia try nos permite definir un bloque de código para que se compruebe si hay errores mientras se ejecuta.
|
||||
|
||||
**catch**: escribe código para hacer algo en el bloque catch cuando se produce un error. El bloque catch puede tener parámetros que le darán información sobre el error. El bloque Catch se utiliza para registrar un error o mostrar mensajes específicos al usuario.
|
||||
|
||||
**finally**: El bloque finally se ejecutará siempre, independientemente de que se produzca un error. El bloque finally puede utilizarse para completar la tarea restante o para restablecer las variables que puedan haber cambiado antes de que se produzca el error en el bloque try.
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
try {
|
||||
let lastName = "Yetayeh";
|
||||
let fullName = fistName + " " + lastName;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
```
|
||||
|
||||
```sh
|
||||
ReferenceError: fistName no está definido
|
||||
at <anonymous>:4:20
|
||||
```
|
||||
|
||||
```js
|
||||
try {
|
||||
let lastName = "Yetayeh";
|
||||
let fullName = fistName + " " + lastName;
|
||||
} catch (err) {
|
||||
console.error(err); // podemos utilizar console.log() o console.error()
|
||||
} finally {
|
||||
console.log("In any case I will be executed");
|
||||
}
|
||||
```
|
||||
|
||||
```sh
|
||||
ReferenceError: fistName no está definido
|
||||
at <anonymous>:4:20
|
||||
En cualquier caso se ejecutará
|
||||
```
|
||||
|
||||
El bloque de captura toma un parámetro. Es habitual pasar e, err o error como parámetro al bloque catch. Este parámetro es un objeto y tiene las claves nombre y mensaje. Utilicemos el nombre y el mensaje.
|
||||
|
||||
```js
|
||||
try {
|
||||
let lastName = "Yetayeh";
|
||||
let fullName = fistName + " " + lastName;
|
||||
} catch (err) {
|
||||
console.log("Name of the error", err.name);
|
||||
console.log("Error message", err.message);
|
||||
} finally {
|
||||
console.log("In any case I will be executed");
|
||||
}
|
||||
```
|
||||
|
||||
```sh
|
||||
Name of the error ReferenceError
|
||||
Error message fistName is not defined
|
||||
In any case I will be executed
|
||||
```
|
||||
|
||||
throw: la sentencia throw nos permite crear un error personalizado. Podemos pasar una cadena, un número, un booleano o un objeto. Utilice la sentencia throw para lanzar una excepción. Cuando se lanza una excepción, la expresión especifica el valor de la excepción. Cada una de las siguientes acciones lanza una excepción:
|
||||
|
||||
```js
|
||||
throw "Error2"; // genera una excepción con un valor de cadena
|
||||
throw 42; // genera una excepción con el valor 42
|
||||
throw true; // genera una excepción con el valor true
|
||||
throw new Error("Required"); // genera un objeto de error con el mensaje de Requerido
|
||||
```
|
||||
|
||||
```js
|
||||
const throwErrorExampleFun = () => {
|
||||
let message;
|
||||
let x = prompt("Enter a number: ");
|
||||
try {
|
||||
if (x == "") throw "empty";
|
||||
if (isNaN(x)) throw "not a number";
|
||||
x = Number(x);
|
||||
if (x < 5) throw "too low";
|
||||
if (x > 10) throw "too high";
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
throwErrorExampleFun();
|
||||
```
|
||||
|
||||
### Tipo de Error
|
||||
|
||||
- ReferenceError: Se ha producido una referencia ilegal. Se lanza un ReferenceError si utilizamos una variable que no ha sido declarada.
|
||||
|
||||
```js
|
||||
let firstName = "Asabeneh";
|
||||
let fullName = firstName + " " + lastName;
|
||||
|
||||
console.log(fullName);
|
||||
```
|
||||
|
||||
```sh
|
||||
Uncaught ReferenceError: lastName is not defined
|
||||
at <anonymous>:2:35
|
||||
```
|
||||
|
||||
- SyntaxError: Se ha producido un error de sintaxis
|
||||
|
||||
```js
|
||||
let square = 2 x 2
|
||||
console.log(square)
|
||||
|
||||
console.log('Hello, world")
|
||||
```
|
||||
|
||||
```sh
|
||||
Uncaught SyntaxError: Unexpected identifier
|
||||
```
|
||||
|
||||
- TypeError: Se ha producido un error sobre el tipo
|
||||
|
||||
```js
|
||||
let num = 10;
|
||||
console.log(num.toLowerCase());
|
||||
```
|
||||
|
||||
```sh
|
||||
Uncaught TypeError: num.toLowerCase is not a function
|
||||
at <anonymous>:2:17
|
||||
```
|
||||
|
||||
Estos son algunos de los errores más comunes a los que te puedes enfrentar cuando escribes un código. Entender los errores puede ayudarte a saber qué errores has cometido y te ayudará a depurar tu código rápidamente.
|
||||
|
||||
🌕 Usted es impecable. Ahora, sabes cómo manejar los errores y puedes escribir una aplicación robusta que maneje entradas inesperadas del usuario. Acabas de completar los desafíos del día 14 y llevas 14 pasos en tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios:Nivel 1
|
||||
|
||||
Practica
|
||||
|
||||
### Ejercicios:Nivel 2
|
||||
|
||||
Practica
|
||||
|
||||
### Ejercicios:Nivel 3
|
||||
|
||||
Practica
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 13](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md) | [Día 15>>](..)
|
||||
Loading…
Reference in new issue