Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brian-emarquez/javascript-course
JavaScript is among the most powerful and flexible programming languages of the web. It powers the dynamic behavior on most websites, including this one.
https://github.com/brian-emarquez/javascript-course
html5 inteligencia-artificial intelij javascript
Last synced: about 2 months ago
JSON representation
JavaScript is among the most powerful and flexible programming languages of the web. It powers the dynamic behavior on most websites, including this one.
- Host: GitHub
- URL: https://github.com/brian-emarquez/javascript-course
- Owner: brian-emarquez
- License: gpl-2.0
- Created: 2020-12-30T04:30:27.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-13T03:52:52.000Z (over 3 years ago)
- Last Synced: 2024-02-16T16:46:07.694Z (11 months ago)
- Topics: html5, inteligencia-artificial, intelij, javascript
- Language: JavaScript
- Homepage: https://github.com/BrianMarquez3
- Size: 24.2 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.txt
- License: LICENSE
Awesome Lists containing this project
README
JavaScript-Course - From Zero to Advanced
## Instalación
📦 [Install Visual studio Code](https://code.visualstudio.com/) Intalador de Visual Studio Code
📦 [Install Node.js](https://nodejs.org/es/download/) Instalador de Node.
📦 [Install IntelliJ IDEA](https://www.jetbrains.com/es-es/idea/download/#section=windows) Intalador IntelliJ IDEA.
📦 [Install Prepros](https://prepros.io/) Intalador de Prepros.
## HackerRank Javascript Certificate
## Tabla de contenidos
| Numeration | Check |Topic | Quantization | link |
| ------------ |--------|-------------- |--------------- |------------------ |
| A |:heavy_check_mark: | [Que es JAVASCRIPT](#Que-es-JAVASCRIPT) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| B |:heavy_check_mark: | [Brendan Eich](#Brendan-Eich) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| C |:heavy_check_mark: | [Historia de JavaScript](#Historia-de-JavaScript) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| D |:heavy_check_mark: | [Como y donde escribir JavaScripts](#Como-y-donde-escribir-JavaScripts) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| E |:heavy_check_mark: | [Sintaxis de JavaScritp](#Sintaxis-de-JavaScritp) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| F |:heavy_check_mark: | [Variables, constantes y sus Ambitos](#Variables-constantes-y-sus-Ambitos) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| G |:heavy_check_mark: | [Declaracion Inializacion y Modificacion](#Declaracion-Inializacion-y-Modificacion) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 001 |:heavy_check_mark: | [Tipos de datos en javaScript](#Tipos-de-datos-en-javaScript) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 002 |:heavy_check_mark: | [Tipos de Operadores](#Tipos-de-Operadores) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 003 |:heavy_check_mark: | [Strings](#Strings) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 004 |:heavy_check_mark: | [Objetos Math](#Objetos-Math) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 005 |:heavy_check_mark: | [Condicionales](#Condicionales) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 006 |:heavy_check_mark: | [Operadores Logicos](#Operadores-Logicos) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 007 |:heavy_check_mark: | [Condicinal Switch](#Condicinal-Switch) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 008 |:heavy_check_mark: | [Ordenar 3 numero de mayor a menor](#008-ordenar-3-numero-de-mayor-a-menoro) |:hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 009 |:heavy_check_mark: | [Operador Ternario](#operador-ternario) |:hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 010 |:heavy_check_mark: | [Array](#array) |:hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 011 |:heavy_check_mark: | [Arrays II](#Arrays-II) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 012 |:heavy_check_mark: | [Bucles](#Bucles) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 013 |:heavy_check_mark: | [Bucle for](#Bucle-for) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 014 |:heavy_check_mark: | [Bucle for of](#Bucle-for-of) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 015 |:heavy_check_mark: | [Objetos](#Objetos) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 016 |:heavy_check_mark: | [Funciones](#Funciones) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 017 |:heavy_check_mark: | [POO](#POO) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 018 |:heavy_check_mark: | [Metodos de los Arrays](#Metodos-de-los-Arrays) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 019 |:heavy_check_mark: | [Metodos de los Arrays](#Spread-operator) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 020 |:heavy_check_mark: | [DOM](#DOM) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 021 |:heavy_check_mark: | [Seleccion de Elementos](#Seleccion-de-Elementos) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 022 |:heavy_check_mark: | [Atributos y Clases](#Atributos-y-Clases) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 023 |:heavy_check_mark: | [Eventos raton teclado](#Eventos-raton-teclado) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 024 |:heavy_check_mark: | [Objeto Evento](#Objeto-Evento) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
| 025 |:heavy_check_mark: | [Objeto Evento 2](#Objeto-Evento-2) | :hourglass: | [ ⬅️ Atras](https://github.com/BrianMarquez3) |
---
## Que es JAVASCRIPT
- JavaScript es un lenguaje de Programacion.
- Lo creó Brendan Eich en una semana.
- Es el Unico Lenguaje de programacion que puede interpretar el navegador.
- El nombre se le puso por que en ese momento esta de moda java.
- JavaScript ha sido mal visto desde su inicio hasta el 2009 aproximadamente.
## Brendan Eich
es un programador estadounidense conocido por inventar el lenguaje de programación JavaScript.
Brendan Eich recibió su Bachiller en matemáticas y ciencias de la computación en la Universidad de Santa Clara. Recibió su maestría en 1986 de la Universidad de Illinois en Urbana-Champaign. [WIKIPEDIA](https://es.wikipedia.org/wiki/Brendan_Eich).
---
## Historia de JavaScript
- 1995 - Netscape crea JavaScript
- 1997 - Netscape se lleva JavaScript a ECMA (European Computer Manufactures
Assiciation)
- 1997 - Se lanza el estadar ECMA-262 y se crea ECMASscript 1.0
- 1998 - exmaScript 2 - Ajuste con el estandar Internacional.
- 1999 - ECMAScript 3
- 2009 - ECMAScript 5
- 2011 - ECMAScript 5.1
- 2015 - ECMAScript 6
---
* Tecnologias Descendientes de JavaScrip
Tecnologias Independiente:
- Ajax
- jQuery
- nodeJS
- JSON
---
* Framworks
- Angular
- React
- VueJs
---
## Como y donde escribir JavaScripts
- La Consola del Navegador directamente
- Instalar Node.js
- Atom
- Visual Studio Code
- Brackets
- Notepad++
- Bloc de Notas
---
## Sintaxis de JavaScritp
- Es case senstive.
Numero no es igual a numero.
- Es tipado de debil o dinamico
Las variables son de tipo del dato que almacenen.
- La sentencia dinalizan con ;
No es obligatorio pero es muy reocmendable
- Los Bloques finalizan con }
de forma opcional se puede anadir un ; despues de }
---
## Variables constantes y sus Ambitos
- Una Variable es un espacio que reservamos en memoria para almacenar un dato que podra cambiar durante la ejecucion de nuestro programa.
- La Palabra reservada para declarar variables es let no es recomendable usar var
- Las Variables se puedem: declarar, inicializar y modificar
- Las constante es un espacio re reservamos en memori para alamecer un dato que no cambiará durante la ejecucion de nuestro programa
*La Palabra reservada para declarar constantes es "const"
- scape o ambito es la sona donde exite nuestra variable o constante
---
## Declaracion Inializacion y Modificacion
- Una variable se declara con la siguiente estructura:
```js
let numero;
```
- Una variable se inicializa con la siguiente estructura:
```js
numero = 5;
```
- se puede declarar e iniciar en la misma sentencia:
```js
let numero 5;
```
- para modificar el valro de una variable existe:
```js
numero = 3;
```
---
## Tipos de datos en JavaScript
- Primitivos
- Numero -> let numro = 5;
- Strings(cadenas) -> let palabra = "Hola; | let palabra = "Hola;
- Boolean -> respuesta = true; | let respuesta = false;
- Undefined
- Null
- Symbol
|Number | Carpeta | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|000 |[Hello Worls](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/000%20Hello%20World) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos) |
|Number | Carpeta | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|001 |[Variables](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/001%20Variables) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos) |
---
## Tipos de Operadores
Tipos de operadores
En JavaScript encontramos cinco tipos de operadores:
Aritméticos
Lógicos
De comparación
Binarios
De asignación
Otros
Operadores aritméticos
```js
Suma (+). Suma dos números: 3 + 2 = 5 .
```
```js
Resta (-). Halla la diferencia entre dos números.
```
```js
Negativo (-). Indica el signo negativo de un número o una expresión: -3.
```
```js
División (/). Divide dos números, obteniendo un cociente de coma flotante: 5 / 2 = 2.5 .
```
```js
Módulo aritmético %. Divide dos números, obteniendo un resto entero: 5 % 2 = 1 .
```
```js
Multiplicación (*). Multiplica dos números: 3 * 2 = 6 .
```
## Asignacion
asignacion
Asignacion
=
Suma y Asignacion
a +=3(a=a+3)
Resta y Asignacion
a -=3(a=a-3)
Multiplicacion y Asignacion
a *=3(a=a*3)
Multiplicacion y Asignacion
a /=3(a=a/3)
Modulo y Asignacion
a %=3(a=a%3)
## Incremento / Decremento
Incremento / Decremento
Post-incremento
a++
Pre-incremento
++a
Post-decremento
a a--
Pre-decremento
--a
|Number | Carpeta | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|002 |[Tipo de Operadores](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/002%20Tipo_de_Operadores) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos) |
---
## Strings
### Metodos y propiedades de los String
- METODO : es aquello que la cadenas pueder ejercer, Ej: Covertirse en mayúslas
- PROPIEDAD: son las caracteristicas que la cadena tiene por ser cadena: Ej: Longitud
se emplean usando la nomeclatura del punto:
cadenas.metodo
cadena.propiedad
### Ejemplos
[W3School JavaScripts](https://www.w3schools.com/js/js_strings.asp)
|Number | Carpeta | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|003 | [Strings](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/003%20Strings) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos) |
---
## Objetos Math
* E sun objeto que se utiliza para operaciones matematicas mas especificas
* Al ser un objeto tamien utliza la nomenclatura del punto
### Propiedades:
* Math.E - Math.Pi
Metodos:
```JS
- Math.abs(x) : Devuelve el valor absoluto de x
- Math.ceil(x) : Devuelve el entero mas grande mayor o igual que un numero.
- Math.floor(x) : Devuelve el entero mas pequeño menor o igual que un numero.
- Math.pow (x,y) : Devuelve la potencia de x elevado a y
- Math.randon() : Genera un numero psucoaleatorio entre 0 y 1
- Math.raound(x) : Devuelve el valor de un numero redondeado al entero mas cercano.
- Math.sign(x) : Devuelve el signo de la x, que indica si x es posotovo , negativo o cero.
```
|Number | Carpeta | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|004 | [Objetos Math](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/004%20Objeto_Math) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos) |
---
## Condicionales
_Estructuras de control de flujo:_
- Condicionales
Simples
Compuestos
Multiples
- Bucles
Determinados
Indeterminados
### Sintaxis
- Sintaxis Simple:
```js
if(condicion){
//Codigo
}
```
- Sintaxis Compuesto:
```js
if(condicion){
//Codigo
}else{
//codigo
}
```
|Number | File | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|005 | [Condicionales](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/005%20Condicionales) | | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos)|
---
## Operadores Logicos
|Number | File | Link | Code | Version | Estado | Atras |
|--------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|006 | [operadores Logico](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/006%20operadores_Logicos) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos)|
---
## Condicinal Switch
- Se utiiza para elegir un camino de varios prestablecdos:
```js
switch (expresión) {
case valor1:
//Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor1
[break;]
case valor2:
//Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor2
[break;]
...
case valorN:
//Declaraciones ejecutadas cuando el resultado de expresión coincide con valorN
[break;]
default:
//Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión
[break;]
}
```
|Number | File | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|007 | [Condicional Swich](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/007%20Condicional%20Swich) | heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos) |
---
## Ordenar 3 numero de mayor a menor
|Number | File | Link | Code | Version | Estado | Atras |
|--------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|008 | [Ordenar 3 numero de mayor a menor](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/008%20ordenar%203%20numero%20de%20mayor%20a%20menor) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: | ⬅️ [Atras](#Tabla-de-contenidos) |
---
## Operador Ternario
- Se utliza cuando una condicion serña TRUE O FALSE , al igual que el if.
- Su ejecucion puede tener una o varias sentenciasm en este caso iran separadas por comas y entre parentesis.
### Sintaxis
* Una sentencia
```js
(condicion)? true:false
```
* Varias Sentencias
```js
(condicion)?
(primera_sentenca,
segunda_sentencia)
```
|Number | Carpeta | Link | Code | Version | Estado |Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|009 | [Operador Ternario](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/009%20operador%20ternario) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: |⬅️ [Atras](#Tabla-de-contenidos) |
---
## Array
- son estructuras que nos permiten almacenar varios dartos agrupados
- se pueden llenar con cualquier tipo de dato valido en javascript y deben ir separados por comas
- se puden mezclar tipos de datos, pero no es recomendable
- se declaran con llaves cuadradas o corchetes
- Puweden declararse vacios o con un conetenido ya establecido
- Pueden añadirse o eliminarse elementos en el momento que quedramos
### Sintaxis
```js
let array =[]
let array = [1,2,3,4,5,]
```
|Number | File | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|010 | [Array](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/010%20Array) | :heavy_check_mark: | yes | yes | yes | :heavy_check_mark: | ⬅️ [Atras](#Tabla-de-contenidos)|
---
## Arrays II
|Number | Carpeta | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|011 | [ArrayII](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/011%20Array%20II) | :heavy_check_mark: | yes | yes | yes | ⬅️ [Atras](#Tabla-de-contenidos) |
## Bucles
- Se usan cuando queremos que un trozo de codigo se repita.
- Esite buvles determinaso e indeterminados
* Bucle While:
Es un bucle indeterminado ya queno sabemos cuantas vueltas dará durante la ejecucion.
```js
while(condicion){
//codigo a ejecutar
}
```
* Bucle D While
Es un buble indeterminado ya que no sabmos cuantas vueltas dará durante la ejecucion
```js
do{
//codigo a ejecutar
}while(condicion)
```
|Bucles | File | Link | Code | Version | Estado | Atras |
|:-----:|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|012 | [Bucles ](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/012%20Bucles) | :heavy_check_mark: | yes | yes | yes |⬅️ [Atras](#Tabla-de-contenidos) |
---
## Bucle for
|Number| Carpeta | Link | Code | Version | Estado | Atras |
|:----:|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|013 | [Bucle for](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/013%20Bucle%20for) | :heavy_check_mark: | yes | yes | yes | ⬅️ [Atras](#Tabla-de-contenidos) |
---
## Bucle for of
|Number| File | Link | Code | Version | Estado | Atras |
|------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|:------:|
|014| [Bucle for of ](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/014%20Bucles%20for%20of) | :heavy_check_mark: | yes | yes | yes | ⬅️ [Atras](#Tabla-de-contenidos) |
## Objetos
### Objetos - Introduccion
Son estructuras de datos que representan propiedades, valores y acciones que pueden realizar el objeto
Todos lo objetos tienen propiedades o atributos y comportammientos o acciones representados por pares de clave(key)(value)
== Objetos Ejemplo ==
```js
const computer = {
screensize: 17,
model:'Macbook Pro'
}
```
```js
const table = {
material: 'madera',
width: 160,
height: 110
}
```
### Acceso al Objeto
para acceder a las propierdades y acciones del objeto se utiliza la nomanclatura del punto
```js
const person = {
name: 'brian',
age:'26',
sons: ['laura', 'diego']
}
console.log(person, name)
console.log(person, age)
console.log(person, sons[0])
console.log(person, sons[1])
```
|Number | Carpeta | Link | Code | Version | Estado | Atras |
|-------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|015 | [Objetos ](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/015%20Objetos) | :heavy_check_mark: | yes | yes | yes | ⬅️ [Atras](#Tabla-de-contenidos) |
---
## Funciones
|Number| File | Link | Code | Version | Estado | Atras |
|------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|016 | [Funciones](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/016%20Funciones) | :heavy_check_mark: | yes | yes | yes | ⬅️ [Atras](#Tabla-de-contenidos) |
## POO
### Programacion Orientada a Objetos
- Es un aparedigma de la programacion que actualiza las forma de programar anterior
- Algunos de lo conceptos fundamentales son:
- Clase
- Herencia
- Objeto
- Evento
### Con la llegada de EMA Scrip 6
- Se crea un objeto, a esa accion se le denomina INTANCIAR un objeto
- Necesitamos una funcion construcctora. se tiene que llamar constructor y se ejecuta cada ves que creemos un obje
-
**Ejemplo**
```js
class Persona{ // en no,bre de la clae se coloca con mayuscula
constructor(nombre, apellido, edad){ // se usa oblidaso constructor
this.nombre = nombre // hace referencia al objeto que creamos
this.apellido = apellido
this.edad = edad
}
```
### Clases - Metodos
_Los Objetos peuden tener funciones asociadasa él. En ese caso se les denomina METODOS._
- para crear un objeto la clases o plantilla sehace con la palabra reserbada `new` y el nombre de la clase que queremos utilizar
|Number| File | Link | Code | Version | Estado | Atras |
|------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|017 | [POO ](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/017%20POO%20-%20Clases) | :heavy_check_mark: | yes | yes | yes |⬅️ [Atras](#Tabla-de-contenidos)|
## Metodos de los Arrays
`.from` (iterable) - Conierte en array el elemento iterable
`.sort`(callback) - ordena los elemetos de un array alfabeticamente(valor unicaode)
`.forEach` - ejecuta la funcion indicada una ves por cada elemento array
`.some` (callback) - comprueba si al meno un elemento del array cumple la conducion
`.every`(callback) - comprueba si todos los elementos del array cumplen la condicion
`.map`(callback) - Transforma todos los elelentso del array y devuelve un nuevo array
`.map`(callback) - Transforma todos los elelentso del array y devuelve un nuevo array
`.filter` - trnasoforma todos los elementos del array y devuelven un nuevo array
`.reduce` - Reduce todos los elelentos del array a un unico valor
|Number| File | Link | Code | Version | Estado | Atras |
|------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|018 | [Metodos de los Arrays ](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/018%20Metodo%20de%20lo%20arrays) | :heavy_check_mark: | yes | yes | yes |⬅️ [Atras](#Tabla-de-contenidos)|
## Spread operator
```js
const numbers = [-12, 2, 3, 23, 43, 2, 3]
console.log(...numbers); // se observa numero separados
const addNumbers = (a,b,c,) =>{
console.log(a+b+c)
}
```
|Number| File | Link | Code | Version | Estado | Atras |
|------|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|019 | [Spread operator](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/019%20Spread%20operator) | :heavy_check_mark: | yes | yes | yes | ⬅️ [Atras](#Tabla-de-contenidos) |
---
## DOM
Es toda la estructura HTML del documento.
No es JavaScript, es una API (Aplication Programing Interface)
```js
DOM
DOM Documents Object Model
```
### Representacion
```powershell
+---DOCUMENT
+---LANG
\---HTML
+---HEAD
| +---META
\---CHARSET
| +---TITLE
\---DOM
+--- BODY
| +---BODY
| +---H1
| +---ID
| +---CLASS
| \---TEXT
```
### Nodos
Cada parte del arbol del documento es un NODO
Hay varios tipos de nodos, los mas utilizados son:
* Element node - 1 (cualuier etiqueta HTML)
* Text node - 3 (El Contenido de la etiqueta)
* Comment node - 8 (Culquier comentario en HTML)
| Number |File | Link | Code | Version | Estado | Atras |
|:-------:|:--------------:|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|020 | [DOM](https://github.com/BrianMarquez3/JavaScript-Course/blob/main/020%20DOM) | :heavy_check_mark: | yes | yes | yes |yes |⬅️ [Atras](#Tabla-de-contenidos)|
## Seleccion de Elementos
| Number | File | Link | Code | Version | Estado | Atras |
|:-------:|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|021 | [Seleccion de Elementos](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/021%20Seleccion%20de%20Elementos) | :heavy_check_mark: | yes | yes | yes | ⬅️ [Atras](#Tabla-de-contenidos) |
## Atributos y Clases
| Number |File | Link | Code | Version | Estado | Atraz |
|:-------:|:--------------:|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|022 | [Atributos y Clases](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/022%20Atributos%20y%20Clases) | :heavy_check_mark: | yes | yes |yes| ⬅️ [Atras](#Tabla-de-contenidos) |
## Eventos raton teclado
Tipo de evento
Nombre con prefijo on (eliminar cuando proceda)
Descripción aprenderaprogramar.com
Relacionados con el ratón
onclick
Click sobre un elemento
ondblclick
Doble click sobre un elemento
onmousedown
Se pulsa un botón del ratón sobre un elemento
onmouseenter
El puntero del ratón entra en el área de un elemento
onmouseleave
El puntero del ratón sale del área de un elemento
onmousemove
El puntero del ratón se está moviendo sobre el área de un elemento
onmouseover
El puntero del ratón se sitúa encima del área de un elemento
onmouseout
El puntero del ratón sale fuera del área del elemento o fuera de uno de sus hijos
onmouseup
Un botón del ratón se libera estando sobre un elemento
contextmenu
Se pulsa el botón derecho del ratón (antes de que aparezca el menú contextual)
Relacionados con el teclado
onkeydown
El usuario tiene pulsada una tecla (para elementos de formulario y body)
onkeypress
El usuario pulsa una tecla (momento justo en que la pulsa) (para elementos de formulario y body)
onkeyup
El usuario libera una tecla que tenía pulsada (para elementos de formulario y body)
Relacionados con formularios
onfocus
Un elemento del formulario toma el foco
onblur
Un elemento del formulario pierde el foco
onchange
Un elemento del formulario cambia
onselect
El usuario selecciona el texto de un elemento input o textarea
onsubmit
Se pulsa el botón de envío del formulario (antes del envío)
onreset
Se pulsa el botón reset del formulario
Relacionados con ventanas o frames
onload
Se ha completado la carga de la ventana
onunload
El usuario ha cerrado la ventana
onresize
El usuario ha cambiado el tamaño de la ventana
Relacionados con animaciones y transiciones
animationend, animationiteration, animationstart, beginEvent, endEvent, repeatEvent, transitionend
Relacionados con la batería y carga de la batería
chargingchange, chargingtimechange, dischargingtimechange, levelchange
Relacionados con llamadas tipo telefonía
alerting, busy, callschanged, connected, connecting, dialing, disconnected, disconnecting, error, held, holding, incoming, resuming, statechange
Relacionados con cambios en el DOM
DOMAttrModified, DOMCharacterDataModified, DOMContentLoaded, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified
Relacionados con arrastre de elementos (drag and drop)
drag, dragend, dragenter, dragleave, dragover, dragstart, drop
Relacionados con video y audio
audioprocess, canplay, canplaythrough, durationchange, emptied, ended, ended, loadeddata, loadedmetadata, pause, play, playing, ratechange, seeked, seeking, stalled, suspend, timeupdate, volumechange, waiting, complete
Relacionados con la conexión a internet
disabled, enabled, offline, online, statuschange, connectionInfoUpdate
Otros tipos de eventos
Hay más tipos de eventos: relacionados con la pulsación sobre pantallas, uso de copy and paste (copiar y pegar), impresión con impresoras, etc.
| Number |File | Link | Code | Version | Estado | Atras |
|:-------:|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|023 | [Eventos raton teclado](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/023%20Eventos%20raton%20Teclado) |:heavy_check_mark:| yes | yes |yes|⬅️ [Atras](#Tabla-de-contenidos) |
## Objeto Evento
| Number |File | Link | Code | Version | Estado | Atras |
|:-------:|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|024 | [Objeto Evento](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/024%20Objeto%20Evento) |:heavy_check_mark:| yes | yes |yes|⬅️ [Atras](#Tabla-de-contenidos) |
## Objeto Evento 2
| Number |File | Link | Code | Version | Estado | Atras |
|:-------:|--------------|:-----------:|:-----------:|:-----------:|:-----------:|:-----------:|
|025 | [Objeto Evento 2 ](https://github.com/BrianMarquez3/JavaScript-Course/tree/main/025%20Objeto%20Evento%202) |:heavy_check_mark:| yes | yes |yes|⬅️ [Atras](#Tabla-de-contenidos) |
---
## Book
Server
Name
Authors
Edition
ISBN
Link
-
Building Front-End Web Apps with Plain JavaScript
Gerd Wagner
Building Front-End Web Apps with Plain JavaScript Online
OneDrive
The javaScript Languaje
Ilya Kantor
-
-
The javaScript Languaje The javaScript Languaje Manual.
## Paypal
🩸 Hacer una donación [PAYPAL](https://www.paypal.com/donate?hosted_button_id=98U3T62494H9Y) 🍵
---
A
B
C
E
F
G
