HTML Dinámico: JavaScript. HTML Dinámico: JavaScript
|
|
|
- Jesús Aguilera Macías
- hace 6 años
- Vistas:
Transcripción
1 escuela técnica superior de ingeniería informática HTML Dinámico: JavaScript Departamento de Lenguajes Software Noviembre 2004 Cliente web HTTP TCP/IP Servidor de aplicaciones SQL Servidor de datos Validación Validación en en cliente cliente Software 1 1
2 Qué es HTML HTML dinámico = HTML estático + scripts Los scripts (código ejecutable interpretado) permiten modificar dinámicamente el contenido de la página HTML La página HTML se manipula desde el código script mediante los objetos del DOM (Document( Object Model) La programación de HTML dinámico es básicamente programación por eventos JavaScript fue desarrollado por Netscape (1995) Es el único lenguaje de script que es admitido por todos los navegadores La versión de Microsoft se denomina JScript y es una implementación casi completa del estándar ECMAScript A pesar del nombre, JavaScript no tiene nada que ver con Java Es un lenguaje basado en objetos, interpretado y sin tipos. Su sintaxis es similar a C/C++ o Java Los comentarios son como en C++ o Java Software 2 Qué versión? Qué navegador? Versión Java Script 1.0 Java Script 1.1 Java Script 1.2 Java Script 1.3 Java Script 1.5 JScript 1.0 JScript 2.0 JScript 3.0 JScript 4.0 JScript 5.0 JScript 5.5 Navegador Netscape 2.0, IE 3.0 Netscape 3.0, IE 4.0 Netscape , IE 4.0 Netscape x, IE 5.0 Netscape 6.0+, Mozilla, IE 5.5+ IE 3.0 IE 3.0 IE 4.0 IE 4.0 IE 5.0 IE 5.0 Además existe VBScript y EMACScript Software 3 2
3 Los scripts pueden insertarse en HTML de 4 formas distintas: En <body> mediante una etiqueta <script> de ejecución inmediata. En <head> mediante una etiqueta <script> de ejecución diferida. Como gestor de un evento de un objeto DOM. En la sección <head> con una etiqueta <script for...event...> En la etiqueta que genera el evento en un atributo onevento Como una URL especial (javascript:) en los atributos href de las etiquetas <a>. Siempre que se use la etiqueta script se puede usar el atributo src para indicar que el código se encuentra en una URL aparte. Software 4 Script de ejecución inmediata <html <html> <head <head> <title <title>título del del documento</ documento</title> title> otra otra información información de de cabecera cabecera--> --> </head </head> <body <body> contenido contenido del del documento documento--> --> <script <script language="javascript"> // // sentencias sentencias JavaScript JavaScript //-- //--> </script </script> <! <! más más contenido contenido del del documento documento--> --> </body </body> </html </html> Software 5 3
4 Script de ejecución diferida <html <html> <head <head> <title <title>título del del documento</ documento</title> title> <script <script language="javascript"> // // declaración declaración de de variables variables // // y funciones funciones JavaScript JavaScript //-- //--> </script </script> </head </head> <body <body> contenido contenido del del documento documento--> --> </body </body> </html </html> Software 6 Gestor de eventos (1/2) <html <html> <head <head> <title <title>título del del documento</ documento</title> title> <script <script language="javascript" for="identificador for="identificadorde de objeto" objeto" event="evento"> event="evento"> // // sentencias sentencias JavaScript JavaScript //-- //--> </script </script> </head </head> <body <body> contenido contenido del del documento documento--> --> </body </body> </html </html> Software 7 4
5 Gestor de Eventos (2/2) <html <html> <head <head> <title <title>título del del documento</ documento</title> title> </head </head> <body <body> contenido contenido del del documento documento--> --> <marca <marca onevento="código onevento="código JavaScript"> JavaScript"> </marca> </marca> <! <! más más contenido contenido del del documento documento--> --> </body </body> </html </html> Suele Suele ser ser una una llamada llamada a a una una función función previamente previamente declarada declarada en en un un bloque bloque script script en en la la sección sección de de head head o o en en un un archivo archivo externo. externo. Software 8 Como URLs de enlaces <html <html> <head <head> <title <title>título del del documento</ documento</title> title> </head </head> <body <body> contenido contenido del del documento documento--> --> <a <a href="javascript:código JavaScript"> JavaScript"> Texto Texto enlace enlace </a> </a> <! <! más más contenido contenido del del documento documento--> --> </body </body> </html </html> Software 9 5
6 Funciones en JavaScript function functionnombre_función( nombre_función( argumentos argumentos )) { var varvariable_local variable_local = valor_inicial; valor_inicial; // // código código función función return return (expresión_devuelta); } Si no existe return o bien no se devuelve nada o bien el tipo es undefined Los tipos de datos básicos en JavaScript son los string, numéricos y boleanos. Las variables pueden cambiar de tipo dentro del código aunque es mejor no utilizar esta funcionalidad. Software 10 Objetos en JavaScript En JavaScript, los objetos son arrays a los que pueden añadirse propiedades (atributos) o funciones (métodos) dinámicamente. A las propiedades se accede mediante el operador punto o mediante los corchetes: objeto.propiedad objeto["propiedad"] Para añadir una propiedad nueva basta con una asignación. A los métodos se accede mediante el operador punto con paréntesis objeto.método( parámetros ) Software 11 6
7 Estructuras if if (condición) (condición){ // // bloque bloque if if } else else { // // bloque bloqueelse else } switch switch (expresión) (expresión){ case caseetiq1 etiq1 :: // // bloque1 bloque1 break; break; case caseetiq2 etiq2 :: // // bloque2 bloque2 break; break; default default :: // // bloquen bloquen } while while (condición) (condición){ // // bloque bloquewhile } do do { // // bloque bloque do do } while while (condición) (condición) for for (i=0; (i=0; i<=n; i<=n; i++) i++) { // // bloque bloque for for } Software 12 Objetos (core( objects) String Tiene en atributo length para saber la longitud y además las siguientes funciones: big(): para poner la fuente más grande bold(): para ponerlo en negritas charat(n): devuelve el carácter colocado en la posición n. match(c) : dice si subcadena c pertenece a la cadena. substring(x,y): Devuelve la subcadena que va de x a y inclusive (las cadenas empiezan en 0) tolowercase():convierte a mayúsculas touppercase():convierte a minúsculas valueof()// tostring(): devuelve el valor de tipo string (importante a la hora de comparar cadenas) Software 13 7
8 Objetos (core( objects) Math abs(numero). Función valor absoluto max(x,y): Devuelve el máximo de 'x' e 'y' min(x,y): Devuelve el mínimo de 'x' e 'y' pow(base,exp): potencia random(). Devuelve un número aleatorio entre 0 y 1 round(numero). Redondea 'numero' al entero más cercano sin(numero). Devuelve el seno de 'numero' sqrt(numero). Devuelve la raíz cuadrada de número. tan(numero). Devuelve la tangente de 'numero'... Software 14 Objetos (core( objects) Array Tiene en atributo length para saber la longitud y además las siguientes funciones: join(): agrupa los elementos separándolos por comas. reverse(): invierte el orden de los elementos. sort(): ordena los elementos del array a = new new Array Array (25); (25);// // crea crea un unarray arrayde de elementos elementos a = new new Array Array (1, abd",true); (1, abd",true);// // un unarray arraycon con tres tres posiciones posiciones a = new new Array Array ("cadena"); ("cadena");// // un unarray arraycon con una una cadena cadena a = new new Array Array (false); (false);// // array arraycon con el el elemento elementofalse Array de 3 filas y 6 columnas? a = new new Array Array (3); (3); for for (i=0;i<3;i++) (i=0;i<3;i++) a[i]= a[i]= new new Array Array (6); (6);//acceso al alarray arraya[i][j] a[i][j] Software 15 8
9 Objetos (core( objects) Date getdate(). Devuelve el día del mes actual como un entero entre 1 y 31. getday(). Devuelve el día de la semana actual como un entero entre 0 y 6. gethours(). Devuelve la hora del día actual como un entero entre 0 y 23. getminutes(). Devuelve los minutos de la hora actual como un entero entre 0 y 59. getmonth(). Devuelve el mes del año actual como un entero entre 0 y 11. getseconds(). Devuelve los segundos del minuto actual como un entero entre 0 y 59. gettime(). Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta el momento actual. Software 16 Objetos (core( objects) Date getyear(). Devuelve el año actual como un entero. setdate(día_mes). Pone el día del mes actual en el objeto Date que estemos usando. togmtstring(). Devuelve una cadena que usa las convenciones de Internet con la zona horaria GMT var varf f = new new Date Date (); (); var varf f = new new Date Date (año, (año, mes); mes); var varf f = new new Date Date (año, (año, mes, mes, día); día); var varf f = new new Date Date (año, (año, mes, mes, día, día, horas); horas); var varf f = new new Date Date (año, (año, mes, mes, día, día, horas, horas, minutos); minutos); var varf f = new new Date Date (año, (año, mes, mes, día, día, horas, horas, minutos, minutos, segundos); segundos); Software 17 9
10 DOM (Document( Object Model) Software 18 Navigator Es el objeto que representa al navegador de la ventana. Tiene un serie de propiedades: appname: : Nombre concreto del navegador: Microsoft Internet Explorer, Mozilla, NetScape, appversion: : Versión n del navegador: Netscape 5.0 (Windows; es-es) Microsoft Internet Explorer 4.0 (compatible; MSIE 6.0; Windows NT 5.0) mimetypes: : un array con los tipos mimes que soporta el navegador plugins: : un array con los plugins que tiene instalado el navegador javaenabled(): devuelve un booleano indicando si está habilitado el lenguaje JAVA para los applets Software 19 10
11 Window Es el objeto que representa a la ventana que contiene la página status: mensaje de la barra de estado document: objeto que representa a la página HTML visualizada history: representa al objeto history closed: indica si la ventana está cerrada length: número de frames que contiene la ventana frames: un array que contiene todos los frames que tiene la ventana, es decir, devuelve un array de objetos de tipo Frame close(): cierra la ventana activa Software 20 Window alert(srt): abre una ventana que dice que algo va a suceder confirm(srt): una ventana con un botón de cancelar y otro de aceptar. devuelve true si se ha pulsado aceptar y false si ha pulsado cancelar prompt(msg,default): una ventana de entrada de datos con un valor por defecto default open(url,nombre,opt): abre una ventana del navegador close(): cierra la ventana navigate(url): ir a url Software 21 11
12 Frame Es el objeto que representa a los marcos (frames) de una página y tiene como atributo: parent: apunta al padre del frame Location Es el objeto que representa la URL que contiene el objeto window: host: Contiene el nombre del servidor que ha servido la página y el número de puerto de la URL hostname: nombre del servidor pathname: camino sin incluir ni el servidor ni el puerto port: puerto protocol: protocolo (http, ftp,..) Software 22 Document Es el objeto que representa al documento en si: bgcolor: valor entero con el código del color de fondo o cadena con el color ( #12345, red ) fgcolor: identifica el color del texto del documento forms: un array conteniendo todos los Form de un documento images: array de imágenes del documento. lastmodified: es una cadena con la fecha de modificación del documento links: Contiene un array con todos los enlaces externos del documento referrer: cadena con la URL del enlace desde el que se llegó al documento. title: cadena con el título del documento Software 23 12
13 Document close(): cierra el documento (importante si se ha escrito en el) write(srt), writeln(str), ( ojo! wirteln no mete ningún salto de línea al mostrarlo en el navegador) getelementbyid(id): aquí se le pone el ID del elemento contenido en el documento. <img <img id= imgmail id= imgmail src src = mail.jpg > mail.jpg > document.getelementbyid( imgmail ).src = mail2.jpg. mail2.jpg. Link target: cadena con el nombre del target href: cadena con el nombre del destino Software 24 Image Este objeto representa a una imagen. Tiene las siguientes propiedades y métodos que están relacionadas con los atributos de la etiqueta img: border: valor entero con el valor de border de la imagen, número de pixels con el borde de la imagen. complete: valor booleano indicando si se ha cargado la imagen entera del servidor. src: se refiere al contenido de la imagen en sí. Form Este objeto representa a un formulario Todos los atributos de la etiqueta form: action, method, elements: un array con todos los elementos del formulario (botones, áreas de texto,...). length: el número de elementos de un form. Software 25 13
14 Form submit(): hace lo mismo que si se pulsara submit en el formulario reset(): borra el formulario como si se pulsase el botón reset Text / TextArea Este objeto representa a un control de texto tiene todos los elementos de éste tipo de controles: defaultvalue, value: contiene el valor de la cadena de caracteres del área de texto por tanto, se puede cambiar mediante javascript el valor de un area de texto. focus(): captura el foco sobre la caja de texto. select(): selecciona el texto que hay en la caja de texto. Software 26 CheckBox Representa a una caja de selección name: nombre del objeto checked: indica si el objeto ha sido seleccionado defaultchecked: indica si el objeto debe aparecer inicialmente como seleccionado value: indica el valor de la cadena de caracteres que aparece junto a la caja de selección click(): Lo mismo que si se hiciese clic con el ratón Radio Este objeto es diferente al anterior puesto que contiene más de una casilla con una sola posible selección. Este objeto es por tanto un array con los elementos que en el aparecen Software 27 14
15 Radio length : indica el número de elementos que lo contienen. Cada elemento del array contendrá las siguientes propiedades: name: indica el nombre del objeto. checked: indica si el objeto ha sido seleccionado. defaultchecked: indica si el objeto debe aparecer inicialmente como seleccionado. value: indica el valor de la cadena de caracteres que aparece junto a la caja de selección. click(): Lo mismo que si se hiciese clic con el ratón. Software 28 Select Este objeto que representa a select. Tiene como propiedad un array con las opciones que aparecen en la selección. length : indica el número de elementos que contiene. options: array con las diferentes opciones de la selección defaultchecked: indica si el objeto debe aparecer inicialmente como seleccionado. index: un valor entero que indica la posición del objeto en el array selected: indica si la opción ha sido seleccionada selectedindex: un entero que indica el índice de la posición que ha sido seleccionada. text: cadena de caracteres con el texto mostrado en la opción selectedindex: un entero que indica el índice de la posición que ha sido seleccionada Software 29 15
16 Eventos onabort onblur onchange onclick Evento Objetos afectados Image Button, Checkbox, FileUpload, Password,, Radio, Reset, Select, Submit, Text, Textarea, window FileUpload, Select, Text, Textarea Button, document, Checkbox,, Link, Radio, Reset, Submit Causa Se interrumpe la carga de una imagen Un elemento de formulario, una ventana o un marco pierden el foco El valor de un campo de formulario cambia Se hace click en un objeto o formulario Software 30 Eventos Evento ondblclick ondragdrop onerror onfocus Objetos afectados document,, Link window Image, window Button, Checkbox, FileUpload, Password,, Radio, Reset, Select, Submit, Text, Textarea, window Causa Se hace click doble en un objeto o formulario Se arrastra y suelta un objeto en la ventana La carga de un documento o imagen produce un error Una ventana, marco o elemento de formulario recibe el foco Software 31 16
17 Eventos onkeydown onkeypress onkeyup onload Evento onmousedown onmousemove document,, Link, Textarea document, Image,, Link, Textarea document, Image,, Link, Textarea Image, window Button, document,, Link * Objetos afectados Causa Se pulsa una tecla Se mantiene pulsada una tecla Se libera una tecla El navegador termina la carga de una ventana Se pulsa un botón del ratón Se mueve el puntero del ratón Software 32 Eventos Evento onmouseout onmouseover onmouseup onmove onreset onresize Objetos afectados Image, Link Image, Link Button, document, Link window Form window Causa El puntero abando una área o enlace El puntero entra en una área o imagen El usuario libera un botón del ratón Se mueve una ventana o un marco El usuario limpia un formulario Se cambia el tamaño de una ventana o marco Software 33 17
18 Eventos onselect Evento onsubmit onunload Objetos afectados Text, Textarea Form window Causa Se selecciona el texto del campo texto o área de texto de un formulario El usuario envía un formulario El usuario abandona una página Software 34 Ejemplo. Hacer que una imagen se presente como un botón. <head <head> <script <script language="javascript"> language="javascript"> function functioncambiaimagendown(){ cambiaimagendown(){ document.getelementbyid('iboton').src="images/bd.jpg"; document.getelementbyid('iboton').src="images/bd.jpg"; } function functioncambiaimagenup(){ cambiaimagenup(){ document.getelementbyid('iboton').src="images/bup.jpg"; document.getelementbyid('iboton').src="images/bup.jpg"; } //-- //--> </script </script> </head </head> <body <body> body> <img <img src=" src="images/bup.jpg" ="images/bup.jpg" id=" id="iboton ="iboton onmouseover=" onmouseover="cambiaimagendown()" ="cambiaimagendown()" onmouseout=" onmouseout="cambiaimagenup()"/> ="cambiaimagenup()"/> </body </body> body> Software 35 18
HTML Dinámico: JavaScript. HTML Dinámico: JavaScript. Grupo de Ingeniería del Software. Departamento de Lenguajes y Sistemas Informáticos HTTP TCP/IP
escuela técnica superior de ingeniería informática HTML Dinámico: JavaScript Departamento de Lenguajes 2005 Cliente web HTTP TCP/IP Servidor de aplicaciones SQL Servidor de datos Validación Validación
Modelo de objetos de documento
Departamento de Lenguajes y Sistemas Informáticos Modelo de objetos de documento Programación en Internet Curso 2004-2005 Índice Introducción Modelo de Netscape Cómo acceder a un formulario DLSI - Universidad
HTML dinámico: Javascript
Javascript Departamento de Lenguajes escuela técnica superior de ingeniería informática Grupo de Ingeniería a del Software Noviembre 2006 Versión original: Amador Durán y David Benavides (octubre 2005)
Javascript 23/03/2017. Javascript. Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos
23/03/2017 Tema 5 - JavaScript Grupo de Ingeniería del Software y Bases de Datos Universidad de Sevilla Características principales de JavaScript Es un lenguaje interpretado (script), no compilado Es un
Tema 5 - JavaScript. Grupo de Ingeniería del Software. Departamento de Lenguajes y Sistemas Informáticos. Octubre 2011
Versión original: Amador Durán, David Benavides y Pablo Fernandez (noviembre 2006) Departamento de Lenguajes escuela técnica superior de ingeniería informática Tema 5 - Grupo de Ingeniería del Software
Diseño de Aplicaciones Web: JavaScript Marzo de 2015 Diseño de Aplicaciones Web 1
: JavaScript 1 Características JavaScript es un lenguaje de programación interpretado. El código está empotrado en la página HTML Permite la generación de páginas dinámicas Se puede utilizar tanto en el
Denominación: PROGRAMACIÓN CON LENGUAJES DE GUIÓN EN PÁGINAS WEB. Código: UF1305
UNIDAD FORMATIVA 1 Denominación: PROGRAMACIÓN CON LENGUAJES DE GUIÓN EN PÁGINAS WEB. Código: UF1305 1. Metodología de la programación 1.1Lógica de programación. 1.1.1Descripción y utilización de operaciones
JavaScript DOM. JavaScript - Jerarquía de Objetos. JavaScript - Jerarquía de Objetos. Jerarquía de Objetos del Navegador
JavaScript Jerarquía de Objetos del Navegador DOM 1 Son los objetos disponibles en Javascript para controlar cualquier elemento en una página web. Javascript trabaja con esta jerarquía de objetos. Con
El lenguaje JavaScript. Asignatura: Fonaments Cartografia i SIG Curso: 2006/07 Profesor: Toni Navarrete
El lenguaje JavaScript Asignatura: Fonaments Cartografia i SIG Curso: 2006/07 Profesor: El lenguaje Javascript Pág. 1 1. Introducción JavaScript es un sencillo lenguaje de programación, que presenta una
PROGRAMACIÓN CON LENGUAJES DE GUIÓN EN PÁGINAS DURACIÓN 90 WEB.
DATOS IDENTIFICATIVOS DE LA UNIDAD FORMATIVA UNIDAD FORMATIVA PROGRAMACIÓN CON LENGUAJES DE GUIÓN EN PÁGINAS DURACIÓN 90 WEB. Especifica Código UF1305 Familia profesional INFORMÁTICA Y COMUNICACIONES Área
6º Unidad Didáctica. Javascript. Eduard Lara
6º Unidad Didáctica Javascript Eduard Lara 1 ÍNDICE 6.1 Lenguajes de script 6.2 Sintaxis de Javascript 6.3 Variables, funciones y operadores 6.4 Estructuras de control de flujo 6.5 Objetos predefinidos
POW. Tema 5: Introducción a JavaScript. Programación Orienta a la Web
POW Tema 5: Introducción a JavaScript Qué es JavaScript JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que
Lenguajes de Script. Qué son los Lenguajes de Script?
JavaScript (I) 1 Lenguajes de Script Qué son los Lenguajes de Script? Scritps de cliente: son programas que pueden acompañar a un documento HTML o bien ir incrustados en él. Un lenguaje de script es un
Scripting en el cliente: Javascript. Tecnologías Web
Scripting en el cliente: Javascript Tecnologías Web Funciones anidadas Funciones (avanzado) A partir de JavaScript 1.2 y ECMAScript v3, se pueden definir funciones anidadas Aunque podamos definir funciones
Índice. Fundamentos de Desarrollo de Aplicaciones Web en J2EE. JavaScript básico. Qué es JavaScript? Para qué es bueno JavaScript?
Fundamentos de Desarrollo de Aplicaciones Web en J2EE JavaScript básico Dpto. de Ingeniería de Sistemas Telemáticos http://www.gsi.dit.upm.es/moodle/course/category.php?id=1 Qué es JavaScript? Integración
1. Los lenguajes de marcas. - Características de los lenguajes de marcas.
IFCD0110: CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB CÓDIGO ESPECIALIDAD C.P. PRESEN- CIALES TELEFORMA- CIÓN TOTALES TIPO DE FORMACIÓN IFCD0110 CONFECCIÓN Y PUBLICA- CIÓN DE PÁGINAS WEB SI 200 280 480 OBJETIVOS
Modelo de objetos de documento
Departamento de Lenguajes y Sistemas Informáticos Modelo de objetos de documento Programación en Internet Curso 2007-2008 Índice Introducción DOM Cómo acceder a un formulario BOM DLSI - Universidad de
Desarrollo de Aplicaciones Web con PHP. Javier Enciso
Desarrollo de Aplicaciones Web con PHP Javier Enciso Agenda Hojas de Estilos Qué es CSS? Para qué sirve? Cómo funciona? Ejemplos Validación de Formularios Fundamentos de JavaScript Utilización de JavaScript
JavaScript: Eventos. Francisco J. Martín Mateos Carmen Graciani Diaz
Francisco J. Martín Mateos Carmen Graciani Diaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Eventos Los eventos son señales que se generan como consecuencia de la
HTML Dinámico. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15
HTML Dinámico Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15 Motivación Añadir capacidades de interacción a las páginas web. Ejemplo: validación
Aplicaciones Web. Aplicaciones Distribuidas
Aplicaciones Web Aplicaciones Distribuidas Contenido La Web. Sitios Web vs. Aplicaciones Web. HTTP. HTML. Sesiones. Tecnologías facilitadoras. HTML Dinámico. JavaScript. 2 La Web Petición http://www.um.es/index.html
El lenguaje JavaScript. Asignatura: Programació III Curso: 1999/2000 Profesor: Toni Navarrete
El lenguaje JavaScript Asignatura: Curso: 1999/2000 Profesor: El lenguaje Javascript Pág. 1 1. Introducción Al crear páginas web en HTML nos damos cuenta de que estamos ciertamente restringidos a sólo
(a) Estar en posesión del Título de Graduado en Educación Secundaria Obligatoria (ESO)
Curso de programación con JavaScript 485 Aprende a programar sitios con Al terminar este curso sabrás cómo dotar de interactividad y dinamismo tus sitios, mediante el más extendido de los scripting languages
JavaScript permite realizar scripts con ambos métodos de programación: secuencial y basada en eventos.
1 EVENTOS INTRODUCCIÓN JavaScript permite realizar scripts con ambos métodos de programación: secuencial y basada en eventos. El nivel 1 de DOM no incluye especificaciones relativas a los eventos JavaScript.
escuela técnica superior de ingeniería informática
Versión original: Pablo Fernández (noviembre 2006) Actualización: P. Fernandez. Cambios menores en animaciones (Noviembre 2009) Tiempo: 2h escuela técnica superior de ingeniería informática HTML dinámico:
Ingeniería Web. Navegadores Web. Fernando Barraza A.
Ingeniería Web Navegadores Web Fernando Barraza A. fbarraza@javerianacali.edu.co Que es un navegador Un navegador, navegador red o navegador web (del inglés, web browser) es una aplicación de software
JavaScript: Introducción
JavaScript y AJAX http://www.it.uc3m.es/pedmume/ JavaScript: Introducción Tecnología del cliente. Se ejecuta en los navegadores, que además de HTML, casi todos interpretan este lenguaje. Se interpreta
Índice INTRODUCCIÓN...11 CAPÍTULO 1. SELECCIÓN DE ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN...13
Índice INTRODUCCIÓN...11 CAPÍTULO 1. SELECCIÓN DE ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN...13 1.1 Evolución Y CARACTERísticas de LOS navegadores Web...14 1.2 ARQUITECTURA de ejecución...17 1.3 Lenguajes
HTML Dinámico: Procesado de Formularios - Validación en Cliente -
HTML Dinámico: - Validación en Cliente - Grupo de Ingeniería del Software Web vs. Aplicación Web 1 IISSI 1 Hacia la Web 2.0 2 HTTP TCP/IP SQL Cliente web Servidor de aplicaciones Servidor de datos 3 IISSI
Universidad Autónoma de Baja California Escuela de Pedagogía Lenguaje de Programación Javascript Básico
1. Introducción Qué es Javascript? Javascript provee interactividad a páginas HTML. Es un lenguaje interpretado. No requiere licencia. Es reconocido por los principales browsers como Netscape y Explorer.
EVENTOS PRIMERA PARTE
EVENTOS PRIMERA PARTE JavaScript es un lenguaje "orientado a eventos", esto quiere decir que está preparado para responder a acciones del navegante, cosas que ocurran en el navegador, etc. (a eso es a
JavaScript. manual de referencia
JavaScript manual de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en el lenguaje JavaScript compatible para los navegadores Explorer y Netscape. Versión normalizada de la ECMA
Tema 2: JavaScript. Lenguaje interpretado. 1. Introducción.
Tema 2: JavaScript. 1. Introducción. 2. Sintaxis. 3. Cadenas, Matrices y Objetos. 4. Eventos. 5. Modelo de Objetos. 6. Aplicaciones. Tema 2: JavaScript 1 1. Introducción. Lenguaje interpretado. Creado
Asignatura: Programación 4
Conferencia #3 JavaScript y DOM Objetivos: Conocer utilidad de las tecnologías de programación Web del lado del cliente. Conocer la filosofía de trabajo con el DOM. Conocer elementos básicos de JavaScript
Sesión 10 Integración cliente/servidor
Sesión 10 Integración cliente/servidor Objetivo Desarrollar aplicaciones web que interactúen de forma eficiente y eficaz en su desempeño en el modelo cliente/servidor. En esta sesión Figura 1. Mapa de
Curso de JAVASCRIPT 3 / 3
Curso de JAVASCRIPT 3 / 3 Autor: Luis Marco Giménez ibliografía: avascript. The Definitive Guide 2 O Reilly. iseño de páginas web interactivas con avascript 2ª Ed. 2 Ra-Ma rofessional JavaScript 2 Wrox
BOM. Browser Object Model
1 BOM Browser Object Model INTRODUCCIÓN El BOM o Browser Object Model, permite acceder y modificar las propiedades de las ventanas del propio navegador. Es posible redimensionar y mover la ventana del
ANEXO I I. IDENTIFICACIÓN DEL CERTIFICADO DE PROFESIONALIDAD Denominación: Confección y Publicación de Páginas Web Código: IFCD0110 Familia
ANEXO I I. IDENTIFICACIÓN DEL CERTIFICADO DE PROFESIONALIDAD Denominación: Confección y Publicación de Páginas Web Código: IFCD0110 Familia Profesional: Informática y Comunicaciones. Área Profesional:
Certificado de Profesionalidad CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB [Nivel 2]
![Certificado de Profesionalidad CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB [Nivel 2]](/thumbs/29/13637404.jpg "Certificado de Profesionalidad CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB [Nivel 2]")
INFORMÁTICA Y COMUNICACIONES Certificado de Profesionalidad CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB [Nivel 2] Confección y publicación de páginas web Contenidos I IDENTIFICACIÓN DEL CERTIFICADO DE PROFESIONALIDAD
JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal.
1 JavaScript 1.1 Qué es JavaScript? JavaScript es un lenguaje interpretado. Es idóneo para trabajar en Web, ya que son los navegadores que utilizamos los que interpretan (y por tanto ejecutan) los programas
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML Desarrollo de aplicaciones Web. Felipe LC La actividad #1 En qué consistió la actividad 1? Qué conceptos aprendimos? Demos algunos ejemplos. Qué aprendimos
DREAMWEAVER 2 UNIVERSIDAD TECNOLOGICA DE AGUASCALIENTES
DREAMWEAVER 2 UNIVERSIDAD TECNOLOGICA DE AGUASCALIENTES Presentación José Alberto Rodríguez Castañeda Universidad Tecnológica de Aguascalientes http://ww.betiux.com.mx betordz@gmail.com Temas. 1) Javascript
Gestión de eventos y formularios en JavaScript.
TEMA 5 Contenido 1.- El objeto Form.... 1 1.1.- Formas de selección del objeto Form....2 1.2.- El formulario como objeto y contenedor....3 1.3.- Acceso a propiedades y métodos del formulario....4 Propiedad
CONTROLES FORMULARIOS PRIMERA PARTE
CONTROLES FORMULARIOS PRIMERA PARTE Acceder a los formularios de una página a través de su nombre Acceder a los formularios de una página a través de su nombre (atributo name) o a través de su atributo
Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:
Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras
Curso de JavaScript y DOM Scripting para Desarrollo Web
Curso de JavaScript y DOM Scripting para Desarrollo Web Descripción: Hoy en día, los usuarios de Internet esperan que los sitios Web proporcionen funcionalidades avanzadas, interfaces de usuario dinámicas
mope CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB
I. IDENTIFICACIÓN DEL CERTIFICADO DE PROFESIONALIDAD Denominación: Confección y Publicación de Páginas Web.. Código: IFCD0110 Familia Profesional: Informática y Comunicaciones. Área Profesional: Desarrollo.
JavaScript. El modelo de objetos. Tecnologías web 17. El modelo de objetos de JavaScript. Los objetos del navegador. Los objetos del navegador
JavaScript Tecnologías web 17 El modelo de objetos El modelo de objetos de JavaScript En JavaScript los objetos pueden ser considerados colecciones de propiedades (los atributos, su contenido) y métodos
Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella
Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella Contenido Objetivo Introducción Operadores Tipos de datos Funciones Networking armpower.blogs.upv.es 2 Objetivo Aprender a instalar Node.js Conocer
Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco
Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por
Manejo de eventos en JavaScript WEB-TECHNOLOGIES
Manejo de eventos en JavaScript JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES Objetivos Entender el uso de Formularios y Eventos con JavaScript. Visualizar la importancia de delegar el manejo de eventos al
Java Script Tecnologías de la Información y la Comunicación 1º Bachillerato Curso
Java Script Tecnologías de la Información y la Comunicación 1º Bachillerato Curso2015-2016 Programación para Páginas web:java Script 1. Conceptos básicos Antes de comenzar a programar, deberíamos tener
Formularios en HTML. Grupo de Ingeniería del Software. Departamento de Lenguajes y Sistemas Informáticos. October 11
Versión original: Amador Durán Toro (noviembre 2004) Última revisión: Pablo Fernández Montes (octubre 2009); Pequeño cambio en plantilla. Tiempo: 2h escuela técnica superior de ingeniería informática Departamento
BOLETÍN OFICIAL DEL ESTADO
Núm. 300 Miércoles 14 de diciembre de 2011 Sec. I. Pág. 135369 ANEXO I I. IDENTIFICACIÓN DEL CERTIFICADO DE PROFESIONALIDAD Denominación: Confección y Publicación de Páginas Web.. Código: IFCD0110 Familia
Trabajo para la asignatura Programación Orientada a Objetos junio, 2004 VISUAL BASIC SCRIPT. Enrique Martín Martín. Universidad de Salamanca
Trabajo para la asignatura Programación Orientada a Objetos junio, 2004 VISUAL BASIC SCRIPT Enrique Martín Martín Universidad de Salamanca i Tabla de Contenidos VISUAL BASIC SCRIPT... i 1. INTRODUCCIÓN...
Formularios en HTML 09/02/2015. Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos
09/02/2015 Grupo de Ingeniería del Software y Bases de Datos Universidad de Sevilla febrero 2014 Qué es un formulario? Febrero Introducción a la Ingeniería del Software y a los Sistemas de Información
Temario Programación Web para Web
Temario Programación Web para Web 1 Introducción al HTML 1 Qué es una página web? T 2 Qué es HTML? T 3 Porqué aprender HTML T 4 Base del lenguaje: las etiquetas HTML V 5 Estructura de un documento HTML
JavaScript. María Consuelo Franky. Universidad Javeriana 2009
JavaScript María Consuelo Franky Universidad Javeriana 2009 1 JavaScript en paginas web 2 Los scripts permiten hacer procesamiento en el cliente (navegador) antes de enviar datos al servidor Permiten realizar
Expresiones y operadores Las expresiones y operadores (son iguales a las usadas en C, C++ o Java) pueden ser: aritméticos, lógicos o relacionales.
1 Script: Es archivo de órdenes o archivo de procesamiento por lotes es un programa usualmente simple, que por lo regular se almacena en un archivo de texto plano. Los script son casi siempre interpretados.
JavaScript: Introducción
JavaScript: Introducción A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse
Primer Script sencillo
SCRIPTS El lenguaje para describir páginas, HTML, queda limitado a la hora de definir cualquier tipo de interactividad. Necesitamos aprender algún lenguaje nuevo para hacer pequeños efectos o interactividades.
BOLETÍN OFICIAL DEL ESTADO
Núm. 300 Miércoles 14 de diciembre de 2011 Sec. I. Pág. 135369 ANEXO I I. IDENTIFICACIÓN DEL CERTIFICADO DE PROFESIONALIDAD Denominación: Confección y Publicación de Páginas Web.. Código: IFCD0110 Familia
Scripting en el cliente: Javascript. Tecnologías Web
Scripting en el cliente: Javascript Tecnologías Web La clase String Se pueden manejar cadenas mediante objetos de la clase String En JavaScript las cadenas se pueden representar entre comillas simples
AUCA Procuradores. Manual de Usuario para Colegio
Manual de Usuario para Colegio Página: 2 13 INDICE INTRODUCCIÓN... 3 1 REQUISITOS PREVIOS... 3 2 ACCESO A AUCA PROCURADORES... 4 3 FUNCIONALIDADES DE AUCA PROCURADORES... 5 2.1 ACCESO A UN SITIO WEB A
Grupo de Ingeniería del Software. Conceptos básicos de formularios HTML
escuela técnica superior de ingeniería informática HTML Estático: Formularios Departamento de Lenguajes Grupo de Ingeniería del Software Noviembre 2004 Conceptos básicos de formularios HTML Los formularios
JavaScript. Contenidos. Introducción El lenguaje Validación de formularios. Programación en Internet 2005-2006. DLSI - Universidad de Alicante 1
Departamento de Lenguajes y Sistemas Informáticos JavaScript Programación en Internet Curso 2005-2006 Contenidos Introducción El lenguaje Validación de formularios DLSI - Universidad de Alicante 1 Introducción
Presentación y objetivos
Programación de Java Programación Web Presentación y objetivos JavaScript es un lenguaje de programación que se utiliza para realizar acciones dentro del ámbito de una página Web. Se trata de una programación
Ingeniería de Sistemas
Ingeniería de Sistemas Desarrollo y Servicios Web Sesión 7 Fernando Barraza A. fbarraza@puj.edu.co Sesión 7 Objetivo: Conocer el lenguaje de programación JavaScript, su estructura y aplicación en el desarrollo
JavaScript Básico. Ejemplo. Arreglos en JavaScript Creación de Arreglos. Asignación de valores. var miarray = new Array() var miarray = new Array(10)
1 JavaScript (III) JavaScript Básico Arreglos en JavaScript Creación de Arreglos var miarray = new Array() var miarray = new Array(10) Asignación de valores. miarray[0] = 1 miarray[1] = 0.5 miarray[2]
<SCRIPT SRC='xxxxxxxxxx.js'> <!-- contenido alternativo al script //-->
EJECUCIÓN SECUENCIAL: TUTORIAL JAVASCRIPT LLAMADA A FUNCIONES: p.e. ONCLICK="control()" HREF="javascript: control()" FICHEROS EXTERNOS:JS:
Características de JavaScript
Características de JavaScript Qué es JavaScript? o Lenguaje de programación interpretado utilizado fundamentalmente para dotar de comportamiento dinámico a las páginas web. o Cualquier navegador web actual
Arquitecturas Distribuidas. TEMA 3. Tecnologías de la web dinámica
Arquitecturas Distribuidas TEMA 3. Tecnologías de la web dinámica Contenido del tema III I. Procesado de información en el servidor. Tipos de peticiones. CGI II. Cookies III. PHP IV. Lenguajes de script
JavaScript para Hacking Web
Webinar Gratuito JavaScript para Hacking Web Alonso Eduardo Caballero Quezada Instructor y Consultor en Hacking Ético, Informática Forense & GNU/Linux Sitio Web: http://www.reydes.com e-mail: ReYDeS@gmail.com
HTML, PHP y bases de datos
HTML, PHP y bases de datos Estrella Pulido Cañabate HTML Estructura de un documento HTML Zen and Tumbolia The Zen monk Bassui wrote a letter to one of his disciples
RESUMEN HTML. Elementos de estructura
RESUMEN HTML Elementos de estructura primer elemento que enmarca todo el fichero HTML (obligatorio) zona de cabecera (obligatorio) definición de un título (obligatorio) cuerpo
Programa. Conceptos básicos: variables, valores y objetos predefinidos, operadores, etc. etc. Callbacks, eval(), etc.
Programa Programa 1. Introducción. Repaso HTML-CSS. Orientaciones Generales. 2. Javascript: Qué es? Dónde se ejecuta? Cómo se ejecuta? Conceptos básicos: variables, valores y objetos predefinidos, operadores,
JavaScript. Rogelio Ferreira Escutia
JavaScript Rogelio Ferreira Escutia Características JavaScript es un lenguaje de scripting basado en Objetos, utilizado para acceder a objetos en aplicaciones. Es utilizado, principalmente, integrado en
Tutorial de enlace entre Formulario Web y Servicio Web REST. Programación en Internet
Tutorial de enlace entre Formulario Web y Servicio Web REST Programación en Internet Angel Manuel Gamaza Domínguez José Miguel Otte Sainz-Aguirre Grado en Ingeniería Informática 20 de septiembre de 2016
Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web
La Web 1. Qué es la Web? 7 1.1 Lado servidor: HTTP, FTP, lenguajes, SQL 7 1.2 Lado cliente: HTML, CSS, JavaScript 10 2. Los lenguajes y su utilidad 10 2.1 HTML 10 2.2 CSS 14 2.3 JavaScript 17 2.4 Ejemplo
FORMULARIOS JAVASCRIPT: EJEMPLOS DE DOCUMENT.FORMS Y ELEMENTS. ACCESO DIRECTO A FORMULARIOS Y CAMPOS CON ID Y NAME (CU01175E)
APRENDERAPROGRAMAR.COM FORMULARIOS JAVASCRIPT: EJEMPLOS DE DOCUMENT.FORMS Y ELEMENTS. ACCESO DIRECTO A FORMULARIOS Y CAMPOS CON ID Y NAME (CU01175E) Sección: Cursos Categoría: Tutorial básico del programador
Scripting en el cliente: Javascript. Tecnologías Web
Scripting en el cliente: Javascript Tecnologías Web Motivación Por qué usar JavaScript? Permite crear efectos atractivos visualmente Permite crear sitios WEB que se visualicen de la misma manera en distintos
Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción
Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin
JavaScript Básico. Elementos Básicos: Comentarios: Literales: Valores que puede tomar una variable o una constante.
Javascript (II) 1 Elementos Básicos: Comentarios: Para una línea // Esto es un Comentario Para un bloque /*......... */ Literales: Valores que puede tomar una variable o una constante. Ejemplos: "Soy una
CGI Son las siglas de las palabras "Common Gateway Interface", es decir, "Interfaz Común de Pasarela". Esto es, la tecnología CGI está compuesta por
PHP PHP puede realizar cualquier tarea que pueda hacerse con un script CGI, los más conocidos para este lenguaje son las interfaces gráficas para páginas web o formularios que requieren de un intérprete
Fundamentos PHP. El término puntuación nos referimos a la sintaxis usada en PHP para la terminación de una línea de código (;)
Tags Fundamentos PHP La Sintaxis de PHP se deriva de muchos lenguajes de programación principalmente de C pero Perl también ha tenido mucha influencia en esta sintaxis Con las últimas incorporaciones agregadas,
Extensiones. Guillermo López Mozilla Hispano
Extensiones Guillermo López Mozilla Hispano Extensiones Qué son? Programilla para extender el comportamiento/visualización de cualquier programa Mozilla Usan la misma tecnología que las aplicaciones Mozilla
Diferencias con Java.
JavaScript Es una de las múltiples aplicaciones que han surgido para extender las capacidades del Lenguaje HTML. JavaScript es un lenguaje script orientado a documento. Nunca podrá hacer un programa, tan
Resumen manual de Javascript. Resumen Javascript. Este es un resumen de lo visto en el manual de Javascript de Aprende Web
Resumen Javascript Este es un resumen de lo visto en el manual de Javascript de Aprende Web http://aprende-web.net/javascript 1. Lo básico 1.1. Introducción En este tema haremos un resumen de lo visto
Coordinación editorial Miguel Fernando Niño Roa. Corrección de estilo Edwin Pardo Salazar
Universidad Distrital Francisco José de Caldas Instituto de Extensión de la Universidad Distrital Facultad Tecnológica Carlos Alberto Vanegas, Sonia Alexandra Pinzón Núñez, Rocío Rodríguez Guerrero, Gerardo
Aplicaciones Web Mg. Abril Saire Peralta
FORMULARIOS EN HTML Los formularios son interfaces interactivas que permiten a los usuarios interactuar con la página WEB a través del ingreso o captura de datos de los visitantes. A través de los formularios
Curso de Programación en PHP Nivel I
Curso de Programación en PHP Nivel I Facultad de Ciencia y Tecnología Oro Verde - 2012 Capítulo 2: Programación Web Algo de HTML Definición de Formularios Componentes de los Formularios Métodos de Envío
Programación en Internet
Tema 3. JavaScript Contenido 1. Introducción 2. Fundamentos de JavaScript - Tipos básicos y variables - Operadores - Estructuras de Control 3. Funciones y Objetos en JavaScript - Funciones - Objetos y
Introducción a Lenguajes Scripts Desarrollo Plataforma Web/Programación Web Ing. Tomás Eduardo Urbina. Lenguajes de script
Lenguajes de script Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página,
Programación Hipermedia I
Programación Hipermedia I Práctica 5: JavaScript 1. Objetivos Aprender el lenguaje de programación JavaScript. Aprender a manejar el DOM de una página web para acceder a su contenido. Aprender a validar
Programador Web en Wordpress + PHP + Javascripts + MySQL. Nivel Profesional. Informática y Programación
Programador Web en Wordpress + PHP + Javascripts + MySQL. Nivel Profesional Informática y Programación Ficha Técnica Categoría Informática y Programación Referencia 30307-1402 Precio 119.00 Euros Sinopsis
Condicionales. Comparación. Combinación
Condicionales Cuando hay que tomar una decisión aparecen las estructuras condicionales. En nuestra vida diaria se nos presentan situaciones donde debemos decidir: Entro al sitio A o al sitio B?, etc. Cuando
Tomar información por pantalla con JavaScript
Tomar información por pantalla con JavaScript Para lograr interactividad con nuestros usuarios, es necesario reaccionar a sus acciones o permitir que estos ingresen información para que sea manipulada,
EXTENSIÓN DE UML PARA APLICACIONES WEB
EXTENSIÓN DE UML PARA APLICACIONES WEB 1. Descripción Esta extensión de UML define un conjunto de estereotipos, valores etiquetados y restricciones que nos permiten modelar aplicaciones web. Los estereotipos
Introducción a JavaScript y DOM DISERTANTE ING. RASJIDO, JOSE ALBERTO
Introducción a JavaScript y DOM DISERTANTE ING. RASJIDO, JOSE ALBERTO Agenda 2 Introducción a JavaScript Introducción a DOM Referencias Introducción a JavaScript 3 Qué es JavaScript? JavaScript es un lenguaje
Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.
Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje