Clase2

289 views

Published on

informática iplacex

  • Be the first to comment

  • Be the first to like this

Clase2

  1. 1. Tecnologías Web Profesor: Luis López Bracamonte
  2. 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. 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. 4. Usos de Javascript Validar Formularios, Realizar cálculos simples, Hacer interactiva una página web
  5. 5. Javascript Los programas se ejecutan en el navegador (cliente):
  6. 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. 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. 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. 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. 10. Sintaxis de JavascriptOperador Descripción< Menor que> Mayor que<= Menor o igual>= Mayor o igual== Igual!= Distinto&& AND|| OR! NOT
  11. 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. 12. Sintaxis de Javascript  switch (expresión) { case constante1: sentencia; break; case constante2: sentencia; break; case constanteN: sentencia; break; [default:] sentencia(s); }
  13. 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. 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. 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. 16. EventosEvento DescripciónonLoad Terminar de cargar una página o frame (entrar)onUnLoad Descargar una página o frame (salir)onAbort Abortar la carga de una páginaonError Producirse algún error en la carga de la páginaonMouseOver Pasar el ratón por encima de un enlace, area o frame Dejar de estar el ratón encima de un enlace, area oonMouseOut frameonMouseMove Mover el ratón por el documentoonKeyUp Presionar una teclaonClick Hacer click con el ratón
  17. 17. EventosEvento DescripciónonResize Dimensionar la ventana del navegadoronMove Mover la ventana del navegador Modificar texto en un control de edición Sucede al perder elonChange focoonSelect Seleccionar texto en un control de ediciónonFocus Situar el foco en un controlonBlur Perder el foco un controlonSubmit Enviar un formularioonReset Inicializar un formulario
  18. 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áginaMétodo Descripción Sintaxisopen Abrir Página window.open(“url”,”name”,”atrbs”);close Cerrar window.close(); PáginaLocation Enlaza con window.Location=”url”; una páginaprint Imprime el window.Print(); documento
  19. 19. Objetos window y documentMétodo Descripción Sintaxisalert Abre ventanas de alerta alert(“Mensaje”);confirm Abre ventanas de confirm(“Mensaje”) confirmación, el retorno es de tipo Boleanprompt Abre ventana que solicita prompt(datos,”val inici”); datos al visitador del sitiostatus Texto en barra estado windows.status=”mensaje”;
  20. 20. Objetos window y document A partir del document se accederá a todos los elementos de la página HTML que estamos viendoMétodo Descripción Sintaxiswrite 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. 21. Objetos window y documentMétodo Descripción SintaxisbgColor 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. 22. Ejemplo Javascript Tag Script Evento Función JS
  23. 23. Ejemplo Javascript
  24. 24. Ejemplo Javascript
  25. 25. Ejemplo Javascript
  26. 26. Ejemplo Javascript
  27. 27. Ejemplo Javascript
  28. 28. Web Estadíca(Capa Presentación)

×