Categorías
Video2Brain

04.Uso de operadores en JavaScript

4.1.Operadores aritméticos en JavaScript

Los operadores aritméticos son aquellos que nos van a permitir realizar operaciones matemáticas con los datos de nuestra aplicación.

Los que veremos serán:

  • Suma (+),
  • Resta (-),
  • Multiplicación (*),
  • División (/),
  • Módulo o Resíduo (%),
  • Incremento (++), y,
  • Decremento (–).
Categorías
Video2Brain

03.Tipos de datos específicos de JavaScript

3.1.Trabajar con números en JavaScript

En JavaScript podemos trabajar con diferentes tipos de datos.

En este caso, trabajaremos con tipos de datos «numéricos».

Los valores numéricos no deberemos ponerlos entre comillas, y podrán ser «enteros» «flotantes» (con decimales).

Podremos expresar números positivos (+34), o número negativos (-15).

"use strict"

var edad = 35;

Debemos tener cuidado cuando asignamos datos, ya que si queremos asignar un dato numérico pero lo asignamos con «comillas», este no será numérico, sino que será un «string», y por tanto, no podremos realizar operaciones numéricas con él; si lo intentamos lo que haría el navegador sería añadir a nuestra cadena de texto el nuevo dato que también sería texto; OJO con esto.

var cantidad = "100";

Para convertir una «cadena de texto» en un «dato numérico», utilizaremos le función «number», la cual nos cambiará el tipo de dato de uno a otro.

var nuevaCantidad = Number(cantidad);

Ahora si queremos, ya podremos agregarle alguna cantidad numérica.

Tenemos tambien dos funciones que nos permiten convertir datos a «enteros» y a «flotantes», las cuales son:

parseInt()

parseFloat()

3.2.Trabajar con cadenas de texto o strings

Las cadenas de texto strings son uno de los tipos de datos que más utilizaremos en nuestros programas JavaScript; pero hay que utilizarlos bien para que no nos den problemas.

Lo primero que haremos para declarar una cadena de texto, al igual que anteriormente con los números será utilizar la palabra reservada var+nombre-variable.

A continuación asignaremos el texto, pero ¡ojo!, siempre entre comillas, «dobles» o ‘simples’.

Muy Importante : Si comenzamos con una comilla doble, deberemos cerrar con una comilla doble; lo mismo ocurrirá si lo hacemos con comillas simples.

var bebida = "agua";

var comida = 'ceviche';

Podemos, también, anidar comillas doble y simples de esta manera:

var instrucción = "El platillo se llama 'ceviche' ";

¿Qué sucede si quiero trabajar como texto un número que tengo almacenado en una variable numérica?

Podemos crear otra variable y pasarla de número a texto, utilizaremos la función String() de la siguiente forma:

var edad = 34;

var edadtxt = String(edad)

3.3.Uso de los datos booleanos

Los tipos de datos booleanos nos ofrecen sólo dos tipos de datos: «true»«false» (verdadero o falso).

var activo = false;

Podemos hacer comprobaciones del estado (verdadero o falso) de una variable booleana, de esta manera:

var estado = Boolean( 10 > 9); //true

var estado = Boolean( 10 < 9); //false

Veremos mejor la importancia de los datos booleanos más adelante, cuando utilicemos bucles y expresiones de comparación más en profundidad.

3.4.Trabajar con fechas en JavaScript

En JavaScript podemos trabajar con fechas, y lo haremos con el objeto Date.

Creamos una variable, y le asignamos el objeto Date, de la siguiente manera:

var fecha = new Date();

Si vamos a consola e invocamos a fecha, nos dará la fecha en formato JavaScript (o el que tenga nuestro sistema operativo), en el que aparecerán los datos básicos de la misma: día (de la semana), día, mes, año, hora, etc.

Si queremos que estos datos se actualicen, deberemos invocar nuevamente por consola el objeto Date.

