¿Cómo funcionan las computadoras?
Founder
@Kodemia
2000- 2001
2003 - 2013
2013 - 2017
2018 - Hoy
2017 - 2018
Head of engineering / Co. Founder
@Kodemia
https://github.com/devCharles
Mentor en @Kodemia
https://x.com/ulisesserranop
# CIP-23
Es MUY IMPORTANTE que a partir de ahora SIEMPRE te renombres en Zoom de la siguiente manera:
NombreApellido | correoregistrado@dominio.com
JuanPerez | juanitop@gmail.com
Ejemplo:
El símbolo | Es muy importante para que todo funciones, se llama "pipe"
# CIP-23
Lunes a Viernes de 7 a 10 pm
2 semanas
# CIP-23
- Cámara encendida mientras se está en clase
- El micrófono apagado en todo momento, encender solo al interactuar
- Revisaremos 2 o 3 prácticas en clase para comprensión de todos por tiempo
# CIP-23
- Avisos
- Prácticas
- Links a materiales
# CIP-23
Te compartirán el acceso a las clases grabadas
Podras verlas en:
https://kampus.kodemia.com
Las clases suben a kampus 1 hora y media después de que la clase en vivo finaliza
⚠️⚠️⚠️
Las clases grabadas son para repaso y consulta
NO tienen el objetivo de reemplazar la experiencia de la clase en vivo
Aplicar la lógica para resolver problemas
Desarrollar el pensamiento estructurado
Aprender a usar JavaScript como herramienta para resolver problemas a través de la lógica y el pensamiento estructurado
¿Cómo funcionan las computadoras?
S1
S2
S3
S4
S5
Algoritmos y diagramas de flujo
Scratch
Lenguajes de programación, intro a JS
Condicionales
Bucles o Loops
S6
S7
S8
S9
S10
Arreglos, Arrays o Listas
Métodos de Array
Funciones y crea tus propias funciones en Google Sheets
🏁 El comienzo, siguientes pasos
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
---|
# CIP
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
---|
# CIP
0 |
---|
# CIP
1 |
---|
# CIP
2 |
---|
# CIP
3 |
---|
# CIP
4 |
---|
# CIP
5 |
---|
# CIP
6 |
---|
# CIP
7 |
---|
# CIP
8 |
---|
# CIP
9 |
---|
# CIP
9 |
---|
# CIP
9 |
---|
# CIP
9 |
---|
# CIP
1 | 0 |
---|
# CIP
1 | 0 |
---|
# CIP
1 | 0 |
---|
# CIP
9 | 9 |
---|
# CIP
9 | 9 |
---|
# CIP
9 | 9 |
---|
# CIP
1 | 0 | 0 |
---|
# CIP
9 | 9 | 9 |
---|
# CIP
9 | 9 | 9 |
---|
# CIP
9 | 9 | 9 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
1 | 2 | 5 |
---|
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
0 | 0 | 0 |
---|
# CIP
0 | 0 | 1 |
---|
# CIP
0 | 1 | 0 |
---|
# CIP
? | ? | ? |
---|
# CIP
0 | 1 | 1 |
---|
# CIP
1 | 1 | 1 |
---|
# CIP
1 | 1 | 1 |
---|
# CIP
# CIP
# CIP
# CIP
# CIP
= 1 bit
= 1 bit
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
---|
# CIP
# CIP
# CIP
A | B | C |
---|---|---|
# CIP
A | B | C |
---|---|---|
65 | 66 | 67 |
# CIP
A | B | C |
---|---|---|
65 | 66 | 67 |
American Standard Code for Information Interchange
# CIP
# CIP
72 | 79 | 76 | 65 | 33 |
# CIP
H | O | L | A | ! |
---|---|---|---|---|
72 | 79 | 76 | 65 | 33 |
# CIP
H | O | L | A | ! |
---|---|---|---|---|
72 | 79 | 76 | 65 | 33 |
01001000 | 01001111 | 01001100 | 01000001 | 00100001 |
8 bits
8 bits
8 bits
8 bits
8 bits
40 bits
# CIP
H | O | L | A | ! |
---|---|---|---|---|
72 | 79 | 76 | 65 | 33 |
01001000 | 01001111 | 01001100 | 01000001 | 00100001 |
1 byte
1 byte
1 byte
1 byte
1 byte
5 bytes
# CIP
# CIP
# CIP
# CIP
# CIP
1,114,112 caracteres
# CIP
# CIP
# CIP
# CIP
R
G
B
# CIP
R
G
B
# CIP
R
G
B
100
100
0
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
-------------------------------------------
# CIP
# CIP
# CIP
# CIP
INICIO
Dirigirse a la cocina
Prender la estufa
Calentar el agua en una olla
Servir el agua en una taza
Agregar café
Agregar azúcar
Agitar
FIN
Preparar un café en la estufa
# CIP
INICIO
Dirigirse a la cocina
Colocar filtro en la cafetera
Agregar café al filtro
Agregar agua a la cafetera
Encender la cafetera
Esperar a que se haga el café
Servir el café en una taza
Agregar azúcar
Agitar
FIN
Preparar un café con la cafetera
# CIP
Preparar café en la estufa
INICIO
Dirigirse a la cocina
Prender la estufa
Calentar el agua en una olla
Servir el agua en una taza
Agregar café
Agregar azúcar
Agitar
FIN
Preparar café con la cafetera
INICIO
Dirigirse a la cocina
Colocar filtro en la cafetera
Agregar café al filtro
Agregar agua a la cafetera
Encender la cafetera
Esperar a que se haga el café
Servir el café en una taza
Agregar azúcar
Agitar
FIN
Preparar un café
# CIP
Preparar café en la estufa
INICIO
Dirigirse a la cocina
Prender la estufa
Calentar el agua en una olla
Servir el agua en una taza
Agregar café
Agregar azúcar
Agitar
FIN
Preparar café con la cafetera
INICIO
Dirigirse a la cocina
Colocar filtro en la cafetera
Agregar café al filtro
Agregar agua a la cafetera
Encender la cafetera
Esperar a que se haga el café
Servir el café en una taza
Agregar azúcar
Agitar
FIN
Preparar un café
INICIO
Dirigirse a la cocina
Preguntar “¿Cómo deseas el café?”
Si es café con estufa
Preparar café en la estufa
Si es café con cafetera
Preparar café con la cafetera
Si no desea café
Ir a paso 9
Agregar azúcar
Agitar
FIN
# CIP
Preparar café en la estufa
INICIO
Dirigirse a la cocina
Prender la estufa
Calentar el agua en una olla
Servir el agua en una taza
Agregar café
Agregar azúcar
Agitar
FIN
Preparar café con la cafetera
INICIO
Dirigirse a la cocina
Colocar filtro en la cafetera
Agregar café al filtro
Agregar agua a la cafetera
Encender la cafetera
Esperar a que se haga el café
Servir el café en una taza
Agregar azúcar
Agitar
FIN
Preparar un café
INICIO
Dirigirse a la cocina
Preguntar “¿Cómo deseas el café?”
Si es café con estufa
Preparar café en la estufa
Si es café con cafetera
Preparar café con la cafetera
Si no desea café
Ir a paso 9
Agregar azúcar
Agitar
FIN
# CIP
# CIP
9 de Septiembre de 1947
Mark III
Grace hopper
Agregar Azúcar
INICIO
Preguntar ¿Cuántas cucharadas de azúcar deseas?
Esperar respuesta
Cucharadas de azúcar es igual a 0
Si respuesta es diferente de cucharadas de azúcar
Servir 1 cucharada de azúcar
Sumar cucharadas de azúcar
Si respuesta es igual a cucharadas de azúcar
Cucharadas de azúcar completadas
Si no
Regresar paso 5
Mezclar
FIN
Agregar Azúcar
INICIO
Preguntar ¿Cuántas cucharadas de azúcar deseas?
Esperar respuesta
Cucharadas de azúcar es igual a 0
Si respuesta es diferente de cucharadas de azúcar
Servir 1 cucharada de azúcar
Sumar cucharadas de azúcar
Si respuesta es igual a cucharadas de azúcar
Cucharadas de azúcar completadas
Si no
Regresar paso 5
Mezclar
FIN
Preparar café en la estufa
INICIO
Dirigirse a la cocina
Prender la estufa
Calentar el agua en una olla
Servir el agua en una taza
Agregar café
FIN
Preparar café con la cafetera
INICIO
Dirigirse a la cocina
Colocar filtro en la cafetera
Agregar café al filtro
Agregar agua a la cafetera
Encender la cafetera
Esperar a que se haga el café
Servir el café en una taza
FIN
Agregar Azúcar
INICIO
Preguntar ¿Cuántas cucharadas de azúcar deseas?
Esperar respuesta
Cucharadas de azúcar es igual a 0
Si respuesta es diferente de cucharadas de azúcar
Servir 1 cucharada de azúcar
Sumar cucharadas de azúcar
Si respuesta es igual a cucharadas de azúcar
Cucharadas de azúcar completadas
Si no
Regresar paso 5
FIN
Preparar café en la estufa
INICIO
Dirigirse a la cocina
Prender la estufa
Calentar el agua en una olla
Servir el agua en una taza
Agregar café
FIN
Preparar café con la cafetera
INICIO
Dirigirse a la cocina
Colocar filtro en la cafetera
Agregar café al filtro
Agregar agua a la cafetera
Encender la cafetera
Esperar a que se haga el café
Servir el café en una taza
FIN
Preparar un café
INICIO
Dirigirse a la cocina
Preguntar “¿Cómo deseas el café?”
Si es café con estufa
Preparar café con estufa
Si es café con cafetera
Preparar café con cafetera
Si no desea café
Ir a paso 9
Agregar azúcar
Mezclar
FIN
Cafe
Agua
Azúcar
Cuchara
Olla
Estufa
Cafetera
Café
preparado
DEBE SER
Preciso
Finito
Definido
Resultado
Preparar un café
INICIO
Dirigirse a la cocina
Preguntar “¿Cómo deseas el café?”
Si es café con estufa
Preparar café con estufa
Si es café con cafetera
Preparar café con cafetera
Si no desea café
Ir a paso 9
Agregar azúcar
Mezclar
FIN
Serie de pasos
Diagrama de Flujo
Pseudocódigo
?
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
# CIP
Preparar un café
INICIO
Dirigirse a la cocina
Preguntar “¿Cómo deseas el café?”
Si es café con estufa
Preparar café con estufa
Si es café con cafetera
Preparar café con cafetera
Si no desea café
Ir a paso 9
Agregar azúcar
Mezclar
FIN
Serie de pasos
Diagrama de Flujo
Pseudocódigo
Polígonos regulares
# Práctica
- Realizar el pseudocódigo para encontrar el perímetro de un triángulo equilátero
- Realizar el pseudocódigo para encontrar el perímetro de un cuadrado
- Realizar el pseudocódigo para encontrar el perímetro de cualquier polígono regular
Algoritmos y diagramas de flujo
# CIP
# CIP
Inicio
Escribir "Ingresa longitud de un lado de tu triangulo equilatero"
Leer longitud
perimetro = longitud * 3
Escribir "El périmetro del triangulo es:" perimetro
Terminar
perímetro = lado + lado + lado
Inicio
Escribir "Ingresa longitud de un lado de tu cuadrado"
Leer longitud
perimetro = longitud * 4
Escribir "El périmetro del cuadrado es:" perimetro
Terminar
perímetro = lado + lado + lado + lado
Inicio
Escribir "Ingresa el número de lados de tu poligono regular"
Leer num_de_lados
Si num_de_lados < 3 Entonces
Escribir "Eso no es un poligono, intenta de nuevo"
Ir a linea 2
Escribir "Ingresa longitud de un lado de tu poligono"
Leer longitud
Si longitud <= 0
Escribir "Eso no es posible, intenta de nuevo"
Ir a linea 7
perimetro = num_de_lados * longitud
Escribir "El périmetro del poligono es:" perimetro
Terminar
perímetro = num_de_lados * lado
?
# CIP
Herramienta visual que se utiliza para representar los pasos o procesos de un algoritmo o sistema
Se usan para analizar, diseñar, documentar y comunicar procesos de forma clara
Nos ayudan a encontrar errores incluso antes de programar
# CIP
Terminal
Entrada / Salida
Proceso
Representa el inicio y final de un proceso
Representa la entrada y salida de datos
Representa cualquier operación
Línea de flujo
Decisión
Conector de página
Marca el orden secuencial de los procesos y subprocesos
Se usa para representar una decisión y las diferentes posibilidades
INICIO
Escribir "Vamos a preparar un sandwich"
Escribir "¿Tienes pan?"
Leer hay_pan
Si hay_pan == "Si" Entonces
pan_1 = 🍞
pan_2 = 🍞
Si no
Escribir "No puedes hacer un sandwich sin pan :c"
FIN
Escribir "¿Tienes jamon?"
Leer hay_jamon
Si hay_jamon == "Si" Entonces
jamon = 🐷
Si no
Escribir "No puedes hace un sandwich sin jamon :c"
FIN
Escribir "¿Quieres tu sandwich con mayonesa?"
Leer quires_mayonesa
Si quieres_mayonesa == "Si"
Escribir "¿Tienes mayonesa?"
Leer hay_mayonesa
Si hay_mayonesa == "Si"
mayonesa = 🍯
Si no
Escribir "Ve a comprar mayonesa"
FIN
Escribir "Podemos empezar a preparar el sandwich"
Si quieres_mayonesa == "Si" Entonces
Asiganr sandwich = pan_1 + mayonesa + jamon + pan_2
Si no
Asignar sandwich = pan_1 + jamon + pan_2
Escribir "Sandwich listo!"
FIN
# CIP
# Práctica
Realizar el pseudocódigo y diagrama de flujo para obtener el perímetro de cualquier polígono regular
20 min
- Validar los datos de entrada y volver a preguntar por un dato válido en caso de que el ingresado no lo sea
# Práctica
Realizar el diagrama de flujo para permitir a un usuario realizar las siguientes operaciones con 2 números:
- Suma
- Resta
- Multiplicación
- División
20 min
- El programa debe realizar solo una operación a la vez
- Validar los datos ingresados
- No debería permitir dividir entre 0
¡Recuerda!👇
Es muy importante que a partir de ahora te renombres en Zoom de esta forma, ya que es lo que se tomará para la asistencia, que se hace de manera automatizada:
Nombre | correoregistrado@dominio.com
Antes del pipe | puedes colocar tu nombre y apellido, sólo tu nombre, o diminutivo.
Por ejemplo: Juan Perez | juanperez@gmail.com o Jhony | juanperez@gmail.com
Lo que es MUY importante es que incluyas el pipe y que después esté tu correo. Así como que siempre sea el mismo correo, con el que te registraste en tu inscripción.
Scratch
# CIP
# CIP
Lenguaje de programación visual
# CIP
# CIP
Inicio
Escribir "Ingresa el número de lados de tu poligono regular"
Leer num_de_lados
Si num_de_lados < 3 Entonces
Escribir "Eso no es un poligono, intenta de nuevo"
Ir a linea 2
Escribir "Ingresa longitud de un lado de tu poligono"
Leer longitud
Si longitud <= 0
Escribir "Eso no es posible, intenta de nuevo"
Ir a linea 7
perimetro = num_de_lados * longitud
Escribir "El périmetro del poligono es:" perimetro
Terminar
En scratch
# Práctica
25 min
Realizar un programa en scratch para permitir a un usuario realizar las siguientes operaciones con 2 números:
- Suma
- Resta
- Multiplicación
- División
- El programa debe realizar solo una operación a la vez
- Validar los datos ingresados
- No debería permitir dividir entre 0
Lenguajes de programación e
introducción a JavaScript
# CIP
Ya sabemos...
- Cómo funcionan las computadoras
- Lo que es un algoritmo
- Pensamiento estructurado
- Pseudocódigo
- Diagramas de flujo
Lenguaje formal/artificial que permite a una persona definir instrucciones para ser cumplidas por una computadora
Python
C
C++
JavaScript
Scala
Swift
Ruby
PHP
Java
C#
Cobol
Kotlin
Elixir
Go
Rust
Ensamblador
Python
C
C++
JavaScript
Scala
Swift
Ruby
PHP
Java
C#
Cobol
Kotlin
Elixir
Go
Rust
Ensamblador
Binario
# CIP
Programas usando secuencias de instrucciones explicitas que van mutando
el estado de la aplicación
Programas especificando el resultado que quieres obtener no el cómo obtenerlo
Lisp, Prolog
C, Basic, Pascal
Programas mas limpiamente, los gotos no existen y se usan loops y condicionales en su lugar
C, Pascal
# CIP
El flujo de control es controlado por llamadas a funciones en lugar de asignar valores a variables
Programas declarando objetos y enviando mensajes entre ellos
Java, C++, C#, Ruby, Python, JavaScript
Elixir, Erlang, Haskell, Lisp, Scala, JavaScript
Programas usando emisores y escuchas de eventos, declarando cuando reaccionar y cuando lanzar eventos
JavaScript, Python
# CIP
Estos lenguajes de programación soportan diferentes paradigmas de programación y pueden conbinarlos
JavaScript, Python, Kotlin, Java, Swift, ...
# CIP
Cuentan con un compilador, un programa que toma el código fuente y lo traduce a código máquina para que la computadora pueda entenderlo
C, C++, Go, Rust, Java, Kotlin, Swift
Cuenta con un intérprete, un programa que toma el código fuente y lo ejecuta directamente sin pasar por compilación
JavaScript, Python
Es la forma visible del lenguaje
Al ser puramente textuales, la sintaxis es la forma en la que se escribe el lenguaje
Restricciones en la forma de escribir y hacer declaraciones
Se usan para ejecutar selectivamente ciertas sentencias cuando la condición dada se cumple
Se usan para ejecutar repetidamente un grupo de sentencias hasta que se cumpla una condición especifica
Una variable es un espacio en memoria al que le asignamos un valor
// JavaScript
let NombreDelUsuario = "Juan Perez"
# Python
nombre_del_ususario = "Juan Perez"
// C++
// tipo nombreDeVariable = valor
string nombreDeUsuario = "Juan Perez"
Son los tipos de datos que una variable puede albergar, estos dependen del lenguaje de programación pero generalmente son:
Aprendamos JavaScript
Ahora...
Pero antes...
Aprendamos JavaScript
Ahora si...
JavaScript y Java NO SON LO MISMO
!=
¡YA! a escribir código 👉
Sintaxis
console.log("Hola koders")
console.log('Hola koders')
console.log("Hola", 'koders')
# Sintaxis
// Esto es un comentario en js
console.log("hola koders") // Esto tambien es un comentario
# Sintaxis
Los comentarios no son parte de las instrucciones, no se ejecutan como instrucciones
# Sintaxis
¿Que es una variable?
// usamos "const" y "let"
const nombre = "charles"
let edad = 10
// "var" ya no se usa
var x = 10
Un espacio en memoria que almacena un valor
ese valor puede o no cambiar con el tiempo
// Numeros
const x = 1
const average = 9.9
// Cadenas de texto o Strings
const name = "Pepito"
// Logicos o Booleanos
const isAwesome = true
const isBoring = false
// Arreglos
const koders = [ "Kari", "Vic", "Max", "Mike" ]
const grades = [ 8, 9.9, 5, 1 ]
# Sintaxis
const PI = 3.1416
const name = "Kodemia"
# Sintaxis
const
Se usa cuando el valor inicial es el valor definitivo, osea que no va a cambiar nunca
let programa = "javascript"
programa = "python"
let
Se usa cuando se sabe que el valor no es definitivo y va a cambiar en algún momento del programa
var PI = 3.1416
var nombre = "Kodemia"
var programa = "javascript"
programa = "python"
var
Ya no debe usarse
Antes era la única palabra que existía, no existían const y let
// nombres validos ✅
const mivariable = "ok"
const mi_variable = "ok"
const _mi_variable = "ok"
const mi_variable_1 = "ok"
const miVariable = "ok"
// nombres invalidos ❌
const 1_mi_variable = "NO"
const mi-variable = "NO"
const mi variable = "NO"
# Sintaxis
No empezar con número
No puede contener espacios
No se puede usar guiones medios o caracteres especiales fuera del _ $
# CamelCase
const miNombreDeVariable = "kodemia"
# PascalCase o UpperCamelCase
const MiNombreDeVariable = "kodemia"
# SnakeCase
const mi_nombre_de_variable = "kodemia"
# Sintaxis
// Podemos usar el operador typeof para conocer el tipo de dato
// number
const x = 1
typeof x // number
// string
const name = "Pepito"
typeof name // string
// boolean
const is_awesome = true
const is_boring = false
typeof is_awesome // boolean
typeof is_boring // boolean
// object
const koders = [ "Kari", "Vic", "Max", "Mike" ]
const grades = [ 8, 9.9, 5, 1 ]
const koder = { nombre: "Vic", apellido: "Cosme", edad: 25 }
typeof koders //object
typeof grades //object
typeof koder //object
# Sintaxis
// El valor null
// se usa para determinar explicitamente que no existe un valor
const x = null
// El valor undefined
// es el valor que tiene toda variable que no tiene un valor
const name = undefined
# Sintaxis
// Usamremos la función prompt()
// de la libreria prompt-sync
// para recibir datos del ususario
// importamos la libreria
const prompt = require("prompt-sync")()
// usamos prompt
const nombre = prompt("Ingresa tu nombre:")
# Sintaxis
# Práctica
Crear un programa que le pida al usuario su nombre y lo salude usando su nombre
5 min
# Suma
x + y
# Resta
x - y
# Multiplicación
x * y
# Division
x / y
# Módulo
x % y
# Exponenciación
x ** y
# Sintaxis
# Práctica
Crear un programa para calcular el perimetro de cualquier poligono regular
5 min
- Los valores no necesitan ser dados por el usuario
- No enfocarse en validaciones por el momento
const age = parseInt("20")
const pi = parseFloat("3.14")
# Sintaxis
De string a number
const pi = 3.141516
const age = 10
console.log(pi.toString())
console.log(age.toString())
De cualquier cosa a string
Crear un programa para calcular el perimetro de cualquier poligono regular
5 min
- Los valores DEBEN ser dados por el usuario
- No enfocarse en validaciones por el momento
# Práctica
Crear un programa que solicite al usuario un número y le imprima la siguiente información:
- El doble del número
- La mitad del número
- La diferencia entre ese número y el número 100
- El residuo de dividir ese numero entre 3
5 min
- No enfocarse en validaciones por el momento, asumir que el usuario ingresa un valor numérico valido
# Práctica
Condicionales
Condición
Verdadero
Falso
Instrucción
Instrucción
Instrucción
Instrucción
// Igual
x == y
// Igual y del mismo tipo
x === y
// Diferente
x != y
// Mayor que
x > y
// Menor que
x < y
// Mayor o igual
x >= y
// Menor o igual
x <= y
# Sintaxis
// y
&&
edad >= 18 && nacionalidad == "mexicana"
// o
||
edad >= 18 || tienePermisoParaBeber == true
// no o negación
!
! edad >= 18
# Sintaxis
numero > 5
Verdadero
"el número es mayor a 5"
const numero = 10
if (numero > 5) {
console.log(numero, " es mayor a ", 5)
}
console.log("Esto se ejecuta sin importar la condicion")
numero > 5
Verdadero
"el número es mayor a 5"
const numero = 10
if (numero > 5) {
console.log(numero, " es mayor a ", 5)
}
console.log("Esto se ejecuta sin importar la condicion")
numero > 5
Verdadero
"el número es mayor a 5"
const numero = 10
if (numero > 5) {
console.log(numero, " es mayor a ", 5)
}
console.log("Esto se ejecuta sin importar la condicion")
numero > 5
Verdadero
Falso
"el número es mayor a 5"
"el número es menor o igual a 5"
const numero = 10
if (numero > 5){
console.log(numero, " es mayoar a ", 5)
} else {
console.log(numero, " es menor o igual a ", 5)
}
# Sintaxis
numero > 5
Verdadero
"el número es mayor a 5"
"el número es menor o igual a 5 pero no es 0"
número == 0
Falso
Falso
Verdadero
"el número es exactamente 0"
"el número es menor o igual a 5 pero no es 0"
const numero = 10
if (numero > 5) {
console.log(numero, " es mayoar a 5")
} else if (numero == 0) {
console.log(numero, " es igual a 0")
} else {
console.log(numero, " es menor o igual a 5")
}
# Sintaxis
Crear un programa que solicite un número al usuario e imprima en consola "par" si el número es par o "impar" si el número es impar
10 min
- No enfocarse en validaciones por el momento (asumir que el valor ingresado es un número)
# Práctica
Crear una calculadora permita:
- sumar
- restar
- dividir
- multiplicar
- potenciar
2 números
15 min
- Asumir que el usuario ingresará solo valores numéricos
- Solo una operación a la vez
- Terminar con process.exit() en caso de dato invalido
# Práctica
Bucles o Loops
# Sintaxis
# Sintaxis
let contador = 1
while (contador < 10) {
console.log("contador: ", contador)
contador = contador + 1
// contador++
}
Crear un programa para calcular el perímetro de cualquier polígono regular
Usa el "while" para asegurarte de que los valores ingresados por el usuario son válidos
10 min
# Práctica
Crear un programa que imprima los numeros del 1 al 100 y en cada número divisible entre 3 imprima "Fizz" junto al número, en cada número divisible entre 5 "Buzz" junto al número y FizzBuzz si es divisible entre ambos
10 min
1
2
3 - Fizz
4
5 - Buzz
6 - Fizz
7
8
9 - Fizz
10 - Buzz
15 - FizzBuzz
y así hasta el 100
- Todo esto usando while
# Práctica
# Sintaxis
for (let i = 0; i <= 10; i++) {
console.log(i)
}
for (inicialización; condición; incremento) {
// instrucciones o statements
}
Crear un programa que imprima la tabla de multiplicar (1 al 10) de un número ingresado por el usuario
5 min
Ej. si n=5
En terminal debe verse:
5x1=5
5x2=10
5x3=15
5x4=20
5x5=25
y asi hasta el 10
# Práctica
Crear un programa que imprima los numeros del 1 al 100 y en cada número divisible entre 3 imprima "Fizz" junto al número, en cada número divisible entre 5 "Buzz" junto al número y FizzBuzz si es divisible entre ambos
5 min
1
2
3 - Fizz
4
5 - Buzz
6 - Fizz
7
8
9 - Fizz
10 - Buzz
15 - FizzBuzz
y así hasta el 100
- Todo esto usando for
# Práctica
Crear un programa para generar los primeros N números de la serie de fibonacci, Donde N es un número determinado por el usuario
15 min
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144
# Práctica
Arreglos, Arrays o Listas
Pepe
Se usan para almacenar múltiples valores en una sola variable
koders
0
1
2
3
4
5
6
7
Luis
Jess
Ana
Fer
Raul
Vic
Max
Indice
Longitud = 8
Un arreglo es una colección ordenada de valores
# CIP
Pepe
koders
0
1
2
3
4
5
6
7
Luis
Jess
Ana
Fer
Raul
Vic
Max
const koders = ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
Este arreglo se ve así en JS:
# CIP
Pepe
koders
0
1
2
3
4
5
6
7
Luis
Jess
Ana
Fer
Raul
Vic
Max
const koders = [
"Pepe",
"Luis",
"Jess",
"Ana",
"Fer",
"Raul",
"Vic",
"Max"
]
También puede escribirse en varias lineas
# CIP
Pepe
koders
0
1
2
3
4
5
6
7
Luis
Jess
Ana
Fer
Raul
Vic
Max
const koders = ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
koders[0] // Pepe
koders[7] // Max
koders[3] // Ana
koders[10] // undefined
Usamos los índices para acceder a los valores del arreglo
⚠️ Los indices son numericos ⚠️
# CIP
const koders = ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
koders.at(0) // Pepe
koders.at(3) // Ana
koders.at(10) // undefined
// Soporta indices negativos
koders.at(-1) // Max
koders.at(-2) // Vic
kdoers.at(-10) // undefined
# CIP
const frutas = ["manzana", "piña", "uva", "platano"]
const numeros = [10, 1, 50]
const mezclado = ["manzana", 1, "piña", true, null]
# CIP
const elElegido = 5
const koders = ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
koders[elElegido] // Raul
koders.at(elElegido) // Raul
# CIP
# Práctica
Crear un programa que dada una lista de koders, imprima el koder que se encuentre en el índice especificado por el usuario
5 min
⚠️ La lista no debe ser dada por el usuario aun
const koders = ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
koders.length // 8
const frutas = ["manzan", "piña", "mango", "coco"]
frutas.length // 4
const vacio = []
vacio.length // 0
// Podemos guardar ese dato en una variable
const longitud = koders.length
# CIP
Podemos acceder a la propiedad length para saber la longitud de un arreglo
También funciona en strings
# Práctica
Crear un programa que imprima todos los elementos de un arreglo junto a su indice
5 min
⚠️ La lista no debe ser dada por el usuario aun
# Práctica
Crear un programa que imprima los elementos de un arreglo junto a su indice hasta el indice dado por el usuario
5 min
⚠️ La lista no debe ser dada por el usuario aun
# Práctica
Crear un programa que promedie las calificaciones de un alumno
10 min
⚠️ Las calificaciones no son dadas por el usuario
⚠️ Las calificaciones son hardcodeadas en un arreglo en nuestro programa
Métodos de array
# Sintaxis
const koders = ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
for (let item of koders) {
console.log(item)
}
Podemos usar for para iterar una lista
const koders = ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
koders.unshift("Kari")
// ["Kari", "Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
Usamos .unshift() para agregar un nuevo elemento al inicio del array
const koders = ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max"]
koders.push("Kari")
// ["Pepe", "Luis", "Jess", "Ana", "Fer", "Raul", "Vic", "Max", "Kari"]
Usamos .push() para agregar un nuevo elemento al final del array
Podemos ver mas métodos de Array en W3Schools
# Práctica
Crear un programa que imprima todos los elementos de un array usando el loop "for...of"
5 min
⚠️ Debe usarse el loop for...of
# Práctica
Crear un programa que le pida al usuario ingresar una lista de nombres, el número de nombres permitido es indeterminado
una vez el usuario no desee ingresar mas nombres, el programa debe reportar el número de nombres que se ingresaron
15 min
💡 Recuerda que puedes usar while y length
# Práctica
Crear un programa que imprima los elementos de un array pero en orden inverso al original
10 min
⚠️ Investiga el método reverse()
# Práctica
Crear un programa que le pida al usuario ingresar una lista de nombres, el número de nombres permitido es indeterminado
Una vez el usuario no desee ingresar más nombres, el programa le da al usuario la siguiente información:
- Cuantos nombres fueron ingresados
- Cual es el nombre más largo de todos los ingresados
- Cual es el nombre más corto de todos los ingresados
20 min
# Práctica
Crear un programa que le pida al ususario ingresar una lista de nombres, el numero de nombres permitido es indeterminado
Una vez el usuario no desee ingresar más nombres.
el programa preguntará al usuario un nombre y regresará el índice del nombre ingresado
10 min
⚠️ Investigar indexOf()
Funciones
# Funciones
Entrada
Salida
Proceso
Entrada
Salida
Proceso
Proceso
Suma
Entrada
Salida
Proceso
Proceso
Suma
2
2
Entrada
Salida
Proceso
Proceso
Suma
2
2
4
function nombre(parámetro_1, parametro_2, etc) {
// Instrucciones de la función
}
Entrada
Salida
Proceso
Proceso
Suma
2
2
4
function suma (x, y) {
const resultado = x + y
return resultado
}
// Definición
function suma (x, y){
const resultado = x + y
return resultado
}
// Llamada
suma(2,5)
# Práctica
Crea una función que reciba como parámetro un nombre y salude usando ese nombre
5 min
# Práctica
Crea una función que reciba como parámetro una lista de nombres y regrese el nombre más largo de la lista
7 min
# Práctica
Crea una función que reciba como parámetro una lista de nombres y regrese el nombre más corto de la lista
5 min
# Práctica
Crea una función que reciba como parámetro una lista de calificaciones y regrese el promedio de las calificaciones
7 min
# Práctica
Crea un función que reciba como parámetro una lista de nombres y te devuelva la misma lista pero con los nombres escritos en mayusculas
15 min
⚠️ Investigar toUpperCase()
# Práctica
Crea una función que recibe 2 parámetros:
- una lista de números
- un número
y regrese una lista con los todos los números que son mayores al número dado como segundo parámetro
15 min
# Práctica
Crea un función que reciba 2 parámetros:
- una lista de nombres
- un número
y regrese una lista con los todos los nombres cuyas longitudes sean más grandes que el número dado como segundo parametro
10 min
# CIP
# CIP
# CIP
# CIP
Apps Script es una herramienta donde nosotros podemos usar JavaScript para automatizar cosas dentro de la suit de google
Nosotros lo vamos a ocupar para crear nuestras propias funciones de google sheets (excel)
# CIP
# CIP
# CIP
# CIP
Crear una función que se llame
EMAILIZAR
que reciba 2 parametros, nombre y apellido
y regrese nombre y apellido concatenados con "@kodemia.mx"
Ejemplo:
nombre: charles
apellido: silva
retorno: charlessilva@kodemia.mx
# CIP
implementación
resultado
El comienzo...
# CIP
# CIP
# CIP
Kotlin
Java
Swift
# CIP
# CIP
# CIP
Site Relaiability Engineer
# CIP
# CIP
# CIP