Transcripción
asd
hola chicos que tal bienvenidos el día
de hoy vamos a aprender aluminio un
necesario que necesitan para poder
sobrevivir en este mundo de javascript
vale y lo primero que vamos a hacer es
tener abierto un navegador y nuestro
editor de código cuando yo utilizaré 10
code y notará en que aquí mismo tengo
dos archivos tengo un archivo de index
html
y un archivo de estilos ya lo primero
que vamos a aprender es cómo trabajar
con javascript tenemos dos formas una
forma directa dentro de nuestro html por
así llamarlo y una forma indirecta a
través de archivos para ambas formas
vamos a ocupar una etiqueta llamada
script ok cuando hablamos de la forma
directa lo que haremos es siempre y
sencillamente dentro de nuestra etiqueta
colocar el código de javascript que
queramos ejecutar por ejemplo yo quiero
ejecutar una alerta que diga hola mundo
por ejemplo guardo y yo vengo acá y
actualizó mi página
sale la alerta que dice hola mundo ok
entonces esta es la primera forma una
forma directa dentro de la etiqueta
script muy importante y ojo notarán que
mi script lo puse al final efe voy ok es
muy buena práctica que el escribe lo
pongan hasta el final después de que
hayan terminado de poner todo su
contenido html y ahora script puede
ponerse tanto aquí en body como dentro
de
gestión borró esto me tengo que arriba
head y lo tengo lo pego para acá y
ponemos vamos a cambiar el guardiola
mundo vamos a poner o la head guardo y
verán que también se ejecuta por acá del
lado del navegador entonces está la
forma directa las recomendaciones que lo
pongan al final de body ok eso es lo
primero para la segunda forma a través
de archivos
vamos a borrar esto de por acá y voy a
crear un archivo que se llame apuntó js
y vamos a colocar
alerta que diga hola archivo
archivos y guardamos la segunda forma
también vamos a utilizar una etiqueta de
script pero aquí en lugar de poner el
contenido del interior le vamos a poner
un atributo de fuente ok de source src y
aquí vamos a decirle que nuestro archivo
se llama a j s guardamos y notarán que
ahora la alerta dice hola archivos esta
es la segunda forma a través de archivos
y de hecho esta es la forma más común si
no es que casi por
99% se utilice si en el mundo real
cuando hacemos este tipo de
importaciones cuando importamos nuestro
código javascript a través de
referencias archivos igual podemos
hacerlo dentro del body o podemos
hacerlo dentro de head vale aquí guardo
y me voy a aparecer
y es muy importante que sepan que cuando
importamos archivos podemos pasarle
atributos a esta etiqueta vamos pasarle
una 5 o 1 deferr y estas propiedades lo
que hacen es que le dicen al navegador
como debiera descargar nuestro archivo
de javascript dado que esto es un manual
de supervivencia ahora no le dan mucha
importancia a estas dos etiquetas pero
si sepan que existen y más adelante
cuando tengan tiempo tiene un vistazo
para que puedan poder trabajar mejor con
javascript de momento voy a regresar
este script hasta el final del body y
vamos a guardarlo por acá ok entonces
eso es lo primero como con poder
trabajar con javascript lo siguiente que
vamos a aprender es algunas herramientas
muy comunes dentro de la script y vamos
a comenzar por supuesto que si con el
famosísimo consola long y las
propiedades de cónsul aquí dentro del su
archivo de javascript
podemos acceder a herramientas que ya
están pre definidas por el lenguaje ok
una de ellas es el objeto que se llama
con su cónsul es un objeto que tiene
varias propiedades para poder acceder a
propiedades vamos a hacerlo colocando un
punto y después vamos a escoger el
nombre de la propiedad de este objeto de
consol a la cual queremos acceder
entonces yo quiero acceder a la
propiedad del log ya esta propiedad lo
que va a hacer es que nos va a mostrar
algo en la consola de nuestro navegador
sé que ahora mismo no tiene mucho
sentido pero no se preocupen fíjense
vamos a poner aquí hola desde
consola vale guardamos y notarán que no
aparece nada a diferencia de hace rato
que aparecía un botón bueno un texto
aquí en adelante de este lado no aparece
nada y es que sucede que la consola es
una herramienta que nos brinda el
navegador no va a aparecer a simple
vista lo que pueden hacer es hacer clic
derecho
podemos después hacer clic en
inspeccionar y aquí en este menú del
lado de elements y aquí en estas dos
flechas deberá aparecer la opción de con
solá ok entonces pueden hacerlo así o
también pueden utilizar un comando que
debiera ser desde el mac deberá ser
comando opción y j y desde windows
debiera ser el control shift y j si no
me equivoco pero revisen la mejor y
ahora ya estamos aquí en la consola
vamos a actualizar la página y notarán
que aquí me parece hola desde consola
esta es la consola del navegador y
cuando utilizamos este objeto de conso y
utilizamos la propiedad del log lo que
sea que coloquemos dentro de paréntesis
dentro de estos paréntesis del log lo
que sea que coloquemos aquí se va a
mostrar de este lado y es muy importante
que si quieren mostrar texto tienen que
colocar doble comillas como yo he hecho
acá doble comilla para mostrar texto no
sólo aquí en consola en general en todo
llamas entonces aquí puedo poner
cualquier texto y siempre cuando esté
entre comillas me lo va a mostrar por
este lado en aquí por alguna razón me
marca un error con los estilos y vamos a
de momento vamos a borrarlos para que no
nos moleste y vale este es el objeto de
con solo créanme que esto hacer pan de
cada día conforme
comiencen a trabajar con yasky y
comienza a trabajar en el mundo del
desarrollo web con sólo lo van a ocupar
todo el tiempo y con su blog la
propiedad del blog o bueno en este caso
me todo lo que no es el único que existe
en cónsul también tenemos un bueno que
se llama un warning por ejemplo vamos a
guardar
y aquí me dice
que no es una función
y no es una función porque no se llama
warning se llama voy se llama world ok y
aquí está ahora el mismo texto nos
muestra con nuestro otro estilo lo mismo
tenemos warren que tenemos error ok y
aquí nos lo muestra con otro estilo pero
vale esto es lo primero ahora ya
entrando de lleno en javascript como el
lenguaje de programación lo primero que
tenemos que saber en caso de que no
estén familiarizados con ello es el
concepto de variables una variable al
igual que en las matemáticas por ejemplo
una variable es un ente es una cosa que
guarda cierto valor ok y entonces quien
javascript nosotros podemos crear
variables que guarden cierto valor la
pregunta es como las creamos tenemos
tres maneras de crear variables ok para
ello vamos a ocupar palabras especiales
todo el lenguaje de programación tiene
palabras especiales o palabras
reservadas que sirven para darle
instrucciones en este caso queremos dar
la instrucción de crear una variable
para ello vamos ocupar las palabras bar
las para la palabra con la palabra let
bar es es una opción digamos que era la
opción original que tenía javascript
pero que ahora mismo debido a distintas
razones su juego su uso está un tanto
desaconsejado no hay nada malo con ello
es inherentemente nada malo pero vamos a
estar trabajando con led y holmes ok
cómo funciona cada una funciona así
vamos a ocupar la palabra led lo vamos a
darle un nombre a nuestra variable en
este caso así que se va a llamar a no se
gasta y después con el símbolo de igual
vamos a decir cuál es el valor de la
variable gasto en este caso vamos a ir
que es 15 notarán que al final de haber
creado la variable y después de haberle
asignado un valor he colocado un punto y
coma es importante que después de cada
instrucción que le damos a javascript
colocamos este punto y coma para que ya
script sepa que hasta aquí termina esta
indicación esta instrucción y yo que
puedo venir abajo y utilizar con vamos a
crear otra variable y diremos que no lo
sé días días es igual a 5 y ahora
estarán preguntando segundo y cuál es la
diferencia entre que crear una variable
con led y una con cons la diferencia es
que cuando creamos una variable con led
javascript nos va a permitir más
adelante cambiar el valor de esta
variable entonces yo podría venir por
acá y decir que ahora gasto es igual a
10 y javascript me lo permite mientras
que con la palabra de cons la variable
que estemos creando será en realidad una
constante cuyo valor no podrá cambiar
entonces ahora mismo díaz está condenado
a valer siempre 5 ok y yo vengo aquí
abajo
y le intentó así que ahora días 7 y
guardo acá del lado derecho en la
consola notarán que me parece un error y
me dice que hubo un error y que no
podemos asignar otro valor a una
constante y ahora notarán también
notarán que aquí utilice el est led y lo
utilice el led de quitilipi seconds pero
aquí no lo estoy utilizando porque
porque
esta parte del led gastón y cons díaz
esta parte se llama
declaración declarar es decir la
javascript que algo existe y nada más
basta decirle una vez que existe una vez
que ya le hayamos dicho que algo existe
podemos después más adelante hacer
referencia a esto de manera ilimitada
entonces aquí primero luego sabes qué
gasto existe esta variable de gasto
existe y su valor es igual a 15 y una
vez que ya declaré que gasto existe más
adelante puedo llamar a gasto cuantas
veces desee gasto horas vale siete gasto
ahora vale cinco gasto ahora vale tres
simplemente hago una referencia a esta
variable que cuya existencia ya declaré
antes yo me vengo aquí abajo y imprimo
en pantalla
la variable gasto
y guardo notarán que acá del lado
derecho me dice que gastó vale 3 ok aquí
en la consola
déjenme les regaló un poquito más más de
zoom aquí está 3 en la consola vale
entonces es así y de hecho lo que pueden
hacer también si es que se lo están
preguntando lo que pons eres primero
hacer una declaración de que algo existe
aquí puedo decir let
no lo sé gasto dos y acá pues y acá más
abajo puedo asignarle valor a gasto dos
gasto dos es igual a cinco es también es
válido podemos primero decir que gastó
dos existe sin asignarle un valor y más
adelante asignarle un valor que pero
ahora esto es lo básico estas son las
variables y las variables como sabemos
llevan valores ahora en javascript al
igual que en otros lenguajes de
programación
tenemos algo que se llama tipos de datos
tipos de valores ahora mismo fíjense que
a gasto yo le ha asignado 10 7 5 y 3
estos son números claramente cierto pero
yo podría decir que gasto es en realidad
igual a un mensaje su valor ahora es un
mensaje si yo les signo hola entre doble
comillas como valor a gasto y luego
imprimo en pantalla a través de con solo
gasto del lado derecho me va a aparecer
ok pero fíjense que no sé cuánta
definición a ver yo tenga su pantalla
pero notarán que estos números son de
color amarillo y que hola es de color
verde y es que sucede quién javascript
existe oxxean a tipos de datos ok y
tenemos dos categorías de tipos de datos
tenemos tipos de datos sencillos o
básicos o también llamados primitivos y
tenemos tipos de datos más complejos que
veremos más adelante
los primeros tipos de datos que son este
primitivos son el número que vamos a
estar hablando en inglés es el número o
nombre string o texto
julián o valor william o andy fine y no
ok ahora cómo es que funcionan estos
tipos de datos o porque tendríamos que
aprendernos estos nombres tan extraños
yo creo que tendríamos que saber que
existen estos tipos de datos tenemos que
aprenderlo por la siguiente razón
cada uno de estos tipos de datos tienen
propiedades especiales tienen
propiedades únicas y diferentes
recuerden que console es es un objeto
una herramienta predefinida la cual
tiene varias propiedades que podemos
utilizar recuerden que tenemos el punto
log tenemos que recuerden tenemos el
punto world que cuando tenemos el punto
de error bueno pues lo mismo aplican
para estos tipos de datos fíjense vamos
a crear variables y vamos a asignarles
estos tipos de datos vamos a crear una
variable que se llame
edad y como hablamos de edad vamos a
asignarle un 18 18 sería de tipo número
ok vamos a crear otra variable que sea
se llame nombre y vamos a asignarle por
valor juan y notarán que juanes de tipo
string o texto luego vamos a crear una
variable que se llame
casado y vamos a asignar el valor de 2 y
esto es de tipo buljan los bull ians en
caso de que no nos conozcan son valores
que pueden ser sólo pueden ser o
verdadero o falso por ellos que quien
esta variable que llamamos casado
estamos diciendo que juan encuentra
casado es falso es decir no está casado
lo tenemos estas estos otros motivos que
es on the fine y no estaba en inglés
sabrán que on the fine significa no
definido y no no hace referencia a 0
vacío ok entonces vamos a crear también
acá otras dos variables que se llamen
por ejemplo
vamos a llamarla
hambre
y hambre vamos a pasarle el valor de
nuevo y vamos a crear una que diga
ingeniero y vamos a pasarle el valor
aunque find y ahora notaran que tanto
fault como nuevo como on the fine tienen
un color amarillo estas palabras al
igual que el led y al igual con qué
comes son palabras que ya vienen
predefinidas por el lenguaje y que vamos
a utilizar para hacer referencia a estos
tipos de valores peruano retomando el
por qué tenemos que saber que estos
tipos existen y para qué nos sirven
recuerden que cada una de ellas tienen
acceso a propiedades especiales por ser
del tipo del que son por ejemplo vas a
tomar edad ok aquí como ya declaramos
qué edad existe aquí más adelante ya
podemos referenciar el a ok y ahora como
that es de tipo número vamos a poder
acceder a funciones y propiedades
especiales de todos los tipos número
comparten aquí puedo escribir edad
un punto y puedo acceder a estas
propiedades por ejemplo podemos este
acceder
a to fix ok y esto lo que va a hacer
como nos indica que el código esto nos
va a redondear a dos decimales por
ejemplo suponiendo que por edad y juan
tuviera
18.56 sietes labruna bla bla que todo
está fuera la edad de juan ahora como yo
hay edad estoy exigiendo esta propiedad
que nos redondea dos decimales si yo más
adelante imprimo en pantalla edad
notarán que acá que acá me muestra
exactamente el mismo número por qué
porque tenemos que entender y aquí éste
se pasó a decirles cuando ustedes
accedan a propiedades de estos tipos de
datos lo que va a suceder es que esto
nos va a arrojar un nuevo valor sin
modificar el valor original bueno esto
depende a veces nos arroja un nuevo
valor a veces nos modifica el valor
original pero en este caso tu fix
nos arroja un nuevo valor y este un
nuevo valor que ya viene redondeando a
dos decimales de nuevo valor tenemos que
atraparlo y como lo vamos a atrapar pues
lo vamos a atrapar en alguna otra
variable entonces por ejemplo yo aquí
puedo decir qué
edad nueva es igual a este nuevo bar bar
esto es algo muy común y este tipo de
oraciones se conoce como
expresiones ok
expresiones esto es algo con lo cual si
no no son regulares es algo con lo cual
tienen que familiarizarse expresiones ok
una expresión
básicamente es código que cuando lo
analizamos o cuando lo leemos es código
es simple y sencillamente
representa un valor en este caso edad to
fix nos arroja un nuevo valor valor que
atrapamos aquí en esta variable y por lo
tanto esta variable representa un valor
por ello por ello puedo decir que esto
es una expresión y ahora si yo aquí en
lugar de imprimir edad imprimo en
pantalla o muestro en consola edad nueva
y guardo notarán que aquí me dice
18.56 ok y entonces esto y esto es una
propiedad de números y ahora qué pasa si
vamos con la variable de nombre
podríamos decir que imaginemos que juan
lo tenemos escrita lo tenemos escrito
con minúscula y queremos cambiarle a
mayúscula como haríamos esto con código
muy sencillo venimos aquí abajo e
imprimimos en pantalla vamos a imprimir
el nombre de juan pero como queremos que
esté en mayúscula accedemos a la
propiedad que todos los strings
comparten vamos a poner un punto y vamos
a escribir su obra case ok y guardamos y
ahora me lo ha puesto todo todo en
mayúsculas no solo la primera letra sino
que me lo ha puesto todo en mayúsculas y
aquí notarán si son observadores notarán
que después de haber case
vienen unos paréntesis un paréntesis que
abre y un paréntesis que cierra porque
bueno esto lo veremos más adelante ok
por qué porque es que llevan paréntesis
pero de momento tienen que saber que ve
para esta propiedad para este caso vamos
a colocar paréntesis entonces ya sabemos
que existen estos tipos de datos
primitivos o básicos y ya sabemos que
estos tipos de datos primitivos tienen
cada tipo acceso a propiedades
especiales como hopper case para
mayúsculas como to fix para reducir los
decimales y por ellos que tenemos que
tener siempre en cuenta qué tipo de
datos porque estamos trabajando para no
tener errores porque imaginemos que aquí
yo tengo casado y a mí se me olvida que
casado es un bullying qué pasa si yo en
lugar de acceder
a las mayúsculas de nombre que pasas
intentó acceder a las mayúsculas de
casado y guardo si yo guardo esto esto
claramente es un error porque julián no
tiene acceso a estas propiedades
especiales ok de hecho aquí me marca en
la consola un error que me dice hoy esto
es un error esto no puede ser así
vale entonces continuando esto es lo que
tienen que saber ahora de momento sobre
las am sobre las variables pero
retomando esto de expresiones porque
mencioné expresiones porque en
javascript cuando escribimos código
podemos escribir dos dos tipos de código
podemos estar escribiendo expresiones
que recuerden que una expresión es algo
es algo
que se reduce a un valor y además de las
expresiones tenemos algo que en inglés
se llama
state mens ok y un statement es algo que
se ejecuta o que no puede ser reducido a
un valor y entonces ejemplos de que es
una expresión una expresión por ejemplo
podría ser escribir simple y
sencillamente un número
o podríamos ser asignar un valor a algo
vale esto son expresiones son cosas que
cuando uno los lee podemos
inmediatamente obtener un valor por
ejemplo yo aquí estoy diciendo que x y
que ya son igual a 20
aquí lo que yo hago es que 20 le asignó
el valor allí y ahora yo sé que es 20
básicamente aquí estamos hablando de 20
no hay más
ok y statements es que es algo que no se
puede reducir un valor sino que son
instrucciones especiales ok estas
instrucciones de momento las vamos a
dejar en pausa y antes de continuar a lo
mejor se quedaron con duda de bueno hace
rato que estábamos hablando de las
propiedades
que tienen lo que tenía este cada uno de
estos tipos yo que por ejemplo nombre
tiene el twitter case y demás se
preguntarán bueno oye y cómo puedo saber
cuáles son las propiedades de cada uno
de los tipos no lo vas a enseñar tú
quien me lo enseña dónde lo veo bueno
pues si esa es la pregunta les voy a
enseñar un sitio que a partir de hoy
debiera estar guardado en su página de
favoritos si es que no en su página de
inicio ustedes pueden venir aquí a
google y vamos a buscar m de n bueno no
aquí me puso otra cosa vamos a buscar m
d
qué es mn md n
es una colección de documentos de ayuda
por mozilla y mozilla es la compañía
detrás del navegador de firefox ok esta
pagina developer punto mozilla punto org
es es una fuente inagotable de
conocimiento sobre javascript bueno en
realidad html ceses y demás pero en
cuanto a javascript es sin duda alguna
de las mejores referencias entonces si
ustedes se preguntan cuáles son las
funciones especiales de estas
propiedades especiales que tienen los
valores que son de tipo texto o de tipo
string bueno pues en este caso bastaría
escribir aquí string
y esto lo voy a hacer más grande
temporalmente y aquí vamos a encontrar
todo lo referente a string y estas
propiedades o funciones especiales se
llaman en realidad métodos ok y están
aquí desde el lado izquierdo y aquí nos
dicen que los string tienen el método de
con catch vamos a hacer clic aquí dice
bueno el método con cada combina dos o
más cadenas de texto y aquí viene un
ejemplo ya tenemos un texto hello un
texto word lo concatenados y nos da el
ok ok y si deslizamos vemos que son
muchísimos métodos tenemos el método de
turing por ejemplo que nos dice el
método trip lo que hace es que no se
elimina espacios en blancos ok entonces
yo tengo este texto que dice fu y le
aplicó el método touring lo que va a
suceder es que ahora tú ya no va a tener
espacios en blanco y lo mismo podemos
buscar la información de strings que
podemos buscar la información de nombre
por ejemplo
bueno aquí me apuesto a otra cosa vamos
a poner
nombre aquí esta de javascript y aquí
nos dice no ver es un valor primitivo y
aquí vienen todos sus métodos viene por
ejemplo to fix que se que utilizamos
viene y sin tejer viene part in y demás
entonces muy importante quisieron
aprender javascript ís abanicada al
mundo del desarrollo web o bueno en
general tienen tienen que ir trabajando
este lado autodidacta ok yo podría
darles todos los métodos pero así no lo
van a aprender bien la verdad es que se
aprende sobre la marcha y sobre la
marcha cuando tengan dudas pueden
visitar este sitio de md n de mozilla ok
pero no habiendo dicho esto vamos a
continuar con este manual
ahora les dije que existían dos grandes
categorías de tipos de datos tenemos los
tipos de datos
primitivos
primitivos
y quieran string nombre a julián donde
find y hay uno más que también es
permitió que se llama símbolo ok símbolo
es un tanto avanzado en este manual de
supervivencia voy a estar omitiendo
cosas que de momento cuando comienzan no
necesitan saber ok entonces no se
preocupen si hay algo que no mencioné si
no lo estoy mencionados porque
deliberadamente lo estoy dejando afuera
dado que no considero que es que sea
vital para unos comienzos ok pero bueno
sabíamos lo que teníamos estos tipos de
datos primitivos esta es la primera
categoría y tenemos una segunda
categoría que podemos llamarlos como
objetos lo que estos objetos son valores
más complejos
ok porque son más complejos porque por
ejemplo cuando hablamos de primitivos un
permitido puede ser un simple número o
puede ser un simple este texto o puede
ser algo que diga lo que diga falso
vale pues hago que digan dónde find
etcétera son palabras sencillas son
valores sencillos y estos objetos son
más complejos porque guardan más
dimensiones de conocimiento y ahora es
de que estos son a complicados de que
suena difícil digamos de qué estás
hablando vamos a ponerlo con ejemplos
objetos estos tipos datos objetos hay
varios y tenemos a reid tenemos éste
fechas tenemos funciones
tenemos varios pero no vamos a
complicarnos sólo hay dos que tienen que
saber lo que hay dos a raíz
efectivamente y objetos así igual que la
categoría tenemos
objetos en otros lenguajes de
programación
objeto el objeto tiene otro nombre
pero alguien javascript el objeto es es
objeto gays x zona confuso pero dejamos
darle vuelta tenemos estos dos tipos y
vamos a verlos primero comencemos por
arrai que es una red una red es es es un
conjunto
de varios valores
entonces yo puedo venir acá y decir
sabes que voy a crear una boya una
variable que se llame array de valores
que esto es una red y para ello vamos a
utilizar estos símbolos de corchetes
estos corchetes estos corchetes lo que
hacen es que nos representan nos
representan un espacio en memoria
recordemos que los lenguajes de
programación lo que hacen es que acceden
a los recursos de la computadora y los
manipulan bueno es una red es un espacio
en la memoria de la computadora y dentro
de este espacio vamos a guardar valores
que valores que vamos guardar aquí vamos
a guardar los valores que son
números del 1 al 10 voy a colocar 1 y lo
voy a colocar una coma luego 2
coma y así sucesivamente
ok y esto ahora mismo ya es una red es
un espacio en memoria dentro del cual
tenemos varios valores ahora mismo este
rey tiene 10 valores que son el valor 1
el valor 2 el valor 3 etcétera en muchos
idiomas en muchos lenguajes de
programación
los rays tienen que tener siempre el
mismo tipo de valor notarán que aquí
tenemos el puro número ok puro nombre
pero en javascript lleva escribe es muy
amigable muy flexible ya es que uno si
sabes que puedes guardar lo que quieras
puedes guardar un número y en el segundo
puedes guardar un texto y el tercero
puedes guardar un bullying y el cuarto
puedes guardar un andy find y el quinto
puedes guardar un nudo y en el sexto
puedes guardar un falso
etcétera ok y ahora si yo me vengo acá
le imprimo en pantalla
este a rey de valores
aquí en pantalla pueden ver
que tenemos esto
nos dice el tu primer elemento son 1 el
segundo elemento es un texto el tercero
son tres cuartos donde paint el quinto
es un know y notarán que nos dice que el
primer elemento es en realidad del 0 y
si vienen si vienen de un contexto que
no sea la programación a la computación
les sorprenderá mucho ver este cero años
sorprendió y es que sucede que en llama
escribe al igual que en otros lenguajes
los elementos de una red la esta cuenta
de lengua en este conteo de elementos va
a comenzar siempre desde cero entonces
este lugar de ser la posición 1 es la
posición 0 0 1 2 3 4 5 6 7 8 9 este rey
tiene 10 elementos sí pero tiene sus
posiciones comienzan desde el 0 hasta el
9
ok y este rey o este tipo de objeto a
rey tiene obviamente sus propiedades
especiales o métodos y uno de ellos es
nos va a decir cuál es la longitud de
este rey cuando hablamos de propiedades
algunas veces utilizaremos los
paréntesis aún no lo hemos visto así que
más adelante y hagan algunos otros casos
no utilizaremos paréntesis ok link es
uno de esos casos en las cuales no
utilizamos paréntesis y ahora que pueden
ver en pro de quién si sabes que tú a
raíz de valores tiene una longitud o
tiene una cantidad de 10 elementos vale
entonces obviamente recuerden que
pueden esto buscarlo en md n todos los
las propiedades y métodos de los arrays
ya lo segundo es ver el objeto de off
hoy el objeto de objeto y aquí ahora que
es un objeto un objeto
o en objetos como si tuvieran varios
casilleros el casillero
en el casillero ve el casillero se y
dentro de cada casillero tenemos
guardado a lo mejor en el casillero a
tenemos un libro en el casillero b
tenemos una guitarra en el casillero sé
un coche bueno estos son objetos son
casilleros vale y como creamos un objeto
hay varias maneras de hecho había varias
maneras también de crear una red pero
ahorita vamos a trabajar con lo que se
conoce como
creación literal hace rato cuando
utilizamos corchetes
era una creación literal del rey y ahora
para una creación literal de objetos
vamos a decir que un objeto casillero es
igual a para los objetos en utilizar
estas llaves ok en inglés llaman
brackets en español se llaman llaves y
entonces aquí lo que haremos es esto son
nuestros casilleros y aquí vamos a
definir qué es lo que hay dentro de cada
casillero entonces puedo decir que en el
casillero
hay un
libro por ejemplo
ok no pues si tienen casillero ve hay un
coche
vale y ahora esto de acá del lado
izquierdo que está en rojo y con dos
puntos no se conoce como llave aunque la
llave indica el lugar y el casilla y
esto del lado derecho es el valor o que
ya que cuando hablamos de objetos el
valor puede ser cualquier cosa ahora
mismo yo lo estoy asignando texto
strings lo podemos pasarle cualquier
otro tipo de valor podemos pasarle un
tour puede pasar un folk on the fine
1 etcétera ok entonces vamos dejarle un
andy find vamos a guardar esto vamos a
imprimirlo en pantalla
y notarán que aquí en pantalla en la
consola me muestra que mi objeto tiene
la llave a cuyo valor es libre o y la
llave cuyo valor es dónde find vale y
esto es lo referente a objetos y ahora
recuerden que tanto ricky como objetos
tienen sus propias propiedades
especiales y métodos y eso lo pueden ver
en mn ahora un último dato un dato
curioso es que cuando digo que aquí
pueden guardar cualquier valor y cuando
lo dije en arrays lo decía en verdad
aunque podemos hacer es combinarlos
yo puedo venir acá y crear este aunque
se llame rey 2 y aquí como valores del
rey 2
vamos a pasarle un 1 1 2 y el tercer
valor va a ser objeto casilla ok esto lo
podemos hacer y al revés aquí en objeto
casillero podemos decir que la llave
58-68 es igual a un rey que tenga 1 2 y
3 y 4
guardamos y ahora si yo me vengo acá a
la consola notarán que me dice oye tu
objeto tiene a b y tiene esta llave de
68 cuyo valor es una red y aquí lo puedo
hacer clic para expender y aquí tenemos
todos estos números y vamos sólo más
complejos puedo decir que acá dentro del
objeto tengo acá una red ya que pudo
pasarle otro objeto y acá puedo pasarle
otro rey y luego puede pasarle a otro
objeto y demás pero eso no es sano ni
recomendable ok entonces esto es con
respecto a objetos y a reid
y este momento estos esto lo que
debieran saber esto es pan de cada día
ok objetos ya rey es pan de cada día
entonces vamos a ahorrar esto y vamos a
continuar vamos a ahorrar esto de acá y
vamos a hablar de statements ok es algo
que se ejecuta y bueno y que es algo que
se ejecuta se estarán preguntando
podemos ejecutar en javascript varios
tipos de statements
los más comunes a los que les voy a
mostrar mejor dicho son ciclos son a
condicionales y ya hay entonces es algo
que se ejecuta vamos ya a verlo a sacar
este misterio es lo primero son ciclos
que es un ciclo
imaginemos que yo quiero imprimir en
pantalla el número uno ok aquí está muy
bien ahora imaginemos que quiero
imprimir el número dos que ya está aquí
está uno y dos
ahora imaginemos que quiero el número
tres y tengo que estar aquí escribiendo
y luego quiero el número cuatro y aunque
estar escribiendo qué pasa si quiero
imprimir hasta el número ciento los
números del 1 al 100 obviamente estar
haciendo esto a mano con su punto 5
luego con solo 6 sería eterno es es muy
tedioso y va contra el propósito de un
lenguaje de programación por escrito que
se llaman ciclos ok que es un ciclo o en
inglés o loop
un ciclo es un código que le pasamos
allá más que una instrucción y le
pasamos a javascript y javascript va a
ejecutar va a realizar estas
instrucciones tantas veces como nosotros
se lo hayamos indicado ok ahora aquí en
cuanto al uso ciclo ‘cine ya más que
obtenemos el fort
tenemos
tenemos un wild tenemos force of
the war of tenemos for in y tenemos de
uruguay lo que hay distintas maneras de
enfocar o trabajar con ciclos pero yo
voy a retomar nada más dos force y force
of forest del siglo predilecto clásico y
tradicional como funciona muy sencillo
vamos a escribir la palabra reservada
por para indicar instrucciones
y esto lo voy a a
a copiar así y ahora después del for
vienen paréntesis ok notarán que después
del foro vienen paréntesis no saben que
vamos a comenzar de cero después de fort
vienen paréntesis ahora quedan se
colocan en sus paréntesis en sus pares y
vamos a colocar tres elementos estos
elementos le van a indicar javascript
cómo tienen que ejecutarse este ciclo el
primer elemento es un contador okey
llama script tienen que llevar
seguimiento de cuántas veces ha
ejecutado nuestras instrucciones yo le
digo ya escribe ejecuta estos 100 veces
ya más que tiene que decir lo he hecho
una vez lo he hecho dos veces lo he
hecho tres veces etcétera entonces aquí
en esta primera parte vamos a crear una
variable y aquí vamos decirle cuánto
tiene nuestro contador ahora mismo
nuestro contador va a comenzar desde
cero ok y ponemos un punto y coma no
cierro paréntesis mi paréntesis sigue
sigue aquí ahora después del punto y
coma nuestro segundo elemento le vamos a
indicar hasta cuánto y hasta cuando
queremos que se ejecute en este siglo
bueno sí quiero ejecutarlo
diez veces voy a decir ejecuta este
ciclo siempre y cuando sea menor que
que 10 ok menor querías y colocó un
punto y coma y ahora cada vez el del
tercer elemento que tenemos que pasar
este ciclo es indicarle a javascript que
queremos que haga con el contador
cada vez que siga nuestras instrucciones
entonces equipo decirle que queremos que
se incremente de uno en uno creamos que
se incremente de dos en dos queremos que
se reduzca queremos que se multiplique
etcétera lo más común es decirle al
contador con cada ronda
aumentando ok y para y vamos a colocar y
más más y ya cierro mi paréntesis
entonces en mi paréntesis van estos tres
elementos contador hasta cuando quiero
que se ejecuta esto y como voy a
modificar mi contador
habiendo hecho esto vamos a abrir ya ves
ok
aquí están nuestras llaves citas y
dentro de las llaves vamos a colocar las
instrucciones que queremos que llama
script ejecute con cada vuelta ok con
cada ciclo entonces aquí dentro de las
llaves voy a decirle que imprima en
pantalla el valor dulce y vamos a
guardar y si me vengo acá al navegador
y si extendemos esto de por acá
notarán que aquí tengo mis números del 0
1 2 3 4 5 6 7 8 9 porque estos son los
valores de iu y ahora si yo quisiera
contar del 1 al 10 digo que en lugar de
que imprima el valor de que imprime el
valor de i + 1 porque estoy comenzando
desde cero guardo y ahora tengo los
números del 1 al 10 y si quisiera del 1
al 100 cambio este elemento en lugar de
10 100 y ahora sí así es como tengo lo
que quería hacer sin necesidad de
hacerlo manual esto es automático vale
esto sería un ciclo una un loop con por
ok también tenemos un force of un foro
ver cuál es bastante útil nos va a
servir para ciclar a través de una re
aquí estamos circulando desde el 0 hasta
el 100 pero qué pasa si tenemos una red
aunque se llame rey numerosa
que sea un array de números del 1 al 10
y queremos ciclar este rey que va del 1
al 10
en este caso vamos a utilizar un force
of ok y un force of vamos a colocar
igual ford igual vamos a abrir
paréntesis pero aquí vamos a hacer lo
siguiente vamos a indicar que a rey
queremos ciclar con la palabra o vamos a
poner of de que vamos a pasar el nombre
de la red en este caso nuestra red se
llama a rey números aquí escribimos
array números y ahora antes del off
nosotros vamos a crear un contador o
cuando un contado vamos a ocupar a crear
una variable temporal es una variable
temporal dentro de la cual en esta
variable
vamos a ir guardando
uno de estos valores
entonces como esto es un array de
números tendría sentido que nuestra
variable temporal se llamará número
ok y ahora habiendo hecho esto vamos a
abrir llaves
y acá dentro de las llaves pasamos la
instrucción en este caso queremos que
nos imprima en consola el número y
notarán que ahora que del lado derecho
no se imprime del 1 al 10 porque estos
son los valores de array números y el
cambio 3 por true
acá también me lo cambia ok entonces
esto sería siendo un force of y hablando
hablando de ciclar a través de arrays
cuando investiguen en md n los métodos y
propiedades de los rays encontrarán que
hay tres métodos muy pero que muy
especiales bueno son muy especiales tan
solo son importantes son métodos que
tienen que conocer que al igual que un
foro off también si clan a través de una
red y estos son for each
bueno son más hay más no sólo son tres
ahora que lo pienso varios pero es más
importantes o los más comunes los que
más se repiten en mi experiencia son for
each in mad ok ahora que es en cada uno
por y si vamos a los rápidamente porque
funciona muy similar a un ford off pero
la manera en la cual creamos este ciclo
es distinta vamos a agarrar al rey
números vamos a acceder a este método de
for each y vamos a poner aquí entre
paréntesis las instrucciones antes las
instrucciones las poníamos entre
llavecitas recuerdan pero ahora las
instrucciones nos vamos a poner entre
paréntesis
ok aquí vamos a poner las instrucciones
antes de poner las instrucciones antes
de continuar con estos ciclos tenemos
que ver funciones ok
es una función
es una función en jazz y una función
es difícil cuando es difícil pero si
quiero que se queden con alguna idea de
qué es una función una función es un
conjunto de instrucciones que guardamos
en una función valga la redundancia para
después poder ocupar esta función
tantas veces como deseemos por ejemplo
voy a crear una función y para poder
ocupar esta función tantas veces como
deseamos tenemos que asignarle un nombre
lleva a crear una función que se llame
imprimir en pantalla ok entonces vamos a
analizarlo para crear la función
necesitamos la palabra reservada
function necesitamos asignarle un nombre
y luego entre paréntesis
vamos a colocar qué información
necesitamos para esta función en
particular de momento no requiere
información y ahora por último entre
llaves vamos a colocar que queremos que
haga esta función ya decir que quiero
que esta función imprima en pantalla
hola mundo y bueno aquí me manda error
porque este foro
no lo termine lo comentamos ahora para
comentar ya lo habrán notado supongo que
no tengo que decirlo pero para comentar
el código en javascript colocamos doble
de aon que significa que esté comentado
significa que el navegador lo va a
ignorar
ok entonces tu sirve para que nosotros
dejemos comentarios que no va a ser
ejecutado y ahora guardo y no pasa nada
que curioso ya tengo mi función ya tiene
su nombre tengo la información que
necesito tengo las instrucciones lo que
quiero que se cuide pero no se está
ejecutando porque porque al igual que
hace rato con variables que vimos que
teníamos la declaración y vimos que
después teníamos la asignación desde
valores ok con funciones ocurre algo
similar tenemos la declaración la
declaración es decir que algo existe y
luego no tenemos asignar valor sino que
luego lo que tenemos que hacer es
ejecutarlo decir quiero ejecutar esta
función quiero que esta función corra
quiero que esta función
haga algo ya bueno pues para ello lo que
vamos a hacer es tomar el nombre que al
asignamos
imprimir en pantalla seguido de doble a
36 ok y ahora notarán que al hacer esto
mi función se ejecuta y aquí aparece el
resultado de esta ejecución por qué
porque yo dije que me imprimirá en
pantalla y de hecho este doble
paréntesis nos explica por qué hace rato
que estamos trabajando con el número
escribimos to fix entre pares y con
paréntesis o porque hace rato utilizamos
el texto y ocupamos su ópera case y
luego paréntesis porque estás o por qué
es esto fix y for each
a su vez funciones y así es como
mandamos a llamar o ejecutamos funciones
nombre de la función y luego
paréntesis ok esto es una función pero
hace rato les dije que aquí entre
paréntesis vamos a poner qué información
necesito fíjense que ahora mismo no
importa cuántas veces ejecute esta
función siempre me va a imprimir hola
mundo yo a lo mejor yo no quiero que
siempre imprima lo mismo esto no no
tienen personalización como puedo
personalizarla muy fácil cuando nosotros
declaramos nuestra función les dije que
aquí entre paréntesis vamos a indicar
qué información necesitamos bueno pues
ahora mismo yo necesito un nombre porque
quiero en lugar de decir hola mundo
quiero saludar a una persona bueno esto
que está aquí en mi declaración
esto se conoce como
ok yo aquí digo para esta función
necesito esta información o parámetros
vale entonces aquí en lugar de decirle
que imprima hola mundo lo que puedo
hacer es decirle que imprima hola y
luego pongo una coma y luego que imprima
el nombre que yo haya recibido aquí
y ahora al guardar piense que me hice on
the fine y ceo la on the fine que
erraron defina su nombre que yo le haya
dado aquí me dice dónde fine porque en
estas tres ejecuciones de función no le
he pasado ningún nombre y esto es hago
por defecto allá es que cuando esperamos
algo y no asignamos valor aquello que
esperamos javascript por defecto la edad
on define como valor entonces lo que yo
hará lo que llevara aquí en pantalla
decir sabes que el nombre es juan y la
segunda el nombre es luis y la tercera
el nombre es pancho guardo y me dice
hola juan hola luis y hola pancho y
ahora esto ya funciona porque en cada
una de estas funciones que estoy
invocando que estoy llamando le estoy
pasando la información que necesita
cuando yo le pasó la información que
necesita esto que está aquí entre
paréntesis se conoce como
cuando yo lo declaro es un parámetro y
cuando yo lo paso acá para ejecutar la
función se conoce como argumentos
algunas personas lo utilizan a inter de
forma intercambiada pero si nos ponemos
técnicos aquí es parámetro ya que
argumentó ok así como cómo funcionan las
funciones módems
es así como funcionan las funciones lol
y ojo esta es la versión clásica de
declarar en una función pero también
tenemos una versión reducida
la versión reducida es una versión que
se conoce a una sintaxis que se conoce
como función de flecha y por qué se
conoce como función de flecha se conoce
como función de flecha porque
en lugar de ocupar esta palabra y en
lugar de poner paréntesis y nuestras
llaves una función de flecha es una
función que guardamos en una variable y
cuando la declaramos aparece una flecha
en la sintaxis ok vamos a mostrarles
cuál crear una función que se llame
imprimir edad ok y esto va a ser igual
y una flecha
esta es una función de flecha fíjense
esto acá
vale la función en lugar de declarar la
con la palabra reservada de función la
función la guardo en una variable
con esta sintaxis de flecha ven aquí
está esta flecha el resultado de
colocar un igual y de colocar un mayor
que pero hay que ponerlos juntos para
tener esta flecha vale entonces sin
primera edad la información que espera
recibir es la edad y lo que va a hacer
es imprimir en pantalla
y ahora yo lo guardo dice que adelante
hago imprimir a edad y le pongo la
información de 30 al argumento de 30 le
imprime en pantalla 30 y ahora esta
función de flecha la puedo hacer aún más
reducida en cuanto a sintaxis fíjense
que ante ocupar function adicionalmente
puedo eliminar estas llaves
puedo poner esto aquí y lo guardo y
sigue funcionando exactamente
igual es una versión reducida es una
versión que gusta porque es más cortita
y no tenemos que escribir tanto pero
esto sólo funciona en eliminar las
llaves cuando solamente tenemos una
línea de código y por lo tanto no hay
mayor problema pero tuviéramos más
líneas de código y ahí ya tenemos que
colocar llave si estás mal entonces
estas son funciones y habiendo visto
esto vamos a regresar
nuestros loops estábamos viendo estos a
estos métodos especiales for each y map
llevemos dicho que por lo que va a hacer
es ciclar a través de la red y aquí en
cada una de estas iteraciones en cada
uno de estos pasos va a hacer algo y que
va a ser va a ser lo que sea que
nosotros le indicamos y por ejemplo yo
puede indicarle que lo que quiero que
haga es que tome cada valor
y que imprima en pantalla
dicho valor
ok ahora si yo guardo nuestro for each
ciclo y nos imprime cada valor tal y
como yo le indiqué dentro de los
paréntesis entonces esto es for each y
un mapa que podemos hacer a raíz números
punto map un map lo que va a hacer es lo
mismo va a este ciclo por cada valor y
map lo que va a hacer es que nos va a
regresar un nuevo array
modificado con las instrucciones que
nosotros le hayamos hecho aquí adentro
pero ahora de momento está esto es un
tanto avanzado pero se lo señaló porque
son de lo más común for each y map
entonces ampliamente recomendado que más
adelante conforme avanzan avancen en su
camino tengan siempre en cuenta estos
dos métodos maps for each
y ahora continuando continuando
continuando en javascript algo que se
llama operadores que es un operador
operadores es un símbolo que realiza
alguna tarea de especial por ejemplo el
símbolo de más es un operador que suma
el símbolo de menos es un operador que
resta el asterisco es un operador que
multiplica la diagonal divide etcétera
aquí tenemos estos operadores entonces
podemos hacer infinidad de cosas vamos
aquí estar imprimiendo en pantalla con
solo punto lo vamos a imprimir 55 bueno
esto me manda error es 5 5 10
5 entre 5
15 por 5 25 tenemos un operador que es
este paréntesis te parece este símbolo
de porcentaje y este estoy parado lo que
hace es que nos devuelve el residuo de
dividir 5 entre 5 si dividimos 55 no hay
recibo por lo tanto si yo guardo el
residuo es cero
ahora hay unos operadores esto es
sencillo hay unos operadores
muy útiles
que van a ocupar relativamente frecuente
tenemos un doble símbolo de ampersand
este símbolo se conoce como ampersand y
tenemos un doble símbolo de palitos
tiene inglés estos símbolos se conocen
como
pipeline y éste son inversión aunque muy
importante que él se prendan sus nombres
en inglés a pesar de que sean de
latinoamérica vayan conociendo los
nombres en inglés spain y ampersand
ahora qué es lo que hacen estos
operadores operadores son a especiales
porque hacen o son operadores lógicos ok
tenemos el doble amper saint qué
significa
tan significando y como perro y gato
luis y maría y éste el del pipeline es
el operador por el significando o como
lunes o martes jueves y sábado ok y
estos sirven para comparar okay son
operadores lógicos porque comparan
entonces
aunque ahora imaginemos que tenemos
edad 1 que es igual a 18 y tenemos edad
2 que es igual a 25 y vamos a imprimir
en pantalla que vamos a imprimir en
pantalla vamos a hacer una comparación
puedo decir en edad 1 es mayor que 15 si
yo guardo
me va a decir que es
verdadero y aquí tenemos otro pedal
operador mayor que tenemos mayor que y
menor que y también tenemos mayor y
mayor o igual que y tenemos menor o
igual
ok pero bueno regresando aquí estoy
imprimiendo en pantalla está esta
comparación lógica que me dice he dado
uno que vale 18 es mayor que quien se
mis hecho es verdadero pero si
preguntado no es mayor que 25 me va a
decir que es fans ahora donde entran
estos operadores de and work ahí entran
porque podemos comparar varias cosas a
la vez aquí le preguntó oye he dado uno
es mayor que cinco ya sé que es
verdadero y puedo decir oye he dado uno
es mayor que cinco y edad dos es mayor
que cinco también y en ese caso me va a
decir que sí que es verdadero tanto éste
como
éste son mayor que cinco este y éste son
ambos
pero que pasas acá en la edad 2 pregunto
si ha dado es el mayor que
55 ahora me va a decir que esto es falso
porque porque cuando yo utilizo mi
operador y cuando hablamos de
todos los elementos tienen que ser
verdaderos vale tanto éste como es
tienen que ser verdaderos pero este no
es el caso entonces quién me imprime en
pantalla valls nuestro operador org
no requiere que ambos sean verdaderos
mientras alguno de los dos sea
verdaderos vamos a obtener un resultado
verdadero entonces puedo poner mi doble
pipeline para indicar ahora y aquí le
preguntó oye
es edad uno mayor que cinco o es edad
dos mayor que 5000 es verdadero si este
es verdadero entonces con ello basta
donde tenemos en este operador de un
operador
mantenemos operadores de mayor que menor
que mayor o igual que y tenemos otros
operadores que son de comparación como
creamos una comparación muy fácil
ocupando
un doble igual vale estos dobles iguales
creamos un igual y dos iguales que
juntos me comparan edad 1 es igual que
la edad 2x false 18 + igual que 25 pero
qué pasaría si edad 2 también fuera 18
en este caso me dice verdadero en
javascript tenemos un doble igual ok y
tenemos un triple igual vale cuál es la
diferencia entre un doble igual y un
triple igual aquí entra lo que les dije
en un principio y que por ello comencé
con eso porque esto es causa de muchos
errores recuerden que tenemos distintos
tipos de datos tenemos el tipo de datos
número y el tipo de dato texto qué pasa
si yo tengo un 18 con número y un 18 con
texto ok en la primera comparación la
del doble igual me dice que 18 número es
igual que 18 texto lo pueden ver aquí
del lado derecho que dice 0 pero en mi
triple igual me dice que 18 número no es
igual que 18 texto y esa es la
diferencia entre estas dos comparaciones
el doble igual no le importa el tipo de
dato en cierta manera y el triple igual
si le importa el tipo de dato entonces
esto tengamos siempre presente
y ahora ya casi para terminar
vamos a hablar de otro statement que es
un cif ok y que es un índice en caso de
que vengan de un contexto ajeno a la
programación o la computación de un ife
es significa en inglés sí y es una forma
de condicionar instrucciones qué pasa si
yo quiero imprimir en pantalla
quiero un primer en pantalla algo que
diga es un buen día para descansar ok
aquí está es un buen día para descansar
pero esto no lo quiero imprimir siempre
no quiero que esto aparezca siempre
quiero que esto solo aparezca si hoy es
domingo
entonces yo puedo crear una variable que
voy a llamar día y voy a decir qué día
es igual a domingo y entonces como solo
quiero que esto se imprima cuando es
domingo vamos a crear vamos a ocupar
esta condición como creo condición es
muy sencillo ocupa la palabra reservada
if abro paréntesis y aquí los paréntesis
voy a poner cuál es la condición y la
condición es que el día sea igual
domingo y luego abro llaves y entre las
llaves voy a poner la instrucción y aquí
guardo esto lo voy a eliminar
guardo y aquí aparece es un buen día
para descansar y es un buen día descanso
para descansar porque en la condición de
que el día sea igual a domingo esto se
cumple se cumple porque aquí claramente
estoy sino qué día es igual a domingo
pero qué pasa si aquí después de esto
digo sabes que ahora día es igual a
lunes
entonces que nuestra condición revisamos
hoy en día es igual a domingo no porque
ahora día vale lunes ahora es lunes
entonces lo que está aquí adentro no se
ejecuta ok y esto es una condición es tu
sol y bueno pero es lunes hoy es un buen
día para trabajar no los lunes se
trabaja entonces yo puedo decir acá
sabes que si el día es domingo acepto
pero
si no es de domingo imprime en pantalla
es un día para trabajar
els els viene de inglés que significa
si no o significa caso contrario si el
día es domingo a sexto caso contrario a
esto aquí y aquí en pantalla podemos ver
que imprime es un día para trabajar ok y
aquí de hecho podemos combinar los else
él se va a ejecutar si el día es lunes
martes miércoles jueves viernes sábado
st
qué pasa si queremos agregar otra
condición antes de llegar aquí bueno en
este caso lo que puedo hacer antes de
estelas porque stealth es todo lo demás
su key atrapa todo en este caso lo que
puedo hacer es decir bueno caso
contrario si además el día es
sábado
imprime en pantalla
es un día para
y descansar también
y ya caso contrario para todos los demás
imprimes un día para trabajar y ahora si
el día es lunes e imprime es un día para
trabajar si el día es sábado le imprime
es un día para descansar también porque
porque esto va en orden de amigos eso
también es muy importante como lo
escribe es en estas condiciones estas
condiciones o comparaciones ya va
escribe las revisan orden una por una
pero ya va escribiendo acá y ve que dice
if dice ah bueno si es un if tengo que
ver cuál es la condición día es igual a
domingo ya escribí ce
me pasó a lo siguiente tenemos un else
if you girls significa si lo anterior no
se cumplió
revisa esta condición cuál es la nueva
condición
díaz es igual a sábado ya escribís ese
día si es igual a sábado entonces me
imprime es un día para descansar también
pero qué pasa si fuera martes bueno en
este caso no se cumple esto no se cumple
esto continúa ya vázquez y encuentra un
else aquí cuando llega a els significa
esto ya es lo sin importar nada entonces
aquí ya no revisa nada y simple y
sencillamente ejecuta esto acá y me
imprimes un día para trabajar
entonces esto esto sería lo referente a
condicional es muy importante ahora hay
una versión
no es una versión resumida o corta sino
que es en realidad un operador que es el
operador terciario en inglés es alternar
y tronar y
bueno ningún esperón sería ternario no
sé pero en inglés se llama ternari
operation ok y cómo funciona esto esto
sirve para realizar
instrucciones condicionadas pero de
manera resumida retomando este ejemplo
donde decíamos que díaz era igual a
domingo vamos a revisar en lugar de
escribir un id vamos a tomar domingo y
vamos a colocar un símbolo de
interrogación este símbolo de
interrogación significa sí
ok y lo que esté antes es en la
condición
entonces decimos si esta condición
hazme
esto de acá
si esa condición no es verdadera hazme
esto otro ok y ahora cuál es la
condición vamos a revisar si díaz es
igual a domingo
que quiero que hagas quiero que imprima
en pantalla
domingo por ejemplo
caso contrario estos dos puntos es como
el equivalente a el caso contrario
quiero que imprima en pantalla no es
domingo guardamos y le imprime domingo y
de esta manera está ejecutando código de
forma condicionada pero más resumido
fíjense que aquí ya no tuvimos que poner
un y ya no tenemos que poner paréntesis
ya tenemos que encerrar esto ya no
tuvimos que abrir llaves nada eso es
algo más resumido que esto es el
operador vamos a llamarlo vamos a
revisar cómo se llama tal parece que se
llama operador condicional ternario si
era ternario no la tercia terciaria y
terciaria aunque entonces el operador
terciario es una manera de crear estas
condiciones y ahora por último por
último esto es algo fundamental él ha
dejado para el final para cerrar con
broche de oro
qué es lo último si vienen de aprender
html y css o si llegan a aprender ya más
que para ser desarrolladores web
tienen que saber entonces qué javascript
nace para poder modificar y alterar los
contenidos de una página por ejemplo
ahora mismo tengo esta página que tiene
un h uno tenemos nuestro script de
javascript cloud y vamos a ponerle aquí
un párrafo y al inti vamos a ponerle un
texto
ok vamos a ponerle este texto ahora para
qué sirve javascript javascript sirve
para poder modificar y añadir
interactividad a estos elementos qué
elementos tenemos déjeme le borró un
poquito tenemos un h1 y tenemos un par
bueno pues aquí en javascript podemos
modificar estos elementos con código
ahora antes de modificarlos primero
tenemos que
identificarlos ok
desde javascript tenemos que voltear a
ver al html e identificar estos
elementos que queremos modificar tenemos
en cierta manera que traerlos desde html
javascript como hacemos es muy sencillo
vamos a traerlos y guardarlos en
variables entonces a crea que una
variable que se llame
encabezado h1
y h1 va a ser igual a esto de acá
ok si preguntáramos lo que acaba de
suceder blanca suceder es que tenemos
distintas maneras de traer elementos
html y javascript cuáles son estas
maneras podemos traer un elemento a la
vez o podemos traer varios elementos a
la vez para uno a la vez
tenemos que opciones tenemos
tenemos la primera que sería escribir
document.no element by
haití
ok y este documento punto que element
bayly sigue de unos paréntesis y aquí
entre paréntesis como podrán asumir
vamos a escribir el haití del elemento
que queremos traer entonces si nuestro
encabezado h 1 estuvieron ahí que dijera
encabezado entonces lo que haríamos acá
en javascript es escribir en cada b
sap ok
ya está esta es la primera manera la
segunda manera de traer un elemento a la
vez es escribiendo documento documento
query selector ok aquí abrimos
paréntesis que vamos a escribir aquí en
estos paréntesis este color y selector
es más flexible porque en lugar de tener
que trabajar únicamente conadis aquí en
cuadros electro podemos pasarle a haití
podemos pasarle clase o podemos pasarle
el tipo de elemento por ejemplo dado que
h1
es un h uno podemos pasarle aquí tráeme
1 1 y ya está o podemos decirle tráeme
aquello que tenga en haití de encabezado
pero al igual que con css con trabajamos
con haití en cuadros el lector tenemos
que especificarlo colocando un símbolo
de gato
ok bueno que en inglés se llama las
copas
la experiencia más
por lo menos así se conoce que en méxico
y esto es para indicar y disipar a
indicar clases es con un punto
entonces si éste h uno tuviera aquí una
clase de
encabezado lo que estaríamos haciendo
acá es traerlo punto en cabeza y esto es
para traer uno a la vez ok entonces aquí
lo que estoy haciendo es crear una
variable llamada encabezado h 1 y lo que
hago es traer a través de quart y
selector el h1 y ojo cuando cuando
escogemos y cuando no trabajamos ni
clase y no trabajamos ahí de lo que va a
hacer es
traer el primero que encuentre quieres
diciendo a h1 pero qué pasaría si
tuviera dos me traería el primero en
orden de arriba hacia abajo y vamos a
ver lo podemos ahorrar esto y vamos a
imprimir en pantalla encabezado h no
tengamos el navegador y veamos cómo se
ve
aquí está me dice que mi variable de
encabezado h1 es una etiqueta h1 que
tiene esta idea que tiene esta clase y
que tiene este contenido ok ahora
regresemos acá imaginemos que en lugar
de párrafos tenemos una lista que tiene
tres elementos 1 2 y 3
qué pasa si queremos traer todos estos
list aire más qué pasa si queremos traer
varios alavés en este caso no vamos a
trabajar ni con cuero y selector ni con
gary la mente vaya allí en este caso
tenemos
dos opciones la primera aquí vamos a
crear nuestra variable que se llame
todos los l
ok en este caso podemos trabajar con
query selector
ok la única diferencia es que agregamos
el y funciona igual hay de clase otra de
html y luego tráeme todos los tags de él
y si yo imprimo en pantalla este
todos los league donde los lisa james
notarán que quien me dice oye lo que
tienes en tu variable es un out list 1
dice es una lista de nodos y como pueden
ver tiene
corchetes y es que sucede que un noble
es muy similar a una rey no es
propiamente una rey pero es muy similar
tiene casi todos los métodos pero no es
una rey entonces está la primera manera
de traer varios la segunda manera de
traer varios es en lugar de utilizar
cuatro selector o podemos decir get
elements by clase name ok y aquí en get
elements byte class name vamos a pasar
el nombre de la clase y vamos a darle un
nombre de clase que sea lista me vengo a
mi index.html y aquí vamos a
decirle que la clase es igual a
lista ok y esta clase vamos a pasárselo
a todos los elementos a éste también y a
este también
y ahora si me vengo para acá y me fijo
lo que está en pantalla me dice que mi
variable de todos los link ya no es un
nobel y ahora es una colección html pero
fíjense que igual tiene brackets por lo
tanto podríamos asumir que es muy
similar a los arrays y si es similar es
similar pero
es más limitado que el nobles en cuanto
a propiedad se comparten en común ahora
por esto no se preocupen no se preocupen
que cuáles son las diferencias entre la
reina luisa html collection la vez que
esto rara vez lo van a ver pero creo que
sí es importante que sepan que existen
estos tipos de de objetos nobles y html
collection ok pero vale y esto lo
primero lo primero es traer los de html
javascript
aquí lo que voy a hacer es regresar esto
cuál es el lector y vamos a borrar todo
esto ya tenemos nuestro encabezado y ya
tenemos nuestros list james que están
por acá ahora una vez que los traemos al
mundo de javascript que podemos hacer
con ellos
la respuesta es lo que quieran la
maravilla de javascript y el hecho de su
objetivo con el cual nació fue poder
modificar a placer la página web
entonces yo podría venir acá y podemos
modificarlo primero los estilos puedes
ir encabezado
y puedo decir que este año lo puedo
decir color es igual a rojo y aquí está
bien se me lo cambia de color ya vieron
y lo siguiente que puedo hacer es
encabezado h1 y puedo cambiarle el
contenido podemos poner acá inner text
esto va a ser igual a hola mundo y me lo
cambié mi html dice esto permanece igual
el html es el mismo que en mi archivo
tenemos manual de supervivencia
pero aquí con javascript lo cambio ya
vieron todos podemos cambiar estilos
podemos cambiar contenido y ahora qué
pasa si quiero ya ven que aquí agarre a
todos los l y los guardó en una variable
que pasa si quiero modificar el primero
por ejemplo qué pasa si quiero que
también sea color rojo bueno qué pasa si
quiero que el que mel es un tamaño de
letra a 50
pues en ese caso lo que voy a hacer es
es trabajar como si fuera un array
porque en cierta manera lo es y aunque
no les mostré hace rato es que cuando
trabajamos con la raíz podemos acceder a
un valor en específico indicando la
posición ok si yo quiero acceder a este
primer elemento recuerden que los rays
tienen posiciones que empiezan desde
cero entonces esto sería la posición
cero la posición 1 y la posición 2 y
para acceder a estos valores específicos
a través de la de la posición lo que
haremos es escribimos el nombre de la
rey y acto seguido colocamos corchetes y
aquí entre corchetes indicamos la
posición la posición 0 para acceder a
este primer elemento y ahora ya que
accedemos este primer elemento vamos a
cambiarle su estilo y vamos a deseado
como
6 y 11 que font-size es igual a 20
píxeles bueno dicho 50 verdad ahí está
50
vieron y es así como podemos traer
elementos html jackson acá modificarlos
entonces aquí es cuestión de que claro
con tiempo y con práctica vayan
aprendiendo cómo acceder a cada una de
estas propiedades por ejemplo para
estilos tenemos que escribir punto style
ok y para cambiar el contenido tenemos
que escribir punto inerte es que en
realidad hay varias maneras de por
ejemplo aquí a este elemento al uno
podríamos cambiarle el texto y podríamos
ir inertes es igual a
22
y aquí me lo cambia 22 y otra manera que
podemos hacer es
giner html aquí vamos poner es igual a
hola mundo ok funciona obviamente la
idea es que con el tiempo ustedes vayan
aprendiendo las diferencias y todas
estas formas aunque se podrán estar
preguntando es
oye porque le cambió es el estilo porque
lo que es el contenido no tiene sentido
lo puedes hacer directamente acá en el
html ya puede ser directamente en los
estilos no y efectivamente lo podemos
hacer directo desde allá en el regalo
acá un poquito más de zoom
efectivamente podríamos hacerlo así pero
la ventaja de ella escribe es que esto
es dinámico aquí esto pons ver
interactivo qué pasa por ejemplo vamos a
ahorrar todo esto que está muy feo el
color rojo
qué pasa si aquí tuviéramos después de
esta lista tuviéramos un botón que
dijera
apriétame
ok bueno con ya script podemos hacer que
cada vez que apretemos acá el botón que
cada vez que hagamos esto se cambie el
color del texto o se cambie el contenido
bueno pues hagámoslo lo primero es traer
el botón pones basile botón es igual a
documento
word y selector
vamos a traer botón ok porque esta es
una etiqueta de autor
pero ya que trajimos este botón y lo
guardamos en esta variable vamos a decir
cada vez que alguien haga clic en el
botón haz algo y esto es algo muy
importante estos se llaman eventos hacer
click en el botón es un evento mover el
ratón es un evento es seleccionar es un
evento todas las formas que nosotros
tenemos interactuar con el documento
html es un evento tonces pons y la llama
es que cuando ocurren ciertos eventos a
ciertas
funciones o ciertas tareas llegamos lo
vamos a decir botón
punto y después del punto vacile at the
listener y ahora a quien adivine
listener
lo que haremos es
vamos a abrir paréntesis vamos a ir al
botón agregarle un escuchador de eventos
quiero que el botón esté escuchando
cuando ocurran los eventos lo primero
que vamos a hacer en los paréntesis es
decir que dentro queremos escuchar yo
vamos yo quiero escuchar los clics en el
botón ok entonces escribo clic
y ahora ya que ya que dijimos qué tipo
de eventos queremos escuchar vamos a
colocar una coma todo dentro del
paréntesis y aquí
vamos a colocar una función que queremos
que se ejecute cuando se haga clic y
aquí tenemos varias opciones recuerden
que podemos crear funciones con esta
palabra reservada o podemos este crear
una función tipo flecha lo que yo haré
es crear una función que se va a llamar
cambiar color y lo que va a hacer es que
al encabezado h1 el color va a ser igual
a red y luego a los l y el color los va
a volver blue entonces aquí en este a ti
bendicen el ya que define el tipo de
evento que quiero escuchar le voy a
decir sabes que cada vez que hay un haga
clic ejecutamos la función que se llama
cambiar color y ahora si me vengo para
acá y hago clic acá me los cambia ya
vieron y es así como podemos crearlo
esto de manera interactiva algo que
podríamos hacer también es vamos a
llamarlo vamos a crear otra función que
se llame function cambiar texto
y vamos a decir que al encabezado vamos
a ponerle aquí un número aleatorio vamos
a escribir más punto random
100 ok y entonces vas y sabes que en
lugar de ejecutar la función de cambiar
color con los clics ejecutamos la
función de cambiar texto y ahora con
ello haga clic acá
me cambia esto de forma aleatoria ok y
se preguntando y se preguntarán pero qué
es esto de más punto random bueno pues
javascript como les dije en un principio
tiene ciertas herramientas que vienen
predefinidas una de ellas era con solo
por ejemplo y otra de ellas es más más
tiene varias si ponemos más punto
tenemos más de este punto lnp square
varias apps random etcétera entonces no
se preocupen estoy bien con el tiempo no
es fundamental pero bueno aprovechando y
aquí se menciona más punto random es
funcionar a un número aleatorio entre 0
y 1 y es así como fíjense estamos
creando contenido dinámico y eso es la
maravilla de abbas que es lo que nos
permite las posibilidades chicos son
ilimitadas
y ahora con esto con esto es que termino
este vídeo esto es quizá es que
dependiendo de la que quieran dedicarse
y si son front-end no quieren ser
back-end si son front esto lo van a ver
de ley y esto la acción de modificar el
html porque este html ya traía este
contenido manual de supervivencia esto
de modificar el html se conoce como
manipulación dom ok
manipulación 2 entonces como les dije
este vídeo es un manual de supervivencia
que conozcan lo mínimo necesario que
tengan un buen panorama de cómo funciona
en javascript y entonces poco a poco van
incrementando este conocimiento ya tiene
una base de que buscar qué hacer por
ejemplo si ahorita ustedes son personas
que quieren dedicarse a front quieren
crear páginas web interactivas etcétera
ya saben que esto se llama manipulación
dom y ya saben que tenemos esta cuestión
de eventos entonces lo que continuaría
es que poco a poco vayan aprendiendo más
eventos por ejemplo o de otro evento
sería mouse
o ver y aquí lo que va a suceder es que
cada vez que yo pase el ratón por encima
sin hacer clic en las que pasa el ratón
por encima se cambia ya vieron esto es
mouse offer
y ahí lo tienen
esto es esto ha sido el manual de
supervivencia espero que haya sido útil
la verdad es que el camino del
desarrollo web es es bastante
interesante pero deberán siempre
afrontarlo o acercarse a él con una
actitud o con una visión enfoque de
autodidactismo o autodidactas ahora es
que si es como se aprende y hoy les
puede haber dado un vídeo de 15 horas 20
horas 30 bajas horas 100 días pero eso
no es la manera de aprender la mejor
manera de aprender en mi experiencia y
en mi opinión es comenzando con una base
sólida y pequeñita que poco a poco vayan
expandiendo con base en la práctica lo
que yo recomiendo es que hoy terminando
este vídeo abran su editor y comiencen a
interactuar comiencen a agregar eventos
comiencen a investigar cuáles son los
otros eventos comiencen a investigar
cuáles son las otras propiedades de cada
tag de cada variable etcétera ok pero ya
estoy con esto terminado es el vídeo del
día de hoy si les ha gustado real me
gusta suscríbase para ver más contenido
como éste y nos vemos en el próxima
visita de chicos hasta luego