Tenemos también métodos interesantes para poder trabajar con fechas, como getDate()getDay(), los cuales nos darán respectivamente el valor numérico del mes en curso, y el segundo el valor numérico del día de la semana en la que nos encontremos.

Como podemos apreciar en la imagen de arriba, podemos recuperar infinidad de datos del objeto Date a través de todos los métodos que están disponibles.

Asimismo, podremos si lo deseamos, asignar datos a nuestro objeto Date a través del método setDate() u otros como los siguientes:

El método setDate() nos servirá por ejemplo cuando debemos guardar una fecha en una base de datos; con este método podemos establecer la fecha en la misma.

3.5.Uso de símbolos en JavaScript

Los símbolos son un tipo de datos cuyo valor son únicos e inmutables, no van a cambiar de valor nunca.

Para crearlos, lo realizaremos de esta manera:

var simbolo1 = Symbol();

Podemos asignarle algún valor que nosotros consideremos permanente o único, así:

var ambiente = Symbol('dev');

Y como hemos comentado, aunque a priori parezca que hacemos la misma asignación a un Symbol(), como podría ser en este caso, si hacemos una comprobación por consola, podremos ver que ambos valores no son idénticos.

var simbolo1 = Symbol();
var simbolo2 = Symbol();

Para entender un poco mejor como funciona Symbol(), quizás puedes pasarte por este enlace: Oscar Lijo – Symbol en JavaScript.

3.6.Estructurando datos con JSON

En JavaScript podemos trabajar con objetos, los cuales nos permiten estructurar los datos con los que estaremos trabajando en nuestra aplicación.

Para manejar mejor los datos de estos objetos se creó JSON, que significa JavaScript Object Notation, un formato de intercambio de datos ligero y muy descriptivo al utilizar la estructura de un objeto.

Vamos a crear una variable llamada «persona», la cual será un objeto, que tendrá el dato «nombre»«twitter».

var persona = {nombre: 'Sergio', twitter: 'yacafx'};

Ahora, a través de la consola podemos acceder a este objeto y sus valores de esta manera:

Podemos acceder también a diferentes valores a través de un arreglo o Array, e incluso añadir al mismo nuestro objeto anterior, «persona».

var personas = [
    {nombre: 'Hugo', twitter: 'dcHugo'},
    {nombre: 'Paco', twitter: 'dcPaco'},
    {nombre: 'Luis', twitter: 'dcLuis'},
    persona
]

Para poder manejar o tratar estos datos o enviarlos a un servidor o cualquier otro lugar tenemos que convertirlo a formato JSON mediante el método .stringify de JSON.

var personaJSON = JSON.stringify(persona);

Si hacemos esto y vamos a consola, podremos ver como el objeto «persona» sigue manteniendo su estructura, pero «personaJSON» ha convertido el objeto persona en formato JSON.

Ahora este objeto, personaJSON, no es más que una cadena de texto y no podremos aplicar ningún método previsto para los objeto, pues nos daría un error.

Para hacer el paso contrario, para de un objeto JSON a un objeto , utilizaremos el método JSON.parse(), en este caso de esta manera:

var nuevaPersona = JSON.parse(personaJSON)

Ahora, si vamos a consola podremos ver el valor de cada uno de los objetos que hemos ido creando, persona, personaJSON nuevaPersona.

Como hemos visto, JSON será la manera ideal de manejar datos, bien en nuestra aplicación o a través de servicios externos.

 

Categorías
Video2Brain

02.Uso de variables o contenedores de datos

2.1.Trabajando con variables en JavaScript

Las «variables» nos sirven para «almacenar datos en nuestra aplicación».

Las variables serán declaradas siempre con la palabra «var»+»nombre variable»; este «nombre» debería ser una palabra que nos de «una idea» del valor o dato que está almacenando dicha variable.

Las variable pueden existir de manera «global» «local». Cuando hablamos de manera «global» significa que podemos acceder a este dato desde cualquier parte del programa, pero esto tiene un problema y es que, al ser globales se almacenan de manera «destructiva», que significa que si tenemos un dato y posteriormente lo cambiamos habremos eliminado el primero.

