CICLO 3

Desarroll
We
o
b
JavaScript
Agenda
• ¿Qué es JavaScript?
• HTML, CSS y TypeScript o JavaScript
• Ejemplos
• Bibliografía
Agenda
• ¿Qué es JavaScript?
• HTML, CSS y TypeScript o JavaScript
• Ejemplos
• Bibliografía
Javascript

JavaScript es un lenguaje de programación que agrega interactividad a

su sitio web (por ejemplo, juegos, respuestas cuando se presionan
botones o se ingresan datos en formas, estilos dinámicos, animaciones).

JavaScript ("JS" para abreviar) es un lenguaje de programación dinámico

completo que, cuando se aplica a un documento HTML, puede
proporcionar interactividad dinámica en los sitios web. Fue inventado
por Brendan Eich, cofundador del proyecto Mozilla, la Fundación Mozilla
y la Corporación Mozilla.
Javascript

JavaScript en sí es bastante compacto pero muy flexible. Los desarrolladores han

escrito una gran variedad de herramientas sobre el lenguaje JavaScript principal,
desbloqueando una gran cantidad de funciones adicionales con el mínimo esfuerzo.
Éstos incluyen:
• Interfaces de programación de aplicaciones (API) del navegador: API integradas en
los navegadores web, que proporcionan funciones como la creación dinámica de
HTML y la configuración de estilos CSS, la recopilación y manipulación de un flujo
de video desde la cámara web del usuario o la generación de gráficos 3D y
muestras de audio.
• API de terceros: permite a los desarrolladores incorporar funcionalidades en sus
sitios de otros proveedores de contenido, como Twitter o Facebook.
• Frameworks y bibliotecas de terceros: puede aplicarlos a su HTML para permitirle
construir sitios y aplicaciones rápidamente.
 Orden de ejecución

Cuando el navegador encuentra un bloque de JavaScript, generalmente

lo ejecuta en orden, de arriba hacia abajo. Esto significa que debes tener
cuidado con el orden en el que colocas las cosas.
 Interpretado vs Compilado
Es posible que escuche los términos interpretados y compilados en el contexto
de la programación. En los lenguajes interpretados, el código se ejecuta de
arriba a abajo y el resultado de la ejecución del código se devuelve
inmediatamente. No es necesario transformar el código en una forma
diferente antes de que el navegador lo ejecute.

Los lenguajes compilados, por otro lado, se transforman (compilan) en otra

forma antes de que sean ejecutados por la computadora. Por ejemplo, C / C ++
se compila en un lenguaje ensamblador que luego ejecuta la computadora.

JavaScript es un lenguaje de programación interpretado ligero.

 Server-side vs Client-side

También puede escuchar los términos código del lado del servidor y del lado
del cliente, especialmente en el contexto del desarrollo web. El código del lado
del cliente es un código que se ejecuta en la computadora del usuario: cuando
se visualiza una página web, el código del lado del cliente de la página se
descarga, luego se ejecuta y se muestra mediante el navegador.

Por otro lado, el código del lado del servidor se ejecuta en el servidor, luego sus
resultados se descargan y se muestran en el navegador. Los ejemplos de
lenguajes web del lado del servidor populares incluyen PHP, Python, Ruby,
ASP.NET y ... ¡JavaScript! JavaScript también se puede usar como un lenguaje
del lado del servidor, por ejemplo, en el popular entorno Node.js.
 Orden de Carga

Hay una serie de problemas relacionados con conseguir que los scripts
se carguen en el momento adecuado. ¡Nada es tan simple como parece!
Un problema común es que todo el HTML en una página se carga en el
orden en que aparece. Si está utilizando JavaScript para manipular
elementos en la página (o, más precisamente, el Modelo de objetos de
documento), su código no funcionará si el JavaScript está cargado y
analizado antes del HTML al que intenta hacer algo.
 Async - defer
En realidad, hay dos formas en que podemos evitar el problema del script de bloqueo:
asíncrono y diferido. Veamos la diferencia entre estos dos.

Los scripts asíncronos descargan el script sin bloquear la representación de la página y

