GUÍA Nº 8 - Programación Aplicada

Ingeniería Electrónica Ing. Néstor Raúl Suarez P.

Página 1 de 18

GUIA N° 8 - FUNDAMENTOS DEL DESARROLLO WEB

TEMA: JAVASCRIPT Y HTML5

OBJETIVOS:

✓ Aprender y aplicar correctamente JavaScript en páginas web HTML

✓ Conocer las características fundamentales de HTML5

I. FUNDAMENTOS DE JAVASCRIPT

JavaScript es una de las múltiples alternativas que han surgido para extender las capacidades del
lenguaje HTML. JavaScript no es un lenguaje de programación propiamente dicho como los son C,
C++, java y C#, es un lenguaje script u orientado a documento, similar a los lenguajes de macros
que tienen muchos procesadores de texto y planillas de cálculo. Esto quiere decir básicamente que
No se puede desarrollar un programa con JavaScript que se ejecute fuera de un Navegador Web,
aunque actualmente Javascript se está expandiendo a otras áreas tal como la programación en el
lado servidor con la tecnología Node.js

JavaScript es un lenguaje interpretado que se embebe o inserta en una página web HTML. Un
lenguaje interpretado significa que a las instrucciones las analiza y procesa el navegador en el
momento que deben ser ejecutadas. Javascript es un leguaje de scripting interpretado orientado a
pseudo-objetos, esto es, que no existe herencia, aunque se puede conseguir clonando una clase y
añadiendo más métodos o propiedades. Casi todos los navegadores existentes pueden interpretar
Javascript, ya que es de hecho un estándar: ECMAScript (ECMA = European Computer
Manufacturers Association).

El lenguaje JavaScript por si solo no es suficiente, ya que también se necesita el denominado DOM
(Document Object Model). El DOM es una estructura de objetos que representa absolutamente
todos los elementos que componen una web, y mediante él conseguiremos acceder a información
de la página web, añadir nuevos elementos, o modificarlos. Algunos de los objetos del DOM mas
importantes son: window, document , y element.

JavaScript trabaja en el lado del cliente, el navegador interpreta los comandos de JavaScript que
están embebidos directamente en la página de HTML. Lo anterior significa que un código de
JavaScript puede ser ejecutado directamente en la computadora cliente sin necesidad de
conectarse al servidor web (caso contrario a lo que se hace con tecnologías como ASP.NET, JSP
Y PHP).
II. SINTAXIS DE JAVASCRIPT

Un código en JavaScript debe ir encerrado entre la marca o etiqueta script e inicializada la

propiedad type con la cadena text/javascript asi:
<script type="text/javascript">
--
--
--
</script>

Para imprimir caracteres sobre la página usando javascript se debe llamar al comando 'write' del
objeto document. La información a imprimirse debe ir entre comillas y encerrada entre paréntesis.
Todo lo que indicamos entre comillas aparecerá tal cual dentro de la página HTML. En JavaScript
Cada vez se escribe una instrucción se debe finalizar con el carácter punto y coma.
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 2 de 18

En JavaScript para generar ventanas desplegables similares a los “MessageBox” de Windows se

utiliza las funciones “alert”, “confirm” y “prompt” Es importantísimo tener en cuenta que JavaScript
es sensible a mayúsculas y minúsculas. No es lo mismo escribir: document.write que
DOCUMENT.WRITE (la primera forma es la correcta, la segunda forma provoca un error de
sintaxis).

Muchos confunden el Javascript con el lenguaje Java pero ambos lenguajes son diferentes y tienen
sus características muy particulares. Javascript tiene la ventaja de que al ser incorporado en
cualquier página web, puede ser ejecutado sin la necesidad de instalar ningún otro programa para
ser ejecutado y visualizado.
III. VARIABLES EN JAVASCRIPT

Las variables almacenan y recuperan datos, también conocidos como "valores". Las variables son
referenciadas por su nombre, y el nombre que les es asignado debe ser conforme a ciertas reglas
(debe empezar con una letra o ("_"); los carácteres siguientes pueden ser números (0-9), letras
mayúsculas o letras minúsculas). Las variables en JavaScript pueden ser de alcance global o
local. Una variable global es accesible desde cualquier <script> de la página mientras que una
variable local sólo lo es desde la función en la que fue declarada.

