Escribir su primer código Javascript

En esta lectura, aprenderá acerca de los comentarios en JavaScript. Además, aprenderá

sobre el punto y coma en JavaScript: qué hace y por qué se usa. Luego descargará un
navegador si no tiene uno instalado y ejecutará su primer fragmento de JavaScript usando la
consola.

Comentarios en JavaScript
He elegido los comentarios como punto de partida por dos razones:

1. Su sintaxis: la forma en que se escriben los comentarios es fácil de entender.

2. Escribir comentarios puede empoderarlo como desarrollador.
Primero, explicaré la sintaxis, y después de eso, mencionaré por qué poder escribir
comentarios es tan enriquecedor.

Comentarios en JavaScript: la sintaxis

Hay dos variedades de comentarios en JavaScript:

1. Comentarios de una sola línea

2. Comentarios de varias líneas
Se crea un comentario de una sola línea cuando agrega dos caracteres de barra diagonal uno
tras otro, sin espacios.

1
// este es un comentario.

El navegador ignora todo lo que sigue a un comentario de una sola línea en JavaScript.

Esto significa que, esencialmente, puede escribir cualquier tipo de texto, código, caracteres,
emojis, lo que sea, y el navegador lo ignorará.

Un comentario de varias líneas, como su nombre indica, abarca varias líneas de código y se
crea con una barra diagonal y un asterisco. Por ejemplo:

1
 2
3
4
5
6
7
8
9
/*
este
es
un
comentario
de
varias
líneas
*/

También puede usar la sintaxis de comentarios de varias líneas en una sola línea de código
de la siguiente manera:

1
/* este es un comentario de varias líneas en una sola línea */

Por qué escribir comentarios es enriquecedor

En este curso, se supone que nunca ha escrito una sola línea de código JavaScript.

Con esta suposición en mente, considere los efectos de lo que acaba de aprender; es decir,
los efectos de aprender a escribir comentarios en JavaScript:

1. Ahora puede expresar libremente sus ideas sobre cualquier código que escriba.
2. Puede agregar comentarios a cualquier código que ya exista.
3. Esos comentarios pueden estar destinados a usted mismo en el futuro o a colegas de su
equipo de desarrollo.
 Por lo tanto, los comentarios son enriquecedores porque facilitan la comunicación con
usted mismo en el futuro o con los miembros de su equipo, lo que le permite hacer
preguntas sobre el código, marcar el código como “para hacer” o como “para mejorar”, o
simplemente explicar qué hace un determinado fragmento de código.

Además, incluso puede comentar sobre algún código de trabajo en un archivo de JavaScript
para evitar que se ejecute.

Efectivamente, los comentarios le permiten “desactivar” fragmentos de código de

JavaScript.

Puede haber muchas razones para eso:

1. Tratar de entender cómo funciona un determinado fragmento de código.

2. Probar diferentes soluciones para un problema de codificación, sin tener que eliminar el
código existente.
3. Depuración: tratar de identificar por qué el código está roto o se comporta de manera
impredecible.

El punto y coma en JavaScript

En el idioma inglés, el punto final o el punto; es decir el carácter ., se utiliza para separar
pensamientos en las oraciones.

Al separar claramente los pensamientos con un punto final, evita malas interpretaciones.

En JavaScript, el punto y coma; es decir, el carácter ;, tiene un propósito similar: se utiliza

para delimitar claramente partes del código de otras partes del código.

Inserción automática del punto y coma (ASI)

Curiosamente, el navegador tiene una función conocida como “Inserción automática del
punto y coma”, lo que significa que hace un buen trabajo al “llenar los espacios en blanco”
en caso de que falte un punto y coma donde debería haber uno.

Efectivamente, lo que eso significa para los desarrolladores es que la mayoría de las veces,
no importa si se agrega o no un punto y coma, ya que es probable que el navegador lo
descubra de todos modos.

Es por eso que algunos desarrolladores dicen que no debería molestarse en agregar puntos y
comas.

Sin embargo, otros desarrolladores argumentan que es mejor usarlos donde sea necesario,
en aras de la claridad.
 La verdad es que la mayoría de las veces, puede pensar en agregar un punto y coma en
JavaScript como opcional, y algo así como una preferencia estilística.

Una nota sobre el uso de la consola en las herramientas

del desarrollador en su navegador
Como ya se mencionó anteriormente en este curso, una de las razones por las que
JavaScript es tan popular es porque es muy accesible.

