Curso de Lógica de Programación (HTML Y Javascript)

CURSO DE LÓGICA DE PROGRAMACIÓN
(HTML y JAVASCRIPT)
HTML
Comandos HTML
JAVASCRIPT
Bibliotecas y Frameworks JavaScript
Tipos de Variables
Comandos JavaScript
Actividades de clase: Logica de programación (Primeros Pasos)
Actividades de clase: Logica de programación (Conceptos Primordiales)
Actividades de clase: Animaciones y juegos
HTML
HTML (Hypertext Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Con
HTML, se pueden estructurar y formatear documentos web al agregar texto, imágenes, enlaces, videos, y otros
elementos multimedia en la página. HTML utiliza una sintaxis basada en etiquetas que se utilizan para definir la
estructura y el contenido de una página web.
Las etiquetas HTML se componen de ángulos (< y >) y se utilizan para encerrar contenido en una página web. Por
ejemplo, la etiqueta <p> se utiliza para indicar un párrafo de texto, la etiqueta <img> se utiliza para insertar una
imagen en la página, y la etiqueta <a> se utiliza para crear enlaces a otras páginas o sitios web.
Además de las etiquetas, HTML también utiliza atributos para proporcionar información adicional sobre los
elementos de una página web. Por ejemplo, el atributo href se utiliza en la etiqueta <a> para especificar la URL a
la que se debe dirigir un enlace, y el atributo src se utiliza en la etiqueta <img> para especificar la ruta de la
imagen que se debe mostrar.
Comandos HTML
1. <!DOCTYPE html> - Indica el tipo de documento HTML.
2. <html></html> - Define el principio y el final del documento HTML.
CURSO DE LÓGICA DE PROGRAMACIÓN (HTML y JAVASCRIPT) 1

3. <head></head> - Contiene información sobre el documento HTML, como el título de la página, la referencia a
hojas de estilo y otros metadatos.
4. <title></title> - Define el título de la página.
5. <body></body> - Contiene todo el contenido visible en la página web.
6. <h1></h1> a <h6></h6> - Define los encabezados de la página, desde el título principal (h1) hasta el
encabezado más pequeño (h6).
7. <p></p> - Define un párrafo de texto.
8. <a></a> - Define un enlace a otra página web o a un archivo en la misma página.
9. <ul></ul> - Define una lista sin ordenar.
10. <ol></ol> - Define una lista ordenada.
11. <li></li> - Define un elemento de lista.
12. <tr></tr> - Define una fila de una tabla.
13. <th></th> - Define una celda de encabezado en una tabla.
14. <td></td> - Define una celda de datos en una tabla.
15. <form></form> - Define un formulario para enviar datos al servidor.
16. <input> - Define un campo de entrada en un formulario.
17. <button></button> - Define un botón en un formulario.
18. <select></select> - Define un menú desplegable en un formulario.
19. <option></option> - Define una opción en un menú desplegable.
20. <textarea></textarea> - Define un área de texto en un formulario.
21. <label></label> - Define una etiqueta para un elemento de formulario.
22. <div></div> - Define una sección genérica de la página web.
23. <span></span> - Define una sección pequeña y genérica de la página web.
JAVASCRIPT
JavaScript es un lenguaje de programación interpretado utilizado principalmente en el desarrollo web. Es un
lenguaje de programación orientado a objetos, basado en prototipos y tiene una sintaxis similar a la de Java.
JavaScript se utiliza para crear interactividad y dinamismo en las páginas web, permitiendo la creación de efectos
visuales, validaciones de formularios, animaciones y otras funcionalidades.
JavaScript se ejecuta en el lado del cliente, lo que significa que se ejecuta en el navegador web del usuario. El
código JavaScript se puede insertar directamente en una página HTML o en un archivo JavaScript separado que
se enlaza a la página HTML.
JavaScript es compatible con muchos frameworks y librerías, como jQuery, React, Angular y Vue.js, lo que hace
que sea fácil y rápido crear aplicaciones web dinámicas y responsivas. También es posible utilizar JavaScript en el
lado del servidor utilizando plataformas como Node.js.
Bibliotecas y Frameworks JavaScript

1. React: Una biblioteca de código abierto desarrollada por Facebook para construir interfaces de usuario.
2. Angular: Un framework de código abierto desarrollado por Google para construir aplicaciones web y móviles.
3. Vue.js: Un framework progresivo de JavaScript para construir interfaces de usuario.
4. jQuery: Una biblioteca de JavaScript rápida, pequeña y con muchas funciones para simplificar la manipulación
del DOM.
5. Express.js: Un framework de aplicaciones web de código abierto para Node.js.
6. D3.js: Una biblioteca de JavaScript para visualizar datos usando HTML, SVG y CSS.
7. Three.js: Una biblioteca de JavaScript para crear y mostrar gráficos 3D en la web.
8. Socket.IO: Una biblioteca de JavaScript que permite la comunicación en tiempo real entre el cliente y el
servidor.
9. Underscore.js: Una biblioteca de JavaScript que proporciona una amplia variedad de utilidades útiles para la
programación.
10. Lodash: Una biblioteca de JavaScript que proporciona una amplia variedad de utilidades de programación de
alta calidad.
Tipos de Variables
1. string : Variables que contienen texto o cadenas de caracteres.
2. number : Variables que contienen valores numéricos, ya sea enteros o decimales.
3. boolean : Variables que contienen valores de verdad ( true o false ).
4. null : Variables que tienen un valor nulo intencionalmente asignado.
5. undefined : Variables que no tienen un valor asignado o que tienen el valor undefined .
6. bigint : Variables que contienen números enteros muy grandes.
7. symbol : Variables que contienen valores únicos e inmutables, se utilizan a menudo para identificar
propiedades de objetos.
8. Array : Variables que contienen una lista de valores, pueden ser de cualquier tipo de dato.
9. Object : Variables que contienen propiedades y métodos. Pueden ser objetos predefinidos (como Date o Math )
o definidos por el usuario.
10. Function : Variables que contienen una función, se utilizan a menudo para realizar tareas repetitivas o
complejas.
Comandos JavaScript
1. console.log() : Imprime un mensaje o valor en la consola del navegador o del sistema.
2. alert() : Muestra un cuadro de diálogo con un mensaje y un botón de "Aceptar".
3. prompt() : Muestra un cuadro de diálogo con un mensaje y un campo de entrada de texto para que el usuario
introduzca un valor.
4. if...else : Estructura condicional que permite ejecutar un bloque de código si se cumple una condición y otro
bloque si no se cumple.

5. for : Estructura de bucle que permite ejecutar un bloque de código un número determinado de veces.
6. while : Estructura de bucle que permite ejecutar un bloque de código mientras se cumpla una condición.
7. switch : Estructura condicional que permite ejecutar diferentes bloques de código dependiendo del valor de
una variable.
8. function : Permite definir una función que se puede llamar y ejecutar en cualquier momento.
9. Array : Permite definir y manipular una lista de elementos en JavaScript.
10. Object : Permite definir y manipular un objeto en JavaScript, que contiene propiedades y métodos.
11. Math.random() : En JavaScript se utiliza para generar un número aleatorio entre 0 y 1 (no incluyendo 1).
12. Math.round() : En JavaScript se utiliza para redondear un número al entero más cercano. Si el número está a
mitad de camino entre dos enteros, se redondeará al entero par más cercano.
13. document.getElementById() : Permite acceder a un elemento HTML por su ID y manipular sus propiedades.
14. addEventListener(): Permite agregar un evento a un elemento HTML, como un clic o una pulsación de tecla, y
ejecutar una función cuando se produce el evento.
15. Number.isInteger(): Es un método estático de JavaScript que se utiliza para determinar si un valor es un
número entero o no. Este método devuelve true
si el valor pasado como argumento es un número entero, de lo contrario devuelve false
.
Actividades de clase: Logica de programación (Primeros Pasos)

Moira escribió el siguiente código que muestra el resultado de la tabla del 5 en la pantalla:
<meta charset="UTF-8">
<script>
document.write("5 por 1 es " + 5 * 1 + "<br>");
</script>
Problema: Si un carro tiene un tanque

de 40 litros. Usando gasolina y consumiendo todo el tanque se hace un recorrido de 480 kilómetros. ¿Cuál es la
eficiencia del carro usando gasolina? o sea, ¿cuántos kilómetros recorre el carro por cada litro de gasolina?
<meta charset = "UTF-8">

<h3>¿Alcohol o gasolina?</h3>
Problema: Si un carro tiene un tanque de 40 litros.
<br>
Usando gasolina y consumiendo todo el tanque se hace un recorrido de 480 kilómetros.

<br>
¿Cuál es la eficiencia del carro usando gasolina? o sea, ¿cuántos kilómetros recorre el carro por cada litro de gasolina?
<script>
var tanque = 40;
var total = 480;
document.write("La eficiencia de la gasolina es: "+ (total/tanque)+"km/l <br>");
total = 300;
document.write("La eficiencia del alcohol es: "+ (total/tanque)+"km/l <br>");
</script>
Salto de linea
<script>
var saltoLinea ="<br><br>";
</script>
función saltar linea
<script>
function saltoLinea(){
document.write("<br><br>");
}
</script>
función imprimir
<script>
function imprimir(frase){
document.write(frase);
}
imprimir("Hola mundo");
</script>
funciones anidadas
<script>
function saltoLinea(){
document.write("<br><br>");
}
saltoLinea();
}
imprimir("Hola mundo");
</script>
Juana tiene la costumbre de colocar siempre tres asteriscos antes y después de los mensajes de advertencia.
Veamos un ejemplo de su código:
<script>
var edad1 = 10;
var edad2 = 20;
var edad3 = 30;

