Si estás iniciando en el desarrollo web o bien quieres conocer un poco más sobre programación, JavaScript es indispensable, tanto para principiantes como expertos. Por lo mismo hoy quiero abrir el tema hablando sobre qué es y algunos de sus principales elementos para la construcción con JavaScript.
Contenido
Qué es Javascript y para qué sirve
Cómo crear modal react: paso a paso
Crear modales en React es fundamental para mantener a los usuarios en el sitio web y facilitar conve…
Inspeccionar desde móvil IOS o Android: chrome y safari
Hacer pruebas en nuestro proyecto o desarrollo web es clave para llevarlo acabo correctamente y para…
Cómo implementar Sepolia: Red de prueba de Ethereum
Antes de implementar un contrato en una red de mainnet como Ethereum debemos primero saber cómo impl…
JavaScript es un lenguaje de programación interpretado, lo cual significa que se ejecuta en tiempo real, a diferencia del lenguaje de programación compilado.
Ahora, para la construcción de un sitio web necesitamos principal y generalmente tres cosas:
- HTML: lenguaje de marcado encargado de la estructura del sitio web.
- CSS: lenguaje de diseño gráfico encargado de dar estilo al sitio web.
- JavaScript: encargado de dar funcionalidad al sitio web.
Entonces, aunque hoy en día podemos construir sitios web sin necesidad de saber programar, cuando vamos a proyectos más complejos, si o si necesitamos saber del tema. Aquí es cuando Javascript BRILLA!
Podemos crear funcionalidades personalizadas en nuestro sitio web con JavaScript.
Variables
Una variable es una forma de almacenar el valor de algo para usar más tarde. Es un contenedor de información. Estos son algunos ejemplos:
- var: tipo de variable que puede contener prácticamente cualquier tipo de dato.
- let: al igual que var, puede contener cualquier tipo de dato pero con la diferencia de scope o alcance de la misma.
- const: esta variable se le asigna un valor y este no va a cambiar en ningún momento. Es constante.
Tipos de datos en Javascript
Los datos en JavaScript precisamente es la información que vamos a guardar en nuestros contenedores o variables. Hay diferentes tipos de datos y vamos a verlos:
- Números: pueden ser positivos o negativos.
- Strings: cadenas de letras o palabras. Necesitas usar comillas (» «) cada vez que las uses en JavaScript.
- Boolean: datos booleanos true y false.
Declarar una variable con tipo de dato
Ahora, para declarar una variable necesitamos:
- tipo de variable
- nombre
- asignación de tipo de dato y valor.
//variable + nombre = valor;
var minombre = 'eduardo'; // string
let edad = 28; //número
var esdesarrollador = true; //boolean
Estructura de Datos
Aunque este tema es un poco más complejo, hoy hablaremos sobre los primeros pasos de la estructura de datos en JavaScript. Como ya sabemos cuáles son los tipos de datos, ahora debemos saber que es posible organizarlos, estructurarlos y así poder usarlos.
Para esto, vamos a conocer dos de las formas más conocidas que son los arreglos y objetos.
Arreglos
Los arreglos permiten guardar cualquier tipo de dato sin problema. Son contenedores de almacenamiento para colecciones de datos. Puedes reconocerlos fácilmente porque contienen los datos en corchetes, separados por comas y así puedes conocer su posición dentro del arreglo.
var amigos = ['Sebastian', 'Jorge', 'Camilo', 'Juan'];
// en donde tenemos las posiciones: amigos [0, 1, 2, 3];
// Entonces al ejecutar lo siguiente:
Console.log(amigos[1]);
// Veremos el string: 'Jorge' en la terminal.
Objetos
Los objetos al igual que los arreglos, permiten almacenar diferentes tipos de datos sin ningún problema pero estos lo hacen a una mayor escala. Los objetos Javascript tienen una propiedad y un valor. Así mismo, pueden tener diferentes datos de esta misma forma.
var amigo = {
nombre: 'Jorge',
edad: 29,
apellido: 'Posada',
esgracioso: true
};
// en el anterior objeto podemos ver que contiene los tipos de datos: string, número, string y boolean.
// Así mismo las propiedades son: nombre, edad, apellido, esgracioso. Cada uno con su respectivo valor.
Console.log(amigo.nombre); // Esto nos dará como resultado: 'Jorge'
Funciones
Por último vamos a conocer las funciones en Javascript. Aunque podemos utilizarlas de diferentes formas hoy conoceremos como hacerlo de una forma sencilla.
Las funciones son un conjunto de instrucciones que reciben algo y entregan algo. Pueden ser ejecutadas en cualquier momento en el código sin problema.
Ahora, los valores que reciben las funciones Javascript son conocidos como argumentos, los cuales toman un valor que se asignan y con este realizan acciones dentro de la función.
funtion sumaredades(edaduno, edaddos, edadtres) {
var resultado = edaduno + edaddos + edadtres;
Console.log(resultado);
};
La función anterior recibe 3 argumentos y con estos ejecuta la función y asigna ese valor a la variable resultado. Luego, esta es usada para mostrarla. OJO: no es lo mismo Console.log que return. Estos conceptos los veremos con calma más adelante.
Ahora, debemos asignarle valores a estos argumentos y luego, ejecutar la función, así:
//primero declaramos variables
var edadjorge = 29;
var edadsebastian = 28;
var edadcamilo = 27;
//luego ejecutamos la función con estas variables como argumentos
sumaredades(edadjorge, edadsebastian, edadcamilo);
Listo! de esta forma, creamos la función, luego creamos las variables y por último, ejecutamos la función.
Video de ayuda
Hice este video para ayudarte en el proceso. Si te gusta, no olvides dar like y suscribirte para nuevos videos!
Producto sugerido
Si al igual que yo, pasas demasiado tiempo en un pc, puede que este producto te ayude, como yo a cuidar mis manos y a su vez, optimizar mis horas de digitalización.
Te recomiendo totalmente este teclado mecánico Keychron k6. Si quieres ver la reseña completa puedes hacerlo aquí.
Keychron K6 65% compacto teclado mecánico inalámbrico para Mac, retroiluminación blanca, Bluetooth, multitarea, tipo C con cable teclado para Windows con interruptor marrón Gateron
- El Keychron K6 es un teclado mecánico inalámbrico Bluetooth compacto de 65 % con retroiluminación blanca hecha para Mac y Windows. El K6 está diseñado para maximizar tu espacio de trabajo y mejorar la productividad.
- Con un diseño único de Mac, compatibilidad con Windows y teclas de flecha dedicadas, el K6 ofrece una cómoda accesibilidad a todas las teclas multimedia y funciones esenciales a través de la combinación de pulsaciones de teclas, pero lo suficientemente compacto para que puedas llegar a tu ratón más fácilmente. Teclas adicionales para sistemas operativos Windows y Mac están incluidas.
- Se conecta con hasta 3 dispositivos a través del fiable chipset Broadcom Bluetooth 5.1 y cambia entre ellos fácilmente para necesidades multitarea. El K6 es mejor para adaptarse al hogar, la oficina y el uso de juegos ligeros mientras se conecta con tu smartphone, portátil y iPad. También tiene modo con cable con conexión USB tipo C.
Conclusión
Personalmente uno de los lenguajes de programación más importantes en la actualidad es JavaScript y por esto, hoy conocimos diferentes elementos del mismo. Aunque cada uno de estos temas cuenta con áreas de especialización y funcionalidades específicas para cada caso, los cuales veremos más adelante!