Indtoducciona JavaScript
Indtoducciona JavaScript
Introducción a
JavaScript
Introducción
Hasta ahora, hemos cubierto lo básico de HTML y CSS para crear y diseñar
páginas web.
Al final de esta clase, crearás una función simple de JavaScript para mostrar una
alerta en la página HTML sobre la que vienes trabajando.
¡Empecemos!
¿Qué es JavaScript?
Como adelantamos antes, JavaScript es un lenguaje de programación utilizado
para crear páginas web interactivas. Permite crear efectos visuales y
animaciones en la página, manipular contenido en tiempo real, crear formularios
interactivos y mucho más.
Características de JavaScript
Para comenzar a aprender sobre JavaScript es importante conocer sus
características básicas, por eso, en esta oportunidad te daremos un pantallazo
de las mismas:
Conceptos básicos
Funciones
Funciones: Son bloques de código que podemos "llamar" para ejecutar una
tarea específica. Podemos crear nuestras propias funciones o usar funciones
ya existentes en JavaScript.
Palabras clave: function, return.
Estructuras de control
Sintaxis de JavaScript
Una sintaxis es la forma en la que están dispuestos y ordenados los componentes
de un lenguaje. La sintaxis de JavaScript es similar a la de otros lenguajes de
programación, pero tiene algunas particularidades propias:
Esta sería una sentencia simple por lo que está encerrada entre paréntesis. (No te
preocupes ahora por comprender la composición total de la sentencia y su
función, eso lo iremos viendo a medida que avancemos).
Por otro lado, podemos observar la siguiente sintaxis para este otro comando de
JavaScript:
¡Manos a la obra!
1. En una nueva pestaña del navegador, hacer clic derecho > “Inspeccionar”.
2. Luego, ir a la pestaña de “Console” y ya estarás en la consola del navegador.
También puedes hacerlo presionando F12 en la mayoría de los navegadores
3. Probar de escribir algunos comandos simples, como “Hola Mundo” (usar las
comillas) o 2 + 2.
4. Dar un “Enter” en la consola y observar lo que sucede.
Ver video
Ahora bien, pasemos a comprender qué elementos pueden formar parte de estos
códigos. JavaScript tiene varios elementos fundamentales que son esenciales
para poder escribir código en este lenguaje:
Variables y constantes
Tipos de datos
Operadores
Variables y constantes
Las variables son contenedores de datos que pueden cambiar a lo largo del
tiempo. No necesitan ser definidas con un tipo de dato específico ya que el
lenguaje determina automáticamente el tipo de dato de una variable cuando se
le asigna un valor.
Para entenderlo mejor, piensa en una caja donde puedes guardar diferentes
cosas. En JavaScript, la caja representa una variable, y puedes guardar en ella
objetos de cualquier tipo sin tener que especificar qué tipo de objeto es. Por
ejemplo, puedes guardar una manzana (fruta) en la caja, y luego cambiarla por
una camiseta (ropa) sin problemas. JavaScript se encarga de identificar
automáticamente el tipo de objeto que hay en la caja en cada momento.
Las variables se pueden definir usando la palabra clave "let" o "var" seguida del
nombre de la variable y opcionalmente un valor inicial.
La principal diferencia entre "let" y "var" es que las variables "let" tienen un
ámbito de bloque, lo que significa que solo son accesibles dentro de ese bloque,
mientras que las variables "var" tienen un ámbito de función o global, lo que
quiere decir que pueden ser accedidas desde cualquier lugar dentro de la
función o del ámbito global.
Se recomienda usar let en lugar de var en la mayoría de los casos, ya que puede
ayudar a evitar errores y hacer que el código sea más fácil de entender. Sin
embargo, es importante tener en cuenta el contexto en el que se está trabajando
y elegir la palabra clave que mejor se adapte a las necesidades del proyecto en
cuestión.
Constantes
Las constantes, por otro lado, son contenedores de valores que no cambian
durante la ejecución del programa. Una vez que se ha asignado un valor a una
constante, no se puede cambiar (Valor inmutable).
Tipo de datos
JavaScript tiene varios tipos de datos que es importante conocer para poder
manipularlos adecuadamente en el código, y comprender mejor cómo funciona
este lenguaje de programación. Entre ellos se incluyen:.
¡Manos a la obra!
1. En una nueva pestaña del navegador, abrir la consola del navegador (puedes
hacerlo presionando F12 en la mayoría de los navegadores).
2. Ingresar los siguientes comandos uno por uno y presiona enter después de
cada uno:
typeof 5
typeof "Hola"
typeof true
typeof {}
3. Observar los resultados que se muestran en la consola para cada uno de los
comandos.
4. Comparar los resultados y tratar de entender qué tipo de dato representa
cada uno de ellos.
Operadores
¡Muy bien! De los elementos fundamentales ya vimos las variables y constantes y
los tipos de datos. Nos quedan por ver entonces los operadores.
Los operadores son herramientas esenciales para manipular el valor de las
variables, realizar cálculos complejos y tomar decisiones lógicas en función de
comparaciones y otros tipos de condiciones.
→
Sintaxis Las funciones se definen utilizando la palabra clave "function",
seguida del nombre de la función y los parámetros que recibe, si es que los
hay. El cuerpo de la función se encierra en llaves { }.
Por ejemplo, aquí está la sintaxis básica de una función que toma dos
números y los suma:
→
Parámetros y argumentos Los parámetros son variables que se utilizan
dentro de la función para realizar una tarea específica y los argumentos son
los valores reales que se pasan a la función cuando se llama.
Por ejemplo, si llamamos a la función sumar(2, 3), “2” y “3” son los argumentos
que se pasan a la función, y num1 y num2 son los parámetros que se utilizan
para realizar la suma.
→
Retorno de valores Las funciones pueden devolver valores utilizando la
palabra clave "return". Los valores devueltos pueden ser de cualquier tipo de
datos.
Por ejemplo, la función “sumar” devuelve un valor numérico, en este caso “5”.
Por ejemplo, aquí vemos una función anónima que toma un número y lo duplica:
1.Crear un nuevo archivo en tu editor de texto y guardalo con una extensión ".js",
como "script.js". Este archivo contendrá nuestro código JavaScript.
3.Crear una función simple de JavaScript en el archivo "script.js" que mostrará una
alerta cuando se llame:
Ten en cuenta que en JavaScript los paréntesis son necesarios para llamar o
ejecutar una función. Sin los paréntesis, solo se hace referencia a la función, pero
no se ejecuta
Esta función, cuando se llame, mostrará una alerta del navegador con el mensaje:
"¡Hola, esta es una alerta desde JavaScript!".
4.Para llamar a esta función desde tu página HTML, necesitamos agregar un botón
que active la función al hacer clic.
Este código agrega un botón con el texto "¡Haz clic en mí!" y un atributo onclick,
que llama a la función “showAlert()” cuando se hace clic en el botón.
Ahora deberías ver el botón "¡Haz clic en mí!" en tu página web. Haz clic en el botón
y aparecerá la alerta con el mensaje: "¡Hola, esta es una alerta desde JavaScript!".
¡Desafío terminado!
¡Felicidades!
Has creado una función simple de JavaScript y la has integrado con éxito en tu
página HTML.
En el siguiente encuentro, profundizaremos en JavaScript, cubriendo eventos y
oyentes de eventos, manejo y validación de formularios. Estos conceptos te
ayudarán a agregar más interactividad y contenido dinámico a tus páginas web.
Realizar test
Ten en cuenta que si has llegado hasta aquí, ya has cumplido con el objetivo del
encuentro.
¡Hasta la próxima!