Scribd
Cargar
27 vistas

Curso Básico de JavaScript

Curso Básico de JavaScript

Cargado por

Alberto Triana
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
27 vistas

Curso Básico de JavaScript

Curso Básico de JavaScript

Cargado por

Alberto Triana
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Curso Básico de JavaScript

JavaScript es un lenguaje de programación esencial para agregar interactividad y dinamismo a las


páginas web. Este curso te enseñará los conceptos básicos con ejemplos prácticos.

Lección 1: Introducción a JavaScript

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se ejecuta en el navegador y permite interactuar


con elementos HTML.

Cómo incluir JavaScript:

En línea:

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Básico</title>

</head>

<body>

<h1>Hola, Mundo</h1>

<script>

alert('¡Bienvenido a JavaScript!');

</script>

</body>

</html>

En un archivo externo:

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Externo</title>

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

</head>

<body>
<h1>Hola, Mundo</h1>

</body>

</html>

Archivo script.js:

alert('¡Bienvenido a JavaScript desde un archivo externo!');

Actividad:

1. Crea un archivo HTML e incluye un script que muestre un mensaje de alerta.

2. Usa un archivo externo para el script.

Lección 2: Variables y Tipos de Datos

Declaración de variables:

let nombre = "Juan"; // Variable que puede cambiar

const edad = 25; // Variable constante

Tipos de datos:

• String: Cadenas de texto.

• let mensaje = "Hola, Mundo";

• Number: Números.

• let numero = 42;

• Boolean: Valores verdaderos o falsos.

• let esVerdad = true;

Actividad:

1. Declara variables con tus datos personales (nombre, edad, etc.).

2. Imprime las variables en la consola:

3. console.log(nombre);

4. console.log(edad);

Lección 3: Operaciones Básicas

Operadores:

let suma = 5 + 3; // 8
let resta = 10 - 7; // 3

let multiplicacion = 4 * 2; // 8

let division = 20 / 5; // 4

Actividad:

1. Crea un script que realice las operaciones básicas con dos números.

2. Imprime los resultados en la consola.

Lección 4: Condicionales

Sintaxis básica:

let edad = 18;

if (edad >= 18) {

console.log("Eres mayor de edad");

} else {

console.log("Eres menor de edad");

Actividad:

1. Crea un programa que determine si un número es par o impar.

Lección 5: Bucles

Bucle for:

for (let i = 0; i < 5; i++) {

console.log("Número: " + i);

Bucle while:

let i = 0;

while (i < 5) {

console.log("Número: " + i);

i++;

}
Actividad:

1. Crea un programa que imprima los números del 1 al 10 usando un bucle.

2. Usa un bucle para calcular la suma de los números del 1 al 10.

Lección 6: Funciones

Definición de funciones:

function saludar(nombre) {

return "Hola, " + nombre + "!";

console.log(saludar("Ana"));

Actividad:

1. Crea una función que sume dos números y devuelva el resultado.

2. Llama a la función e imprime el resultado en la consola.

Lección 7: Interactuar con HTML

Modificar contenido:

<!DOCTYPE html>

<html>

<head>

<title>Interacción</title>

</head>

<body>

<h1 id="titulo">Hola</h1>

<button onclick="cambiarTexto()">Cambiar Texto</button>

<script>

function cambiarTexto() {

document.getElementById("titulo").innerHTML = "¡Texto Cambiado!";

}
</script>

</body>

</html>

Actividad:

1. Crea un botón que cambie el color de un párrafo al hacer clic.

Lección 8: Proyecto Final

Desafío:

1. Crea una página web interactiva que incluya:

o Un formulario para capturar nombre y edad.

o Un botón que muestre un saludo personalizado al usuario.

o Un contador que se incremente al hacer clic en un botón.

Ejemplo Final:

<!DOCTYPE html>

<html>

<head>

<title>Proyecto Final</title>

</head>

<body>

<h1>Interactividad con JavaScript</h1>

<h2>Formulario</h2>

<label for="nombre">Nombre:</label>

<input type="text" id="nombre">

<label for="edad">Edad:</label>

<input type="number" id="edad">

<button onclick="saludar()">Saludar</button>

<p id="saludo"></p>
<h2>Contador</h2>

<button onclick="incrementar()">Incrementar</button>

<p id="contador">0</p>

<script>

function saludar() {

const nombre = document.getElementById("nombre").value;

const edad = document.getElementById("edad").value;

document.getElementById("saludo").innerHTML = `Hola, ${nombre}. Tienes ${edad} años.`;

let contador = 0;

function incrementar() {

contador++;

document.getElementById("contador").innerHTML = contador;

</script>

</body>

</html>

También podría gustarte