JAVASCRIPT

SUBMÓDULO 2: DESARROLLA APLICACIONES QUE SE EJECUTAN EN EL CLIENTE
DURACIÓN:6 HRS. TEÓRIA: Martes, Miércoles y Jueves TALLER: Martes/Miércoles

Semana 4: ¿Qué es JavaScript Actividad 1: Cuadro sinóptico.
Instrucción:
1. Leer e interpretar el siguiente el tema: ¿Qué es JavaScript?
2. Identificar ideas principales y secundarias. Analiza la información más importante
del texto, organiza y acomoda estableciendo nexos o relaciones entre los conceptos
principales.
3. Redactar la oración y determinar un concepto/idea y definición.
4. En hojas blancas realiza el trazo de tu cuadro sinóptico (puedes unir las hojas)
Tema: ¿Qué es JavaScript?

JavaScript es un lenguaje de programación que permite agregar interactividad y dinamismo a las
páginas web.
Con JavaScript, los desarrolladores pueden crear sitios web más atractivos y funcionales, ya que
permite la manipulación del contenido de la página, la comunicación con el servidor y la
realización de cálculos en tiempo real, entre otras cosas.
Diferencias entre HTML, CSS y JavaScript

Para entender mejor qué es JavaScript, es útil diferenciarlo de otros dos lenguajes de
programación relacionados con la creación de sitios web: HTML y CSS.
1. HTML (Hypertext Markup Language) es el lenguaje que se utiliza para estructurar el
contenido de una página web. Define elementos como encabezados, párrafos, listas y
enlaces.
2. CSS (Cascading Style Sheets) se encarga del diseño y estilo de la página web. Permite
aplicar colores, fuentes, tamaños y espaciado, entre otros aspectos visuales.
3. JavaScript agrega interactividad y dinamismo a la página web, permitiendo que el usuario
interactúe con el contenido y realice acciones sin necesidad de recargar la página.
Historia de JavaScript
JavaScript fue creado en 1995 por Brendan Eich, quien trabajaba en la empresa Netscape
Communications. En aquel entonces, se buscaba un lenguaje de programación fácil de aprender
y usar que permitiera a los desarrolladores crear páginas web interactivas.
Eich desarrolló el primer prototipo de JavaScript en tan solo 10 días, y su éxito fue tal que pronto
se convirtió en un estándar en la industria.
En 1997, JavaScript fue adoptado como un estándar por la organización ECMA International, que
publicó la especificación oficial del lenguaje llamada ECMAScript.
Desde entonces, ECMAScript ha pasado por varias versiones y actualizaciones, y JavaScript se ha
mantenido como el lenguaje de programación basado en ECMAScript más popular y
ampliamente utilizado en todo el mundo.
¿Para qué sirve JavaScript?
JavaScript es fundamental en el desarrollo web y tiene numerosas aplicaciones. Veamos algunas
de las más comunes:
Interacción con el usuario
Una de las funciones principales de JavaScript es permitir la interacción entre el usuario y la
página web. Esto se logra mediante la manipulación del Document Object Model (DOM), que es
una representación estructurada de los elementos de la página.
Con JavaScript, es posible crear elementos interactivos como botones, formularios, menús
desplegables y carruseles de imágenes, entre otros.
Validación de formularios
JavaScript es muy útil para validar la información ingresada por el usuario en un formulario antes
de enviarla al servidor.
Esto permite detectar errores y solicitar al usuario que corrija la información antes de enviarla,
lo que reduce la carga en el servidor y mejora la experiencia del usuario.
Animaciones y efectos visuales

Con JavaScript, es posible crear animaciones y efectos visuales que hacen que las páginas web
sean más atractivas y dinámicas.
Por ejemplo, se pueden realizar transiciones suaves entre páginas, crear efectos de parallax
scrolling y animar elementos de la página al hacer scroll o al pasar el cursor por encima.
Comunicación con el servidor

JavaScript permite la comunicación entre el navegador y el servidor sin necesidad de recargar la
página. Esto se logra mediante el uso de AJAX (Asynchronous JavaScript and XML), que permite
enviar y recibir información en segundo plano.
Esto es especialmente útil en aplicaciones web como redes sociales, correo electrónico y
sistemas de gestión de contenidos.
Aplicaciones web de una sola página (SPA)

