Programacion Web Con Base de Datos - Semana 3

Validación y verificación de información en Sitios
Web
Aviso:
Antes de empezar el presente laboratorio, es importante conocer que la fecha del servidor
local “localhost” está avanzado 5 horas hacia adelante, para corregirlo deberá de seguir los
siguientes pasos:
- Ir a C:\xampp\php, y abrir archivo php.ini

- Ubicar las siguientes líneas:
[Date]
;date.timezone=Europe/Berlin
- Modificar por las siguientes líneas:

[Date]
;date.timezone=America/Lima
De esta forma, toda función relacionado con fecha estará apuntado a la hora nacional.
1. JavaScript
Es un lenguaje orientado a documento, orientado a mejorar los procesos de texto del sitio
web, debe de cumplir las siguientes características:
- El código JavaScript puede ubicarse dentro de las etiquetas “<head>…</head>” de la

estructura HTML., asi como dentro de las etiquetas ”<body>…</body>”.
- Es amigable y acelera el tiempo de desarrollo, debido a que emplea tecnologías tanto
para el back-end (lado del servidor) como para el front-end (lado del cliente,
específicamente la vista)
- No es necesario declarar tipo de dato para una variable, pero si se le incluye, se hace
por medio del tipo de dato “var”, seguido del nombre de la variable.
- Los objetos son mutables, es decir que los valores cambiaran aun si se asigna a
diferentes variables.
- Debe de cumplir la siguiente sintaxis si el código javascript se encuentra en el mismo
archivo web:
<SCRIPT LANGUAGE="JavaScript">
//Aquí se escribe funciones de javascript
</SCRIPT>
- Si el código JavaScript se encentra ubicado fuera del archivo web, debe de ubicarse
como archivo de extensión “.js”:
<script language="JavaScript" src=”archivo.js”>
</script>
1.1. Archivo Mostrar mensajes de alertas
En el siguiente ejemplo, se mostrara mensajes de alerta una vez se haya pulsado un botón
<HTML>
<HEAD>
function HolaWeb() {
alert("Hola");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
#se hace uso del evento onclick() para enviar una peticion hacia la function ubicada en javascript
<INPUT TYPE="button" NAME="Boton" Value="Pulsar boton" onClick="HolaWeb()">
</FORM>
</BODY>
</HTML>
1.2. Archivo Mensaje de confirmación

En el siguiente ejemplo, luego de presionar un botón, el sistema preguntara si desea continuar,
o si desea cancelar la operación
<HTML>
<HEAD>
if(confirm("Desea visitar la siguiente pagina?")){
document.forms['fr1'].submit();
} else{
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name='fr1' action='demo_javascript2.php' target='_blank'>

</FORM>
</BODY>
</HTML>
1.3. Archivo Ingreso de datos por mensaje

En el siguiente ejemplo, luego de presionar un botón, aparecerá un mensaje de pregunta,
donde deberá de dar una respuesta, y basada en la respuesta ingresada, se emitirá un mensaje
basado en el resultado de la respuesta.
<HTML>
<HEAD>
var text;
var favDrink = prompt("Ingrese nombre de un color", "Rojo");
switch(favDrink) {
case "Azul":
text = "El color azul representa instrucciones no modificables.";
break;
case "Rojo":
text = "El color rojo simboliza error o propiedades de objeto";
break;
case "Verde":
text = "El color verde es usado para comentarios";
break;
default:
text = "Puede simblizar parametros modificables o nombres de propiedades.";
}
document.forms['fr1'].Boton.value = text
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name='fr1'>
</FORM>
</BODY>
</HTML>
2. JavaScript dentro de etiqueta <head>

En esta demostración, parte del codigo de javascript se encuentra ubicado dentro de las
etiquetas <head>
2.1. Javascript en archivos externos

En esta demostración, el codigo de javascript se encuentra ubicado fuera del archivo web
Archivos de Cambiar el valor
En el siguiente ejemplo, se empleara un archivo externo denominado “script.js”, siendo

llamado desde el archivo web “Arreglo.php”, el ejemplo consiste en cambiar de valor la caja de
texto una vez se presione un boton.
Arreglo.php
<html>
<head>
<title>Arreglos en PHP</title>
<script src="/caso4/script.js" language="Javascript"></script>
</head>
<body>
<header>
Trabajando con arreglos en PHP
</header>
<label>Ejemplo de arreglos</label>
<br>
<br>
<input type="text" name="mostrar" id="mostrar" size='80'>
<input type='button' value='Imprimir Arreglo' onclick='imprimirArreglo();'>
<footer>
www.ecodeup.com 2017
</footer>
</body>
</html>
Archivo script.js
function imprimirArreglo(){
var mesesAnio = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Abril', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre',
'Noviembre', 'Diciembre'];
document.getElementById('mostrar').value=mesesAnio.toString();
}
2.2. Javascript en etiqueta <body>

En esta demostración, parte del codigo de javascript se encuentra ubicado dentro de las
etiquetas <body>
*Nota, el valor de la edad será 10, debido a que los objetos x y persona no son copia una de
otra, son el mismo valor.
Archivo mostrar mensaje en un parrafo

<html>
<body>
<p>Creando objetos javascript p>
<p id="demo"></p>
<script>
var persona = {firstName:"Juan", lastName:"Perez", age:50, eyeColor:"azul"};
var x = persona;
x.age = 10;
document.getElementById("demo").innerHTML = persona.firstName + " tiene " + persona.age + " años";
</script>
</body>
</html>
3. Envió de datos a objetos

Existen 2 maneras de emplear propiedades de objetos para enviar datos
- Mediante propiedad id
- Mediante propiedad name
3.1. Mediante propiedad id: Archivo de solicitar continuar con

operación
En este ejemplo mostraremos un mensaje en el que se visualiza el saludo actual
<html>
<body>
<button onclick="myFunction()">Presionar boton para mostrar saludo del dia</button>
<p id="demo"></p>
<script>
function myFunction() {
var hour = new Date().getHours();
var saludos;
if (hour >= 4 && hour < 12) {
saludos = "Buenos dias";
} else if(hour >= 12 && hour < 18) {
saludos = "Buenos Tardes";
} else {
saludos = "Buenas Noches";
}
document.getElementById("demo").innerHTML = saludos + " son las " + hour + " horas.";
}
</script>
</body>
</html>
3.2. Mediante propiedad name: Archivo de Validando un correo

En este ejemplo validamos si un correo a enviar est vacio, o si le faltan los caracteres “@” o “.”
<html>
<body>
<script>
function emailcheck() {
//abrir lectura caracter=/

//cerrar lectura caracter=/
//el arroba = @
//concatenar = \S+
//el punto = \.
var re = /\S+@\S+\.\S+/;
var verifica = re.test(document.forms['correo'].dest_email.value);
if (!(document.forms['correo'].dest_email.value)) {
alert("Correo vacio");
return false;
}
if (verifica == false){
alert("Correo le falta el @ o un punto");
return false;
}
return true;
}
function CheckEmailField() {
if (emailcheck() == false) {
return;
}
document.forms['correo'].submit();
}
</script>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$dest_email = $_REQUEST['dest_email'];
echo "Correo enviado:".$dest_email;
}
?>
<FORM name='correo' method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<p>Ingresar correo: <input type="text" name="dest_email" ></p>
<input type="button" name="Boton" Value="Enviar correo" onClick="CheckEmailField()">
</FORM>
</body>
</html>
4. Elementos Basicos
Dentro de javascript, es recomendable emplear los siguientes símbolos de manera apropiada,
evitando posibles suspensiones o alteraciones en el archivo web:
Nombre de Elemento Símbolo Ejemplo
Comentario // //esto es un comentario
Var1=”Cadena de texto”;
Var2=3434;
Var3=3.90;
Valores simples
Var4=true;
Var5=false;
alert(Var1);
vacaciones = ["Navidad","Verano"];
Valores de arreglo unidimensional
alert(vacaciones[0]);
Nueva línea \n alert(“bienvenido \n Usuario”)
Tabulador \t alert(“Mostrar \t usuario”);
Comilla simple \’ alert("Hola \' como esta \' ");
Comilla doble \” alert("Hola \" Usuario \" de sistema");
Barra invertida \\ alert("\\Barra invertida");
Colocar punto \. Var punto = \.
var1 = "Javascript (\xA9 2002)"
Numero ASCII de carácter hexadecimal \999
alert(var1);
5. Operadores
Permiten la formación de expresiones, una expresión es el resultado de una operación
aritmética o lógica, asi como factor de decisión en operaciones de comparación.
Entre los operadores más conocidos se tienen:
5.1. Concatenación de caracteres:

