JavaScript-Course - From Zero to Advanced

Instalación

📦 Install Visual studio Code Intalador de Visual Studio Code
📦 Install Node.js Instalador de Node.
📦 Install IntelliJ IDEA Intalador IntelliJ IDEA.
📦 Install Prepros Intalador de Prepros.

HackerRank Javascript Certificate

Tabla de contenidos

Numeration	Check	Topic	Quantization	link
A	✔️	Que es JAVASCRIPT	⌛	⬅️ Atras
B	✔️	Brendan Eich	⌛	⬅️ Atras
C	✔️	Historia de JavaScript	⌛	⬅️ Atras
D	✔️	Como y donde escribir JavaScripts	⌛	⬅️ Atras
E	✔️	Sintaxis de JavaScritp	⌛	⬅️ Atras
F	✔️	Variables, constantes y sus Ambitos	⌛	⬅️ Atras
G	✔️	Declaracion Inializacion y Modificacion	⌛	⬅️ Atras
001	✔️	Tipos de datos en javaScript	⌛	⬅️ Atras
002	✔️	Tipos de Operadores	⌛	⬅️ Atras
003	✔️	Strings	⌛	⬅️ Atras
004	✔️	Objetos Math	⌛	⬅️ Atras
005	✔️	Condicionales	⌛	⬅️ Atras
006	✔️	Operadores Logicos	⌛	⬅️ Atras
007	✔️	Condicinal Switch	⌛	⬅️ Atras
008	✔️	Ordenar 3 numero de mayor a menor	⌛	⬅️ Atras
009	✔️	Operador Ternario	⌛	⬅️ Atras
010	✔️	Array	⌛	⬅️ Atras
011	✔️	Arrays II	⌛	⬅️ Atras
012	✔️	Bucles	⌛	⬅️ Atras
013	✔️	Bucle for	⌛	⬅️ Atras
014	✔️	Bucle for of	⌛	⬅️ Atras
015	✔️	Objetos	⌛	⬅️ Atras
016	✔️	Funciones	⌛	⬅️ Atras
017	✔️	POO	⌛	⬅️ Atras
018	✔️	Metodos de los Arrays	⌛	⬅️ Atras
019	✔️	Metodos de los Arrays	⌛	⬅️ Atras
020	✔️	DOM	⌛	⬅️ Atras
021	✔️	Seleccion de Elementos	⌛	⬅️ Atras
022	✔️	Atributos y Clases	⌛	⬅️ Atras
023	✔️	Eventos raton teclado	⌛	⬅️ Atras
024	✔️	Objeto Evento	⌛	⬅️ Atras
025	✔️	Objeto Evento 2	⌛	⬅️ Atras

---

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.

---

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:

  let numero;

• Una variable se inicializa con la siguiente estructura:

  numero = 5;

• se puede declarar e iniciar en la misma sentencia:

  let numero 5;

• para modificar el valro de una variable existe:

  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	✔️	yes	yes	yes	✔️

Number	Carpeta	Link	Code	Version	Estado	Atras
001	Variables	✔️	yes	yes	yes	✔️

---

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

    Suma (+). Suma dos números: 3 + 2 = 5 .

    Resta (-). Halla la diferencia entre dos números.

    Negativo (-). Indica el signo negativo de un número o una expresión: -3.

    División (/). Divide dos números, obteniendo un cociente de coma flotante: 5 / 2 = 2.5 . 

    Módulo aritmético %. Divide dos números, obteniendo un resto entero: 5 % 2 = 1 .

    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	✔️	yes	yes	yes	✔️

---

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

Number	Carpeta	Link	Code	Version	Estado	Atras
003	Strings	✔️	yes	yes	yes	✔️

---

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:

    - Math.abs(x) : Devuelve el valor absoluto de x <br>
    - Math.ceil(x) : Devuelve el entero mas grande mayor o igual que un numero. <br>
    - Math.floor(x) : Devuelve el entero mas pequeño menor o igual que un numero. <br>
    - Math.pow (x,y) : Devuelve la potencia de x elevado a y <br>
    - Math.randon() : Genera un numero psucoaleatorio entre 0 y 1 <br>
    - Math.raound(x) : Devuelve el valor de un numero redondeado al entero mas cercano. <br>
    - Math.sign(x) : Devuelve el signo de la x, que indica si x es posotovo , negativo o cero. <br>