A lo largo de cualquier programa que realicemos, haremos un uso intensivo de las variable; es por ello, que debemos ponerles nombre fáciles de recordar y a ser posible cortos para poder usarlos frecuentemente.

2.2.Contenedores Let

Las variables tienen un «alcance» o más comúnmente conocido como «scope», que es el alcance o espacio en dónde se van a poder utilizar.

Si tenemos este código:

var nombre = 'Sergio';

console.log(nombre)

declaramos la variable «nombre» con su valor «Sergio» y después lo enviamos a «consola». Lógicamente, este nos imprimirá en la misma el valor «Sergio» que está dentro de una «variable global».

Si ahora dentro de una función nos llevamos la variable nombre y le hacemos una nueva asignación con el valor «yacafx», la variable cambiará de valor.

"use strict"

var nombre = 'Sergio';

console.log(nombre)

function saludo() {
  nombre = 'yacafx';

    

}

saludo();

Podemos hacer que el contenido de la variable nombre abarque o se ejecute dentro de nuestra función, y para eso lo que tendremos que hacer será poner la palabra reservada «var» delante del nombre de la variable.

"use strict"

var nombre = 'Sergio';

console.log(nombre)

function saludo() {
  var nombre = 'yacafx';
  console.log(nombre);
}

saludo();

De esta manera cuando ejecutemos éste último código nos saldrán dos nombres distintos de la variable nombre: «Sergio» y «yacafx»; no obstante, si vamos a la consola y volvemos a invocar la variable «nombre», ésta vez nos dará el resultado «Sergio», ya que cogerá el valor de la variable global.

Como esto crea bastante confusión, para eso cuando utilizamos variables dentro de un bloque o función, se utiliza la palabra reservada «let»la cual nos indica que estamos utilizando la misma «dentro de un bloque», no podremos utilizarla fuera del mismo.

"use strict"

var nombre = 'Sergio';

console.log(nombre)

function saludo() {
  let nombre = 'yacafx';
    console.log(nombre)
    
 let edad = 34; 
  console.log(edad)
}

 console.log(edad)

saludo();

2.3.Contenedores Const

En JavaScript también podemos tener contenedores que no cambiarán sus datos a lo largo de la ejecución de todo el programa, se asignarán una vez y permanecerán para siempre con ese valor; a estos los llamamos «const» o «constantes».

Asignaremos valores a nuestros contenedores «const» de la siguiente manera:

"use strict"

const pi = 3.1416;

// pi = 15; 

Si intentamos asignar un nuevo valor a «pi», veremos como el navegador nos da un error ya que dicho valor «no es variable».

 

 

Categorías
Video2Brain

01 – Aproximación a JavaScript

1.1.Qué es JavaScript

  • JavaScript es un lenguaje de programación que, en un principio, fué creado para la Web, para dar interactividad a nuestras páginas webs.
  • JavaScript por sí sólo tiene poco potencial a la hora de crear webs, ya que tiene que ir de la mano de otros dos lenguajes específicos para crear páginas, como son: HTML5 y CSS3.
  • HTML5 crea la CAPA DE CONTENIDO mediante un lenguaje de marcado o de «etiquetas», mediante el cual le decimos al navegador el «contenido» de nuestra página web.
  • Tenemos la siguiente capa, la CAPA DE PRESENTACIÓN, de la cual se encarga CSS3, y esta se ocupa de dar una presentación «atractiva» a nuestro contenido en la página web.
  • Finalmente tenemos la última capa, DE INTERACTIVIDAD (TAMBIÉN DE PRESENTACIÓN), que le dota de mayor actividad a nuestra página, permitiéndonos controlar «clicks» en botones, controlar «registros en formularios»«recoger datos externos para nuestra página», etc.