Normalmente, se crea una nueva variable global asignándole simplemente un valor:

globalVariable=5; Sin embargo, si está codificando dentro de una función y se requiere crear
una variable local que sólo tenga alcance dentro de esa función, debe declarar la nueva variable
haciendo uso de var.

Ejemplos de definiciones erróneas:

var Mi Variable, 123Probando, $Variable, for, while;

Ejemplos de definiciones correctas:

var _Una_Variable, P123robando, _123, mi_carrooo;
Por supuesto, podemos inicializar una variable al declararla:
var Una_Variable="Esta Cadenita de texto";
Ejemplo de declaración de variables locales y globales:
function newFunction()
{
var localVariable=1;
globalVariable=0;
}
IV. TIPOS DE DATOS EN JAVASCRIPT

Javascript reconoce seis tipos de valores diferentes: numéricos, lógicos, objetos, cadenas, nulos e
indefinidos. Aunque es un lenguaje débilmente tipado, esto es, una variable puede cambiar de tipo
durante su vida, por ejemplo uno puede declarar una variable que ahora sea un entero y más
adelante una cadena.

MiVariable=4;

y después:

MiVariable="Una_Cadena";
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 3 de 18

En Javascript no es necesario declarar las variables especificando el tipo de dato que contendrán,
será el propio interprete el que le asignará el tipo apropiado. (Esto es así para seguir la filosofía de
diseño de Javascript que indica que se realizan programas pequeños y que la idea es lograr que el
programador realice los scripts de la manera más rápida posible).

Tipos de Datos JavaScript:

Números Enteros o coma flotante.

Boleanos True o False.

Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples o dobles.

Objetos Obj = new Object();

Nulos Null

Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido creada
pero no le ha sido asignado un valor.

Para capturar datos ingresados en cualquier control de la interfaz gráfica construida con HTML
se puede usar los siguientes códigos en lenguaje javascript:

1. document.getElementById("idElement")

2. idForm.idElement.value;

Donde idElement es el id asignado al control gráfico y IdForm es el id de un formulario (form)

en el codigo html

V. EJEMPLOS HTML + JAVASCRIPT

Ejemplo N° 1: En un editor de html cree una nueva página web html guárdela en una carpeta
con el nombre “javascript1.html” y copie el código que se muestra a continuación
<html>
<head>
<title>Ejemplos de Javascript Parte 1</title>
</head>

<body>

<h1> Ejemplos de Javascript </h1>

<noscript>
Atención: Para un mejor funcionamiento favor de activar el javascript en
este navegador.
</noscript>

<script type="text/javascript">
alert('Este Mensaje fue Generado Con Javascript');
</script>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 4 de 18

<script type="text/javascript">
var nombre = "Bogota D.C";
nombre = "Usted se encuentra en " + nombre + " Colombia";
alert(nombre);
</script>

<br>

<script type="text/javascript">
document.write('Mensaje Escrito Con Javascript');
</script>

