JavaScript .- Operadores de Asignación.

 

Explicación Importante

Tenemos ya una variable declarada y a esta variable queremos sumarle un nuevo valor

la lógica hasta ahora nos llevaría hacerlo de la siguiente manera.

let num_1 = 2; //declaramos

num_1 = num_1 + 5 ; //le asignamos un nuevo valor

console.log(num_1)  //Mostramos

Pero con el operador += logramos una equivalencia de código 

Ejemplo.

Código JavaScript

let num_1 = 2; //declaramos

//A mi variable le sumamos , la variable + el numero indicado

   num_1 += 5 ; //Sumamos 

// num_1 = num_1 + 5 

console.log(num_1)  //Mostramos en consola

Prácticamente al signo = le añadimos un operador aritmético para crear nuevos operadores.

Operador	Ejemplo	Es igual que escribir
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

Ejemplos.

Suma (cadenas de texto)

Código JavaScript

let texto = "Apuntes"; //declaramos

   texto += "Navarrete" ; //operamos 

   //Es equivalente a escribir

// texto = texto + "Navarrete" 

console.log(texto)  //Mostramos

Resta

Código JavaScript

let num_1 = 9; //declaramos

   num_1 -= 2 ; //operamos 

   //Es equivalente a escribir

// num_1 = num_1 - numero 

console.log(num_1)  //Mostramos

Multiplicación

Código JavaScript

let num_1 = 5; //declaramos

   num_1 *= 2 ; //operamos 

   //Es equivalente a escribir

// num_1 = num_1 * numero 

console.log(num_1)  //Mostramos

División 

Código JavaScript

let num_1 = 20; //declaramos

   num_1 /= 2 ; //operamos 

   //Es equivalente a escribir

// num_1 = num_1 / numero 

console.log(num_1)  //Mostramos

Residuo

Código JavaScript

let num_1 = 19; //declaramos

   num_1 %= 2 ; //operamos 

   //Es equivalente a escribir

// num_1 = num_1 % numero 

console.log(num_1)  //Mostramos

Conclusión

Hemos aprendido una nueva forma de operar utilizando el signo =  mas operadores básicos , lo que facilita nuestra escritura de código , que si bien , parece ahorrarnos poco código , en un entorno real , donde has cientos de líneas de código , este ahorra será un gran alivio.

despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.

 

JavaScript .- Operadores Aritméticos .

 En nuestras declaraciones podemos realizar varias operaciones aritméticas como lo son ;

Operador	Descripción
+	Suma
-	Resta
*	Multiplicación
**	Exponente
/	División
%	Modulo
++	Incremento
--	Decremento

 Suma +

Vamos directo a un ejemplo , podemos guardar directamente una suma en una variable.

vamos a mostrar todos nuestros ejemplos con console.log.

Código JavaScript

let Resultado_suma = 3 + 2 ; // 5

console.log(Resultado_suma)

lo que muestra la consola

Cuando usamos el operador Suma con cadenas de texto en lugar de números , estas se concatenaran (unirán)

Código JavaScript

let Resultado_suma = "Hola" + "Mundo" ;

console.log(Resultado_suma)

lo que muestra la consola

También podemos sumar 2 variables y guardar el resultado en una nueva variable.

Código JavaScript

let num_1 = 1 ;

let num_2 = 2 ;

let num_3 = 4 ;

let suma_numeros = num_1 + num_2 + num_3 ; // 7

console.log(suma_numeros)

lo que muestra la consola

Como podemos observar las operaciones se pueden hacer con mas de 2 operandos

Resta -

Código JavaScript

let num_1 = 9 ;

let num_2 = 2 ;

let resta_numeros = num_1 - num_2 ; // 7

console.log(resta_numeros)

lo que muestra la consola

Multiplicar *

Código JavaScript

let num_1 = 5 ;

let num_2 = 2 ;

let multiplicacion_numeros = num_1 * num_2 ; // 10

console.log(multiplicacion_numeros)

lo que muestra la consola

Dividir /

Código JavaScript

