Curso desde cero de JavaScript Capítulo 15 - Objetos

Los objetos de los lenguajes de programación se pueden comparar a los objetos de la vida real, por ejemplo, un ordenador. Cada ordenador tiene una serie de atributos, como son la memoria RAM, el espacio de almacenamiento, la tarjeta gráfica, el procesador, etc.

En la POO (Programación Orientada a Objetos) se ha querido hacer un acercamiento a la realidad para facilitar la interpretación y creación de código.

Veamos un ejemplo típico de objeto, que podría ser un usuario. Este usuario se ha registrado en nuestro sitio web con un nombre, unos apellidos, una edad...

Cómo crear un objeto en JavaScript

De esta sencilla manera se crea un objeto en JavaScript. Le puedes poner el nombre que quieras (siguiendo las normas de sintaxis de JavaScript).

<script> 
    
NombreObjeto = {};

</script>

Este es un objeto con atributos, puede contener cuantos necesites.

<script> 
    
danielle98 = {
 nombre: "Danielle",
 apellido: "Trevino",
 nombreCompleto: "Danielle Trevino",
 edad: 19,
 ciudad: "Los ángeles",
 pais: "USA", 
 };

</script>

Una vez creado nuestro objeto, podemos llamar a cualquiera de sus atributos de cualquier manera que se nos ocurra.
Puedes llamar a un solo atributo del objeto o a los que quieras.

<script> 
    
document.write(
  "Nombre completo: ", danielle98.nombreCompleto, "<br>",
  "Apellido: ",danielle98.apellido, "<br>",
  "Nombre: ", danielle98.nombre, "<br>",
  "Edad: ", danielle98.edad, "<br>",
  "Ciudad: " , danielle98.ciudad, "<br>", 
  "País: ", danielle98.pais
              );

</script>

Resultado

Como he explicado antes, si quieres trabajar con un solo atributo (uno o los que quieras) en un momento determinado, lo puedes hacer.

<script> 
    
alert(danielle98.nombre);

</script>

Resultado

JavaScript- Cómo invertir un String con split(), reverse() y join()

JavaScript- Cómo invertir un String

En el capítulo anterior de JavaScript os expliqué la sintaxis de los Strings de manera bastante detallada. En este veremos como se pueden invertir de orden los caracteres de un String.

<script> 
    
function stringInvertido(texto) {
     return texto.split('').reverse().join('');
}

document.write(stringInvertido('JavaScript'));

</script>

Resultado

Voy a destripar este sencillo código para que veas los tres pasos que hace.

String.prototype.split()

El método split() separa con comas cada uno de los caracteres.

<script> 
    
function stringInvertido(texto) {
     return texto.split('');
}

document.write(stringInvertido('JavaScript'));

</script>

Resultado

String.prototype.reverse()

El método reverse() invierte el orden de cada uno de los caracteres.

<script> 
    
function stringInvertido(texto) {
     return texto.split('').reverse();
}

document.write(stringInvertido('JavaScript'));

</script>

Resultado

String.prototype.join()

Ya solo falta el último paso, que es juntar todos los caracteres y eliminar las comas. Y este es finalmente el código del principio.

Este código lo puedes utilizar para invertir grandes textos o para volveros a su orden normal por ejemplo.

<script> 
    
function stringInvertido(texto) {
     return texto.split('').reverse().join('');
}

document.write(stringInvertido('JavaScript'));

</script>

No te asustes con el siguiente párrafo,tan solo es un fragmento de texto invertido con el script.

.tpircs ateuqite al ed etnaled rop ayah euq ol odot oremirp áragrac es ,ydob le ne ogidóc le senop iS .ydob le ,oirausu le rev a av euq anigáp al ed odinetnoc le eugrac euq ed setna áratuceje es ogidóc ohcid ,etnematcerid o anretxe anigáp anu noc aes ay ,daeh le ne ogidóc le senop iS .ydob le ne o daeh le ne SJ ogidóc renop ertne aicnerefid anu yaH

