Sintaxis de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos

La sintaxis de JavaScript es el conjunto de reglas, cómo Los programas JavaScript se construyen:

// How to create variables:
var x;
let y;

// How to use variables:
x = 5;
y = 6;
let z = x + y;

Valores de JavaScript

La sintaxis de JavaScript define dos tipos de valores:

  • Valores fijos

  • Valores variables

Los valores fijos se denominan Literales.

Los valores de las variables se denominan Variables.


Literales de JavaScript

Las dos reglas de sintaxis más importantes para valores fijos son:

1. Los números se escriben con o sin decimales:

10.50

1001 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Number can be written with or without decimals.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 10.50;
</script>

</body>
</html>

2. Las cadenas son texto escrito entre comillas dobles o simples:

"John Doe"

'John Doe'

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Strings can be written with double or single quotes.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>

</body>
</html>


Variables de JavaScript

En un lenguaje de programación, variables se utilizan para almacenar valores de datos.

JavaScript utiliza las palabras clave var, let y const para declarar variables.

Se utiliza un signo igual para asignar valores a las variables.

En este ejemplo, x se define como una variable. Entonces x es asignado (dado) el valor 6:

let x;
x = 6; 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>

<p id="demo"></p>

<script>
let x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Operadores de JavaScript

JavaScript utiliza operadores aritméticos ( + - * / ) a calcular valores:

(5 + 6) * 10

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>

</body>
</html>

JavaScript utiliza un operador de asignación ( = ) para asignar valores a variables:

let x, y;
x = 5;
y = 6;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Assigning JavaScript Values</h2>

<p>In JavaScript the = operator is used to assign values to variables.</p>

<p id="demo"></p>

<script>
let x, y;
x = 5;
y = 6;
document.getElementById("demo").innerHTML = x + y;
</script>

</body>
</html>

Expresiones JavaScript

Una expresión es una combinación de valores, variables y operadores, que calcula un valor.

El cálculo se llama evaluación.

Por ejemplo, 5 * 10 se evalúa como 50:

5 * 10 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>

</body>
</html>

Las expresiones también pueden contener valores variables:

 x * 10 

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

<p id="demo"></p>

<script>
var x;
x = 5;
document.getElementById("demo").innerHTML = x * 10;
</script>

</body>
</html>

Los valores pueden ser de varios tipos, como números y cadenas.

Por ejemplo, "John" + " " + "Doe", se evalúa como "John Doe":

 "John" + " " + "Doe"

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "John" + " "  + "Doe";
</script>

</body>
</html>

Palabras clave de JavaScript

Las palabras clave de JavaScript se utilizan para identificar acciones a realizar.

El La palabra clave let le dice al navegador que cree variables:

let x, y;
x = 5 + 6;
y = x * 10;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>The <b>let</b> Keyword Creates Variables</h2>

<p id="demo"></p>

<script>
let x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

El La palabra clave var también le dice al navegador que cree variables:

 var x, y;
x = 5 + 6;
y = x * 10;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>The var Keyword Creates Variables</h2>

<p id="demo"></p>

<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

En estos ejemplos, usando var o let producirá el mismo resultado.

Aprenderá más sobre var y let más adelante en este tutorial.


Comentarios de JavaScript

No todas las declaraciones de JavaScript se "ejecutan".

Código después de doble barra // o entre /* y */ se trata como un comentario.

Los comentarios se ignoran y no serán ejecutado:

let x = 5;   // I will be executed
// x = 6;   I will 
NOT be executed

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments are NOT Executed</h2>

<p id="demo"></p>

<script>
let x;
x = 5;
// x = 6; I will not be executed
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Aprenderá más sobre los comentarios en un capítulo posterior.


Identificadores/nombres de JavaScript

Los identificadores son nombres de JavaScript.

Los identificadores se utilizan para nombrar variables, palabras clave y funciones.

Las reglas para los nombres legales son las mismas en la mayoría de los lenguajes de programación.

Un nombre JavaScript debe comenzar con:

  • Una letra (A-Z o a-z)

  • Un signo de dólar ($)

  • O un guión bajo (_)

Los caracteres siguientes pueden ser letras, dígitos, guiones bajos o signos de dólar.

Nota

No se permiten números como primer carácter en los nombres.

De esta forma, JavaScript puede distinguir fácilmente los identificadores de los números.


JavaScript distingue entre mayúsculas y minúsculas

Todos los identificadores de JavaScript son distingue entre mayúsculas y minúsculas.

Las variables apellido y apellido, son dos variables diferentes:

let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript is Case Sensitive</h2>

<p>Try to change lastName to lastname.</p>

<p id="demo"></p>

<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName;
</script>

</body>
</html>

JavaScript no interpreta LET o Let como la palabra clave let.


Caso JavaScript y Camel

Históricamente, los programadores han utilizado diferentes formas de unir varias palabras en un nombre de variable:

Guiones:

nombre, apellido, master-card, interurbano.

Los guiones no están permitidos en JavaScript. Están reservados para restas.

Guión bajo:

nombre, apellido, master_card, inter_city.

Caso Camello superior (Caso Pascal):

Nombre, Apellido, MasterCard, InterCity.

Casilla inferior Camel:

Los programadores de JavaScript tienden a utilizar mayúsculas y minúsculas que comienzan con una letra minúscula:

nombre, apellido, masterCard, interCity.


Juego de caracteres JavaScript

JavaScript utiliza el juego de caracteres Unicode.

Unicode cubre (casi) todos los caracteres, puntuaciones y símbolos del mundo.

Para verlo más de cerca, estudie nuestra Referencia completa de Unicode.