let num_1 = 14 ;

let num_2 = 2 ;

let divicion_numeros = num_1 / num_2 ; // 7

console.log(divicion_numeros)

lo que muestra la consola

Modulo %

Si la división la hiciéramos con un resultado entero , este operador nos devuelve el resto. 

Código JavaScript

let num_1 = 5 ;

let num_2 = 2 ;

let resto_numeros = num_1 % num_2 ; // 1

console.log(resto_numeros)

 

lo que muestra la consola

Incremento ++

Incrementa en una unidad (1) nuestro numero.

Código JavaScript

let numero = 6;

numero++ ;

console.log(numero) // 7

 

lo que muestra la consola

Decremento --

Disminuye en una unidad (1) nuestro numero.

Código JavaScript

let numero = 6;

numero-- ;

 console.log(numero) // 5

lo que muestra la consola

Exponente

Código JavaScript

let numero = 6;

let numero_elevado = numero ** 2 ;

 console.log(numero_elevado); // 36

lo que muestra la consola

Agrupación y orden

Como puedes observar son operaciones básicas que nos enseñaron temprano en la escuela, también podemos usar varias en la misma expresión y como la aritmética tradicional , obedecerá las leyes de los signos y agrupación

Te dejamos algunos ejemplos

Código JavaScript

let operacion_1 = (2+2) * 3; // 12

let operacion_2 = (2+2) ** 3; // 64

let operacion_3 = (2+2)*(2+2); // 16

console.log(operacion_1);

console.log(operacion_2);

console.log(operacion_3);

lo que muestra la consola

conclusión

Como puedes ver, dentro de JavaScript podemos hacer operaciones como en aritmética , y de un uso muy simple , y aunque podemos hacer operaciones todavía mas complejas , con esto tendremos para rato , no olvides practicar todas las operaciones que se te ocurran.

despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.

 

JavaScript .- Variables

 

¿Qué es una variable? 

En el capitulo anterior hablamos ya un poco de este tema,  tratemos de explicarlo un poco mejor.

-Las variables son palabras que escribimos (que representan memoria en el sistema) , para guardar algún tipo de información (texto , datos , etc).

Buscando una analogía en la vida real , las variables representan una caja donde podemos guardar cosas para después utilizarlas.

Formas de escribir variables (Declararlas)

Tenemos 3 formas de declararlas , var , let y const.

vamos a ver un ejemplo relacionado con analogía sobre cajas.

imagen basada en el vector 

Ejemplo practico

crearemos 2 variables con un nombre que haga referencia a perros y esta almacenara su raza .

 

let perro_1 = "Bulldog";

let perro_2 = "Sin raza";

Ejemplo Grafico

imagen basada en ; vector , perro_1 y perro_2

Las variables las podemos y/o debemos nombrar dependiendo de nuestras necesidades .

otro ejemplo rápido seria.

let perro_mio = "Bulldog";

let perro_calle = "Sin raza";

Recordemos que las variables no solo pueden almacenar cadenas de texto si no también números.

por ejemplo.

let perro_caja1 = 3 ;

let perro_caja2 = 2 ;

y podemos sumas estas 2 variables y guardar esa suma en una nueva variables .

let perros_caja1 = 3 ;

let perros_caja2 = 2 ;

let perros_totales = perros_caja1 + perros_caja2;

Ejemplo grafico

Los operadores + - * / y de mas , se explicaran en el siguiente capitulo, lo que queremos que te quede claro es la posibilidad de guardar variables dentro de otras variables (cajas dentro de otras cajas.)

Identificadores y sus reglas

Repasemos un poco este tema los identificadores son los nombres que le ponemos a las variables y si bien podemos nombrarlas como queramos tenemos que seguir unas simples reglas.

• Los nombres pueden contener letras, dígitos, guiones bajos y signos de dólar.
• Los nombres deben comenzar con una letra
• Los nombres también pueden comenzar con $ y _ (pero no los usaremos en este tutorial)
• Los nombres distinguen entre mayúsculas y minúsculas (y e Y son variables diferentes)
• Las palabras reservadas (como las palabras clave de JavaScript) no se pueden utilizar como nombres