Lo copio aquí y automáticamente vuelve a su estado normal, con lo que estoy invirtiendo lo invertido.

<script> 
    
function stringInvertido(texto) {
     return texto.split('').reverse().join('');
}

document.write(stringInvertido('.tpircs ateuqite al ed etnaled rop ayah euq ol odot oremirp áragrac es ,ydob le ne ogidóc le senop iS .ydob le ,oirausu le rev a av euq anigáp al ed odinetnoc le eugrac euq ed setna áratuceje es ogidóc ohcid ,etnematcerid o anretxe anigáp anu noc aes ay ,daeh le ne ogidóc le senop iS .ydob le ne o daeh le ne SJ ogidóc renop ertne aicnerefid anu yaH'));

</script>

Voilà, mágicamente, JavaScript ha descifrado este texto.

Curso de PRINCIPIANTE A AVANZADO de MySQL - 4 - Tipos de datos numéricos decimales

En el capítulo 3 de este curso vimos los tipos de datos numéricos enteros, en este veremos los decimales también llamados como coma flotante.

Como su nombre indica, los tipos de datos numéricos decimales tienen la capacidad de almacenar números decimales, cosa que no podían los que os mostré en el capítulo anterior.

Tipos de datos numéricos decimales

FLOAT

El tipo de dato numérico decimal FLOAT te permite almacenar números decimales de coma flotante.

Este tipo de dato se escribe así: FLOAT (e,d) donde e es la parte entera y la d, la decimal.

Ejemplo FLOAT (10,6) podría albergar un número como este: 10987654837,445009 con 10 cifras enteras y 6 decimales.

DOUBLE

Con el tipo de dato DOUBLE se pueden almacenar números mucho mayores que FLOAT.

DECIMAL

Este tipo de dato es totalmente preciso con los decimales, los otros dos tipos redondean, por lo tanto no son precisos como DECIMAL.

Este es un capítulo corto y he simplificado al máximo las explicaciones para aquellos que estáis empezando con MySQL. En capítulos posteriores veremos con total detalle estos tipos de datos en casos prácticos.

Bootstrap 4 - Estilos para botones I

Bootstrap 4 - Estilos para botones I

Los botones web son elementos fundamentales en el desarrollo de cualquier sitio web. Está claro que poner un botón básico con HTML es fácil, pero para diseñar unos estilos como los que verás a continuación, se necesita un poco de experiencia en CSS. Gracias a Bootstrap, tenemos a nuestro alcance una serie de elegantes botones.

Botones básicos de Bootstrap 4

<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secondary">Secundario</button>
<button type="button" class="btn btn-success">Éxito</button>
<button type="button" class="btn btn-danger">Peligro</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-dark">Oscuro</button>

Resultado

Botones link de Bootstrap 4

Aunque menos llamativos, tenemos los botones btn-link que cuentan con el texto subrayado como un enlace.

<button type="button" class="btn btn-primary btn-link">Primario</button>
<button type="button" class="btn btn-secondary btn-link">Secundario</button>
<button type="button" class="btn btn-success btn-link">Éxito</button>
<button type="button" class="btn btn-danger btn-link">Peligro</button>
<button type="button" class="btn btn-warning btn-link">Advertencia</button>
<button type="button" class="btn btn-info btn-link">Info</button>
<button type="button" class="btn btn-light btn-link">Claro</button>
<button type="button" class="btn btn-dark btn-link">Oscuro</button>
<button type="button" class="btn btn-link">Link</button>

Resultado

Esto es todo por el momento, en la siguiente entrega veremos más estilos para botones.

Bootstrap 4 - Estilos para Alerts II

Bootstrap 4 - Estilos para Alerts II

En el capítulo anterior vimos algunas formas de sacar partido a los alerts de Bootstrap 4. En este veremos unos cuantos más para concluir el tema de los alerts.

