Code monkey: abril 2019

martes, 30 de abril de 2019

AngularJS: Directivas y expresiones

En este post hablaremos de directivas en AngularJS. Pero antes que nada debemos instalar un sencillo y muy útil servidor:

$ npm install -g http-server

Para ponerlo activo tecleamos desde una terminal:

$ http-server carpetaProyecto/

Abrimos nuestro navegador en http://localhost:8080/ para cerrar tecleamos en la terminal Ctrl + C.

Como vimos en el anterior post AngularJS posee etiquetas especiales llamadas directivas.Éstas directivas son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.

Directivas comunes:

ng-app: para especificar una aplicación.
ng-controller: para especificar un controlador.
ng-model: asocia el valor de una variable con el elemento HTML.
ng-click: para soltar o ejecutar un evento.
ng-bind: para enlazar un valor del scope con un elemento HTML sin necesidad de {{ }}

Ejemplo. Creamos un módulo y un controlador.

app.js

/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {});

En HTML:

view.html

<!-- Definimos la app -->
<html ng-app='miApp'>

<!-- Definimos el controlador -->
<body ng-controller='miControlador'>
   <!-- contenido -->
</body>

¿Cómo defino las expresiones?
Existen dos formas para definir una expresión.

Primera forma:

{{ expresion }}

Segunda forma:

ng-bind="expresion".

Ejemplo. Algunas expresiones:

{{ 34 + 32 }}

{{ cadena }}

{{ edad>18? "Eres mayor de edad" : "Eres menor de edad" }}

Ejemplo. Una página simple usando AngularJS.

<html ng-app="miApp">

<script src="js/angular.min.js"></script>


<body ng-controller="miControlador">
<h1>{{ titulo }}</h1>

<script>
/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {
 
 //$scope es la variable principal
 $scope.titulo ="Codemonkey Junior";

});

</script>

</body>
</html>

Es todo por hoy.

sábado, 27 de abril de 2019

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

31. Si quieres saber qué día es hoy podemos usar Date. En este caso extendemos la clase Date y creamos un método getDia() para mostrarlo.

class Fecha extends Date{
  getDia(){
    var dia =this.getDay();
    var result = "";
    switch(dia){
      case 7: result = "Domingo";break;
      case 6: result = "Sabado";break;
      case 5: result = "Viernes";break;
      case 4: result = "Jueves";break;
      case 3: result = "Miercoles";break;
      case 2: result = "Martes";break;
      case 1: result = "Lunes";break;
      default: result = "NO ESPECIFICADO";break;
    }
    return result;
  }

}

let fecha = new Fecha();
console.log("Hoy es ",fecha.getDia());

32. Crear objetos. En el ejemplo vemos que podemos ir agregando nuevos atributos (mes).

var objFecha = {
  "dia":"Viernes",
  "año":"1950",
  "hora":"09:00PM"
}

objFecha.mes ="Enero";
console.log(objFecha);

33. Más ejemplos de herencia en JS:

/*Clase base de todo animal*/
class Animal{}

//Clase base de animales acuáticos
class AnimalAcuatico extends Animal{}

//Clase base de animales terrestres
class AnimalTerrestre extends Animal{}


//Sublcase de clase AnimalAcuatico
class Delfin extends AnimalAcuatico{}


//Subclase de clase AnimalTerrestre
class Rinoceronte extends AnimalTerrestre{}

34.Extender atributos de una clase definida:

/*Cre la clase Computadora con tres atributos iniciales*/

var Computadora = function(sistema_operativo, modelo, marca){
     this.sistema_operativo=sistema_operativo;
     this.modelo=modelo;
     this.marca=marca;
};


//Agregando/extendiendo atributos

Computadora.prototype.dns='';

Computadora.prototype.ip='';

Computadora.prototype.red='';

//Agregando/extendiendo métodos

Computadora.prototype.verComputadora=function(computadora){

var objetoC= 'Computadora 
Modelo: '+computadora.modelo
+"
Marca: "+computadora.marca+"
Sistema operativo: "+computadora.sistema_operativo
+"
IP:" +computadora.ip+"
DNS: "+computadora.dns
+"
RED: "+computadora.red;

document.getElementById('comp').innerHTML= objetoC;

}

