Javascript moderno para principiantes: parte 1 | Chris Dixon | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Javascript moderno para principiantes: parte 1

teacher avatar Chris Dixon, Web Developer & Online Teacher

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      ¡Te damos la bienvenida a la clase!

      1:59

    • 2.

      Comparte tu trabajo en Skillshare!

      1:09

    • 3.

      ¡Veamos lo que puede hacer JavaScript!

      11:12

    • 4.

      Descarga los archivos de inicio

      1:52

    • 5.

      Dónde añadir JavaScript

      11:31

    • 6.

      Asíncrono y diferido

      8:15

    • 7.

      Trabajar con cadenas de caracteres

      6:48

    • 8.

      Almacenar datos con variables

      10:35

    • 9.

      Mezclar cadena de caracteres con variables

      4:00

    • 10.

      Tipos de datos: números

      6:40

    • 11.

      Tipos de datos: booleanos, nulos e indefinidos

      7:27

    • 12.

      Comentarios, puntos y comas y ASI

      8:15

    • 13.

      Operadores: proyecto y comparación

      9:29

    • 14.

      Operadores: lógicos y aritméticos

      8:23

    • 15.

      Introducción a las matrices y tipos de objetos

      5:33

    • 16.

      Introducción a los objetos

      7:19

    • 17.

      Introducción a las funciones

      13:22

    • 18.

      El constructor de matrices

      5:22

    • 19.

      Introducción a las propiedades, los métodos y el prototipo

      5:21

    • 20.

      Modificación de matrices

      12:07

    • 21.

      Retorno de nuevos valores

      9:21

    • 22.

      Métodos de iteración

      14:29

    • 23.

      Reductores

      7:31

    • 24.

      Mapa y forEach

      9:36

    • 25.

      Desestructuración de matrices

      4:27

    • 26.

      Valores únicos con Set

      4:33

    • 27.

      Matrices de dos dimensiones

      3:49

    • 28.

      El objeto global y las funciones incorporadas

      9:40

    • 29.

      Expresiones de funciones

      8:50

    • 30.

      Expresiones de funciones invocadas inmediatamente

      5:58

    • 31.

      ¿Anónimos o con nombre?

      8:30

    • 32.

      ¿Una función o un método?

      8:13

    • 33.

      Funciones de flecha

      6:08

    • 34.

      Valores por defecto de los parámetros y la utilización del resto

      8:02

    • 35.

      ¿Qué es el DOM?

      2:54

    • 36.

      Seleccionar los elementos

      9:35

    • 37.

      Cambiar los valores y los atributos

      14:00

    • 38.

      Cambiar un elemento CSS

      7:45

    • 39.

      Crear nuevos elementos

      18:17

    • 40.

      Añadir elementos a la página

      7:06

    • 41.

      Clonación y eliminación de elementos

      4:04

    • 42.

      Mini desafío

      1:42

    • 43.

      Bucle con elementos del DOM

      10:30

    • 44.

      Introducción a los eventos

      1:43

    • 45.

      Escuchar los eventos

      10:42

    • 46.

      Escuchar varios eventos y datos de eventos

      8:07

    • 47.

      Propagación de eventos

      8:42

    • 48.

      Ejecutar los eventos una vez

      1:51

    • 49.

      Evitar el comportamiento por defecto y la opción pasiva

      12:09

    • 50.

      Eliminar escuchadores de eventos

      5:44

    • 51.

      ¿Colección HTML o nodeList?

      6:02

    • 52.

      Mini desafío: crea un botón de modo oscuro

      8:24

    • 53.

      Proyecto de reproductor de video: crear la interfaz de usuario

      14:41

    • 54.

      Proyecto de reproductor de video: eventos, propiedades y métodos del video

      15:34

    • 55.

      Juego de caída de figuras: crear la interfaz de usuario

      8:15

    • 56.

      Juego de caída de figuras: eventos de arrastrar y soltar

      13:47

    • 57.

      Juego de caída de figuras: manejo del marcador y fin del juego

      8:27

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

4622

Estudiantes

22

Proyectos

Acerca de esta clase

¡Bienvenido a Modern JavaScript para principiantes!

Toma los archivos de inicio aquí.

Aprender cualquier habilidad nueva puede ser difícil, y Javascript no es una excepción.

Javascript tiene una amplia gama de características y cosas que puede hacer, lo que significa que a veces como principiantes no tenemos idea de dónde empezar.

Es por eso que he creado esta clase…

Trabajando desde el principio, te enseñaré lo que es Javascript, lo que puede hacer y por qué incluso lo usamos en absoluto.

Esta clase cubre todo lo que necesitas saber para convertirse en un desarrollador de Javascript competente.

La clase es principiante para cualquiera que sea novedosa en Javascript, o si tienes un poco de experiencia y buscas una clase redonda para llevarte al siguiente nivel. Deberías tener al menos una experiencia con HTML y CSS para sacar el máximo provecho de esta clase.

Si no has tomado alguna de mis clases antes, mi nombre es Chris y he estado construyendo sitios web por más de 20 años.

Además he enseñado a nuevos desarrolladores durante más de 7 años, tanto en clases de video como en los campos de inicio de desarrollo web líderes.

Esto es la parte 1 de 2, y te dará una excelente base en Javascript que cubre todos los conceptos básicos, incluyendo matrices, funciones, objetos, eventos y el DOM, API web y todos los detalles que necesitas conocer en medio.

Todos estos temas se tratan de una manera clara y estructurada, y a la vez construye proyectos prácticos a medida que avanzamos.

Incluir casos de uso de ejemplo real y mini desafíos también.

Al final, también ponemos todas estas habilidades unidas creando un reproductor de video de trabajo, incluyendo controles completamente personalizados. Y también un divertido juego de gota de forma usando arrastrar y soltar.

Incluye una carpeta de proyecto a la que añadimos a medida que avanzamos, que servirá también como referencia útil en el futuro.

Gracias por tu interés en esta clase, y te veré en la primera lección…