Para comenzar con JavaScript, todo lo que necesita es un navegador. En este curso usaré
Google Chrome.

Una vez que haya instalado el navegador y lo haya ejecutado, haga clic con el botón
secundario del mouse en la página web actualmente activa y, luego, haga clic en el
comando Inspect (Inspeccionar) en el menú contextual del botón derecho.

Esto abrirá las herramientas de desarrollador y luego puede hacer clic en la pestaña Console
(Consola) para abrirla o, alternativamente, al presionar la tecla ESC se activará y
desactivará la consola independientemente del panel de herramientas de desarrollador
actualmente activo.

Puede escribir cualquier comando de JavaScript que desee en la consola de DevTools.

Si necesita escribir varias líneas de código

antes de ejecutarlas, asegúrese de
presionar la tecla de acceso directo SHIFT
+ ENTER para pasar a la siguiente línea.
Observe la diferencia entre presionar la tecla ENTER para ejecutar el código JavaScript que
ha escrito y presionar el atajo SHIFT + ENTER para pasar a la siguiente línea de código
(en lugar de ejecutar el código que ya ha escrito).

Esto es todo lo que necesita para comenzar a escribir código en JavaScript.

En las próximas lecciones, siéntase libre de seguirlas de dos maneras:

1. Usar el editor de VS Code y la extensión Code Runner como se describió anteriormente

2. Usar el navegador Chrome y ejecutar el código dentro de la consola DevTools como se
describe en esta lectura

Mostrar un saludo en la consola

Ahora que sabe cómo llegar a la pestaña Console (Consola) de las herramientas para
desarrolladores, usémosla para ejecutar su primera fragmento de código JavaScript real.

En Chrome, con las Herramientas para desarrolladores abiertas, haga clic en el espacio
vacío en la pestaña de la consola, justo a la derecha del carácter > azul. Debería ver una
línea vertical parpadeante (también conocida como “el cursor”). El cursor indica que puede
escribir en la consola.

Si escribe un código JavaScript válido, se ejecutará, lo que significa que se procesará y

podría generar algún tipo de resultado.

Ahora usará la función console.log para generar las palabras “Hello, World”.

Para hacerlo, escriba el siguiente comando en la consola:

1
console.log("Hello, World");

Si ha hecho todo según las instrucciones, las palabras “Hello, World” deberían aparecer en
la consola.

Aquí hay otro comando más complejo para mostrarle que el comando console.log
viene con una serie de trucos.

Por ejemplo, ¿sabía que puede diseñar los resultados en la consola?

En este fragmento de código, hay algunas adiciones: el tamaño de la fuente es diferente y el

color es azul:

1
console.log("%cHello, World", "color: blue; font-size: 40px");
console log with percentage c authors
Si copia y pega este fragmento de código, o tal vez, simplemente lo escribe en la consola,
una vez que presione la tecla ENTER para ejecutarlo, obtendrá las palabras “Hello, World”
en la consola. Esta vez, sin embargo, el color de las letras será azul y el tamaño de la fuente
será de 40 px. Entonces, acaba de aprender un buen truco con la consola.

Si agrega %c justo después del carácter", puede diseñar el resultado de la consola

agregando el carácter , después del segundo ", y luego, dentro de otro par de caracteres " y
"; use un código CSS válido para diseñar las palabras que desee que aparezcan en la
consola.

La razón para mostrarle este pequeño truco fue motivarlo a practicar escribir varias
palabras en el comando console.log y usar sus habilidades de CSS para cambiar el
estilo de estas palabras en el resultado de la consola. De esa manera, puede que le resulte
divertido practicar esta habilidad recién adquirida, y el aprendizaje y la diversión siempre
van bien juntos.

Resultado de varias palabras en la consola

Para enviar varias palabras a la consola, puede unirlas usando el carácter +, conocido
formalmente como “operador de concatenación” cuando unimos partes de texto, o el
“operador de suma”, para realizar la operación matemática de sumar dos números.

Este es un ejemplo de cómo unir tres fragmentos de texto separados:

console.log("Hello " + "there, " + "World"). El resultado de este
comando será: Hello there, World.

Estees un ejemplo de cómo mostrar tres fragmentos de texto por separado usando el
carácter , en su lugar:

console.log("Hello ", "there, ", "World")

Elresultado de este comando seguirá siendo: Hello there, World.

Marcar como completo

Me gusta
No me gusta
Informar de un problema