1.2.Herramientas y entorno de trabajo

  • Las herramientas básica para programar en JavaScript son: «un navegador web», «un editor de texto», y a veces, «un programa con acceso a la línea de comandos».
  • Como navegadores podemos utilizar los más comunes: «Google Chrome», «Mozilla Firefox», o en caso de utilizar Mac, «Safari».
  • Para desarrolladores tanto Google como Mozilla tienen versiones específicas: «Chrome Canary» y «Firefox Developer».
  • Los editores de texto nos permitirán escribir o editar nuestro código. Los más habituales ahora mismo son: «Visual Studio Code», «WebStorm», «SublimeText», «Atom». En el curso de trabajará con la primera, «Visual Studio Code».
  • Cuando sea necesario trabajar con la línea de comandos, en Mac, podremos trabajar con «Terminal», «iTerm»; y en Windows, con «Command» o «Windows PowerShell».

1.3.Conoce el material de tu curso

  • El material con el que se va a trabajar durante el curso se encuentra en la carpeta denominada «archivos_base_javascript.zip»; allí se encontrarán los diferentes ejercicios que iremos realizando durante el mismo.
  • La recomendación es que, cuando encontremos un archivo «index.html» y otro con extensión «.js», abramos primero el «.html» y después el «.js», así podremos ver la correlación que hay entre uno y otro.
  • Para cada uno de los temas, tendremos una serie de archivos específicos.

1.4.Tu primer JavaScript

  • Iremos a la ruta dónde está nuestro primer fichero «index.html», la cual es esta:  «\archivos_base_javascript\1 – Conociendo JavaScript\01 – Tu primer JavaScript».
  • Lo ideal sería empezar el archivo «index.html» de cero, o sea, abriendo un archivo nuevo sin ningún tipo de código.
  • Para ello, desde VisualStudio Code, le damos a crear «Nuevo Archivo» y le ponemos por nombre «index.html».
  • A continuación en la primera línea escribimos «html5+tabulador»; esto lo que hará será, mediante un snippet (una serie de líneas de código ya preconfiguradas) crearnos la estructura básica de un archivo «.html».
  • Quitaremos la línea que se refiere a los estilos «.css», y añadiremos la etiqueta «<script/>», para insertar nuestro código JavaScript.
  • El código quedará así:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            alert('Hola Mundo');
        </script>
    </head>
    <body>
    
    </body>
</html>
  • Este ejercicio, aunque sencillo, lo que ha hecho es crearnos una «alerta» en JavaScript, una de las funciones que se muestran en JavaScript para ofrecer información al usuario.

1.5.Elementos básicos de JavaScript

  • Lo primero que debemos entender es que podemos ejecutar código JavaScript de dos maneras diferentes: la primera, «desde dentro de nuestros archivos HTML», y la segunda, «desde archivos .js independientes».
  • La primera, como hemos visto anteriormente, es mediante la etiqueta «<script></script>»; todo código JavaScript que insertemos entre estas dos etiquetas se ejecutará en nuestra página «.html».
  • Escribir nuestro código de esta manera hará que no podamos mantener facílmente el mismo, por lo cual se recomienda, en casi todos los casos, escribir este código en archivos externos como hemos dicho anteriormente.
  • Para ejecutar el código externamente, crearemos, en la misma ruta anterior en la que hemos creado nuestro «.html», una carpeta llamada «js», en la cual almacenaremos todos nuestros archivos «JavaScript».
  • En nuestro caso crearemos el archivo «app.js», y dentro escribiremos el siguiente código:
alert('Hola desde un archivo externo');
  • Después deberemos ligar este archivo «.js» con nuestro archivo «.html». Para ello haremos esto en éste último:
<script src="js/app.js"></script>
  • De esta manera comprobaremos que tenemos «dos alertas«: la primera que será la del «archivo externo .js», y la segunda de la «etiqueta <script>» interna de nuestro archivo «.html».