var totalEdades = edad1 + edad2 + edad3;
var promedioEdades = totalEdades/3;
alert("***Total de edades es " + totalEdades + "***");
alert("***La media de las edades es " + promedioEdades + "***");
</script>
Correccion de juana:
<script>
function mostrarAlerta(mensaje) {
alert("***" + mensaje + "***");
}
var edad1 = 10;

var edad2 = 20;
var edad3 = 30;
var totalEdades = edad1 + edad2 + edad3;
var promedioEdades = totalEdades/3;
mostrarAlerta("Total de edades es " + totalEdades);

mostrarAlerta("El promedio de las edades es " + promedioEdades);
</script>
Calcular IMC
//by Ecc#6259
<h1>PROGRAMA CALCULAR IMC</h1>
<script>
function saltarLinea() {
document.write("<br>");
}
document.write(frase)
saltarLinea();
}
function calcularImc(peso,altura){
return (peso / (altura * altura))
}
var nombre = prompt("Informe su nombre")

var pesoInformado = prompt(nombre + ": Informe su peso")
var alturaInformada = prompt(nombre + ": Informe su altura")
var imcCalculado = calcularImc(pesoInformado, alturaInformada)
imprimir(nombre + ": Tu imc calculado es: "+ imcCalculado);

// uso de las condicionales
if(imcCalculado < 18.5){
imprimir("IMC abajo de lo recomendado");
}
if(imcCalculado >= 18.5){
if(imcCalculado < 25){
imprimir("IMC está dentro del intervalo normal");
}
}
if(imcCalculado >= 25){
if(imcCalculado < 30){

imprimir("IMC considerado como sobrepeso");
}
}
if(imcCalculado >= 30){
imprimir("IMC considerado como obesidad");
}
</script>
Ingresar datos del usuario