Conoce a tu profesor(a)

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Te damos la bienvenida a la clase: Oye. Bienvenidos a esta clase. Como todos sabemos, aprender cualquier nueva habilidad puede ser un reto, y JavaScript no es una excepción. JavaScript tiene una gama tan amplia de características y cosas que pueden ser útiles, y esto a menudo puede dejar a los principiantes en una situación difícil preguntándose por dónde empezar. Es por eso que he creado esta clase. Trabajándolo desde el principio, te mostraré qué es JavaScript, qué puede hacer, y por qué incluso lo usamos en absoluto. Esta clase cubre todo lo que necesitas saber para convertirte en un desarrollador de JavaScript competente. Si antes no has tomado una de mis clases, llamo Chris, y llevo más de 20 años construyendo sitios web, y también llevo más de siete años enseñando estas habilidades, ambas clases de video junto a los principales bootcamps de desarrollo web también. Esta es la Parte 1 de 2, y te dará una gran base en JavaScript de todos los conceptos básicos que incluyen matrices, funciones, objetos, eventos y el DOM, API web, y todos los detalles que necesitas para saber en el medio. Todos estos temas se tratan de una manera clara y estructurada, todo mientras se construye un proyecto práctico a medida que avanzamos, incluyendo casos de uso de ejemplo del mundo real, y también algunos mini retos también. Al final, también juntamos todas estas habilidades construyendo un reproductor de video de trabajo, incluye controles totalmente personalizados, pero también un divertido juego de gota de forma, usando la API de arrastrar y soltar. Incluye una carpeta de proyectos a la que vamos sumando a medida que avancemos a lo largo de esta clase, y también se desarrollará como referencia útil en el futuro también. Gracias por su interés en esta clase, y nos vemos en la primera lección. 2. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no acostumbrarse a seguirlo solo por el bien de quitarse otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase e incluso puedes dar un paso atrás después de haber terminado la clase, y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare y solo lo revisaré, pero también inspirará a otros estudiantes también. Más información sobre el proyecto de clase dirígete a la pestaña de proyecto y recursos, donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 3. ¡Veamos lo que puede hacer JavaScript!: Entender el lado teórico de JavaScript es realmente importante, y llegaremos a esto muy pronto, pero no hay nada como ver exactamente lo que puede hacer justo frente a ti. Para ver algunas de las cosas que puede hacer JavaScript, vamos a abrir una página web. Aquí, estoy en la Red de Desarrolladores de Mozilla. Se trata de developer.mozilla.org. Esto también funcionará en cualquier otra página web, por lo que puedes elegir una diferente si quieres. No te voy a mostrar cómo se puede usar JavaScript para controlar o realizar cambios en cualquier sitio web. Ahora, sólo una palabra rápida antes de que lleguemos más lejos en este video. Puede haber una o dos cosas que parezcan complejas o desconocidas, por lo que si no estás acostumbrado a codificar o JavaScript, algunas de estas pueden parecer un poco intimidantes, pero solo ten en cuenta, esto es solo para te dan algunas guías sobre lo que JavaScript puede hacer. No esperamos que recuerdes nada de esto, y vamos a cubrir todo lo que hemos pasado a medida que avanzas por el curso. Piensa en esto como un poco de catador para emocionarte con lo que JavaScript puede hacer a una página web. Para ver qué puede hacer JavaScript, voy a abrir las herramientas de desarrollador dentro de Google Chrome, que es hacer clic derecho, y luego bajar a Inspect. Vamos a hacer esto un poco más grande para que sea más visible. Si estás usando un navegador diferente, como Safari o Firefox o Edge, mayoría de las herramientas de desarrollador son muy similares, por lo que deberías estar bien si quieres usar un navegador diferente también. Pero si quieres las cosas exactamente igual, seguiría junto con Google Chrome. Lo primero que vemos aquí es esta pestaña Elements, que tiene acceso a toda la estructura HTML que conforma esta página web. Podemos o pasar el cursor sobre cualquiera de estas líneas de código, y resaltará sobre la izquierda qué sección estamos trabajando actualmente, o también podríamos hacer clic en esta flecha, que es el inspector, y seleccione cualquiera de estas secciones o elementos de la página. Por ejemplo, vayamos por este encabezado de nivel 1 y pinchemos en esto. Esto resaltará instantáneamente este encabezado de nivel 1 dentro del código, y cuando esté seleccionado, notarás más a la derecha tienes esto equivale a $0, y luego vemos este pop-up justo debajo del cual dice usar $0 dentro de la consola para referirse a estos elementos. Podemos usar $0 dentro de esta pestaña de Consola para seleccionar cualquiera de nuestros elementos o secciones, y luego podemos aplicar algunos JavaScript también. Solo confirmemos que tenemos los elementos correctos seleccionados con $0, y luego recuperamos nuestro rumbo de nivel 1. Hemos seleccionado este elemento, pero ¿qué podemos hacer con él? Bueno, la lista es enorme, y aquí sólo vamos a rayar la superficie, y vamos a cubrir mucho más durante este curso. Si volvemos a seleccionar $0 para apuntar a nuestro encabezado de nivel 1, y luego un punto, podemos ver a continuación tenemos acceso a muchas opciones diferentes que podemos utilizar en este elemento. Uno común, que usaremos mucho en este curso, es algo llamado texto interno. El texto interno es una forma de simplemente cambiar el contenido entre la etiqueta de apertura y la etiqueta de cierre. Tendrá este texto de recursos para desarrolladores. Si queremos, podemos establecer esto igual a cualquier nueva cadena de texto. Abre las cotizaciones. Podemos usar citas simples o dobles, incluso una está bien, y luego podemos configurar este texto para que sea cualquier otra cosa que quieras. Vamos por, he cambiado, y luego inmediatamente recuperamos el texto recién devuelto en la consola, y también podemos ver la página web se ha actualizado también. Antes de ir más lejos, no te preocupes por hacer ninguno de estos cambios. Esto no está actualizando la página web en vivo. Esto es sólo dentro de nuestro propio navegador. Todo lo que tenemos que hacer es simplemente actualizar el navegador y esto se restablecerá de nuevo a la versión original. Además, estamos haciendo esto, ahora restablecemos nuestros $0, y esto ahora volverá indefinido. Miraremos a lo indefinido con más detalle a lo largo de este curso. Pero por ahora, podemos pensar en ello como simplemente no se ha asignado ningún elemento a este $0. Al igual que antes, necesitamos volver a la pestaña Elementos para seleccionar cualquiera de estas secciones o elementos con los que quieras trabajar. Vamos por uno de estos enlaces arriba en la parte superior. De nuevo, usa la flecha, y podemos pasar el cursor sobre cualquiera de estos botones. Haga clic en esto. Tenemos este botón con el botón ID de Feedback, que ahora debería asignarse a $0. Seleccionemos esto, y vemos que ahora se devuelve nuestro botón. Nuevamente, $0 y luego el punto nos dará acceso a una gama de características que podemos aplicar a este elemento. Una de esas es la propiedad de estilo, y desde aquí también podemos agregar una propiedad de estilo adicional que queremos aplicar a este botón en particular. Al igual que con CSS normal, si has usado CSS en el pasado, todas las mismas propiedades de estilo están disponibles para usar dentro de la consola. Un ejemplo para esto podría ser el color del texto, que podemos establecer a cualquier valor que sea un color CSS válido. Golpea “Enter”. No obstante, actualizar de inmediato dentro del navegador. Presione hacia arriba, y también podemos agregar una segunda propiedad. Vamos por la familia de fuentes. Nuevamente, podemos cambiar esto dentro las cotizaciones para ser una familia de fuentes diferente de cursiva. Como era de esperar, esto actualizará automáticamente el navegador. Solo una cosa a tener en cuenta al trabajar con estilos es, aquí vemos que tenemos la propiedad de color establecida en rosa caliente, y esto funciona igual que una hoja de estilo regular. No obstante, cuando tengamos dos palabras como fuente y familia, en CSS regular, mantendríamos todo esto en minúsculas y separaríamos esto con un guión, por lo que lo escribiremos así como dos palabras con el guión dentro. Pero en cambio, al usar JavaScript, si tenemos dos o más palabras, necesitamos cambiar esto por lo que se llama CamelCase, y cada palabra después de la primera comienza con una letra mayúscula. Eso es más o menos lo único que debes recordar en esta etapa. Tenemos acceso a todas las mismas propiedades CSS, pero necesitamos escribirlas como CamelCase al usar JavaScript. Otra cosa que vamos a ver ahora son los eventos. De nuevo, tenemos una sección dedicada de eventos más adelante en el curso. Pero por ahora, solo quiero emocionarte un poco sobre lo que JavaScript puede hacer al interactuar con el usuario. Para ver un ejemplo de esto, podemos pedirle al navegador que escuche un evento de mouse como cuando un mouse pasa sobre este elemento en particular. Podemos volver a hacer esto seleccionando nuestro botón con $0, y luego podemos usar un evento llamado onmouseover. Esto detectará cuándo el ratón pasa por encima de este elemento en particular. Entonces vamos a activar lo que se llama una función. Una función es como una tarea que se va a ejecutar cuando el ratón pasa por encima de este botón en particular. No te preocupes si esto parece desfamiliar, tenemos mucho más detalle sobre las funciones que vienen. Pero por ahora, todo lo que vamos a hacer es seleccionar este elemento en particular. De nuevo, accede a la propiedad de estilo, y esta vez vamos a ir a que el fondo sea igual a cualquier color, como el naranja. Pulsa “Enter”, y ahora se activará este evento mouseover . Si ahora ponemos el ratón sobre estos elementos en particular, ahora se cambia el fondo para que sea naranja. Esta es una forma de probar rápidamente las cosas en el navegador. Pero cuando se trata de escribir código JavaScript real dentro de nuestro editor de texto, $0 no funcionará, $0 solo funciona dentro de las herramientas de desarrollador del navegador. En cambio, necesitamos una forma de acceder a cualquiera de estos elementos desde la página desde el exterior. Por ejemplo, volver a la página del elemento, y lo que vamos a hacer es seleccionar una sección diferente. Vamos por el principal, que tiene el ID de contenido. Por supuesto, podríamos acceder a $0 ya que estamos en las herramientas de desarrollador, pero necesitamos acostumbrarnos a acceder a estos elementos desde un editor de texto. El modo en que lo hacemos es partiendo desde el nivel muy alto, y esto es accediendo a los documentos. Podemos ver de inmediato que se destacará la página completa. Esto se debe a que el documento es esta página web real. Entonces, una vez que hayamos seleccionado la página completa así, necesitamos una forma de filtrar esta página hasta el elemento en particular que queremos. JavaScript nos proporciona ciertos métodos que podemos utilizar para filtrar esta página. Como podemos ver aquí con este auto completo, podemos seleccionar un elemento por el ID, por el nombre de la clase, y también por el nombre del elemento también, pero más que éstos más adelante. Voy a ir por getElementById, y luego dentro de los corchetes podemos pasar en el ID del elemento que queremos seleccionar. Al mirar la pestaña Elementos, vemos que esta sección principal tiene el ID igual al contenido como una cadena. Pase esto en, y también tenga en cuenta aquí que esto también es CamelCase. Al igual que la familia de fuentes de arriba, todas y cada una de las palabras después de la primera comienza con una letra mayúscula. Golpea “Enter”. Esto luego devuelve nuestro principal con el ID de contenido. Estamos exactamente en la misma posición que cuando usamos $0. Si presionamos hacia arriba, obtenemos la misma línea de código. Después podemos usar el punto para acceder a cualquiera de las mismas características que usamos antes. Por ejemplo, establece el estilo, y luego vamos a ir por la opacidad CSS igual a 0.3. Esto no se aplica, todavía podemos hacer cualquier otra cosa que teníamos antes, como el fondo. Esto igual a cualquier cosa. Vayamos por el rojo. Ahí vamos. El fondo de la sección principal ahora se ha transformado en rojo. Simplemente refresquemos y reinstamos esto de nuevo a su estado original. JavaScript no se limita a sólo cambiar los elementos de nuestra página. También lo podemos usar para hacer mucho más. Tenemos acceso a características de fecha, podemos acceder a temporizadores, y también algunas funcionalidades matemáticas también. Vamos, por ejemplo, sumar dos números. Diremos que 5 más 11 es 16, 7 comida para llevar 2 es 5. Tenemos un montón de otras características matemáticas también, por lo que podemos seleccionar el objeto matemático y luego puntar, y luego desplazarse por. Podemos ver que tenemos muchas opciones diferentes, pero una popular es Math.Random. Agrega los corchetes justo después y pulsa “Enter”, y esto generará un número aleatorio entre cero y uno. Si seguimos probando esto, obtenemos un valor diferente cada vez. Esto es sólo una pequeña muestra de lo que JavaScript puede hacer y cómo podemos usarlo para interactuar con una página web. Hay mucho más por aprender, y conoceremos más de estas características a medida que avanzamos por este curso. 4. Descarga los archivos de inicio: A lo largo de este curso, estaremos escribiendo mucho código JavaScript. Para ayudarnos en el camino, te he proporcionado una carpeta llamada los modernos archivos de inicio javascript. Si te diriges a github.com/chrisdixon161, y luego al repositorio que es modern-javascript-starter-files. Desde aquí, puedes descargar este conjunto completo de archivos, que son los archivos de inicio que vas a necesitar para cada lección de este curso. Por ejemplo, cuando entras a la primera sección, y luego encontraremos una lista de todas las lecciones dentro de esta sección. Cada una de estas carpetas contiene el mínimo muy desnudo que necesitarás para empezar con cada una de estas lecciones. El propósito de estas carpetas es darnos un punto de partida, lo que podemos simplemente saltar directamente a aprender sobre JavaScript sin, por ejemplo, necesitar escribir todo el código HTML requerido. Otro beneficio de todos estos archivos es que también nos da una referencia para todas las lecciones que hemos hecho en el pasado. A medida que marcamos cada una de estas lecciones, tenemos una referencia que puedes mirar hacia atrás si alguna vez te quedas atascado en el futuro. Esto es todo lo que necesitamos hacer. Basta con seguir adelante y descargar la carpeta. Esto se puede hacer en los puntos de entrada de la carpeta principal. Haga clic en el botón “Código” justo aquí y podrá descargar el archivo ZIP completo, cual vamos a abrir dentro de nuestro Código Visual Studio. Una vez que esto haya sido descargado, debes tener un archivo ZIP el cual puedes extraer, generalmente haciendo doble clic en la carpeta y luego arrastrarlo hacia tu editor de texto. Estoy usando Visual Studio Code y deberías ver todas las secciones disponibles sobre la izquierda. Esto es todo, este es nuestros archivos de inicio todos completos. Ahora podemos saltar a aprender todo sobre JavaScript. 5. Dónde añadir JavaScript: Bienvenidos al inicio de esta sección. Ahora vamos a echar un vistazo JavaScript y vamos a pasar del navegador y en realidad a nuestros propios archivos JavaScript. De la sección anterior, descargamos los archivos de inicio que vienen con este curso. Si no has descargado estos, haz volver a ese video y descarga estos desde GitHub. Una vez hecho esto, necesitarás descomprimir el paquete y arrastrarlo al código de Visual Studio para abrirlo. A la derecha, he abierto Google Chrome como el navegador. Lo que vamos a hacer ahora es comenzar justo al principio y echar un vistazo exactamente dónde podemos agregar JavaScript a nuestros archivos. Antes, hemos escrito código directamente en la consola del navegador, pero de manera realista, casi siempre se escribe en nuestros propios archivos. ¿Por dónde empezamos? Bueno, dentro de Visual Studio Code en nuestros archivos de inicio, dirígete a nuestra primera sección, que son los conceptos básicos de JavaScript y notarás que los números lejanos comienzan a partir de 02. Esto se debe a que para esta lección en particular, vamos a empezar justo al inicio y a armar las cosas nosotros mismos, y luego para todo el resto de las lecciones, estas tendrán algún boilerplate disponible para que accedamos. Podemos simplemente saltar directamente a escribir nuestro código JavaScript. Para este con los conceptos básicos de JavaScript seleccionados, haga clic en este icono aquí, que es crear una nueva carpeta, y entonces ésta puede ser 01. Voy a llamar a esto donde agregar JavaScript. De nuevo, asegúrate de que esto esté dentro de la carpeta de conceptos básicos de JavaScript y luego con esta primera carpeta seleccionada, haz clic en este icono aquí, que es un archivo nuevo, y esto se abrirá dentro de aquí. Llamaremos a esto el índice de punto HTML. Hit Enter. Debería estar dentro de nuestra nueva carpeta. Dentro de ella, agrega alguna estructura HTML básica para abrir esto dentro del navegador y Visual Studio Code viene con un plug-in o reconstruido en llamado Emmet Esto nos dará algo de finalización de código y algunos accesos directos simples. Uno de los más útiles es HTML colon cinco. Hit Enter. Esto nos dará a todos el código básico de inicio HTML que necesitamos. Nuevamente, todo esto va a estar disponible en todas las demás carpetas por lo que esto es sólo para esta lección solamente. El título, dónde agregar JavaScript. Entonces necesitamos los elementos para trabajar realmente con tales como un encabezado de página. Colocando cualquier cosa como h1 y algún texto dentro de aquí. Tener estos elementos en su lugar aquí significa que podemos usar algún JavaScript para acceder a estos elementos, tal como lo vimos antes en la consola. Todo lo que necesitas para abrir esto dentro del navegador es guardar este archivo con Command or Control S. Entonces si hacemos clic derecho en este nombre de archivo justo aquí, bajamos a Copiar ruta, y luego podemos pegar esto dentro del navegador. Alternativamente, si lo deseas, puedes ir dentro de la carpeta principal justo aquí. A continuación, puede seguir a través de la carpeta actual y hacer doble clic en esta página de índice. Esto luego abrirá esto en tu navegador predeterminado. Para poder acceder a estos elementos utilizando JavaScript, una de las formas que podemos hacer esto es agregar AID. Voy a darnos una identificación de título. Recuerda que cada ID en particular debe ser único para esta página HTML. Asegúrate de que solo tenemos un ID de título dentro de este archivo HTML. Esto hace que sea agradable y fácil para nuestro JavaScript poder seleccionar los elementos particulares que desea. Entonces debajo de esto y justo encima de nuestra etiqueta de cuerpo de cierre, podemos insertar nuestras etiquetas de script. Tenemos una etiqueta de apertura y también una etiqueta de cierre también. Esta es la ubicación donde podemos colocar nuestro código JavaScript. Justo encima del cuerpo se encuentra una ubicación donde podemos agregar JavaScript y también está sobre ubicaciones que veremos pronto. Antes cuando estábamos dentro de la consola, recuerda que miramos seleccionar cada elemento en particular con símbolo de dólar cero. Recuerda también dijimos que esto es único para la consola. Necesitamos una forma diferente de seleccionar nuestros elementos dentro del editor de texto. Bueno, aquí adentro vamos a hacer exactamente lo mismo que miramos en la consola. Primero seleccionaremos el documento. El documento es este documento HTML completo en el que estamos trabajando actualmente. Se va a seleccionar esto y luego necesitamos filtrar estos documentos al elemento particular que queremos seleccionar. Recuerda que miramos un método llamado get elements by ID. De nuevo, se trata de CamelCase. Todas y cada palabra después de la primera comienza con una mayúscula dentro de los corchetes, y las cotizaciones pasarán luego en un ID único que desea seleccionar. En nuestro caso, vamos a agarrar el título. Mueve esto aquí. Miramos cambiar el contenido interno o el texto interno de este elemento con.innertext. Esta es una propiedad donde podemos agregar una nueva cadena de texto entre las comillas simples o dobles. Vamos a cambiar esto a JavaScript por ahora y guardar este archivo. Entonces si pasamos al navegador y recargamos, esto ahora ha seleccionado nuestro encabezado de nivel 1 y ha cambiado el HTML interno. Vamos a cerrar la barra lateral para conseguir un poco más de espacio. Todas las mismas propiedades a las que miramos en el video de la consola siguen aplicándose, como agregar diferentes estilos. Nuevamente, podemos acceder a los mismos elementos con get element by ID, y también podemos cambiar los estilos para este elemento en particular también. Cambiemos el color del texto para que sea igual al naranja. Refresca y esto aplicará todo. Otra forma de agregar JavaScript es agregar esto en línea. Agregar este en línea significa que lo agregamos directamente dentro de nuestros elementos y agregamos esto dentro de la etiqueta de apertura de elementos. Agregaremos esto igual que agregaríamos algún CSS en línea. En un video anterior, miramos los eventos muy brevemente, donde miramos el evento sobre el ratón. Aquí, echemos un vistazo al evento on-click, que se activará cuando el usuario clic en este elemento en particular. Todo lo que vamos a hacer dentro de este manejador de eventos al hacer clic es activar una alerta. Una alerta es un pop-up dentro del navegador. Vamos a añadir esto con el texto de clicked. Dale a esto un guardar y refrescar el navegador. Mueva el ratón sobre los elementos y haga clic. Ahora veré una alerta de página. Esto es probablemente algo que has visto al navegar por la web en el pasado. Todo lo que tenemos que hacer para quitar esto es dar click en el botón Ok y esto luego se cerrará . Solo eliminemos esto. También solo ten en cuenta que generalmente se desaconseja mantener nuestro JavaScript en línea así así porque mezcla nuestro HTML y nuestro JavaScript y hace que las cosas sean menos legibles y organizadas. Si es posible, manténgalo todo separado, igual que tenemos aquí, y también veremos cómo podemos agregar esto a un archivo separado en tan solo un momento. Esto está contenido dentro de una etiqueta de script y podemos agregar tantas etiquetas de script como quieras. También podría ubicarse en cualquier parte de esta página, incluso hasta dentro de la sección de cabeza. Esto funciona exactamente de la misma manera si agarramos toda esta sección de guión y luego Comando o Control X para cortar esto fuera de lugar. Coloca esto dentro de la sección de cabeza con comando o control V para pegar esto en y también el navegador. En el interior de aquí podemos ver el título original de la página se restablece. Ahora como hemos movido la etiqueta de guión hasta la sección de cabecera, nada de este JavaScript parece estar aplicando. Entonces echemos un vistazo dentro la consola y veamos si podemos detectar algún error. Haga clic derecho e inspeccione. Haga clic en la pestaña Consola en la parte superior. Vemos que no podemos establecer la propiedad innertext de null. Cuando sí obtenemos un error, a menudo es una buena idea dirigirnos a la consola y a menudo nos dará un puntero a cuál es exactamente el problema. El problema actual se debe a que página HTML se carga de arriba a abajo. Por lo que el guión dentro de la sección de cabecera se carga antes que incluso sepa que existe este elemento de título, lo que luego está causando un error. Si sí necesitamos agregar un script dentro de la sección de cabecera como esta, a menudo puede causar problemas si necesitamos acceder a alguno de nuestros elementos DOM. Es por ello que a menudo vemos JavaScript al final de la sección del cuerpo. Permite que los elementos se carguen rápidamente y no bloquea que el HTML se cargue en la página. Sin embargo, verá algunas bibliotecas JavaScript de terceros que necesitan que el script se cargue dentro de la sección de cabecera para que la biblioteca funcione correctamente. Además, estas bibliotecas de terceros, junto con nuestro propio código, suelen estar separadas en su propio archivo de script. Mover todo este JavaScript a su propio archivo hará que estos documentos HTML sean mucho más legibles y mantenibles. Para hacer esto primero, abre la barra lateral y luego dentro de la carpeta donde agregar JavaScript, haz clic en el icono del nuevo archivo, y luego podemos darle a esto un nombre de nuestra elección. Voy a ir por el guión 1. Entonces necesita tener la extensión dot js. Hit Enter. De vuelta a nuestra página de índice, podemos copiar los contenidos entre las etiquetas de guión. Agarra estas dos líneas de código, pon estos outs. Pega estos en nuestro nuevo archivo de script. Este archivo de script no necesita las etiquetas de script circundantes ya que ya sabemos que se trata de un archivo JavaScript de la extensión dot js. Pero lo que sí tenemos que hacer es vincular estos dos archivos juntos. Actualmente, se trata de dos archivos separados independientes entre sí. Encima en el archivo de índice, tenemos que apuntar a este nuevo archivo de script. Podemos hacer esto dentro de las etiquetas de script en lugar de tener el código ubicado dentro como lo hicimos antes. Lo que podemos hacer es agregar los atributos de origen. El atributo fuente es básicamente la ubicación de este archivo relación con donde estamos actualmente. Esto funciona exactamente igual que agregar una hoja de estilo. Dado que este archivo está al lado del otro, podemos apuntar a esto con la fuente del script 1 punto js. Si esto se ubicaba dentro de una carpeta JavaScript, por ejemplo, tendremos que ir a la carpeta JavaScript y luego reenviar barra en nuestro script. No tenemos esto, así que es simplemente script one dot js. Asegúrate de que ambos de nuestros archivos estén guardados y luego pasa al navegador, refresca. vemos el mismo problema dentro del navegador. No podemos establecer la propiedad innertext de null. Esto tiene sentido porque todavía estamos cargando la etiqueta de guión dentro de la sección de cabeza. Estamos tratando de aplicar esto a un elemento antes de que incluso se haya cargado. Podríamos escribir algún código personalizado para esperar a que el HTML se cargue primero o podemos ver algunas técnicas más modernas en el próximo video. 6. Asíncrono y diferido: Dentro de nuestros archivos de inicio, vamos a cerrar este archivo del último video para que no haya confusión. Después, dirígete a la lección 2, que es asíncrona y aplaza. Haga doble clic en la página del índice para abrir esto. Ya que ahora estamos en un archivo nuevo, necesitamos copiar esto o copiar la ruta a esto y luego pegar esto dentro del navegador. Vemos enseguida que todavía tenemos el mismo error que el video anterior. Esto se debe a que este es prácticamente el mismo archivo o el mismo código final que teníamos en el último video. Tenemos nuestro script y luego también tenemos nuestro encabezado de nivel 1 y los mismos contenidos dentro del archivo de script. Tendrás que hacer esto por cada video al que vayamos. Tenemos que abrir la página del índice y también asegurarnos de que este sea el título correcto de la página. En el último video, descubrimos un problema al cargar nuestros archivos JavaScript demasiado temprano. Esto puede causar dos problemas. En primer lugar, es posible que tengamos que acceder al elemento HTML antes de que incluso se esté creando, igual que vemos aquí, y en segundo lugar, posible que tengamos mucho código JavaScript ubicado dentro de este archivo. Esto realmente podría ralentizar la carga del resto de nuestra página. Si el script 1 fuera un archivo realmente enorme, el usuario no vería ninguno del HTML cargado en la página hasta que este script hubiera terminado de ejecutarse. Ahora vamos a ver dos formas que podemos usar para arreglar todo este asíncrono y diferir. Asíncrono y diferir son ambos atributos los cuales podemos agregar dentro de los elementos de script. En primer lugar, echemos un vistazo a asíncrono y cerremos la barra lateral para obtener un poco más de espacio. Asegúrese de que este archivo esté guardado y actualice el navegador. Enseguida, vemos que el error ha desaparecido. El JavaScript se ha aplicado a nuestro elemento y no vemos ningún error dentro de la consola. Intentemos diferir. Coloca esto y refresca el navegador y tenemos exactamente el mismo resultado. Todo está funcionando perfectamente bien. Con estos dos trabajando, ¿cuál es exactamente la diferencia? Bueno, primero tenemos asíncrono, y asíncrono es abreviado de asíncrono. Este es un término al que volveremos más adelante. Pero para este caso de uso en particular, async descargará este script junto al resto de nuestro contenido HTML. Pero para entender lo que asíncrono está haciendo en realidad, necesitamos mirar un poco más adelante. Ahora imagina, en lugar de tener nuestro guión en nuestra página de índice dentro del editor de texto como lo hacemos aquí, imagina que esto fue un sitio web en vivo. Si este fuera un sitio web en vivo, nuestros guiones y nuestra página de índice se almacenarán en un servidor web. Cuando el usuario visite nuestra página por primera vez, deberá descargarse el contenido de estos archivos. Cuando marcamos esto como un script asíncrono, este código JavaScript se descargará junto a nuestro contenido HTML. Esto significa que en lugar de bloquear nuestro código HTML, el HTML todavía se descarga y luego se renderiza dentro del navegador, por lo que no debería causar mucha desaceleración con nuestro contenido. Entonces se ejecutará el contenido de nuestro script cuanto se termine de descargar todo. Esto tiene sus ventajas. Es realmente útil ya que no está bloqueando la carga de nuestro contenido pero hay un inconveniente. Ves esto, voy a enlazar a tres guiones separados. Copiemos y peguemos esto dos veces más. Esto puede ser el script 2, y el script 3, y por supuesto necesitamos crear dos nuevos archivos dentro de nuestra carpeta Async y diferir. Segundo, scripts2.js. También guión 3 en nuestro guión 1. Para mayor claridad aquí, podemos cambiar esto para que sea el número 1, y luego guardar este archivo, y copiar esta línea de código en nuestro script 2. Pega esto dentro de aquí y podemos cambiar esto al número 2. Guarda esto en el mismo para el número 3. Ahora con nuestros tres guiones vinculados justo aquí, en teoría, ¿qué debemos esperar que suceda? Bueno, probablemente esperaríamos que este el número 3 dentro de aquí, porque cargamos el guión número 1, lo que cambiará el contenido para ser el número 1. Después el script 2 que cambiaremos esto para ser el número 2, y luego el número 3 anulará esto para ser número 3. Bueno, echemos un vistazo a esto. Podemos guardar este archivo y también el navegador, refrescar. Vemos el número 3 como se esperaba. Tratemos de refrescar un par de veces más. Si seguimos refrescando varias veces, eventualmente veremos un número diferente. Eventualmente vemos este valor de 2 porque estamos solicitando en orden los tres de estos guiones. Pero a pesar de que estamos solicitando estos tres scripts en orden, no significa que siempre vas a volver del servidor en este orden en particular. Pero tal vez estés pensando, ¿por qué debería siquiera importarme esto? De la misma manera que script1.js se basó en el contenido del HTML para estar presente, a veces un script puede depender también de otro script. Por ejemplo, nuestro tercer archivo JavaScript puede depender algún código de los dos primeros archivos para estar disponible primero, y si esto se descarga primero antes de los dos anteriores, esto provocará entonces un error. Ciertas bibliotecas JavaScript de frameworks también tendrán múltiples scripts que necesitamos descargar, y éstos deberán ser descargados en orden. Por ejemplo, en versiones anteriores del marco Bootstrap, solíamos confiar siempre en el marco jQuery también. Para el primer script, necesitaríamos descargar la biblioteca jQuery. Entonces sólo después de que esto haya terminado de cargarse, entonces descargaríamos la biblioteca Bootstrap, que entonces estaba haciendo uso de las características de jQuery. Cuando necesitamos que nuestros archivos de script se ejecuten en un orden particular, es posible que asíncrono no siempre sea la mejor opción a buscar. Aplazar, por otro lado, ejecutará los scripts en el orden en que aparecen y lo hará después de que todos los scripts de la página y también se haya cargado el contenido de la página. Cambiemos esto para que sea diferido en los tres de nuestros guiones. Si seguimos refrescando tantas veces como queramos, sólo deberíamos ver alguna vez el último valor de tres. Si eres nuevo en JavaScript, no espero que recuerdes todos estos, y puede que no las necesites todas con tanta frecuencia. Pero también tendrás este video y también el código del proyecto aquí si necesitas esto como referencia en el futuro. También recuerda más comúnmente también, también tenemos la opción de colocar este script justo al final de la sección del cuerpo, para que no bloquee la carga del resto del HTML. igual manera que un recapitulación antes de seguir adelante, tenemos las palabras clave asíncrona y diferir las cuales puedes agregar como atributos a nuestros scripts. Al usar asíncrona, esto descargará los scripts junto con el resto del contenido HTML y el navegador intentará renderizar la página mientras se descarga esto. Una de las ventajas es que no bloqueará que el resto del contenido se renderice, y en cuanto el archivo haya terminado de descargar, entonces ejecutará el script en su interior. También tenemos que recordar si estamos usando múltiples scripts asíncros, no hay garantía de que se ejecuten en el orden que esperamos que lo hagan. Async sigue siendo una buena opción si tenemos múltiples scripts que no dependen entre sí para cargar en un orden particular. Aplazar, por otro lado, cargará múltiples scripts, y sabemos que se va a conservar el orden. Si nuestros scripts se ejecutarán tan pronto como tanto el contenido de la página como el HTML como estos scripts hayan terminado de descargar, entonces todo esto significa que deberíamos preferir usar un script diferido cuando tengamos múltiples scripts que necesitarían ejecutarse en orden. Esta es la clave para llevar que async podría usarse cuando tenemos múltiples scripts que no necesitan ejecutarse en un orden particular. Deberíamos usar diferir cuando necesitemos que estos scripts se ejecuten en un orden particular. De nuevo, es posible que no necesites usar estas dos palabras clave muy a menudo, pero también es realmente importante estar al tanto de todas estas partes de JavaScript en caso de que te encuentres con éstas en el futuro. A continuación, vamos a alejarnos de la carga de JavaScript y echar un vistazo a cómo podemos trabajar con cadenas. 7. Trabajar con cadenas de caracteres: Ahora saltemos a la Lección 3 de esta sección que está Trabajando con Cuerdas. Ya deberíamos saber qué hacer. Podemos abrir la página Índice. Entonces si abrimos esto dentro del navegador, copie el camino a éste, y luego reemplace el actual dentro del navegador. Hasta ahora cuando hemos estado configurando el texto interno, y echaremos un vistazo a este ejemplo aquí, que es igual a los que hemos mirado en el pasado. Seleccionamos este título, justo arriba, establecemos el InnerText para que sea igual a otra cosa que originalmente no estaba allí. Aquí empezamos con trabajar con cuerdas y luego reemplazamos esto por otra cosa, que vemos dentro del navegador. Hasta el momento hemos estado agregando estos entre las citas simples y en JavaScript, esto es lo que se conoce como una cadena. Una cadena es básicamente algún texto, puede ser un solo carácter como una letra simple como una A, puede ser una sola palabra, puede ser una frase o incluso un párrafo. También podemos colocar esto dentro de las comillas simples o dobles, no importa, ambas funcionarán perfectamente bien para un ejemplo así. No obstante, aunque habrá un problema si una de las palabras dentro contiene el mismo carácter, como una comilla simple o doble. Si volvemos esto a comillas simples, así como así, y entonces podemos cambiar esto para que sea tal vez, vámonos. Esto también tiene un apóstrofo el cual es el mismo símbolo que las comillas circundantes, inmediatamente podemos ver el editor de texto ha resaltado esto y cambiado el color para hacernos saber que hay un problema. Lo que efectivamente está sucediendo aquí es que estamos haciendo coincidir una cadena de las dos primeras citas. Podemos ver este es el color original, y después vemos un error. Podemos ver esto si guardamos este archivo y refrescamos el navegador, podemos ver en la consola tendremos un identificador inesperado, ya que está esperando que toda nuestra cadena solo esté contenida entre estas cotizaciones. Hay un par de formas en las que podemos lidiar con esto. En primer lugar, podríamos cambiar las cotizaciones externas para que sean lo contrario y hacerlas dobles. Por lo tanto, agrega el doble al final y también al principio también. Ahora, esta cadena estará contenida entre las comillas dobles y el apóstrofo será completamente válido. Guarda y refresca, y ahora veremos el apóstrofe dentro la cadena y no vemos errores dentro de la consola. Alternativamente, podemos usar lo que se llama escapar. Si los cambiamos de nuevo a las comillas simples lo que estaba causando un error, podemos hacer uso de una barra invertida justo al frente y esto entonces escapará del carácter que desea luego mostrar. Esto le dirá al navegador que luego renderice esto como parte de la cadena. Probemos esto. Esto funciona exactamente igual también. Escapar así también funciona para otros personajes como las comillas dobles. Si nos escapamos así, no deberíamos ver ningún problema. Digamos esto, y eso está completamente bien. Pero y si realmente quisiéramos mostrar esta barra invertida también como parte de la cadena. Para esto, necesitamos agregar una doble barra invertida para escapar de esto. El primero se renderiza como parte del texto, pero la segunda barra invertida se utiliza para escapar de esta comilla doble. Si tenemos mucho texto en lugar de sólo un par de palabras como las que tenemos aquí, a veces queremos dividirlo en múltiples líneas. Para ver un ejemplo de esto, podemos salir de nuestro script y podemos generar algún texto de muestra dentro de nuestro Código de Visual Studio. Para ello, escribe la palabra Lorem, L-O-R-E-M, pulsa “Enter”, y luego esto nos dará algún texto de muestra con el que trabajar. Copiemos todo esto, de hecho, cortamos esto fuera de lugar y lo pegamos entre nuestras cotizaciones. Ahora si guardamos esto y comprobamos esto en el navegador, ya que tenemos mucho texto aquí, el navegador lo envolverá automáticamente nuevas líneas dependiendo del ancho del navegador. No obstante, aunque como desarrollador, si quisiéramos controlar exactamente cuándo esto rompió en una nueva línea como esta palabra justo aquí, quizá queramos que esto comience en una nueva línea. Para ello, podemos usar una barra invertida seguida de la letra n tantas veces como queramos dentro de aquí. Encontremos la palabra que estábamos buscando cuál es esta justo aquí y podemos usar la barra invertida seguida n. dale a esto un guardar y refrescar el navegador. Esto luego romperá esto en una nueva línea, y puedes usar esto dentro de esta cadena tantas veces como quieras. Algo que hay que tener cuidado es, no podemos tener una cuerda sobre múltiples líneas. A lo que me refiero con esto es en lugar usar esta barra invertida y n, si solo golpeara “Enter” y colocara esto en una nueva línea. Podemos hacerlo tantas veces como quisiéramos , así como aquí. Podemos ver que el editor de textos nos está advirtiendo de un tema. Para una cadena de textos como este, no podemos romper esto en múltiples líneas y podemos ver esto en el navegador si refrescamos esto, vemos un token inválido o inesperado. tenemos un par de maneras diferentes en las que podemos Sítenemos un par de maneras diferentes en las que podemosacercarnos para solucionar esto. Una de las formas más largas de hacerlo es convertir cada una de nuestras líneas de texto en su propia cadena. Podemos hacerlo así y se puede ver que este es un camino bastante largo haciendo esto. Entonces también necesitaríamos usar el símbolo más entre cada línea para unir esto a la siguiente. Por simplicidad, solo haremos que esto sea como líneas libres, refrescar y esto todo funcione igual que antes. O hay una forma más moderna que es usar lo que se llama una cadena de plantilla. Esto reemplaza las cotizaciones con backticks. Vamos a deshacer esto y reincorporarlo de nuevo al error original. De lo que podemos hacer en lugar de tener comillas simples al principio y al final, podríamos sustituirlas por lo que se llama backtick. El retrotick se encuentra en tu teclado y es un símbolo justo aquí. En mi teclado particular, se encuentra junto a la tecla Mayús izquierda. De inmediato el editor de texto ahora eliminará los errores y podemos guardarlo, y todo esto debería funcionar perfectamente bien dentro del navegador. Se puede ver que también se preserva los saltos de línea, así que justo después de Lorem ipsum, tenemos un descanso, entonces tenemos nuestra segunda línea que es ésta justo aquí, después tener cada línea preservada justo debajo de ésta. Estos literales de plantilla se introdujeron a JavaScript en ES6 o ES2015, y nos permiten escribir cadenas multilínea junto con algunos otros beneficios como insertar variables, que tomaremos un mira más tarde. Después de este curso, también profundizaremos en las cuerdas y descubriremos algunas de las propiedades y métodos disponibles que podemos utilizar. 8. Almacenar datos con variables: Eso se acabó para este video, se dirigió a la siguiente carpeta. Vamos a ver el número 4 que está almacenando datos con variables. Entonces vamos a abrir este archivo y también copiar la ruta para el navegador también, pegue esto en. Veremos el título de las variables puesto en la parte superior. Ups. Ahora en este curso hemos estado estableciendo o cambiando valores, como actualizar este título justo aquí. En JavaScript la mayoría de los demás idiomas también, regularmente tenemos la necesidad de almacenar nuestros datos. JavaScript nos proporciona tres formas principales de hacer esto. Empecemos por mirar la forma tradicional de almacenar datos en JavaScript, que es la variable. Podemos crear una variable usando la palabra clave var, así como ésta, seguida de un nombre para esta variable. Entonces llamemos al mío nuevo texto. Esta es una forma de hacer referencia a esta variable en el futuro. Agregar un nombre como este se llama declaración ya que estamos declarando una nueva variable. Se puede pensar en una variable como un contenedor de almacenamiento y este nombre que le damos, es algo así como la etiqueta del frente para que podamos encontrarla fácilmente en el futuro. También tiene sentido ser descriptivo al nombrar variables. Debe reflejar los datos que contiene. Además, este nombre no puede contener espacios como este. También debe comenzar con una letra, un guión bajo o un símbolo $. Si agregamos algo que no está permitido, como una barra inclinada hacia adelante, generalmente un editor de texto moderno como este recogerá en esto y nos avisará de este error. Entonces podemos usar este símbolo igual para agregar un valor que desea almacenar dentro de esta variable, como nuestra cadena de texto. Dado que esto es una cadena, agregamos esto en las citas, digamos nuevo texto de variable. Entonces lo que hemos hecho aquí es que hemos usado esto igual para asignar este valor a la derecha para este nombre de variable sobre a la izquierda. Agregar un valor a nuestra variable al igual que esta se conoce como inicialización. No necesitas recordar estas palabras clave, pero solo quiero hacerte consciente de que estas existen. Entonces esto está inicializando una variable y antes acabamos de tener la declaración variable. Entonces para hacer uso de este texto, todo lo que necesitamos hacer es pasar el nombre de la variable, así como esto, se podría decir guardar y refrescar. Ahí está nuestro nuevo texto el cual almacenamos dentro de la variable. Bueno, y si también quisiéramos cambiar este valor el cual se almacena dentro de esta variable. Nosotros también podemos hacer esto fácilmente. Ya que nuestra variable ya está creada. Lo que necesitamos hacer esta vez es acceder al nombre de la variable sin la palabra clave var. El programa ya sabe que esta es una variable ya que declaramos lo anterior, por lo que no se requiere la palabra clave var. Nuevamente, usando los iguales, podemos actualizar esto con un nuevo valor. Digamos texto actualizado. Dale a esto un guardado y echa un vistazo a esto en el navegador. Ahí está nuestro texto actualizado ahora mostrando. Por lo que el orden aquí también es importante, ya que el código se lee de arriba hacia abajo. Entonces la primera línea, creamos nuestra línea variable hasta que la actualizamos. Entonces el título se cambia a nuestro nuevo texto actualizado. Si tuviéramos que hacer algo como esto y mover la actualización para estar por encima donde declaramos nuestra variable. Veamos qué pasa cuando guardamos y actualizamos. Ya no vemos la versión actualizada dentro del navegador. Esta es a menudo la razón por la que veremos declaraciones variables sobre la parte superior del guión. Por lo que no causará ningún problema si empezamos a actualizar esto más adelante en nuestro archivo. Las variables también pueden contener otros tipos de datos, no solo cadenas, y descubriremos más tipos de datos muy pronto. Pero por ahora hay dos tipos más de variables junto a esta palabra clave var, que vamos a ver. Ambos se introdujeron con ES2015. El primero de éstos es la palabra clave let. En la superficie, deja trabajar igual que var. Puede contener un valor y también podemos actualizar este valor cuando se requiera. Entonces si cambiamos var para que se deje, guarde y actualice. Ahora vemos el texto actualizado, igual que hicimos con la palabra clave var. Todavía hay una diferencia entre la palabra clave let y var. Todo esto se reduce a algo llamado alcance. Alcance se relaciona con cómo podemos acceder a estas variables y se agregan algunas restricciones sobre cómo podemos acceder a los valores almacenados en su interior. Se tiene más información sobre alcances más adelante en el curso, donde aprenderás todo sobre esto con más detalle. Pero sí necesitamos aprender un poco más sobre JavaScript primero antes de que éstos se vuelvan realmente claros. A continuación, tenemos la palabra clave const, que es abreviatura de una constante. Se puede pensar en esto como mantener un valor constante que no cambiará. Si guardamos esto y actualizamos el navegador, vemos que esto arrojará un error dentro de la consola. Vemos el mensaje de asignación a variable constante. Obtenemos esto porque al igual que var y let, esto también puede almacenar un valor, pero es más un valor de sólo lectura. El contenido interior no está destinado a actualizarse, lo que estamos haciendo justo aquí. Entonces si tuviéramos que eliminar esta línea así como esta y luego actualizar el navegador, esto ahora se deshace del error y todavía vemos nuestros contenidos variables. Por lo que el mensaje de error de la consola antes era la asignación a una variable constante. Entonces justo antes de intentar actualizar esto, hemos visto que el mensaje era asignación a variable constante. Es palabra clave de asignación aquí, que es la clave. Asignación es solo una palabra de fantasía que llegamos a una variable sobre pasarlo un valor igual a este. Tendremos esta era porque estamos tratando de reasignarlo con este valor justo debajo y tener esta const ahora introducida en el lenguaje JavaScript es realmente bueno porque significa que nosotros pueden almacenar nuestros valores, que sabemos que nunca pretendemos cambiar. Esto puede detener cualquier error o error en nuestro código. Si alguien cambia accidentalmente un valor más adelante en el código. Pero hay algo que puede ser confuso para los principiantes y rodea crear algo llamado un objeto usando const. Si eliminamos estas dos líneas de código, podemos crear una nueva constante llamada Persona. Tendremos más detalle sobre los objetos muy pronto. Pero por ahora se puede pensar un objeto como una colección de piezas de datos. Por lo que una persona puede tener múltiples piezas de datos como una edad, un nombre, una altura. Todos estos pueden almacenarse dentro de estos tirantes rizados. Todas estas piezas de datos se almacenan dentro de múltiples propiedades llamadas pares de valores clave. Por lo que la clave es el nombre de los datos, como el nombre de una persona. El valor es nombre real. Separados por una coma podemos agregar una segunda clave llamada likes, y luego un valor de un alimento favorito. Podemos seguir adelante con tantos valores dentro de aquí como nos gustaría. Después podemos acceder a cualquiera de estas propiedades accediendo primero al nombre de la constante y luego usando el punto para seleccionar cualquiera de nuestras propiedades como el nombre o me gusta. Probemos esto, refrescamos vemos el nombre de Chris y luego persona al gusto es una forma de acceder a la segunda propiedad de la pizza. Entonces, aunque este objeto es una constante, no es estrictamente inmutable, lo que significa que nunca cambiará. En realidad podemos actualizar la propiedad así como esto. Podemos acceder a la persona constante y acceder a la clave llamada likes. Pongo esto a cualquier cosa como plátanos. Vamos a guardar esto y todavía tenemos a la persona en punto le gusta renderizar al navegador, refrescar. Ahora podemos ver hemos actualizado nuestras constantes con un valor de plátanos. También podríamos agregar propiedades adicionales. Entonces una vez que ya no existen, podemos decir persona puntar pelo y poner esto a un color, luego mostrar esto dentro del navegador. Entonces podemos ver aquí que podemos actualizar las propiedades dentro de un objeto. Pero qué pasa si tratamos de cambiar por completo a la persona para que sea un tipo de datos diferente, como una cadena. Vamos a cambiar esto para que sea un nombre como Chris. Refresca esto. Ahora vemos el mismo mensaje de error que teníamos antes, que es asignación a una constante. Entonces como puedes ver, una constante que sostiene un objeto como este todavía puede tener sus valores mutados en su interior. Simplemente no podemos reasignar su valor original a tal vez un número o una cadena. Por esta razón, a menudo es recomendable evitar la confusión utilizando sólo const para valores simples como una cadena o un número. Entonces sabemos con certeza que este valor nunca cambiará. Entonces solo para recapitular con todo lo que hemos aprendido en este video, tenemos tres palabras clave diferentes llamadas var, let, y const, que todos nos permiten declarar una nueva variable que es amable como una contenedor de almacenamiento para nuestros datos. Al usar la var y las palabras clave let, opcionalmente podemos asignar un valor a estos nombres. También se pueden actualizar o reasignar los valores dentro con un nuevo valor. También hay algunas consideraciones de alcance y hospedaje que cubriremos más adelante en el curso cuando tengamos un poco más de comprensión. Al usar la palabra clave const, esto también creará una nueva variable o contenedor de almacenamiento, pero el valor no se puede reasignar. Como principiante, también puede ser confuso al usar const y un objeto porque las propiedades del objeto se pueden actualizar, o también podemos agregar otras nuevas también. También hemos mencionado algunas palabras clave en este video también. No hay que recordar todos estos por el momento. En primer lugar, teníamos una declaración. Esto es cuando creamos o declaramos una nueva variable sin pasarle un valor. Entonces, por ejemplo, podríamos decir nombre var. Después inicializamos esta variable cuando le pasamos un valor como es igual a Chris. Asignaciones. Esto es cuando pasamos o asignamos un valor a una variable, como este ejemplo hacia abajo en la parte inferior, donde asignamos el valor de 37 a la variable edad. Entonces estas variables van a ser algo que usamos mucho. Por lo que conseguirás mucha práctica con estos a través de este curso. A continuación, vamos a seguir con las variables y echar un vistazo a cómo podemos mezclarlas con cuerdas. 9. Mezclar cadena de caracteres con variables: Ahora entendemos qué es una cadena en JavaScript y también sabemos cómo almacenarlas en contenedores llamados variables. Pero, ¿y si quisiéramos combinar estas dos cosas agregando una variable a una cadena? Esto es completamente posible usando JavaScript y hay diferentes formas de hacerlo. Pasemos a nuestros archivos, que es el número 5, mezclando cadenas con variables. Voy a abrir esto dentro del navegador. Dentro de esta página de índice, tenemos nuestro nivel 1 encabezamiento arriba en la parte superior con el ID de título. Después tenemos dos constantes abajo, tenemos este nombre y también una constante me gusta también. Por último, seleccionamos nuestro título y actualizamos el texto interno. ¿ Y si quisiéramos actualizar este título y también mezclar estas dos variables? El modo de hacerlo, quizá queramos que la cadena de texto diga mi nombre es. Entonces después de esto, digamos que también queríamos insertar esta variable de nombre. Si guardamos esto y actualizamos, vemos mi nombre es nombre, por lo que vemos el texto de nombre en lugar del contenido interno de esta variable. El motivo por el que esto sucede es porque como todo esto está dentro de las citas, todo se considera parte de la misma cadena de texto, no leído como variable. Necesitamos salir de esta cadena y agregar o anexar el nombre de la variable a la cadena. Hacemos esto igual que miramos en un video anterior con el símbolo más. Lo que tenemos que hacer es eliminar el nombre de la variable del final, usar el símbolo más y luego fuera de la cadena, podemos agregar este nombre de variable. También podríamos dejar un espacio al final de la cadena, por lo que tenemos un espacio entre la cadena y también la variable, luego pasar al navegador y refrescar. Podemos ver ahora nuestro nombre se ha actualizado con el valor de la variable. También podemos agregar la segunda variable a esta cadena también, al igual que hicimos aquí. Pero luego usa el símbolo más, abre la cadena en un espacio, y diremos y me gusta, entonces tengo un espacio al final, y luego el símbolo más para agregar la variable de likes. Echemos un vistazo a esto. Me llamo Chris y me gusta la pizza. Todo eso funciona perfectamente bien, tenemos nuestras variables mezcladas en una cadena. También hay otra forma de hacerlo, que se introdujo en ES 2015. Esto es para usar las cadenas de plantilla. Las cadenas de plantilla son igual a las que usamos en un video anterior cuando combinamos el texto sobre múltiples líneas. Lo que necesito hacer es reemplazar estas cotizaciones por las backticks. Quitemos todas estas citas y también podemos quitar los símbolos más, dejando sólo el texto en su interior. Entonces lo que tenemos que hacer es colocar todo esto dentro de los backticks. El segundo paso es marcar qué parte de la cadena es variable. Sabemos desde antes, si solo guardamos esto y actualizamos, no vemos el contenido de estas dos variables pero lo que tenemos que hacer es colocar frente a esto un símbolo $ y luego el nombre de la variable dentro del rizado llaves, lo mismo para nuestros gustos, $ symbol, y envuelve esto dentro de los tirantes rizados. Ahora esto debe leerse como el contenido de nuestras dos variables. Estas cadenas de plantilla entre las comillas también se pueden almacenar en su propia variable también. Si fuéramos a cortar esto fuera de lugar, crear una nueva variable, digamos que la cadena es igual a este valor que acabamos de cortar. Podríamos entonces pasar el nombre variable de cadena. Todo esto funciona igual que antes pero esta vez, todo combinado en una sola variable de cadena. 10. Tipos de datos: números: En cualquier lenguaje de programación, tenemos lo que se llama tipos de datos. Los tipos de datos, según suenan, se refieren al tipo de datos con los que estamos tratando. Hasta el momento, nos hemos centrado principalmente en el tipo de datos de cadena. Pero también hay otros, JavaScript es un lenguaje vagamente tipado o dinámico, que básicamente significa que a nuestras variables no les importa qué tipo de datos contienen, pueden contener una cadena o como vamos mirar durante este video, algo más, como un número, y también podemos cambiar el tipo de datos de una variable a cuando reasignamos un nuevo valor. Esto es a diferencia de algunos otros lenguajes de programación como Java, donde necesitamos especificar qué tipo de datos contendrá primero nuestra variable. Dentro de esta lección actual tenemos los tipos de datos, números, video, que es el Número 6. También asegúrate de abrir esto dentro del navegador también. Al tratar con un lenguaje como Java, es posible que tengamos que declarar una variable como esta. Podemos darle a nuestra variable un nombre llamado número, y establecer esto igual a una cadena de cinco. Cuando escribimos código así como este, se trata de código Java, esto es lo que se llama un lenguaje fuertemente tipado, ya que este tipo de datos debe declararse por primera vez. No obstante, aunque usamos en JavaScript, que no le importa qué tipo de datos contiene esta variable. A diferencia de Java, no declaramos qué tipo de datos vamos a contener, simplemente decimos qué tipo de variable va a ser. Decimos let number es igual a 5, y esto por supuesto es una cadena porque está rodeado dentro de las cotizaciones. Pero, ¿qué tal si hiciéramos esto? Digamos que en la siguiente línea, entonces reasignamos este valor de número para que sea igual a un número real como cinco. Es así como establecemos un número en JavaScript. No rodeamos ninguna de las cotizaciones. Ahora podemos usar este número dentro de aquí. Ahora podemos poner el número en la pantalla. Digamos esto y veamos qué pasa. Refresca, y ahora el valor de esto es cinco. Esta variable numérica ha cambiado a pesar de que usamos en un tipo de datos completamente diferente. Este tipo de datos de número puede ser un número entero al igual que este, y podemos escribir esto con o sin decimales. Podemos dar salida a esto. Si vienes de un lenguaje de programación diferente donde puede haber múltiples tipos de números como double float, o integer, este no es el caso aquí. Los números JavaScript siempre se almacenan como un formato de punto flotante de doble precisión. Si sí quieres saber más sobre los detalles técnicos detrás de esto, puedes encontrar el enlace aquí en la página. Al trabajar con números, JavaScript también puede calcular el valor y almacenar esto dentro de una variable también. Por ejemplo, si le asignáramos a este número el valor de 5 más 10, ahora debería generar el valor de 15. Haremos el cálculo primero y luego asignaremos esto a la variable. Pero, ¿qué crees que pasará si sumáramos un número y una cuerda? Bueno, vamos a averiguarlo. Diremos let Number 1 igual a ser una cadena, y luego dejamos Number 2, esto puede asignar el valor de 15. Ahora en lugar de emitir el valor de número, vamos a dar salida al valor de Número 1, agregarlo a la variable de Número 2, sobre al navegador. Vemos nuestras dos variables, tenemos la cadena de 5 y luego el número de 15. ¿ Es esto un número o es una cadena? Bueno, cuando descubro un número y una cadena, en JavaScript el resultado es una cadena. A pesar de que aquí tenemos un número, esto se clasifica como una cadena completa. Podemos probar esto mediante el uso de operador llamado typeof, poner estos fuera de lugar, y usamos typeof. Después dentro de los corchetes, pega estos de nuevo dentro. Veremos qué tipo de datos se devuelven desde dentro de estos corchetes. Podemos usar esto con cualquier otro tipo de datos 2 y nos hará saber con qué tipo de datos estamos tratando. Guarda y refresca y vemos que se trata de un tipo de datos de cadena. No obstante, sin embargo, si acabáramos de dar salida al Número 2, el resultado sigue siendo un número. Este tipo de datos es una herramienta realmente útil si no estamos seguros con qué tipo de datos estamos trabajando. También ten en cuenta aunque tengamos un número almacenado dentro de citas como esta, que tiene un Número 5, esto también se clasificará como una cadena 2. Entonces cualquier cosa entre comillas es una cadena, cualquier número que no esté entre comillas, se clasifica como un número. Tanto el tipo de datos de cadena como también el número se considera lo que se llama un tipo primitivo de JavaScript. primitivas son tipos de datos que no se clasifican como un objeto. Tampoco tienen ningún método que sean acciones que se puedan realizar en un objeto. Pero no te preocupes por los objetos y métodos todavía, tendremos mucho más detalle sobre estos a lo largo de este curso. Lo principal a entender por ahora es que las primitivas son los tipos de datos más simples en comparación, y estos incluyen cosas como la cadena y también números. igual manera que un resumen de lo que hemos visto en este video, tenemos tipos de datos que es el tipo de datos con el que estábamos trabajando, y actualmente hemos mirado el tipo de datos de cadena y también el número. También mencionamos fuertemente el tipo, que es un tipo de datos que necesitamos declarar por delante al crear una variable. En otros lenguajes como Java, tendríamos que declarar que una variable es un cierto tipo de datos como una cadena o un número cuando la creamos. JavaScript por otro lado está tipeado de manera suelta, por lo que a las variables no les importa qué tipo de datos contienen, y también podemos reasignar estos datos con un tipo de datos diferente. Por ejemplo, podríamos crear una variable que es una cadena, y luego cambiarla o reasignarla más adelante con un tipo de datos de número. Primitivas, esto es lo que acabamos de ver antes, que es un tipo de datos que no se clasifica como un objeto. primitivas son generalmente un tipo de datos más simple, y descubriremos el otro tipo de objeto en algunos videos posteriores. Esta es una introducción básica a los números JavaScript, son una parte real importante y fundamental de JavaScript. 11. Tipos de datos: booleanos, nulos e indefinidos: En el video anterior, cubrimos tipos de fechas JavaScript algo primitivas que incluyen el número y también la cadena. Ahora vamos a ver algunos tipos de datos más primitivos disponibles en JavaScript. Esto va a ser un booleano en valor nulo y también indefinido. Asegúrate de dirigirte a la carpeta de lecciones actual que es el número 7, y los tipos de datos booleanos, null e indefinido. Ya tengo esto abierto y también abierto en el navegador también. Al jugar con códigos como este, tenemos algo disponible para probar llamado registro de consola. Entre las etiquetas de script todo lo que necesitas hacer es escribir console.log y luego abrir los corchetes, así como esto. Trabajamos brevemente en la consola antes y este registro nos permitirá emitir un cierto valor a la consola dentro del navegador. Por ejemplo, podemos decir que es 10 mayor que cinco y si guardamos esto y luego hacemos clic derecho e inspeccionamos para abrir las Herramientas de Desarrollador, haga clic en la pestaña Consola, actualice. Esto devuelve el valor de true. El registro de la consola generará cualquier valor dentro de esta imagen de consola, grandes pruebas y rápidamente descubriendo el resultado o el valor. También tenemos un nuevo operador que es el menor que, guarde esto. Esto sería lo contrario, lo cual es falso. Estos valores verdaderos y falsos son el tipo de fechas de booleano. Con Booleano un verdadero y un falso son los únicos dos resultados, por lo que es realmente útil para revisar cosas así. Por ejemplo, en el proyecto Speedy Chef que tienes por venir, vamos a tener una variable llamada GameStarted. Antes de que se inicie el juego, este booleano se establecerá como falso y luego cuando iniciemos el juego, reasignamos esta variable para que sea verdad. Esto nos permite en cualquier momento del juego poder comprobar si el juego se inicia y tener ciertas características disponibles. Por ejemplo, tendríamos algo como esto, podríamos configurar una variable. Voy a darnos algún nombre como GameStore esto es igual iniciar para ser falso y luego dentro de nuestro log de consola, primer lugar, podemos comprobar el tipo de datos de esta variable usando el tipo de propiedad. Refresca y veremos Booleano justo dentro de aquí. ¿ Cómo podemos usar esto en una situación real? Bueno, los valores booleanos a menudo se usan junto con una declaración if. Una declaración if se ve así, tendremos la palabra clave if, abriremos los corchetes así y luego abriremos algunas llaves. Ahora verás este patrón seguido mucho dentro de JavaScript. Tenemos ciertas palabras clave, tenemos algunos corchetes redondos y luego tendremos unas llaves donde queremos ejecutar nuestro código, por lo que verás mucho estoa por lo que verás mucho esto medida que avanzamos por el curso. Pero en particular para esto si declaraciones lo que vamos a hacer, vamos a comprobar si algo es verdadero o falso. En nuestro caso, queremos comprobar si GameStarted es igual a verdadero o falso. Lo que hacemos, pasamos esto dentro de aquí y si esto resulta a cierto, entonces se ejecutará el código dentro de aquí. En mi caso, sólo voy a poner un simple registro de consola con el texto de GameStarted. Ahora si guardamos esto, entonces refrescamos el navegador, no vemos nada dentro la consola porque esto no es cierto. No obstante, volvamos esto para que sea cierto, actualicemos, y ahora se ha ejecutado nuestro registro de consola. Por supuesto, vamos a cubrir si las declaraciones con más detalle pronto pero así es como pueden funcionar con un simple valor booleano. Pero si tenemos también una segunda variable, bueno, PlayerName. Diga let PlayerName es igual a Chris y luego cambiamos nuestra declaración if para comprobar el nombre de este jugador. Tenemos un juego PlayerName, vamos a iniciar sesión en la consola. el mensaje de nombre de usuario. Demos un paso atrás y pensemos en lo que estamos haciendo aquí. Hacemos el check in. En primer lugar, la última vez comprobaremos si el GameStarted es igual a verdadero. Este era un valor booleano simple, sin embargo aunque para este PlayerName, esto es igual a una cadena. ¿ Crees que esto resultará verdadero o falso? Bueno, vamos a guardar esto y comprobarlo en el navegador y vemos que esto corre dentro de la consola. Bueno, la razón por la que vemos esto dentro la consola es porque generalmente una sentencia if o un booleano resultará a verdadero si existe un valor. Aquí tenemos un valor de Chris, así que esto definitivamente existe. Veamos qué sucede si eliminamos este nombre y dejamos esto como una cadena vacía, guardar y refrescar. Ahora bien, esto debe estar resultando en falso. Algo a tener en cuenta aquí que tener un valor vacío como nuestra cadena vacía, así como esta, no debe confundirse con no tener un valor en absoluto. Una variable sin valor es otro tipo de datos primitivo llamado indefinido. Si no tenemos ningún valor asignado a esta variable y si tuviéramos que eliminar esta cadena así como esta y entonces en su lugar, haremos un registro de consola para el PlayerName y también eliminaremos esta sentencias if, por lo que no pudimos ejecutar este registro de consola primera vez, guardar y más al navegador vemos este valor de indefinido. Como se mencionó anteriormente, este es otro tipo primitivo como string, number, y booleano y este indefinido se muestra porque tenemos una variable que no tiene un valor asignado a ella. Esto fue como antes cuando miramos $0 dentro del navegador. Si inicialmente escribimos $0, cuando no tenemos ningún elemento seleccionado en la página, recuperamos el valor de indefinido. El tipo de datos final que vamos a ver en este video también es primitivo y este es el valor de null. Null también indica que algo falta también. Si establecemos nuestra variable de PlayerName para que sea igual a null y luego actualizamos el navegador, como se esperaba recuperamos este valor de null. Tuvimos una breve mirada a los objetos en un video anterior, y null está relacionado con estos objetos. Indica que este objeto está vacío y a menudo cuando se trabaja con bases de datos o servicios back-end, un ejemplo común de esto es cuando se solicitan algunos datos de usuario. Si el usuario está conectado, recuperamos un objeto que contiene toda esa información de los usuarios. Si no están conectados sin embargo, a menudo veremos nulo ya que el objeto de usuario estará vacío. Miramos tres tipos de datos diferentes en este video, hemos mirado a Boolean para empezar lo cual es un simple valor verdadero o falso. Este tipo de datos primitivo es realmente útil y a menudo se ve combinado con una declaración if. Tenemos indefinido, nuevo un tipo de datos primitivo que indica que falta algo. En nuestro ejemplo, echamos un vistazo a una variable que tiene un valor nulo asignado a ella. Por último, también descubrimos null, que de nuevo es un tipo de datos primitivo y es más específico que indefinido y se refiere a un objeto que es la ausencia de cualquier valor. Se puede ver en la parte inferior aquí que indefinido es un resultado más genérico y null es más específico de un objeto. 12. Comentarios, puntos y comas y ASI: Si has trabajado en JavaScript antes, o si estás buscando ejemplos de código en línea, posible que notes que a veces se usan puntos y comas y a veces no. Los programas JavaScript se componen de múltiples sentencias, las cuales se leen de arriba a abajo del archivo. Sentencia es básicamente una instrucción, como crear una declaración variable del código para ejecutarse dentro de una sentencia if. bien se requieren puntos y comas en programas JavaScript, si optamos por no escribirlos manualmente, el analizador de JavaScript los agregará en fotos automáticamente, donde se requieran, los puntos y comas al final de cada sentencia, y el proceso se denomina inserción automática de punto y coma. Esto no significa que simplemente podamos olvidarnos de usarlos por completo. Hay casos en los que aún necesitamos agregarlos manualmente. Por ejemplo, agreguemos algunas variables y echemos un vistazo a los resultados. Te darás cuenta de que estoy en el video número 80, que es comentarios, punto y coma, y ASI, y además tener esto abierto dentro del navegador. Bajar a la sección de guiones. Lo que vamos a hacer es crear dos constantes. En realidad las constantes no importan en este momento. Sólo voy a agregar un nombre, luego una segunda constante, que se puede aprender en JavaScript. Este es un valor booleano de verdad. Entonces dentro del log de la consola hemos generado variables individuales en el pasado. Pero también podemos agregar una coma y generar el valor de ambas variables. Guarda el archivo y dirígete a la consola. Refresca y vemos nuestros dos valores variables. Nada inesperado aquí, obtenemos probablemente lo que esperábamos, que son nuestras dos variables. Los registraremos en la consola. Pero, ¿qué pasa si agregamos estas variables a la misma línea? Probemos esto. Coloque estos en la misma línea, y asegúrese se eliminen los puntos y coma del final de cada sentencia. En primer lugar, podemos ver que el editor de texto ha destacado aquí un tema tan pronto como lo haces. Si tuviéramos que guardar esto y actualizar el navegador, vemos un error de sintaxis dentro de la consola. Tenemos un token inesperado de const, porque el analizador de JavaScript no espera llegar a esta etapa aquí, luego ver una nueva declaración de const. Si tiene varias sentencias en la misma línea como esta, necesitamos declarar que se trata dos sentencias separadas, separándolas con punto y coma. Coloque el punto y coma en el medio. Ahora el editor de textos no está destacando ningún tema. Podemos probar esto. Guardar y actualizar. Ahora todo esto está funcionando bien. También puedes ver que mi editor de texto los ha colocado automáticamente en líneas separadas, ya que se trata de dos declaraciones separadas. par del punto y coma, algunos otros gotchas son cuando comenzamos una nueva línea con corchetes, o a menudo referida como paréntesis. Echemos un vistazo a un ejemplo justo después de estas dos constantes. Crear una nueva variable, vamos a llamar puntuación. Dirías números aleatorios como 97.34, una constante de daño, y de nuevo, un número aleatorio, 10.42. Justo como nota al margen, he creado esto como un let. Dado que una puntuación generalmente se puede actualizar, podemos emitir el resultado de la puntuación con el daño despegado. Ahora si guardamos esto y actualizamos, este es el valor correcto dentro de la consola. Sabemos que puede realizar un cálculo dentro de estos corchetes, como acabamos de ver dentro del registro de la consola. Pero, ¿qué pasa si nos llevamos este log de consola e hicimos algo más con este cálculo? Por ejemplo, en lugar de resultar en 86.92, ¿y si en cambio quisiéramos redondear esto para decir 86 o 87? Bueno, para hacer esto, JavaScript tiene un método incorporado que podemos usar llamado ToPrecision. Podemos cambiar esto al final con el punto, minúscula a, y esto es camel caso, por lo que la precisión comienza con una P. Para usar esto dentro analizar el valor de longitud dos para hacerlo dos dígitos de largo. Ahora veamos el efecto de lo que pasaría si nos olvidaramos de poner algún punto y coma. Ahora Visual Studio Code insertará automáticamente estos en las siguientes cuando sea necesario. Pero si dejáramos estos fuera así y golpeáramos “Guardar”, al instante veríamos qué pasaría cuando el motor JavaScript leyera este código. Podemos ver que esta línea se ha insertado directamente después de la declaración justo aquí, porque no tenemos punto y coma para separar. Guardemos esto y actualicemos. Vemos un error, no podemos acceder al daño antes de la inicialización, y esto se debe a que esta línea justo aquí comienza con estos corchetes. Ahora esto puede no significar mucho si eres completamente nuevo en JavaScript. Pero si has hecho un poco de JavaScript en el pasado, así es en realidad como declaramos cierto tipo de función. En lugar de interpretar esta sección de código y esta sección de código como dos líneas, en realidad está leyendo de izquierda a derecha y continuando esto como una línea completa de código. Para solucionar esto, como es de esperar, necesitamos separarlos con punto y coma. Entonces si nos refrescamos, esto entonces ahora eliminará el error, y todo está claro en la consola. También podemos ver directamente los resultados de este cálculo recortando esta línea de código. Crea un registro de consola y pega esto de nuevo dentro. Guarda esto y actualiza el navegador y nuestro valor ahora se ha redondeado a dos decimales. También hay de unas funciones matemáticas que veremos más adelante, que pueden redondear estos valores arriba y también redondearlos hacia abajo. Solo para recapitular, usar punto y coma en JavaScript es opcional. Depende completamente de ti si quieres usarlos, o confía en que se inserten automáticamente. Pero sí ten en cuenta hay algunos casos en los que iniciamos una nueva línea de código con los corchetes donde necesitamos asegurarnos de insertarlos manualmente, para que no cause ningún error. Para redondear este video, vamos a echar un vistazo rápido al uso de comentarios. Los comentarios son simplemente una forma para que hagamos notas dentro de nuestro código, que no se leerá como cualquier código JavaScript. También podemos usarlo para comentar nuestro código también. Esto significa que en nuestro programa sigue ahí una línea de código particular , pero no se lee cuando se ejecuta el script. Para insertar un comentario o una nota, comenzamos en JavaScript con las dos barras inclinadas hacia adelante. Entonces podríamos escribir una nota como, debe tener punto y coma en las declaraciones anteriores. Si guardamos esto y actualizamos el navegador, no vemos ninguna referencia al comentario dentro de aquí. Pero, ¿y si tuviéramos un comentario más largo que se extendiera en múltiples líneas? Por ejemplo, si tuvieras un comentario justo aquí y luego dicho controlar la longitud del número usando ToPrecision. Bueno, como la mayoría de las veces, el editor de textos nos dará una pista de donde sea que estemos haciendo algo bien o mal. De inmediato estos cambios de color y tenemos este subrayado rojo a continuación. Podemos ver que así no es como se espera que se escriba. Para esto incluso podemos comenzar cada nueva línea de código con las barras dobles hacia delante, o en su lugar, podríamos convertir esto para que sea un comentario multilínea, que es una diagonal hacia adelante, y luego una estrella. Podemos entonces quitar el comentario de segunda línea y luego ir al final de nuestro comentario justo aquí, y podemos terminar esto con lo contrario que es una estrella y una diagonal hacia adelante. Como se mencionó antes, también podemos comentar líneas de código también. Si queremos dejar un determinado código en su lugar como referencia, o si queremos reincorporarlo más adelante, o cuando es debido es exactamente lo mismo. Por ejemplo, si quisiéramos eliminar esta constante de Chris, solo agregamos las dos barras inclinadas hacia delante delante, esta línea de código se volverá gris, y ya no está disponible para acceder dentro de nuestro programa. 13. Operadores: proyecto y comparación: Los operadores son algo que usamos todo el tiempo en JavaScript. De hecho, ya hemos utilizado algunos de ellos ya durante este curso. Notarás para este video Ya estoy en el archivo correcto, que es la lección número 9, Operadores: Asignación y Comparación. También abre esto dentro del navegador. Desplazándose hacia abajo a nuestra sección de guiones, ya tenemos algunas variables simples ya configuradas. Notarás que lo común entre las cuatro de estas variables es que todas usan el operador igual. Este es el operador de asignación porque asignamos el valor de la derecha al nombre de la variable sobre a la izquierda. Pero también hay otros operadores de asignación, que puedes ver aquí arriba a partir de este comentario. Hemos mirado esto igual. Pasemos ahora a este símbolo más igual. Digamos que queríamos sumar el valor del número 1 y también el valor del número 2, luego almacenar el valor recién devuelto. Bueno, podríamos hacerlo así. Llamaremos a esto el nuevo número. Establezca esto igual al valor del número 1 más el número 2. Si me desplazo un poco más hacia abajo, tenemos este getElementById, que ya está configurado, que es solo este nivel 1 encabezando arriba en la parte superior. Lo que vamos a hacer aquí es poner el valor del nuevo número. Agrega esto aquí, dale a esto un “Guardar”, y ahora podemos “Actualizar” el navegador. Vemos este valor recién devuelto de 20, que es el 15 y los cinco sumados. No hay sorpresa con ésta. Pero JavaScript también nos proporciona algunas formas más cortas de hacer esto, lugar de agregar el número 1 en las variables número 2 juntas y luego asignarlo a una variable. En cambio podemos hacerlo así. Podemos eliminar nuestro comentario hacia fuera esta línea con las dos barras inclinadas hacia adelante. Además, si está utilizando Visual Studio Code en un Mac, puede usar comando y barra inclinada hacia delante. Esto activará esto automáticamente. Si estás usando Windows, esto será control con barras inclinadas hacia adelante. Esto hará exactamente lo mismo. En cambio una opción corta. Si querías modificar la variable número 1 o actualizarla, podemos usar el operador más igual y luego pasar en el número 2. De lo que esto hará, sumará ambos números juntos y asignará un nuevo valor a la variable sobre a la izquierda. Ambas líneas seguirán viniendo con el mismo resultado de 20. La diferencia siendo la de arriba se está almacenando dentro de una nueva variable, y la de abajo está actualizando esta existente. Podemos comprobar esto actualizando esto para que sea el número uno. “ Guardar” y “Refrescar”. Todavía vemos el mismo valor de 20. También arriba en la parte superior con nuestras variables, tenemos este nombre y el apellido. Si quisiéramos mostrar el nombre completo en la pantalla, podemos llegar a algo como esto. En primer lugar, podríamos establecer el nombre del forense y luego usar Comando o Control C para copiar y luego Comando o Control V para pegar. Entonces también podemos dar salida al valor del apellido. “ Guardar” esto, y más al navegador sólo vemos el valor de nuestro apellido. Este enfoque no funciona porque el apellido es último código conocido y por lo tanto anula el nombre forense. En cambio, lo que podemos hacer es hacer uso del operador plus igual para agregar esto a nuestros elementos en lugar de reemplazar el existente. Si “Guardamos” esto y “Refrescar”, vemos el valor de ambas de nuestras variables. También podríamos añadir un espacio vacío entre cada una de estas palabras usando algunas de las técnicas que hemos utilizado en el pasado, pasar en una cadena vacía con un espacio. Entonces el operador plus para agregar esto justo antes de nuestro apellido. “ Guardar” este archivo. Ahora tenemos un espacio entre nuestros dos nombres de variables. Esto es agregar valores y luego reasignar el nuevo valor. Pero también podemos hacer lo contrario con la resta. Podemos ver que es justo aquí arriba. Esto funciona exactamente igual, pero usamos el símbolo negativo en lugar del plus. Podemos usar esto con nuestro ejemplo numérico desde abajo haciendo lo contrario con una resta. Quitemos este segundo, getElementById. Sustitúyase el nombre por el valor del número 1. “ Guardar” y “Refrescar”, y ahora tenemos el nuevo valor de 10. Sólo para recapitular, lo que hemos hecho aquí es que hemos tomado el número 1, que es 15. Después hemos quitado el valor de cinco para darnos 10, y el nuevo valor de 10 ha sido reasignado al número 1. También tenemos multiplicar exactamente lo mismo. Podemos cambiar esto, “Refrescar”, y tenemos el valor de 75. También podemos usar divide, que es la slash hacia adelante. Se trata de 15 dividido por 5, que reasignará el número 1 a ser igual a 3. Una interesante es esta última que podemos ver aquí, que es el símbolo por ciento. Este símbolo por ciento es el resto de asignaciones después de la división. De qué está haciendo esto aquí, tenemos nuestro número 1 y nuestro número 2, que es resultado de 15 dividido por 5. Cinco entra en 15 tres veces y por lo tanto no hay remanente. Si fuéramos a guardar esto, debería haber un valor restante de cero. Pero, ¿qué pasa si cambiamos uno de estos números? Digamos cuatro. Cuatro entra en 15 tres veces con el resto de tres. Otro tipo de operador que tenemos es la comparación. Actualmente sabemos cuando estamos estableciendo variables al igual que estos bonos, cuando usamos un solo igual, asignamos el valor sobre la derecha al valor sobre a la izquierda. Aquí, el número 1 era originalmente 15, y ahora si establecemos esto igual al número 2, ahora debería ser el valor de cuatro. Pero a veces esto puede parecer un poco extraño para los principiantes. Porque si tuviéramos que leer esto como principiante, esto puede parecer que estamos revisando si el número 1 es igual al número 2. Como sabemos, este no es el caso. Esto asignará el número 2 para que sea igual al número 1. Pero si quisiéramos comparar si estos dos valores son los mismos, lo hacemos con los dobles iguales. Vamos a instalar esto dentro de nuestro valor, digamos resultados. Después envía esto al navegador, “Guardar” y “Actualizar”. Vemos que el valor es un booleano de falso. Sabemos que esto es falso porque el número 1 es igual a 15 y el número 2 es igual a 4. También podemos hacer exactamente lo contrario, que es agregar un signo de exclamación dentro de aquí. Esto comprobará si los valores no son iguales. Encontrarás esto muchas veces con JavaScript, si usamos el signo de exclamación, esto hará lo contrario al caso original. “ Guardar” esto, “Refrescar”. Lo contrario por supuesto, es cierto. Algo, sin embargo, a tener cuidado es si estamos comparando dos tipos de datos diferentes. Por ejemplo, si ambos fueran cinco, pero uno de estos cincos estaba rodeado dentro de las citas para convertir esto en una cuerda. Para este ejemplo, no importa si estamos usando las cotizaciones simples o dobles. Vuelve a cambiar a los iguales. Veamos cuál es el resultado dentro del navegador. Si “Refrescar” esto, vemos que este es un valor de verdad. A pesar de que tenemos una cadena de cinco y un número de cinco, el doble igual sólo verificará los valores y no los tipos de datos. El número 1 y el número 2 se considera igual a pesar de que uno es una cadena y uno es un número. No obstante, aunque si quisiéramos comprobar también el valor en el tipo de datos, hay una forma de que podamos hacerlo usando el triple igual. El triple igual significa igualdad estricta. “ Guardar” esto, “Refrescar”. Ahora como tienen diferentes tipos de datos, esto ahora devuelve un valor falso. Si estamos usando la estricta igualdad así como esto, también podemos usar el signo de exclamación igual que antes para devolver exactamente lo contrario. Cambia esto por un signo de exclamación. Ahora si “Refrescar” el navegador, este es el valor opuesto de true. Comparación como esta a menudo se combina con declaraciones if, que volveremos a cubrir más adelante. Pero algunos otros operadores de comparación incluyen los menos que y los mayores que los símbolos, que son las flechas izquierda y derecha. Nosotros sí miramos brevemente estos en un video anterior. Todo lo que tenemos que hacer es poder cambiar nuestros dos valores para ser diferentes. Primero comprobemos si el número 1 es mayor que el número 2. Sabemos que esto es cierto, por lo que esperamos ver esto dentro del navegador. Lo contrario es el menos que símbolo, que, por supuesto, devolverá el valor de falso. Por último, lo último que queremos echar un vistazo en este video es que también podemos combinar estos menos que y mayores que símbolos con los iguales. Podemos comprobar si el número 1 es menor o igual al número 2. Este será falso. Pero no podemos cambiar estas variables para que sean las mismas. Ambos son iguales. Esto debe ser un valor de verdad. También tenemos acceso a la mayor o igual a la versión también. Operadores como estos son útiles para cosas como juegos, donde podemos comprobar si la salud de un jugador es cero o menos, lo que luego terminará el juego. A continuación, nos quedaremos con el tema de los operadores, pero esta vez echaremos un vistazo a la lógica y la aritmética. 14. Operadores: lógicos y aritméticos: Bienvenido de nuevo. Junto con las asignaciones y los operadores de comparación, también hay operadores lógicos y aritméticos, que podemos aprovechar en JavaScript. Como siempre, nos hemos dirigido a carpeta de esta lección que es el número 10, y también abrimos esto dentro del navegador. Al igual que el video anterior, tenemos algunos comentarios, que tiene una lista de todos los operadores disponibles. El primer conjunto son los operadores aritméticos. Nos pondremos a las lógicas justo después. Con los operadores aritméticos, muchos de estos son sólo de sentido común, como la, suma y la, resta. Muchos de