Practica Operadores matemáticos
Realizar un programa que calcule el precio total de la venta de productos de computo de la
tienda CyberTrom, que el usuario pueda ingresar la descripción del producto, precio de venta,
cantidad, el total que halle desde un botón de comando.
Primeros pasos
1. Realizar el diseño usando el siguiente código
<html>
<title> Ejercicio 7 </title>
<b>Tienda CyberTron </b> <br>
Venta de equipos de Computo en General <br><br>
Producto Precio de venta Cantidad
<input type=button value="Total"> <br>
<input type=text id="txdes1">
<input type=text id="txpre1" value="0">
<input type=text id="txcan1" value="0">
<input type=text id="txtot1" value="0">
</html>
Resultado
Caja de texto Caja de texto Caja de texto Caja de texto
txdes1 txpre1 txcan1 txtot1
Modificando valores
1
La propiedad size cambia el tamaño
de la caja de texto
Propiedad Size
Un entero para ser usado como ancho del elemento, como un número de caracteres
que deberían ser visibles en el control simultáneamente.
Propiedad Maxlength
Un entero que indica el número máximo de caracteres que el valor de este control
puede tener.
Propiedad Name
Un nombre para el control. Este nombre será enviado por el navegador al agente
procesador, emparejado con el contenido del atributo value. Ambos atributos juntos
conformarán un par nombre-valor que será utilizado para procesar la información del
formulario.
Propiedad Value
Un valor inicial para el control, que será establecido cuando la página se cargue y cuando
el botón de reinicio sea presionado.
Propiedad Readonly
Un valor booleano que instruye al navegador a impedir que el usuario cambie el valor
del control. Si este atributo tiene el valor "readonly" o la cadena vacía (""), o si
simplemente está presente, el usuario no tendrá premitido hacer cambios al valor en el
control.
Propiedad Disabled
Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo
toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control
estará deshabilitado.
2
Una vez hecho el diseño aplicaremos java para que pueda calcular el ingreso de datos
en precio de venta y cantidad, para esto modificaremos el código anterior.
COMPLETAR EL SCRIPT
Modificar el programa para poder calcular más productos y hallar el total a pagar
Ejemplo:
Operaciones con Cuadros combinados
Cuadros combinados.
Los cuadros combinados en HTML sirven para mostrar textos cuando el usuario hace clic en la
flecha que se encuentra al costado
3
Modificando el ejemplo 3 haga tres listas sobre:
- Departamentos del Perú
- Provincias
- Distritos
4
CREANDO UN SLIDER
1. Dentro de esta carpeta guardar las imágenes que rotaran dentro de la pagina web.
2. Crear el archivo [Link] guardarlo en la raíz de la carpeta
3. En el fichero slider escribir el siguiente código en la línea 6, se inserta una de las tres
imágenes guardadas en la carpeta imágenes.
5
4. Al ejecutar se mostrara de esta manera la imagen.
5. En la línea 5, ayuda a mostrar la imagen al centro, y el div ayudara como container.
6. Agregar el script dentro de la pagina a partir de la línea 3 hasta línea 19, se creará un arreglo
de variables que almacenará la ruta de las fotos, luego con una función se intercambiará,
luego con evento onload que es de lectura de archivo se crea otra función que intercambiará
mediante un tiempo determinado.
6
Crear tres slider. Dentro de divs separados de distintos tamaños.
PROGRAMA CON JQUERY PARA MOSTRAR Y OCULTAR SUB MENUS
OBJETIVO 2
Desarrollar entornos de registros e inicios de sesión en aplicaciones Web
Maquetando la estructura general HTML5, meta tags y meta viewport
• Implementando el Slider slippry parte
• Crear Barra de Navegación - Estilos
• Editando áreas de trabajo y ejecutando estructuras
Desarrollo de un menú principal (programa [Link])
7
Al hacer clic en Programación Java se mostrará una serie de botones.
Programando el código
En la primera parte vemos un codigo Script para programar el menu
Enseguida el codigo del menu que se mostrara en el cuerpo del documento
8
Crear una carpeta llamada js en la raiz de la carpeta principal
Mover el codigo script a otro documemto nuevo
Guardar el documento en la carpeta creada con el nombre [Link]
9
Modificar el codigo en el encabezado
Este procedimiento es como cuando creamos los archivos css algo similar también es aqui
Volver a ejecutar el programa
Agregar mas códigos para el segundo menu
Tiene que mostrarse así de manera independiente se debe desplegar
10
Crear un estilo para el botón
Crear una carpeta y guardar con la extensión css
.bot
{
background-color:#F7FF3B;
text-decoration:none;
font-family:forte;
border-radius:5px;
padding:2px;
}
Modificando el contenido, llamaremos con la línea 4 al archivo css
Y en la fila nueve aplicaremos el estilo
Ejemplo
11
Aplicar a los demás menú el mismo estylo
Configurando para que el botón Programa 1 ejecute un comando
12
Al hacer clic el primer botón nos mostrará esta ventana
Maquetado crear un nuevo archivo llamado [Link]
Al ejecutar se mostrará de la siguiente manera
13
Configurar para que se vea dentro de la maqueta el programa
Modificar el codigo del menú.html para los archivos se ejecuten en el panel del costado
derecho
Ejecutando ahora si se mostrará los elementos al costado
14
Lograr objetivo 1
(logotipo en el menú, luego 4 botones que muestren ocultos sus opciones, luego que al hacer
clic que se muestre de la siguiente manera)
Objetivo 2
Hacer funcionar al centro una pagina con una indicación sobre los menus.
15