100 días de código en Javascript... 6ta parte

Continuando con esta serie de post sobre Javascript.

39. Mandar o no mandar parámetros.

function suma(x, y=1){
  return x+y;
}

document.write(suma(4));//5
document.write(suma(4,3));//7
document.write(suma(2));//3

La función suma recibe dos parámetros (x,y), por default y tendrá el valor de 1, así que
si omitimos un valor la función funcionará sin problema alguno.

Otro ejemplo. Cambiamos el color de un div mandando uno o dos parámetros.

function cambiaColor(elemento, color='red'){
  var contenedor = document.getElementById(elemento);
contenedor.style.backgroundColor = color;
}

cambiaColor('panel');
cambiaColor('panel','blue');

<div id="panel">
  <p>Hola, mundo.</p>
</div>

40.  let y const

var variableGlobal = 232;

const ConstantePI =3.141519;

function nada(){
   let variableLocal = variableGlobal;
   let variableLocalPI = ConstantePI;
}

Con el nuevo estandar de Javascript es importante entender que la palabra let nos permite definir una variable 'local', una que este definida en un bloque en particular. El ámbito es lo que lo caracteriza:

function decidir(dato){
  if( dato == 'si'){
    let numero = 33;
  }

  console.log(numero);//Esto dará un error

}

Y const para variables cuyo valor es inmutable (que no puede cambiar).

const boton = document.querySelector('.miBoton');

const label = document.getElementById('etiqueta');

/*Esto ya no es permitido: ya los hemos definido como una constante*/

label = "Hola";
boton = new Date();

Crear funciones con let es muy sencillo:

/*Variables*/
const contenido1 = document.getElementById('contenido1');
const btn1 = document.getElementById('btn1');


/*Funciones*/
let inicio = ()=> console.log('%c Hola, amigos','background-color:black;color:orange;');

let saludar = (nombre)=> window.alert(`Hola ${nombre} eres bienvenido`);

let miNombre = () => prompt('Tu nombre:');



/*Listeners*/
btn1.addEventListener('click',()=>{
 saludar(miNombre())
});


window.addEventListener('load',inicio());

41.Keypress y KeyUp. Escribir un texto y que se muestre en mayúsculas.

<input type="text" id="txt1" value="" placeholder="Coloca tu nombre" />

Los eventos 'keypress' y 'keyup' nos ayudan a captar las teclas presionadas.

const texto = document.querySelector('#txt1');


txt1.addEventListener('keypress',()=>{
txt1.value = txt1.value.toString().toUpperCase();
});

txt1.addEventListener('keyup',()=>{
txt1.value = txt1.value.toString().toUpperCase();
});

Más contenido en el próximo post.

100 días de código en Javascript... 5ta parte

Continuando con esta serie de posts he aquí más ejemplos de código en Javascript.

35. Recuperar el title de una página:

alert(document.title)

36.Cargar contenido:

<div id="contenedor"></div>
    <script>
      const contenedor = document.querySelector("#contenedor")
      var Robot = {
        nombre: "El Robotron",
        init: function(){
          contenedor.innerHTML = Robot.nombre
        }
      };
      window.addEventListener("load",Robot.init);
    </script>

37. Obtener texto de un atributo:

<span data-offset-key="4lpif-0-0"></span>
<script>
  let elSpan = document.querySelector("[data-offset-key = '4lpif-0-0']");
  elSpan.innerHTML = "<h3>Hola, amigos</h3><p>Esto lo puse yo.</p>";
</script>

38. Funciones (usando jQuery). Pasar parámetros.

var contenedor = $("#contenedor");

//función
function miFuncion(){
    contenedor.html("<marquee behavior='alternate'>Hola, mundo</marquee>");
}
 
//pasar parámetros
function miOtraFuncion(event){
  contenedor.html(event.data.nombre+" "+event.data.apellido);
}

//button
$("#Btn").on( "click", miFuncion);

//button para pasar parámetros
$("#BtnPasar").click({nombre: "Juan", apellido: "Perez"}, miOtraFuncion);

Código HTML:

<div id="contenedor"></div>
<button id="Btn">Ejecuta algo</button>
<button id="BtnPasar">Pasar parámetros</button>

En posteriores publicaciones habrá más código.

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/

100 días de código en Javascript... 2da parte

Continuando el anterior post.

20. Obtener una imagen desde una API pública. En este caso https://randomuser.me/api/ nos servirá para obtener una imagen.

//Creamos botón con id 'btn'
const btn = document.getElementById("btn");

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

Ahora creamos un evento click para el botón (btn):

