Ingeniería Web
Luis Felipe Botero Castaño
Universidad Adventista
Facultad de Ingeniería
Ingeniería de Sistemas
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.
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.
Orden de ejecución
Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en
orden, de arriba a 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.
Dónde llamar el js?
• <head>
• <body>
• Externo
js Output
• Escribir en un elemento HTML, usando innerHTML.
▫ document.getElementById("demo").innerHTML = 5 + 6;
• Escribir en la salida HTML utilizando document.write ().
▫ document.write(5 + 6);
• Escribir en un cuadro de alerta, usando window.alert ().
▫ window.alert(5 + 6);
• Escribiendo en la consola del navegador, utilizando console.log ().
▫ console.log(5 + 6);
js Variables
• var person = "John Doe", carName = "Volvo", price = 200;
• var x = 5 + 2 + 3;
• var x = "John" + " " + "Doe";
• var x = "5" + 2 + 3;
• var x = 2 + 3 + "5";
• var x = 5;
• var y = 6;
• var z = x + y;
js 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
js Variables
• Una variable declarada sin un valor tendrá el valor undefined
• Si vuelve a declarar una variable de JavaScript, no perderá su valor.
js Operadores aritméticos
js Operadores de Asignación
js Operadores de Comparación
==vs ===
==vs ===
Falsy Values
Falsy Values
js Operadores Lógicos
js 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";
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;
Eventos
Eventos
• <element event='some JavaScript'>
• <button
onclick="document.getElementById('demo').innerHTML =
Date()">The time is?</button>
Arrays
• var cars = ["Saab", "Volvo", "BMW"];
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;
Dates
• var d = new Date();
• new Date()
• new Date(year, month, day, hours, minutes, seconds,
milliseconds)
• new Date(milliseconds)
• new Date(date string)
Condicionales if()
if (condition) {
// Bloque de código que se ejecuta
}
if (hour < 18) {
greeting = "Good day";
}
Condicionales if() else
if (condition) {
// Código que se ejecuta si es verdadero
} else {
// Código que se ejecuta si es false
}
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Condicionales if() else else if()
if (condition1) {
// Código que se ejecuta si es verdadero
} else if (condition2) {
// código que se ejecuta si condition1 es falso y condition2 es verdadero
} else {
// código que se ejecuta si las dos condiciones son falsas
}
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Condicionales switch()
switch(expression) {
case x:
// código
break;
case y:
// código
break;
default:
// código
}
switch (new Date().getDay()) {
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
Loops
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];
}
Loops
while (i < 10) {
text += "The number is " + i;
i++;
}
do {
text += "The number is " + i;
i++;
}
while (i < 10);
Lectura de Clase
https://www.w3schools.com/js/js_best_practices.asp
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3.org/TR/DOM-Level-2-Core/introduction.html
http://miageprojet2.unice.fr/@api/deki/files/1333/=JavaScript.pdf
