Your SlideShare is downloading. ×
Introducción a la programación en ambientes web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introducción a la programación en ambientes web

2,329
views

Published on

Tercera parte del curso Programación para Internet …

Tercera parte del curso Programación para Internet
Incluye un vistazo general a las distintas tecnologías de programación del lado del cliente y un aprendizaje breve acerca de JavaScript.
Se concluye con una explicación de lenguajes de guion del lado del servidor asi como de CGI

Published in: Technology

1 Comment
3 Likes
Statistics
Notes
  • Ahora con sitio en http://michelle.slmx.org/ donde podrás encontrar mas material
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,329
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Programación para InternetPROGRAMACIÓN PARA INTERNET Módulo 3. Introducción a la programación en ambientes Web Objetivo: Aprender los conceptos básicos de la programación Web. 3.1. Introducción a la programación del “lado del cliente” 3.2. Fundamentos de JavaScript 3.3. Uso de Herramientas de Programación JavaScript 3.4. Programación con formularios 3.5. Introducción a la programación del “lado del servidor” 3.6. Fundamentos de la programación CGI (common gateway interface) 3.7. Lenguajes de guiones empotrados en HTML Lic. Nancy Michelle Torres Villanueva
  • 2. Programación del lado del clientePROGRAMACIÓN PARA INTERNET ● Lenguaje de Marcado ● HTML ● XHTML ● XML* ● Applets ● Java ● Scripting ● Javascript / JScript ● VBscript ● Otras tecnologías ● Flash Lic. Nancy Michelle Torres Villanueva
  • 3. JavaScriptPROGRAMACIÓN PARA INTERNET ● Javascript es lo que se conoce como lenguaje script, es decir: se trata de código de programación que se inserta dentro de un documento. Javascript fue desarrollado por la empresa Netscape con la idea de potenciar la creación de páginas Web dinámicas para su navegador Navigator. Lic. Nancy Michelle Torres Villanueva
  • 4. JavaScript...PROGRAMACIÓN PARA INTERNET ● Javascript NO crea programas independientes, dependen por completo del código HTML de la página. Lic. Nancy Michelle Torres Villanueva
  • 5. Inclusión de JavaScript en las páginasPROGRAMACIÓN PARA INTERNET ● Para hacer que un documento HTML incluya instrucciones en Javascript se debe hacer uso de la etiqueta <SCRIPT> de esta forma: <script language=”JavaScript”> código JavaScript </script> ● Si se quiere especificar qué versión de Javascript se utiliza, para evitar que navegadores que no soportan la versión decodifiquen el Javascript, entonces se usa, por ejemplo: <script language=”JavaScript1.3”> Lic. Nancy Michelle Torres Villanueva
  • 6. Navegadores no compatiblesPROGRAMACIÓN PARA INTERNET ● Los navegadores que no soportan Javascript, no interpretarían las instrucciones Javascript sino que mostrarían el texto de las instrucciones en la página. Para evitar que estos navegadores lean el código en Javascript se hace: <script language=”Javascript”> <!- código JavaScript //--> </script> ● El signo “<!-“ indica principio de comentario en HTML y el signo “-->” indica fin de comentario. A su vez el signo “//” indica comentario en Javascript (el intérprete de Javascript no tendrán en cuenta esa línea). Lic. Nancy Michelle Torres Villanueva
  • 7. Uso de archivo externosPROGRAMACIÓN PARA INTERNET ● También se puede utilizar el código JavaScript escrito en un archivo separado. Este archivo debe tener la extensión js. En el archivo se coloca sólo código en JavaScript. ● Después ese código se puede invocar desde la página web dentro del head con el código: <script src="test.js" type="text/javascript"></script> Lic. Nancy Michelle Torres Villanueva
  • 8. Normas en JavaScriptPROGRAMACIÓN PARA INTERNET ● Los comentarios deben empezar con el símbolo // si son de una sola línea o iniciarse con los símbolos /* y finalizar con */ si son de varias líneas. ● Las líneas de código terminan con el signo de punto y coma (;) ● Javascript distingue entre mayúsculas y minúsculas ● Las llaves ({ y }) permiten agrupar código. Lic. Nancy Michelle Torres Villanueva
  • 9. VariablesPROGRAMACIÓN PARA INTERNET ● No hay necesidad de declararlas, pero si se desea hacer, se antepone la palabra var ● Pueden guardar distintos tipos de datos var x=”50” //x es una variable de texto var y=30 //y es una variable numérica z1=x+y //z1 es variable de texto y vale “5010” z2=y+x //z2 es numérica y vale 60 ● Dependiendo de cuál sea el primer operando, se determina el tipo del resultado Lic. Nancy Michelle Torres Villanueva
  • 10. Tipos de datosPROGRAMACIÓN PARA INTERNET ● Cadenas de texto: “esto es una prueba”, ‘prueba’ o “esto es una ‘prueba’ de código”. ● Valores numéricos: 1, -100, 1.6, 2.0E2. ● Valores booleanos: true o false. Lic. Nancy Michelle Torres Villanueva
  • 11. Operadores aritméticosPROGRAMACIÓN PARA INTERNET ● + ● - ● * ● / ● % ● ++ ● -- Lic. Nancy Michelle Torres Villanueva
  • 12. Operadores lógicosPROGRAMACIÓN PARA INTERNET ● && ● || ● ! Lic. Nancy Michelle Torres Villanueva
  • 13. Operadores de comparaciónPROGRAMACIÓN PARA INTERNET ● == ● != ● >= ● <= ● > ● < Lic. Nancy Michelle Torres Villanueva
  • 14. MensajesPROGRAMACIÓN PARA INTERNET ● Se trata de ventanas que desde el código se lanzan al usuario para hacer que éste reaccione ante una situación o nos informe ante una duda. Realmente todos los mensajes se obtienen a través del objeto window Lic. Nancy Michelle Torres Villanueva
  • 15. AlertPROGRAMACIÓN PARA INTERNET ● Es el mensaje más usado. Saca un mensaje por la pantalla el cual sólo deja la posibilidad de aceptarle. Su uso es mostrar información al usuario pero resaltándola de la página. Su sintaxis es: alert(texto_del_mensaje); Lic. Nancy Michelle Torres Villanueva
  • 16. PromptPROGRAMACIÓN PARA INTERNET ● En este caso se trata de una ventana que pide entrar datos al usuario. De modo que esta función devuelve un valor que se puede usar en el código si es asignado a una variable. Su sintaxis es: var=prompt(texto_del_mensaje,valor_po r_defecto); Posee dos botones, uno es el de Aceptar y el otro es el de Cancelar. Si el usuario pulsa Cancelar, la función prompt devuelve el valor nulo (null). Lic. Nancy Michelle Torres Villanueva
  • 17. Prompt...PROGRAMACIÓN PARA INTERNET ● El segundo parámetro (valor por defecto) no es obligatorio incluirle y permite asignar un valor al cuadro de texto en el que el usuario tendrá que introducir información. respuesta=prompt(“ ¿Qué quieres hacer?”,”comer”); Lic. Nancy Michelle Torres Villanueva
  • 18. ConfirmPROGRAMACIÓN PARA INTERNET ● Saca un mensaje de confirmación el cual suele tener dos botones: Aceptar y Cancelar. var=confirm(texto_del_mensaje) ● La ventana mostrará el texto del mensaje y el usuario elegirá si desea aceptar o no el contenido. Confirm devuelve un valor true en el caso de que el usuario acepte el mensaje, y false si no lo hace. Lic. Nancy Michelle Torres Villanueva
  • 19. CondicionalesPROGRAMACIÓN PARA INTERNET if(condición) { ...código } if(condición) { ...código }else{ ...código } Lic. Nancy Michelle Torres Villanueva
  • 20. CondicionalesPROGRAMACIÓN PARA INTERNET switch (objetodeanálisis) { case valor1: ..instrucciones case valor2:...instrucciones .... default: instrucciones } Lic. Nancy Michelle Torres Villanueva
  • 21. BuclesPROGRAMACIÓN PARA INTERNET while(condicion){ ..sentencias } for(valor_inicial; condición; actualización) { ..sentencias } Lic. Nancy Michelle Torres Villanueva
  • 22. FuncionesPROGRAMACIÓN PARA INTERNET ● Las funciones son una serie de instrucciones que realizan una determinada tarea. function nombredelafunción(argumento1, argumento2,...) { instrucciones } Lic. Nancy Michelle Torres Villanueva
  • 23. <HTML> <HEAD>PROGRAMACIÓN PARA INTERNET <TITLE>Titulo</TITLE> <SCRIPT LANGUAGE=”JavaScript”> <!-- function doble(valor) { return valor * 2; //--> </SCRIPT> <BODY> <SCRIPT LANGUAGE=”JavaScript”> document.write(“El doble de 100 es ”,doble(100)); </SCRIPT> </BODY> </HTML> Lic. Nancy Michelle Torres Villanueva
  • 24. evalPROGRAMACIÓN PARA INTERNET ● eval(textoCódigo ) ● La función eval tiene un único parámetro que es una cadena de texto. Esta función hace que el texto sea interpretado como si fuera código normal de JavaScript. eval(“alert(‘Hola’)”); Lic. Nancy Michelle Torres Villanueva
  • 25. parseIntPROGRAMACIÓN PARA INTERNET ● parseInt(textoNúmero, base) ● Convierte el texto (que debe tener cifras numéricas) a formato de número. El segundo parámetro es opcional y representa la base del número. alert(parseInt(“110011”,2)); ● Si la conversión no es posible, devuelve el valor NaN (Not a Number) que indica que la variable numérica posee un valor inválido Lic. Nancy Michelle Torres Villanueva
  • 26. isNaNPROGRAMACIÓN PARA INTERNET ● isNaN(expresión). ● Devuelve true si la expresión tiene un contenido no numérico. Lic. Nancy Michelle Torres Villanueva
  • 27. Otras funcionesPROGRAMACIÓN PARA INTERNET ● parseFloat(textoNúmero). Convierte el texto a formato de número con decimales. ● escape(texto). Muestra el código ASCII de los símbolos del texto. Cada número en el resultado va precedido del símbolo % y el código ASCII sale en forma Hexadecimal. ● unescape(texto). Hace justo lo inverso del anterior. Devuelve los códigos que representan los códigos ASCII en forma de texto que se le pasa como parámetro. Lic. Nancy Michelle Torres Villanueva
  • 28. ObjetosPROGRAMACIÓN PARA INTERNET ● Un objeto es una agrupación de variables, que en ese caso se llaman propiedades, y de funciones, las cuales se llaman métodos. objeto.propiedad objeto.metodo() miordenador = new ordenador(“HP”, “Pentium III”, 64); Lic. Nancy Michelle Torres Villanueva
  • 29. Métodos de StringPROGRAMACIÓN PARA INTERNET ● anchor(nombre). Crea un marcador en el texto. ● big(). Muestra la cadena de caracteres con una fuente grande. ● blink(). Muestra el texto de modo intermitente. ● bold().Muestra el texto en negrita. ● charAt(n). Muestra el carácter situado en la posición n de la cadena. ● fixed(). Muestra la cadena en fuente no proporcional. ● fontcolor(color). Determina el color del texto. Lic. Nancy Michelle Torres Villanueva
  • 30. Métodos de String...PROGRAMACIÓN PARA INTERNET ● fontsize(n). Muestra el texto en el tamaño n, donde n es un número del 1 al 7. ● indexOf(cadenaInterna,inicio). Devuelve la posición de la cadena interna en el texto, teniendo en cuenta que el primer carácter es el número 0. El primer parámetro es el texto que se busca; el segundo es opcional e indica desde qué posición del texto comenzamos a buscar. Si no se encuentra la cadena interna, se devuelve el valor –1 ● italics(). Muestra el texto en cursiva. Lic. Nancy Michelle Torres Villanueva
  • 31. Métodos de String...PROGRAMACIÓN PARA INTERNET ● lastIndexOf(cadenaInterna,inicio). Idéntico a indexOf sólo que en este caso cuenta la última vez que aparece la cadena (en lugar de la primera vez como hace indexOf). ● link(URL). Crea un hipervínculo en la cadena de texto, el parámetro URL indica el destino del vínculo. ● small(). El texto se muestra con fuente pequeña. ● strike(). Subraya el texto. ● sub(). El texto va en subíndice. ● substring(x,y). Muestra el fragmento de texto que va desde la posición x a la posición y. Lic. Nancy Michelle Torres Villanueva
  • 32. Métodos de String...PROGRAMACIÓN PARA INTERNET ● sup(). Superíndice. ● toLowerCase(). Convierte la cadena a minúsculas. ● toUpperCase().Convierte la cadena a mayúsculas. Lic. Nancy Michelle Torres Villanueva
  • 33. Propiedades de StringPROGRAMACIÓN PARA INTERNET ● length. Almacena el tamaño de la cadena de texto. Lic. Nancy Michelle Torres Villanueva
  • 34. Métodos de MathPROGRAMACIÓN PARA INTERNET ● abs(n). Calcula el valor absoluto de n. ● acos(n). Calcula el arco coseno de n. ● asin(n). Calcula el arco seno de n. ● atan(n). Calcula el arco tangente de n. ● ceil(n). Redondea n a su valor superior. ● cos(n). Calcula el coseno de n. ● exp(n). Calcula en. ● floor(n). Redondea n a su valor inferior. ● log(n). Calcula el logaritmo de n. Lic. Nancy Michelle Torres Villanueva
  • 35. Métodos de Math...PROGRAMACIÓN PARA INTERNET ● max(x,y). Devuelve el mayor valor de x o y. ● min(x,y). Devuelve el menor valor de x o y. ● pow(x,y). Devuelve el xy. ● random(). Genera un número aleatorio entre 0 y 1. ● round(n). Redondea n a el número más próximo. ● sin(n). Calcula el seno de n. ● sqrt(n). Calcula la raíz cuadrada de n. ● tan(n). Calcula la tangente de n. Lic. Nancy Michelle Torres Villanueva
  • 36. Propiedades de MathPROGRAMACIÓN PARA INTERNET ● E. Devuelve la constante de Euler o número e. ● LN2. Devuelve el logaritmo neperiano de 2. ● LN10. Devuelve el logaritmo neperiano de 10. ● LOG2E. Logaritmo en base 2 de e. ● LOG10E. Logaritmo en base 10 de e. ● PI. Devuelve el número PI. ● SQRT1_2. Raíz cuadrada de 0,5. ● SQRT2. Raíz cuadrada de 2. Lic. Nancy Michelle Torres Villanueva
  • 37. DatePROGRAMACIÓN PARA INTERNET ● Este objeto representa fechas y horas. ● JavaScript no permite trabajar con fechas anteriores a 1970, ya que desde ese momento es cuando comienza a contar las fechas en milisegundos. ● En los meses, el mes 0 será Enero, y el mes 11 es Diciembre. Los días de la semana y del mes se cuentan desde el número 1 Lic. Nancy Michelle Torres Villanueva
  • 38. Date...PROGRAMACIÓN PARA INTERNET fecha=new Date(); fecha=new Date(año, mes, día, hora, minutos, segundos”); Lic. Nancy Michelle Torres Villanueva
  • 39. Métodos de DatePROGRAMACIÓN PARA INTERNET ● getDate(). Devuelve el día del mes. ● getDay(). Devuelve el día de la semana en forma de número. ● getFullYear(). Devuelve el año, pero en forma de 4 números. ● getHours(). Devuelve la hora. ● getMinutes(). Devuelve los minutos. ● getMonth(). Devuelve el mes (con números del 0 al 11). ● getSeconds(). Devuelve los segundos. Lic. Nancy Michelle Torres Villanueva
  • 40. Métodos de Date...PROGRAMACIÓN PARA INTERNET ● getTime(). Devuelve el número de milisegundos de la fecha ● getTimezoneOffset(). Devuelve la diferencia en minutos entre la zona horaria actual y la hora solar (GMT). ● getYear(). Devuelve el año. ● setDate(valor). Establece el día del mes. ● setFullYear(valor). Establece el año (con cuatro cifras). ● setHours(valor). Establece la hora. Lic. Nancy Michelle Torres Villanueva
  • 41. Métodos de Date...PROGRAMACIÓN PARA INTERNET ● setMinutes(valor). Establece los minutos. ● setMonth(valor). Establece el mes (con un número del 1 al 11). ● setSeconds(valor). Establece los segundos. ● setTime(valor). Establece la fecha con el número de milisegundos ● setYear(valor). Establece el año. ● toLocaleString(). Devuelve la fecha en formato de texto, según las especificaciones de la zona horaria del ordenador. Lic. Nancy Michelle Torres Villanueva
  • 42. ArrayPROGRAMACIÓN PARA INTERNET ● Un array es un conjunto de datos agrupados. Para acceder a cada elemento individual de el array se usa un número de índice, el primer elemento tendrá el índice 0. nombrearray = new Array() nombrearray[0] = valor; nombreArray= new Array(tamaño) equipos= new Array(“Real Madrid”, “F. C. Barcelona”); elemento[3] = new Array(5); Lic. Nancy Michelle Torres Villanueva
  • 43. Métodos de ArrayPROGRAMACIÓN PARA INTERNET ● concat(array). Agrupa dos arrays. ● join(). Saca una cadena de texto que contiene todos los elementos del array ● reverse(). Invierte el orden del los elementos de un array. ● Sort(). Obtiene la matriz de manera ordenada. Solo letras y de manera ascendente Lic. Nancy Michelle Torres Villanueva
  • 44. Propiedades de ArrayPROGRAMACIÓN PARA INTERNET ● length. Cuenta el número de elementos del array. Lic. Nancy Michelle Torres Villanueva
  • 45. Objetos del navegadorPROGRAMACIÓN PARA INTERNET ● Existen varios elementos a nuestra disposición, pero desgraciadamente cierto navegador tiene objetos no compatibles en todos los navegadores. ● Solo revisaremos aquellos que son comunes. Lic. Nancy Michelle Torres Villanueva
  • 46. navigatorPROGRAMACIÓN PARA INTERNET ● Objeto que representa al navegador con el que el usuario está mostrando la página. ● Gracias a este objeto se puede averiguar la marca y versión del navegador y utilizar esta información en el código. Lic. Nancy Michelle Torres Villanueva
  • 47. Propiedades de navigatorPROGRAMACIÓN PARA INTERNET ● appCodeName. Nombre del código del navegador. ● appName. Nombre del navegador. ● appVersion. Versión del navegador. ● language. Devuelve el lenguaje del navegador. ● platform. Contiene el tipo de sistema operativo del ordenador del usuario. ● userAgent. Devuelve información sobre la versión, código y nombre del navegador. Lic. Nancy Michelle Torres Villanueva
  • 48. Métodos de navigatorPROGRAMACIÓN PARA INTERNET ● javaEnabled(). Devuelve true si el cliente permite la utilización de Java, en caso contrario, devuelve false. Lic. Nancy Michelle Torres Villanueva
  • 49. screenPROGRAMACIÓN PARA INTERNET ● Permite acceder a las propiedades de la pantalla del usuario. Lic. Nancy Michelle Torres Villanueva
  • 50. Propiedades de screenPROGRAMACIÓN PARA INTERNET ● width y height. Respectivamente, anchura y altura total de la pantalla. ● availWidth y availHeight. Respectivamente, anchura y altura disponible en la pantalla tras restar la barra de tareas del sistema operativo. Esta medida no es muy exacta ya que no tiene en cuenta la personalización del usuario. ● colorDepth. Número de bits por píxel que utiliza la pantalla. Lic. Nancy Michelle Torres Villanueva
  • 51. windowPROGRAMACIÓN PARA INTERNET ● Este objeto, representa a la ventana en la cual se ve la página web. Lic. Nancy Michelle Torres Villanueva
  • 52. Propiedades de windowPROGRAMACIÓN PARA INTERNET ● closed. Valor booleano que indica si una ventana ha sido cerrada. ● defaultStatus. Texto que la barra de estado mostrará cuando se cargue la página web (texto por defecto de la barra de estado). ● history. Es un objeto que representa las enlaces a las páginas a las que el visitante había accedido antes de llegar a la ventana actual. ● location. Objeto que almacena información sobre el URL de la página actual. Lic. Nancy Michelle Torres Villanueva
  • 53. Propiedades de window...PROGRAMACIÓN PARA INTERNET ● name. El nombre de la ventana. ● self. Se refiere a la propia ventana activa. ● top. Ventana superior del navegador. ● status. Mensaje de la barra de estado. ● window. Igual que self. ● opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta usando el método open() Lic. Nancy Michelle Torres Villanueva
  • 54. Métodos de windowPROGRAMACIÓN PARA INTERNET ● open(URL,nombreVentana,opcionesVentana). Abre la URL que le pasemos en una ventana de nombre nombre. Si esta ventana no existe, abrirá una ventana nueva en la que mostrará el contenido con las características especificadas ● toolbar. Indica si se muestra la barra de herramientas. ● location. Muestra o no la barra de dirección. ● directories. Muestra o no los botones de directorio. ● status. Permite mostrar u ocultar la barra de estado. ● menubar. Mostrar o no la barra de menús. ● scrollbars. Indica si se muestran las barras de desplazamiento. Lic. Nancy Michelle Torres Villanueva
  • 55. Métodos de windowPROGRAMACIÓN PARA INTERNET ● resizable. Permite ajustar el tamaño de la ventana. ● width. Ancho de la ventana en píxeles. ● height. Altura de la ventana en píxeles. ● copyHistory. Permite copiar el historial de páginas recorridas a la nueva ventana. ● close(). Cierra la ventana. ● blur(). Hace que la ventana deje de estar activa ● focus(). Hace que la ventana sea la ventana activa ● moveBy(x,y). Mueve el objeto window actual el número de pixels especificados por (x,y). Lic. Nancy Michelle Torres Villanueva
  • 56. Métodos de windowPROGRAMACIÓN PARA INTERNET ● moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). ● scrollBy(x,y). Desplaza el objeto window actual el número de pixels especificado por (x,y). ● scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). Lic. Nancy Michelle Torres Villanueva
  • 57. Métodos de windowPROGRAMACIÓN PARA INTERNET ● setInterval(expresiónjavascript,milisegundos).. Crea un temporizador. El temporizador es un reloj que cada ciertos milisegundos (los que se indiquen como segundo parámetro, realiza la tarea indicada en el argumento expresión. La expresión es código JavaScript el cual se coloca entre comillas, normalmente este código es simplemente la invocación a una función. este función devuelve un número de temporizador (ya que se pueden crear varios) el cual deberá almacenarse en una variable para posteriores manipulaciones. Lic. Nancy Michelle Torres Villanueva
  • 58. Métodos de windowPROGRAMACIÓN PARA INTERNET ● clearInterval(idTemporizador). Cancela el tiempo de espera establecido mediante setInterval. ● setTimeout(expresiónjavascript,milisegundos).Cuando pasan los milisegundos invocados, se ejecuta el código del parámetro expresiónJavascript (el cual va entre comillas). La diferencia con setInterval es que en este caso sólo se usa el código una vez, no continuamente como ocurre con setInterval. El método devuelve un número que debe almacenarse en una variable. ● clearTimeout(idTimeOut). Anula el temporizador establecido anteriormente con setTimeOut. ● alert(), confirm(), prompt(). Métodos de mensajes Lic. Nancy Michelle Torres Villanueva
  • 59. locationPROGRAMACIÓN PARA INTERNET ● Objeto incluido dentro del objeto window. Almacena información sobre la localización de la página de la ventana y por tanto permite cambiar dinámicamente la página web que se está mostrando. Lic. Nancy Michelle Torres Villanueva
  • 60. Propiedades de locationPROGRAMACIÓN PARA INTERNET ● href. Especifica la dirección URL de la ventana ● hostname. Especifica la parte del URL en la que va el nombre del host ● host. Idéntico al anterior, sólo que al final se indica el número de puerto utilizado ● pathname. Especifica la parte del URL en la que va la ruta al recurso ● port. Puerto utilizado para mostrar la página ● hash. Indica qué marcador de la página se utilizó al abrir la misma Lic. Nancy Michelle Torres Villanueva
  • 61. Propiedades de locationPROGRAMACIÓN PARA INTERNET ● protocol. Parte referida al protocolo de la URL ● search. La parte de una URL que va detrás del signo ?. Sólo ciertas páginas llevan este signo (en concreto las páginas que llaman a CGIs). Lic. Nancy Michelle Torres Villanueva
  • 62. Métodos de locationPROGRAMACIÓN PARA INTERNET ● replace(URL). Carga una nueva página en la ventana actual indicando su URL entre comillas y además también reemplaza a la página anterior en la lista del historial. Esto último es la única diferencia entre usar este método y cambiar la dirección directamente en la propiedad href del objeto location. ● reload(). Hace que se vuelva a recargar la página. Lic. Nancy Michelle Torres Villanueva
  • 63. documentPROGRAMACIÓN PARA INTERNET ● Este objeto representa al contenido de una página web. Está incluido dentro del objeto window. Lic. Nancy Michelle Torres Villanueva
  • 64. Propiedades de documentPROGRAMACIÓN PARA INTERNET ● bgColor. Color del fondo ● fgColor. Color del texto. ● linkColor. Color de los enlaces normales. ● vlinkColor. Color de los enlaces visitados ● alinkColor. Color de los enlaces activos. ● images. Array que contiene todas las imágenes del documento. ● links. Array que contiene todos los enlaces que usan el atributo HREF. Lic. Nancy Michelle Torres Villanueva
  • 65. Propiedades de documentPROGRAMACIÓN PARA INTERNET ● forms. Se trata de un array con todos los formularios del documento. ● anchors. Se trata de un array con los enlaces internos existentes en el documento ● location. Cadena con la URL del documento actual ● referrer. Cadena con la URL del documento que llamó al actual, en caso de usar un enlace. ● title. Cadena con el título del documento actual Lic. Nancy Michelle Torres Villanueva
  • 66. Propiedades de documentPROGRAMACIÓN PARA INTERNET ● lastModified. Fecha de última actualización del documento en forma de cadena de texto. Algunos servidores no proporcionan este dato. ● URL. URL del documento. Es idéntico a utilizar location.href. ● cookie. Escribe o lee el archivo de cookies de la página web. Lic. Nancy Michelle Torres Villanueva
  • 67. Métodos de documentPROGRAMACIÓN PARA INTERNET ● clear(). Borra el documento. ● write(textoHTML). Escribe el texto indicado en el documento. Ese texto puede contener si se desea etiquetas HTML ● writeln(textoHTML). Lo mismo que la anterior, sólo que esta añade un salto de línea tras escribir el texto. ● close(). Cierra el documento. Lic. Nancy Michelle Torres Villanueva
  • 68. historyPROGRAMACIÓN PARA INTERNET ● Objeto que representa a las direcciones de las páginas que se almacenan en el historial del navegador. Este objeto está dentro del objeto window. Lic. Nancy Michelle Torres Villanueva
  • 69. Propiedades de historyPROGRAMACIÓN PARA INTERNET ● length. Número de páginas almacenadas actualmente en el historial. Lic. Nancy Michelle Torres Villanueva
  • 70. Métodos de historyPROGRAMACIÓN PARA INTERNET ● back(). Hace que la ventana muestre la página visitada anteriormente. ● forward(). Hace que la ventana muestre la página siguiente. ● go(no). Hace que se muestre la página del historial indicada con un número. De modo que history.go(-1) muestra la página anterior y history.go(-3) hace que se muestre la página antepenúltima. Lic. Nancy Michelle Torres Villanueva
  • 71. EventosPROGRAMACIÓN PARA INTERNET ● Un evento es un suceso que ocurre cuando el usuario realiza alguna acción. Por ejemplo cuando el usuario pasa el ratón encima de un objeto de la página, cuando pulsa una tecla,... Incluso algunos eventos no los produce el usuario, sino el navegador, como por ejemplo la carga de la página. Lic. Nancy Michelle Torres Villanueva
  • 72. Eventos...PROGRAMACIÓN PARA INTERNET <etiquetaHTML atributos... nombredeEvento=”expresiónJavaScript”> <A HREF=”cities.htm” onMouseClick=”alert(‘Pulsaste!’);”> Lic. Nancy Michelle Torres Villanueva
  • 73. Lista de eventosPROGRAMACIÓN PARA INTERNET ● OnClick ● onDblClick ● onMouseOver ● onMouseOut ● OnMouseDown: mantiene pulsado el botón principal del ratón a la vez que se sitúa encima de un objeto ● onMouseUp ● onMouseMove ● onKeyDown, onKeyPress y onKeyUp Lic. Nancy Michelle Torres Villanueva
  • 74. Lista de eventos...PROGRAMACIÓN PARA INTERNET ● onLoad: cuando la página se está cargando. ● onUnload: cuando la página se está descargando, porque se está cargando otra o porque se cierra el navegador. ● onResize ● onBlur ● onFocus ● onAbort: si el usuario pulsa el botón Detener mientras se estaba ● onError Lic. Nancy Michelle Torres Villanueva
  • 75. Lista de eventos...PROGRAMACIÓN PARA INTERNET ● onChange: cambia el contenido de un cuadro de texto de un formulario. ● onSelect: cuando el usuario selecciona texto de un cuadro del formulario. ● onSubmit ● onReset Lic. Nancy Michelle Torres Villanueva
  • 76. Expresiones regularesPROGRAMACIÓN PARA INTERNET ● Para esto se utiliza el método match(exp) donde exp corresponde a la expresión regular que se busca comparar Lic. Nancy Michelle Torres Villanueva
  • 77. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva
  • 78. Validación de formularios con JavaScriptPROGRAMACIÓN PARA INTERNET ● En unos cuantos pasos podremos validar el contenido de un formulario antes de enviar la información al servidor. ● 3 pasos: ● Nombre del formulario ● Llamada a la función ● La función Lic. Nancy Michelle Torres Villanueva
  • 79. Crear el formularioPROGRAMACIÓN PARA INTERNET ● El formulario debe tener un nombre <form name="miform"> ● El boton de submit realiza una llamada a una función de JavaScript <input type="button" value="Enviar" onclick="validaForm()"> valida(this) Lic. Nancy Michelle Torres Villanueva
  • 80. Validar númerosPROGRAMACIÓN PARA INTERNET function validarNumero(valor){ valor = parseInt(valor); if (isNaN(valor)) { return “”; } else{ return valor; } } Lic. Nancy Michelle Torres Villanueva
  • 81. Función de JavaScriptPROGRAMACIÓN PARA INTERNET <script language="javascript"> function validaForm(){ if (document.miform.nombre.value.length==0) { alert("Tiene que escribir su nombre") document.miform.nombre.focus() return 0; } Lic. Nancy Michelle Torres Villanueva
  • 82. edad = document.miform.edad.value edad = validarNumero(edad)PROGRAMACIÓN PARA INTERNET document.miform.edad.value=edad if (edad==""){ alert("Tiene que introducir un número entero en su edad.") document.miform.edad.focus() return 0; }else{ if (edad<18){ alert("Debe ser mayor de 18 años.") document.miform.edad.focus() return 0; } } Lic. Nancy Michelle Torres Villanueva
  • 83. if (document.miform.interes.selectedIndex==0){ alert("Debe seleccionar un motivo de su contacto.")PROGRAMACIÓN PARA INTERNET document.miform.interes.focus() return 0; } //Enviamos el formulario alert("Muchas gracias por enviar el formulario"); document.miform.submit(); } </script> Lic. Nancy Michelle Torres Villanueva
  • 84. Métodos para hacer el formulario dinámicoPROGRAMACIÓN PARA INTERNET <SELECT name=”departamento” onChange = “selectCarrera()”> ● Donde selectCarrera() es una función que realiza un ciclo y la escritura de código HTML para llenar el segundo combo. Lic. Nancy Michelle Torres Villanueva
  • 85. Ejercicios recomendadosPROGRAMACIÓN PARA INTERNET ● Aplicación que realiza las preguntas para nombrar lista ● Las preguntas se encuentran en un array ● Genera una pregunta en un confirm, si la respuesta es false, vuelve a hacer la misma pregunta, de lo contrario, realiza una nueva pregunta. ● Formulario dinámico con tipo de contactanos y opciones para ellas. ● Se puede elegir entre comentario y queja ● En caso de queja mostrar distintas áreas Lic. Nancy Michelle Torres Villanueva
  • 86. Programación del lado del servidorPROGRAMACIÓN PARA INTERNET ● CGIs (Common Gateway Interface) : Lenguajes C, PERL, PYTHON, etc ● PHP ● ASP ● SSI server-side include ● Tecnología Java ● Servlets ● JSP ● Conexión con bases de datos (PostgreSQL, mySQL, ORACLE, etc) Lic. Nancy Michelle Torres Villanueva
  • 87. CGIPROGRAMACIÓN PARA INTERNET ● Common Gateway Interface ● Importante tecnología de la World Wide Web que permite a un cliente solicitar datos de un programa ejecutado en un servidor web. ● Especifica un estándar para transferir datos entre el cliente y el programa. Es un mecanismo de comunicación entre el servidor web y una aplicación externa cuyo resultado final de la ejecución son objetos MIME. Lic. Nancy Michelle Torres Villanueva
  • 88. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva
  • 89. Proceso de función de un CGIPROGRAMACIÓN PARA INTERNET 1) El servidor recibe una petición (el cliente ha activado un URL que contiene el CGI), y comprueba si se trata de una invocación de un CGI. 2) El servidor prepara el entorno para ejecutar la aplicación. Esta información procede mayoritariamente del cliente. 3) El servidor ejecuta la aplicación, capturando su salida estándar. 4) La aplicación realiza su función: como consecuencia de su actividad se va generando un objeto MIME que la aplicación escribe en su salida estándar. 5) El servidor envía la información producida, junto con información propia, al cliente, que se encontraba en estado de espera. Es responsabilidad de la aplicación anunciar el tipo de objeto MIME que se genera (campo CONTENT_TYPE). Lic. Nancy Michelle Torres Villanueva
  • 90. Ejemplo CGI en CPROGRAMACIÓN PARA INTERNET #include <stdio.h> #include <string.h> #include <stdlib.h> void main(void) { printf("Content-type: text/htmlnn"); printf("<HTML><HEAD><TITLE>Hello World Wide Web</TITLE></HEAD>"); printf("<BODY BGCOLOR="#FFFFFF"><P ALIGN=CENTER>"); printf("<H1>Primer CGI</H1>"); printf("Hello World Wide Web"); printf("</BODY></HTML>"); } Lic. Nancy Michelle Torres Villanueva
  • 91. Objetos MIMEPROGRAMACIÓN PARA INTERNET ● Serie de convenciones o especificaciones dirigidas al intercambio a través de Internet de todo tipo de archivos (texto, audio, vídeo, etc.) de forma transparente para el usuario. Una parte importante del MIME está dedicada a mejorar las posibilidades de transferencia de texto en distintos idiomas y alfabetos. Lic. Nancy Michelle Torres Villanueva
  • 92. Ejemplo MIMEPROGRAMACIÓN PARA INTERNET Mime-Version: 1.0 Content-Type: text/plain; charset=US-ASCII Content-Transfer-Encoding: 7bit Lic. Nancy Michelle Torres Villanueva
  • 93. Lenguajes de guiones empotrados en HTMLPROGRAMACIÓN PARA INTERNET ● JSP Con toda la potencia de Java, y las clases que obvio ya conoces ● ASP Privativa de Microsoft, puede utilizar controles existentes en los ActiveX ● Perl Popular, rápido, horrible ● Python Fácil, muchas herramienta ● Ruby Menos conocido, mas completo, fácil ● PHP Super conocido, rápido, fácil Lic. Nancy Michelle Torres Villanueva