Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objetos Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de funciones Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


Variables JavaScript

4 formas de declarar una variable de JavaScript:

  • Utilizando var
  • Utilizando let
  • Utilizando const
  • usando nada

¿Qué son las Variables?

Las variables son contenedores para almacenar datos (almacenar valores de datos).

En este ejemplo, x, yy z, son variables declaradas con la varpalabra clave:

Ejemplo

var x = 5;
var y = 6;
var z = x + y;

En este ejemplo, x, yy z, son variables declaradas con la letpalabra clave:

Ejemplo

let x = 5;
let y = 6;
let z = x + y;

En este ejemplo, x, yy z, son variables no declaradas:

Ejemplo

x = 5;
y = 6;
z = x + y;

De todos los ejemplos anteriores, puedes adivinar:

  • x almacena el valor 5
  • y almacena el valor 6
  • z almacena el valor 11

¿Cuándo usar JavaScript var?

Declare siempre las variables de JavaScript con var, leto const.

La varpalabra clave se usa en todo el código JavaScript desde 1995 hasta 2015.

Las palabras clave lety constse agregaron a JavaScript en 2015.

Si desea que su código se ejecute en un navegador anterior, debe usar var.


¿Cuándo usar JavaScript const?

Si quieres una regla general: declara siempre las variables con const.

Si cree que el valor de la variable puede cambiar, use let.

En este ejemplo, price1, price2y total, son variables:

Ejemplo

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

Las dos variables price1y price2 se declaran con la constpalabra clave.

Estos son valores constantes y no se pueden cambiar.

La variable totalse declara con la letpalabra clave.

Este es un valor que se puede cambiar.


Al igual que el álgebra

Al igual que en álgebra, las variables tienen valores:

let x = 5;
let y = 6;

Al igual que en álgebra, las variables se usan en expresiones:

let z = x + y;

Del ejemplo anterior, puede adivinar que el total se calcula en 11.

Nota

Las variables son contenedores para almacenar valores.



Identificadores JavaScript

Todas las variables de JavaScript deben identificarse con nombres únicos .

Estos nombres únicos se denominan identificadores .

Los identificadores pueden ser nombres cortos (como x e y) o nombres más descriptivos (edad, suma, volumen total).

Las reglas generales para construir nombres para variables (identificadores únicos) son:

  • Los nombres pueden contener letras, dígitos, guiones bajos y signos de dólar.
  • Los nombres deben comenzar con una letra.
  • Los nombres también pueden comenzar con $ y _ (pero no lo usaremos en este tutorial)
  • Los nombres distinguen entre mayúsculas y minúsculas (y e Y son variables diferentes)
  • Las palabras reservadas (como las palabras clave de JavaScript) no se pueden usar como nombres

Nota

Los identificadores de JavaScript distinguen entre mayúsculas y minúsculas.


El operador de asignación

En JavaScript, el signo igual ( =) es un operador de "asignación", no un operador "igual a".

Esto es diferente del álgebra. Lo siguiente no tiene sentido en álgebra:

x = x + 5

En JavaScript, sin embargo, tiene mucho sentido: asigna el valor de x + 5 a x.

(Calcula el valor de x + 5 y pone el resultado en x. El valor de x se incrementa en 5).

Nota

El operador "igual a" se escribe como ==en JavaScript.


Tipos de datos de JavaScript

Las variables de JavaScript pueden contener números como 100 y valores de texto como "John Doe".

En programación, los valores de texto se denominan cadenas de texto.

JavaScript puede manejar muchos tipos de datos, pero por ahora, solo piense en números y cadenas.

Las cadenas se escriben entre comillas simples o dobles. Los números se escriben sin comillas.

Si pone un número entre comillas, se tratará como una cadena de texto.

Ejemplo

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Declarar una variable de JavaScript

Crear una variable en JavaScript se llama "declarar" una variable.

Declaras una variable de JavaScript con varo la letpalabra clave:

var carName;
o:
let carName;

Después de la declaración, la variable no tiene valor (técnicamente lo es undefined).

Para asignar un valor a la variable, utilice el signo igual:

carName = "Volvo";

También puede asignar un valor a la variable cuando la declara:

let carName = "Volvo";

En el siguiente ejemplo, creamos una variable llamada carNamey le asignamos el valor "Volvo".

Luego, "damos salida" al valor dentro de un párrafo HTML con id="demo":

Ejemplo

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

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Nota

Es una buena práctica de programación declarar todas las variables al comienzo de un script.


Una declaración, muchas variables

Puede declarar muchas variables en una declaración.

Comience la declaración con vary separe las variables con comas :

Ejemplo

let person = "John Doe", carName = "Volvo", price = 200;

Una declaración puede abarcar varias líneas:

Ejemplo

let person = "John Doe",
carName = "Volvo",
price = 200;

Valor = indefinido

En los programas de computadora, las variables a menudo se declaran sin valor. El valor puede ser algo que debe calcularse o algo que se proporcionará más adelante, como una entrada del usuario.

Una variable declarada sin valor tendrá el valor undefined.

La variable carName tendrá el valor undefineddespués de la ejecución de esta declaración:

Ejemplo

let carName;

Redeclaración de variables de JavaScript

Si vuelve a declarar una variable de JavaScript declarada con var, no perderá su valor.

La variable carNameseguirá teniendo el valor "Volvo" después de la ejecución de estas sentencias:

Ejemplo

var carName = "Volvo";
var carName;

Nota

No puede volver a declarar una variable declarada con leto const.

Esto no funcionará:

let carName = "Volvo";
let carName;

Aritmética JavaScript

Al igual que con el álgebra, puedes hacer operaciones aritméticas con variables de JavaScript, usando operadores como =y +:

Ejemplo

let x = 5 + 2 + 3;

También puede agregar cadenas, pero las cadenas se concatenarán:

Ejemplo

let x = "John" + " " + "Doe";

Prueba también esto:

Ejemplo

let x = "5" + 2 + 3;

Nota

Si pone un número entre comillas, el resto de los números se tratarán como cadenas y se concatenarán.

Ahora prueba esto:

Ejemplo

let x = 2 + 3 + "5";

Signo de dólar JavaScript $

Dado que JavaScript trata un signo de dólar como una letra, los identificadores que contienen $ son nombres de variables válidos:

Ejemplo

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Usar el signo de dólar no es muy común en JavaScript, pero los programadores profesionales a menudo lo usan como un alias para la función principal en una biblioteca de JavaScript.

En la biblioteca JavaScript jQuery, por ejemplo, la función principal $se usa para seleccionar elementos HTML. En jQuery $("p");significa "seleccionar todos los elementos p".


Guión bajo JavaScript (_)

Dado que JavaScript trata el guión bajo como una letra, los identificadores que contienen _ son nombres de variables válidos:

Ejemplo

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Usar el guión bajo no es muy común en JavaScript, pero una convención entre los programadores profesionales es usarlo como un alias para las variables "privadas (ocultas)".


Ponte a prueba con ejercicios

Ejercicio:

Cree una variable llamada carNamey asígnele el valor Volvo.

var  = "";