¿Cómo creo una instancia?

function crearComputadora(){
//Creo una instancia
var computadora = new Computadora('Linux','HP vPro','HP');

computadora.ip='148.216.33.21';

computadora.dns='148.216.60.1';

computadora.red='Infinitum';

return computadora;

}

Obtengo el objeto:

var obtenerComputadora = function(){
   var comp= crearComputadora();
   comp.verComputadora(comp);
};

Un evento:

/*<button id='btn'>Obtener</button>*/

document.getElementById('btn').addEventListener('click', obtenerComputadora);

Más en el próximo post.

Links:
http://codemonkeyjunior.blogspot.com/2019/04/100-dias-de-codigo-en-javascript-3ra.html

viernes, 26 de abril de 2019

What is AngularJS ? ... What do you eat this with?

AngularJS es un framework pensado para crear aplicaciones SPA (aplicaciones de una sola página). Se puede combinar con NodeJS, MongoDB y Express JS. Formando así el MEAN (MongoDB + Express JS + Angular + Node JS).

¿Por qué usarlo?

Es bueno usarlo en desarrollos web dinámicos pues ofrece herramientas para el acceso a los datos y no sólo de manipulación del DOM de la página.
Emplea el Modelo Vista Vista-Modelo.
Mejora el rendimiento y las pruebas.
¿Necesito saber DOM, Javascript, jQuery? Mejor enfócate en el rendimiento de la aplicación.
Etc.

¿En serio no necesito saber Javascript y/o jQuery?

Sí, debes tener bases de Javascript y no, no es necesario saber jQuery. AngularJS se enfoca más en el rendimiento y las pruebas y no se preocupa mucho por la manipulación del DOM.

¿Cómo trabaja AngularJS?

AngularJS permite ampliar el vocabulario HTML, pues el HTML puro es insuficiente para ofrecer contenido dinámico.

Modelo + Plantilla ------- { AngularJS } ----- HTML

Algunos conceptos de AngularJS.

Directiva: son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.
Módulo: podemos verlo como un paquete en java.
Controlador: es el nombre de una función que se ejecuta cuando se carga el código html que tiene la directiva ng-controller.
$scope: es la variable de AngularJS donde se guarda toda la información de Javascript de la página.
Angular sólo muestra en el HTML mediante {{ }} el valor de las variables definidas en $scope, no de todas las variables.
$rootScope: es el scope del que heredan los demás scopes, una variable o función agregada a él es accesible por todos los controladores.

Directivas.
ng-model: asocia el valor de una variable con el elemento HTML.
ng-show: permite que un elemento de la página se haga visible.
ng-repeat: hace un ciclo sobre un objeto.
ng-bind: enlaza un valor del scope con un elemento html sin necesidad de {{ }}

Módulos.
Un módulo como un paquete en Java, aquí se agregarán artefactos que podemos usar en otros lados.

Los Artefactos que pueden ir dentro de un módulo son:

Controladores.
Directivas.
Filtros.
Constantes.
Config.
Run.
Etc.

Un módulo puede depender de otros, para eso se usan los corchetes [].

Servicio $http.
Un servicio no tiene relación directa con la página, más bien, es un objeto Javascript que nos permite obtener información. El servicio $http nos permite hacer peticiones AJAX a un servidor. Ejemplo, ocuparlo para hacer peticiones Webservices enviándole algunos parámetros y obteniendo los datos solicitados. Un Webservice podría hacer la función de controlador (hablando en términos de Java).

Servicio $routeProvider.
El servicio tiene dos métodos:

when: Asocia una ruta con una página HTML.
otherwise: Indica a qué ruta debemos redirigirnos cuando hay una ruta desconocida.

El código de la página se agregará dónde coloquemos el siguiente elemento. El servicio $location ayuda a definir el path al que queremos ir. Para que funcione, se debe agregar a nuestro módulo el módulo ng-route con su respectivo archivo js.

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/

jueves, 25 de abril de 2019

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

miércoles, 24 de abril de 2019

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