Si queremos mostrar un pop-up, que muestre una pregunta y permita al usuario ingresar con un valor, hacemos
uso de la función prompt
. Usando la función prompt
, ¿cuál de las opciones de abajo lee dos números del teclado y muestra la multiplicación de uno por el otro para el
usuario?
<script>
}
function mostrar(frase) {
saltarLinea();
}
var numero1 = prompt("Digite el primer número");

var numero2 = prompt("Digite el segundo número");
mostrar("El valor de " + numero1 + " veces " + numero2 + " es: " + (numero1 * numero2));
</script>
Actividades de clase: Logica de programación (Conceptos Primordiales)

convirtiendo texto en numero
Nuestro amigo Jorge creó un programa simple para calcular el total de invitados de su fiesta, el programa tiene
que sumar el total de invitados normales con el total de invitados VIPs. Ciertamente podría usar la calculadora,
pero le pareció relevante ejercer su conocimiento para diseñar un programa. Entonces, Jorge escribió lo siguiente:
<script>
}
function imprimir(frase) {
saltarLinea();
}
var invitados = prompt("Número de invitados");

var vips = prompt("Número de invitados VIP's");

var total = invitados + vips;
imprimir("El total de invitados es " + total);
</script>
correccion del problema
<script>
}
saltarLinea();
}
var invitados = parseInt(prompt("Número de invitados"));

var vips = parseInt(prompt("Número de invitados VIP's"));
var total = invitados + vips;
imprimir("El total de invitados es " + total);
</script>
Condicion If
if(numero >= 2 && numero < 12) {

alert("ENTRÓ!");
}
if(numero >= 10) {

alert("ENTRÓ!");
}
Condicion if/else
var contrasenha = prompt("Entra con tu contraseña");
if(contrasenha == "micontrasenha123") {
alert("Acceso liberado!");
} else {
alert("Acceso negado!");
}
Este programa, de acuerdo con la respuesta del usuario, debe mostrar el mensaje "Puedes conducir" o "No
puedes conducir". Recuerda que puede conducir solo quien tiene 18 años o más y también quien tiene una
licencia de conducir.

