Curso IT Fundamentos JavaScript 036_Estructura Sintáctica

Sentencias

Las sentencias de JavaScript (Statements) son un conjunto de instrucciones utilizadas para realizar tareas específicas.

Ejemplo:

1
// Declaración de variables
2
let userName = 'Carlos';
3
let age = 18;
4

5
// Sentencia condicional
6
if (age >= 18) {
7
  console.log(userName + ' es una persona adulta');
8
} else {
9
  console.log(userName + ' es una persona menor de edad');
10
}
11

12
// Bucle
13
for (let i = 0; i < 5; i++) {
14
  console.log('Salida del bucle ' + (i + 1));
15
}
16

17
// Definición de función
18
function Hello(name) {
19
  return 'Hola, ' + name + '!';
20
}
21

22
// Llamada de función
23
let sayHello = Hello(userName);
24
console.log(sayHello);

Punto y coma

En JavaScript, el punto y coma (;) es un símbolo de terminación de sentencia, utilizado para marcar el final de una sentencia. El punto y coma es opcional en la mayoría de los casos, porque el intérprete de JavaScript intentará insertar automáticamente puntos y coma (Automatic Semicolon Insertion, ASI) para que el código se analice como sintácticamente correcto. Sin embargo, hay algunos casos en los que ASI puede conducir a un comportamiento inesperado, por lo tanto, se recomienda agregar explícitamente puntos y coma al escribir código JavaScript.

Cuando aparece un punto y coma, ya sea de una sola línea o de varias líneas, esta sentencia termina.

Ejemplo:

1
alert('Hola');alert('JavaScript!');

Cuando existe un salto de línea (line break), en la mayoría de los casos se puede omitir el punto y coma.

Ejemplo:

1
alert('Hola')
2
alert('JavaScript!')

1
alert('Hola');
2
alert('JavaScript!')

1
alert('Hola')
2
alert('JavaScript!');

1
alert('Hola');alert('JavaScript!')

Cuando se encuentran bloques de sentencias o bloques de código, el salto de línea no agregará automáticamente puntos y coma. Y los espacios y saltos de línea serán ignorados.

Ejemplo:

1
alert
2
(
3
1+
4
   2
5
   +1);

Comentarios

En JavaScript, los comentarios se utilizan para agregar explicaciones y notas en el código. Este texto no tiene ningún impacto real en la ejecución del programa. Los comentarios son muy útiles para mejorar la legibilidad del código, la colaboración y la depuración.

Comentarios de una sola línea

Usando el símbolo // puede crear comentarios de una sola línea. Todo el texto desde // hasta el final de la línea se tratará como un comentario.

Ejemplo:

1
alert('Hola JavaScript!'); // Comentario de una sola línea después de la sentencia
2
// Comentario de una sola línea en una línea propia

Comentarios de varias líneas

Comenzando con /* y terminando con */ puede crear comentarios de varias líneas. Todo el texto entre estos dos símbolos se tratará como un comentario.

1
/*
2
  Este es un comentario de varias líneas
3
  puede abarcar varias líneas
4
*/
5
alert('Hola');
6
/*
7
Los comentarios de varias líneas también se pueden usar para comentar un bloque de código, el siguiente código no se ejecutará
8
alert('JavaScript!');
9
*/

Cuadros de diálogo

JavaScript proporciona varios cuadros de diálogo para una interacción simple con el usuario, incluidos alert, confirm y prompt. Estos cuadros de diálogo le permiten mostrar información al usuario, hacer preguntas o aceptar entradas. Cuando se muestra un cuadro de diálogo, la ejecución del código se detiene hasta que el usuario cierra el cuadro de diálogo.

Cuadro de diálogo alert

El cuadro de diálogo alert se utiliza para mostrar un mensaje al usuario y esperar a que el usuario haga clic en el botón “Aceptar”.

Ejemplo:

1
alert('¡Hola JavaScript interno!');

Efecto:

Cuadro de diálogo confirm

El cuadro de diálogo confirm se utiliza para mostrar al usuario un cuadro de diálogo con botones de confirmación y cancelación, generalmente utilizado para preguntar al usuario si desea realizar una determinada acción.

Ejemplo:

1
    let yesNo = confirm("¿Estás aprendiendo JavaScript?");
2
    alert(yesNo);

Efecto:

Cuadro de diálogo prompt

El cuadro de diálogo prompt se utiliza para mostrar al usuario un cuadro de diálogo con un campo de entrada, generalmente utilizado para aceptar la entrada del usuario.

Ejemplo:

1
    let name = prompt("Por favor ingrese su nombre:", '');
2
    alert(name);

Efecto:

Herramientas de desarrollo

Las herramientas de desarrollo de JavaScript son un conjunto de herramientas integradas en el navegador que ayudan a los desarrolladores a depurar, analizar y optimizar el código JavaScript. Diferentes navegadores proporcionan diferentes herramientas de desarrollo. A continuación se muestran las herramientas de desarrollo de JavaScript de navegadores comunes:

Herramientas de desarrollo de Chrome

Abra el navegador Chrome, presione Ctrl + Shift + I (Windows/Linux) o Cmd + Option + I (Mac) para abrir las herramientas de desarrollo de Chrome.

Haga clic con el botón derecho en el navegador, seleccione “Inspeccionar” en el menú emergente para abrir las herramientas de desarrollo de Chrome.

Como en la imagen:

Haga clic en el icono “Configuración y más” en el navegador, seleccione “Más herramientas” — “Herramientas para desarrolladores” para abrir las herramientas de desarrollo de Chrome.

Como en la imagen:

Funciones principales y paneles:

• Console (Consola): Se utiliza para ejecutar y depurar código JavaScript, ver salidas, errores e información de advertencia.
• Sources (Fuentes): Proporciona editor de código, configuración de puntos de interrupción, expresiones de vigilancia y otras funciones para depurar código fuente JavaScript.
• Network (Red): Ver las solicitudes de red iniciadas por la página, verificar los detalles de solicitud y respuesta.
• Performance (Rendimiento): Analiza el rendimiento de la página, muestra tiempos de carga, uso de CPU, etc.
• Application (Aplicación): Ver y depurar almacenamiento local, Session Storage, Cookies, etc.
• Elements (Elementos): Ver y editar el árbol DOM, modificar estilos CSS.

Palabras clave

Las palabras clave de JavaScript son palabras reservadas en el lenguaje de programación JavaScript que tienen un propósito especial. Se utilizan para identificar variables, funciones, sentencias, etc. Estas palabras clave no se pueden utilizar como identificadores (por ejemplo, nombres de variables, nombres de funciones, etc.).

Aquí hay algunas palabras clave de JavaScript:

1. Palabras clave básicas:

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. Palabras clave reservadas (tienen un uso especial en modo estricto):

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. Palabras clave introducidas con ECMAScript 6 (ES6):

• class
• const
• export
• extends
• import
• super