Se realizar con el símbolo +
var1 = 123;
var2 = 321;
alert("Mi contraseña es:" + var1 + ", o tambien: " + var2);
5.2. Operaciones matemáticas entre caracteres

Se necesita convertir en enteros o decimales para realizar operaciones matemáticas, por
defecto las variables son de tipo carácter-texto.
Se realiza mediante las funciones de transformar caracteres a enteros (parseInt), o transformar

caracteres a decimales (parseFloat).
var var1 = 5;
var var2 = 6.5;
var sumar = parseInt(var1) + parseInt(var2);

alert("la suma de enteros es " + sumar);
sumar = parseFloat(var1) + parseFloat(var2);
alert("la suma de decimales es " + sumar);
6. Operador condicional:
Demuestra que si la condición se cumple, devuelve el primer valor, caso contrario, devolverá el
segundo valor
//símbolo de devolución de primer valor : (?)

//símbolo de devolución de segundo valor: (:)
a = 2 > 3 ? 1 : 2 //condición: 2 >3, si es verdad devolverá 1, caso contrario será 2
alert(a);
7. Referencia al objeto
Dentro de un método un función de javascript, la instrucción this permite hacer referencia al
objeto propietario de la función o método al que se le está invocando, que se encuentra en
Javascript, HTML o en PHP.
Dentro de javascript:
<html>
<body>
<p>En este ejemplo, <b>this</b> representa a la <b>persona</b> objeto.</p>

