Este documento proporciona una introducción a las tecnologías web JavaScript y HTML. Explica que JavaScript extiende las capacidades de las páginas web permitiendo interacción e integración con elementos HTML. Además, describe la sintaxis básica de JavaScript, incluyendo declaración de variables, tipos de datos, operadores, sentencias de control, funciones, eventos y objetos importantes como window y document. Finalmente, incluye un ejemplo de código JavaScript asociado a un evento en una página HTML.

1. Tecnologías Web
Profesor:
Luis López Bracamonte

2. HTML
 Hasta ahora se ha revisado páginas HTML Completas y
vistosas
 Una vez cargada en el explorador no se puede interactuar
(procesar la información)
 Sería útil poder interaccionar y programar acciones asociadas
a ciertos elementos de la página

3. Javascript
 Desarrollado originalmente por Netcape(1995) con el nombre
de Mocha, el cuál fue renombrado posteriormente a
LiveScript, para finalmente quedar como JavaScript
 Extiende las capacidades de las páginas Web
 El código está integrado en el HTML
 Trabaja con los elementos del HTML
 Es un lenguaje interpretado
 Está basado en objetos y guiado por eventos
 La ejecución de los programas es en el navegador del cliente:
Es el navegador el que interpreta las instrucciones
 No hay intervención por parte del servidor
 Javascript NO es Java

4. Usos de Javascript
 Validar Formularios, Realizar cálculos simples, Hacer
interactiva una página web

5. Javascript
 Los programas se ejecutan en el navegador (cliente):

6. Sintaxis de Javascript
 Toma su sintaxis de lenguajes de programación más
conocidos como C y Pascal
 Declaración de Variable
Var strnombre;
 Los Nombre de una variable:
 No pueden contener espacios
 Distingue entre mayúsculas y minúsculas.
 No pueden contener acentos, puntos o cualquier signo
gramatical
 No pueden comenzar con un dígito ni contener la letra "ñ”
 Nombre único y exclusivo para cada variable salvo que
estén es 2 funciones distintas

7. Sintaxis de Javascript
 El tipo de dato asociado a la variable es asignado
automáticamente por JavaScript. esto implica que Dependerá
del primer valor que se guarde en la variable. Por tanto los
tipos de variable existentes son:
 Numérica
 Boolean
 String
 Un aspecto a considerar, es la conversión de datos, que es
automática. Transforma los datos de todas la variables en
una expresión según el tipo de la primera variable
num1="12";
num2=10;
x=num1+num2; // Engrega como resultado 1210
y=num2+num1; // Engrega como resultado 22

8. Sintaxis de Javascript
 Tipo de Conversion:
 De texto a numero
nuNumero=parseInt(strTexto)
 De texto a coma flotante
(decimal) nuNumero=parseFloat(strTexto)
 De numérica a texto: Es automática
 Operadores, JavaScript define Tres tipos de operadores,
aritméticos, relacionales y lógicos. También hay definido un
operador para realizar determinadas tareas, como las
asignaciones

9. Sintaxis de Javascript
Operador Descripción
= Asignación
- Resta
+ Suma
* Multiplicación
/ Divide
% Resto de una división
-- Decremento en 1
++ Incrementa en 1

10. Sintaxis de Javascript
Operador Descripción
< Menor que
> Mayor que
<= Menor o igual
>= Mayor o igual
== Igual
!= Distinto
&& AND
|| OR
! NOT

11. Sintaxis de Javascript
 Comentarios:
/*... * / Bloque de comentarios.
// comentarios línea a línea.
 Sentencias de Control, iteración y salto:
 if (expresion-booleana)
{
Sentencia;
{
[else]
{
Sentencia;
}

12. Sintaxis de Javascript
 switch (expresión)
{
case constante1:
sentencia;
break;
case constante2:
sentencia;
break;
case constanteN:
sentencia;
break;
[default:]
sentencia(s);
}

13. Sintaxis de Javascript
 while(condicion[es])
{
cuerpo;
[iteración;]
}
 do
{
cuerpo;
[iteración;]
}while(condición);
 for (inicio;cond_fin;iteración)
{
sentencia(S);
}

14. Funciones
 De igual forma que en C o Java, Javascript se basa en el uso
de funciones
 Sintaxis de Desarrollo
function nombre_funcion([var1,var2,varN])
{
Intrucciones
}
 Sintaxis de llamado
 En un Tag
<tag evento=nombre_funcion([val1,val2,valN]);>
 Dentro de una función
nombre_funcion(valor1,valor2,valorN);

15. Eventos
 Un evento es un mecanismo por el cual se detectará las
acciones que realiza el usuario y llamar automáticamente a la
función que tengamos asociada
 Desde esta función se realizará las acciones desarrolladas
 Éstos estarán asociados a los objetos contenidos en una
página HTML

16. Eventos
Evento Descripción
onLoad Terminar de cargar una página o frame (entrar)
onUnLoad Descargar una página o frame (salir)
onAbort Abortar la carga de una página
onError Producirse algún error en la carga de la página
onMouseOver Pasar el ratón por encima de un enlace, area o frame
Dejar de estar el ratón encima de un enlace, area o
onMouseOut frame
onMouseMove Mover el ratón por el documento
onKeyUp Presionar una tecla
onClick Hacer click con el ratón

17. Eventos
Evento Descripción
onResize Dimensionar la ventana del navegador
onMove Mover la ventana del navegador
Modificar texto en un control de edición Sucede al perder el
onChange foco
onSelect Seleccionar texto en un control de edición
onFocus Situar el foco en un control
onBlur Perder el foco un control
onSubmit Enviar un formulario
onReset Inicializar un formulario

18. Objetos window y document
 Para cada página HTML, el navegador define un objeto
window y un document para usarlos con Javascript
 A partir del window se accederá a ciertas propiedades de la
ventana en la que se visualiza la página
Método Descripción Sintaxis
open Abrir Página window.open(“url”,”name”,”atrbs”);
close Cerrar window.close();
Página
Location Enlaza con window.Location=”url”;
una página
print Imprime el window.Print();
documento

19. Objetos window y document
Método Descripción Sintaxis
alert Abre ventanas de alerta alert(“Mensaje”);
confirm Abre ventanas de confirm(“Mensaje”)
confirmación, el retorno es
de tipo Bolean
prompt Abre ventana que solicita prompt(datos,”val inici”);
datos al visitador del sitio
status Texto en barra estado windows.status=”mensaje”;

20. Objetos window y document
 A partir del document se accederá a todos los elementos de
la página HTML que estamos viendo
Método Descripción Sintaxis
write Escribe en el documento document.write(dato
);
writeln Escribe y salta de línea document.writeln(da
to);
alinkColor Color de enlace (sin usar) document.alinkColor
=”color”;
linkColor Color de enlace (activo) document.linkColor=
”color”;
vlinkColor Color de enlace (usado) document.vlinkColor
=”color”;

21. Objetos window y document
Método Descripción Sintaxis
bgColor Color de fondo document.bgColor=
”color”;
fgColor Color del texto document.fgColor=
”color”;
referrer Url del documento anterior var=document.refe
rrer;
location Url del documento actual var=document.loca
tion;
lastModified Fecha modificación var=document.last
Modified;

22. Ejemplo Javascript
Tag Script
Evento
Función JS

23. Ejemplo Javascript

24. Ejemplo Javascript

25. Ejemplo Javascript

26. Ejemplo Javascript

27. Ejemplo Javascript

28. Web Estadíca(Capa Presentación)