YT YouTube2Text

YouTube2Text → Transcripts → Desarrollo Web | CSS Básico – Sábado 15 de agosto – 8 AM COL/ECU/PAN | 10 AM UY

Desarrollo Web | CSS Básico – Sábado 15 de agosto – 8 AM COL/ECU/PAN | 10 AM UY — Transcript

by Fundación ROFÉ - Toca una Vida · 9,112 words · 1,613 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:10¿Qué más? ¿Cómo están? Presento. Mi
0:13nombre es Andrés Cast López, soy
0:15desarrollador de SOCPAN. Hoy seré su
0:18mentor y
0:21como nos comentaba Kate, eh
0:24comenz finalizamos con la parte de HTLM
0:27y ya comenzamos directamente con lo que
0:29es JavaScript.
0:31Chicos, quiero hacer una preguntica ahí
0:33en general para todos. ¿Qué es un
0:35lenguaje programación?
0:38¿Quién me puede responder eso? Eh,
0:41chicos, me pueden escribir también,
0:42pueden levantar la mano, me pueden
0:44interrumpir, pueden abrir el micrófono.
0:47Yo soy muy fiel creyente que pues
0:50también voy a la dedocracia, entonces
0:52estaré mencionando nombres por ahí para
0:54que me estén dando respuestas,
0:57pero les beneficio la duda. José,
1:01cuéntanos, ¿qué es un lenguaje
1:02programación?
1:07Un lenguaje que nos ayuda a entender
1:10sistemas, si no estoy mal, algo así era
1:14excelente. Un lenguaje que nos ayuda a
1:16entender el sistema. ¿Quién más? ¿Quién
1:18tiene otra respuesta?
1:29¿Quién tiene la respuesta por ahí? Eh,
1:33toda respuesta es correcta.
1:36En ese momento vamos con
1:40con Joaquín. Joaquín
1:46es por ahí.
1:53Joaquín, ¿qué consideras que es un
1:55lenguaje programación?
2:01No sé si soy el único Joaquín yo, pero
2:04está Se me cayó la cámara recién.
2:05Perdón. Es todo lo referido a las
2:08terminales y la codificación que usamos
2:11para programar.
2:15Excelente.
2:20Terminales.
2:23Bueno, vamos a comenzar con lenguaje
2:25programación. Normalmente, eh,
2:29¿qué lenguaje de programación conocemos?
2:31Es que no me aquí en el chat qué
2:32lenguaje de programación conocemos.
2:35Nosotros vamos a utilizar algo que se
2:36llama JavaScript, que es un lenguaje
2:39programación. Y un lenguaje programación
2:41es un lenguaje en el cual la máquina
2:44puede entender instrucciones que yo les
2:47que yo le quiero dar.
2:50Eh, digamos, yo quiero que la máquina
2:52asume una variable con otra variable, un
2:55número con otro número y me devuelvo un
2:57resultado. Eso es un proceso. Entonces,
3:01la máquina con el lenguaje programación
3:03que yo decida. Por ejemplo, tenemos
3:06Java, tenemos Python, muy bien, ahí
3:09tenemos JavaScript
3:11[risas]
3:13C++.
3:14HTLM
3:16no lo consideramos un lenguaje de
3:18programación, más que todo por un meme,
3:20pero no es un lenguaje de programación,
3:22sino más un lenguaje maquetazo.
3:23¿Desde cuándo? ¿Desde cuándo HTML es un
3:25lenguaje? ¿Cómo
3:27no? No, no lo consideramos lenguaje de
3:29programación. lo consideramos más un
3:31lenguaje maquetación.
3:34¿Cuál es la diferencia? La diferencia
3:36vienen siendo las propiedades y el
3:39proceso lógico que tiene un lenguaje
3:42programación a un lenguaje maquetación,
3:45porque un proceso lógico es mucho más
3:48complicado
3:49para que la máquina pueda entender cero
3:52sí uno que tenemos. Entonces,
3:56hoy vamos a hoy vamos a aprender qué es
3:59un lenguaje de programación. Vamos a
4:01utilizar el lenguaje JavaScript
4:05y vamos a hacer unos pequeños unas
4:07pequeñas funcionalidades del sistema.
4:09Ustedes, déjenme, yo comparto pantalla y
4:12vamos a comenzar con un pequeño videíto.
4:14No.
4:53Chicos, me confirman si no pantalla lo
4:57va a compartir
5:00es un momento.
5:13combate.
5:16Bueno, en esta primera clase vamos a ver
5:17un poco de introducción al lenguaje de
5:20JavaScript. ¿Qué es JavaScript?
5:22JavaScript fue creado para darle vida a
5:25las páginas web. Los programas creados
5:27con este lenguaje se llaman script, por
5:29eso JavaScript.
5:31Estos scripts son texto y no necesitan
5:33ser compilados de ninguna forma para
5:35funcionar, como otros lenguajes que sí
5:37que necesitan de compilación, como es el
5:38lenguaje de Java. ¿Por qué se llama
5:40JavaScript? ¿Tiene algo que ver
5:41JavaScript con Java? Inicialmente tenía
5:44el nombre de LiveScript, pero como Java
5:47era un lenguaje muy popular, se le
5:49cambió el nombre a JavaScript para
5:50posicionarse como el hermano pequeño de
5:53Java. eh fue simplemente un motivo de
5:56marketing para poder vender mejor el
5:57lenguaje de JavaScript. Se le puso el
6:00nombre de Java delante de Script. No
6:02tiene nada que ver con Java, Java con
6:04JavaScript y son lenguajes totalmente
6:06diferentes, ¿vale? No tiene nada que ver
6:08una cosa con la otra, esto que quede muy
6:10claro. Motor de JavaScript. JavaScript
6:13en un inicio se pensó para ejecutarse en
6:15los navegadores, aunque hoy en día va
6:17mucho más allá y se ejecuta en
6:18muchísimos dispositivos y muchas
6:20plataformas diferentes. Cualquier
6:22dispositivo con un JavaScript Engine o
6:24un motor de JavaScript puede ejecutarlo.
6:26Los navegadores incluyen un JavaScript
6:28Engine, por eso JavaScript se puede
6:30ejecutar en un navegador. Existen varios
6:32motores de JavaScript. Tenemos, por
6:33ejemplo, el V8, que es el que utiliza lo
6:35el Google Chrome y Opera, tenemos el
6:37Speed Monkey, que lo utiliza Firefox y
6:40en fin, hay muchísimos, ¿vale?
6:41prácticamente cada navegador pues tiene
6:42el suyo y en fin, hay muchos. Hay que
6:44tener en cuenta que hay características
6:46del lenguaje que son compatibles con un
6:48motor pero no con otros. Es por eso que
6:51esto tenemos que tenerlo en cuenta. En
6:52qué motor se va a ejecutar nuestro
6:54proyecto o nuestro código de JavaScript.
6:56¿Cómo funciona un motor de JavaScript?
6:58Bueno, pues así de forma muy resumida
7:00son esos tres pasos que tengo aquí
7:01puesto. El motor lee el código del
7:03script, lo convierte a código máquina y
7:05la máquina lo ejecuta. Ya está, así de
7:07simple. No hay que darle más vueltas.
7:09¿Qué podemos hacer con JavaScript en un
7:11navegador? Con JavaScript en el
7:12navegador no tenemos acceso a la memoria
7:14o a la CPU del sistema, aunque con
7:17JavaScript utilizando Node JS sí que
7:19tenemos acceso a estas cosas. En el
7:21navegador con JavaScript podemos hacer
7:23todo lo relacionado con la manipulación
7:25e interacción con el usuario de la
7:27página web. Podemos hacer añadir nuevas
7:29HTM a la web cambiando el contenido,
7:31modificando estilos, reaccionar a las
7:34acciones del usuario cuando hace clic en
7:36algún botón o en algún sitio, eh
7:38movimientos del mouse, teclas pulsadas,
7:40etcétera. Enviar peticiones a servidores
7:43remotos para descargar y subir archivos.
7:45Podemos escribir y leer cookies, hacer
7:47preguntas al usuario, mostrar mensajes,
7:49guardar datos en el lado del cliente
7:51para recordar más tarde cuando vuelva a
7:53entrar en esa página web. En fin, pues
7:55todas estas cosas son las que podemos
7:56hacer con JavaScript dentro del
7:58navegador. ¿Qué no podemos hacer con
8:00JavaScript en el navegador? Con
8:01JavaScript ejecutándose dentro del
8:03navegador, tenemos una serie de
8:04limitaciones, sobre todo por seguridad.
8:07No podemos escribir o leer ficheros del
8:09disco duro. No podemos ejecutar
8:11programas instalados en ordenador.
8:13Podemos interactuar con la cámara y o el
8:15micrófono del ordenador, pero siempre
8:16con la confirmación por parte del
8:18usuario. Las diferentes pestañas no
8:21saben de la existencia de otras pestañas
8:23y hay una excepción y es que cuando
8:24desde una pestaña de JavaScript abre
8:26otra y si esa otra pestaña es del mismo
8:29dominio, mismo protocolo y mismo puerto,
8:31es decir, que si tu página, la página
8:33que tú abres con JavaScript es una
8:35pestaña, por ejemplo, y tú abres Google,
8:37no vas a poder interactuar con esa
8:39pestaña desde tu pestaña original. Si tú
8:41tienes una pestaña web, la y abres una
8:43nueva con JavaScript, sí que sabes de
8:45esa existencia de esa nueva pestaña,
8:47¿vale? Pero tiene que ser bajo el mismo
8:49dominio, si no no funciona. Muchos de
8:51todos estos límites dejan de existir
8:53cuando ejecutamos JavaScript fuera del
8:55navegador, como por ejemplo en un
8:57servidor utilizando Nodejs. ¿Qué
8:59convierte a JavaScript en un lenguaje
9:01único? Tiene una integración total con
9:03HTML y CSS. Es el único lenguaje que
9:06tiene integración total con estos dos
9:08lenguajes. Es un lenguaje también
9:11simple, es fácil de aprender y está
9:13soportado por la gran mayoría de
9:14navegadores por defecto. Lenguajes por
9:17encima de JavaScript. La síntasis de
9:18JavaScript no le gusta a todo el mundo o
9:20no es adecuada para según qué proyecto.
9:23Así que tenemos lenguajes que lo que
9:25hacen es compilar su código o
9:26transformar su código a código de
9:29JavaScript. Estos lenguajes son pues
9:31Typescript, Coffee Script, DAR, en fin,
9:33hay muchos. Hay muchísimos lenguajes de
9:35este tipo que lo que hacen es tú
9:36escribes en ese lenguaje y cuando
9:38compilas, o más bien no es una
9:40compilación, es una transformación, lo
9:41que haces es transformar ese código del
9:43otro lenguaje a código JavaScript. En
9:45resumen, JavaScript fue creado para los
9:47navegadores, aunque hoy se puede
9:49utilizar en muchos otros sitios.
9:51JavaScript es el único lenguaje con
9:53integración total con HTML y CS. Esto es
9:56super importante para desarrollo web.
9:58JavaScript es el lenguaje más importante
10:00porque es el único que está integrado
10:02con HTML y CSS. Existen muchos lenguajes
10:06que convierten su código a JavaScript y
10:08nos proporcionan otras características
10:09que JavaScript no tiene. Y ya está, con
10:12esto hemos terminado esta clase de
10:14introducción a JavaScript. Y venga,
10:16vamos a por la siguiente.
10:27Listo, chicos. ¿Qué me pueden decir de
10:29qué es JavaScript?
10:32¿Me puede dar un resumen?
10:39Samuel Nagles, colabórame ahí con un
10:42resumen de que JavaScript.
11:03Samuel, ¿estás por ahí?
11:06Está escribiendo en el chat, profe.
11:11Okay. Okay. Listo. Muchas gracias,
11:12Samuel.
11:14JavaScript es el lenguaje programación
11:16encargado de darle la interactividad y
11:18la vida a la página web. Excelente.
11:21Eh, Diego, colabórame ya que nos
11:24ayudaste con qué JavaScript.
11:29Yo
11:30sí, Diego Mendoza. al propio pues
11:35JavaScript
11:37en sí es la es cómo explicarte
11:41eh JavaScript sirve
11:45para
11:47es otra forma de utilizar el código para
11:49crear aplicaciones que también da la
11:51vida a las páginas.
11:53Y en el video se muestra que se que
11:58tiene algunas funciones que otros
12:02monitores no tienen y que a viceversa
12:06tampoco él tiene, que se puede
12:08complementar con otros.
12:11Excelente,
12:12excelente. Listo. Entonces, ya sabemos,
12:15muchas gracias, Diego, ahí por ese
12:18pequeño detalle. Es muy importante eh
12:21tener en cuenta que JavaScript tiene
12:26unas herramientas
12:28que se complementan con otras
12:30integraciones como ya conocemos, HTLM y
12:32CSS. Eh, normalmente a nosotros nos van
12:35a enseñar JavaScript como si fuera la
12:38herramienta principal para todo el
12:40desarrollo de páginas web. ¿Cómo lo
12:43sabemos? Cuando nosotros entramos a una
12:45página como YouTube, eh podemos darle
12:48F12 y vamos a entrar algo que se llama
12:51inspeccionar código.
12:53Inserccionar código. Aquí podemos ver
12:55los elementos. Elementos de qué vamos a
12:57ver los elementos de HTLM y los
13:00elementos de CSS. Entonces, tenemos
13:03elementos eh de magetación y elementos
13:06visuales. Eh, al momento de entrar a, no
13:09sé, a los consoles, podemos ver muchos
13:12muchos log. Estos log vienen siendo eh
13:16visualizaciones
13:18de
13:20resultados de eventos que tiene el
13:23sistema. al sistema que viene siendo el
13:24sistema, por ejemplo, cuando le damos a
13:27un botón para continuar otro video,
13:29cuando le damos a un botón para
13:31suscribirnos, cuando le damos a un botón
13:33de like, dislike, de compartir, todo eso
13:36son eventos. Esto eso es una
13:38configuración de eh lógica de
13:41programación, una configuración de
13:43lógica de programación que tiene un
13:45evento. Entonces, aquí en el en
13:47elementos podemos ir directamente, no
13:50sé, a un script de eh JavaScript.
13:54Eso tiene sus propios script. Entonces
13:56ahí podemos ver todo lo que viene siendo
13:58como sus comportamientos.
14:01Hm. A nivel de
14:04a nivel de código, pues debería haber
14:07como un una configuración por acá. Vamos
14:10a ver si nos encontramos.
14:13Normalmente tiene muchos,
14:16pero hoy vamos a crear nuestros nuestra
14:19propia página web que va a ser una
14:20calculadora. Como todos comenzamos.
14:23¿Cómo vamos a hacer? Vamos a ir a
14:26nuestra carpetica y vamos a crear una
14:27carpetica que vamos a llamar
14:29directamente nuestros proyectos.
14:35Vamos a crear una carpeta. Voy a les voy
14:38a compartir imágenes.
14:40Eh, le voy a compartir pantalla.
14:49Me confirma si están viendo mi pantalla.
14:56Chicos, me pueden confirmar con un like
14:58ahí con la reacción. Entonces, muchas
15:00gracias.
15:02Vamos a abrir nuestro Visual Studio
15:04Code.
15:13Vamos a abrir nuestro Visual Studio Code
15:15y aquí vamos a ver nuestro explorador.
15:18Vamos a abrir, vamos a crear un nuevo
15:20folder o vamos a abrir un folder como
15:22ustedes decían.
15:25Entonces vamos a crear uno un nuevo en
15:28este momento vamos a hacer la primera
15:29prueba. Yo esperaría que todos
15:33con los antiguos profesores tuviéramos
15:36descargado la aplicación que se llama
15:38NoS. No es como una herramienta que nos
15:41va a ayudar a ejecutar Javac
15:44directamente en nuestro computador.
15:46¿Cómo vemos que si tenemos? Vamos a
15:48escribir
15:50no
15:53version.
15:57A veces se está con Gumersion. Entonces
16:02versionemos que yo tengo la versión
16:0424.18.0.
16:07Esa sería una versión LTS, una versión
16:10que no tiene muchas vulnerabilidades y
16:12si tiene vulnerabilidad normalmente
16:14están parchadas.
16:16Hasta ahí vamos, chicos. Entonces, vamos
16:18a crear nuestra primera aplicación o
16:21nuestro primer mensaje por consola.
16:24Entonces, vamos a crear un nuevo archivo
16:26que lo vamos a llamar log.js.
16:30Y aquí vamos a poner console
16:32console loglog
16:36y le vamos a poner calculadora JS
16:39finalización. Okay. Le vamos a dar
16:41guardar. ¿Y cómo vamos a ejecutar
16:43nuestro JavaScript directamente en
16:46nuestro equipo? con la con el siguiente
16:48comando no
16:51log.js.
16:55Esto, ¿qué viene siendo? Node. Ejecuta,
16:58por favor nuestro archivo log.js
17:01y le vamos a dar enter. Y vieron que
17:03aquí
17:05en nuestra consola imprimió lo que
17:09teníamos arriba. arriba. Eso es una
17:10cadena de texto, una cadena de mensaje.
17:13Normalmente esto lo utilizan mucho para
17:14el tema de para el tema de ey, necesito
17:18saber qué propiedades tiene. ¿Qué
17:20propiedades tienen? Por ejemplo, si yo
17:22no sé eh digo que número va a ser igual
17:27a 25,
17:30entonces hago una prueba matemáticas de
17:34sumar un número formo ver cuánto trae
17:38número. Me dice que el número es igual a
17:4125.
17:43Hasta ahí vamos.
17:45¿Alguna pregunta, muchachos?
18:16No me quedó claro el consol. El consolog
18:19es una propiedad que nos que nos ayuda a
18:22ver lo que tenemos en nuestro sistema.
18:25Solo nos ayuda como a visualizar.
18:31Esto es como decir la consola imprime.
18:36Ese es como el famoso impre, el
18:39sist.Iipi de de Java.
18:42tener en cuenta que existen muchos,
18:45muchos lenguajes de programación, pero
18:47todos los lenguajes de programación
18:49hacen lo mismo, que es entender a la
18:51máquina, ayudarle a la máquina que
18:53entiendan lo que yo quiero codificar,
18:56traducir, lo que yo quiero hacer.
18:59Usted
19:01puede utilizar Java, se puede utilizar
19:03Python como usted puede utilizar Note.
19:06Note que es una herramienta también que
19:09es una herramienta que nos ayuda a a
19:12entender el código de JavaScript. Se
19:14pueden utilizar muchas herramientas,
19:16pero todas hacen lo mismo. Tienen
19:18diferentes sintaxis, tienen de diferente
19:20manera, pero todas hacen lo mismo.
19:23Entonces, usted aprendiendo una lógica
19:25de programación estable, usted es capaz
19:27de programar en cualquier lengua de
19:30programación, valga la redundancia.
19:35En este momento aquí tenemos el conso
19:37log.
19:39El consol es consola, por favor decirle,
19:43consola, por favor imprime, por favor
19:46imprime este mensaje. El mensaje que por
19:50ejemplo
19:52perro, quiero que imprima perro,
19:56voy con no y le digo y mira que aquí en
20:01mi consola aparece
20:03no imprime log.js. js. JavaScript, que
20:08sería la extensión, la extensión de
20:10nuestro proyecto, que en este momento
20:12ustedes pueden ver que aquí aparece como
20:13un logito de JS, un loguito de
20:15JavaScript. Entonces le digo, console
20:17log por favor imprime perro y el imprime
20:20perro si yo tuviera, no sé, unas
20:23variables que ahorita lo vamos a ver con
20:26perro, casa, propiedad, no sé, números,
20:29él puede imprimir. Eso lo vamos a ver
20:31más adelante. Vamos, vamos a comenzar
20:34con una calculadora.
20:36Entonces vamos a escribir nuestro
20:38nuestro archivo calculadora
20:42js. Es importante darle la extensión
20:44punto jss para que entienda que es un
20:46archivo
20:47perdona. Eh, ¿cómo era que se llamaba la
20:49terminal?
20:51La terminal eh
20:54se llama no
20:57que es como es el sistema que nos ayuda
21:00a que nuestra máquina pueda entender
21:02código JavaScript.
21:09U ustedes las pueden descargar
21:10directamente aquí, chicos. Vienen acá,
21:12buscan
21:15ys, vienen acá, le dan en no. Entran, le
21:20dan en descargar, descargan la si tienen
21:24para su sistema operativo es Windows o
21:26Linux, lo descargan y ya lo ejecutan. El
21:29AP un siguiente siguiente siguiente
21:32instala.
21:37Da ustedes le dan siguiente siguiente le
21:38dan instalar y ya con eso tendrían su
21:40terminal de no o también podría
21:45unos algunos algunos que son muy muy
21:48crack vienen acá y lo hacen directamente
21:53lo hacen directamente en en nuestro
21:55navegador.
22:30Listo, chicos. Por ejemplo, mira,
22:33regalarme un momento.
22:55Listo, chicos. Por ejemplo, miren este
22:57caso acá tan particular, ¿qué es
23:00JavaScript? Como ya saben, es un
23:01lenguaje que nos ayuda a a
23:05programar en los navegadores, por así
23:08decirlo. Entonces, que vieron acá, yo no
23:10tenía aquí nada descargado. Yo aquí solo
23:12tenía mi navegador de Google, de Chrome
23:16y desde ahí pude tirar un un código. Le
23:21dije, "Ey, imprimo mi perro." Y él
23:23imprimió. ¿Por qué? Porque todos los la
23:25mayoría de navegadores ya vienen con JS
23:28con ese Node, la mayoría de navegadores
23:31vienen con JavaScript integrado.
23:34Entonces, como ellos se entienden el
23:35lenguaje del JavaScript, por eso
23:37JavaScript es un lenguaje principalmente
23:39para los de front, los que eh
23:42desarrollaron la parte visual, los que
23:44desarrollan todo lo que tiene que ver
23:46con lo visual. Entonces, hay lenguajes
23:49que son más especializados en back y hay
23:51lenguajes que son más especializados en
23:53front. Por ejemplo, lenguajes
23:55especializados en BAC, eh Java, eh
23:58Python, C++, Char, eh lenguajes
24:03especializados en en front. Solo conozco
24:07Java eh JavaScript, perdón, solo conozco
24:09JavaScript,
24:11lenguajes que yo utilizo, solo conozco
24:13JavaScript
24:15en este momento. Por ejemplo, Delfi es
24:17un lenguaje muy antiguo también. Delfi,
24:21que también es como un poquito más
24:22especializado en la parte visual.
24:26Chicos, acá directamente en la consola
24:28yo tiré yo tiré mi consol. Logrimió,
24:31como pueden ver dio una respuesta.
24:36Eso es lo mismo que hicimos acá, pero
24:39sin tener que descargar mucho. Ya el
24:42navegador viene con su con su lenguaje
24:46JavaScript por defecto, pero nosotros sí
24:49vamos a utilizar el de Visual Studio C.
24:52Okay, hasta ahí todo bien.
24:56¿Alguna pregunta?
25:05Eh, ¿cómo es que hiciste para imprimir?
25:07Perdona.
25:09Lo que utilizamos para imprimir con log.
25:17Chicos, entonces
25:21hoy vamos a ver variables,
25:24variables, tipos, operadores y funciones
25:27de calcul de calculadora. Funciones de
25:30calculadora.
25:35Entonces,
25:37ya tenemos nuestro archivito que va a
25:40ser calculadora punjs. Ya tenemos
25:43nuestro proyecto que yo la llamo
25:45normalmente aplicación JavaScript o
25:48appjs.
25:50Entonces, ya tenemos nuestra
25:51calculadora, ya creamos nuestro
25:52archivito y que vamos hacer a
25:54continuación. Eh, tenemos dos cosas. En
25:59todo lenguaje programación existen los
26:01comentarios. Los comentarios son líneas
26:03de códigos que no se ejecutan, que
26:05podemos tener ahí millones, millones,
26:07pero no se van a ejecutar como sistema.
26:09¿Cómo serían las líneas o los
26:11comentarios en JavaScript? Con el famoso
26:14slash slash. Eso ya se entiende que es
26:16una calculadora.
26:18Me
26:21calculadora.
26:25Eh, ¿cómo así que calculadora? Por
26:27ejemplo, yo pongo
26:29eh no calculadora y no me va a imprimir
26:31nada porque eso es un comentario. Si yo
26:34pusiera, no sé, un
26:37normalmente lo voy a poner a y voy a
26:39imprimir también no calculadora.
26:42Eh, me trae una error porque dice ah,
26:44pero con el comentario no se ve. Un
26:47comentario es como si fuera invisible.
26:50Entonces, normalmente nosotros lo
26:51utilizamos para para dar como lo que voy
26:54a escribir o lo que voy a hacer a
26:56continuación sirve para eso. Son como
26:59instrucciones. Entonces, yo puedo poner
27:01much varios comentarios. Yo quiero que
27:03esto sea la calculadora, pero yo quiero
27:04que aquí sea funciones para sumar
27:06número. Yo quiero que aquí sea funciones
27:09para restar dos números. Ejemplo. Okay,
27:12chicos.
27:14¿Me
27:16pueden repetir qué es un comentario? Eh,
27:20Joel Mutis, ¿qué es un comentario?
27:30Pregunta Samuel,
27:34¿cómo hicieron los primeros
27:35programadores para pasar
27:40a intervenir en lenguaje de
27:41programación?
27:47Los primeros programadores,
27:50eh,
27:51por así decirlo, entre comillas,
27:54fueron personas que ni siquiera veían eh
27:58cero. Eran personas que literalmente
28:01todo era a punta de máquinas. máquinas
28:03como máquinas como el famos la famosa
28:07calculadora, no me acuerdo bien del
28:09nombre, pero podían hacer procesos de
28:13suma con eh plantillas de madera que les
28:18escriban como si fueran brailer. Ellos
28:21metían esas brailer a la máquina y eso
28:24hacía un proceso de suma o rest o
28:27multiplicación y le da un resultado.
28:30Mira, no era nada ni siquiera de
28:32sistema, no era nada como e algo
28:35electrónico.
28:37Ya con el tiempo fueron se fueron
28:40creando los famosos protobas, fueron
28:42evolucionando hasta llegar a a estos
28:46lenguajes de lenguajes de consola. En
28:50estos entonces esos lenguajes de
28:52consola,
28:54eso fue hace muchos demasiados años. En
28:58este momento ya la máquina, las máquinas
29:02tienen tanto conocimiento que hoy
29:05utilizamos lo que lo que famosamente
29:07llamamos eh inteligencia artificial, que
29:10al final de cuenta también es otro
29:11lenguaje programación. Una inteligencia
29:13artificial es un lenguaje programación o
29:17un lenguaje natural que la máquina puede
29:20entender.
29:22Es como yo poder hablar con ustedes,
29:24ustedes entienden el lenguaje, ustedes
29:26pueden ser una máquina. Eso es una
29:28inteligencia artificial, algo que que
29:31traduce mi lenguaje natural al lenguaje
29:34maquinado. Okay, chicos.
29:38[carraspeo]
29:43Muy importante que tengamos esto porque
29:44a partir de este momento lo que vamos a
29:47hacer en el reto final eh va a ser
29:50reflejo de todo lo que vamos a aprender
29:52acá. Entonces, por eso es tan importante
29:54que tengan bien lo que es un una
29:58calculadora, lo que va a ser una
29:59variable, lo que va a ser una función,
30:01un parámetro, porque todo lo que vamos a
30:03hacer a continuación es lo que vamos a
30:06reflejar en el reón general. Entonces,
30:09hoy vamos a comenzar con las variables.
30:11Primero, las variables bases de negocio.
30:13Tenemos
30:16variables para mencionar resultado.
30:25¿Qué tiene una calculadora? Normalmente
30:27una calculada tiene una un
30:32tiene que una suma, una reza, una
30:36tiene un número A, un número B, ¿cierto?
30:40¿Cómo aquí podemos eh Perdón, chicos, es
30:45que me están
30:49escribiendo por otra parte? Me regalaron
30:51un momento.
31:16Ya regresió. Entonces, ¿qué tenemos?
31:19¿Qué tenemos en una calculadora?
31:21Nosotros podemos traducir lo siguiente.
31:24Una calculadora tiene un número un
31:26número un número que lo vamos a llamar
31:30número uno.
31:36Hola,
31:43tenemos número dos. tenemos normalmente
31:45algo que se llama también resultado.
31:55¿Quién sabe qué es LED en JavaScript?
32:23El es una propiedad, ¿sí? declarar una
32:27variable correctamente.
32:31Cuando vamos a declarar una variable,
32:33normalmente le tenemos que dar un
32:34atributo. Es como si nosotros le
32:37dijéramos, e tenemos diferentes tipos de
32:39variable. Tenemos variables de tipo
32:42numérico y tenemos variables de tipo
32:43carácter. Tenemos también variables de
32:45tipo buano. Normalmente eso lo divimos
32:48en unit. Ustedes van a verbes
32:52en
32:54imagen.
33:12Entonces, por ejemplo, acá
33:16cuando yo busco variable JavaScript,
33:18tenemos
33:20tenemos la LED, que es un que es crear
33:22una variable con un de bloqueo que puede
33:25cambiar. Después tenemos las constantes
33:28que son constantes fijas que no se
33:29pueden cambiar. La diferencia, por
33:31ejemplo, un aquí yo tengo número uno que
33:35le va a dar un valor de
33:37eh 45. Va a guardar, chicos. Entonces,
33:41miren pues para qué funciona el console
33:42log. El console log
33:47yo puedo imprimir el valor de número uno
33:50y yo lo necesito ver en mi consola para
33:53saber cuánto vale número uno. Entonces,
33:55por ejemplo, yo digo leer número 1 igual
33:57a 45. Entonces, voy a ver en el consolo
34:00el primer número es dos puntos espacio
34:03más el número. ¿Cuánto me cuánto me
34:06debería traer eso? Esperan ahí en el
34:08chat cuánto va a imprimir eso.
34:12Voy con mi 10 punto calculadora
34:19y esto me va a imprimir un total de
34:22mi el primer número es 45. Es el valor
34:25que yo le di. 45. Bueno, entonces si yo
34:28tengo un
34:30número 1 igual a 50, pero yo lo declaré
34:34como 45, ¿cuánto me va a imprimir?
34:38Este me este como es un left, un left es
34:41un número bloqueante que puede cambiar.
34:43Vamos a ver cuánto me cuánto me me va a
34:46imprimir
34:48en algún momento del proceso. Aunque LED
34:52comenzó con un valor de 45, yo le dije,
34:55"A ese número uno cámbialo a un valor de
34:5850."
34:59Él fue leyendo de línea por línea. Sí,
35:04se parece un poco es que todos los
35:06lenguas de programación
35:08hacen lo mismo, pero de diferentes de
35:11diferente manera, por así decirlo. Lo
35:13único que cambia la sintaxis. Cuando
35:15ustedes entienden el primer lenguaje
35:17programación, ya ustedes son capaz de
35:20programar en muchos, muchos lenguajes.
35:24Entonces, aquí ya tenemos el, pero ahora
35:27vamos a hacer con un consta.
35:30Número dos.
35:36Control Z.
35:40El consta va a tener un valor de 10.
35:43Aquí lo va al control. Y vamos a ver.
35:46Listo, ya tenemos que el primer número
35:48es de 50, el segundo número es de 10.
35:51Así es como nosotros comenzamos a
35:52programar, a programar. Pero ahora le
35:55quiero cambiar el número a número dos.
35:57Quiero que tenga eh otros 10, o sea, 20.
36:01Entonces va a ser número número dos
36:03igual a 20.
36:07Es
36:10entonces voy a ejecutar. ¿Qué sucede?
36:14me va a mandar un error. ¿Por qué?
36:16Porque como consta
36:19es número dos, es una constante. ¿Y qué
36:22nos decían ahorita? Las constantes crean
36:25un constante fijo que no se puede
36:28reasignar, no se puede modificar.
36:30Entonces, tenemos LED, tenemos constant
36:32y tenemos el que más utilizan. El bar
36:37es la forma antigua almacenar global o
36:40funciones que causan un error lógico.
36:42Normalmente el bar también lo esta de
36:45LED puede ser también un bar.
36:48Esa LED puede ser también un bar
36:51y pues como eso es de forma global
36:55eso funciona. Eso funciona. El bar es
36:58una es un una variable que utilizaban
37:01hace millones de años. todavía la siguen
37:03utilizando porque mucho código
37:06de hace años, por ejemplo, de YouTube,
37:08que YouTube, ¿cuántos años tiene desde
37:10que nació? Eh, Google, esos esas
37:16plataformas que ya en muchos años
37:18todavía tienen código muy antiguo,
37:19entonces al momento de eliminarlo no
37:22pueden porque pueden dañar todo su
37:24sistema. Entonces, por eso el bar
37:25todavía sigue existiendo, pero
37:27normalmente nos vamos a concentrar en
37:28estos dos, en LED y con. Hasta ahí
37:31vamos, chicos. ¿Alguna pregunta?
37:37Entonces vamos a hacer lo siguiente.
37:39Vamos a hacer que número uno
37:48más.
37:50Bueno, en este momento no vamos a no le
37:51vamos a poner más, sino que vamos a
37:53asignar un
37:55signo de interrogación número dos.
37:59nos llega un resultado,
38:02un resultado como un resultado X.
38:05Entonces vamos a asignar número uno,
38:07nosotros mismos que podamos escribir
38:10datos desde consola. Vamos a asignar una
38:13de las siguientes propiedades, que por
38:15ejemplo, ¿qué tiene una calculadora?
38:18¿Qué operaciones tiene una calculadora?
38:20¿Qué me puede responder eso?
38:25sumar y todo eso, ¿no?
38:27Bueno, tiene sumar. ¿Qué más?
38:31Sumar
38:33tiene restar también
38:36tiene multiplicar y dividir. Si quieres
38:39le podemos agregar otra que es potencia.
38:45Solo potencia. Ya, ya. No quiero hacia
38:48muchas tampoc por el momento es es más
38:51que suficiente. Entonces le vamos a
38:53decir, "Ey, voy a ingresar número uno,
38:56voy a ingresar eh número dos y voy a
38:59ingresar mi operación matemática." Y
39:01quiero que me devuelva que me devuelva
39:04un resultado.
39:09Quiero que me un resultado
39:13para acá.
39:33Listo. Entonces, vamos a hacer la
39:35siguiente de manera.
39:39la
39:47Entonces vamos a hacer LED
39:49número uno
39:54va a ser igual
39:57a 10. Por ejemplo,
39:59le número número dos va a ser igual a 5.
40:04Okay.
40:06Y va a ser igual a
40:08para estar claros, el left en C es para
40:11añadir variables.
40:13Sí, le es para para añadir variable.
40:17Okay.
40:27La diferencia entre una variable y una
40:29constante es que una puede mutar y la
40:31otra no. Ess sencillo. Las variables
40:35pueden mutar. Las constantes desde el
40:37momento que se declara así quedan. Por
40:40ejemplo, si yo quiero declarar una
40:42constante de que e yo siempre en un
40:44banco, yo siempre voy a tener un millón
40:46de pesos en crédito, la constante no se
40:49cambia, siempre vas a tener un millón de
40:51crédito. Si quieres cambiarla tienes que
40:53crear una nueva constante. Son datos que
40:56no se pueden mutar, son inmutables.
41:03Listo, chicos.
41:05Esto es un poquito te el inicio, pero si
41:07yo no les doy esto es muy duro que
41:10avancelen. Entonces es necesario.
41:17Eh, bueno, entonces aquí tenemos esto.
41:19Entonces vamos a definir nuestro
41:20nuestros procesos eh de operación
41:24matemática.
41:26Operaciones operaciones
41:30matemáticas. Vamos a
41:34a definir el de una constante para
41:37sumar, para multiplicar, dividir y
41:41trabajo que me faltó que era la
41:42constante de módulo on, ¿no? No módulo
41:45no, que nosotros conocemos como
41:46potencia.
41:50Ya les explico después que es un módulo,
41:52que es una potencia. y vamos a y vamos a
41:54ejecutar
41:57dar o imprimir
41:59el resultado
42:03dado, digamos de suma.
42:09Mm.
42:16Listo, chicos. Entonces, para este
42:18momento lo va a hacer así.
42:20Tenemos número uno, número número dos,
42:24resultado. ¿Qué va a ser las operaciones
42:26matemáticas? Las operaciones matemáticas
42:29van a ser que [carraspeo][tos]
42:34que el número uno con el número dos se
42:37va a guardar en una, digamos, en una
42:40constante que va a ser temporal o una
42:43variable temporal.
42:46Entonces, por ejemplo, aquí número uno
42:48se está sumando y se va a guardar en
42:50suma. Aquí número dos se está restando y
42:53se va a guardar e en resta. Aquí número
42:57uno con número dos se está multiplicando
42:59y se va a guardar en multiplicación.
43:01Igualmente, número eh uno con número dos
43:04está dividiendo, se va a guardar en
43:05división y número uno con número dos se
43:09está potenciando. Está aquí en
43:12JavaScript. Si es como escribimos una
43:14potencia. ¿Qué es una potencia? Es un
43:16número elevado a una cantidad
43:25y se está guardando potencia. Ya, por
43:28ejemplo, aquí yo quiero darle e
43:30resultado va a ser igual a suma. Eso es
43:33solo código,
43:35netamente código escrito aquí no vamos a
43:37interactuar con la consola, pero vamos a
43:39ver qué resultado nos da. Por ejemplo,
43:42eh, no calculadora nos debe a dar el
43:44resultado de suma 10 + 5 15
43:50s super exacto. Entonces, por ejemplo,
43:51yo quiero ver cuánto da es potencia. Doy
43:54control S, lo vuelvo a ejecutar.
43:58Eh, 10 elevado al cinco. Pues solo le
44:02agregamos los cinco ceros de más y ahí
44:05está.
44:07Es correcto.
44:10Eh, la multiplicación
44:13eh, digamos división. Entonces, solo
44:16quiero cambiar la división.
44:24Perdón, resultado de la división
44:28es control S.
44:3110 di 5
44:33dos. Correcto. ¿Qué pasaría donde
44:37digamos yo cambié que número uno sea
44:42sea cinco y número dos sea 10?
44:49¿Cómo sabemos qué sintaxis usar?
44:52Eso ya depende de cada persona. Por
44:54ejemplo, yo soy muy enamorado de la
44:56sintaxis de Java porque Java es un es
44:59algo que se escribe muy lineal.
45:03Entonces, por ejemplo, a mí no me gusta
45:04utilizar mucho lo que llaman eh arrom
45:07function, funciones flecha y eso es por
45:10la función flcha. Entonces, por ejemplo,
45:12a mí me gusta mucho el back, de hecho
45:14soy desarrollador back y utilizo la
45:16sintaxis de de java de Java, pero hay
45:19personas que es muy complicado Java,
45:22entonces, por ejemplo, utilizan Python,
45:23que Python es mucho más limpio que Java.
45:27Y hay otras personas que van utilizando,
45:30cada quien depende de la sintaxis o el
45:33lenguaje de programación que se enamore,
45:35porque eso sí, hay personas que definen
45:37la capa de espa de programación.
45:43Entonces, aquí yo ejecuto.
45:52¿Qué pasa si divido entre cer?
46:01El resultado es infinito, ¿no? Nos da un
46:05resultado. Por ejemplo, aquí nos da eso.
46:07Pero si esto fuera en Java, esto nos
46:09arroja de una vez un error. Ey, ¿cómo
46:12así que división entre cer? División
46:14entre cer es imposible. Eso nos han
46:16enseñado toda la vida.
46:20¿Qué te qué te está pasando? Vete serio.
46:23Eso eso es imposible. Pero aquí, por
46:25ejemplo, al menos una respuesta. Nos da
46:27una respuesta que nos dice, "Ey, ese esa
46:31división es infinito, eso es
46:32indeterminado."
46:36Listo, chicos. Entonces, ahí ya tenemos
46:39lo que es un proceso de de de variables
46:42y constantes. Hasta el momento todo
46:45bien, todos entendimos. ¿Alguna
46:47pregunta? Pregunten en este momento para
46:49avanzar al siguiente módulo.
46:52¿Listo, Samuel?
46:54Y los otros chicos pueden reaccionar,
46:57pueden dejar que sí entendieron en
47:00Valeria,
47:04Nicolás, Isabela,
47:06Abraham,
47:09Diego, comentame que no entendiste,
47:12porque más o menos,
47:15o sea, más o menos porque en la parte de
47:18la terminal me perdí un poquito, pero
47:21por lo demás lo entendí totalmente.
47:25Por la terminal, ¿te refieres a cuando
47:26estoy ejecutando acá en en 10?
47:31Mm.
47:31Sí,
47:34listo.
47:35No lo veamos tan complicado. Intentemos
47:37imaginarlo que no lo veamos tan
47:39complicado, que la terminal solo es para
47:41ver el resultado, nada más. Es nuestra
47:44herramienta para ver lo que estamos
47:45haciendo nosotros. Ya nada más.
47:49La terminal solo es como decirle eh
47:52cuando nosotros tenemos nuestra
47:53aplicación que le damos, no sé, cli
47:56click por ahí para ver un room, eso solo
48:00es eso, la terminal. En ese momento solo
48:02estamos viendo código, entonces no no no
48:05no imaginemos que es tan complicado,
48:08digamos, eso es relajado, nosotros lo
48:10entendemos, nosotros somos capaces,
48:17eh. Okay, José, estás intentando
48:21descargar no. Listo, dale de una. Si no,
48:25muchachos, si no quieren descargar no
48:27es, no sé, vamos a ver si de pronto eh,
48:32ya va.
48:34No, es que como tengo trade, entonces sí
48:36o sí es necesario instalar el Note, ¿no?
48:39Sí, obvio. Tienen, instálenlo, es
48:42serencillo, ya les expliqué. Pero si en
48:44este momento quieren ustedes también
48:46ejecutar su su código ya conmigo y
48:50siente que de pronto se pueden demorar
48:52mucho instalándolo, vienen a uno de
48:54estos JavaScript online y eso es lo
48:57mismo. Mira, es lo mismo.
49:00Receta
49:02voy a copiar acá.
49:14Listo, chicos. Es lo mismo. Nos dio el
49:16mismo resultado. Nos dio el mismo
49:18resultado.
49:21Entonces, si lo quieren, si lo quieren
49:22como ir tirando código conmigo
49:26y quieren volverse un monstruo de los
49:27del código, porque la única la única
49:30forma de aprender a programar es
49:32programando. La única programación
49:36a mí
49:38ya ya los comparto. Estuviéramos
49:40enojados.
49:46[carraspeo]
49:47Listo. Ahora estamos en
49:51eh las variables, tipos, operadores. Ya
49:55tenemos ya tenemos las variables, tipos,
49:58los operadores y aplicar.
50:03Ahora, ¿qué vamos a hacer? Vamos a hacer
50:04una mini librería de cálculo aplicado en
50:07sus emprendimientos.
50:10Entonces,
50:13ya entendemos que las variables tenemos
50:16left y cons. Le es una variable, consar,
50:25vamos a hacer una idea hoy. Hoy vamos a
50:27desarrollar esto. Tenemos una caja con
50:30nombre guardado que guarda datos que va
50:33a ser
50:35volver a llenar y consa no se puede
50:38volver a llenar. Tenemos tipos de datos,
50:40los naturales del valor que tenemos
50:43stram, numer, boleanos, ya les explico
50:46qué es esto. Los operadores aritméticos
50:49que ya conocemos, suma, resta,
50:51multiplicación, división y módulo, eh,
50:53perdón, residuo, que ya se los va a se
50:56los va a explicar también. Las
50:58operaciones de comparación, operaciones
51:01lógicos, consoles, funcionen y
51:03minilibrería. Listo.
51:06Ahora, ahora sí, chicos, ya que tenemos
51:08como nuestros conceptos básicos, vamos a
51:11comenzar con nuestro nuestro código.
51:14Vamos.
51:15Tengo entendido
51:17que Java eh Visual tiene como unos
51:21atajos para, por ejemplo, para escribir
51:23console.
51:25No sé cómo creo que es. Mm.
51:33que algo así, no me acordé, pero tiene
51:35como una tajita ahí para escribir todo
51:37el consolado.
51:58Entonces,
52:02primero vamos a definir nuestras
52:04variables de negocio.
52:09Vamos a definir una constante constante
52:12que se va a llamar nombre del negocio.
52:20¿Cómo vamos a llamar nuestro nombre de
52:22negocio? H, ¿qué tal si hacemos una
52:25cafetería?
52:27Club Pengi.
52:31Club.
52:36escribir penguin
52:41lo penguin.
52:49Vamos a escribir penguin coffee.
52:57Vamos a darle un precio a ese café. ¿Qué
52:59lesé qué les parece si le damos un
53:01precio a ese café?
53:03Vamos a llamarlo precio base.
53:06Démelo un precio real.
53:11Una
53:14eh vamos a llamar cuánto un café en
53:17Starbuck.
53:19Coméntame cuál es la pregunta.
53:23Eh, las constantes se pueden modificar,
53:26pero la left. ¿Cierto?
53:29Al revés. Las que son las variables y
53:32las cons que son las constantes. Aquí
53:35las tengo, muchachos. Importante tener
53:37eso. Guíensen como cons. Cons, ¿qué es?
53:41Cons es una constante
53:44y le es la variable.
53:48Listo, chicos, ya tenemos nuestro
53:49nuestro precio va a ser
53:51que va a ser de
53:5420,000. Ojalá todo ese volumen así
53:56inflado lo que hubiese abajo.
53:58Y vamos a también a calcular un IVA, un
54:02IVA de en Colombia el IVA actual es del
54:10[carraspeo]
54:10Entonces vamos a vamos a a mostrar lo
54:13que tenemos actualmente
54:15que serían nuestros consol
54:22ejecutar nuestro calculadora.
54:25Y vamos a ver qué tenemos. Tenemos,
54:29no quiero que se ejecute eso.
54:35Listo, tenemos nuestro negocio que se
54:37llama Club Pengwiin, que es como el
54:40nombre y nuestro precio, nuestro precio
54:43base que es de 20.000. Hasta ahí vamos
54:45bien, muchachos. Ahora, ¿qué vamos a
54:47hacer? Vamos a hacer algo que se llaman
54:49funciones.
54:51¿Cómo se cómo se declaró una función? La
54:53función se declara de la siguiente
54:55manera. Función,
54:59para que sepa que es una función, el
55:01nombre de la función que va a ser de
55:03calcular precio con descuento. Entonces,
55:06en este momento nuestra primera función
55:08se va a llamar precio con descuento. Le
55:11pasamos nuestras propiedades.
55:19Así se declara una función. Una función
55:22está compuesto por algo por la palabra
55:25función, nombre de la función, las
55:27propiedades que pueden ir y
55:30x o y el y el proceso de la función.
55:36¿Cómo así? ¿Qué es una función?
55:39Pues es nuestro método. Pínsenlo como
55:41una fábrica.
55:44Ustedes tienen la fábrica.
55:47La fábrica, digamos, el nombre de la
55:49fábrica es zapatos. ¿Qué hace la
55:52fábrica? Hace zapatos. Por un lado
55:56entran los materiales, el caucho, el
55:58cuero, eh las uelas, todo. Y por otro
56:03lado salen los zapatos.
56:05Es exactamente eso. La función se puede
56:08llamar zapatos.
56:12Por aquí entran los materiales que ya
56:14sabemos que es el cuadero
56:18y suelas.
56:21Suelas.
56:26Y aquí va a retornar o va a devolver
56:30zapatos.
56:33Zapatos.
56:36Así. Esa es una función.
56:38Esto es una función para todas todos los
56:41lenguajes de programación. Esto es una
56:43función. Así se traduce una función.
56:45¿Qué va a ser zapato? El zapato va a ser
56:47igual a a cuero mazuela.
56:57Es sers sencillo. Es
57:01regresando a nuestro a nuestro método, a
57:04nuestra función de calcular el precio
57:05con descuento. Entonces, tenemos nuestro
57:08precio con descuento.
57:14¿Qué le vamos a pasar? ¿Qué le vamos a
57:15pasar? Vamos a pasar el precio normal y
57:19le vamos a pasar el
57:21porcentaje de descuento.
57:30Lo voy a copiar por aquí, se los va a
57:31explicar paso a paso para que lo
57:33entendamos más.
57:42¿Qué tenemos acá? Acá tenemos la
57:45siguiente función que debes calcular
57:46precio con descuento. Este precio con
57:49descuento tiene dos constantes, tiene P
57:51y D. ¿Qué P? ¿Qué P qué viene siendo?
57:54Piene siendo el el precio, el precio que
57:57nosotros le pasamos
58:00y un porcentaje con descuento que
58:02nosotros también le pasamos. Entonces,
58:04por ejemplo, nosotros le vamos a pasar
58:06él compró no uno, sino dos cafet y una
58:09galleta. Fueron 68,000 y le vamos a dar
58:12un descuento al 10%. Le pasamos los
58:1468,000 más el 10%. Entonces es esos
58:18datos los tenemos que atrapar en un
58:20momento para poder para poder hacer esa
58:22operación. Entonces, por eso los estamos
58:24guardando. Entonces, constante. ¿Por qué
58:26constante y por qué no variables? Porque
58:29las constantes no se pueden modificar.
58:33Cuéntame, Jose, ¿en qué te perdiste?
58:39José fusión
58:45en la fusión, o sea, ¿qué es? O sea, no
58:48no entiende el este, pues supongo que es
58:51como
58:53No, no sé, no ni idea. Chicos, si
58:57alguien quiere responderle a José Brán
59:00lo de la función.
59:03La función viene siendo
59:07una fábrica que entra un producto y
59:11retorna un resultado. Eso viene siendo
59:13una función. Es como nuestro proceso
59:16donde vamos a hacer toda nuestra lógica.
59:19Véalo a nivel de, no sé, de por ejemplo,
59:24eh, un galpón
59:25tiene gallinas o retorna huevos.
59:28Sí, o sea, eso lo entiendo. El if y el
59:31retum, pues normal,
59:34pero
59:37en sí, o sea, no se podía hacer lo
59:39mismo, o sea, siempre me lo he
59:40preguntado también en otros lenguajes,
59:42eh, no se podía hacer lo mismo con
59:43constantes y variables y ya está, ¿no? O
59:46sea, no es lo mismo,
59:49¿eh? No son cosas diferentes porque una
59:51constante variable son apenas los lo la
59:54declaración la declaración y para que
59:56sepan que es una función porque e yo
59:59puedo crear esto acá, yo puedo crear
1:00:02esto acá y yo lo puedo utilizar en otra
1:00:04parte de mi código para no tener que
1:00:07volverlo a escribir porque es una
1:00:09función y yo puedo llamar funciones de
1:00:11otra parte de mi código. Pero en ese
1:00:13momento, si yo lo hago solo con
1:00:15constante y variable, eso solo va a
1:00:16quedar en un tipo de código espaguete o
1:00:19es un código de espaguete el código que
1:00:21tenemos que escribir millones y millones
1:00:23de líneas de código. Cambio, con una
1:00:25función solo la tenemos que escribir una
1:00:27vez y la podemos utilizar las veces que
1:00:29queramos. Por eso es muy importante el
1:00:32tema desarrollar con funciones.
1:00:36[carraspeo]
1:00:37Listo, chicos. Entonces, aquí tenemos el
1:00:39precio y el porcentaje de descuento.
1:00:41Ahora vamos a hacer la condición de IF,
1:00:43el famoso IF. Sí.
1:00:48Bueno, este es
1:00:50eso es para que retorneo un boliano.
1:00:56Bueno, esto es para que retorne tipo
1:00:58esto en este momento, pero no me importa
1:01:00mucho. Ahorita les explico para qué es
1:01:02esto. Nuestro descuento va a ser igual
1:01:05al el precio por el descuento dividido
1:01:09dividido 100. Esa es la famosa regla del
1:01:13trad. El resultado va a ser eh precio
1:01:16menos descuento.
1:01:19¿Qué pasa si yo ejecuto esto? Hm.
1:01:29¿Por qué, chicos? Porque no nos dio.
1:01:35Exacto. Es como los bloques propios de
1:01:38Scratch.
1:01:40No hay como mejor comparación. Un bloque
1:01:43de scrash viene siendo una función. Una
1:01:45función tiene sus propios parámetros.
1:01:50Chicos, acá, ¿por qué no nos no nos
1:01:52devolvió el resultado de la función?
1:01:57¿Alguien sabe?
1:02:11que nos faltó algo muy importante y te
1:02:14declarar el descuento
1:02:19y pasarle además los datos. Entonces
1:02:24aquí voy a declarar un consolo que va a
1:02:26ser el descuento del 10% de esos 20,000
1:02:29que fue el precio base que tenía la
1:02:32persona. Va a ser igual. Ah, mira, a qué
1:02:34estoy llamando a la función, no estoy
1:02:36llamando todo su proceso, solo estoy
1:02:38llamando a la función. Estoy pasando el
1:02:40precio base que es de 20,000 y un
1:02:43descuento del del 10%. Ahora, ahora sí
1:02:47rojas.
1:02:48Necesitas que la función sea un igual a
1:02:50algo, ¿no? Y llamar es igual. Si no esté
1:02:52malo, me fume tres por necesito llamar,
1:02:56necesito llamar la función. ¿Y la
1:02:57función, ¿cómo se llama? pues con el
1:02:59nombre, el nombre y sus datos en este
1:03:02momento. Por ejemplo, lo que yo les
1:03:04decía, yo quiero que yo quiero pasar,
1:03:08tengo mi sistema acá y yo quiero darle
1:03:10el descuento del del 10%, pero es un
1:03:13valor diferente. Entonces, por ejemplo,
1:03:16el empleado dice, "El valor es de 68000
1:03:22y el descuento no es del 10, sino del
1:03:2515."
1:03:27Entonces,
1:03:29por ejemplo, mira ahí el descuento del
1:03:3468
1:03:38al 15
1:03:42es diferente.
1:03:44Entonces, así es como se hacen los
1:03:46sistemas. Así es como están hechos todos
1:03:48esos equipos de los celulares, eh los
1:03:51equipos de venta, eso es un equipo de
1:03:54venta. Listo, muchachos. Entonces, ahí
1:03:56tenemos nuestra primera función, que es
1:03:58la de calcular precio con descuento.
1:04:03Entonces,
1:04:06yo sé que ustedes son unos test o si
1:04:08ustedes son unos crack. Y entonces,
1:04:11¿cuántos somos?
1:04:13¿Cuántos
1:04:15somos en la reunión? Cate, ¿me colaboras
1:04:17ahí?
1:04:19Somos 46.
1:04:25Listo. Vamos a hacer
1:04:31en grupitos de cuatro. En grupitos de
1:04:33cuatro vamos a hacer dos nuevas
1:04:35funciones.
1:04:37Okay, chicos. Vamos a hacer dos nuevas
1:04:38funciones.
1:04:40Vamos a hacer la función
1:04:46de calcular
1:04:49total de pedidos y vamos a hacer la
1:04:51función de
1:04:58calcular precio con impuesto.
1:05:06Vamos a hacer es porque cuatro
1:05:09dos van a ser una de calcular total de
1:05:12pedidos y los otros dos van a ser
1:05:14calcular precio con con impuestos.
1:05:24Por eso van a hacer eh José, por eso van
1:05:26a hacer en grupos para que se puedan
1:05:28hablar, se puedan comunicar, puedan
1:05:30hacer todo.
1:05:32Si no entienden, yo voy a estar pasando
1:05:33por la sala. Espero que estén
1:05:36compartiendo pantalla y estén
1:05:37codificando, haciendo preprogramming.
1:05:40Vamos a hacer,
1:05:45vamos a tirar código. Pues en este
1:05:47momento ahora es necesario el hecho de
1:05:50tirar código.
1:05:55Entonces
1:05:56lo pueden hacer con sus otros
1:05:58compañeros, lo pueden entender. Lo
1:05:59importante es que los cuatros entiendan
1:06:01todo el código, tanto el de calcular
1:06:03total de pedido como calcular precio con
1:06:06impuesto. Eh, les podemos dar que para
1:06:10eso le podemos dar, no sé,
1:06:14eh, 15 minuticos. Yo creo que está bien,
1:06:17Kate,
1:06:20profe, pero primero comparta el código,
1:06:22¿no? Pues para hacer después nosotros la
1:06:25nuestra propia función, ¿no? Para no
1:06:27tener acerto de nuevo.
1:06:29Mm, creo que no es necesario porque
1:06:33ustedes ya deberían de tener ahí como
1:06:35los espacios y si es lo mismo.
1:06:38Sí,
1:06:40pues creo que no es necesario,
1:06:42¿no? Qué pereza hacer todo eso. el
1:06:45código te no sé si pero la función no si
1:06:49quiere pero el código sí o sea lo de
1:06:50arriba, lo de la
1:06:51chicos es que el el código solo son si
1:06:55no es la función solo serían estas tres
1:06:57variables.
1:07:02Ah, no, sí es cierto.
1:07:06Es ser sencillo. Entonces,
1:07:09¿cuál sería?
1:07:11¿Cuál sería el picante y cuál sería el
1:07:13sazón? Lo bueno es que ustedes también
1:07:16lo hagan a su modo. Ustedes tienen que
1:07:18entender algo que el código o la
1:07:21programación
1:07:23llega hasta donde llegue su imaginación.
1:07:26Por eso los programadores hacen de todo
1:07:28en el mundo. Se puede ser aquí, chef,
1:07:30arquitecto, astronauta,
1:07:33eh banquero. Usted ustedes aquí pueden
1:07:36desarrollar todo lo que imaginen. De
1:07:39hecho, fue una de las razones porque yo
1:07:40estudio programación, porque yo quería
1:07:43hacer múltiple cosas y aquí en el en los
1:07:46sistemas encontré como la razón para
1:07:48hacer todo lo que yo quisiera,
1:07:51es soñar y codificar.
1:07:54Listo, chicos. Eh, dale, Cat. Ahí ya les
1:07:57pasé los dos las dos nuevas
1:07:59funcionalidades.
1:08:01Repito,
1:08:04son grupos de cuatro. Dos van a ser
1:08:06calcular total pedido, dos van a ser
1:08:09calcular precio con impuesto. Impuesto
1:08:12de cuánto, del 19.
1:08:15Los cuatro es de entender el código
1:08:17tanto de uno como del otro. Si yo les
1:08:19llego a preguntar la nota,
1:08:22va a depender de la respuesta que den.
1:08:25Okay,
1:08:28listo. Cencemos.
1:08:30Ya los puede
1:08:31mandar a la sala.
1:08:35Tienen 15 minutos para eso.
1:09:10Mariana, ¿nos escuchas?
1:09:18Andr, recuerda que esta sesión debe
1:09:20terminar faltando más o menos 15 minutos
1:09:23para las 10
1:09:25y eso.
1:09:28Por lo que a las 10 sigue otra sesión.
1:09:30Entonces, para organizarla necesitamos
1:09:32como bueno, 10 terminar unos minutos.
1:09:37Es que está esa sesión de inicio es más
1:09:40lujita porque es mucho
1:09:44concepto, pero si no se les da esto
1:09:49ahí sí quedan pero partidas.
1:09:52Entonces están monotonad
1:10:01a ver si con las salas de pronto e ya
1:10:04habla. Ay. Voy a intentar de que termine
1:10:07a las 45 o intentar de que termine a las
1:10:1040.
1:10:12Gracias.
1:10:14Porque es es este siempre es
1:10:16complicadito.
1:10:29Paso por la sala. ¿Cómo están los
1:10:30muchachos?
1:11:02Eres
1:11:04No, profe, no.
1:11:06Eres toroyo porque eres el más fuerte
1:11:09porque eres a toryo o eres a toryo
1:11:12porque eres el más fuerte.
1:11:14Dijo lo mismo, ¿no?
1:11:16A dónde
1:11:17cambiarlo
1:11:19o eres el más fuerte porque eres a todo
1:11:20el golo.
1:11:23Ay, yo no sé.
1:11:24Bueno, muchachos,
1:11:26¿cómo nos [carraspeo] fue? ¿Cómo nos
1:11:28fue? ¿Cómo se sienten? ¿Listo para traer
1:11:30el mundo de la programación?
1:11:32Lo mío.
1:11:33No, profe, faltó tiempo.
1:11:36Faltó tiempo.
1:11:39Usted media hora más,
1:11:42¿cuántos días más necesitaban para
1:11:44resolver eso?
1:11:49Ya me realizas
1:11:50una media hora más.
1:11:54Okay. Media hora más. Entonces, chicos,
1:11:56les va les va a dar pues el código ya.
1:12:01Pongan atención,
1:12:04escuchen,
1:12:06era tan sencillo como hacer eso. El
1:12:10primero vi que un grupo sí lo hizo,
1:12:12este, el de calcular pedido total, creo
1:12:15que era el cuatro, el cuatro, el cinco,
1:12:19no me acuerdo bien, ese grupito.
1:12:24Un grupo que sí lo hizo. No, no alcancé
1:12:26a ir a todos los grupos. Qué pena, no me
1:12:28dio el tiempo.
1:12:31Pero el de calcular total de pedidos era
1:12:33lo siguiente. Teníamos, como les
1:12:36expliqué, yo tengo mi cafetería o llamo
1:12:39a la cafetería del barrio para pedir
1:12:42unos cafés y unas cositas extra, dólar,
1:12:45lo que sea. Entonces, normalmente ellos
1:12:47me dan un precio, un precio unitario por
1:12:50producto. Cada café vale 25,000.
1:12:53Ejemplo,
1:12:55quiero, yo estoy con cuatro amigos,
1:12:57entonces los quiero invitar. Compró
1:12:59cuatro café, entonces la cantidad,
1:13:02precio unitario, cantidad y esos me
1:13:04dicen, el envío vale 7,000 hasta su
1:13:07casa. 7,000. Entonces voy a guardar esos
1:13:12esos parámetros parámetros porque cuando
1:13:15una variable o un dato entra a una
1:13:19funcionalidad cambia nombre a
1:13:20parámetros. Voy a agregar esos
1:13:23parámetros en unas constantes para poder
1:13:26hacer un proceso matemático.
1:13:29Eso no es necesario por el momento.
1:13:32Tenemos PU presunitario, tenemos
1:13:36Cantidad y tenemos C envío.
1:13:41La el cálculo total del pedido va a ser
1:13:46precio unitario por cantidad más envío.
1:13:50Eso.
1:13:57Entonces,
1:14:01total pedido tres unidades de 200 con
1:14:05envío de 5000.
1:14:09Cada café vale 20.000. Voy a pedir tres
1:14:12cafés y me van a cobrar 5,000 de envíos.
1:14:15Al yo ejecutar eso.
1:14:20¿Cuánto es el total? El total es de
1:14:2365,000.
1:14:25Eso era, chicos.
1:14:27Eh, profe, pero hay una pregunta. Usted
1:14:30más arribita eh tiene una constante que
1:14:33se llama precio base,
1:14:36¿no es cierto? ese precio, esa esa
1:14:38variable no la podíamos usar en nuestra
1:14:40función de ahora.
1:14:42Sí, pues sencillamente el precio base
1:14:46puede ser eso.
1:14:49Eh, control Z.
1:14:53Sí, lo pasé como precio base. Ah,
1:14:55espera.
1:14:57Ah, con razón lo eliminé. Control Z.
1:14:59Control Z.
1:15:02Sí, el precio base, nuestra nuestro se
1:15:06puede pasar como si fuera el dato, pero
1:15:10se pasa directamente en la
1:15:11funcionalidad. ¿Por qué? Porque es que
1:15:14nosotros no lo podemos pasar en nuestra
1:15:17calculadora total de pedidos. Y ya sé
1:15:19porque ya les voy a explicar ahí algo
1:15:23que yo acabo dear ahorita.
1:15:25Una pregunta, ¿qué es c?
1:15:35Eso es esa parte. Mira, aquí tenemos
1:15:39nuestra constante, nuestra constante que
1:15:42se llama precio unitario, PU por set,
1:15:46que es la cantidad, la cantidad.
1:15:48Entonces, cuando
1:15:50cuando vas a comprar, no sé, eh
1:15:54huevos, usted normalmente le dan un
1:15:56precio unitario y le dan una cantidad
1:15:59del panal de huevos que son 30.
1:16:01Entonces, ese precio unitario usted lo
1:16:02multiplica por 30, eso le da la cantidad
1:16:04total más el envío. Eso sería lo que
1:16:08retorna la funcionalidad, el precio, el
1:16:11precio total del pedido. Eso es lo que
1:16:13retorna la funcionalidad.
1:16:16Y con respecto a la pregunta de si el
1:16:18precio base, si el precio base lo
1:16:20podemos pasar como un parámetro.
1:16:24¿Por qué no me quiere dar? Bueno, acá no
1:16:27me quiere dar por la siguiente razón
1:16:29porque falta una validación de que sí
1:16:33sea un un dato. No.
1:17:11Chachos. Ah,
1:17:15mucho.
1:17:19Listo.
1:17:21Ahí está. El precio ¿Cuánto fue el
1:17:24precio? Va a ser cuánto fue 2000. Pero
1:17:26yo quiero que el precio va a ser
1:17:30el café subió porque estamos en
1:17:31Colombia. El café subió. Entonces, yo
1:17:33quiero que el café valga 30,000.
1:17:38Entonces, el precio ya cambió. Entonces
1:17:41ellos dicen, "Llegan cuánto, 95,000 por
1:17:44tres café. Matea
1:17:47ni que estuviéramos
1:17:49en el poblado.
1:17:53Listo, chicos.
1:17:55Eso sería la primera la primera
1:17:57calculadora y ahora la funcionalidad de
1:18:00calcular precio con impuesto.
1:18:07Vamos a ver la funcionalidad de calcular
1:18:09precio con impuesto.
1:18:12Ah, esta era mucho más sencilla.
1:18:17[carraspeo]
1:18:18Les explico esta.
1:18:21Tenemos 3 minutos para terminar esto,
1:18:23muchachos. Y nos vamos, les explico
1:18:26esta.
1:18:28Calcular precio con impuesto.
1:18:30Es sers sencillo. Tenemos un precio
1:18:32total y un porcentaje de impuesto. ¿De
1:18:35cuánto era el porcentaje de impuesto de
1:18:37nosotros? Yo les dije que era el 19 del
1:18:39IVA, el 19%.
1:18:43¿Cómo se calcula el impuesto? El
1:18:45impuesto es igual al precio por I sobre
1:18:49100 y eso retorna a un impuest un precio
1:18:53más un impuesto. Entonces si yo llego
1:18:58y
1:18:59de paso
1:19:09va 19.
1:19:12Mira, por ejemplo, aquí estoy utilizando
1:19:14el precio base más el IVA. Entonces,
1:19:17precio con IVA del 19%, calcular
1:19:21impuesto. Si yo ejecuto esto, me da un
1:19:26por producto por producto de 30.000 con
1:19:29un IVA del 19% me da un total de 35700.
1:19:38Ahora sí, chicos, va a pasar el código.
1:19:44Tomen captura de pantalla
1:19:50que creo que no me está funcionando para
1:19:52para pasarle esto.
1:19:54Control C, control B, pilation con todo.
1:20:00Declaración project
1:20:04control A, control B.
1:20:08Listo, chicos. Ahí les pase el archivo.
1:20:14Descarguen el archivo, modifíquenlo,
1:20:16véanlo, eh analícenlo,
1:20:20rectifíquenlo.
1:20:22Eso sí, muchachos, importante. Trabajen
1:20:24en el archivo. Trabajen en el archivo.
1:20:27Eh, para
1:20:30listo, ya trabajan en el archivo porque
1:20:33la única forma de que ustedes sean capaz
1:20:35de programar es escribenlo.
1:20:38dediquen media horita a tirar un código,
1:20:40hagan otra funcionalidad. ¿Cuál
1:20:41funcionalidad pueden hacer? No sé, eh
1:20:45eh precio mayorista.
1:20:47¿Cómo es un precio mayorista? O precio
1:20:50por envío, eh
1:20:53guardar productos, calculadora, pueden
1:20:56hacer muchas otras funcionalidades que
1:20:58ustedes se les ocurra. que es verdad lo
1:21:00que dices. O sea, por ejemplo, algo que
1:21:01me pasaba mucho antes es que pues por no
1:21:05porque me da mucha pereza aprender eh
1:21:08las funciones. Sí.
1:21:09Todo lo hace lo bruto.
1:21:12Y [risas]
1:21:13me acuerdo, me acuerdo que en el cena eh
1:21:17tuve que hacer un juego, no me acuerdo
1:21:18de qué, y man, literalmente eran como
1:21:25no me acuerdo bien, pero si no estoy mal
1:21:26era como 6000 eh
1:21:30carácteres, algo así era. y todo que lo
1:21:32podía hacer literalmente con funciones y
1:21:34quedaba mucho menos era como que
1:21:38es que a veces solo es como meterle un
1:21:40poquito de lógica y yo puedo volver eso
1:21:42y mi carácter es algo de 40 eh dos
1:21:46líneas eh dos tres líneas de código
1:21:50o lo puedo volver una funcionalidad que
1:21:52por reutilizar en todas partes y así
1:21:54pues no gasto tanto tanta máquina.
1:21:58Listo, chicos. Espero que les haya
1:22:02gustado la clase, pues por temas de
1:22:05tiempo hasta que quedan.
1:22:08Felicitaciones a todos los que se
1:22:10esforzaron ahí haciendo el código. Los
1:22:13que tuvieron problema con la máquina, ya
1:22:15saben, cuando tengan una máquina pueden
1:22:17tirar código y tienen el archivo, lo
1:22:19pueden descargar, lo pueden guardar en
1:22:20su celular o lo comparten o lo guardan
1:22:24en su drive. Eso sería todo, muchachos.
1:22:31Kate, necesitas aún la foto.
1:22:37Eh, chicos, bueno, algunos anuncios
1:22:39parroquiales antes de terminar quería
1:22:42recordarles que pues en el día de hoy se
1:22:44les estará habilitando el curso de
1:22:46JavaScript para que estén muy pendientes
1:22:48y lo adelanten. Nosotros les estaremos
1:22:51informando cuánto tienen que avanzar,
1:22:54sin embargo, pues todavía como tal no
1:22:56les tengo la información.
1:22:58Y para la próxima semana ya inician con
1:23:01los horarios que eligieron en la
1:23:02prematrícula.
1:23:04Bueno, chicos, ahora sí, por favor,
1:23:05todos me regalan una sonrisa, enciendan
1:23:07sus cámaras, todos muyos para una foto.
1:23:13Bueno, entonces, un, dos,
1:23:17tres.
1:23:20Muchas gracias, chicos.
1:23:23Que estén muy bien, que tengan linda
1:23:25tarde,
1:23:26que tengan un excelente día. Ev.

About this transcript

This page contains the full transcript of Desarrollo Web | CSS Básico – Sábado 15 de agosto – 8 AM COL/ECU/PAN | 10 AM UY by Fundación ROFÉ - Toca una Vida, generated from the public captions YouTube serves with the video. The transcript has 9,112 words across 1,613 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.