<p>dentro del metodo fullName.</p>
<p id="demo"></p>
<script>
// Genera un objeto
var person = {
firstName: "Juan",
lastName : "Perez",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Muestra datos de objeto:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
7.1. Dentro de HTML y PHP

Este ejemplo realiza una validación de entrada de solo valores numéricos
<HTML>
<HEAD>
function validate(field) {
rx = /[^0-9.-]/;
if (rx.test(field.value)) {
alert("Este campo acepta solamente numeros.");
} else {
alert("Enviando numero: " + field.value);
submit();
}
}
</SCRIPT>
</HEAD>
<BODY>
<?php
echo "<form action=# method='post' >";
print "Ingresar Numero: <input type=text name=cantidad size=6 maxlength=10 onchange='validate(this);'></td>";
echo "</form>";
?>
</BODY>
</HTML>
7.2. Crear un objeto
Hace uso de la instrucción new para generar un nuevo objeto y ser asignado hacia una
variable, por ejemplo, se genera un objeto de tipo arreglo:
var mesesAnio= new Array();

mesesAnio[0]=’Enero’;
También es útil para crear un nuevo objeto, en el siguiente ejemplo, se empleara javascript
para ingresar a contenido dentro del cuerpo del sitio web
<html>
<body>
<p id="demo"></p>
<script>
var person = new Object();
person.firstName = "Juan";
person.lastName = "Perez";
person.age = 50;
person.eyeColor = "azul";
document.getElementById("demo").innerHTML=person.firstName + " tiene " + person.age + " años.";

</script>
</body>
</html>
7.3. Borrar un objeto

Hace uso de la instrucción delete para eliminar una propiedad de un objeto, en el siguiente
ejemplo, se empleara para eliminar un vector creado.
delete a;
Tambien permite borrar elementos dentro del contenido web, en el siguiente ejemplo se
borrara la edad de una persona, dejando en blanco su espacio
<html>
<body>
<h2>Propiedades de objeto JavaScript</h2>
<p>Borrando propiedades de objeto.</p>

<p id="demo"></p>
<script>
var person = {
firstname:"Juan",
lastname:"Perez",
age:50,
eyecolor:"azul"
};
delete person.age;
document.getElementById("demo").innerHTML = person.firstname + " tiene " + person.age + " años.";
</script>
</body>
</html>
8. Operadores Aritmeticos:
Descripción Símbolo Expresion de Ejemplo Resultado de ejemplo
Multiplicación * 2*4 8
División / 5/2 2.5
Resto de una división entera % 5%2 1
Suma + 2+2 4
Resta - 7-2 5
Incremento ++ ++2 3
Decremento -- --2 1
Menos unitario - -(2+4) -6
9. Operadores Logicos
Descripción Símbolo Expresión de ejemplo Resultado
Negación !! (2 = 2) Falso
Y && (2 = 2) && (2 >= 0) Verdadero
Ó || (2 = 2) || (2 <> 2) Verdadero
10. Operadores De comparación

Descripción Símbolo Expresión de ejemplo Resultado
Igualdad == 2 == '2' Verdadero
Desigualdad != 2 != 2 Falso
Igualdad estricta === 2 === '2' Falso
Desigualdad estricta !== 2 !== 2 Falso
Menor que < 2<2 Falso
Mayor que > 3>2 Verdadero
Menor o igual que <= 2 <= 2 Verdadero
Mayor o igual que >= 1 >= 2 Falso
11. Eventos en javascript

Los eventos en javascript son las acciones predeterminadas que podrían ocurrir al momento
de que un usuario interactua con un objeto de formulario web, y en paralelo el servidor web
responde en forma de “reacción” a movimientos de usuario. Los eventos más empleados son:
- Onchange
- Onclick
- Onmouseover
- Onmouseout
- Onload
- Onkeydown
11.1. Evento onchange
Se emplea para emitir una petición cuando el usuario cambia el contenido o elemento de lista
de un formulario web
 Archivo de Lista desplegable
En el siguiente ejemplo, se emplea una lista desplegable (ComboBox) para mostrar un

resultado en el sitio web (acompañamiento de pizza)
A su vez, se emplea otros elementos de javascript para que sea más dinamico (Cobertura y
precio de pizza)
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<form action="#" method="post" id="pizzaForm" class="demoForm">

<p>Selecciona cobertura de pizza y tamaño</p>
<div class="center"><p>
<select name="tamano_pizza" id="tamano_pizza">
<option value="10">Pequeño: S/.10.00</option>
<option value="16" selected="selected">Mediano: S/.16.00</option>
<option value="24">Largo: S/.24.00</option>
</select>
<select name="toppings[]" id="toppings" multiple="multiple" size="5">

<option value=".40">Hongos</option>
<option value=".30">Extra queso</option>
<option value=".40">Alemana</option>
<option value=".50">Piña</option>
<option value=".50">Pepperoni</option>
</select>
<input type="hidden" name="cobertura_tot" value="0" />
<label>Total: $<input type="text" class="num" name="total" value="8.00" readonly="readonly" /></label>

</p></div>
<p>Selecciona acompañamiento para pizza.</p>
<select id="selecccion_acompa" onchange="funcionacompa()">
<option value="Oregano_en_polvo">oregano en polvo
<option value="Aji_molido">aji molido
<option value="Palillo_de_queso">palillo de queso
<option value="Pan_de_ajo">pan de ajo
</select>
<p id="demo"></p>
</form>
<script>
//FUNCION DE TIPO DE PIZZA Y TAMAÑO
// Funciones asignadas a las propiedades onchange.
document.getElementById('tamano_pizza').onchange = function() {
// acceder a las propiedades de formulario a travez propiedad "this"
var form = this.form;
var total = parseFloat( this.value ) + parseFloat( form.elements['cobertura_tot'].value );
form.elements['total'].value = formatDecimal(total);
};
document.getElementById('toppings').onchange = function() {
var form = this.form;
form.elements['cobertura_tot'].value = 0; // vuelve el precio de cobertura a 0
// funcion getSelectedOptions maneja lista completa

// va a enviar a lista por propiedad (this) y devuelve funcion
getSelectedOptions( this, calcToppingsTotal(this) );
// añadir cobertura total y precio por tamaño para obtener el precio total
var tops_tot = parseFloat( form.elements['cobertura_tot'].value );
var size_price = parseFloat( form.elements['tamano_pizza'].value );
form.elements['total'].value = formatDecimal(tops_tot + size_price );
};
// Por cada seleccion, se solicita agregar valor total a la cobertura

function calcToppingsTotal(opt) {
// get reference to hidden toppings total field
var tot_fld = opt.form.elements['cobertura_tot'];
var val = parseFloat( tot_fld.value );
// añadir valor de opt para el total
tot_fld.value = val + parseFloat( opt.value );
}
// maneja las opciones seleccionadas en select-multiple

function getSelectedOptions(sel, fn) {
var opts = [], opt;
for (var i=0, len=sel.options.length; i<len; i++) {

opt = sel.options[i];
if ( opt.selected ) {
opts.push(opt);
if (fn) {
fn(opt);
}
}
}
return opts;
}
// cambia parametro val para n-numeros decimales

function formatDecimal(val, n) {
n = n || 2; //regresara valor n, caso contrario, si esta vacio, regresara 2
var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) ); //Math.pow : calculo exponencial , Math.round : redonder
decimal a entero
while (str.length <= n) { //length = muestra el numero de caracteres
str = "0" + str;
}
var pt = str.length - n;
return str.slice(0,pt) + "." + str.slice(pt);
}
//FUNCION DE ACOMPAÑAMIENTO DE PIZZA

