Mis apuntes de desarrollo web </>

Fundamentos JavaScript

Conexión HTML y JavaScript:

Script Externo:

Se tiene un archivo JS externo, el cual se vincula al HTML mediante la etiqueta <script>. Se puede ubicar tanto en el <head> como el <body>, pero se recomienda ubicarla siempre dentro del <body> al final de este.

Dicho archivo se puede vincular a varios archivos HTML.

ejemplo Conexión JS Externo

Script Interno:

Dentro del archivo HTML se agrega la etiqueta <script> en cualquier lugar y dentro de ella se escribe directamente el código JS. No es recomendable este modo.

ejemplo Conexión JS Interno

Sintaxis:

Case sensitve:
Sensible a mayúsculas y minúsculas.
Tipado dinámico:
Las variables son del tipo de dato que almacenen.
; (punto y coma):
Las sentencias finalizan con ; No es obligatorio pero es recomendable.
{ bloques }:
Los bloques inician y finalizan con {}, de forma opcional se puede añadir ;

Variables, Constantes y Ámbito (scope):

Una variable es un espacio reservado en memoria para almacenar un dato que podrá cambiar durante la ejecución del programa. Se declaran con la palabra reservada "let". No es recomendable usar "var".

Las variables se pueden declarar, inicializar y modificar.

Declarar:
Indiciarle al programa que la variable existe para que reserve un espacio de memoria para guardar la variable. Puede declararse vacia.
Inicializar:
Darle un valor a la variable. Se puede declarar e iniciar en la misma sentencia.
Reasignar:
Cambiar el valor de una variable que ya existe. Solo se puede reasignar dentro de un mismo ámbito.

Una constante es un espacio reservado en memoria para almacenar un dato que no cambiará durante la ejecución del programa. Se declaran con la palabra reservada "const". Estas solo admiten la declaración e inicialización en la misma sentencia.

El ámbito es la zona donde existe la variable o constante. Si se declara una variable dentro de un bloque solo existirá dentro del bloque y no se podrá acceder a esta fuera del bloque.

var let const
Declaración sin inicialización Si Si No
Declaración e inicialización Si Si Necesario
Reasignación Si Si No
Redeclaración Si No No
ejemplo variables y constantes ejemplo var

Tipos de datos:

Datos primitivos:

Numeros:
JS No distingue entre números reales y numeros decimales.
Strings:
Al declarar se encierra entre ' ' o " ".
Boolean:
Datos lógicos. Solo tiene los valores true o false.
Undefined
Null
Symbol
ejemplo tipos de datos

Datos compuestos:

Definidos por el usuario:

typeOf:

El operador typeOf devuelve el tipo de dato de cualquier variable declarada.

ejemplo typeOf

Operadores:

Tipo de operador Operación Operador Ejemplo
Matemáticos Suma / Concatenación + ejemplo operadores Matemáticos
Resta -
Multiplicación *
Potenciación **
División /
Módulo %
Incremento / Decremento Post-incremento en 1 a++ ejemplo operadores Asignación
Pre-incremento en 1 ++a
Post-decremento en 1 a--
Pre-decremento en 1 --a
Asignación Asignación = ejemplo operadores Asignación
Suma y Asignación +=
Resta y Asignación -=
Multiplicación y Asignación *=
División y Asignación /=
Módulo y Asignación %=
Potenciación y Asignación **=
Comparación Igualdad == ejemplo operadores Comparación
Igualdad estricta ===
Desigualdad !=
Desigualdad estricta !==
Relación Mayor que > ejemplo operadores Relación
Menor que <
Mayor o igual que >=
Menor o igual que <=

Precedencia de operadores:

La precedencia de operadores determina el orden en el cual los operadores son evaluados uno respecto del otro. Los operadores con mayor precedencia se convierten en los operandos de los operadores con menor precedencia.

Precedencia Operadores Descripción Asociatividad
19 (...) Agrupamiento N/A
18 ... . ... Acceso a propiedades (notación por punto) A la izquierda
... [...] Acceso a propiedades (notación por corchetes)
new ... (...) Locación de memoria (con lista de argumentos)
... (...) Llamada a función
17 new ... Locación de memoria (sin lista de argumentos) A la derecha
16 ...++ Post Incremento N/A
...-- Post Decremento
15 !... Negación lógica A la derecha
~... Negación bits
++... Pre Incremento
--... Pre Decremento
typeOf ... Tipo de dato
void ... vacio
delete ... Eliminación
await ... Espera de función
14 ... ** ... Potenciación
13 ... * ... Multiplicación A la izquierda
... / ... División
... % ... Módulo
12 ... + ... Suma
... - ... Resta
10 ... < ... Menor a
... <= ... Menor o igual a
... > ... Mayor a
... >= ... Mayor o igual a
9 ... == ... Igualdad
... != ... Desigualdad
... === ... Igualdad estricta
... !== ... Desigualdad estricta
5 ... && ... AND lógico
4 ... || ... OR lógico
3 ... ? ... : ... Operador ternario Derecha
2 Todos los operadores de Asignación
1 ... , ... Operador coma izquierda