Manejo de eventos en JavaScript WEB-TECHNOLOGIES
|
|
|
- Ángela Zúñiga Acosta
- hace 6 años
- Vistas:
Transcripción
1 Manejo de eventos en JavaScript JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES
2 Objetivos Entender el uso de Formularios y Eventos con JavaScript. Visualizar la importancia de delegar el manejo de eventos al cliente. Utilizar los códigos de ejemplo para entender la utilidad de JavaScript en este ámbito. Conocer los diferentes controles: form, button, text, password, select, checkbox, radio, textarea. FCC-BUAP 2
3 Formularios y eventos I El uso de JavaScript en los formularios HTML se hace fundamentalmente con el objetivo de validar los datos ingresados. Se hace esta actividad en el cliente (navegador) para desligar de esta actividad al servidor que recibirá los datos ingresados por el usuario. Esta posibilidad de hacer pequeños programas que se ejecutan en el navegador, evitan intercambios innecesarios entre el cliente y el servidor (navegador y sitio web). FCC-BUAP 3
4 Formularios y eventos II Suponemos que conoce las marcas para la creación de formularios en una página web: form text password textarea button submit reset checkbox radio select hidden <form> </form> <input type="text"> <input type="password"> <textarea> </textarea> <input type="button"> <input type="submit"> <input type="reset"> <input type="checkbox"> <input type="radio"> <select> </select> <input type="hidden"> FCC-BUAP 4
5 Formularios y eventos III El navegador crea un objeto por cada control visual que aparece dentro de la página. Nosotros podemos acceder posteriormente desde JavaScript a dichos objetos. El objeto principal es el FORM que contendrá todos los otros objetos: TEXT (editor de líneas), TEXTAREA (editor de varias líneas), etc. Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una acción que se dispara, por ejemplo si se presiona un botón). FCC-BUAP 5
6 Formularios y eventos III Vamos a resolver un problema muy sencillo empleando el lenguaje JavaScript; dispondremos de un botón y cada vez que se presione, mostraremos un contador: El código de este ejemplo, se muestra a continuación: A los eventos de los objetos HTML se les asocia una función, dicha función se ejecuta cuando se dispara el evento respectivo. FCC-BUAP 6
7 Formularios y eventos IV En este caso cada vez que presionamos el botón, se llama a la función incrementar, en la misma incrementamos la variable contador en uno. Hay que tener en cuenta que a la variable contador la definimos fuera de la función para que no se inicialice cada vez que se dispara el evento. La función alert crea una ventana que puede mostrar un mensaje. FCC-BUAP 7
8 Ejemplo: formulario y evento <html> <head></head> <body> <script type="text/javascript"> var contador = 0; function incrementar() contador++; alert('el contador ahora vale :' + contador); </script> <form> <input type="button" onclick="incrementar()" value="incrementar"> </form> </body> </html> FCC-BUAP 8
9 Controles form, button y text I Hasta ahora hemos visto como crear un formulario con controles de tipo BUTTON. Agregamos un control de tipo TEXT (permite al operador cargar caracteres por teclado). Ahora veremos la importancia de definir un id a todo control de un formulario. Con un ejemplo veremos estos controles: Diseñar un formulario que permita ingresar el nombre y edad de una persona: FCC-BUAP 9
10 Ejemplo: form, button y text <html> <head></head> <body> <script type="text/javascript"> function mostrar() var nom = document.getelementbyid('nombre').value; var ed = document.getelementbyid('edad').value; alert('ingresó el nombre:' + nom); alert('y la edad:' + ed); </script> <form> Ingresa tu nombre: <input type="text" id="nombre"/><br/> Ingresa tu edad: <input type="text" id="edad"/><br/> <input type="button" value="confirmar" onclick="mostrar()"/> </form> </body> </html> FCC-BUAP 10
11 Controles form, button y text II En este problema tenemos cuatro controles: 1 FORM, 1 BUTTON, 2 TEXT. El evento que se dispara al presionar el botón se llama mostrar. La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT: var nom=document.getelementbyid('nombre').value; var ed=document.getelementbyid('edad').value; Para hacer más clara la función guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT. FCC-BUAP 11
12 Controles form, button y text III La propiedad "id" es un identificar único para cualquier marca HTML que luego nos permite desde JavaScript acceder a dicho elemento. El método getelementbyid nos retorna una referencia del objeto HTML que le pasamos como parámetro, a partir de este objeto accedemos a la propiedad value que almacena el valor ingresado por el operador en el control TEXT. Luego de extraer los valores ingresados por el operador los mostramos utilizando la función alert: var nom = document.getelementbyid('nombre').value; var ed = document.getelementbyid('edad').value; alert('ingresó el nombre:' + nom); alert('y la edad:' + ed); FCC-BUAP 12
13 Control password I Esta marca es una variante de la de tipo "TEXT". La diferencia fundamental es que cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla, es decir, es fundamental para el ingreso de claves y para que otros usuarios no vean los caracteres que capturamos. La mayoría de las veces este dato se procesa en el servidor. Pero podemos en el cliente (es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres, por ejemplo. FCC-BUAP 13
14 Control password II Ejemplo: Codificar una página que permita ingresar un password y luego mostrar en una ventana de alerta si tiene menos de 5 caracteres. <html> <head></head> <body> <script type="text/javascript"> function verificar() var clave=document.getelementbyid('clave').value; if(clave.length<5) alert('la clave no puede tener menos de 5 caracteres!!!'); else alert('largo de clave correcta'); FCC-BUAP 14
15 Control password III </script> <form> Ingresa un password: <input type="password" id="clave"><br> <input type="button" value="confirmar" onclick="verificar()"> </form> </body> </html> En este problema debemos observar que cuando ingresamos caracteres dentro del campo de edición sólo vemos asteriscos, pero realmente en memoria se almacenan los caracteres tipeados. FCC-BUAP 15
16 Control password IV Si queremos mostrar los caracteres ingresados debemos acceder mediante getelementbyid a la marca HTML clave: el método var clave=document.getelementbyid('clave').value; Normalmente, a este valor no lo mostraremos dentro de la página, sino se perdería el objetivo de este control (ocultar los caracteres tipeados). Si necesitamos saber la cantidad de caracteres que tiene un string accedemos a la propiedad length que retorna la cantidad de caracteres. if (clave.length<5) FCC-BUAP 16
17 Control select I Este otro objeto visual que podemos disponer en una FORM permite realizar la selección de un string de una lista y tener asociado al mismo un valor no visible. El objetivo fundamental en JavaScript es determinar qué elemento está seleccionado y qué valor tiene asociado. Esto lo hacemos cuando ocurre el evento onchange. Para determinar la posición del índice seleccionado en la lista: document.getelementbyid('select1').selectedindex; FCC-BUAP 17
18 Control select II Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedindex (almacena la posición del string seleccionado de la lista, numerando a partir de cero). Para determinar el string seleccionado: document.getelementbyid('select1').options[ document.getelementbyid('select1').selectedindex].text; Es decir que el objeto select1 tiene otra propiedad llamada options, a la que accedemos por medio de un subíndice, al string de una determinada posición. FCC-BUAP 18
19 Control select III Hay problemas en los que solamente necesitaremos el string almacenado en el objeto SELECT y no el valor asociado (no es obligatorio asociar un valor a cada string). Y por último con esta expresión accedemos al valor asociado al string: document.getelementbyid('select1').options[ document.getelementbyid('select1').selectedindex].value; Un ejemplo completo que muestra el empleo de un control SELECT es el siguiente: FCC-BUAP 19
20 Control select IV <html> <head></head> <body> <script type="text/javascript"> function cambiarcolor() var seleccion=document.getelementbyid('select1'); document.getelementbyid('text1').value=seleccion.selectedindex; document.getelementbyid('text2').value=seleccion.options[ seleccion.selectedindex].text; document.getelementbyid('text3').value=seleccion.options[ seleccion.selectedindex].value; </script> <form> FCC-BUAP 20
21 Control select V <select id="select1" onchange="cambiarcolor()"> <option value="0xff0000">rojo</option> <option value="0x00ff00">verde</option> <option value="0x0000ff">azul</option> </select> <br> Número de índice seleccionado del objeto SELECT:<input type="text" id="text1"> <br> Texto seleccionado:<input type="text" id="text2"> <br> Valor asociado:<input type="text" id="text3"> <br> </form> </body> </html> FCC-BUAP 21
22 Control select VI Se debe analizar en profundidad este problema para comprender primeramente la creación del objeto SELECT en HTML, y cómo acceder luego a sus valores desde Javascript. Es importante para el objeto SELECT definir qué función llamar cuando ocurra un cambio: onchange="cambiarcolor()" Por cada opción del objeto SELECT tenemos una línea: FCC-BUAP 22
23 Control select VII Donde Rojo es el string que se visualiza en el objeto SELECT y value es el valor asociado a dicho string. Analizando la función cambiarcolor() podemos ver cómo obtenemos los valores fundamentales del objeto SELECT. FCC-BUAP 23
24 Control checkbox I El control CHECKBOX es el cuadradito que puede tener dos estados (seleccionado o no seleccionado). Para conocer su funcionamiento y ver como podemos acceder a su estado desde JavaScript haremos un pequeña página. Ejemplo: Diseñar una página que muestre 4 lenguajes de programación que el usuario puede seleccionar si los conoce. Luego mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado el operador. FCC-BUAP 24
25 Control checkbox II <html> <head></head> <body> <script type="text/javascript"> function contarseleccionados() var cant=0; if (document.getelementbyid('checkbox1').checked) cant++; if (document.getelementbyid('checkbox2').checked) cant++; FCC-BUAP 25
26 Control checkbox III if (document.getelementbyid('checkbox3').checked) cant++; if (document.getelementbyid('checkbox4').checked) cant++; alert('conoce ' + cant + ' lenguajes'); </script> <form> <input type="checkbox" id="checkbox1">javascript <br> <input type="checkbox" id="checkbox2">php <br> FCC-BUAP 26
27 Control checkbox IV <input type="checkbox" id="checkbox3">jsp <br> <input type="checkbox" id="checkbox4">vb.net <br> <input type="button" value="mostrar" onclick="contarseleccionados()"> </form> </body> </html> Cuando se presiona el botón se llama a la función JavaScript contarseleccionados(). En la misma verificamos uno a uno cada control checkbox accediendo a la propiedad checked del elemento que almacena true o false según esté o no seleccionado el control. FCC-BUAP 27
28 Control checkbox V Disponemos un 'if' para cada checkbox: if(document.getelementbyid('checkbox1').checked) cant++; Como la propiedad checked almacena un true o false podemos utilizar dicho valor directamente como valor de la condición en lugar de codificar: if (document.getelementbyid('checkbox1').checked==true) cant++; FCC-BUAP 28
29 Control checkbox VI Al contador 'cant' lo definimos e inicializamos en cero previo a los cuatro if. Mostramos finalmente el resultado final. FCC-BUAP 29
30 Control radio I Los objetos RADIO tienen sentido cuando disponemos varios elementos. Sólo uno puede estar seleccionado del conjunto. Ejemplo: Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los estudios que tiene un usuario: <html> <head></head> <body> <script type="text/javascript"> function mostrarseleccionado() if(document.getelementbyid('radio1').checked) alert('no tienes estudios'); FCC-BUAP 30
31 Control radio II if(document.getelementbyid('radio2').checked) alert('tienes estudios primarios'); if(document.getelementbyid('radio3').checked) alert('tienes estudios secundarios'); if(document.getelementbyid('radio4').checked) alert('tienes estudios universitarios'); </script> FCC-BUAP 31
32 Control radio III <form> <input type="radio" id="radio1" name="estudios">sin estudios <br> <input type="radio" id="radio2" name="estudios">primarios <br> <input type="radio" id="radio3" name="estudios">secundarios <br> <input type="radio" id="radio4" name="estudios">universitarios <br> <input type="button" value="mostrar" onclick="mostrarseleccionado()"> </form> </body> </html> FCC-BUAP 32
33 Control checkbox IV Es importante notar que todos los objetos de tipo RADIO tienen definida la propiedad name con el mismo valor (esto permite especificar que queremos que los radios estén relacionados entre si). Luego podemos acceder a cada elemento mediante el método getelementbyid para consultar la propiedad checked: if (document.getelementbyid('radio1').checked) alert('no tienes estudios'); Igual que el checkbox, la propiedad checked retorna true o false, según esté o no seleccionado el control radio. FCC-BUAP 33
34 Control textarea I Este control es similar al control TEXT, salvo que permite el ingreso de muchas líneas de texto. La marca TEXTAREA en HTML tiene dos propiedades: rows y cols que nos permiten indicar la cantidad de filas y columnas a mostrar en pantalla. Ejemplo: Solicitar el mail y el curriculum de una persona. Mostrar un mensaje si el curriculum supera los 2000 caracteres. FCC-BUAP 34
35 Control textarea II <html> <head></head> <body> <script type="text/javascript"> function controlarcaracteres() if (document.getelementbyid('curriculum').value.length>2000) alert('curriculum muy largo'); else alert('datos correctos'); </script> FCC-BUAP 35
36 Control textarea III <form> <textarea id="curriculum" rows="10" cols="50" ></textarea> <br> <input type="button" value="mostrar" onclick="controlarcaracteres()"> </form> </body> </html> Para saber el largo de la cadena cargada: if(document.getelementbyid('curriculum').value.length>2000) accedemos a la propiedad length. FCC-BUAP 36
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
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
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
Construcción de formularios en HTML. Formularios. Bases de Datos 2012/2013. Luis Valencia Cabrera
Construcción de formularios en HTML. Formularios Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Formularios... 2 Controles... 2 Campos de texto... 2 Selección de opciones... 3 Selección de ficheros...
A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor:
FORMULARIOS BAJO HTML INTRODUCCION A FORMULARIOS Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre
Los formularios irán delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parámetros:
Formularios en HTML Los formularios nos sirven para solicitar información al usuario y procesarla. El formulario se compondrá de diferentes componentes como campos de texto, botones de opción, listas desplegables,...
1. Haz que se muestre una pantalla de alerta con tu nombre. 2. Repite el ejercicio anterior pero usando una variable para guardar tu nombre
1. Haz que se muestre una pantalla de alerta con tu nombre alert("carlos Guerrero"); 2. Repite el ejercicio anterior pero usando una variable para guardar tu nombre Crea una variable para almacenar el
HTML: Formularios. Francisco J. Martín Mateos Carmen Graciani Díaz. Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla
Francisco J. Martín Mateos Carmen Graciani Díaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Formularios Un formulario es una zona del cuerpo de un documento HTML con
Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR
Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR 2.4 FORMULARIOS 18/10/2014 Taboada León IES San Sebastián Huelva 1 Formularios (I) Los formularios permiten al usuario introducir
Formularios HTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014
Formularios HTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Declaración de un formulario Elemento clave para el desarrollo de aplicaciones
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,
2- Formularios y JavaScript Course: Developing web- based applica=ons
2- Formularios y JavaScript Course: Developing web- based applica=ons Cris*na Puente, Rafael Palacios 2010- 1 Creación de formularios Formularios Un formulario HTML es una sección de un documento que contiene
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:
Para declarar un formulario se utiliza la etiqueta FORM que consta básicamente de dos atributos: <FORM ACTION ="programa" METHOD ="método">
FORMULARIOS Los formularios son por excelencia los elementos utilizados para recolectar información de los usuarios que luego es enviada al servidor para ser procesada. Están constituidos por un conjunto
2. Acción: El atributo action de la etiqueta <form> es el URL del script PHP que procesa los datos de entrada del formulario.
UNIDAD CERO Crear formularios en HTML. La creación de formularios en html es muy importante en el desarrollo de aplicaciones web dinámicas, tomando en cuenta que estos son los encargados (formularios)
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
Introducción a JSON JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES
Introducción a JSON JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES Objetivos Conocer el origen, la utilidad y las bases sintácticas que dieron lugar a JSON. Entender las diferencias de notación entre XML y
FORMULARIO HTML PREPARACION DEL FORMULARIO. Que información debes solicitar al visitante de tu web?
FORMULARIO HTML Con este apunte se realizara un sencillo formulario que creará un nuevo mensaje de e-mail en el computador del usuario; y dicho mensaje se rellenará con tu dirección de e-mail (como destinatario),
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
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
Escribiendo el HTML. Un formulario se declara entre estos dos tags:
Formularios Un formulario HTML sirve como principal punto de interacción con el usuario: mediante ellas, podemos hacer posible la interacción de nuestra página Web para con el usuario que visita nuestro
Desarrollo de sitios web con PHP y MySQL
Desarrollo de sitios web con PHP y MySQL Tema 3: Formularios José Mariano González Romano mariano@lsi.us.es Tema 3: Formularios 1. Acceso a formularios HTML desde PHP 2. El formulario de PHP 3. Subida
El programa en JavaScript debe ir encerrado entre la marca script e inicializada la propiedad type con la cadena text/javascript:
Javascript Qué es JavaScript? Es un lenguaje de scripting (Código interno en las páginas HTML) necesario para los elaboradores de sitios Web, mediante el cual se puede hacer que las páginas sean activas
Resolución de la incompatibilidad entre los navegadores. Utilización de una vasta cantidad de plugins creados por otros desarrolladores.
jquery JQuery es una biblioteca de JavaScript cross-browser desarrollada para simplificar los scripts del lado del cliente que interactúan con HTML. Esta fue lanzada en enero de 2006 en el BarCamp de Nueva
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
MANUAL DE FORMULARIOS EN HOSTING
MANUAL DE FORMULARIOS EN HOSTING Índice 1 Qué es y para qué sirve un formulario 3 2 Qué contesta a los formularios 3 3 Qué esquema debe seguir el formulario 3 4 Qué datos y cómo los recibe la empresa a
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
Bases de Datos. Marta Elena Zorrilla Pantaleón. Rafael Duque Medina DPTO. DE MATEMÁTICAS, ESTADÍSTICA Y COMPUTACIÓN
Bases de Datos Tema 05. Prototipo de una aplicación de base de datos Marta Elena Zorrilla Pantaleón Rafael Duque Medina DPTO. DE MATEMÁTICAS, ESTADÍSTICA Y COMPUTACIÓN Este tema se publica bajo Licencia:
INSERCIÓN DE UN REGISTRO CON PHP Y MYSQL
INSERCIÓN DE UN REGISTRO CON PHP Y MYSQL Para poder realizar este ejercicio necesitamos la base de datos, para esto abriremos el gestor de bases de datos Mysql Empezaremos con crear la base de datos con
Formularios HTML. Introducción. Elementos de entrada de datos. Entrada de texto
Formularios HTML Tiempo estimado: 20min Son muchos los sitios webs que solicitan datos al usuario como, por ejemplo, sus credenciales, los datos de un nuevo producto o la confirmación de un pedido. Hasta
A continuación el código del formulario Registro.html y del archivo validar.js de javascript:
Examen Parcial II- Programación III 1. Dado el siguiente formulario de registro modifique la manera en que se muestran los mensajes de error de validación para cada uno de los campos. Sustituya los mensajes
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
Las Matemáticas en Secundaria con Software Libre. GeoGebra - Interacción con JavaScript. Daniel López Avellaneda
Las Matemáticas en Secundaria con Software Libre Daniel López Avellaneda dani@lubrin.org GeoGebra - Interacción con JavaScript Manual para el curso organizado por: CEP Cuevas-Olula +CEP El Ejido +CEP Almería
Tema: Creación de Formularios HTML
Tema: Creación de Formularios HTML 1.- Introducción La Web se ha convertido en una poderosa herramienta para las empresas que se dedican a realizar encuestas. En la actualidad es muy común acceder a páginas
Curso de PHP Modulo 7 Creando Una Base de Datos y accediendo a ella R-Luis
Base de datos: Lo primero que necesitamos es crear nuestra base de datos y ahí dentro una tabla para poder acceder a ella y cargar modificar y borrar datos, pensé en una base de datos de usuarios de una
PRACTICA CSS - DHTML JQUERY. -Definir en un archivo de hoja de estilo externa.css estas dos clases:
PRACTICA CSS - DHTML JQUERY 1- CSS -Definir en un archivo de hoja de estilo externa.css estas dos clases:.subrayado { color:#00aa00; text-decoration:underline; }.tachado { color:#00aa00; text-decoration:line-through;
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,
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
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
1.- CREACIÓN DE CONSULTAS.
1.- CREACIÓN DE CONSULTAS. Una consulta permite efectuar preguntas acerca de la información almacenada en las tablas. En una consulta se pueden obtener datos de una tabla e incluso de varias tablas, por
JavaScript avanzado JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES
JavaScript avanzado JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES Objetivos Conocer eventos adicionales como onfocus, onblur, onmouseover, onmouseout y onload Análisis de las principales propiedades y uso
IF ELSE, IF ELSE IF JAVASCRIPT. CONDICIONALES DEL FLUJO O ESTRUCTURAS DE DECISIÓN. EJEMPLOS. EJERCICIOS. (CU01119E)
APRENDERAPROGRAMAR.COM IF ELSE, IF ELSE IF JAVASCRIPT. CONDICIONALES DEL FLUJO O ESTRUCTURAS DE DECISIÓN. EJEMPLOS. EJERCICIOS. (CU01119E) Sección: Cursos Categoría: Tutorial básico del programador web:
Estructura repetitiva while
Estructura repetitiva while Hasta ahora hemos empleado estructuras SECUENCIALES y CONDICIONALES. Existe otro tipo de estructuras tan importantes como las anteriores que son las estructuras REPETITIVAS.
FORMULARIOS HTML. BOTONES: ENVÍO SUBMIT, RESTABLECIMIENTO RESET, IMAGEN Y CONTENIDO (BUTTON). (CU00724B)
APRENDERAPROGRAMAR.COM FORMULARIOS HTML. BOTONES: ENVÍO SUBMIT, RESTABLECIMIENTO RESET, IMAGEN Y CONTENIDO (BUTTON). (CU00724B) Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde
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
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
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
Boletín de prácticas Práctica 3: HTML básico
HTML básico Boletín de prácticas Práctica 3: HTML básico INFORMÁTICA 1 Curso 2003-2004 Biblioteconomía y Documentación 1.- ENUNCIADO Haciendo uso de lo aprendido en clase de teoría diseñar las siguientes
Introducción. Cómo funciona la cosa. En el momento en que accedemos a una página del tipo que mencionamos, podemos
Interactividad,Forms & Scripts CGI (Primera Parte - Uso de los Forms) (Segunda Parte - Programación de Scripts) (Tercera Parte - Programación CGI avanzada) Indice ------ PRIMERA PARTE
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
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
De que forma se pueden crear aplicativos de software en lenguajes de programación en entorno web? VARIABLES ESTRUCTURAS DE CONTROL - FUNCIONES
PREGUNTA PROBLEMATIZADORA: De que forma se pueden crear aplicativos de software en lenguajes de programación en entorno web? VARIABLES VARIABLES ESTRUCTURAS DE CONTROL - FUNCIONES Una variable es un espacio
Desarrollo Web con PHP y MySQL
Tablas multidimensionales Las tablas multidimensionales son simplemente tablas en las cuales cada elemento es a su vez otra tabla. $calendario[] = array (1, "enero", 31); $calendario[] = array (2, "febrero",
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.
Qué es HTML? HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo
STATIC JAVASCRIPT. PROPIEDADES Y MÉTODOS ESTÁTICOS O DE CLASE. EJERCICIO. CÓDIGO EJEMPLOS BÁSICOS (CU01148E)
APRENDERAPROGRAMAR.COM STATIC JAVASCRIPT. PROPIEDADES Y MÉTODOS ESTÁTICOS O DE CLASE. EJERCICIO. CÓDIGO EJEMPLOS BÁSICOS (CU01148E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
VALIDACION DE FORMULARIOS
VALIDACION DE FORMULARIOS COMO ACCEDER A LOS ELEMENTOS DE UN FORMULARIO Acceder a los formularios de una página a través del array forms Cuando se carga una página web, el navegador crea automáticamente
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
CapÍtulo 3: Manejo de Forms.
CapÍtulo 3: Manejo de Forms. El mecanismo básico de interacción entre el usuario y un web-site esta dado por el uso de formularios html, el server envía un formulario que el browser muestra en pantalla
GUIA DE TRABAJO CON EL EDITOR DE VISUAL BASIC DE LA FICHA PROGRAMADOR
GUIA DE TRABAJO CON EL EDITOR DE VISUAL BASIC DE LA FICHA PROGRAMADOR Al hacer clic en la ficha programador de Excel se activa la ficha correspondiente Al hacer clic sobre el botón de Visual Basic, del
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
Alumn@: U.T. 6.- Lenguaje Javascript - DOM. Parte Práctica
E-mail: juanlop@um.es Pág. 1 U.T. 6.- Lenguaje Javascript - DOM. Parte Práctica Alumn@: Ejercicio 1.- Calculadora tabla formulario. Realiza una página implemente una calculadora aritmética. Para ello haz
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
Formularios. ISCT. Luis Antonio Mancilla Aguilar
Formularios ISCT. Luis Antonio Mancilla Aguilar Formularios Sin duda, uno de los aspectos más importantes de cualquier aplicación web ya esté dirigida a un entorno móvil o de escritorio es la interacción
PHP orientado a objetos:
PHP orientado a objetos: La mayoría de los lenguajes de programación modernos son orientados a objetos (abreviado OO) o en su defecto se aproximan mucho a éstos permitiendo algunas de sus características
De esta manera, cuando el usuario rellena un campo cómo el siguiente... <input type="text" name="telefono"> </form>
TIPS FORMULARIOS PHP Al enviar un formulario HTML, los datos són enviados al servidor Web y este es capaz de procesarlos y realizar un seguido de acciones en función de los datos introducidos, los datos
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.
Programación en Visual Basic Ricardo Rodríguez García
Manual Básico de Programación en Visual Basic 1.- Estructura de un proyecto Visual Basic Los programas o aplicaciones desarrolladas en Visual Basic van a constituir un único paquete que denominaremos proyecto.
<script type="text/javascript" src="miscript.js"></script>
13. Applets, JavaScript y XML 13.6 JavaScript Objetivos GeoGebra suministra diversos métodos que posibilitan la interacción de JavaScript con el applet de la construcción. Aquí veremos de forma muy breve,
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.
Manual de Usuario Saldos
Manual de Usuario Saldos Introducción El objetivo del presente manual es: Dar a conocer los cambios que se efectuaran próximamente en el SICA tanto a nivel visual como en el manejo de las transacciones
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
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
Formularios. La mayoría de los elementos de entrada son visuales y pueden interactuar con el usuario.
Formularios Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio
Clase. geniería de la Computación. Departamento de Ciencias e Ing. Diego C. Martínez - DCIC-UNS
Tecnología de Programación Clase 22 Diego C. Martínez Departamento de Ciencias e Ing geniería de la Computación Universidad Nacional del Sur Componentes Web J2EE presenta los componentes Web (web components):
Ejercicio: Mensajes Alert, Confirm y Prompt
Ejercicio: Mensajes Alert, Confirm y Prompt Utilizando Javascript podemos crear tres diferentes tipos de mensajes emergentes que se pueden usar para mostrar información, obtener confirmación u obtener
Recibos de Sueldos Web
Recibos de Sueldos Web Ministerio de Educación - Provincia de Jujuy Manual de Usuario Versión 2.2 - Noviembre de 2016 Departamento Sistemas Dirección General de Administración Contenido 1 Información general
PODER JUDICIAL DE LA NACION ARGENTINA
1 MANUAL DE NOTIFICACIONES ELECTRONICAS PODER JUDICIAL DE LA NACION ARGENTINA Índice: 2 Concepto de Notificaciones Electrónicas ---------------------------------------------------3 Sistema de Gestión Judicial
2.4 Luego, en la pestaña superior al lado de la barra del menú, elegir Desarrollador de aplicaciones
PASO 2: PREPARAR LA PANTALLA PARA EL DESPLIEGUE DE LOS DATOS 2.1 Desde la pantalla inicial de DW, pestaña Crear nuevo, elegir PHP 2.2 Una vez dentro de DW, hacer clic en la opción Sitio, luego elegir Administrar
HTML. Rogelio Ferreira Escutia
HTML Rogelio Ferreira Escutia Características Básicas 2 Estructura HTML es un lenguaje basado en etiquetas. Cada etiqueta tiene un inicio y fin. Las etiquetas se identifican por los símbolos < y > 3 Inicio
PRACTICA DE CÓDIGO HTML/PHP
PRACTICA DE CÓDIGO HTML/PHP ESCRIBA EL CÓDIGO CORRESPONDIENTE EN HTML Y PHP Ejemplo: Escribe tu nombre centreado, con tipo de letra "Arial" y tamaño 3 juan Gómez
Sesion 2 1. Aplicación del Lenguaje JAVA
Sesion 2 1. Aplicación del Lenguaje JAVA Applets. Un applet es un programa que viaja por la red desde un servidor web y que se instala en la memoria RAM de la maquina del cliente para ejecutarse dentro
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
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
GUÍA DE USUARIO. Cliente: Canje de Granos. Aplicación: Portal Canje de Granos Consulta Historial de Entregas
GUÍA DE USUARIO Cliente: Canje de Granos Aplicación: Portal Canje de Granos Consulta Historial de Entregas Consulta Historial de Entregas Pág. 1 de 11 Contenido 1. OBJETIVO... 3 2. ALCANCE... 3 3. ACCESO
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
Guía instructiva Sistema validación Integral (SVI) APROSS AMBULATORIO
Guía instructiva Sistema validación Integral (SVI) APROSS AMBULATORIO Descripción y funcionamiento del Sistema SVI Ingresar al sitio web www.traditum.com Ingresando a la opción Ingreso a Prestadores, con
PHP Interacción con el cliente
PHP Interacción con el cliente Aplicaciones Web/Sistemas Web Juan Pavón Mestras Dep. Ingeniería del Software e Inteligencia Artificial Facultad de Informática Universidad Complutense Madrid Material bajo
CATEGORIZACIÓN 2014 MANUAL DEL INVESTIGADOR
CATEGORIZACIÓN 2014 MANUAL DEL INVESTIGADOR ÍNDICE Diagrama general...3 1. Ingreso al sistema CVar... 4 1.1 Seleccionar ROL Categorización Incentivos 2013... 4 1.2 Anexo... 5 1.3 Pantalla Principal...
Práctica 6: Webs dinámicas
Comercio Electrónico Práctica 6: Webs dinámicas José Luis Salazar jsalazar@unizar.es Antonio Sanz ansanz@unizar.es Rafael del Hoyo rdelhoyo@ita.es Objetivo de la Práctica En esta práctica se mostrarán
MÓDULO FACILITADOR USHAY
MANUAL DE USUARIO MÓDULO FACILITADOR USHAY CALIFICACIÓN MENOR CUANTÍA DE SERVICIOS OCTUBRE 2014 INDICE 1. Presentación... 2 2. Aplicativo USHAY Calificación de Ofertas... 2 2.1 Datos Generales... 2 2.2
Cómo efectuar una Conciliación Bancaria desde ConBan
Cómo efectuar una Conciliación Bancaria desde ConBan Ingresamos al programa, le solicita al usuario el usuario y contraseña. En este ejemplo la contraseña es conban9 ingresamos y accedemos al sistema.
ANEXO A. FRAMEWORK SARA
ANEXO A. FRAMEWORK SARA Universidad Distrital Francisco José de Caldas 1 1. COMPONENTES SARA se compone de bloques, y cada bloque contiene: Carpeta css: contiene los archivos que le dan estilo al bloque
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 12: Formularios y JavaScript.
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 12: Formularios y JavaScript. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Formularios y JavaScript
SWITCH JAVASCRIPT. SELECCIÓN ENTRE ALTERNATIVAS. DIAGRAMA DE FLUJO Y EJEMPLO DE APLICACIÓN. (CU01120E)
switch JavaScript Decisión entre distintas alternativas APRENDERAPROGRAMARCOM SWITCH JAVASCRIPT SELECCIÓN ENTRE ALTERNATIVAS DIAGRAMA DE FLUJO Y EJEMPLO DE APLICACIÓN (CU01120E) Sección: Cursos Categoría:
SISTEMA DE EVENTOS RELEVANTES
SISTEMA DE EVENTOS RELEVANTES 17 DE JULIO DE 2014 MARCOS ESPINOZA TORRES Departamento informática Autónoma Televisión Contenido Problemática... 3 Objetivo... 3 Objetivos específicos... 3 Requerimientos
G.U.G.L.E.R Grupo Universitario de GNU/Linux de Entre Ríos. F.C.y.T Facultad de Ciencia y Tecnología Universidad Autónoma de Entre Ríos
G.U.G.L.E.R Grupo Universitario de GNU/Linux de Entre Ríos F.C.y.T Facultad de Ciencia y Tecnología Universidad Autónoma de Entre Ríos CONTENIDO Programación Web... 5 Introducción... 5 Esquema cliente-servidor
Momentos de disparo de reglas en transacciones
Momentos de disparo de reglas en transacciones Cuando vimos las reglas que podemos escribir en las transacciones, dijimos que no era necesario especificar cuando debe ejecutarse cada una de ellas, ya que
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
En esta sección se describen las variables, constantes, tipos de datos, operadores y estructuras de control
CORPORACION UNIVERSITARIA DE EDUCACION SUPERIOR Estructura de Datos Docente: Víctor Andrés Ochoa Correa En esta sección se describen las variables, constantes, tipos de datos, operadores y estructuras
MICROSOFT EXCEL 2007 NIVEL AVANZADO. Contenido
MICROSOFT EXCEL 2007 NIVEL AVANZADO GUÍA TEÓRICO-PRÁCTICA N 4 MACROS Contenido INTRODUCCION... 2 Crear una macro automáticamente... 2 Ejecutar una macro... 3 Actividad 1... 4 Asignar una macro a un botón...