Java script
Aplicación Web usando etiquetas HTML y LP JavaScript
1. Abrir un editor de textos y generar el siguiente archivo, luego guardar en
la unidad de almacenamiento con un nombre, luego la extensión debe
ser html. Ejemplo:
2. Puede usar Notepad++ o visualstudio code, o el [Link]
<html>
mi Primer Programa
</html>
<html>
<title> Programa01 </title>
mi Primer Programa
</html>
Instructor: Miguel Alarcón P. Pág -1-
Java script
El elemento HTML <input> se usa para crear controles interactivos para
formularios basados en la web, que reciban datos del usuario. La forma en
que <input> funciona varía considerablemente dependiendo del valor de su
atributo type.
type
El tipo de control a mostrar. Su valor predeterminado es text, si no se
especifica este atributo. Los posibles valores son:
• button: Botón sin un comportamiento específico.
• checkbox: Casilla de selección. Se debe usar el atributo value para definir
el valor que se enviará por este elemento. Se usa el atributo checked para
indicar si el elemento está seleccionado. También se puede usar el
atributo indeterminate (el cual solo se puede establecer
programaticamente) para indicar que la casilla está en un estado
indeterminado (en la mayoría de las plataformas, se dibuja una línea
horizontal a través de la casilla).
• color: HTML5 Control para espicificar un color. Una interfaz de selección
de color no requiere más funcionalidad que la de aceptar colores simples
como texto (más información).
• date: HTML5 Control para introducir una fecha (año, mes y día, sin
tiempo).
• datetime: HTML5 Control para introducir una fecha y hora (horas,
minutos, segundos y fracción de segundo), basado en la zona horaria
UTC. Esta característica ha sido removida de WHATWG HTML.
• datetime-local: HTML5 Control para introducir fecha y hora, sin zona
horaria específica.
• email: HTML5 Campo para introducir una dirección de correo electrónico.
El valor introducido se valida para que contenga una cadena vacía o una
dirección de correo válida antes de enviarse. Las pseudo-
clases :valid y :invalid son aplicadas segun corresponda.
• file: Control que permite al usuario seleccionar un archivo. Se puede usar
el atributo accept para definir los tipos de archivo que el control podrá
seleccionar.
• hidden: Control que no es mostrado en pantalla, pero cuyo valor es
enviado al servidor.
• image: Botón de envío de formulario con gráfico. Se debe usar el
atributo src para definir el origen de la imagen y el atributo alt para definir
un texto alternativo. Se puede usar los atributos height y width para definir
el tamaño de la imagen en píxeles.
• month: HTML5 Control para introducir un mes y año, sin zona horaria
específica.
Instructor: Miguel Alarcón P. Pág -2-
Java script
• number: HTML5 Control para introducir un número de punto flotante.
• password: Control de línea simple cuyo valor permanece oculto. Se
puede usar el atributo maxlength para especificar la longitud máxima del
valor que se puede introducir.
• radio: Botón radio. Se debe usar el atributo value para definir el valor que
se enviará por este elemento. Se usa el atributo checked para indicar si el
elemento está seleccionado de forma predeterminada. Los botones radio
que tengan el mismo valor para su atributo name están dentro del mismo
"grupo de botones radio". Solo un botón radio dentro de un grupo puede
ser seleccionado a la vez.
• range: HTML5 Control para introducir un número cuyo valor exacto no es
importante. Este control usa los siguientes valores predeterminados si no se
especifica cada atributo:
o min: 0
o max: 100
o value: min + (max - min) / 2, o min si max es menor que min
o step: 1
• reset: Botón que restaura los contenidos de un formulario a sus valores
predeterminados.
• search: HTML5 Cuadro de texto de línea simple para introducir textos de
búsqueda. Los saltos de línea son eliminados automáticamente del valor
introducido.
• submit: Botón que envía el formulario.
• tel: HTML5 Control para introducir un número telefónico. Los saltos de línea
son eliminados automáticamente del valor introducido, pero no hay otra
sintaxis forzada. Se pueden usar atributos como pattern y maxlength para
restringir los valores introducidos en este control. Las pseudo-clases
CSS :valid y :invalid son aplicadas segun corresponda.
• text: Campo de texto de línea simple. Los saltos de línea son eliminados
automáticamente del valor introducido.
• time: HTML5 Control para introducir un valor de tiempo sin zona horaria
específica.
• url: HTML5 Campo para editar una URL. El valor introducido se valida para
que contenga una cadena vacía o una ruta URL absoluta antes de
enviarse. Los saltos de línea y espacios en blanco al principio o al final del
valor son eliminados automáticamente. Se pueden usar atributos
como pattern y maxlength para restringir los valores introducidos en el
control. Las pseudo-clases :valid y :invalid son aplicadas segun
corresponda.
Instructor: Miguel Alarcón P. Pág -3-
Java script
• week: HTML5 Control para introducir una fecha que consiste en número
de semana del año y número de semana sin zona horaria específica.
<html>
<title> Programa02 </title>
Programa 02 <br>
Caja de Texto <input name=t1> <br>
<input type="radio" name="r1" checked> Sumar <br>
<input type="radio" name="r1" > Restar<br>
</html>
<html>
<title> Programa02 </title>
Programa 02 <br>
Caja de Texto <input name=t1> <br>
<input type="radio" name="r1" checked> Sumar <br>
<input type="radio" name="r1" > Restar<br>
<input type="checkbox" name="ch1"> fecha<br>
<input type="checkbox" name="ch2"> Hora<br>
</html>
Instructor: Miguel Alarcón P. Pág -4-
Java script
<html>
<title> Programa02 </title>
Programa 04 <br>
Caja de Texto <input name=t1> <br>
<input type="radio" name="r1" checked> Sumar <br>
<input type="radio" name="r1" > Restar<br>
<input type="checkbox" name="ch1"> fecha<br>
<input type="checkbox" name="ch2"> Hora<br>
<input type="submit" value="Igual">
<input type="button" value="Salir"><br>
</html>
<html>
<title> Programa05 </title>
Programa 02 <br>
Caja de Texto <input name=t1> <br>
<input type="radio" name="r1" checked> Sumar <br>
<input type="radio" name="r1" > Restar<br>
<input type="checkbox" name="ch1"> fecha<br>
<input type="checkbox" name="ch2"> Hora<br>
Instructor: Miguel Alarcón P. Pág -5-
Java script
<input type="submit" value="Igual">
<input type="button" value="Salir"><br>
<input type="time" value="Tiempo"><br>
<input type="[Link]" value="Zona Horaria"><br>
<input type="password" name="pas"> Contraseña<br>
</html>
Que es el Script en HTML
Los scripts son programas, usualmente pequeños o simples, para realizar
generalmente tareas muy específicas.
Pero los scripts que más utilizan (a veces sin saberlo) los usuarios hogareños son
los que se utilizan al navegar por internet, más específicamente, se ejecutan en
los navegadores como Internet Explorer, Google Chrome o Firefox.
<html>
<title>Sumar dos Números JavaScript</title>
Valor 1:<input type="text" id="txtN1"><br>
Valor 2:<input type="text" id="txtN2"><br>
<input type="button" onclick="Sumar();" value="Calcular">
<script>
function Sumar() {
var n1 = [Link]('txtN1').value;
var n2 = [Link]('txtN2').value;
var suma = parseInt(n1) + parseInt(n2);
alert("La suma es = "+suma)
}
</script>
</html>
Instructor: Miguel Alarcón P. Pág -6-
Java script
Conceptos
Si nos damos cuenta el input de tipo button (Nuestro botón), tiene un evento
onclick lo que indica que al pulsar hará el llamado de la funcion Sumar() en la
cual se capturan los datos almacenados en las cajas de texto
mediante [Link]().value; valores que son asignados a
variables, luego como debemos convertir esos valores a número para poder
realizar opecaciones matemáticas, debido a que estos valores son de tipo
cadea o String, esta función la realizamos con al instrucción paseInt(). Por último
solo resta mostrar el mensaje con el resultado obtenido.
Instructor: Miguel Alarcón P. Pág -7-