1.6.Aprendiendo a usar la consola

  • La «consola» de nuestro navegador es una herramienta muy útil y necesaria para el desarrollo de nuestros proyectos web, ya que nos permitirá «probar» «ejecutar» nuestro código desde dentro de nuestro navegador.
  • La manera que tenemos de ejecutarla es la siguiente: dentro del navegador, damos click derecho y vamos a «Inspeccionar»; entre las muchas pestañas que nos salen encontraremos la que nos interesa, que es «Console».

  • Aquí podremos probar nuestro código e incluso hacer otras operaciones diversas, como operaciones artiméticas, además de enviar a la misma desde un archivo externo la información que nos interese.
  • Por ejemplo, siguiente con nuestro archivo «app.js», a la línea que ya teníamos anteriormente, añadiremos la siguiente:
console.log('Hola consola');
  • Esto lo que realizará será, después de los dos mensajes de alerta que ya hemos visto, enviará a nuestra «consola» el mensaje «Hola consola».
  • Este mensaje se podrá enviar como acabamos de ver desde el archivo externor «app.js», pero también podremos hacerlo desde el archivo «index.html», de esta manera:
<script>
            alert('Hola Mundo');

            var nombre = "Sergio";
            console.log('El nombre es: ', nombre)
        </script>
  • De esta manera hemos realizado varias cosas:
    • Primera: hemos creado la alerta «Hola Mundo»,
    • Segunda: hemos creado una variable llamada «nombre» con el valor «Sergio».
    • Tercero: Enviamos a «consola» un texto más el valor de la varible «nombre».
  • De esta manera, hemos comprobado como podemos ejecutar código JavaScript desde un archivo externo «.js» o desde un «script» dentro de un archivo «.html».

1.7.Escribiendo comentarios en JavaScript

  • A veces al escribir código, podemos querer que el navegador ignore cierta línea que hemos escrito por diferentes motivos, vamos que no la ejecute.
  • Para ello, utilizamos la sintaxis de «comentario», que nos permitirá, bien insertar «comentarios en nuestro código», o bien, «anular una línea o más de código que no queremos que se ejecuten».
  • Para ello utilizaremos la doble diagonal «//» para «comentarios de una sóla línea»:
// alert('Hola desde un archivo externo');
  • Si queremos realizar comentarios de varias líneas, lo que se conoce como «comentarios de bloque», deberemos escribirlos con «/*» al principio del bloque, y, «*/» al final del bloque, de esta manera:
<script>
          /*  alert('Hola Mundo');

            var nombre = "Sergio";
            console.log('El nombre es: ', nombre) */
        </script>

El uso más común de la doble diaonal «//» será, como hemos comentado, la de establecer algún comentario a nuestro código, para tener una referencia nosotros u otros desarrolladores cuando tiempo después volvamos a examinar el mismo.

// Este es un mensaje de la consola
console.log('Hola consola');

1.8.Qué es Strict Mode

  • El «Strict Mode» nos sirve para asegurar que estamos escribiendo código dentro de las buenas prácticas de JavaScript y también para asegurarnos que en el mismo no estamos usando palabras reservadas por el lenguaje.
  • Para utilizar este modo, siempre deberemos escribir «al inicio de todos nuestros archivos JavaScript» la palabra «use strict».
  • Si posteriormente escribimos lo siguiente:
x = "3.1416";

veremos como nos da un error en nuestra consola, ya que no hemos declarado la variable previamente.

Para que esto funcione correctamente, deberemos declarar nuestra variable de esta manera:

var x; 

x = "3.1416";

y de esta manera la consola no nos escupirá ningún error.

Ahora probamos a declarar una variable pero esta vez con una palabra reservada, así:

var public= "Hola";

Con esto, la consola nos dirá que hemos cometido un error, ya que «hemos declarado una variable con una palabra reservada».

Para arreglar esto, declararemos la variable con otro nombre, en nuestro caso «publicData», y de esta manera no nos saldrá ya ningún error:

var publicData = "Hola";