<script>
}
saltarLinea();
}
var edad = parseInt(prompt("¿Cuál es tu edad?"));

var tieneLicencia = prompt("¿Tienes licencia? Responde S o N");
if(edad >= 18 && tieneLicencia == "S")
imprimir("Puedes conducir");
else
imprimir("No puedes conducir");
</script>
Juego de adivinacion
<h1>PROGRAMA JUEGO DE ADIVINACION </h1>

<script>
}
saltarLinea();
}
var numeroPensado = Math.round(Math.random()*10);
var intentos = 3;
var contador = 1;
while (contador <= intentos) {

var numeroLanzado = parseInt(prompt("Ingrese un número entre 0-10"));
if (numeroPensado == numeroLanzado){
//corregir aquí
alert("usted acertó, en el intento " + contador + " el número pensado era " + numeroPensado);
break;
}
else {
alert("usted erró");
}
contador++;
}
if (numeroPensado == numeroLanzado){
//corregir aquí
imprimir("usted acertó, en el intento " + contador + " el número pensado era " + numeroPensado);
}
else {
imprimir("usted erró, el número pensado era " + numeroPensado);
}
imprimir("fin");
</script>
Uso del While
<script>

}
saltarLinea();
}
function sortearNumero() {
return Math.round(Math.random() * 100);

}
var numeroPensado = sortearNumero();
var numeroLanzado = parseInt(prompt("Ingrese un número entre 0-10: "));
if(numeroLanzado == numeroPensado) {
imprimir("Uau! Vos acertaste, pues yo pensé en el número " + numeroPensado);

} else {
var contador = 1;
while(contador < 10) {
imprimir("¡Se acabó, vos erraste!");

contador = contador +1;
}
}
</script>
Contador con For
for( var contador = 1; contador <= 10; contador++ ) {

alert("Contador actual: " + contador);
}
¿Listo para un ejercicio que te hará romper un poco la cabeza? Usando la instrucción while , imprime todos los
números pares del 1 al 100 y al final imprime la palabra "FIN".
<h1>Numeros Pares </h1>

<script>
function imprimir(a){
document.write(a + "<br>");
}
var contador = 1;
while(contador <= 100){
if(contador%2 == 0)
imprimir (contador + " es un numero par");
if(contador == 100)
imprimir("FIN!");
contador++;
}
/* while (iteracion <= 100){
if (Number.isInteger(iteracion/2)) {
imprimir("El numero " + iteracion + " es par.");
iteracion++;
} else {
iteracion++;
}
}*/
</script>

Cambia el código anterior para que el usuario tenga 3 intentos de inicio de sesión. Atención: si lo hace bien en el
primer intento, no tiene sentido seguir preguntando por su nombre de usuario y contraseña.
<script>
var inicioDeSesionR = "alura";

var contrasenhaR = "alura321";
var inicioDeSesionI = prompt("Ingrese su usuario");

