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.
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;