btn.addEventListener("click",()=>{
 fetch('https://randomuser.me/api/')
 .then( resp => resp.json())
 .then( data => {
             //Ruta de la imagen
  contenedor.innerHTML = "Imagen: "+data.results[0].picture.large;
  
//Colocamos la imagen en el atributo src de img
document.querySelector("#img").src = data.results[0].picture.large;
  
 });
});

Es necesario precisar que empleamos  fetch que es muy similar a $.ajax() de jQuery aunque difiere en algunos aspectos. Por default emplea el método GET para solicitar un recurso.

Una petición básica puede ser:

fetch('http://servidor/programadores.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(Json) {
    console.log(Json);
  });

21. Si quieres ocultar/mostrar un elemento (por ejemplo, una sección o bloque div) podrías usar esto:

//Creamos botón con id 'btn'
const btn = document.getElementById("btn");
//Creamos un div con id 'seccion'
const seccion = document.getElementById("seccion");

btn.addEventListener("click",()=>{
  if(seccion.style.display=="block"){
   seccion.style.display='none';
  }else{
   seccion.style.display="block";
  }
 });

22. ¿Usar let o var?
He aquí algunas respuestas: https://es.stackoverflow.com/questions/79809/cual-es-la-diferencia-de-usar-let-en-vez-de-var-en-javascript

Conclusión:
var, para ámbito global.
let, para ámbito local.

23.Colocar una imagen en un div.

//div con id 'contenedor'
const contenedor = document.getElementById("contenedor");
//botón con id 'btn'
const btn = document.getElementById("btn");


//función para colocar imagen
var colocaImagen = ()=>{
 var imagen = document.createElement("img");
 imagen.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCgTTYU2dsbDavHU3MuT_aW-WyWKStTMnB0gD1rQSi3fqjfwgYHIB3x8uTVH9zFq-rMW5V7QAQOSpMnaxjDiGeLN9ex_Tc914Ht4tKJ_76JU5Yvi68Gs8uIB2EOmYCJzaaDddgBIV5zG3G/s1600/craftsmen-3094035_960_720.jpg";
 contenedor.appendChild(imagen); 
};

//Creamos evento y colocamos la función 'colocaImagen'
btn.addEventListener("click",colocaImagen);

24. Conocer que tecla presiono o libero:

//Tecla presionada
window.addEventListener("keyup",(event)=>{
   
   if(event.key == "A"|| event.key == "a"){
     //...
   }
   //...

});

//Tecla liberada
window.addEventListener("keydown",(event)=>{
   if(event.key == "A"|| event.key == "a"){
     //...
   }
   //...
});

25. El juego de lanza monedas en javascript.

let moneda = ["AGUILA","SOL"];
  let hugo,paco,luis;
  let result ="";
  const btn = document.getElementById("btn");
  const resultado = document.getElementById("resultado");
  
  var label = document.getElementById("texto");
  
  btn.addEventListener("mousedown",()=>{
      label.innerHTML ="";
  });

  btn.addEventListener("mouseover",()=>{
      label.innerHTML="<br/><b>Reglas:</b><br/> Tres jugadores lanzan una moneda.<br/>Si una moneda es diferente a las otras dos, el lanzador gana.<br/>Si las monedas son todas iguales, nadie gana.";
  });
  
  btn.addEventListener("click", ()=>{
  
      
  hugo = moneda[Math.floor(Math.random()*2.0)];
  paco = moneda[Math.floor(Math.random()*2.0)];
  luis = moneda[Math.floor(Math.random()*2.0)];

  console.log("Hugo:",hugo);
  console.log("Paco:",paco);
  console.log("Luis:",luis);
  
  result += "<br/>Hugo: "+hugo;
  result += "<br/>Paco: "+paco;
  result += "<br/>Luis: "+luis;

  if(hugo!=paco && hugo!=luis){
    console.log(hugo," : Hugo gana!!");
    result +="<br/> <br/>"+hugo+" : Hugo gana!!";
  }else if(paco!=hugo && paco!=luis){
    console.log(paco," : Paco gana!!");
    result +="<br/> <br/>"+paco+" : Paco gana!!";
  }else{
    if(luis!=hugo && luis!=paco){
      console.log(luis," : Luis gana!!");
      result +="<br/> <br/>"+luis+" : Luis gana!!";
    }else{
      console.log("Empate: nadie gana!!");
      result +="<br/><br/> Empate: nadie gana!!";
    }
  }  
  
  resultado.innerHTML = "<br/>"+result;
  result = "";
  
  });

Continuaremos... Links:
https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Utilizando_Fetch
https://www.geeksforgeeks.org/difference-between-var-and-let-in-javascript/
https://es.stackoverflow.com/questions/82929/eventos-keypress-keydown-keyup

100 días de código en Javascript... 1era parte

En este post veremos algunos ejemplos de código en Javascript.