var contrasenhaI = prompt("Ingrese su contraseña");
var error = 0;
while(error <=3){
if(inicioDeSesionI == inicioDeSesionR && contrasenhaI ==contrasenhaR){
document.write("Inicio de sesion correcto");
break;
}else{
document.write("Usuario o contraseña equivocada, intente de nuevo <br>");
error++;
}
}
</script>
<script>
saltarLinea();
var intentos = 3;
var contador = 1;
while(contador <= intentos){

var inicioDeSesionIngresado = prompt("Ingrese su usuario");
var contrasenhaIngresada = prompt("Ingrese su contraseña");
var inicioDeSesionRegistrado = "alura";
var contrasenhaRegistrada = "alura321";
if( inicioDeSesionRegistrado == inicioDeSesionIngresado && (contrasenhaRegistrada == contrasenhaIngresada) ) {

alert("Bienvenido al sistema " + inicioDeSesionIngresado);
break;
}
else if(contador == intentos){
imprimir("Lo sentimos, ha sobrepasado el número de intentos. Vuelva a intentar más tarde");
}
else {
alert("inicio de sesión inválido. Favor intente de nuevo");
contador++;

</script>
Actividades de clase: Animaciones y juegos

Dibujando una flor
<canvas width="600" height="400"></canvas>
<script>
var canva = document.querySelector("canvas");
var pincel = canva.getContext("2d");
pincel.fillStyle = "lightgray"
pincel.fillRect(0,0,600,400)
function drawCircle(x,y,radio,color){
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2*3.14);
pincel.fill();
}
//Dibujado la flor
function drawFlower(x,y,radio,colors){
drawCircle(x,y,50,'purple')
var xx;
var yy;
n_circles = colors.length
for (var c = 0;c<n_circles;c++){
xx=x+2*radio*Math.cos(2*Math.PI*c/n_circles)
yy=y+2*radio*Math.sin(2*Math.PI*c/n_circles)
drawCircle(xx,yy,radio,colors[c])
}
}
drawFlower(300,200,50,['blue','red','cyan','green','black','yellow'])
</script>

Curso de Lógica de Programación (HTML Y Javascript)

Cargado por

Copyright:

Formatos disponibles

Curso de Lógica de Programación (HTML Y Javascript)

Cargado por

Información del documento

Título original

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

Curso de Lógica de Programación (HTML Y Javascript)

Cargado por

Copyright:

Formatos disponibles

CURSO DE LÓGICA DE PROGRAMACIÓN

2. <html></html> - Define el principio y el final del documento HTML.

CURSO DE LÓGICA DE PROGRAMACIÓN (HTML y JAVASCRIPT) 1

4. <title></title> - Define el título de la página.

5. <body></body> - Contiene todo el contenido visible en la página web.

7. <p></p> - Define un párrafo de texto.

8. <a></a> - Define un enlace a otra página web o a un archivo en la misma página.

9. <ul></ul> - Define una lista sin ordenar.

10. <ol></ol> - Define una lista ordenada.

11. <li></li> - Define un elemento de lista.

12. <tr></tr> - Define una fila de una tabla.

13. <th></th> - Define una celda de encabezado en una tabla.

14. <td></td> - Define una celda de datos en una tabla.

15. <form></form> - Define un formulario para enviar datos al servidor.

16. <input> - Define un campo de entrada en un formulario.

17. <button></button> - Define un botón en un formulario.

18. <select></select> - Define un menú desplegable en un formulario.

19. <option></option> - Define una opción en un menú desplegable.

20. <textarea></textarea> - Define un área de texto en un formulario.

21. <label></label> - Define una etiqueta para un elemento de formulario.

22. <div></div> - Define una sección genérica de la página web.

23. <span></span> - Define una sección pequeña y genérica de la página web.

Bibliotecas y Frameworks JavaScript

CURSO DE LÓGICA DE PROGRAMACIÓN (HTML y JAVASCRIPT) 2

3. Vue.js: Un framework progresivo de JavaScript para construir interfaces de usuario.

5. Express.js: Un framework de aplicaciones web de código abierto para Node.js.

7. Three.js: Una biblioteca de JavaScript para crear y mostrar gráficos 3D en la web.

2. number : Variables que contienen valores numéricos, ya sea enteros o decimales.

3. boolean : Variables que contienen valores de verdad ( true o false ).

4. null : Variables que tienen un valor nulo intencionalmente asignado.

6. bigint : Variables que contienen números enteros muy grandes.

2. alert() : Muestra un cuadro de diálogo con un mensaje y un botón de "Aceptar".

CURSO DE LÓGICA DE PROGRAMACIÓN (HTML y JAVASCRIPT) 3

9. Array : Permite definir y manipular una lista de elementos en JavaScript.

Actividades de clase: Logica de programación (Primeros Pasos)

Problema: Si un carro tiene un tanque

<meta charset = "UTF-8">

CURSO DE LÓGICA DE PROGRAMACIÓN (HTML y JAVASCRIPT) 4

función saltar linea

CURSO DE LÓGICA DE PROGRAMACIÓN (HTML y JAVASCRIPT) 5

var edad1 = 10;

mostrarAlerta("Total de edades es " + totalEdades);

<h1>PROGRAMA CALCULAR IMC</h1>

var nombre = prompt("Informe su nombre")

imprimir(nombre + ": Tu imc calculado es: "+ imcCalculado);

CURSO DE LÓGICA DE PROGRAMACIÓN (HTML y JAVASCRIPT) 6

Ingresar datos del usuario

var numero1 = prompt("Digite el primer número");

Actividades de clase: Logica de programación (Conceptos Primordiales)

var invitados = prompt("Número de invitados");

CURSO DE LÓGICA DE PROGRAMACIÓN (HTML y JAVASCRIPT) 7

imprimir("El total de invitados es " + total);

correccion del problema

var invitados = parseInt(prompt("Número de invitados"));

var total = invitados + vips;

imprimir("El total de invitados es " + total);

if(numero >= 2 && numero < 12) {

if(numero >= 10) {

var contrasenha = prompt("Entra con tu contraseña");