function funcionacompa() {
var acompa = document.getElementById("selecccion_acompa").value;
document.getElementById("demo").innerHTML = "El acompañamiento a llevar es: " + acompa;
}
</script>
</body>
</html>
11.2. Evento onclick

Se emplea para enviar una petición una vez se haya presionado un objeto de tipo botón,
imagen, etiqueta, etc.
Archivo Contar números de veces pulsadas
En el presente ejemplo, el usuario presionara varias veces un botón, y en el mismo objeto

saldrá el conteo de cada pulsación emitida
También se tiene un botón donde abre una nueva pagina, modificando parte del contenido
Por último, existe un botón donde se va a mandar un documento de impresion

<html>
<head>
<script language=JavaScript>
var numberOfClicks = 0;
function myButton_onclick() {
numberOfClicks++;
window.document.form1.myButton.value = 'Botón pulsado ' + numberOfClicks + ' veces';
}
function ventana_emergente() {
window.document.form1.target='MsgWindow';
window.document.form1.opt.value='pf';
window.open("#", "MsgWindow", "width=200,height=100");
}
function imprimir() {
window.print();
window.close();
}
function getFocus() {
document.getElementById("textfocus").focus();
}
function loseFocus() {
document.getElementById("textfocus").blur();
}
</script>
</head>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['opt'];
if (!empty($name)) {
echo "Usted abrio una ventana emergente";
}
}
?>
<FORM NAME=form1 method="post">

