├── JavaScript-Intermedio
    ├── 1.Objetos
    │   ├── date.js
    │   ├── ejercicio.date.js
    │   ├── ejercicio.js
    │   ├── ejercicio.math.js
    │   ├── math.js
    │   └── objetos.js
    ├── 2.Array
    │   ├── array.js
    │   ├── bucles.js
    │   └── ejercicio.js
    ├── 3.Dom
    │   ├── Dom.html
    │   └── ejercicio.html
    ├── 4.eventos
    │   ├── ejericio.html
    │   └── eventos.html
    └── 5.Expresiones-regulares
    │   └── expresiones_regulares.html
├── LICENSE
└── README.md


/JavaScript-Intermedio/1.Objetos/date.js:
--------------------------------------------------------------------------------
1 | //toma la fecha actual de nuestro sistema con new date
2 | var date =new date();
3 | 
4 | //obtenemos la fecha actual con horas min y segundos
5 | console.log(date)
6 | 
7 | 
8 | 
9 | 


--------------------------------------------------------------------------------
/JavaScript-Intermedio/1.Objetos/ejercicio.date.js:
--------------------------------------------------------------------------------
 1 | /*Se pide un ejercicio que imprima un mensaje con la fecha
 2 | de hoy con el siguiente formato
 3 | Hola, hoy es XX del mes XXXX del año YYYY
 4 | */
 5 | 
 6 | var year = date.getFullYear();
 7 | var month = date.getMonth();
 8 | var day = date.getDate();
 9 | 
10 | console.log("Hola Hoy es " + day + "del mes " + month + "del año" + year)


--------------------------------------------------------------------------------
/JavaScript-Intermedio/1.Objetos/ejercicio.js:
--------------------------------------------------------------------------------
 1 | /*Imaginemos que vamos a desarrollar un juego, y 
 2 | debemos crear un objeto Jugador que tenga una propiedad fuerza
 3 | que incialmente tenga el valor 1, un metodo incrementarFuerza que 
 4 | nos permita incrementar en 1 la fuerza del jugador y un metodo 
 5 | consultarFuerza que nos muestre un mensaje con la fuerza 
 6 | del jugador 
 7 | */
 8 | 
 9 | var Jugador = {
10 |     fuerza : 1,
11 |     incrementarFuerza: function(){
12 |         //this.fuerza += 1; //sumar +1 a fuerza
13 |         this.fuerza = this.fuerza +1;
14 |     },
15 |     consultarFuerza: function(){
16 |         console.log("la fuerza del jugador es: " + this.fuerza)
17 | 
18 |     }
19 | }
20 | 
21 | Jugador.consultarFuerza(); //para ver la fuerza inicial
22 | Jugador.incrementarFuerza() //para incrementar la fuerza
23 | Jugador.consultarFuerza() //la fuerza valdra 2


--------------------------------------------------------------------------------
/JavaScript-Intermedio/1.Objetos/ejercicio.math.js:
--------------------------------------------------------------------------------
 1 | /*Escribir una funcion que reciba un numero como parametro 
 2 | y devuelva un numero aleatorio entre cero y el numero del parametro
 3 | ejemoplo: CalcularAleatorio(10) ->devuelve un numero aleatorio
 4 | entre 0 y 10
 5 | */
 6 | 
 7 | var aleatorio = Math.random()
 8 | 
 9 | function generarNumero (numeroMaximo){
10 |     return Math.round(Math.random() * numeroMaximo);
11 | }
12 | 
13 | //console.log(generarNumnero(100));
14 | console.log(generarNumnero(10));
15 | 
16 | 


--------------------------------------------------------------------------------
/JavaScript-Intermedio/1.Objetos/math.js:
--------------------------------------------------------------------------------
 1 | //libreria para hacer ciertos calculos con numeros
 2 | 
 3 | //para obtener el valor de Pi (constante)
 4 | var pi = Math.PI;
 5 | console.log(pi);
 6 | 
 7 | //para obtener el minimo
 8 | console.log(Math.min(1,2,4,5,6,7,789,-9,-45))
 9 | console.log(Math.max(1,2,4,5,6,7,789,-9,-45))
