Scribd
Cargar
39 vistas

14 JavaScript

El documento presenta una introducción a la programación web con JavaScript. Explica los orígenes y sintaxis básica de JavaScript, cómo incluir scripts en archivos separados, y cómo manipular el DOM de HTML para cambiar el contenido sin recargar la página. También cubre temas como objetos, funciones, eventos, formularios y funciones como valores.

Cargado por

lifelong.learning.why
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
39 vistas

14 JavaScript

El documento presenta una introducción a la programación web con JavaScript. Explica los orígenes y sintaxis básica de JavaScript, cómo incluir scripts en archivos separados, y cómo manipular el DOM de HTML para cambiar el contenido sin recargar la página. También cubre temas como objetos, funciones, eventos, formularios y funciones como valores.

Cargado por

lifelong.learning.why
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 20

DEPARTAMENTO ACADÉMICO DE

INGENIERÍA DE SISTEMAS E
INFORMÁTICA

Programación Web I

Msc. Ing. Carlo Jose Luis Delgado Corrales


Msc. Ing. Enzo Edir Velásquez Lobatón
Índice

 Orígenes, Mi primer programa


 JavaScript en archivos separados
 Syntaxis, Objetos, Funciones
 Depuración, Eventos
 HTML DOM (Document Object Model)
 Cambios en el HTML sin recarga
 JavaScript y formularios
 Funciones como valor (closures)
 Fetch y APIs
 Ejemplo
Orígenes

 JavaScript es un lenguaje de programación que se puede usar en


medio del código HTML, es decir que se ejecuta en el cliente web. Por
esto los programas que escribamos en JavaScript se ejecutarán en
cualquier dispositivo (incluyendo celulares) que cuente con un
navegador.
 Aunque por el nombre podemos llegar a pensar que está relacionado a
Java, esto no es cierto: sus orígenes se remontan a Netscape.
 Actualmente JavaScript puede ser considerado como un dialecto de
ECMAScript
 La sintaxis de JavaScript es muy similar a la de Java y C++, cuenta con
condicionales simples (if else) y múltiples (switch case), ciclos (for),
funciones (function), etc.
Mi primer programa https://www.w3schools.com/js

 El código JavaScript es interpretado por el Browser al igual que HTML o CSS, así que
podremos probar nuestros programas sin necesidad de usar el servidor.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Primer programa con JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Probando JavaScript</h1>
<script>
document.write('Hola Mundo');
</script>
</body>
</html>
JavaScript en archivos separados

 Los scripts de JavaScript se pueden incluir en un archivo HTML usando el tag

<script src="myScript.js"></script>

 Este código debe ir en la sección head, para que se cargue al inicio, para muchos
scripts es importante que el documento HTML esté completamente cargado antes de
ejecutarse.
Syntaxis

 JavaScript es muy similar a Java, cuenta con todos sus operadores aritméticos,
booleanos, condicionales y ciclos.
 Sin embargo, las variables en JavaScript son de tipado dinámico al estilo de perl y
también, se las debe declarar antes de su primer uso.

var name = ‘Netscape’;


document.write('Hola ' + name);
 También es posible declarar las variables usando let, pero esto podría aún no ser
aceptado en todos los browser https://caniuse.com/?search=let
 El comportamiento de las variables declaradas let, es más similar a lo que se
esperaría en lenguaje como Java.
Objetos

 Al igual que en Java, los objetos en JavaScript tienen atributos y pueden tener
métodos, sin embargo en este curso sólo crearemos objetos con atributos
 Los objetos se crean con la siguiente sintaxis:

var movie = {
movieID: 1, var actor = {
title: 'Star Wars', actorID: 5703,
year: 1977, name: 'Mark Hamill',
score: 8.9, };
votes: 14182
};
Funciones

 JavaScript soporta funciones, objetos y clases! Pero en este curso sólo se mostrarán
funciones y objetos; si desea puede explorar clases en el tutorial de w3schools.
 Las funciones se crean con la palabra reservada function; las variables creadas con
var tendrán un alcance global dentro de la función.

var name = 'Netscape';


var html = render('Hola ' + name);
document.write(html);
function render(value){
var str = '<p>' + value + ‘</p>’;
return str;
}
Depuración

 Los Browser poseen una consola de JavaScript en la que se puede mostrar el valor
de las variables a modo de depuración.

var name = 'Netscape';


document.write(render('Hola ' + name));
function render(value){
console.log(value);
var str = '<p>' + value + ‘</p>';
console.log(str);
return str;
}
Eventos

 Un evento es una acción que ocurre sobre


un documento HTML, como: <h1>Probando JavaScript</h1>
 Hacer click sobre algo (onclick) <button
onclick="saludar('Netscape')">
 Pasar el cursor sobre algún elemento
(onmouseover) Saludar
</button>
 Cambiar el valor de un elemento, como en un