lo ejecutarán tan pronto como el script finalice la descarga. No se garantiza que los
scripts se ejecutarán en ningún orden específico, solo que no impedirán que se
muestre el resto de la página. Es mejor usar async cuando los scripts en la página se
ejecutan de forma independiente y no dependen de ningún otro script en la página.

Defer ejecutará los scripts en el orden en que aparecen en la página y los ejecutará tan
pronto como se descarguen el script y el contenido.
Async

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

Async

No puede confiar en el orden en que se cargarán los scripts.

Jquery.js puede cargarse antes o después de script2.js y script3.js
y, si este es el caso, cualquier función en esos scripts,
dependiendo de jquery, producirá un error porque jquery no se
definirá en el momento en que se ejecuta el script.
Defer

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

 Defer

Todos los scripts con el atributo de defer se cargarán en el orden en

que aparecen en la página. Entonces, podemos estar seguros de que
jquery.js se cargará antes que script2.js y script3.js y que script2.js se
cargará antes de script3.js.
Inclusión en página
Datos relevantes

• Comentarios. Pueden iniciar con // o iniciar con /* y terminar con */

• Las líneas de código terminan con el signo de punto y coma (;)
• Javascript distingue entre mayúsculas y minúsculas
• Las llaves ({ y }) permiten agrupar código.
Variables

• Deben empezar con una letra la cual puede ir seguida de números, el signo “_” o más letras.
• Pueden ser cadenas de texto, valores numéricos o booleanos.
Objetos
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

person.lastName;}
person["lastName"];

var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

name = person.fullName();

name = person.fullName;
 Arrays
Un array es una variable especial, que puede contener más de un valor a la vez.
Una matriz puede contener muchos valores bajo un solo nombre, y puede acceder a los valores
haciendo referencia a un número de índice.
var name = cars[0];

Las variables de JavaScript pueden ser objetos. Las matrices son tipos especiales de objetos. Debido a
esto, puede tener variables de diferentes tipos en la misma matriz.

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

var cars = ["Saab", "Volvo", "BMW"];

Variables

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

• Estos nombres únicos se llaman identificadores.
• Los identificadores pueden ser nombres cortos (como x e y) o más nombres
descriptivos (age, sum, totalVolume).
• 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 _
▫ 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
Variables
• Una variable declarada sin un valor tendrá el valor undefined
• Si vuelve a declarar una variable de JavaScript, no perderá su valor.
Tipos de datos

• x = 5; // x es un número
• x = "John"; // x es un String
• var carName1 = "Volvo XC60"; // Comillas dobles
• var carName2 = 'Volvo XC60'; // Comillas
Simples
• var x1 = 34.00; // Con decimales
• var x2 = 34; // Sin decimales
• var x = 5, y = 5, z = 6;
• (x == y) // true
• (x == z) // false
Funciones

Una función de JavaScript se define con la palabra clave de function, seguida de

un nombre, seguida de paréntesis ().

Los nombres de funciones pueden contener letras, dígitos, subrayados y signos

de dólar (las mismas reglas que las variables).

Los paréntesis pueden incluir nombres de parámetros separados por comas:

(parámetro1, parámetro2, ...)

El código a ejecutar, por la función, se coloca entre llaves: {}

Funciones

var x = myFunction(4, 3);

function myFunction(a, b) {
return a * b;
}
Funciones

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

var text = "The temperature is " + toCelsius(77) + "

Celsius";
 Operadores aritméticos

Operador Significado
+ Suma

- Resta

* Multiplicación

/ Dividir

% Resto de la división

++ Incremento

-- Decremento
 Operadores lógicos

Operador Significado
&& AND (Y lógico)
|| OR (O lógico)
! NOT (NO lógico)
Operadores de comparación
Operadores de asignación
js Operadores de Asignación
==vs ===
==vs ===
Falsy Values
Falsy Values
Mensajes

• Alert: es el mensaje más usado. Saca un mensaje por la pantalla el cual sólo deja la posibilidad
de aceptarle. Su uso es mostrar información al usuario pero resaltándola de la página.
• Prompt: se trata de una ventana que pide entrar datos al usuario. De modo que esta función
devuelve un valor que se puede usar en el código si es asignado a una variable.
• Confirm: la ventana mostrará el texto elegido (normalmente es una pregunta) y el usuario
elegirá si desea aceptar o no el contenido. Confirm devuelve un valor true en el caso de que el
usuario acepte el mensaje, y false si no lo hace.
Alert
Prompt
Confirm
IF
If, if/else