Number	Carpeta	Link	Code	Version	Estado	Atras
004	Objetos Math	✔️	yes	yes	yes	✔️

---

Condicionales

Estructuras de control de flujo:

- Condicionales
    Simples
    Compuestos
    Multiples

- Bucles
    Determinados
    Indeterminados

Sintaxis

• Sintaxis Simple:
  

  if(condicion){
  //Codigo
  }

• Sintaxis Compuesto:
  

  if(condicion){
  //Codigo
  }else{
  //codigo
  }

Number	File	Link	Code	Version	Estado	Atras
005	Condicionales		✔️	yes	yes	yes

---

Operadores Logicos

Number	File	Link	Code	Version	Estado	Atras
006	operadores Logico	✔️	yes	yes	yes	✔️

---

Condicinal Switch

• Se utiiza para elegir un camino de varios prestablecdos:

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	heavy_check_mark:	yes	yes	yes	✔️

---

Ordenar 3 numero de mayor a menor

Number	File	Link	Code	Version	Estado	Atras
008	Ordenar 3 numero de mayor a menor	✔️	yes	yes	yes	✔️

---

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

(condicion)? true:false

• Varias Sentencias

(condicion)? 
    (primera_sentenca,
    segunda_sentencia)

Number	Carpeta	Link	Code	Version	Estado	Atras
009	Operador Ternario	✔️	yes	yes	yes	✔️

---

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

let array =[]
let array = [1,2,3,4,5,]

Number	File	Link	Code	Version	Estado	Atras
010	Array	✔️	yes	yes	yes	✔️

---

Arrays II

Number	Carpeta	Link	Code	Version	Estado	Atras
011	ArrayII	✔️	yes	yes	yes	⬅️ Atras

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.

  while(condicion){
  
      //codigo a ejecutar
  }

  • Bucle D While Es un buble indeterminado ya que no sabmos cuantas vueltas dará durante la ejecucion

  do{
  
  //codigo a ejecutar
  }while(condicion)
  

Bucles	File	Link	Code	Version	Estado	Atras
012	Bucles	✔️	yes	yes	yes	⬅️ Atras

---

Bucle for

Number	Carpeta	Link	Code	Version	Estado	Atras
013	Bucle for	✔️	yes	yes	yes	⬅️ Atras

---

Bucle for of

Number	File	Link	Code	Version	Estado	Atras
014	Bucle for of	✔️	yes	yes	yes	⬅️ Atras

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 ==

const computer = {
    screensize: 17,
    model:'Macbook Pro'
}

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

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	✔️	yes	yes	yes	⬅️ Atras

---

Funciones

Number	File	Link	Code	Version	Estado	Atras
016	Funciones	✔️	yes	yes	yes	⬅️ Atras

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

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	✔️	yes	yes	yes	⬅️ Atras

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	✔️	yes	yes	yes	⬅️ Atras

Spread operator

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	✔️	yes	yes	yes	⬅️ Atras

---

DOM

Es toda la estructura HTML del documento. No es JavaScript, es una API (Aplication Programing Interface)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> DOM </title>
</head>
<body>

    <h1 id="title" class="title"> DOM Documents Object Model</h1>
    
</body>
</html>

Representacion

+---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	✔️	yes	yes	yes	yes

Seleccion de Elementos

Number	File	Link	Code	Version	Estado	Atras
021	Seleccion de Elementos	✔️	yes	yes	yes	⬅️ Atras

Atributos y Clases

Number	File	Link	Code	Version	Estado	Atraz
022	Atributos y Clases	✔️	yes	yes	yes	⬅️ Atras

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	✔️	yes	yes	yes	⬅️ Atras

Objeto Evento

Number	File	Link	Code	Version	Estado	Atras
024	Objeto Evento	✔️	yes	yes	yes	⬅️ Atras

Objeto Evento 2

Number	File	Link	Code	Version	Estado	Atras
025	Objeto Evento 2	✔️	yes	yes	yes	⬅️ Atras

---

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 🍵

---

A			B
C			E
F			G