TEMA 1: Introducción a JavaScript
Tabla de contenidos
¿Qué es JavaScript y Cómo se relaciona con HTML y CSS?
JavaScript es un lenguaje de programación que se utiliza principalmente en el desarrollo de aplicaciones web. Es un lenguaje de alto nivel, lo que significa que es más fácil de leer y escribir para los humanos que los lenguajes de bajo nivel, como el ensamblador.
- JavaScript se utiliza para añadir interactividad y dinamismo a las páginas web. Por ejemplo, se puede utilizar para validar formularios, crear animaciones, mostrar mensajes emergentes y mucho más.
- HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para estructurar el contenido de una página web. HTML define la estructura y el contenido de una página, como títulos, párrafos, enlaces y imágenes.
- CSS (Cascading Style Sheets) es el lenguaje utilizado para estilizar el contenido de una página web. CSS permite controlar el diseño y la presentación de una página.
JavaScript, HTML y CSS se utilizan juntos para crear páginas web/aplicaciones web modernas y atractivas. JavaScript se ejecuta en el lado del cliente (es decir, en el navegador del usuario), mientras que HTML y CSS se utilizan para estructurar y dar estilo al contenido de la página.
Para utilizar JavaScript en una página web, se puede incluir una etiqueta <script> en el código HTML de la página. La etiqueta <script> puede contener código JavaScript directamente o puede hacer referencia a un archivo externo con el código JavaScript.
Aquí tienes un ejemplo de cómo incluir una etiqueta <script> con código JavaScript directamente en una página HTML:
Y aquí tienes un ejemplo de cómo incluir una etiqueta <script> que hace referencia a un archivo externo llamado “mi-archivo-javascript.js con código JavaScript:
Sintaxis básica de JavaScript
- Comentarios
- Variables
- Tipos de datos
Comentarios
Los comentarios son líneas de código que se ignoran al ejecutar el programa y se utilizan para documentar y explicar el propósito del código. En JavaScript, existen dos tipos de comentarios:
- Comentarios de una línea: se escriben precedidos por dos barras diagonales (//).
- Comentarios de varias líneas: se escriben entre una barra diagonal seguida de un asterisco (/*) y un asterisco seguido de una barra diagonal (*/).
Declaración de variables
En JavaScript, existen tres tipos de variables: var, let y const.
Cada una de ellas tiene sus propias características y usos específicos.
Variables de tipo VAR
Es como se declaraban variables anteriormente. Las variables de tipo var son globales, es decir, no importa dónde se declaren que podremos acceder a ellas desde cualquier parte del código. Esto aumenta la probabilidad de que, sin darnos cuenta, haya errores.
Variables de tipo LET
A diferencia de var, las variables declaradas con let tienen un alcance de bloque y son visibles solo desde el punto de declaración hasta el final del bloque en el que se encuentran.
Variables de tipo CONST
La palabra clave const se utiliza para declarar variables que no pueden ser reasignadas. Al igual que let, las variables declaradas con const tienen un alcance de bloque.
Tipos de datos en JavaScript
JavaScript es un lenguaje de tipado dinámico, lo que significa que no es necesario especificar el tipo de datos de una variable al declararla. El tipo de datos se determina automáticamente en tiempo de ejecución.
Estos son los principales tipos de datos:
- Números: pueden ser enteros o decimales.
- Cadenas de texto: se escriben entre comillas simples (‘) o dobles («).
- Valores booleanos: true o false.
- Objetos: conjuntos de pares clave-valor que representan una entidad.
- Arrays: listas ordenadas de valores.
- Funciones: bloques de código que se pueden ejecutar más tarde.
- Valores especiales: null y undefined
Ejercicios
El Oso Yogui y las Canastas de Picnic:
Imagina que estás en el Parque Jellystone con el Oso Yogui. Te ha dicho que le des todas tus canastas de picnic, pero quieres saber cuántas tienes primero. Crea una variable que contenga el número de canastas de picnic y muéstrala en la consola.
El Bot de los Cumpleaños:
Eres un bot que organiza fiestas de cumpleaños. Crea dos variables: una para el nombre del cumpleañero y otra para su edad. Luego, imprime un mensaje de felicitación.
El Calcetín Desparejado:
Todos tenemos calcetines desparejados en el cajón. Imagina que tienes 20 calcetines en total. Crea una variable para el número total de calcetines y otra para el número de calcetines emparejados (p. ej., 7 pares). Calcula cuántos calcetines desparejados tienes.
El Gato en el Teclado:
Tienes un gato que ama caminar sobre tu teclado y escribir cosas sin sentido. Crea una variable que contenga la cadena de texto que tu gato ha escrito y luego imprímela en la consola.
Superhéroe de Fin de Semana:
Eres un superhéroe que solo trabaja los fines de semana. Crea una variable booleana que indique si hoy es fin de semana o no. Luego, imprime un mensaje en la consola que diga si es momento de salvar el mundo o no.
La Caja Misteriosa:
Tienes una caja misteriosa y quieres saber qué hay dentro. Puede contener cualquier tipo de dato en JavaScript. Crea una variable para la caja misteriosa y luego imprime en la consola el tipo de dato que contiene.
El Cambiazo:
Tienes una moneda y un billete. Crea una variable para el valor de cada uno, pero luego cambia el valor de cada variable por el del otro (sin usar números directamente). Verifica si el cambio se realizó correctamente.
let picnicBaskets = 5;
console.log(picnicBaskets);
let birthdayPerson = «Pedro»;
let age = 27;
console.log(«¡Feliz cumpleaños, «+ birthdayPerson+»! ¡Ahora tienes»+age+» años!»);
let totalSocks = 20;
let pairedSocks = 7 * 2;
let unpairedSocks = totalSocks – pairedSocks;
console.log(unpairedSocks);
let catTyping = «asjdfkjdsakjdfksd»;
console.log(catTyping);
let isWeekend = true;
if(isWeekend){
console.log(«¡Hora de salvar el mundo!»);
}else{
console.log(«Descanso del superhéroe»);
}
let mysteryBox = «Un mensaje secreto»;
console.log(typeof mysteryBox);
let coin = 1;
let bill = 5;
let temp = coin;
coin = bill;
bill = temp;
console.log(`Moneda: ${coin}, Billete: ${bill}`);
Ventajas de Sumérgete en JavaScript
Metodología con mucha práctica
La teoría está bien, y es por eso que el curso cuenta con +12h en vídeo, pero lo realmente importante es la práctica y aquí hay mucha práctica.
Profesores Profesionales
Curso diseñado y realizado por profesores profesionales con experiencia tanto en el sector de la programación como en el educativo.
Acceso de por vida
Compra el curso y ten acceso a él siempre que lo necesites. Obtendrás todas las actualizaciones.
Certificado de finalización
Realizando el Proyecto Final obtendrás un certificado de finalización. El certificado cuenta con un código de verificación, para que las empresas puedan comprobar que realmente sabes JavaScript.
Comunidad de Discord
Conecta con los profesores y otros estudiantes a través de la comunidad de Discord. Haz nuevos amigos, contactos en el sector y pide ayuda a tus profesores, todo desde una sola plataforma.
Pruébalo 14 días
No tienes que decidir ahora. Puedes acceder al curso y tomar una decisión en las próximas dos semanas. Si no te gusta el contenido o te das cuenta que el curso no es para tí, solo tienes que avisarnos y te devolvemos el 100% de tu dinero.
Testimonios de algunos estudiantes
Ellos ya han aprendido JavaScript