<p>Ejemplo del evento onClick</p>
<INPUT TYPE='button' NAME='myButton' VALUE='Botón pulsado 0 veces' onclick="myButton_onclick()">
<button onclick="ventana_emergente()">Mostrar ventana de windows</button>
<button onclick="imprimir()">Imprimir esta pagina</button>
<br>
<input type="text" id="textfocus" value="A text field">
<button type="button" onclick="getFocus()">Obtener Puntero</button>
<button type="button" onclick="loseFocus()">Perder Puntero</button>
<input type="hidden" name="opt" />

</FORM>
</body>
</html>
11.3. Eventos Onmouseover, Onmouseout y Onload
Para este ejemplo se emplearan en conjunto los eventos Onmouseout y Onload, debido a que
comparten propiedades similares con respecto a la acción que tomaran cuando el mouse este
sobre el objeto
El evento onload se produce cuando el navegador web cargue el documento HTML
Archivo mensajes de carga e imagen de tamaño cambiante
En el siguiente ejemplo se tiene dos formularios:
- Primer formulario: aparecerán mensajes cuando el mouse se posicione o se retire del

botón
- Segundo Formulario: el segundo formulario muestra una imagen que va aumentando
o reduciendo su tamaño a medida de que pasa el mouse
Pero antes, el formulario mostrara mensajes indicando los nombres de los 2 formularios, justo
al momento de cargar la pagina
<html>
<head>
<script type="text/javascript">
//EVENTOS EN formulario 1
function hacer_click()
{
alert("Me haz dado un click");
}
function hacer_hover()
{
alert("Estas sobre mi!");
}
function salir_del_hover()
{
alert("Adios!");
}
function cargar_pagina(){
var numberForms = document.forms.length;
var formIndex;
for (formIndex = 0; formIndex < numberForms; formIndex++) {
alert("Ya se ha cargado el sitio web: " + document.forms[formIndex].name);
}
}
//EVENTOS EN formulario 2
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</head>
<body onload="cargar_pagina()">
<form NAME="form1">
<P>Dentro del Primer formulario</P>
<input type="button" value="dame click!" onmouseout="salir_del_hover()" onmouseover="hacer_hover()"
onclick="hacer_click()"/>
</form>
<form NAME="form2">
<P>Dentro del Segundo formulario</P>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32"
height="32">
</form>
</body>
</html>
11.4. Eventos OnKeydown

