Lenguaje de programación
para el desarrollo de la
funcionalidad de un sitio web
JavaScript.
JavaScript
O JavaScript es un lenguaje de programación que se utiliza
principalmente para crear páginas web dinámicas.
O Una página web dinámica es aquella que incorpora
efectos como texto que aparece y desaparece,
animaciones, acciones que se activan al pulsar botones y
ventanas con mensajes de aviso al usuario.
JavaScript
O JavaScript es un lenguaje imperativo, basado en
prototipos y orientado a objetos.
O Por lo general se emplea del lado del cliente (lo que se
conoce como client-side), aunque también hay una forma
de este lenguaje del lado del servidor (server-side).
JavaScript
O En actualidad, la totalidad de los navegadores
soportan JavaScript.
O Esto supone que los programas pueden interpretar
directamente el código que aparece en una página web,
por lo cual JavaScript es un lenguaje interpretado.
O Este lenguaje también se usa por ejemplo en widgets y
en documentos PDF.
JavaScript
O El programador norteamericano Brendan Eich es el creador
de JavaScript.
O Eich desarrolló el lenguaje con el nombre de Mocha el cual fue
renombrado posteriormente a LiveScript, para finalmente quedar
como JavaScript, para el navegador Netscape a mediados de la
década de 1990.
O Con el paso de los años, JavaScript fue expandiéndose hasta
convertirse en uno de los lenguajes más utilizados en la Web.
JavaScript
O JavaScript permite incorporar todo tipo de elementos
dinámicos e interactivos a una página web, como un contador
de visitas, un reloj y una calculadora.
O La aparición de ventanas, las animaciones y los efectos en los
textos también pueden desarrollarse con este lenguaje.
JavaScript
O Junto al HTML y a CSS, es una de las tres tecnologías
esenciales en la producción mundial webs: la mayoría de los
sitios web la emplean y es compatible con todos los
navegadores modernos sin necesidad de plug-ins.
O JavaScript posee una API para trabajar con texto, arrays,
fechas y expresiones regulares.
Usos JavaScript
O JavaScript también se utiliza en entornos que no se basan en web,
tales como documentos PDF, navegadores específicos del sitio y
widgets de escritorio.
O Máquinas virtuales de JavaScript (VMs) mucho más nuevas y
rápidas, así como plataformas construidas sobre este lenguaje,
han aumentado la popularidad de JavaScript para aplicaciones
web.
O Por parte del cliente, JavaScript se ha aplicado tradicionalmente
como un lenguaje interpretado, pero los navegadores más
recientes pueden realizar la compilación al momento.
Usos JavaScript
O También se utiliza en el desarrollo de videojuegos, en la
creación de aplicaciones de escritorio y móviles y en la
programación de servidores con entornos de ejecución
como [Link].
TIPOS DE DATOS
JavaScript
Tipos de datos en javascript
O JavaScript es un lenguaje de tipado débil o dinámico. Esto
significa que no es necesario declarar el tipo de variable antes
de usarla.
O En los lenguajes de tipado dinámico como JavaScript o Phyton
la comprobación de los tipos se realiza durante la ejecución
del programa en vez de durante la compilación.
O En los lenguajes de tipado estático o fuertemente tipados
como C#, Go, Java o C++ la comprobación de los tipos se
realiza durante la compilación, y no durante la ejecución.
En Javascript existen 7 tipos
de datos.
O String Cadenas de texto.
Un string es una cadena de caracteres. A cada carácter de una
cadena se le asigna una posición, empezando por el primer
carácter en la posición 0, el segundo en la posición 1 y así
sucesivamente.
Ejemplo:
Var=“casa”;
Var=“Esta es una prueba”;
En Javascript existen 7 tipos
de datos.
O Number Valores numéricos.
JavaScript solo tiene un tipo de datos numérico. No hay un tipo
específico para los números enteros y de coma flotante.
Ejemplo:
var peso = 54;
var pesoExacto = 54.3;
En C#
int peso = 54;
float pesoExacto = 54.30f
En Javascript existen 7 tipos
de datos.
O Boolean
Representa una entidad lógica y puede tener dos valores:
1. True y
2. False.
O null
Es un valor asignado tiene el valor de “no valor”.
En Javascript existen 7 tipos
de datos.
O undefined
Una variable a la que no se le ha asignado ningún valor tiene el
valor undefined.
Ejemplo:
var saludo;
[Link](typeof saludo); // "undefined"
En Javascript existen 7 tipos
de datos.
O Symbol Nuevo en ECMAScript 2015.
Symbol es un tipo de datos cuyos valore son únicos e inmutables.
Dichos valores pueden ser utilizados como identificadores
(claves) de las propiedades de los objetos. Cada valor del tipo
Symbol tiene asociado un valor del tipo String o Undefined que
sirve únicamente como descripción del símbolo.
En Javascript existen 7 tipos
de datos.
Estos tipos se dividen en dos grupos:
1. Primitivos y
2. de Objeto.
Tipos Primitivos
Los valores primitivos son inmutables, no pueden ser cambiados.
String, Number, Boolean, null, undefined y Symbol son tipos
primitivos.
Los tipos primitivos no tienen métodos ni propiedades, aunque en
los string, numbers y booleans podemos acceder a ellas gracias a
los wrappers objects.
En Javascript existen 7 tipos
de datos.
O Object
Un Objeto es un valor en memoria al que podemos acceder por un
identificador (variable).
En JavaScript los objetos pueden ser vistos como una colección de
propiedades.
Un Objeto en notación literal tiene este aspecto:
var persona = { nombre: "María", edad: "38", ciudad: “Tegucigalpa" };
Podemos escribirlo en múltiples líneas para más claridad
var persona = {
nombre: "María",
edad: "38",
ciudad: “Tegucigalpa",
};
OPERADORES
JavaScript
Operadores en JavaScript
O Operadores de asignación
Un operador de asignación asigna un valor a su operando izquierdo
basándose en el valor de su operando derecho.
El operador de asignación simple es igual (=), que asigna el valor de su
operando derecho a su operando izquierdo. Es decir, x = y asigna el valor
de y a x.
También hay operadores de asignación compuestos que son una
abreviatura de las operaciones enumeradas en la siguiente tabla:
Operadores de asignación compuestos
Operador
Nombre Significado
abreviado
Asignación x=y x=y
Asignación de adición x += y x=x+y
Asignación de resta x -= y x=x-y
Asignación de multiplicación x *= y x=x*y
Asignación de división x /= y x=x/y
Asignación de residuo x %= y x=x%y
Asignación de exponenciación x **= y x = x ** y
Asignación de desplazamiento a la
x <<= y x = x << y
izquierda
Asignación de desplazamiento a la
x >>= y x = x >> y
derecha
Asignación de desplazamiento a la
x >>>= y x = x >>> y
derecha sin signo
Asignación AND bit a bit x &= y x=x&y
Asignación XOR bit a bit x ^= y x=x^y
Asignación OR bit a bit x |= y x=x|y
Asignación AND lógico x &&= y x && (x = y)
Asignación OR lógico x ||= y x || (x = y)
Asignación de anulación lógica x ??= y x ?? (x = y)
Operadores en JavaScript
O Operadores de comparación
Un operador de comparación compara sus operandos y devuelve un
valor lógico en función de si la comparación es verdadera (true) o falsa
(false).
Los operandos pueden ser valores numéricos, de cadena, lógicos u
objetos. Las cadenas se comparan según el orden lexicográfico estándar,
utilizando valores Unicode.
En la mayoría de los casos, si los dos operandos no son del mismo tipo,
JavaScript intenta convertirlos a un tipo apropiado para la comparación.
Este comportamiento generalmente resulta en comparar los operandos
numéricamente.
Operadores en JavaScript
Las únicas excepciones a la conversión de tipos dentro de las
comparaciones involucran a los operadores === y !==, que realizan
comparaciones estrictas de igualdad y desigualdad.
Estos operadores no intentan convertir los operandos a tipos
compatibles antes de verificar la igualdad.
La siguiente tabla describe los operadores de comparación en términos
de este código de ejemplo:
var var1 = 3;
var var2 = 4;
Operadores de comparación
Operador Descripción Ejemplos que devuelven true
3 == var1"3" == var1
Igual (==) Devuelve true si los operandos son iguales.
3 == '3'
var1 != 4
No es igual (!=) Devuelve true si los operandos no son iguales.
var2 != "3"
Devuelve true si los operandos son iguales y del
Estrictamente igual (===) mismo tipo. Consulta también [Link] y similitud en 3 === var1
JS.
Devuelve true si los operandos son del mismo tipo var1 !== "3"
Desigualdad estricta (!==)
pero no iguales, o son de diferente tipo. 3 !== '3'
Devuelve true si el operando izquierdo es mayor que var2 > var1
Mayor que (>)
el operando derecho. "12" > 2
Devuelve true si el operando izquierdo es mayor o var2 >= var1
Mayor o igual que (>=)
igual que el operando derecho. var1 >= 3
Devuelve true si el operando izquierdo es menor que var1 < var2
Menor que (<)
el operando derecho. "2" < 12
Devuelve true si el operando izquierdo es menor o var1 <= var2
Menor o igual (<=)
igual que el operando derecho. var2 <= 5
Operadores en JavaScript
O Operadores aritméticos
Un operador aritmético toma valores numéricos (ya sean literales o
variables) como sus operandos y devuelve un solo valor numérico.
Los operadores aritméticos estándar son suma (+), resta (-),
multiplicación (*) y división (/).
Estos operadores funcionan como lo hacen en la mayoría de los otros
lenguajes de programación cuando se usan con números de punto
flotante (en particular, ten en cuenta que la división entre cero
produce Infinity). Por ejemplo:
1 / 2; // 0.5
1 / 2 == 1.0 / 2.0; // Esto es true
Operadores aritméticos
Operador Descripción Ejemplo
Operador binario. Devuelve el resto entero
Residuo (%) 12 % 5 devuelve 2.
de dividir los dos operandos.
Operador unario. Agrega uno a su
operando. Si se usa como operador
Si x es 3, ++x establece x en 4 y
prefijo (++x), devuelve el valor de su
devuelve 4, mientras
Incremento (++) operando después de agregar uno; si se
que x++ devuelve 3 y , solo
usa como operador sufijo (x++), devuelve
entonces, establece x en 4.
el valor de su operando antes de agregar
uno.
Si x es 3, entonces --
Operador unario. Resta uno de su
x establece x en 2 y devuelve 2,
Decremento (--) operando. El valor de retorno es análogo
mientras que x-- devuelve 3 y,
al del operador de incremento.
solo entonces, establece x en 2.
Operador unario. Devuelve la negación de Si x es 3, entonces -x devuelve -
Negación unaria (-)
su operando. 3.
Operador unario. Intenta convertir el +"3" devuelve 3.
Positivo unario (+)
operando en un número, si aún no lo es. +true devuelve 1.
Operador de Calcula la base a la potencia 2 ** 3 returns 8.
exponenciación (**) de exponente, es decir, baseexponente 10 ** -1 returns 0.1.
Operadores en JavaScript
O Operadores bit a bit
Un operador bit a bit trata a sus operandos como un conjunto de 32 bits
(ceros y unos), en lugar de números decimales, hexadecimales u octales.
Por ejemplo, el número decimal nueve tiene una representación binaria
de 1001.
Los operadores bit a bit realizan sus operaciones en tales
representaciones binarias, pero devuelven valores numéricos estándar
de JavaScript.
La siguiente tabla resume los operadores bit a bit de JavaScript.
Operadores bit a bit
Operador Uso Descripción
Devuelve un uno en cada posición del bit para los que
AND a nivel de bits a&b los bits correspondientes de ambos operandos son
unos.
Devuelve un cero en cada posición de bit para el cual
OR a nivel de bits a|b los bits correspondientes de ambos operandos son
ceros.
Devuelve un cero en cada posición de bit para la que
los bits correspondientes son iguales.
XOR a nivel de bits a^b
[Devuelve uno en cada posición de bit para la que los
bits correspondientes son diferentes].
NOT a nivel de bits ~a Invierte los bits de su operando.
Desplaza a en representación binaria b bits hacia la
Desplazamiento a la izquierda a << b
izquierda, desplazándose en ceros desde la derecha.
Desplazamiento a la derecha de Desplaza a en representación binaria b bits a la
a >> b
propagación de signo derecha, descartando los bits desplazados.
Desplaza a en representación binaria b bits hacia la
Desplazamiento a la derecha de
a >>> b derecha, descartando los bits desplazados y
relleno cero
desplazándose en ceros desde la izquierda.
Operadores en JavaScript
O Operadores lógicos bit a bit
Conceptualmente, los operadores lógicos bit a bit funcionan de la
siguiente manera:
Los operandos se convierten en enteros de treinta y dos bits y se
expresan mediante una serie de bits (ceros y unos). A los números con
más de 32 bits se les descartan los bits más significativos.
Por ejemplo, el siguiente número entero con más de 32 bits se convertirá
en un número entero de 32 bits:
Antes: 1110 0110 1111 1010 0000 0000 0000 0110 0000 0000 0001
Después: 1010 0000 0000 0000 0110 0000 0000 0001
Operadores en JavaScript
Cada bit en el primer operando se empareja con el bit
correspondiente en el segundo operando: primer bit al
primer bit, segundo bit al segundo bit, y así
sucesivamente.
El operador se aplica a cada par de bits y el resultado
se construye bit a bit.
Por ejemplo, la representación binaria de nueve es
1001 y la representación binaria de quince es 1111.
Entonces, cuando los operadores bit a bit se aplican a
estos valores, los resultados son los siguientes:
Ejemplos de operadores bit a bit
Expresión Resultado Descripción binaria
15 & 9 9 1111 & 1001 = 1001
15 | 9 15 1111 | 1001 = 1111
15 ^ 9 6 1111 ^ 1001 = 0110
~ 0000 0000 ... 0000 1111 =
~15 -16
1111 1111 ... 1111 0000
~ 0000 0000 ... 0000 1001 =
~9 -10
1111 1111 ... 1111 0110
Tenga en cuenta que los 32 bits se invierten utilizando
el operador NOT a nivel de bits y que los valores con el
bit más significativo (más a la izquierda) establecido en
1 representan números negativos (representación en
complemento a dos). ~x evalúa al mismo valor que
evalúa -x - 1.
Operadores en JavaScript
O Operadores de desplazamiento de bits
Los operadores de desplazamiento bit a bit toman dos
operandos: el primero es una cantidad que se va a
desplazar y el segundo especifica el número de posiciones
de bit por las que se va a desplazar el primer operando.
La dirección de la operación de desplazamiento es
controlada por el operador utilizado.
Los operadores de desplazamiento convierten sus
operandos en enteros de treinta y dos bits y devuelven un
resultado del mismo tipo que el operando izquierdo.
Los operadores de desplazamiento se enumeran en la
siguiente tabla.
OPERADORES DE DESPLAZAMIENTO DE BITS
Operador Descripción Ejemplo
Este operador desplaza el primer
operando el número especificado de
9<<2 produce 36, porque 1001
Desplazamiento a la izquierda bits a la izquierda. Los bits
desplazado 2 bits a la izquierda se
(<<) desplazados en exceso hacia la
convierte en 100100, que es 36.
izquierda se descartan. Los bits cero se
desplazan desde la derecha.
Este operador desplaza el primer
operando el número especificado de 9>>2 produce 2, porque 1001
bits a la derecha. Los bits desplazados desplazado 2 bits a la derecha se
Desplazamiento a la derecha de
en exceso hacia la derecha se convierte en 10, que es 2. Del mismo
propagación de signo (>>)
descartan. Las copias del bit más a la modo, -9>>2 produce -3, porque el
izquierda se desplazan desde la signo se conserva.
izquierda.
19>>>2 produce 4, porque 10011
Este operador desplaza el primer desplazado 2 bits a la derecha se
operando el número especificado de convierte en 100, que es 4. Para
Desplazamiento a la derecha de bits a la derecha. Los bits desplazados números no negativos, el
relleno cero (>>>) en exceso hacia la derecha se desplazamiento a la derecha de relleno
descartan. Los bits cero se desplazan con ceros y el desplazamiento a la
desde la izquierda. derecha de propagación del signo
producen el mismo resultado.
Operadores en JavaScript
O Operadores lógicos
Los operadores lógicos se utilizan normalmente con
valores booleanos (lógicos); cuando lo son, devuelven
un valor booleano.
Sin embargo, los operadores && (AND) y || (OR) en
realidad devuelven el valor de uno de los operandos
especificados, por lo que si estos operadores se
utilizan con valores no booleanos, pueden devolver un
valor no booleano. Los operadores lógicos se describen
en la siguiente tabla.
Operadores lógicos
Operador Uso Descripción
Devuelve expr1 si se puede convertir a false; de lo
contrario, devuelve expr2. Por lo tanto, cuando se
AND Lógico (&&) expr1 && expr2 usa con valores booleanos, && devuelve true si
ambos operandos son true; de lo contrario,
devuelve false.
Devuelve expr1 si se puede convertir a true; de lo
contrario, devuelve expr2. Por lo tanto, cuando se
OR lógico (||) expr1 || expr2 usa con valores booleanos, || devuelve true si
alguno de los operandos es true; si ambos son
falsos, devuelve false.
Devuelve false si su único operando se puede
NOT lógico (!) !expr
convertir a true; de lo contrario, devuelve true.
Operadores en JavaScript
O Operadores de cadena
Además de los operadores de comparación, que se
pueden usar en valores de cadena, el operador de
concatenación (+) concatena dos valores de cadena,
devolviendo otra cadena que es la unión de los dos
operandos de cadena.
Por ejemplo,
[Link]('mi ' + 'cadena'); // la consola registra la cadena "mi cadena".
Operadores en JavaScript
O Operador condicional (ternario)
El operador condicional es el único operador de
JavaScript que toma tres operandos.
El operador puede tener uno de dos valores según una
condición. La sintaxis es:
condition ? val1 : val2
Si condition es true, el operador tiene el valor de val1.
De lo contrario, tiene el valor de val2. Puedes utilizar el
operador condicional en cualquier lugar donde
normalmente utilizas un operador estándar.
Operadores en JavaScript
Por ejemplo,
var status = (age >= 18) ? 'adult' : 'minor';
Esta declaración asigna el valor "adult" a la
variable status si age es de dieciocho años o más. De
lo contrario, asigna el valor "minor" a status.
Operadores en JavaScript
O Operador coma (,)
Simplemente evalúa ambos operandos y devuelve el valor
del último operando.
Este operador se utiliza principalmente dentro de un
bucle for, para permitir que se actualicen múltiples variables
cada vez a través del bucle.
Se considera de mal estilo usarlo en otros lugares, cuando
no es necesario. A menudo, en su lugar pueden y se deben
utilizar dos declaraciones independientes.
Operadores en JavaScript
O Precedencia de los operadores
La precedencia de los operadores determina el orden
en que se aplican al evaluar una expresión.
Puede redefinir la precedencia de los operadores
mediante el uso de paréntesis.
La siguiente tabla describe la precedencia de los
operadores, de mayor a menor.
Precedencia de los operadores
Tipo de operador Operadores individuales
miembro . []
llamar / crear instancia () new
negación / incremento ! ~ - + ++ -- typeof void delete
multiplicar / dividir */%
adición / sustracción +-
desplazamiento bit a bit << >> >>>
relacional < <= > >= in instanceof
igualdad == != === !==
AND bit a bit &
XOR bit a bit ^
OR bit a bit |
AND lógico &&
OR lógico ||
condicional ?:
asignación = += -= *= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??=
coma ,
VARIABLES Y
CONSTANTES
JavaScript
Variables en JavaScript
O En programación, las variables son espacios donde
se puede guardar información y asociarla a un
determinado nombre.
O De esta forma, cada vez que se consulte ese nombre
posteriormente, te devolverá la información que
contiene.
O La primera vez que se realiza este paso se suele
llamar inicializar una variable.
Variables en JavaScript
O En Javascript, si una variable no está inicializada,
contendrá un valor especial: undefined, que significa
que su valor no está definido aún, o lo que es lo
mismo, que no contiene información:
var a; // Declaramos una variable "a", pero no le asociamos ningún contenido.
var b = 0; // Declaramos una variable de nombre "b", y le asociamos el número 0.
[Link](b); // Muestra 0 (el valor guardado en la variable "b")
[Link](a); // Muestra "undefined" (no hay valor guardado en la variable "a")
Como se puede observar, se utilizo [Link]() para
consultar la información que contienen las variables
indicadas.
Variables en JavaScript
O Las mayúsculas y minúsculas en los nombres de las
variables de Javascript importan. No es lo mismo una
variable llamada precio que una variable
llamada Precio, pueden contener valores diferentes.
O Como su propio nombre indica, una variable puede
variar su contenido, ya que aunque contenga una cierta
información, se puede volver a cambiar. A esta acción
ya no se le llama inicializar una variable, sino declarar
una variable (o más concretamente, redeclarar).
Ámbitos de Variables: var
O En el enfoque tradicional de Javascript, es decir,
cuando se utiliza la palabra clave var para declarar
variables, existen dos ámbitos principales: ámbito
global y ámbito a nivel de función.
O Podemos utilizar el objeto especial window para
acceder directamente al ámbito global
independientemente de donde nos encontremos. Esto
ocurre así porque las variables globales se almacenan
dentro del objeto window (la pestaña actual del
navegador web).
Ámbitos de Variables: let
O En las versiones modernas de Javascript (ES6 o
ECMAScript 2015) o posteriores, se introduce la
palabra clave let en sustitución de var.
O Con ella, en lugar de utilizar los ámbitos globales y a
nivel de función (var), utilizamos los ámbitos clásicos
de programación: ámbito global y ámbito local.
Constantes en JavaScript
O De forma tradicional, Javascript no incorporaba
constantes. Sin embargo, en ECMAScript 2015 (ES6)
se añade la palabra clave const, que inicializada con un
valor concreto, permite crear variables con valores que
no pueden ser cambiados.
const NAME = "Manz";
[Link](NAME);
O Realmente, las constantes de Javascript son variables
inicializadas a un valor específico y que no pueden
redeclararse. No confundir con valores inmutables.
GRACIAS POR SU
ATENCION…..
JavaScript.
