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.

Ionic framework

Ionic es un framework que permite crear aplicaciones móviles híbridas. Éstas aplicaciones son las que emplean tecnologías como HTML, CSS y Javascript. Una aplicación móvil híbrida se despliega dentro de un contenedor como Cordova. Contrario a las aplicaciones nativas no emplea ninún lenguaje propio del dispositivo.

Instalando Ionic Framework

$ npm i -g ionic

Comprobamos su instalación:

$ ionic --version

Creando una aplicación.

Creamos una aplicación en blanco.

$ ionic start miApp blank --type=angular

Nos ubicamos en la carpeta creada.

$ cd miApp 

 Arrancamos el servidor:

$ ionic serve

Se abrirá el navegador en la dirección http://localhost:8100

Creamos una página.

$ ionic generate page pagina-uno

Ahora editamos home.page.html y agregamos un botón.

<div class="ion-padding">
    <p>Está la página de inicio.</p>
    <ion-button class="primary"  (click)="launchPaginaUnoPage()" >Ir a la página uno</ion-button>
  </div>

Editamos home.page.ts añadiendo un método para lanzar la página pagina-uno.

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { PaginaUnoPage } from '../pagina-uno/pagina-uno.page';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public navCtrl: NavController,
   private router: Router) {}

  launchPaginaUnoPage(){
   console.log('Voy a la página uno')
   this.router.navigate(['/pagina-uno'])
  }

}

Agregamos un bóton de regreso a home en pagina-uno.page.html

<div class="ion-padding">
    <p>Está es nuestra primera página.</p>
    <ion-button class="primary" (click)="launchHomePage()" >Ir a home</ion-button >
  </div>

Creamos el método para regresar a home en pagina-uno.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-pagina-uno',
  templateUrl: './pagina-uno.page.html',
  styleUrls: ['./pagina-uno.page.scss'],
})
export class PaginaUnoPage implements OnInit {

  constructor(private router:Router) { }

  ngOnInit() {
  }

  public launchHomePage():void{
    console.log('De regreso a home');
   this.router.navigate([''])
  }


}

Arrancamos el servidor.

$ ionic serve

Observamos el resultado:

Damos click en Ir a la página uno.

 Tenemos hecha nuestra primera aplicación con Ionic.