Enlaces en los alerts de Bootstrap 4

En este ejemplo, tienes unos alert iguales que los que vimos en el capítulo anterior (primary, secondary, success, danger...).
Con la clase alert-link podemos crear enlaces con un estilo de texto en negrita y subrayado al pasar el cursor encima de él.

<div class="alert alert-primary">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-secondary">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-success">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>

<div class="alert alert-danger">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-warning">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-info">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-light">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-dark">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div> 

Resultado

Alerts con botón para cerrar

Para concluir por el momento el tema de los alerts, os dejo el alert con un botón de cierre. Con este alert podemos mostrar un aviso de cookies o cualquier otra cosa que se te ocurra.
Al cerrar el alert, este desaparece. Solo volverá a aparecer si se recarga la página.

<div class="alert alert-danger alert-dismissible fade show">
 
   <u>Este texto está subrayado. </u>
 <i> Este texto está en cursiva</i>
 <b>Este texto está en negrita</b>
 
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  
     <span aria-hidden="true">&times;</span>
  
   </button>
 
</div>

Resultado

Bootstrap 4 - Estilos para Alerts I

Bootstrap 4 - Estilos para Alerts I

Los alerts de Bootstrap se puede utilizar en multitud de casos, por ejemplo para cuando una usuario se ha registrado con éxito en un sitio web, cuando hace login y ha escrito una contraseña incorrecta, cuando se quiere avisar a un visitante de algo importante, escribir una nota...

Estilos Alert Bootstrap 4

En el siguiente código, lo importante es el nombre de la clase para hacer referencia a los estilos CSS que contiene Bootstrap.

<div class="alert alert-primary">
  Alert primario en Bootstrap 4.
</div>
<div class="alert alert-secondary">
  Alert secundario en Bootstrap 4.
</div>
<div class="alert alert-success">
  Alert de éxito en Bootstrap 4.
</div>
<div class="alert alert-danger">
  Alert de peligro en Bootstrap 4.
</div>
<div class="alert alert-warning">
  Alert de advertencia en Bootstrap 4.
</div>
<div class="alert alert-info">
  Alert para info en Bootstrap 4.
</div>
<div class="alert alert-light">
  Alert claro en Bootstrap 4.
</div>
<div class="alert alert-dark">
  Alert oscuro en Bootstrap 4.
</div>

Resultado

Alert de contenido adicional 

Con los mismos alerts se pueden hacer cosas más elaboradas como este aviso adicional. En primer lugar, la clase alert-heading se puede utilizar con cualquiera de las etiquetas <h></h>, de <h1> a <h6>.
Podemos poner cuantos párrafos queramos.
<hr> crea la línea divisoria.
Por último, la clase mb (margin bottom) determina la cantidad de margen inferior.

<div class="alert alert-primary">
  <h1 class="alert-heading">¡Primary! Este es el título</h1>
  <p>Este es un aviso primary.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-secondary">
  <h1 class="alert-heading">¡Secondary! Este es el título</h1>
  <p>Este es un aviso secondary.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-success">
  <h1 class="alert-heading">¡Success! Este es el título</h1>
  <p>Este es un aviso success.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-danger">
  <h1 class="alert-heading">¡Danger! Este es el título</h1>
  <p>Este es un aviso danger. Está en color rojo para que llame tu atención.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-warning">
  <h1 class="alert-heading">¡Warning! Este es el título</h1>
  <p>Este es un aviso warning.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div> 

<div class="alert alert-info">
  <h1 class="alert-heading">¡Info! Este es el título</h1>
  <p>Este es un aviso info.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-light">
  <h1 class="alert-heading">¡Light! Este es el título</h1>
  <p>Este es un aviso light.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>

<div class="alert alert-dark">
  <h1 class="alert-heading">¡Dark! Este es el título</h1>
  <p>Este es un aviso dark.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>

Resultado