10 | 
11 | //para redondear numeros (metodo)
12 | console.log(Math.round(4.5)) //redondea hacia arriba
13 | console.log(mat.round(4.4))///redondea a la baja
14 | console.log(Math.floor(4.8))//con floor se redondea a la baja
15 | console.log(Math.ceil(4.1))//redondea a la alta 5
16 | 
17 | //permite generar numeros aleatorios
18 | var aleatorio = Math.random()
19 | console.log(aleatorio) //genera numeros entre 0 y 1    
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/JavaScript-Intermedio/1.Objetos/objetos.js:
--------------------------------------------------------------------------------
 1 | var persona = {
 2 |     nombre : 'Jhon',
 3 |     edad : 30,
 4 |     saludar: function (){
 5 |         console.log('Hola')
 6 |         console.log(this.nombre) //acceder al atributo dentro del objeto
 7 |         console.log("Hola " + this.nombre) //imprime hola Jhon
 8 |     }
 9 | }
10 | 
11 | console.log(persona) //imprime el objeto
12 | console.log(persona.nombre) //imprime Jhon
13 | console.log(persona.saludar) //imprime funcion te indica que es una funcion
14 | console.log(persona.saludar()) //imprime los valores de la funcion
15 | persona.saludar(); //imprime el hola de nuestra funcion 


--------------------------------------------------------------------------------
/JavaScript-Intermedio/2.Array/array.js:
--------------------------------------------------------------------------------
 1 | var colores = ["verde", "azul", "rojo"];
 2 | 
 3 | console.log(colores); //imrpime todo 
 4 | console.log(colores[1]) //imprime el azul
 5 | console.log(colores[0]) //imprime el verde
 6 | console.log(colores[2]) //imprime el rojo
 7 | console.log(colores[3]) //error undefined
 8 | 
 9 | 
10 | //agregar nuevo elementos (push) un nuevo color con el metodo push()
11 | colores.push("negro")
12 | 
13 | console.log(colores);
14 | console.log(colores[3]) //ahora tiene el valor de negro
15 | 


--------------------------------------------------------------------------------
/JavaScript-Intermedio/2.Array/bucles.js:
--------------------------------------------------------------------------------
1 | var colores = ["verde","negro","azul"];
2 | 
3 | //bucle for (inicializacion; condicion a cumplir 
4 | //(en array poner .lenght); incremento o decremento) i+=1
5 | for(var i = 0; i <= colores.length; i++ ){
6 |     //todo nuestro codigo
7 |     //console.log(i) -> muestra 0,1,2
8 |     console.log(colores[1]) //muestra todos los colores
9 | }


--------------------------------------------------------------------------------
/JavaScript-Intermedio/2.Array/ejercicio.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Ejercicios de array
 3 | 1.Muestra los numeros pares del siguiente array 
 4 | [0,1,2,3,4,5,6,7,8,9,10,11,12]
 5 | 
 6 | 2. Suma todos los numeros del array 
 7 | [º,1,2,3,4,5,6,7,8,9,10,11,12]
 8 | */
 9 | 
10 | var num = [0,1,2,3,4,5,6,7,8,9,10,11,12]
11 | for (var i = 0; i <= num.length; i+=1){
12 |     if (i % 2 == 0){
13 |         console.log(i)
14 |     }
15 | }
16 | 
17 | var numero = [0,1,2,3,4,5,6,7,8,9,10,11,12]
18 | var total = 0;
19 | for (var i = 0; i < numero.length; i+=1){
20 |     total += numero[i];
21 | }
22 | console.log("El total es: " + total);


--------------------------------------------------------------------------------
/JavaScript-Intermedio/3.Dom/Dom.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>Clase # 2 sobre DOM</title>
 4 |         <style>
 5 |             #mi_id_de_prueba{
 6 |                 color: red;
 7 |             }
 8 |         </style>
 9 |     </head>
10 |     <body>
11 |         <p id="parrafo">Mi primera clase practica de DOM</p>
12 |         <script type="text/javascript">
13 |             //te busca por id
14 |             var parrafo =document.getElementById("parrafo")
15 |             //te busca por el tag P
16 |             var parrafo = document.getElementsByTagName('p')
17 | 
18 |             //para acceder al contenido de ese nodo (innertext)
19 |             //console.log(parrafo.innerText);
20 |             //asignar atributo ID
21 |             parrafo[0].id = 'mi_id_de_prueba';
22 | 
23 |             //accediendo directamente a las propiedades de estilo del nodo
24 | 
25 |             parrafo[0].style.color = 'blue';
26 |             parrafo[0].style.backgroundColor = 'yellow';
27 |         </script>
28 |     </body>
29 | </html>