por ejemplo.

Declarar una variable y luego nombrarla

Un uso muy común es este , escribimos let,var o const le asignamos un nombre, pero la dejamos sin valor , para asignárselo después,

Ejemplo Código JavaScript 

let perro_mio ;

perro_mio = "Bulldog";

Declarar varias variables

podemos declarar varias variables seguidas separándolas por coma , por ejemplo.

let perro_mio = "bulldog" , perro_vecino = "callejero"

recordemos que JavaScript no toma en cuenta los saltos de linea , nuestro código podría escribirse así.

let perro_mio = "bulldog" ,

 perro_vecino = "callejero",

 perro_amigo = "San bernardo"

Ahora escribamos varias variables , y les asignamos valor después.

let perro_mio,perro_vecino,perro_amigo;

 perro_mio = "bulldog" ,

 perro_vecino = "callejero",

 perro_amigo = "San bernardo";

Conclusión;

en esta ocasión entramos mas a profundidad en las variables , te recomendamos practicar muchísimo la forma de nombrarlas y visualizarlas , te dejaremos un articulo de ejercicios , es un tema muy simple y sencillo pero demasiado importante , dedícale tiempo a dominarlo de pies a cabeza.

despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.

JavaScript .- Introducción

Requerimientos

-Conocimientos Básicos de HTML (La estructura de la web)

-Conocimientos Básicos de CSS (El diseño de la web)

-Navegador (Actualizado de preferencia)

-Editor de texto (de preferencia , se puede usar la consola del navegador también)

-Importante no confundir Java con JavaScript , si JavaScript el lenguaje que esta dominando la web es lo que quieres iniciar a aprender , sigue leyendo.

 ¿Cuál es el trabajo de JavaScript ?

HTML nos brinda una estructura de trabajo , CSS el diseño , y JavaScript es el encargado de darle interactividad a nuestro proyecto.

Ejemplos JavaScript

-Si no entiendes algunas cosas , no te vuelvas loco , solamente queremos mostrarte parte del poder y función de JavaScript , tan solo por el momento copia y pega el código.

-Podemos cambiar el texto escrito en HTML de forma dinámica (Copia y pega este código en tu editor)

<html>

<body>

<p id="cambiaTexto">Cambiaremos este texto</p>

<button onclick='document.getElementById("cambiaTexto").innerHTML = "texto Nuevo"'>

Haz click

</button>

</body>

</html>

Así se mostrara en el navegador

Daremos clic y el texto se cambiara como le hemos indicado

 

Podemos cambiar también los estilos CSS de forma dinámica (Copia y pega este código en tu editor)

<html>

<body>

<p id="cambiarTamaño">Cambiaremos su tamaño</p>

<button onclick="document.getElementById('cambiarTamaño').style.fontSize='35px'">

Haz clic

</button>

</body>

</html>

Así se mostrara en el navegador

Daremos clic y el texto cambiara de tamaño

Podemos ocultar elementos.(Copia y pega este código en tu editor)

<html>

<body>

<p id="ocultarTexto">Este texto se ocultara</p>

<button onclick="document.getElementById('ocultarTexto').style.display='none'">

Haz clic

</button>

</body>

</html> 

Así se mostrara en el navegador

Daremos clic y el texto se ocultara

La forma correcta de incluir JavaScript 

-Se recomienda incluir código JavaScript en un archivo externo , así como lo hacemos con el CSS , así tendremos HTML , CSS y JavaScript por separado , los que nos dará un código mas ordenado y legible.

se agrega de la siguiente forma .

<script src="NombredelArchivo.js"></script>

tenemos un archivo completo en el siguiente link

Agregar tu primer archivo JavaScript  , da clic aquí.

Este tan solo fue un articulo rápido para que continúes con tu aprendizaje en el diseño web, sigue pendiente al siguiente articulo para irte adentrándote de forma practica a la programación de JavaScript