formulario (onchange)
<script>
 Terminar de cargar la página HTML actual (onload) function saludar(name){
 etc. var html = render('Hola ' + name);
document.write(html);
 En JavaScript es posible asociar acciones }
a los eventos function render(value){
var str = '<p>' + value + '</p>';
 El código mostrado funciona, pero no return str;
tiene el comportamiento deseado }
</script>
HTML DOM (Document Object Model)

 HTML DOM permite tratar a un documento


HTML como si fueran objetos en JavaScript.
 Estos objetos tendrán métodos y atributos.
 El objeto document representa al documento
HTML entero
 var element = document.getElementById(id);
 var elements = document.getElementsByTagName(name);

 Se podrá modificar el HTML de un objeto


 document.getElementById(id).innerHTML = text;

 Se podrá obtener el texto de un objeto


 var text = document.getElementById(id).value;
Cambios en el HTML sin recarga

 La última vez que se usó <h1>Probando JavaScript</h1>


document.write() cambio todo el <div id='saludo'>
<button onclick="saludar('Netscape')">
contenido, esto debido a que esta Saludar
función se llamó después de que el </button>
documento había sido cargado </div>
<script>
 Este ejemplo nos permite modificar function saludar(name){
una parte del documento HTML sin var html = render('Hola ' + name);
que el resto se vea afectado var element =
document.getElementById('saludo');
element.innerHTML = html;
}
function render(value){
var str = '<p>' + value + ‘</p>';
return str;
}
</script>
JavaScript y formularios

 Para usar JavaScript de manera <h1>Probando JavaScript</h1>


similar a los formularios, se debe <label for='userName'>Nombre: </label>
evitar el tag <form> <input type='text' name='userName' id='userName'>
<div id='saludo'>
 El uso de los demás tags propios de <button onclick="saludar()">Saludar</button>
</div>
un formulario, debe incluir un id, que
<script>
facilite la extracción de su contenido function saludar(){
var name =
document.getElementById('userName').value;
var html = render('Hola ' + name);
var element = document.getElementById('saludo');
element.innerHTML = html;
}
function render(value){
var str = '<p>' + value + ‘</p>';
return str;
}
</script>
Funciones como valor (closures)
<h1>Probando JavaScript</h1>
 En JavaScript al igual que en Java, las <label for='userName'>Nombre: </label>
funciones pueden ser usadas como <input type='text' name='userName' id='userName'>
valores y enviarse como argumentos en <div id='saludo'>
la llamada de otra función o <button onclick="saludar(render2)">Saludar</button>
almacenadas en arreglos. </div>
<script>
 La cerraduras (closures) o funciones function saludar(render){
anónimas de JavaScript, tienen un var name =
fundamento teórico y aplicación práctica document.getElementById('userName').value;
var html = render('Hola ' + name);
muy actual, sin embargo estos temas se
var element = document.getElementById('saludo');
verán en este curso. element.innerHTML = html;
}
function render1(value){
return '<p>' + value + '</p>';
}
function render2(value){
return '<h2>' + value + '</h2>';
}
</script>
Fetch https://www.geoplugin.com/webservices/xml

 Esta instrucción permitirá que nuestros scripts puedan pedir datos a un servidor (CGI)
 url, es la dirección web de algún CGI que retorna “algo”.
 promise, es el objeto que nos permite conectarnos con el servidor.
 data, contiene la respuesta del CGI

 Hay que tener en cuenta que promise es un objeto asíncrono

var url = 'http://www.geoplugin.net/xml.gp?base_currency=PEN';


var promise = fetch(url);
promise.then(response => response.text())
.then(data => {
//El código que trata los datos va aquí
console.log(data);
}).catch(error => {
console.log('Error:', error);
});
Usando APIs con Fetch

 Existen muchas APIs abiertas a las que se puede acceder de forma gratuita y algunas
de ellas devuelve contenido XML.
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<script>
var url = 'http://www.geoplugin.net/xml.gp?base_currency=PEN';
var promise = fetch(url);
promise.then(response => response.text())
.then(data => {
var xml = (new window.DOMParser()).parseFromString(data, "text/xml");
console.log(xml);
}).catch(error => {
console.log('Error:', error);
});
</script>
</head>
<body>
</body>
</html>
Ejemplo - Capa HTML

<!DOCTYPE html>
<html lang="en-US">
<head>

</head>
A
<body>
<p>Player 1: Enzo</p>

</body>
B
</html>
Ejemplo - Capa CSS
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

A
<title>Ejemplo de JavaScript</title>
<style>
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;
}
</style>
Ejemplo - Capa JavaScript

<script>
const para = document.querySelector('p');
para.addEventListener('click', updateName);
B
function updateName() {
const name = prompt('Ingrese un nuevo nombre');
para.textContent = `Player 1: ${name}`;
}
</script>
Ejemplo - Resultado

También podría gustarte