Una de las tendencias en el desarrollo web es la creación de aplicaciones web de una sola página
o SPA (Single Page Application). Estas aplicaciones cargan una única página HTML y luego utilizan
JavaScript para actualizar dinámicamente el contenido según las acciones del usuario.
Esto permite una experiencia de navegación más rápida y fluida, similar a la de una aplicación
de escritorio.
¿Qué es TypeScript?
TypeScript es un lenguaje de programación que fue creado por Microsoft en 2012. Es un superset
de JavaScript, lo que significa que incluye todas las características de JavaScript y algunas
adicionales, como la posibilidad de usar tipado estático.
El tipado estático permite a los desarrolladores definir el tipo de datos que una variable puede
almacenar, lo que ayuda a detectar errores antes de que el código se ejecute.
Aunque TypeScript no es tan conocido como JavaScript, su popularidad ha ido en aumento
debido a que ofrece algunas ventajas en cuanto a la detección temprana de errores y la facilidad
de mantenimiento del código.
Sin embargo, es importante mencionar que TypeScript no reemplaza a JavaScript, sino que
complementa sus características y permite a los desarrolladores escribir código más seguro y
eficiente.
Empezando con JavaScript

Ahora que conoces qué es JavaScript y para qué sirve, es momento de aprender cómo utilizarlo.
Para ello, sigue estos pasos:
1. Añade JavaScript a tu página web

Para agregar JavaScript a tu página, debes incluir el siguiente código en tu archivo HTML:
<script>
// Aquí va tu código JavaScript
</script>
Puedes colocar este código en cualquier parte de tu archivo HTML, aunque generalmente se
coloca al final del cuerpo (<body>).
2. Variables y tipos de datos

En JavaScript, podemos almacenar información en variables. Para crear una variable, utilizamos
la palabra clave var, let o const, seguida del nombre de la variable y su valor.
Por ejemplo:
var nombre = "Juan";
let edad = 25;
const pi = 3.141592;
Existen varios tipos de datos en JavaScript, como números, cadenas de texto (strings), objetos y
más.
A continuación, algunos ejemplos:

• Números: var numero = 42;
• Strings: var texto = "¡Hola, mundo!";
• Objetos: var persona = {nombre: "Juan", edad: 25};
• Arrays: var colores = ["rojo", "verde", "azul"];
3. Operadores y expresiones
Los operadores nos permiten realizar operaciones matemáticas, comparaciones y asignaciones
en JavaScript.
Algunos ejemplos de operadores son:

• Aritméticos: +, -, *, /, %
• Comparación: ==, ===, !=, !==, <, >, <=, >=
• Asignación: =, +=, -=, *=, /=, %=
Las expresiones son combinaciones de valores, variables y operadores que JavaScript evalúa para
obtener un resultado.
Ejemplo:
var resultado = (10 + 5) * 2; // resultado será 30
4. Funciones
Las funciones son bloques de código que podemos llamar múltiples veces para realizar una tarea
específica. Para crear una función en JavaScript, utilizamos la palabra clave function, seguida del
nombre de la función, los parámetros y el cuerpo de la función.
Por ejemplo:
function saludar(nombre) {
console.log("¡Hola, " + nombre + "!");
}
saludar("Juan"); // Imprime "¡Hola, Juan!"
5. Condicionales y bucles
Los condicionales nos permiten ejecutar diferentes bloques de código dependiendo de ciertas
condiciones.
Por ejemplo, con la estructura if...else:

if (edad >= 18) {
console.log("Eres mayor de edad");
} else {
console.log("Eres menor de edad");
}
Los bucles nos permiten repetir un bloque de código mientras se cumpla una condición.
Por ejemplo, el bucle for:
for (var i = 0; i < 5; i++) {
console.log(i); // Imprime los números del 0 al 4
}
6. Eventos y manipulación del DOM