--------------------------------------------------------------------------------
/JavaScript-Intermedio/3.Dom/ejercicio.html:
--------------------------------------------------------------------------------
 1 | <!-- Crear un script que rellene un elemento UL (lista) de HTML con un array de strings-->
 2 | <html>
 3 |     <head>
 4 |         <title>Clase # 2 sobre DOM</title>
 5 |         <style>
 6 |             #mi_id_de_prueba{
 7 |                 color: red;
 8 |             }
 9 |         </style>
10 |     </head>
11 |     <body>
12 |         <p>Mi primera clase practica de DOM</p>
13 | 
14 |         <ul id="todo_list">
15 |             <!-- Objetivo <li>Tirar la basura</li>-->
16 | 
17 | 
18 |         </ul>
19 |         <script type="text/javascript">
20 | 
21 |             var parrafo = document.getElementsByTagName('p')
22 | 
23 |             parrafo[0].style.color = 'blue';
24 |             parrafo[0].style.backgroundColor = 'yellow';
25 |         
26 |             //creamos nuestro array de tareas
27 |             var tareas = [
28 |                 "Hacer la colada",
29 |                 "Preparar la cena",
30 |                 "Tirar la basura",
31 |             ];
32 |             var todoList = document.querySelector('#todo_list')
33 |             
34 |             for (var i = 0; i< tareas.length; i+=1){
35 |                 var tarea = tareas[i];
36 | 
37 |                 var li = document.createElement('li');
38 |                 
39 |                 li.textContent = tarea;
40 | 
41 |                 //agregar una ID
42 |                 li.id = 'elemento_' + i;
43 | 
44 |                 todoList.appendChild(li);
45 |             }
46 |             //elimina el nodo al pasar dos segundos
47 |             setTimeout(function(){
48 |                 //eliminar un nodo
49 |             var elementoAEliminar = document.getElementById('elemento_2');
50 |             todoList.removeChild(elementoAEliminar);
51 | 
52 |             }, 2000);
53 |             //console.log(todoList);     
54 |         </script>
55 |     </body>
56 | </html>


--------------------------------------------------------------------------------
/JavaScript-Intermedio/4.eventos/ejericio.html:
--------------------------------------------------------------------------------
 1 | <!--Continuando con el ejercicio anterior, debemos agregar un input
 2 | y un boton a nuestro HTML para crear elementos en nuestra lista de TODO
 3 | capturaremos el evento del boton  y crearemos un elemeto en la lista segun 
 4 | el contenido del input-->
 5 | 
 6 | 
 7 | <html>
 8 |     <head>
 9 |         <title>Mi primer ejercicio sobre Eventos</title>
10 |         <style>
11 |             #mi_id_de_prueba{
12 |                 color: red;
13 |             }
14 |         </style>
15 |     </head>
16 |     <body>
17 |         <p>Mi primera clase practica de Eventos</p>
18 |         <input type="text" id="todoTitle">
19 |         <button id="agregarTarea">Agregar tarea</button>
20 | 
21 |         <ul id="todo_list">
22 |             <!-- Objetivo <li>Tirar la basura</li>-->
23 | 
24 | 
25 |         </ul>
26 |         <script type="text/javascript">
27 | 
28 |             var parrafo = document.getElementsByTagName('p')
29 | 
30 |             parrafo[0].style.color = 'blue';
31 |             parrafo[0].style.backgroundColor = 'yellow';
32 |         
33 |             //creamos nuestro array de tareas
34 |             var tareas = [
35 |                 "Hacer la colada",
36 |                 "Preparar la cena",
37 |                 "Tirar la basura",
38 |             ];
39 |             var todoList = document.querySelector('#todo_list')
40 |             
41 | 
42 |             //creamos una funcion para quitar duplicidad del codigo
43 |             function agregarTarea(tarea, id){
44 |                 var li = document.createElement('li');
45 |                 li.textContent = tarea;
46 |                 todoList.appendChild(li);
47 |                 if(id){
48 |                     li.id = id;
49 |                 }
50 |             }
51 | 
52 | 
53 |             for (var i = 0; i< tareas.length; i+=1){
54 |                 var tarea = tareas[i];
55 |                 agregarTarea(tarea, 'elemento_id' + i)
56 | 
57 |                 //var li = document.createElement('li');
58 |                 
59 |                 //li.textContent = tarea;
60 | 
61 |                 //agregar una ID
62 |                 //li.id = 'elemento_' + i;
63 | 
64 |                 //todoList.appendChild(li);
65 |             }
66 |             //elimina el nodo al pasar dos segundos
67 |             setTimeout(function(){
68 |                 //eliminar un nodo
69 |             var elementoAEliminar = document.getElementById('elemento_2');
70 |             todoList.removeChild(elementoAEliminar);
71 | 
72 |             }, 2000);
73 |             //console.log(todoList); 
74 |             
75 |             var agregarBoton = document.getElementById('agregarTarea');
76 |             agregarBoton.addEventListener('click', function(){
77 |                 var todoValue = document.getElementById('todoTitle').value;
78 |                 //console.log(todoValue);
79 |                 agregarTarea(todoValue);
80 | 
81 |                 //var li = document.createElement('li');
82 |                 //li.textContent = todoValue;
83 | 
84 |                 //todoList.appendChild(li);  
85 | 
86 |             });
87 |         </script>
88 |     </body>
89 | </html>


