Evaluación JavaScript
Revisa las siguiente tabla y escribe en tu valoración (autoevaluación) una ✓ según el semáforo: 🖸 si no cumpliste con el indicador, 🖸 si estás en proceso de conseguirlo y 🖸 si lo has cumplido en su totalidad.
Indicador | Autoevaluación |
Comprendió el concepto de algoritmo, d. de flujo y pseudocódigo | 🖸🖸🖸 |
Comprendió el concepto de variable y constante | 🖸🖸🖸 |
Tomó nota sin faltas de ortografía. | 🖸🖸🖸 |
Realizó las actividades y las entrego a tiempo | 🖸🖸🖸 |
Elaboró y entregó prácticas en tiempo y forma | 🖸🖸🖸 |
Programación en JavaScript
¿Qué es programación?
Es el proceso de crear un conjunto de instrucciones o código que le indica a una computadora como llevar a cabo una tarea especifica.
Navegador web
Imágenes, audio, video, etc.
Documento digital complejo
Forma parte
.HTML – .XHTML
Página Web
Acceso
Sitio web
¿Qué es una pagina web HTML?
¿ QUÉ ES HTML?
Bloc de notas
Curiosidad
¿Qué necesito para crear una página web?
Página web
<html>
<head>
<title>Primera página</title>
</head>
<body>
</body>
</html>
DOM
Es un lenguaje. Su función principal es controlar el diseño y la presentación visual de una página web.
¿Qué es CSS(Cascading Style Sheet)?
Es un lenguaje de programación que se usa principalmente para hacer que las páginas web sean interactivas y dinámicas.
¿Qué es JAVASCRIPT?
HTML – CSS - JAVASCRIPT
1. Abre el Bloc de Notas.
2. Escribe o pega el código HTML de la página web.
3. Haz clic en "Archivo" > "Guardar como...".
4. En "Tipo", selecciona "Todos los archivos (.)".
5. En "Nombre", escribe el nombre del archivo seguido de la extensión .html (por ejemplo, pagina.html).
¿Cómo guardar mi página en el bloc de notas?
1. Abre el archivo .html en el Bloc de Notas.
2. Realiza las modificaciones necesarias en el código HTML y JavaScript.
3. Guarda los cambios.
4. Actualiza la página en el navegador para ver los cambios reflejados.
¿Cómo editar mi página en el bloc de notas?
¿Puedo crear juegos en HTM, JS y CSS con IA?
¿Qué es una variable y que es una constante?
Variable: Es un espacio de almacenamiento en un programa de computadora que puede contener diferentes valores.
Constante: Es un valor que no cambia durante la ejecución del programa. Es decir, una vez que se define su valor permanece constante, durante la ejecución del programa.
Variable y Constante
ACTIVIDAD:
Anotar en su cuaderno ejemplos de variables y constantes que hayan utilizado en matemáticas o física:
Variables: edad=13, calificación=10, hdormir=2.
Constantes: PI=3.1416, c=299,792,453 m/s.
Ejemplos variable y constante
- Algoritmo
- Pseudocódigo
- Diagrama de flujo
- Código
Antes de iniciar a programar en JavaScript
1.- Iniciar el proceso para saludar
2.- Escribir en pantalla ‘hola’
3.- Fin del proceso
Secuencia de pasos o reglas definidas y ordenadas que describe como llevar a cabo una tarea o resolver un problema específico.
Ejemplo:¿Cómo hacer que la computadora muestre un mensaje de “Hola”?
Algoritmo
Inicio
Escribir “Hola”
Fin
Describe los pasos y la lógica de un proceso de manera clara y comprensible, facilitando la comprensión del algoritmo.
Ejemplo:¿Cómo hacer que la computadora muestre un mensaje de “Hola”?
Pseudocódigo
Es una representación gráfica de un proceso, utiliza símbolos y flechas para mostrar el flujo.
inicio
escribir Hola
fin
Diagrama de flujo
<html>
<head>
<title>
</title>
</head>
<body>
<script>
alert('Hola');
</script>
</body>
</html>
Ejemplo:¿Cómo mostrar un mensaje de “Hola”?
Código
<script>
alert(‘Hola como estas’);
alert(‘Muy bien y tu’);
</script>
En equipos, realizar un algoritmo, pseudocódigo, diagrama de flujo y código en donde se muestren dos mensajes, uno que diga, “Hola como estas” y el otro, “Muy bien y tu”.
Actividad
TIPO DE DATO | RANGO DE VALOR |
Entero | Para variables o constantes que tengan 17 cifras |
Flotante | Para variables o constantes que contengan numero decimal. |
Tipos de datos
1.- Iniciar el proceso para mostrar PI
2.- Asignarle un valor a PI
3.- Escribir en pantalla 3.1416
4.- Fin del proceso
Secuencia de pasos o reglas definidas y ordenadas que describe como llevar a cabo una tarea o resolver un problema específico.
Ejemplo:¿Cómo hacer que la computadora muestre el valor de PI?
Algoritmo - tarea
Inicio
Declarar PI
Escribir PI
Fin
Describe los pasos y la lógica de un proceso de manera clara y comprensible, facilitando la comprensión del algoritmo.
Ejemplo:¿Cómo hacer que la computadora muestre el valor de PI?
Pseudocódigo - tarea
Es una representación grafica de un proceso, utiliza símbolos y flechas para mostrar el flujo.
inicio
escribir PI
fin
PI:flotante
Diagrama de flujo - tarea
<html>
<head>
<title>
</title>
<body>
</head>
<body>
<script>
const PI=3.1416;
alert(‘El valor de PI es ’+PI);
</script>
</body>
</html>
Ejemplo:¿Cómo mostrar el valor de PI?
Código - tarea
<body>
<script>
const congelacion=0;
alert(‘La temperatura de congelación del agua es ’+congelacion);
</script>�</body>
En equipos, realizar un algoritmo, pseudocódigo, diagrama de flujo y código en donde se muestre un mensaje indicando la temperatura de congelación del agua en grados Celsius.
Actividad
1.- Inicio
2.- Identificar las variable a utilizar.
3.- Leer primer numero
4.- Almacenarlo en la variable num1
5.- Leer el segundo numero
6.- Almacenarlo en la variable num2
7.- Calcular la suma
8.- Escribir en pantalla el resultado de la suma
9.- Fin
Ejemplo:¿Cómo sumar dos números enteros?
Algoritmo
Inicio
Declarar num1, num2, suma
Leer num1
Leer num2
suma=num1+num2
Escribir suma
Fin
Ejemplo:¿Cómo sumar dos números enteros?
Pseudocódigo
Es una representación gráfica de un proceso, utiliza símbolos y flechas para mostrar el flujo.
inicio
Leer num1
Leer num2
suma=num1+num2
escribir suma
fin
num1,num2, suma: entero
Diagrama de flujo
<body>
<script>
var numero1=0;
var numero2=0;
var suma=0;
numero1= prompt('Ingresa el primer numero');
numero2= prompt('Ingresa el segundo numero');
numero1 = parseInt(numero1);
numero2 = parseInt(numero2);
suma = numero1 + numero2;
alert('El resultado de la suma es: ' + suma);
</script>
</body>
Ejemplo:¿Cómo sumar dos números enteros?
Código
<body>
<script>
var lado=0;
var perimetro=0;
lado= prompt('¿Cuanto mide el lado del cuadrado?:');
lado = parseFloat(lado);
perimetro = lado+lado+lado+lado;
alert('El perímetro del cuadrado es ' +perimetro);
</script>
</body>
En equipo, realiza una página web que calcule el perímetro de un cuadrado.
Actividad
¿Preguntas?
1. SublimeText
LABORATORIO DE TECNOLOGÍA
❯ Observa el tutorial y aprende que es SublimeText.
❯ Investiga en internet otros entornos parecidos a SublimeText.
❯ Investiga como guardar una página web utilizando el bloc de notas.
Ponte en línea
2. Primera pagina web
LABORATORIO DE TECNOLOGÍA
❯ Observa el tutorial y aprende a crear tu primera página web.
❯ Investiga en internet que es una etiqueta en HTML.
❯ Escribe en tu cuaderno la estructura principal de una página web.
Ponte en línea
3. Editar mi página Web
LABORATORIO DE TECNOLOGÍA
❯ Observa el tutorial y aprende a editar una página web.
❯ Investiga en internet como editar una página web con el bloc de notas.
❯ Escribe en tu cuaderno los pasos para editar una página web.
Ponte en línea
4. Listas HTML
LABORATORIO DE TECNOLOGÍA
❯ Observa el tutorial y aprende a generar listas en HTML
❯ Investiga en internet que es una lista en HTML.
❯ Escribe en tu cuaderno el código para generar una lista en HTML.
Ponte en línea
5. Insertar imágenes en HTML
LABORATORIO DE TECNOLOGÍA
❯ Observa el tutorial y aprende a insertar imágenes en HTML
❯ Investiga en internet como insertar imágenes en HTML utilizando el bloc de notas.
❯ Escribe en tu cuaderno el código para insertar una imagen en HTML.
Ponte en línea
6. Suma de dos números en Javascript
LABORATORIO DE TECNOLOGÍA
❯ Observa el tutorial y aprende a sumar dos números en JavaScript.
❯ Investiga en internet como sumar dos números en JavaScript.
❯ Escribe en tu cuaderno el código para sumar dos números en JavaScript.
Ponte en línea
7. Sentencia de control if en Javascript
LABORATORIO DE TECNOLOGÍA
❯ Observa el tutorial y aprende sobre la sentencia de control if.
❯ Investiga en internet sobre la sentencia de control if en JavaScript.
❯ Escribe en tu cuaderno el código para determinar si una persona es mayor de edad en JavaScript
Ponte en línea
8. Sentencia de control switch
LABORATORIO DE TECNOLOGÍA
❯ Observa el tutorial y aprende sobre la sentencia de control switch.
❯ Investiga en internet sobre la sentencia de control switch en JS.
❯ Escribe en tu cuaderno la estructura de la sentencia switch en JavaScript
Ponte en línea