1. Si quieres obtener un elemento mediante su id debes hacerlo de esta forma:

const item = document.getElementById("item");

2. Si quieres obtener un arreglo (inicia en 0) de elementos debes hacer esto:

var items = document.getElementsByTagName("tag");

/*Arreglo de h1*/
var cabezas = document.getElementsByTagName("h1");

//Si necesitas obtener el primer elemento h1:
console.log(cabezas[0]);

//Si quieres obtener su tamaño:
console.log("Tam:",cabezas.length);

3. Si quieres acceder a un item mediante su id o clase debes hacer esto:

//Acceder a un elemento mediante un id
const item1 = document.querySelector("#item1");


//Acceder a un elemento mediante su clase
const item2 = document.querySelector(".item2");

4. Si quieres obtener todos los elementos con una clase en particular debes hacer esto:

//Obtener todos las etiquetas p con la clase 'intro'
var misParrafos = document.querySelectorAll("p.intro");

5. Si quieres colocar un texto en un elemento debes hacer esto:

var texto = document.getElementById("identificador");

//Colocar texto:
texto.textContent = "Hola, mundo" ;

6. Si quieres colocar contenido HTML en otro elemento:

//Mediante su id
var contenedor1 = document.getElementById("contenedor1");
contenedor.innerHTML = "<h1>Hola, mundo</h1>";

//Con querySelector, accediendo a su clase
var contenedor2 = document.querySelector(".contenedor2");

contenedor2.innerHTML = "<p>Ciao</p>";


//Con querySelector, accediendo a su id
var contenedor3 = document.querySelector("#contenedor3");

contenedor3.innerHTML = "<p>Arrivaderci</p>";

7. Si quieres recargar una página HTML en un tiempo determinado:

setTimeout(window.location.reload(),3000);

8. Si quieres recargar la página usando un botón:

const btn = document.getElementById("btn");

btn.addEventListener("click",()=>{
 window.location.reload();
});

9. Cargar contenido DOM:

document.addEventListener("DOMContentLoaded", function(event) {
   /*Cargar contenido JS en Página HTML
     equivalente a:
   $(document).ready(function() {});
    */
});

10. Crear evento en un elemento (click, dblclick, mouseout, mouseover, etc.):

const btn = document.getElementById("btn");
btn.addEventListener('click',()=>{
    //Hacer algo
});

11. Si quieres abrir una página HTML externa:

var abrirVentana=function(){
  window.open("ventana.html","Ventana HTML","width=400, height=250");
};

const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
  abrirVentana();
});

12. Ocultar elemento:

const btn = document.getElementById("btn");
const contenedor = document.querySelector("#contenedor");

//Ocultar
btn.addEventListener("click",()=>{
  contenedor.style.display = "none";
});

13. Mostrar elemento (el estilo del elemento debe ser style="display:none"):

const btn = document.getElementById("btn");
const contenedor = document.querySelector("#contenedor");

//Mostrar
btn.addEventListener("click",()=>{
  contenedor.style.display = "";
});

14. Aplicar CSS desde Javascript:

document.addEventListener("DOMContentLoaded", function(event) {
console.log('%c Codemonkey Junior','color:#E6E6E6;background-color:#2F0B3A;');

//1. Aplicar estilo desde JS
const titulo = document.getElementById("titulo");
titulo.style.backgroundColor = "black";
titulo.style.color = "gray";
titulo.style.textAlign = "center";

});

15.Si quieres obtener un atributo de un elemento, por ejemplo su clase (class):

var cabeza = document.getElementsByTagName("h1")[0].getAttribute("class"); 
const contenedor = document.getElementById("contenedor");
const btn =document.querySelector("#btn");


btn.addEventListener("click",() =>{
contenedor.innerHTML = cabeza;
});

16. Si quieres crear una variable constante:

/*Las variables constantes (const) no pueden alterar su valor*/
const print = console.log;
const label = document.getElementById("identificador");
const TAM = 100;

17. Si quieres crear un nuevo elemento y colocarlo dentro de otro:

var parrafo = document.createElement("p");
var texto = document.createTextNode("Nuevo parrafo.");
parrafo.appendChild(texto);

const contenedor = document.getElementById("contenedor");
element.appendChild(parrafo);

18. Si quieres cerrar la ventana actual:

window.close();

19. Si quieres obtener la URL completa de la página en la que estas:

const URL = window.location.href;
const btn = document.getElementById("btn");

btn.addEventListener("click", ()=>{
   alert("URL es: "+URL);
});

Links:
https://codemonkeyjunior.blogspot.com/2014/06/javascript-aspectos-basicos.html 
https://codemonkeyjunior.wordpress.com/2017/09/22/javascript-uso-de-prototype/
https://www.w3schools.com/js/default.asp