--------------------------------------------------------------------------------
/JavaScript-Intermedio/4.eventos/eventos.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <title>Clase #3 sobre Eventos</title>
 6 | </head>
 7 | <body>
 8 |     <h1>Eventos</h1>
 9 |     <button id="cambiarFondo">Cambiar fondo</button>
10 | 
11 | 
12 | 
13 |     <script type="text/javascript">
14 |         //muestra el evento al pulsar una tecla del teclado 
15 |         //document.addEventListener("keydown", function(evento){
16 |             //console.log(evento)
17 |         //});
18 | 
19 |         var boton = document.getElementById('cambiarFondo');
20 |         //generamos una funcion para cambiar los colores con numeros aleatorios
21 |         function random(numeroMaximo){
22 |             return Math.round(Math.random()* numeroMaximo);
23 | 
24 |         }
25 |         //otra forma seria cuando se pasael raton el por encima cambiando 
26 |         //click por mousemove
27 |        boton.addEventListener("click", function(evento){
28 |             //console.log("boton clicado")
29 | 
30 |             //generacion de los numeros aleatorios
31 |             console.log(evento)
32 |             var randomColor = [
33 |                 random(255),
34 |                 random(255),
35 |                 random(255),
36 | 
37 |             ];
38 |             //Generamos la funcion para cambiar el fondo
39 |             document.body.style.backgroundColor = "rgb(" + randomColor[0] + "," + randomColor[1] + "," + randomColor[2]+")"
40 | 
41 |         });
42 | 
43 |         document.addEventListener('cambiarFondo', function(evento){
44 |             console.log(evento);
45 |             console.log(evento.detail);
46 |         });
47 | 
48 |         var event = new CustomEvent('cambiarFondo', {'detail': 'Hola JCSIVO'});
49 |         
50 |         document.dispatchEvent(event);
51 | 
52 |     </script>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/JavaScript-Intermedio/5.Expresiones-regulares/expresiones_regulares.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>Clase #1 sobre expresiones regulares</title>
 4 |         <body>
 5 |             <p>Expresiones Regulares</p>
 6 | 
 7 |             <script type="text/javascript">
 8 |                 var banda = "AC/DC";
 9 |                 var texto = "hola mUndo";
10 | 
11 |                 //para buscar una barra dentro de nuestro String
12 |                 var regExp = /\//g; // Nos devuelve un 2 por la posicion y si no hay  -1
13 |                 console.log(banda.search(regExp));
14 | 
15 |                 //creamos nuestras // de expresion regular para buscar si el texto esta en minuscula
16 |                 var regExp1 = /^[a-z]$/g;
17 |                 console.log(texto.search(regExp1));
18 |                 console.log(regExp1.test(texto));
19 | 
20 |                 var regExp2 = /hol./;
21 |                 var texto2 = "hola"; // probar con holi, holaAA
22 |                 //vat texto2 = "hosla" // dara -1  y false        
23 | 
24 |                 console.log(texto2.search(regExp2));
25 |                 console.log(regExp2.test(texto2));
26 | 
27 |                 //ejemplo para ver si es singular o plural
28 |                 var regExp3 = /s+$/;
29 |                 var texto3 = "bienvenido"; // probar con bienvenidos      
30 | 
31 |                 console.log(texto3.search(regExp3));
32 |                 console.log(regExp3.test(texto3));
33 | 
34 |             </script>
35 |         </body>
36 |     </head>
37 | </html>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 JCSIVO
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript-Intermedio
2 | Demostración de algunas clases sobre JavaScript Intermedio 
3 | 


--------------------------------------------------------------------------------