El DOM (Document Object Model) es la representación en árbol de los elementos de una página
web. Con JavaScript, podemos manipular el DOM para cambiar el contenido, los atributos y los
estilos de los elementos. Por ejemplo, podemos cambiar el contenido de un elemento con el
siguiente código:
document.getElementById("miElemento").innerHTML = "Nuevo contenido";
Los eventos son acciones que ocurren en la página, como hacer clic en un botón o cargar una
imagen. Podemos utilizar JavaScript para “escuchar” estos eventos y ejecutar funciones cuando
ocurran.
Ejemplo:
document.getElementById("miBoton").addEventListener("click", function () {
console.log("¡Botón presionado!");
});
Conclusión
JavaScript es un lenguaje de programación esencial en el mundo del desarrollo web. Ha
revolucionado la forma en que creamos y experimentamos las páginas web, permitiendo
interactividad, validación de formularios, animaciones y comunicación con el servidor sin
recargar la página.
Ahora que conoces qué es JavaScript, su historia, su relación con TypeScript y para qué sirve,
estás listo para adentrarte en el mundo del desarrollo web y crear sitios web interactivos y
atractivos.
No importa si eres un principiante o un experto en programación, JavaScript es una herramienta
fundamental que te permitirá llevar tus proyectos al siguiente nivel. ¡Anímate a explorar sus
posibilidades y transforma la web con tus ideas!
SUBMÓDULO 2: DESARROLLA APLICACIONES QUE SE EJECUTAN EN EL CLIENTE
DURACIÓN:6 HRS. TEÓRIA: Martes, Miércoles y Jueves TALLER: Martes/Miércoles
Semana 4: ¿Qué es JavaScript Actividad 1: Cuadro sinóptico.
Instrucción:
1. Leer e interpretar el siguiente el tema: ¿Qué es JavaScript?
2. Identificar ideas principales y secundarias. Analiza la información más importante
del texto, organiza y acomoda estableciendo nexos o relaciones entre los conceptos
principales.
3. Redactar la oración y determinar un concepto/idea y definición.
4. En hojas blancas realiza el trazo de tu cuadro sinóptico (puedes unir las hojas)
INSTRUMENTO DE EVALUACIÓN Lista de cotejo
Nombre del alumno: _____________________________________ Grupo:4D Programación
Criterios Puntaje Puntaje del

criterio alumno
1. Concepto principal. El concepto principal es adecuado y pertinente con 1
el tema.
2. Concetos subordinados. Incluyó todos los conceptos importantes que 1
representa la información principal del tema.
3. Estructura. Presenta estructura jerárquica horizontal completa y 3
equilibrada, con una organización clara y de fácil interpretación.
4. Profundidad del tema. El tema se expresa con todos sus elementos de forma 3
clara y concreta.
5. Presentación y ortografía. Incluye nombre del alumno, bibliografía y 2
no presenta errores de ortografía.
Recuerda que los cuadros sinópticos son una forma de estructurar la información, para también
para determinar la forma como las personas organizan las ideas en sus mentes y como las
representan y agrupan.
https://www.um.es/docencia/barzana/DAWEB/Lenguaje-de-programacion-JavaScript-1.pdf
https://oregoom.com/html/

JAVASCRIPT

Cargado por

Copyright:

Formatos disponibles

JAVASCRIPT

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

JAVASCRIPT

Cargado por

Copyright:

Formatos disponibles

SUBMÓDULO 2: DESARROLLA APLICACIONES QUE SE EJECUTAN EN EL CLIENTE

DURACIÓN:6 HRS. TEÓRIA: Martes, Miércoles y Jueves TALLER: Martes/Miércoles

Tema: ¿Qué es JavaScript?

Diferencias entre HTML, CSS y JavaScript

Animaciones y efectos visuales

Comunicación con el servidor

Aplicaciones web de una sola página (SPA)

Empezando con JavaScript

1. Añade JavaScript a tu página web

2. Variables y tipos de datos

A continuación, algunos ejemplos:

Algunos ejemplos de operadores son:

Por ejemplo, con la estructura if...else:

6. Eventos y manipulación del DOM

INSTRUMENTO DE EVALUACIÓN Lista de cotejo

Nombre del alumno: _____________________________________ Grupo:4D Programación

Criterios Puntaje Puntaje del

También podría gustarte