100 días de código en Javascript... 3ra parte

26.Si quieres reemplazar una clase (mouseenter, cuando entra; mouseleave, cuando sale):

/*
<h1 class="titulo_curso">Hola</h1>

*/


const h1_titulo = document.querySelector(".titulo_curso");

h1_titulo.addEventListener("mouseenter", function(){
 this.classList.replace('titulo_curso','importante');
});

h1_titulo.addEventListener("mouseleave", function(){
 this.classList.replace('importante','titulo_curso');
});

27. Si quieres recorrer un arreglo:

var correos = ["hugo.lopez@latinmail.com","eusebio.lopez@hotmail.com","maria.gonzalo@gmail.com","hugo.lopez@hotmail.com"];

//Ciclo for each
correos.forEach(function(element){
  console.log(element);
});

28. Si quieres crear una clase, existen varias formas de hacerlo:
Primera forma.

class Modelo{
 constructor(marca, precio,disponibilidad){
  this.marca=marca;
  this.precio=precio;
  this.disponibilidad=disponibilidad;
 }

 display(){
  var disponible = this.disponibilidad? "Disponible" : "No disponible";
  return "Modelo("+this.marca+","+this.precio+","+disponible+")"
 }
}

Donde:
Variables de instancia: marca, precio y disponibilidad.
Método: display(), que nos sirve para mostrar los datos.

El nuevo estándar de Javascript nos permite crear una clase muy al estilo de lenguajes como Java.

Segunda forma:

function Modelo (marca, precio,disponibilidad){
  this.marca=marca;
  this.precio=precio;
  this.disponibilidad=disponibilidad;
 }

Modelo.prototype.display = function(){
  var disponible = this.disponibilidad? "Disponible" : "No disponible";
  return "Modelo("+this.marca+","+this.precio+","+disponible+")"
 }

En este caso usamos prototype para definir un nuevo método a la clase Modelo.

Tercera forma:

function Modelo (marca, precio,disponibilidad){
this.marca=marca;
this.precio=precio;
this.disponibilidad=disponibilidad;
//Método
this.display=display;
}

function display(){
  var disponible = this.disponibilidad? "Disponible" : "No disponible";
  return "Modelo("+this.marca+","+this.precio+","+disponible+")";
 }

Cuarta forma:

var Modelo = {
   marca: "DELL Inspiron 1500",
   precio: 27000.00,
   disponibilidad: true,
   display:function(){
      var disponible = this.disponibilidad? "Disponible" : "No disponible";
  return "Modelo("+this.marca+","+this.precio+","+disponible+")";
   }
};

29. Si quieres crear una imagen y colocarla en un div:

//Creamos un div con id 'contenedor'
const contenedor = document.getElementById("contenedor");

//Imagen
var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
img.height=200;
img.width=200;

//Agregamos imagen a 'contenedor'
contenedor.appendChild(img);

30. Cargar un archivo TXT con el clásico AJAX:

console.log("%c Javascript activo!!","background-color:#AC0;color:#F2F2F2;");

function cargaDocumentoTxt() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("contenidoTxt").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "js/datos.txt", true);
  xhttp.send();
}

Continuaremos...

Links:
http://codemonkeyjunior.blogspot.com/2019/04/100-dias-de-codigo-en-javascript-2da.html
http://codemonkeyjunior.blogspot.com/2019/04/100-dias-de-codigo-en-javascript-1era.html
https://codemonkeyjunior.wordpress.com/2017/09/22/javascript-uso-de-prototype/
http://lineadecodigo.com/javascript/programacion-orientada-a-objetos-con-javascript-un-sencillo-ejemplo/