Este evento ocurre cuando el usuario esta presionando una tecla del teclado
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>

Programacion Web Con Base de Datos - Semana 3

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Programacion Web Con Base de Datos - Semana 3

Diunggah oleh

Hak Cipta:

Format Tersedia

Validación y verificación de información en Sitios

- Ir a C:\xampp\php, y abrir archivo php.ini

- Modificar por las siguientes líneas:

- El código JavaScript puede ubicarse dentro de las etiquetas “<head>…</head>” de la

1.2. Archivo Mensaje de confirmación

<INPUT TYPE="button" NAME="Boton" Value="Pulsar boton" onClick="HolaWeb()">

1.3. Archivo Ingreso de datos por mensaje

2. JavaScript dentro de etiqueta <head>

2.1. Javascript en archivos externos

Archivos de Cambiar el valor

En el siguiente ejemplo, se empleara un archivo externo denominado “script.js”, siendo

2.2. Javascript en etiqueta <body>

Archivo mostrar mensaje en un parrafo

3. Envió de datos a objetos

3.1. Mediante propiedad id: Archivo de solicitar continuar con

<button onclick="myFunction()">Presionar boton para mostrar saludo del dia</button>

3.2. Mediante propiedad name: Archivo de Validando un correo

//abrir lectura caracter=/

Entre los operadores más conocidos se tienen:

5.1. Concatenación de caracteres:

5.2. Operaciones matemáticas entre caracteres

Se realiza mediante las funciones de transformar caracteres a enteros (parseInt), o transformar

var sumar = parseInt(var1) + parseInt(var2);

//símbolo de devolución de primer valor : (?)

<p>En este ejemplo, <b>this</b> representa a la <b>persona</b> objeto.</p>

7.1. Dentro de HTML y PHP

var mesesAnio= new Array();

document.getElementById("demo").innerHTML=person.firstName + " tiene " + person.age + " años.";

7.3. Borrar un objeto

<p>Borrando propiedades de objeto.</p>

10. Operadores De comparación

11. Eventos en javascript

 Archivo de Lista desplegable

En el siguiente ejemplo, se emplea una lista desplegable (ComboBox) para mostrar un

<form action="#" method="post" id="pizzaForm" class="demoForm">

<select name="toppings[]" id="toppings" multiple="multiple" size="5">

<label>Total: $<input type="text" class="num" name="total" value="8.00" readonly="readonly" /></label>

// funcion getSelectedOptions maneja lista completa

// Por cada seleccion, se solicita agregar valor total a la cobertura

// maneja las opciones seleccionadas en select-multiple

for (var i=0, len=sel.options.length; i<len; i++) {

// cambia parametro val para n-numeros decimales

//FUNCION DE ACOMPAÑAMIENTO DE PIZZA

11.2. Evento onclick

En el presente ejemplo, el usuario presionara varias veces un botón, y en el mismo objeto

Por último, existe un botón donde se va a mandar un documento de impresion

<FORM NAME=form1 method="post">

<input type="hidden" name="opt" />

El evento onload se produce cuando el navegador web cargue el documento HTML

Archivo mensajes de carga e imagen de tamaño cambiante

En el siguiente ejemplo se tiene dos formularios:

- Primer formulario: aparecerán mensajes cuando el mouse se posicione o se retire del

11.4. Eventos OnKeydown

<input type="text" onkeydown="myFunction()">

Anda mungkin juga menyukai