JavaScripts
Tecnologías de
Desarrollo Web
I
Orígenes de JS
• Netscape
– Netscape Navigator 2.0  JS v1.0
– Netscape Navigator 3.0  JS v1.1
– Netscape Navigator 4.0  JS v1.2
• Microsoft
– Internet Explorer 3.0 
¿JS v1.0?
Jscript
2
¿Cliente o Servidor?
• JS de Cliente
– Se ejecuta en el navegador.
– Manipula y gestiona de forma restringida
los recursos del cliente.
– NN o IE.
• JS de Servidor
– Interpretados por el servidor.
– Proporciona objetos adicionales.
– FastTrack o IPlanet.
3
Ejemplo
<html>
<body>
<br>
Documento HTML tradicional <br>
<script language="JavaScript">
document.write("Parte JavaScript!")
</script> <br>
HTML habitual
</body>
</html>
4
Características del Lenguaje
• Sintaxis similar a C.
• Tipado de variables debil.
var x=3,y=“3”,z=3.0;
• Define funciones asociadas a ventanas
de diálogo predefinidas.
alert(“Esta ventana es un aviso”);
• Define una jerarquía de objetos sobre
los elementos del navegador.
window.location.href=window.history.next;
5
Ejemplo Funciones
<html>
<script language="JavaScript">
function factorial(n) {
var f=1;
while(n>1)
f*=n--;
document.write(f); }
</script>
<body>
5! Es <script>factorial(5)</script>
</body>
</html>
6
Funciones de Argumentos Variables
<html>
<body>
<script language="JavaScript">
<!-function imprimir(pre)
{
for(var i=1;i<imprimir.length;i++)
document.write(pre+“:“+imprimir[i]+“<BR“);
}
imprimir(“Hola“,“Yo“,“Tu“,“El“,“Todos“);
// -->
</script>
</body>
</html>
7
Arrays
<script language="JavaScript">
<!-...
var valores=new Array();
valores[0]=“Un String“; // Un string
valores[1]=13;
// Un numero
valores[2]=new Array(); // Otro array
...
// -->
</script>
8
Codigo Embebido o Externo
<html>
<script src=“mis_funciones.js">
<body>
<br>
Documento HTML tradicional <br>
<script language="JavaScript">
<!-document.write("Parte JavaScript!")
// -->
</script> <br>
HTML habitual
</body>
</html>
Mis_funciones.js
9
Usos de Programas JS
• Operaciones asociadas a la carga del
documento:
– Gestión de Cookies.
– Documentos dependientes del cliente.
• Operaciones asociadas a eventos:
– Validación de formularios.
– Presentaciones interactivas.
10
Eventos
• Asociados a cada elemento del
documento:
– OnClick: Al ser pulsado(boton,ckeckbox).
– OnMouseOver: Al mover el cursor sobre él.
– OnMouseOut: Al sacar el cursor de él.
– OnChange: Al ser modificado (texto).
– OnFocus/OnBlur: Al ganar/perder el foco.
– OnSelect: Al seleccionar un texto
(textarea).
– ...
11
Ejemplo Eventos
<html>
<body>
<br>
Pulse el boton
<form>
<input type="button"
value="PULSE"
onClick="alert('Hola')">
</form>
</body>
</html>
12
Jerarquías de Objetos
13
Ejemplo Jerarquía de Objetos
<html>
<script language="JavaScript">
function saludo() {
var name=
document.forms[0].elements[0].value;
alert("Hola "+ name);}
</script>
Form[0]
<body>
Elements[0]
<form>
Nombre <input type="text"><br>
<input type="button"
value="Saludo "
onClick=saludo()>
</form>
</body>
</html>
14
Objetos del Navegador (N4.0)
15
Otros Usos de JS
• Creación/Gestión de Ventanas y
Frames.
• Manejo de Layers (NN v4.x).
• Gestión de Cookies.
• Drag & Drop (NN v4.x).
• Gestión de eventos de JS v1.2.
16
Descargar

JavaScripts