Fundamentos de JavaScript para Web
Traducido por
ScribdTranslationsFundamentos de JavaScript para Web
Traducido por
ScribdTranslationsColegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
Fundamentos de JavaScript
¿QuéesJavaScript?
JavaScript es un lenguaje de programación de computadoras dinámico. Es ligero y la mayoría
comúnmente utilizado como parte de páginas web, cuyas implementaciones permiten el lado del cliente
script para interactuar con el usuario y crear páginas dinámicas. Es un lenguaje interpretado
lenguaje de programación con capacidades orientadas a objetos.
JavaScript se conocía inicialmente como LiveScript, pero Netscape cambió su nombre a
JavaScript, posiblemente debido a la emoción que está generando Java. JavaScript
hizo su primera aparición en Netscape 2.0 en 1995 con el nombre LiveScript.
el núcleo de propósito general del lenguaje ha sido integrado en Netscape, Internet
Explorador y otros navegadores web.
JavaScript es un lenguaje de programación ligero e interpretado.
Diseñado para crear aplicaciones centradas en la red.
Complementario e integrado con Java.
Complementario e integrado con HTML.
Abierto y multiplataforma
JavaScrp
id
tealdodecleinte
El JavaScript del lado del cliente es la forma más común del lenguaje. El script debería
be included in or referenced by an HTML document for the code to be interpreted by
el navegador.
Significa que una página web no tiene que ser un HTML estático, sino que puede incluir programas que
interact with the user, control the browser, and dynamically create HTML content.
El mecanismo del lado del cliente de JavaScript ofrece muchas ventajas sobre el CGI tradicional.
scripts del lado del servidor. Por ejemplo, podrías usar JavaScript para verificar si el usuario tiene
ingresó una dirección de correo electrónico válida en un campo de formulario.
El código JavaScript se ejecuta cuando el usuario envía el formulario, y sólo si todos los
las entradas son válidas, se enviarían al servidor web.
JavaScript se puede usar para capturar eventos iniciados por el usuario, como clics en botones, enlaces
navegación y otras acciones que el usuario inicia explícita o implícitamente.
1
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
VentajasdeJavaScript
Los méritos de usar JavaScript son −
Menos interacción con el servidor − Puedes validar la entrada del usuario antes de enviar el
página apagada al servidor. Esto ahorra tráfico del servidor, lo que significa menos carga en tu
servidor.
Immediate feedback to the visitors− They don't have to wait for a page
reload to see if they have forgotten to enter something.
Interactividad aumentada− Puedes crear interfaces que reaccionen cuando el usuario
pasa el mouse sobre ellos o los activa a través del teclado.
Richer interfaces− You can use JavaScript to include such items as drag-
y componentes de arrastrar y soltar y controles deslizantes para ofrecer una interfaz rica a los visitantes de su sitio.
LimitacionesdeJavaScript
No podemos tratar JavaScript como un lenguaje de programación completo. Carece de la
siguientes características importantes −
El JavaScript del lado del cliente no permite la lectura o escritura de archivos. Esto ha
ha sido mantenido por razones de seguridad.
JavaScript no se puede utilizar para aplicaciones de red porque no existe tal
soporte disponible.
JavaScript no tiene capacidades de multihilo ni de multiprocesador.
Una vez más, JavaScript es un lenguaje de programación ligero e interpretado que
te permite construir interactividad en páginas HTML de otro modo estáticas.
Sintaxis de JavaScript
JavaScript se puede implementar utilizando declaraciones de JavaScript que se colocan dentro de
las etiquetas<script>... </script>HTML en una página web.
Puedes colocar las <script> etiquetas, que contienen tu JavaScript, en cualquier lugar dentro de ti
página web, pero normalmente se recomienda que debe mantenerlo dentro de
las etiquetas <head>.
La etiqueta <script> alerta al programa del navegador para comenzar a interpretar todo el texto
entre estas etiquetas como un script. Una sintaxis simple de tu JavaScript aparecerá como
sigue.
2
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
<script ...>
Código JavaScript
</script>
La etiqueta script tiene dos atributos importantes −
Lenguaje− Este atributo especifica qué lenguaje de secuencias de comandos estás utilizando.
Típicamente, su valor será javascript. Aunque las versiones recientes de HTML (y
XHTML, su sucesor) han eliminado el uso de este atributo.
Type− This attribute is what is now recommended to indicate the scripting
el lenguaje en uso y su valor deben establecerse en "text/javascript".
Así que tu segmento de JavaScript se verá como −
<script language="javascript" type="text/javascript">
código JavaScript
</script>
TuPrimerScriptJavaScript
Tomemos un ejemplo de muestra para imprimir 'Hola Mundo'.
llamamos a una función [Link] que escribe una cadena en nuestro documento HTML.
his function can be used to write text, HTML, or both. Take a look at the following
código.
<html>
<cuerpo>
<script language="javascript" type="text/javascript">
[Link]("¡Hola Mundo!");
</script>
</body>
</html>
Este código producirá el siguiente resultado −
¡Hola Mundo!
Espacoisenbalncoysatlosden
ílea
JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
Puedes utilizar espacios, tabulaciones y saltos de línea libremente en tu programa y eres libre de
formatea e indenta tus programas de una manera ordenada y consistente que haga que el código
fácil de leer y entender.
3
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
Lospuntosycomasonopcoinaels
Las declaraciones simples en JavaScript generalmente son seguidas por un carácter de punto y coma, simplemente
como lo son en C, C++ y Java. Sin embargo, JavaScript te permite omitir esto
punto y coma si cada una de tus afirmaciones está en una línea separada. Por ejemplo, el
el siguiente código podría escribirse sin punto y coma.
<script language="javascript" type="text/javascript">
var1 = 10
var2 = 20
</script>
Pero cuando se formatea en una sola línea como sigue, debes usar punto y coma −
<script language="javascript" type="text/javascript">
var1 = 10; var2 = 20;
</script>
Nota: Es una buena práctica de programación usar punto y coma.
m
d
yansd
ú
u
icaslyú
u
cslbS
in
es
JavaScript es un lenguaje sensible a mayúsculas y minúsculas. Esto significa que las palabras clave del lenguaje,
las variables, los nombres de funciones y cualquier otro identificador deben estar siempre escritos con un
capitalización consistente de letras.
Así que los identificadores Time y TIME transmitirán significados diferentes en JavaScript.
NOTE− Care should be taken while writing variable and function names in
JavaScript.
ComentariosenJavaScript
JavaScript admite comentarios al estilo C y al estilo C++, por lo tanto −
Cualquier texto entre un // y el final de una línea se trata como un comentario y es
ignorados por JavaScript.
Cualquier texto entre los caracteres /* y */ se trata como un comentario. Esto puede
extender varias líneas.
JavaScript también reconoce la secuencia de apertura de comentario HTML <!--.
JavaScript trata esto como un comentario de una sola línea, al igual que lo hace con el comentario //.
La secuencia de cierre de comentario HTML --> no es reconocida por JavaScript así que
debe escribirse como //-->.
4
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
Ejemplo
El siguiente ejemplo muestra cómo usar comentarios en JavaScript.
<script language="javascript" type="text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* Este es un comentario de varias líneas en JavaScript
Es muy similar a los comentarios en la programación en C
*/
//-->
</script>
JavaScript-UbicaciónenealrchivoHTML
Se da una flexibilidad para incluir código JavaScript en cualquier parte de un HTML
documento. Sin embargo, las formas más preferidas de incluir JavaScript en un archivo HTML
son los siguientes −
Script en la sección <head>...</head>.
Script en la sección <body>...</body>.
Script en las secciones <body>...</body> y <head>...</head>.
Script en un archivo externo y luego incluir en la sección <head>...</head>.
En la siguiente sección, veremos cómo podemos colocar JavaScript en un archivo HTML en
diferentes maneras.
JavaScriptenlasección<head><
. /head>
Si deseas que un script se ejecute en algún evento, como cuando un usuario hace clic
en algún lugar, entonces colocarás ese script en el encabezado de la siguiente manera −
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hola Mundo")
}
</script>
</head>
<cuerpo>
<input type="button" onclick="decirHola()" value="Decir Hola" />
</body>
5
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
</html>
JavaScriptenlasección<body><
. /body>
Si necesitas un script para ejecutar al cargar la página para que el script genere contenido en
la página, luego el script va en la porción <body> del documento. En este caso,
no tendrías ninguna función definida usando JavaScript. Echa un vistazo a la
siguiente código.
<html>
<cabeza>
</head>
<cuerpo>
<script type="text/javascript">
[Link]("Hola Mundo")
</script>
<p>Este es el cuerpo de la página web</p>
</cuerpo>
</html>
JavaScriptenlassecciones<body>y<head>
Puedes poner tu código JavaScript en la sección <head> y <body> todo junto como
sigue -
<html>
<cabeza>
<script type="text/javascript">
function sayHello() {
alert("Hola Mundo")
}
</script>
</cabeza>
<cuerpo>
<script type="text/javascript">
[Link]("Hola Mundo")
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
JavaScriptenarchivoexterno
Aquí hay un ejemplo para mostrar cómo puedes incluir un archivo JavaScript externo en tu
Código HTML que utiliza la etiqueta script y su atributo src.
<html>
<cabeza>
<script type="text/javascript" src="[Link]" ></script>
</head>
<cuerpo>
6
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
</body>
</html>
Para usar JavaScript desde un archivo externo, necesitas escribir todo tu JavaScript
código fuente en un archivo de texto simple con la extensión ".js" y luego incluir ese archivo como
mostrado arriba.
Por ejemplo, puedes mantener el siguiente contenido en el archivo [Link] y luego tú
puedes usar la función sayHello en tu archivo HTML después de incluir el archivo [Link].
función decirHola() {
alert("Hola Mundo")
}
Posibilidades de Visualización en JavaScript
JavaScript puede "mostrar" datos de diferentes maneras:
Escribiendo en un elemento HTML, utilizando innerHTML.
Writing into the HTML output [Link]().
Escribiendo en un cuadro de alerta, utilizando [Link]().
Escribiendo en la consola del navegador, usando [Link]().
Usando innerHTML
Para acceder a un elemento HTML, JavaScript puede usar el método [Link](id).
El atributo id define el elemento HTML. La propiedad innerHTML define el HTML
content:
Ejemplo:
<!DOCTYPE html>
<html>
<cuerpo>
<h1>My First Web Page</h1>
<p>Mi Primer Párrafo</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "bienvenido";
</script>
</body>
</html>
Usando [Link]()
7
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
Ejemplo:
<!DOCTYPE html>
<html>
<cuerpo>
<h1>Mi Primera Página Web</h1>
<p>Mi primer párrafo.</p>
<script>
[Link]("bienvenido a javascript");
</script>
</body>
</html>
Nota: Usar [Link]() después de que un documento HTML esté completamente cargado, eliminará todo
HTML existente
Usando [Link]()
Puedes usar un cuadro de alerta para mostrar datos:
<!DOCTYPE html>
<html>
<body>
<h1>Mi Primera Página Web</h1>
<p>Mi primer párrafo.</p>
<script>
[Link]("bienvenido");
</script>
</cuerpo>
</html>
Usando [Link]()
Para fines de depuración, puedes usar el método [Link]() para mostrar datos.
<!DOCTYPE html>
<html>
<cuerpo>
<script>
[Link]("bienvenido");
</script>
</cuerpo>
</html>
VariablesdeJavaScript
8
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
Al igual que muchos otros lenguajes de programación, JavaScript tiene variables. Las variables pueden ser
se consideran como contenedores nombrados. Puedes colocar datos en estos contenedores y luego
refiérase a los datos simplemente nombrando el contenedor.
Antes de usar una variable en un programa de JavaScript, debes declararla. Las variables son
declarado con la palabra clave del siguiente modo.
<script type="text/javascript">
var dinero;
var nombre;
</script>
También puedes declarar múltiples variables con la misma palabra clave var de la siguiente manera −
<script type="text/javascript">
var money, name;
</script>
Almacenar un valor en una variable se llama inicialización de variable. Puedes hacer variable
inicialización en el momento de la creación de la variable o en un punto posterior cuando la necesites
esa variable.
Por ejemplo, podrías crear una variable llamada dinero y asignarle el valor
2000.50 para más tarde. Para otra variable, puedes asignar un valor en el momento de
inicialización de la siguiente manera.
<script type="text/javascript">
var name = "Ali";
var dinero;
money = 2000.50;
</script>
Nota: Usa la palabra clave var solo para la declaración o inicialización, una vez por la vida de
cualquier nombre de variable en un documento. No debes volver a declarar la misma variable dos veces.
JavaScript es un lenguaje sin tipos. Esto significa que una variable de JavaScript puede contener un
valor de cualquier tipo de datos. A diferencia de muchos otros lenguajes, no tienes que decir
JavaScript durante la declaración de variables qué tipo de valor contendrá la variable. El
el tipo de valor de una variable puede cambiar durante la ejecución de un programa y
JavaScript se encarga de ello automáticamente.
AclancedeVaraibelsenJavaScrp
it
9
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
El alcance de una variable es la región de tu programa en la que está definida.
Las variables de JavaScript tienen solo dos ámbitos.
Variables globales− Una variable global tiene alcance global lo que significa que se puede definir
cualquier lugar en tu código JavaScript.
Variables locales− Una variable local solo será visible dentro de una función donde se define.
Los parámetros de la función son siempre locales a esa función.
Dentro del cuerpo de una función, una variable local tiene prioridad sobre una global.
variable con el mismo nombre. Si declaras una variable local o un parámetro de función
con el mismo nombre que una variable global, efectivamente ocultas la variable global.
Echa un vistazo al siguiente ejemplo.
<html>
<body onload = checkscope();>
<script type = "text/javascript">
var miVar = "global"; // Declara una variable global
function comprobarÁmbito( ) {
var myVar = "local"; // Declarar una variable local
[Link](myVar);
}
</script>
</body>
</html>
NombresdeVaraibelsdeJavaScrp
it
Al nombrar tus variables en JavaScript, ten en cuenta las siguientes reglas.
No debes usar ninguna de las palabras clave reservadas de JavaScript como variable
nombre. Estas palabras clave se mencionan en la siguiente sección. Para
ejemplo, los nombres de variables break, or y boolean no son válidos.
Los nombres de las variables de JavaScript no deben comenzar con un numeral (0-9). Deben
comenzar con una letra o un carácter de subrayado. Por ejemplo, 123test es un
el nombre de la variable es inválido pero_123test es uno válido.
JavaScript variable los nombres son sensible a mayúsculas y minúsculas. Por ejemplo,
Nameandname son dos variables diferentes.
10
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
JavaScript–Objetos
JavaScript is an Object Oriented Programming (OOP) language. A programming
un lenguaje se puede llamar orientado a objetos si proporciona cuatro capacidades básicas para
desarrolladores
Encapsulación: la capacidad de almacenar información relacionada, ya sea datos o métodos,
juntos en un objeto.
Agregación: la capacidad de almacenar un objeto dentro de otro objeto.
Herencia: la capacidad de una clase para depender de otra clase (o varias clases)
por algunas de sus propiedades y métodos.
Polimorfismo: la capacidad de escribir una función o método que funcione en una variedad de
diferentes maneras.
Los objetos se componen de atributos. Si un atributo contiene una función, es
se considera un método del objeto, de lo contrario, el atributo se considera un
propiedad.
Propeidadesdeolbjeto
Las propiedades de los objetos pueden ser cualquiera de los tres tipos de datos primitivos, o cualquiera de los abstractos.
tipos de datos, como otro objeto. Las propiedades del objeto son generalmente variables que son
utilizado internamente en los métodos del objeto, pero también pueden ser variables visibles globalmente que
se utilizan en toda la página.
La sintaxis para agregar una propiedad a un objeto es −
[Link]=propertyValue;
Por ejemplo − El siguiente código obtiene el título del documento utilizando
la propiedad "title" del objeto documento.
varstr=[Link];
Métodosdeobjeto
Methods are the functions that let the object do something or let something be done
Hay una pequeña diferencia entre una función y un método: una función es una
unidad independiente de declaraciones y un método está adjunto a un objeto y puede ser
referenciado por la palabra clave 'this'.
Los métodos son útiles para todo, desde mostrar el contenido del objeto hasta el
pantalla para realizar operaciones matemáticas complejas en un grupo de propiedades locales
y parámetros.
11
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
Por ejemplo, el siguiente es un ejemplo simple para mostrar cómo usar
el método write() del objeto documento para escribir cualquier contenido en el documento.
[Link]("Este es un prueba");
ObejotD
senifdiop
soU
relsuaroi
Todos los objetos definidos por el usuario y los objetos incorporados son descendientes de un objeto
objetoLlamado.
El nuevo operador
El operador new se utiliza para crear una instancia de un objeto. Para crear un objeto,
thenewoperator es seguido por el método constructor.
En el siguiente ejemplo, los métodos constructores son Object(), Array() y Date().
These constructors are built-in JavaScript functions.
var empleado = new Object();
var books = new Array("C++", "Perl", "Java");
var dia = new Date("15 de agosto de 1947");
El Constructor Object()
Un constructor es una función que crea e inicializa un objeto. JavaScript proporciona
una función constructora especial llamada Object() para construir el objeto. El valor de retorno de
elConstructor() se asigna a una variable.
La variable contiene una referencia al nuevo objeto. Las propiedades asignadas a la
los objetos no son variables y no se definen con la palabra clave var.
Ejemplo 1
Prueba el siguiente ejemplo; demuestra cómo crear un Objeto.
<html>
<cabeza>
<title>User-defined objects</title>
<script type="text/javascript">
var libro = new Object(); // Crear el objeto
[Link] = "Perl"; // Assign properties to the object
[Link] = "Mohtashim";
</script>
</head>
<cuerpo>
<script type="text/javascript">
[Link]("El nombre del libro es : " + [Link] + "<br>");
[Link]("Book author is : " + [Link] + "<br>");
12
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
</script>
</body>
</html>
Resultado
Book name is : Perl
El autor del libro es: Mohtashim
Ejemplo 2
Este ejemplo demuestra cómo crear un objeto con una Función Definida por el Usuario.
Aquí, esta palabra clave se utiliza para referirse al objeto que ha sido pasado a una función.
<html>
<cabeza>
<title>User-defined objects</title>
<script type="text/javascript">
función libro(título, autor){
[Link] = title;
[Link] = autor;
}
</script>
</cabeza>
<cuerpo>
<script type="text/javascript">
var miLibro = new libro("Perl", "Mohtashim");
[Link]("El título del libro es : " + [Link] + "<br>");
[Link]("El autor del libro es : " + [Link] + "<br>");
</script>
</cuerpo>
</html>
Salida
Book title is : Perl
El autor del libro es: Mohtashim
Definiendométodosparaunobjeto
13
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
The previous examples demonstrate how the constructor creates the object and
asigna propiedades. Pero necesitamos completar la definición de un objeto asignando
métodos para ello.
Ejemplo
Prueba el siguiente ejemplo; muestra cómo agregar una función junto con un objeto.
<html>
<cabeza>
<title>User-defined objects</title>
<script type="text/javascript">
// Define una función que funcionará como un método
función agregarPrecio(cantidad){
[Link] = amount;
}
función libro(título, autor){
[Link] = title;
[Link] = autor;
[Link] = addPrice; // Assign that method as property.
}
</script>
</cabeza>
<cuerpo>
<script type="text/javascript">
var miLibro = new libro("Perl", "Mohtashim");
[Link](100);
[Link]("El título del libro es : " + [Link] + "<br>");
[Link](
[Link]("El precio del libro es : " + [Link] + "<br>");
</script>
</body>
</html>
Salida
Book title is : Perl
Book author is : Mohtashim
El precio del libro es: 100
Lapalabraclave'with'
14
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
La palabra clave 'with' se utiliza como una especie de abreviatura para referirse a un objeto.
propiedades o métodos.
El objeto especificado como argumento a with se convierte en el objeto predeterminado para el
la duración del bloque que sigue. Las propiedades y métodos para el objeto pueden ser
usado sin nombrar el objeto.
Sintaxis
La sintaxis para con objeto es la siguiente −
con(objeto){
propiedades utilizadas sin el nombre del objeto y el punto
Ejemplo
Prueba el siguiente ejemplo.
<html>
<cabeza>
<title>User-defined objects</title>
<script type="text/javascript">
// Define una función que funcionará como un método
function addPrice(amount){
con esto{
price = amount;
}
}
función libro(título, autor){
[Link] = title;
[Link] = autor;
[Link] = 0;
[Link] = addPrice; // Assign that method as property.
}
</script>
</head>
<cuerpo>
<script type="text/javascript">
var miLibro = new libro("Perl", "Mohtashim");
[Link](100);
[Link]("El título del libro es : " + [Link] + "<br>");
[Link]("El autor del libro es : " + [Link] + "<br>");
15
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
[Link]("El precio del libro es : " + [Link] + "<br>");
</script>
</cuerpo>
</html>
Salida
Book title is : Perl
El autor del libro es: Mohtashim
El precio del libro es: 100
Validación de formularios en JavaScript
Validación de formularios en JavaScript para campos vacíos
<html>
<head>
<script>
función validarFormulario()
{
var un = [Link];
var pass = [Link];
var gen = [Link];
var edad = [Link];
var mail = [Link];
var cntry = [Link];
var lan = [Link];
si(un=="" || un=="null")
{
alert("por favor ingresa tu nombre");
[Link]();
devuelve falso;
}
si(pass=="" || pass=="null")
{
alerta("por favor ingresa tu contraseña");
[Link]();
retornar falso;
}
si(gen=="" || gen=="nulo")
{
alerta("Por favor selecciona el género");
[Link][0].focus();
return false;
}
if(age=="" || age=="null")
{
alerta("por favor ingresa tu edad");
[Link]();
devolver falso;
16
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
si(mail=="" || mail=="null")
{
alert("por favor ingresa tu correo electrónico");
[Link]();
return false;
}
si(cntry == "Predeterminado")
{
alerta("por favor selecciona tu país")
[Link]();
return false;
}
para (var i=0; i<[Link]; i++)
{
si(lan[i].verificado)
romper;
}
si(i==[Link])
{
alerta("Por favor, elige tus idiomas");
[Link][0].focus();
return false;
}
alert("Registration successfull");
devuelve verdadero;
}
</script>
</cabeza>
<cuerpo>
<form name="registro" onsubmit="return validarFormulario();">
Enter your name: <input type="text" name="uname"><br>
Introduce tu contraseña: <input type="password" name="pwd"><br>
Elige tu género: <input type="radio" name="gender" value="Male">Masculino
<input type="radio" name="gender" value="Mujer">Mujer<br>
Ingresa tu Edad: <input type="number" name="age"><br>
Introduce tu correo electrónico: <input type="text" name="email"><br>
Elige tu país:
<select name="país">
<option value="Default">(Please select a country)</option>
<option value="aus">Australia</option>
<option value="can">Canada</option>
<option value="ind">India</option>
<option value="rus">Russia</option>
<option value="usa">USA</option>
</select><br>
Languages Known:
<input type="checkbox" name="lang" value="Telugu"/>
English: <input type="checkbox" name="lang" value="English"/>
Hindi: <input type="checkbox" name="lang" value="Hindi"/><br>
<input type="submit"><input type="reset">
</form>
</body>
</html>
Validación de formularios en JavaScript
a) User Name: Por favor, ingrese solo letras
b) Age : por favor ingrese solo números
17
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
c) Contraseña:at least one lowercase, uppercase & special character.
<html>
<cabeza>
<script>
function validateForm()
{
var un = [Link];
var edad = [Link];
var pass = [Link];
var letras = /^[a-zA-Z\s]+$/;
var numeros = /^[0-9]+$/;
var checkSpecial = /[*@!#%&]+/.test(pass);
var checkUpper = /[A-Z]+/.test(pass);
var checkLower = /[a-z]+/.test(pass);
var bandera = 0;
si(un=="" || un=="null")
{
alert("por favor ingresa tu nombre");
[Link]();
return false;
}
if()
{
alerta("por favor ingrese solo alfabetos")
[Link]();
return false;
}
si(edad=="" || edad=="nulo")
{
alert("por favor ingresa tu edad");
[Link]();
return false;
}
if()
{
alerta("por favor ingresa solo números")
[Link]();
return false;
}
si(pass=="" || pass=="nul")
{
alerta("por favor ingresa tu contraseña");
[Link]();
return false;
}
si(checkSpecial && checkLower && checkUpper)
{
bandera = 1;
}
si(flag == 0)
{
alert("La contraseña debe ser la combinación de al menos una letra minúscula, una mayúscula")
letra y símbolos especiales como ($, & #)
[Link]();
18
Colegio de Ingeniería Lakireddy Bali Reddy (Autónomo)
return false;
}
alert("Registro exitoso");
return true;
}
</script>
</cabeza>
<cuerpo>
<form name="registro" onsubmit="return validarFormulario();">
Enter your name: <input type="text" name="uname"> Please enter alphabets only<br>
Ingresa tu edad: <input type="text" name="age"> por favor ingresa solo números<br>
Introduce tu contraseña: <input type="text" name="pwd">al menos una minúscula, mayúscula y
carácter especial<br>
<input type="submit"><input type="reset">
</form>
</body>
</html>
JavaScript Email validation:
<html>
<head>
<script>
función validarFormulario()
{
var mail = [Link];
si(mail=="" || mail=="null")
{
alerta("por favor ingresa tu correo electrónico");
[Link]();
return false;
}
var atpos = [Link]("@");
var dotpos = [Link](".");
si (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= [Link])
{
alert("No es una dirección de correo electrónico válida");
return false;
}
alert("Registration successfull");
return true;
}
</script>
</head>
<cuerpo>
<form name="registro" onsubmit="return validarFormulario();">
Enter your email: <input type="text" name="email"><br>
<input type="submit"><input type="reset">
</form>
</body>
</html>
19