JavaScript RIA HTML Dinámico (DHTML)
Anuncio
Cracterísticas de las aplicaciones Web
convencionales
• “Click, wait, and refresh” interacción
– Las actualizaciones de la página por parte del servidor
se requieren para todos los eventos, envío de datos y
navegación.
JavaScript
• Modelo de comunicación sincrónico del tipo
“request/response” .
– El usuario tiene que esperar la respuesta.
• Page-driven: El flujo de trabajo se basa en páginas
– La lógica de navegación la determina el servidor.
1
RIA
2
HTML Dinámico (DHTML)
Rich Internet Application/Rich user experience
Tecnologías del lado del cliente
• DHTML es una combinación de tecnologías
usadas para crear páginas web dinámicas e
interactivas.
• Cuando se usa una aplicación Desktop, las cosas pasan mas
naturalmente.
• No es necesario pulsar un botón para observar alguna
respuesta, basta con mover el mouse y se observan algunas
respuestas.
– HTML – Para crear páginas con texto, imágenes, links y
otros elementos.
– CSS - Style Sheets para dar formato y presentación a los
documentos.
• Por ejemplo, si se pasa el mouse sobre una celda en una hoja
de cálculo, el color de la celda puede cambiar.
– JavaScript – El lenguaje de programación para accesar y
controlar dinámicamente las propiedades de ambos (HTML
y CSS)
3
4
JavaScript
Usos de JavaScript
• JavaScript es un lenguaje de programación simple,
interpretado, debilmente tipado y orientado a objetos.
•
•
•
•
• JavaScript existe en 2 variantes
– client-side que se ejecuta en Web browsers
– server-side que se ejecuta en Web servers
• La sintaxis de JavaScript se parece a la de C, C++, Java
Rollovers
Validación de formas
Generación dinámica de formas
Accesar el DOM
• JavaScript fué desarrollado por Netscape
– se llamaba LiveScript (1996)
5
Document Object Model
6
Donde se ubica JavaScript
El Document Object Model es una interfaz
independiente de la plataforma y del lenguaje que
permite a los programas y scripts accesar
dinámicamente y cambiar el contenido, estructura
y estilo de los documentos.
w3c.org
• Se pueden incluir directamente el programa en una página
XHTML dentro de las etiquetas:
– <script>…</script>
• Se puede realcionar con un archivo externo
– <script src="script01.js" type="text/javascript"
language="javascript"></script>
• Se puede escribir una expresión JavaScript como valor de
un atributo XHTML.
• Se pueden especificar instrucciones JavaScript para
manejar los eventos de algunas etiquetas XHTML.
7
8
Aspectos Básicos
Libro de Texto
Internet & World Wide Web How to Program, 4/e
Harvey M. Deitel and Paul J. Deitel
• JavaScript es sensible a las mayúsculas (minúsculas)
• JavaScript ignora espacios, tabs, newlines
• El punto y coma ; es opcional a menos que se pongan
varias instrucciones en una sola línea.
• Se pueden usar comentarios estilo C y C++
•
•
•
•
•
•
•
•
….. //comentario hasta el fin de línea
/* Comentario de
multiples líneas */
Chapter 6: JavaScript: Introduction to Scripting
Chapter 7: JavaScript: Control Statements, Part 1
Chapter 8: JavaScript: Control Statements, Part 2
Chapter 9: JavaScript: Functions
Chapter 10: JavaScript: Arrays
Chapter 11: JavaScript: Objects
Chapter 12: Dynamic HTML: Object Model and Collections
Chapter 13: Dynamic HTML: Event Model
9
Impresión de una línea de texto
10
Impresión mediante instrucciones separadas
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.2: welcome.html -->
<!-- Displaying a line of text. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A First Program in JavaScript</title>
<script type = "text/javascript">
<!-document.writeln(
"<h1>Welcome to JavaScript Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
11
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.3: welcome2.html -->
<!-- Printing one line with multiple statements. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Printing a Line with Multiple Statements</title>
<script type = "text/javascript">
<!-document.write( "<h1 style = \"color: magenta\">" );
document.write( "Welcome to JavaScript " +
"Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
12
Impresión de varias líneas mediante una instrucción
Impresión en caja de diálogo
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.4: welcome3.html -->
<!-- Printing on multiple lines with a single statement. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Printing Multiple Lines</title>
<script type = "text/javascript">
<!-document.writeln( "<h1>Welcome to<br />JavaScript" +
"<br />Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
<!-- Fig. 6.5: welcome4.html -->
<!-- Alert dialog displaying multiple lines. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Printing Multiple Lines in a Dialog Box</title>
<script type = "text/javascript">
<!-window.alert( "Welcome to\nJavaScript\nProgramming!" );
// -->
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
13
Producto de 3 enteros
14
Producto de 3 enteros (cont…)
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
xVal = window.prompt( "Enter first integer:" );
yVal = window.prompt( "Enter second integer:" );
zVal = window.prompt( "Enter third integer:" );
<!-- Exercise 6.6: product.html -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Product of Three Integers</title>
<script type = "text/javascript">
<!-// Calculate the product of three integers
var x, y, z, result;
var xVal, yVal, zVal;
x = parseInt( xVal );
y = parseInt( yVal );
z = parseInt( zVal );
result = x * y * z;
document.writeln( "<h1>The product is " +
result + "<h1>" );
// -->
</script>
</head><
15
16
Usando cajas “prompt”
Usando cajas “prompt” (cont…)
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
document.writeln( "<h1>Hello " + name +
", welcome to JavaScript programming!</h1>" );
// -->
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
<!-- Fig. 6.7: welcome5.html -->
<!-- Using Prompt Boxes -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using Prompt and Alert Boxes</title>
<script type = "text/javascript">
<!-var name; // string entered by the user
// read the name from the prompt box as a string
name = window.prompt( "Please enter your name" );
18
17
Operadores relacionales
Operadores relacionales (Cont…)
// read the name from the prompt box as a string
name = window.prompt( "Please enter your name" );
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// determine whether it is morning
if ( hour < 12 )
document.write( "<h1>Good Morning, " );
<!-- Fig. 6.17: welcome6.html -->
<!-- Using equality and relational operators. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using Relational Operators</title>
<script type = "text/javascript">
<!-var name; // string entered by the user
var now = new Date(); // current date and time
var hour = now.getHours(); // current hour (0-23)
// determine whether the time is PM
if ( hour >= 12 )
{
// convert to a 12-hour clock
hour = hour - 12;
19
// determine whether it is before 6 PM
if ( hour < 6 )
document.write( "<h1>Good Afternoon, " );
20
Switch
Operadores relacionales (Cont…)
<script type="text/javascript">
//Note that Sunday=0, Monday=1, Tuesday=2, etc.
var d=new Date()
theDay=d.getDay()
// determine whether it is after 6 PM
if ( hour >= 6 )
document.write( "<h1>Good Evening, " );
} // end if
switch (theDay){
case 5:
document.write("Finally Friday")
break
case 6:
document.write("Super Saturday")
break
case 0:
document.write("Sleepy Sunday")
break
default:
document.write("I'm looking forward to this
weekend!")
}
</script>
document.writeln( name +
", welcome to JavaScript programming!</h1>" );
// -->
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
21
Ciclo for
22
Ciclo while
<script type="text/javascript">
<script type="text/javascript">
var i=0;
while (i<=10)
{
document.write("The number is " + i);
document.write("<br />");
i=i+1;
}
</script>
for (i=0;i<=10;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
23
24
JavaScript en línea
Arreglos
Es diferente de
<script type="text/javascript">
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
<a href="javascript:alert('Count = ' + (4+8+15+16+23+42))">108</a>
window.alert(myCars[2]);
</script>
<a href="javascript:alert('Count = ' + 4+8+15+16+23+42)">108</a>
25
Funciones
<html><head>
<script type="text/javascript">
function displaymessage(){
alert("Hello World!");
}
</script>
</head><body>
<input type="button" value="Click me!"
onclick="displaymessage()" />
<p>By pressing the button above, a function will be called.
The function will alert a message.</p>
</body></html>
27
<script type="text/javascript">
var myCars=new Array("Saab",
"Volvo", "BMW");
window.alert(myCars[2]);
</script>
26