Pronto escribiré más sobre Bootstrap 4, todavía nos quedan por ver más clases alert.

JavaScript- Cómo escribir un String

JavaScript- Cómo escribir un String

Los strings se pueden encerrar entre comillas simples '', dobles "" y desde la versión 6, con acentos abiertos `` (backticks en inglés).

<script> 
    
var texto1 = "String";
var texto2 = 'String';
var texto3 = `String`;
  
console.log(texto1,texto2,texto3); //Salida: String String String
    
</script>

También se pueden usar en los array:

<script> 
    
var stringArray = ["String 1", 'String 2', `String 3`];
 
console.log(stringArray); //Salida: String 1,String 2,String 3
    
</script>

Y por supuesto en los objetos:

<script> 
    
objetoUsuario = {};
 
     mike654 = {nombre: "Mike", apellido: 'Sullivan', nombreCompleto: `Michael Sullivan`};
 
console.log(mike654.nombre);
console.log(mike654.apellido);
console.log(mike654.nombreCompleto); 
//Salida: Mike  
          Sullivan
          Michael Sullivan

</script>

Curso de PRINCIPIANTE A AVANZADO de MySQL - 3 - Tipos de datos numéricos enteros

En MySQL tenemos tres tipos de datos:

-Numéricos.

-Alfanuméricos.

-Fechas y horas.

En este capítulo vamos a ver los números enteros.

Tipos de datos numéricos enteros (INTEGERS)

Tipo de dato	Valor mínimo	Valor máximo	Tamaño (Bytes)
TINYINT	-128	127	1
SMALLINT	-32.768	32.767	2
MEDIUMINT	-8.388.608	8.388.607	3
INT	-2.147.483.648	2.147.483.647	4
BIGINT	-9.223.372.036.854.775.808	9.223.372.036.854.775.807	8

TINYINT

Se trata de el tipo de dato numérico más pequeño, ocupando sólo 1 byte de almacenamiento en disco.

Se suele utilizar para el campo o columna edad de una tabla, ya que admite del -128 al 127.

Entonces, como buen programador, deberás aprender a optimizar las bases de datos, creando los campos adecuados para cada tipo de datos.

SMALLINT

 ¿Qué pasa cuando necesitamos almacenar números más grandes?
Cuándo pasa esto, deberemos utilizar tipos de datos numéricos más grandes, empezando por SMALLINT.
Este tipo de dato lo necesitarás para bases de datos en los que se vayan a registrar bastantes usuarios, o para almacenar artículos, o cualquier cosa que se te ocurra. No obstante, debes tener en cuenta que si una base de datos de un sitio web para usuarios registrados crece en un futuro, los 32 mil y pico usuarios registrados puede quedarse corto, en este caso sería mejor un INT directamente.

MEDIUMINT

La opción intermedia entre el SMALLINT y el INT. Utilizamos el MEDIUMINT para bases de datos que necesiten tener valores negativos o positivos de más de 8 millones.

INT

A mi punto de vista, INT es el más utilizado en bases de datos MySQL. Lo pones y te despreocupas del tamaño, ya que llega a más de dos billones. De todas formas, es recomendable que utilices de vez en cuando los otros tipos de datos numéricos para optimizar al máximo tus bases de datos, ocuparán menos y serán más rápidas.

BIGINT

Este es el coloso de los tipos de datos numéricos enteros y es que admite valores de hasta 10 trillones que no es poco.
Es poco frecuente ver BIGINT, solo deberíamos utilizarlo en casos especiales.



Y con esto concluye este tercer capítulo. Seguiremos viendo diferentes tipos de datos en los próximos capítulos. 
Ten en cuenta que antes de diseñar una base de datos, debes tener claro los valores que vas a incluir en cada campo de cada tabla para no cometer errores. No solo se han de tener en cuenta los valores numéricos positivos, si no los negativos, por ejemplo, el saldo de una cuenta bancaria.