Javascript

JavaScript
Desarrollo de Aplicaciones Web

¿Qué es Javascript?
¿Qué es Javascript?
• Es un lenguaje interpretado, es un lenguaje Script.
• Extiende las capacidades de las páginas Web
• El código está integrado en el HTML
• Se interpreta en el ordenador que recibe el HTML, no se compila
• Ejecución dinámica: Los programas y funciones no se chequean hasta que se ejecutan
• Trabaja con los elementos del HTML
• No se declaran los tipos de variables
• Se ejecuta en el cliente,
• Muy utilizado para validación de datos
• Muy utilizado para poner efectos en las páginas de Web
¿Qué se puede hacer con JavaScript?
• Chequear Formularios
– Comprobar que se han rellenado correctamente antes de enviarlos y
que el servidor de erro
• Realizar cálculos simples
• Hacer interactiva una página web
• Juegos
• ...
Incorporación a HTML
• La incorporación se hace con la etiqueta SCRIPT
<script>
Código en JavaScript
</script>
Ocultamiento de guiones
• Algunos navegadores no soportan scripts, por lo que ignorarán
la marca <SCRIPT>, pero no el contenido
• Solución: ocultarlo como comentario
<script language="JavaScript">
<!– Ocultar guion
Programa en JavaScript
// fin de ocultamiento -->

</script>
La TAG <SCRIPT> </SCRIPT>
• Sintaxis
<SCRIPT type="text/javascript" src="fuente.js"></SCRIPT>
• Atributo SRC: fichero código fuente
<SCRIPT type="text/javascript">
function valor_abs(form) {
var num = eval(form.expr.value)
if (num >= 0) form.result.value = num
else num = -num
form.result.value = num
}
</SCRIPT>
Un Simple Script
<html>
<head> <title>First JavaScript Page</title> </head>
<body>
<h1>First JavaScript Page</h1>
<script type="text/javascript">
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
</script>
</body>
</html>
JavaScript embebido
<html>
<head>
<title>First JavaScript Program</title>
</head>
<body>
<script language=“JavaScript” src=“your_source_file.js”></script>
</body>
</html>
• Una etiqueta <script> se puede colocar dentro de <head> o

<body> en un documento HTML .
JavaScript Source File
<script language=“JavaScript”
src=“your_source_file.js”></script>
• SRC – especifica la ubicación de un script externo
• TYPE – especifica el tipo de lenguaje script
• LANGUAGE – especifica el lenguaje script
• TYPE y LANGUAGE tiene similar función, se suele usar LANGUAGE para
especificar el lenguaje usado en el script
12
Confusión JavaScript
JavaScript Java
Interpretado por el ordenador del lado cliente Compilado en el servidor antes de ejecutar en el
equipo cliente
Enlace dinámico, las referencias a objetos se Enlace estático, los objetos referenciados deben
comprueban en tiempo de ejecución existir en tiempo de compilación
No hay necesidad de declarar los tipos de datos Los tipos de datos deben declararse
El código esta embebido en HTML El código no esta integrado en HTML
Limitado por la funcionalidad del navegador Las aplicaciones Java son independientes
Puede acceder a los objetos del navegador Java no tiene acceso a los objetos del navegador
Tres métodos
<script language="JavaScript">
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>
Método alert()
<head>
<script language=“JavaScript”>
alert(“An alert triggered by JavaScript”);
</script>
</head>
• Es uno de los métodos más fáciles de usar entre, alert(), prompt() y

confirm().
• Se puede utilizar para mostrar información textual (simple y concisa).
• El usuario puede hacer clic en "OK" para cerrarla.
Método confirm()
<head>
confirm(“Are you happy with the class?”);
</script>
</head>
• Este cuadro se utiliza para dar al usuario la opción de Aceptar

o Cancelar.
• Es muy similar al método "alert () "
Método promt()
<head>
prompt(“What is your student id number?”);
prompt(“What is your name?”,”No name”);
</script>
</head>
• Esta es la única que permite al usuario escribir en su

respuesta a la pregunta específica.
• Se puede dar un valor por defecto para evitar mostrar
"indefinido".
Dinamismo
Dinamismo
Cambio de atributos CSS
Cambio de atributos CSS
Esconder /Mostrar elementos HTML
Esconder /Mostrar elementos HTML
Etiqueta <script>
JavaScript externo
Variables
<head>
Declaración de Variable
var id;
id = prompt(“What is your student id number?”);
alert(id);
name = prompt(“What is your name?”,”No name”);
alert(name);
</script>
</head>
• Debemos usar "var", ya que es más fácil hacer un seguimiento