<script type="text/javascript">
document.write('<h2>Los siguientes Controles fueron generados con
javascript:</h2>');
document.write('<input type="text" name="Textbox1">');
document.write('<input type="button" name="boton1" value="Aceptar">');
document.write('<h2>El siguiente combo de opciones fue generado con
javascript:</h2>');
document.write('<select><option>SI</option><option>NO</option></select>');
</script>

<br>
<br>
<a href="javascript:alert('Gracias')">Click aqui...</a>
<br>

<h2>Botones de Navegación web</h2>

<table border="0" bgcolor="#FFCC66">
<tr>
<td align="center">
<input type="button" value=" Atras "
onclick="javascript:window.history.go(-1);">
<input type="button" value="Arriba" onclick="document.location='#top';">
<input type="button" value=" Siguiente "
onclick="javascript:window.history.go(1);"></td>
</tr>
</table>

</body>
</html>

EJEMPLO N° 2:
Paso1: En un editor de html cree una nueva página web html guárdela en una carpeta con el
nombre “popup.html” y copie el código que se muestra a continuación:
<html>
<head>
<title>Ejemplos de Javascript</title>
</head>

<body>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 5 de 18

<h1> ESTO ES UNA VENTANA DESPLEGLABLE </h1>

<h1> CONOCIDA COMO POP UP!!! </h1>

</body>
</html>

Paso2: En un editor de html cree una nueva página web html guárdela en la misma carpeta
del paso1 con el nombre “javascript2.html” y copie el código que se muestra a continuación
<html>
<head>
<title>Ejemplos de Javascript Parte 2</title>
</head>

<body>

<h1> Ejemplos de Javascript Parte 2</h1>

<noscript>
Atención: Para un mejor funcionamiento favor de activar el javascript en
este navegador.
</noscript>

<script type='text/javascript'>

window.open('popup.html','AVISO','toolbar=0,location=0,status=0,menubar=0
,scrollbars=yes,resizable=yes,width=490,height=232');
</script>

<script type="text/javascript">

var seleccion = confirm("Desea Abrir la pagina de Google?");

if (seleccion)
{
window.open('http://www.google.com', 'google', '');
}
else
{
alert("La sugerencia No fe aceptada");
}

</script>

<script type="text/javascript">

var nombre = prompt('Introduzca su nombre');

var mensaje = "Se usted Bienvenido a mi Pagina " + nombre ;
alert(mensaje);

var apellido = prompt('Introduzca su apellido');

var mensaje2 = "¿Su apellido es " + apellido + "?";
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 6 de 18

if (confirm(mensaje2))
{
var mensaje3= "Señor(a) " + nombre + " " + apellido
document.write('<h1>' + mensaje3 + '</h1>');
document.write('<h2>Muchas Gracias Por Su Valioso Tiempo......Presione
F5 para volver a empezar</h2>');
}
else
{
document.write('<h2>¿No ingreso su apellido correctamente?...Presione
F5 e intente nuevamente...</h2></br>');
}

</script>

</body>
</html>

EJEMPLO N° 3:
En un editor de html cree una nueva página web html guárdela en una carpeta con el nombre
“javascript3.html” y copie el código que se muestra a continuación;
<html>
<head>
<title>Ejemplos de Javascript</title>
</head>

<body>

<h1> Funciones y Estructuras De Programación Javascript </h1>

<noscript>
Atencion: Para un mejor funcionamiento favor de activar el javascript en
su navegador
</noscript>

<script>
function CalcularEdad()
{
var nacimiento= form1.nacimiento.value;
var actual= form1.actual.value;
var edad= actual - nacimiento;

if (edad<18)
{
alert("Usted es menor de edad y tiene : "+ edad + " años");
}
else
{
alert("Usted es mayor de edad y tiene : "+ edad + " años");
}
}
</script>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 7 de 18

<script>

function VerFecha()
{
var fecha = new Date();

var hoy=fecha.getDay();
var dia=fecha.getDate();
var mes= fecha.getMonth() + 1;
var año=fecha.getFullYear();

switch (hoy)
{
case 0:
mensaje="Hoy es Domingo ";
break;
case 1:
mensaje="Hoy es Lunes ";
break;
case 2:
mensaje="Hoy es Martes ";
break;
case 3:
mensaje="Hoy es Miercoles ";
break;
case 4:
mensaje="Hoy es Jueves ";
break;
case 5:
mensaje="Hoy es Viernes ";
break;
case 6:
mensaje="Hoy es sabado ";
break;
default:
mensaje="Se Presento un error intentado leer la fecha ";
}

alert(mensaje + dia + " del mes " + mes + " del año " + año);

</script>

<script>

function GenerarTextBox()
{
var numtext= form1.numtext.value;
document.write('<h1>Controles Generados usando Ciclo for en
javascript</h1>');
document.write('<a href="javascript3.html">Volver</a><br>');
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 8 de 18

for (i=0; i<=numtext; i++)

{

document.write('<h2>Textbox N°:' + i + '</h2>');

document.write('<input type="text" name="Textbox"' + i +'"></br>');

}
}

</script>

<form id="form1" name="form1" method="get">

<h2>Calcule su Edad</h2>
<b>Su Año de nacimiento es: </b>
<input type="text" name="nacimiento" id="nacimiento">

<b>Año Actual: </b>

<input type="text" name="actual" id="actual">

<input type="button" value="Calcular Edad" onclick="CalcularEdad();">

<br>
<br>

<b>Que Dia es Hoy?: </b>

<input type="button" value="Ver" onclick="VerFecha();">

<br>
<br>
<b>Generar Varios Textbox con un solo click</b><br>
<b>Ingrese Cuantos TextBox Desea Generar: </b>
<input type="text" name="numtext" id="numtext">
<input type="button" value="Generar TextBox´s" onclick="GenerarTextBox();">

</form>
</body>
</html>

EJEMPLO N° 4:
Paso1: En un editor de html cree una nueva archivo, guárdelo con el nombre “funciones.js” y
copie el código que se muestra a continuación:

function sumar()
{
var num1= form1.n1.value;
var num2= form1.n2.value;
var resultado= parseInt(num1) + parseInt(num2);

alert("El resultado de la suma es: "+ resultado);

 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 9 de 18

document.write("<h1>" + num1 + "+" + num2 + "=" + resultado +

"</h1>");
document.write("</br>");
document.write("<h2>El resultado de la suma es : "+ resultado +
"</h2>");
document.write("</br>");
document.write('<a href="Matematicas.html">Volver</a><br>');

function Mostrar()
{
alert('Dato Numero1: ' + form1.n1.value);
alert('Dato Numero2: ' + form1.n2.value);
}

Paso2: En un editor de html cree una nueva página web html guárdela con el nombre
“Matematicas.html” en la misma carpeta del archivo del paso1 y copie el código que se
muestra a continuación:

<html>
<head>
<title>Operaciones javascript</title>
<script type="text/javascript" src="funciones.js"></script>
</head>

<body>

<noscript>
Atencion: Para un mejor funcionamiento favor de activar el javascript en
su navegador
</noscript>

<center>
<h1>Operaciones aritméticas básicas en Javascript</h1>

<form id="form1" name="form1" method="get">

<b>Número 1: </b><input type="text" name="n1" id="n1"><br>

<b>Número 2: </b><input type="text" name="n2" id="n2"><br>

<input type="button" name="suma" value="sumar" onClick="sumar()">

<INPUT TYPE="SUBMIT" NAME="btn_enviar" VALUE="sumar2" onClick="sumar()">

</form>

<a href="javascript:Mostrar();">Mostrar datos</a><br>

</center>

</body>
</html>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 10 de 18

VI. VALIDACIÓN DE CAMPOS CON JAVASCRIPT

La validación de campos (Por ejemplo Solo Números, Solo Letras, No Vacío, etc) se deben realizar
tanto del lado del cliente como del lado del servidor. En el lado del servidor se utiliza el lenguaje
asociado a la plataforma de desarrollo (Java, Php, C#, etc) y del lado del cliente es muy común
emplear un lenguaje complementario de tipo script (Normalmente JavaScript).

Las validaciones con JavaScript se aplican generalmente definiendo funciones que permiten por
ejemplo bloquear al usuario los caracteres del teclado que no sean permitidos en un determinado
campo de la interfaz gráfica, o verificar que un campo no este vacío; mostrando como respuesta
mensajes y/o cuadros de dialogo similares a los de un software de escritorio.

A continuación un Ejercicio de Validación De Campos usando javaScript:

1. Paso 1: Archivo JavaScript: Dentro de la carpeta donde estará la página html a validar
(paso2) Cree una nueva carpeta de nombre “Scripts”, y dentro de esta guárde el archivo con
nombre “validaciones.js” y el código que se muestra a continuación

function ValidarCampo(elEvento, permitidos) {

// Variables que definen los caracteres permitidos
var numeros = "0123456789";
var caracteres = " abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
var numeros_caracteres = numeros + caracteres;
var teclas_especiales = [8, 37, 39, 46, 13];
// 8 = BackSpace, 46 = Supr, 37 = flecha izquierda,
// 13=Enter , 39 = flecha derecha
// Seleccionar los caracteres a partir del parámetro de la función

switch(permitidos)
{
case 'SoloNumeros':
permitidos = numeros;
break;
case 'SoloLetras':
permitidos = caracteres;
break;
case 'NumerosyLetras':
permitidos = numeros_caracteres;
break;
}
// Obtener la tecla pulsada
var evento = elEvento || window.event;
var codigoCaracter = evento.charCode || evento.keyCode;
var caracter = String.fromCharCode(codigoCaracter);
// Comprobar si la tecla pulsada es alguna de las teclas especiales
// (teclas de borrado y flechas horizontales)
var tecla_especial = false;
for(var i in teclas_especiales) {
if(codigoCaracter == teclas_especiales[i]) {
tecla_especial = true;
break;
}
}
if (permitidos.indexOf(caracter) == -1) {
if (tecla_especial==false) {
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 11 de 18

alert('Caracter No valido para este campo, Por favor rectifique e

intente nuevamente');
}
}
// Comprobar si la tecla pulsada se encuentra en los caracteres permitidos
// o si es una tecla especial
return permitidos.indexOf(caracter) != -1 || tecla_especial;}

2. Paso 2: Archivo HTML: guárdelo dentro la carpeta principal con el nombre “index.html”

<HTML>

<HEAD>
<TITLE>Validaciones Web</TITLE>
<script type="text/javascript" src="Scripts/validaciones.js"></script>
</HEAD>
<BODY>

<H1>Ejemplo de Validaciones en una interfaz web</H1>

<FORM ACTION="" METHOD="POST" onsubmit="return confirm('Desea continuar, presione

ACEPTAR, si no presione CANCELAR')">

<table width="40%" border="1">

<tr>
<td width="65%">1. En este campo ingrese Solo Numeros: </td>
<td width="35%"><INPUT TYPE="text" NAME="numeros" onkeypress="return
ValidarCampo(event, 'SoloNumeros')"></td>
</tr>
<tr>
<td>2. En este campo ingrese Solo Letras: </td>
<td><INPUT TYPE="text" NAME="letras" onkeypress="return ValidarCampo(event,
'SoloLetras')"></td>
</tr>
<tr>
<td>3. En este campo ingrese numeros o letras: </td>
<td><INPUT TYPE="text" NAME="num_let" onkeypress="return ValidarCampo(event,
'NumerosyLetras')""></td>
</tr>

</table>

<INPUT TYPE="SUBMIT" NAME="btn_enviar" VALUE="Enviar">

</body>
</html>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 12 de 18

LENGUAJE DE MARCAS DE HIPERTEXTO VERSIÓN 5 (HTML5)

HTML5 es la más reciente versión del lenguaje de marcas de hipertexto que establece elementos
y atributos que se ajustan de una manera más fiel al uso actual de los sitios web. Una de sus
principales características es que se han creado elementos que estandarizan la inserción de
contenido multimedia, y evitan que el desarrollador tenga que incluir plugins de terceros para
añadir dicho contenido.

El estándar HTML5 se encuentra en constante revisión, a continuación un listado de las principales

etiquetas que se han agregado y eliminado en las últimas revisiones:
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 13 de 18

VALIDACION DE FORMULARIOS WEB CON HTML5

La validación de formularios del lado del cliente ha sido un problema que generalmente se ha
solucionado con la utilización de Javascript., pero con la llegada de un nuevo conjunto de
especificaciones y tecnologías que componen a HTML5, actualmente se puede realizar tareas de
validación de campos de una manera directa en los controles html

Se debe tener en cuenta que HTML5 no es soportado por las versiones antiguas de los diferentes
navegadores que actualmente utilizan los usuarios, y además los que lo soportan cada uno tienen
su forma particular de interpretar y visualizar en pantalla las etiquetas del html5, sin embargo es
importante conocer las principales características y elementos de HTML5, ya que estos son de una
utilidad muy amplia en el desarrollo WEB.

Algunas etiquetas y/o atributos a tener encuentra para validar campos con html5 son:

1. required: incluir el atributo required dentro de un elemento <input>, automáticamente se

hace obligatorio su llenado y al ser un atributo tipo booleano, solo se requiere su presencia
y nada mas

2. pattern : utilizando el atributo pattern en conjunto, se logra que se verifique no solo la

presencia de un valor, sino que este valor debe contener un formato, una longitud o un tipo
de dato especifico. Esto último se logra definiendo un patrón con expresiones regulares.

3. type="number": Establece y valida a un “input” como un campo de solo números

4. min="valor" max="valor" establece los valores mininos, máximos de un campo numérico

5. maxlength="valor": Establece el número de caracteres máximo que puede recibir un input

6. type="email": Configura y valida a un “input” con un formato correcto de correo

electrónico, de estructura “nombre@ejemplo.com”

7. type="url" : Configura y valida a un “input” con un formato correcto de url, de estructura

"http://www.ejemplo.com/"

EJEMPLO – VALIDACION DE CAMPOS CON HTML5

Paso 1. Cree una hoja de estilos en un archivo de nombre “campoinvalido.css”, colóquela dentro
de una carpeta llamada “css”. Utilice el código que se muestra a continuación:

input:invalid, textarea:invalid
{
background:red;
}
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 14 de 18

Paso2. Cree un archivo en un archivo javascript de nombre “procesarformulario.js”, colóquela

dentro de una carpeta llamada “Scripts”. Utilice el código que se muestra a continuación:

function Validar() {
if (FormOrden.checkValidity()) {
CapturarDatos();
}
}

function CapturarDatos() {
var cantidad = FormOrden.cantidad.value;
var correo = FormOrden.correo.value;
var sitio = FormOrden.sitio.value;
var nombre = FormOrden.nombre.value;
var direccion = FormOrden.direccion.value;
var codigo = FormOrden.codigo.value;
var pais = FormOrden.pais.value;
var telefono = FormOrden.telefono.value;
var tarjeta = FormOrden.tarjeta.value;
var confirmacion = FormOrden.confirmacion.value;
var vencimiento = FormOrden.vencimiento.value;

document.write("<strong>DATOS RECIBIDOS DESDE EL FORMULARIO WEB</strong>

<br/><br/>");
document.write("<strong>DATOS DE LA ORDEN </strong><br/>");
document.write("Cantidad: " + cantidad + "<br/><br/>");
document.write("<strong>DATOS DE CONTACTO</strong><br/>");
document.write("Correo: " + correo + "<br/>");
document.write("Sitio Web: " + sitio + "<br/><br/>");
document.write("<strong>DATOS DE PAGO</strong><br/>");
document.write("Nombre Completo: " + nombre + "<br/>");
document.write("Direcci&oacute;n: " + direccion + "<br/>");
document.write("Codigo Postal: " + codigo + "<br/>");
document.write("Pais: " + pais + "<br/>");
document.write("Telefono: " + telefono + "<br/>");
document.write("Tarjeta De Credito: " + tarjeta + "<br/>");
document.write("Codigo De Confirmaci&oacute;n: "+ confirmación +"<br/>");
document.write("Fecha De Vencimiento: " + vencimiento + "<br/>");
}

Paso3. Cree una página web html en un archivo de nombre “FormularioHTML5.html” al lado de las
capetas Estilos y Scripts creadas en los pasos 1 y 2. Utilice el contenido que se muestra a
continuación:

<html>
<head>
<title>Formulario HTML5</title>
<meta charset="UTF-8">
<script type="text/javascript" src="Scripts/procesarformulario.js"></script>
<link rel="stylesheet" href="Estilos/campoinvalido.css">
</head>
<body>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 15 de 18

<form id="FormOrden" ACTION="" METHOD="GET" onsubmit="event.preventDefault();">

<center>
<h3>Formulario De Compra</h3>

<fieldset style="width:60%;">
<legend>Orden</legend>

<label for="cantidad">Cantidad: </label>

<input type="number" name="cantidad" id="cantidad" placeholder="Solo 2

digitos" required="required" min="1" max="99" maxlength="2"
autofocus="autofocus" />
</fieldset>
<br>

<fieldset style="width:60%;">
<legend>Datos De Contacto</legend>

<table style="width:60%;">
<tr>
<td>

<label for="correo">Correo:</label>
</td>
<td>
<input type="email" name="correo" id="correo"
placeholder="nombre@ejemplo.com" required="required"
maxlength="50" />
</td>
</tr>
<tr>
<td>
<label for="sitio">Sitio Web:</label>
</td>
<td>
<input type="url" name="sitio" id="sitio"
placeholder="http://www.ejemplo.com/" required="required"
maxlength="100" />
</td>
</tr>
</table>
</fieldset>

<br>
<fieldset style="width:60%;">
<legend>Datos De Pago</legend>

<table style="width:60%;">
<tr>
<td>

<label for="nombre">Nombre:</label>
</td>
<td>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 16 de 18

<input type="text" name="nombre" id="nombre"

placeholder="Nombre + Apellido" required="required"
maxlength="50" pattern="[A-Za-z ]+" title="Ingrese solo letras"
/>
</td>
</tr>
<tr>
<td>

<label for="direccion">Direcci&oacute;n:</label>
</td>
<td>
<textarea name="direccion" id="direccion" placeholder="Calle,
Avenida, No." required="required" maxlength="150"
cols="20"></textarea>
</td>
</tr>
<tr>
<td>

<label for="codigo">C&oacute;digo postal:</label>

</td>
<td>
<input type="text" name="codigo" id="codigo" placeholder="Codigo
Postal" required="required" maxlength="10" />
</td>
</tr>
<tr>
<td>

<label for="pais">Pa&iacute;s:</label>
</td>
<td>
<select name="pais" id="pais">
<option>Colombia</option>
<option>Costa Rica</option>
<option>Espa&ntilde;a</option>
<option>Honduras</option>
<option>M&eacute;xico</option>
<option>Venezuela</option>
</select>
</td>
</tr>
<tr>
<td>

<label for="telefono">Tel&eacute;fono(Opcional):</label>
</td>
<td>
<input type="tel" name="telefono" id="telefono"
placeholder="(999) 999-9999" maxlength="15" />
</td>
</tr>
<tr>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 17 de 18

<td>

<label for="tarjeta">N&uacute;mero de Tarjeta:</label>

</td>
<td>
<input type="text" name="tarjeta" id="tarjeta" placeholder="No.
Tarjeta(16 Digitos) dddd-dddd-dddd-dddd" required="required"
maxlength="19" pattern="\d{4}-\d{4}-\d{4}-\d{4}" title="Ingrese
formato valido dddd-dddd-dddd-dddd)" />
</td>
</tr>

<tr>
<td>
<label for="confirmacion">C&oacute;digo de
Confirmaci&oacute;n:</label>
</td>
<td>
<input type="text" name="confirmacion" id="confirmacion"
placeholder="Confirmaci&oacute;n(Maximo 3 Digitos)"
required="required" maxlength="3" pattern="[0-9]+"
title="Ingrese Solo N&uacute;meros" />
</td>
</tr>
<tr>
<td>

<label for="vencimiento">Fecha de Vencimiento:</label>

</td>
<td>
<input type="text" name="vencimiento" id="vencimiento"
placeholder="YYYY-MM" required="required" pattern="\d{4}-\d{2}"
maxlength="7" title="Ingrese a&ntilde;o(YYYY) seguido de mes
(MM)" />
</td>
</tr>
</table>
<br>
</fieldset>
<br>
<input type="submit" name="ordenar" value="Ordenar Ahora" onClick="Validar()"
/>

</center>
</form>
</body>
</html>
 GUÍA Nº 8 - Programación Aplicada
Ingeniería Electrónica Ing. Néstor Raúl Suarez P.
Página 18 de 18

TALLER

1. Diseñar e implementar una página web (html+javascript) que le solicite al

usuario 3 notas (Rango de 0 a 50), luego calcule el promedio y finalmente
muestre un mensaje tipo alert que indique si el estudiante gano o perdió la
asignatura y su correspondiente nota promedio.(Gana si la nota promedio es
mayor o igual a 30)

2. Diseñar e implementar una página web (html+javascript) que le solicite al

usuario una palabra cualquiera y el número de veces que la desea imprimir. Al
dar click en un determinado botón en la página se debe repetir la palabra
ingresada tantas veces como lo indique el usuario.

3. Diseñar e implementar una página web (html+javascript) que al darle click a un

botón muestre un mensaje tipo alert y escriba en la página la fecha actual
usando el formato que se ilustra en el ejemplo a continuación:

“Hoy Es Sabado 1 De Agosto Del Año 2020”

4. Valide los campos del punto 3 de la guía 7 (Encuesta HTML) de acuerdo al

tipo de datos y garantizando que los cuadros de texto NO pueda quedar vacío.

✓ Debe agregar en el fondo de cada cuadro de texto (como marca de

agua) una indicación o descripción de que información se debe llenar en
el campo.

✓ En el botón enviar de la encuesta programar para que salga un cuadro

de mensaje que diga “Sus datos han sido recopilados con éxito” y luego
en una nueva página de respuesta se deben visualizar en formato texto
todos los datos que fueron ingresados en cada uno de los campos de la
encuesta.

✓ Investigar cómo se leen con javascript controles tales como los

“radiobuttons html” y los checkbox html” y aplíquelo.