if (time < 10) {

greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Switch
Swicth

switch (new Date().getDay()) {

case 4:
case 5:
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
While
While

while (i < 10) {

text += "The number is " + i;
i++;
}

do {
text += "The number is " + i;
i++;
}
while (i < 10);
For
For

for (i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";
}

var person = {fname:"John", lname:"Doe", age:25};

var text = "";

var x;
for (x in person) {
text += person[x];
}
Break y Continue

Break: hace que el navegador que se la

encuentra, abandone inmediatamente el bucle
en el que está inmerso.
Continue: lo que hace el navegador es dejar de
leer las siguientes instrucciones del bucle y saltar
al principio del mismo.
Funciones
Funciones predefinidas

• eval(textoCódigo ): eval tiene un único parámetro que es una cadena de texto. Esta función
hace que el texto sea interpretado como si fuera código normal de JavaScript. Ejemplo:
• parseInt(textoNúmero, base): convierte el texto (que debe tener cifras numéricas) a formato
de número. El segundo parámetro es opcional y representa la base del número. Si la
conversión no es posible, devuelve el valor NaN (Not a Number) que indica que la variable
numérica posee un valor inválido
• parseFloat(textoNúmero): convierte el texto (que debe tener cifras numéricas) a formato de
número con decimales.
• escape(texto): muestra el código ASCII de los símbolos del texto. Cada número en el resultado
va precedido del símbolo % y el código ASCII sale en forma Hexadecimal.
• unescape(texto): hace justo lo inverso del anterior. Devuelve los códigos que representan los
códigos ASCII en forma de texto que se le pasa como parámetro. Ejemplo:
• isNaN(expresión): devuelve true si la expresión tiene un contenido no numérico.
Objetos

• Un objeto es una agrupación de variables,

que en ese caso se llaman propiedades, y
de funciones, las cuales se llaman
métodos. Las propiedades definen las
características de los objetos y los
métodos las operaciones que podemos
hacer con él.
• Se pueden instanciar con el operador new.
String
anchor(nombre). Crea un marcador en el big(). Muestra la cadena de caracteres con
texto. una fuente grande.
fontsize(n). Muestra el texto en el tamaño
fontcolor(color). Determina el color del
n, donde n es un número del 1 al 7 (los 7
texto.
tamaños estándar).
small(). El texto se muestra con fuente
indica el destino del vínculo.
pequeña.
toLowerCase(). Convierte la cadena a
minúsculas.
blink(). Muestra el texto de modo
intermitente.
indexOf(cadenaInterna,inicio). Devuelve la
posición de la cadena interna en el texto,
teniendo en cuenta que el primer carácter
es el número 0. El primer parámetro es el
texto que se busca; el segundo es opcional
e indica desde qué posición del texto
comenzamos a buscar. Si no se encuentra
la cadena interna, se devuelve el valor –1.
Ejemplo:
strike(). Subraya el texto.
toUpperCase().Convierte la cadena a
mayúsculas.
charAt(n). Muestra el carácter situado en la fixed(). Muestra la cadena en fuente no
bold().Muestra el texto en negrita.
posición n de la cadena. proporcional.
lastIndexOf(cadenaInterna,inicio). Idéntico
a indexOf sólo que en este caso cuenta la link(URL). Crea un hipervínculo en la
italics(). Muestra el texto en cursiva.
última vez que aparece la cadena (en lugar cadena de texto, el parámetro URL
de la primera vez como hace indexOf).
substring(x,y). Muestra el fragmento de
sub(). El texto va en subíndice. texto que va desde la posición x a la sup(). Superíndice.
posición y. Ejemplo:
length. Almacena el tamaño de la cadena
de texto.
Math

atan(n). Calcula el floor(n). Redondea

ceil(n). Redondea n cos(n). Calcula el log(n). Calcula el
arco tangente de exp(n). Calcula en. n a su valor
a su valor superior. coseno de n. logaritmo de n.
n. inferior.

random(). Genera round(n).

max(x,y). Devuelve min(x,y). Devuelve
pow(x,y). Devuelve un número Redondea n a el sin(n). Calcula el
el mayor valor de x el menor valor de x
el xy. aleatorio entre 0 y número más seno de n.
o y. o y.
1. Ejemplo: próximo.

E. Devuelve la LN2. Devuelve el LN10. Devuelve el

sqrt(n). Calcula la tan(n). Calcula la LOG2E. Logaritmo
constante de Euler logaritmo logaritmo
raíz cuadrada de n. tangente de n. en base 2 de e.
o número e. neperiano de 2. neperiano de 10.

LOG10E. Logaritmo PI. Devuelve el SQRT1_2. Raíz SQRT2. Raíz

en base 10 de e. número PI. cuadrada de 0,5. cuadrada de 2.
Dates
• var d = new Date();
• new Date()
• new Date(year, month, day, hours, minutes, seconds, milliseconds)
• new Date(milliseconds)
• new Date(date string)
Date

getFullYear(). Devuelve el año,

getDate(). Devuelve el día del
mes.
pero en forma de 4 números.
Con esto se asegura la
getDay(). Devuelve el día de la getMinutes(). Devuelve los getMonth(). Devuelve el mes
compatibilidad con el año 2000. getHours(). Devuelve la hora.
semana en forma de número. minutos. (con números del 0 al 11).
Está función se añadió al
JavaScript 1.3, por lo que ciertos
navegadores no podrán usarla.

getTimezoneOffset(). Devuelve la
getTime(). Devuelve el número
getSeconds(). Devuelve los diferencia en minutos entre la setDate(valor). Establece el día setFullYear(valor). Establece el
de milisegundos de la fecha, getYear(). Devuelve el año.
segundos. zona horaria actual y la hora del mes. año (con cuatro cifras).
empezando a contar desde 1970.
solar (GMT).

setTime(valor). Establece la fecha

setHours(valor). Establece la setMinutes(valor). Establece los setMonth(valor). Establece el setSeconds(valor). Establece los
con el número de milisegundos setYear(valor). Establece el año.
hora. minutos. mes (con un número del 1 al 11). segundos.
desde el 1 de Enero de 1970.

toLocaleString(). Devuelve la
fecha en formato de texto, según
las especificaciones de la zona
horaria del ordenador.
Array

concat(array). Agrupa dos arrays. Disponible desde la versión 1.2.

join(). Saca una cadena de texto que contiene todos los elementos del array.

reverse(). Invierte el orden del los elementos de un array. El primero pasa a ser el último y viceversa.

sort(). Obtiene la matriz de manera ordenada.

length. Cuenta el número de elementos del array.

Eventos

onMouseDown. Se produce
onClick. Se produce cuando el
onDblClick. Se genera cuando el onMouseOver. Se produce cuando cuando el usuario mantiene
usuario hace clic en el objeto. Sólo onMouseOut. Ocurre cuando el onMouseUp. Ocurre cuando el
usuario hace doble clic con el el usuario pasa el cursor por pulsado el botón principal del
los vínculos y los botones de los usuario abandona el objeto. Sólo usuario levanta el botón del ratón.
ratón. Sólo los vínculos admiten encima del objeto. Sólo los ratón a la vez que se sitúa encima
formularios permiten capturar los vínculos permiten este evento Funciona en los mismos casos que
este evento en ambos vínculos permiten este evento en de un objeto. Funciona en los
este evento en ambos en ambos navegadores. el anterior.
navegadores. ambos navegadores. vínculos, en los botones y en las
navegadores.
imágenes.

onKeyDown, onKeyPress y
onUnload. Se produce cuando la onBlur. Se produce cuando un
onKeyUp. Ocurren
onMouseMove. Sucede cuando el onLoad. Se produce cuando la página se está descargando, onResize. Ocurre cuando se objeto pierde el foco (deja de ser
respectivamente cuando el
usuario mueve el ratón. En página se está cargando. La porque se está cargando otra o cambia el tamaño de la ventana. el objeto activo). La etiqueta
usuario pulsa una tecla, cuando la
Netscape ninguna etiqueta lo etiqueta BODY es la idónea para porque se cierra el navegador. La La etiqueta BODY o la FRAME son BODY, los botones, cuadros de
mantiene pulsada y cuando la
admite. este evento. etiqueta BODY es la idónea para las que manejan este evento. formulario y los enlaces admiten
suelta. Tienen poca utilidad y
este evento. esta propiedad.
pocas etiquetas los admiten.

onFocus. Sucede cuando un objeto

onAbort. Se produce si el usuario
gana el foco (pasa a ser el objeto onError. Se produce cuando ocurre onSubmit. Ocurre cuando un
pulsa el botón Detener mientras onChange. Se produce cuando el onSelect. Ocurre cuando el
activo). La etiqueta BODY, los un error. Casi todas lo permiten, formulario es enviado a su
se estaba cargando una imagen. La usuario cambia el contenido de un usuario selecciona texto de un
botones, cuadros de formulario y no obstante su uso no parece muy servidor. Es pues un evento de la
etiqueta IMG es la que maneja cuadro de texto de un formulario. cuadro del formulario.
los enlaces admiten esta interesante. etiqueta FORM.
este evento.
propiedad.

onReset. Sucede cuando un

formulario es anulado mediante su
botón Reset. Es pues un evento de
la etiqueta FORM.
Agenda
• ¿Qué es JavaScript?
• HTML, CSS y TypeScript o JavaScript
• Ejemplos
• Bibliografía
 HTML,CSS,Javascript
• HTML es el lenguaje de marcado que utilizamos para estructurar y
dar significado a nuestro contenido web, por ejemplo, definir
párrafos, encabezados y tablas de datos, o incrustar imágenes y
videos en la página.
• CSS es un lenguaje de reglas de estilo que utilizamos para aplicar
estilos a nuestro contenido HTML, por ejemplo, configurar colores de
fondo y fuentes, y distribuir nuestro contenido en varias columnas.
• JavaScript es un lenguaje de script que le permite crear contenido de
actualización dinámica, controlar multimedia, animar imágenes y casi
todo lo demás. (De acuerdo, no todo, pero es sorprendente lo que
puedes lograr con unas pocas líneas de código JavaScript).
HTML

<p>Player 1: Chris</p>
CSS

p {

font-family: 'helvetica neue', helvetica, sans-serif;

letter-spacing: 1px;

text-transform: uppercase;

text-align: center;

border: 2px solid rgba(0,0,200,0.6);

background: rgba(0,0,200,0.3);

color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px;

padding: 3px 10px; display: inline-block; cursor: pointer;

}
Javascript

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {

let name = prompt('Enter a new name');

para.textContent = 'Player 1: ' + name;

}
HTML,CSS,Javascript

El motor de JavaScript del navegador ejecuta el JavaScript, una vez que el HTML
y el CSS se han ensamblado y se han unido creando una página web. Esto
garantiza que la estructura y el estilo de la página ya estén en su lugar en el
momento en que el JavaScript comience a ejecutarse.

Esto es bueno, ya que un uso muy común de JavaScript es modificar

dinámicamente HTML y CSS para actualizar una interfaz de usuario, a través de
la API del Modelo de Objeto de Documento (como se mencionó
anteriormente). Si el JavaScript se cargó y trató de ejecutarse antes de que el
HTML y CSS estuvieran allí para afectar, entonces se producirían errores.
Seguridad en el Browser

Cada pestaña del navegador es su propio grupo independiente

para ejecutar el código (estos depósitos se denominan "entornos
de ejecución" en términos técnicos); esto significa que en la
mayoría de los casos, el código de cada pestaña se ejecuta por
separado y el código de una pestaña no puede directamente afecta
el código en otra pestaña, o en otro sitio web. Esta es una buena
medida de seguridad: si este no fuera el caso, entonces los piratas
podrían comenzar a escribir código para robar información de
otros sitios web y otras cosas malas.
Agenda
• ¿Qué es JavaScript?
• HTML, CSS y TypeScript o JavaScript
• Ejemplos
• Bibliografía
Ejemplos

https://www.w3schools.com/js/js_intro.asp

https://www.w3schools.com/js/js_examples.asp
Agenda
• ¿Qué es JavaScript?
• HTML, CSS y TypeScript o JavaScript
• Ejemplos
• Bibliografía