de las variables.
Strict Equality Operators
var currentWord=“75”;
var currentValue=75;
var outcome1=(currentWord == currentValue);
var outcome2=(currentWord === currentValue);
alert(“outcome1: “ + outcome1 + “ : outcome2: “ + outcome2);
</script>
DOM
• DOM es una plataforma o interfaz neutral que permite a los
programas y scripts accesar o modificar el contenido,
estructura y estilo de los documentos.
• Una interfaz de programación para XML
• Un estándar W3C
• Un modelo de objetos para XML
DOM
• El navegador web construye un modelo de la página
web (el documento) que incluye todos los objetos de
la página (etiquetas, texto, etc.)
• Todas las propiedades, métodos y eventos disponibles
para el desarrollador web para la manipulación y
creación de páginas web están organizados en
objetos.
• Esos objetos son accesibles a través de los lenguajes
de script en los navegadores web modernos.
DOM
Esto es lo que el browser lee
<html>
<head>
<title>Sample DOM Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</body>
</html>
Esto es lo que el browser muestra en pantalla.

Document Diagrama del modelo que el browser está
trabajando con la página.
<html>
<head> <body>
<title>
"Sample DOM Document"

<h1> <p>
"An HTML Document"
"This is a" <i> "document"
"simple"
¿Por qué es útil?
• Por que podemos acceder al modelo.
• El modelo se pondrá a disposición de los scripts que se
ejecutan en el navegador, no sólo el propio navegador.
• Un script puede descubrir cosas sobre el estado de la
página.
• Un script puede cambiar las cosas en respuesta a los
eventos, incluyendo peticiones de los usuarios.
• Se ha utilizado esta capacidad en la programación GUI.
En GUI
Dos buttons para controlar los resultados
Un text field para mostrar los resultados
Un par de radio buttons para controlar la salida
Un button para reinicializar

setResults(resultString)
<script type="text/javascript">
function setResults(resultString) {
var tempString = resultString;
if (document.getElementById("radioLC").checked) {
tempString = tempString.toLowerCase();
} else if (document.getElementById("radioUC").checked) {
tempString = tempString.toUpperCase();
}
document.getElementById("resultField").value = tempString;
}
</script>
Los script resaltantes hacen referencia a diversos

objetos en el document object model
document.getElementById("radioLC").checked
• Referencia a varios nodos en el modelo de la página que el

navegador ha construido.
document
• La raíz del árbol es un objeto de tipo HTMLDocument
• Usando la variable global document, podemos acceder a todos los
nodos en el árbol, así como a funciones útiles y otras informaciones
globales.
• getElementById("radioLC")
• Función predefinida que hace uso del Id del que puede ser definido por
cualquier elemento de la página.
• Un id debe ser único en la página, de modo que sólo un elemento es el
que devuelve esa función.
• El argumento para getElementById especifica qué elemento se está
solicitando
• checked
• Esta es una propiedad particular del nodo radio button
• Cada tipo de nodo tiene su propio conjunto de propiedades
para el botón de la radio: se marca, nombre, ...
• Para radio button: checked, name, ...
• Hace referencia al DOM HTML para obtener información específica para
cada tipo de elemento
Demo DOM
Demo DOM
Demo DOM
Referencias
• Referencias
• JavaScript, The Definitive Guide
• by David Flanagan. Publisher O'Reilly
• W3C Document Object Model

• http://www.w3.org/DOM/
• http://www.w3.org/2003/02/06-dom-support.html
• Document Object Model in Mozilla

• http://www.mozilla.org/docs/dom/
fit100-16-dom © 2006 University of Washington

Nov 1

Javascript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

Desarrollo de Aplicaciones Web

• Hacer interactiva una página web

// fin de ocultamiento -->

• Atributo SRC: fichero código fuente

• Una etiqueta <script> se puede colocar dentro de <head> o

• Es uno de los métodos más fáciles de usar entre, alert(), prompt() y

• Este cuadro se utiliza para dar al usuario la opción de Aceptar

• Esta es la única que permite al usuario escribir en su

• Debemos usar "var", ya que es más fácil hacer un seguimiento

Esto es lo que el browser muestra en pantalla.

"Sample DOM Document"

"An HTML Document"

"This is a" <i> "document"

Dos buttons para controlar los resultados

Un text field para mostrar los resultados

Un par de radio buttons para controlar la salida

Un button para reinicializar

Los script resaltantes hacen referencia a diversos

• Referencia a varios nodos en el modelo de la página que el

• W3C Document Object Model

• Document Object Model in Mozilla

fit100-16-dom © 2006 University of Washington

Vous aimerez peut-être aussi