0% encontró este documento útil (0 votos)

0 vistas77 páginas

3 - Javascript

Cargado por

edievale

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

0 vistas77 páginas

3 - Javascript

Cargado por

edievale

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

JAVASCRIPT

JavaScript Introducción
JavaScript es el lenguaje de programación más popular del mundo. Es el lenguaje estándar que
se utiliza en las páginas web, pero también es ampliamente utilizado por las aplicaciones de
escritorio, aplicaciones de teléfonos móviles y servidores de Internet.

Lo que usted debe saber ya

Antes de continuar, debe tener un conocimiento básico de los siguientes:

• HTML y CSS

Si quieres estudiar estos temas en primer lugar, encontrar los tutoriales en nuestro página de Inicio.

¿Qué es JavaScript?

• JavaScript es un lenguaje de scripting

• JavaScript fue diseñado para añadir interactividad a las páginas HTML

¿Qué es un lenguaje de secuencias de comandos?

Un lenguaje de programación es un lenguaje de programación ligero que permite la escritura de guiones.

Los scripts son líneas de código que pueden ser interpretadas y ejecutadas "en la marcha", sin compilación
explícita y pasos de enlace.

¿Qué se puede hacer con JavaScript?

JavaScript ofrece a los diseñadores una herramienta de programación HTML

editores HTML normalmente no son programadores, pero JavaScript es un lenguaje con una sintaxis muy
simple. Casi cualquier persona puede poner pequeños "fragmentos" de código JavaScript en las páginas HTML.

JavaScript puede manipular HTML

JavaScript puede leer y modificar el contenido de los elementos HTML.

JavaScript puede manipular CSS

JavaScript puede leer y cambiar el estilo de los elementos HTML.

JavaScript puede validar los datos de

JavaScript se puede utilizar para validar los datos, como la validación de los datos de formularios.

JavaScript puede almacenar los datos de

JavaScript se puede utilizar para almacenar y recuperar información en la computadora del visitante.

JavaScript puede reaccionar a los eventos

JavaScript se pueden configurar para ejecutarse cuando algo sucede, como cuando un usuario hace clic en un
elemento HTML.
1
Página
JavaScript y Java

JavaScript y Java son dos lenguajes completamente diferentes, tanto en concepto y diseño.

Java (desarrollado por Sun Microsystems) es un lenguaje de programación complejo en la misma categoría que C
y C + +.

= JavaScript ECMAScript

ECMA-262 es el estándar oficial JavaScript.

JavaScript fue inventado por Brendan Eich en Netscape, y apareció por primera vez en Netscape Navigator (un
navegador web que ya no existe) en 1995. Primero fue llamado Mocha, luego LiveScript y JavaScript finalmente.

El estándar de JavaScript fue adoptado por la industria estándar ECMA asociación en 1997.

El estándar (llamado ECMAScript-262) fue aprobado como un estándar internacional ISO 1998.

El desarrollo de ECMAScript todavía está en proceso.

2
Página
JavaScript Cómo

Un JavaScript está rodeado por un <script> y </ script> etiqueta.

JavaScript se utiliza normalmente para manipular elementos HTML.

La etiqueta <script>

Para insertar un código JavaScript en una página HTML, utilice la etiqueta <script>.

El <script> y </ script> indica que el JavaScript se inicia y termina.

Las líneas entre la <script> y </ script> contiene el código JavaScript:

Usted no tiene que entender el código de seguridad. Sólo tienes que dar por un hecho, que el navegador
interpreta y ejecuta el código JavaScript entre el <script> y </ script> etiquetas.

Algunos ejemplos tienen type = "text / javascript" en la etiqueta <script>. Esto no es necesario
en HTML5. JavaScript es el lenguaje de scripts por defecto en todos los navegadores modernos
y en HTML5.

La manipulación de elementos HTML

Para acceder a un elemento HTML de un JavaScript, utiliza el [Link] ( id ) método, y un

atributo "id" para identificar el elemento HTML:

Ejemplo

Acceder al elemento HTML con el id especificado y cambiar su contenido:

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>

El JavaScript es ejecutado por el navegador web. En este caso, el navegador accederá al elemento HTML con id
Página

= "demo", y reemplazar su contenido (innerHTML) con "My First JavaScript".

Escribiendo directamente en la salida de documentos

El siguiente ejemplo escribe un elemento <p> directamente en la salida de documentos HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

Advertencia

Utilice [Link] () sólo para escribir directamente en la salida de documentos.

Si ejecuta [Link] después de que el documento haya terminado de cargar, la página HTML entera se
sobrescribirá:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">Try it</button>

Si pulsamos el Botón, nos aparece el siguiente mensaje:

4
Página
JavaScript Destino
Un JavaScript puede poner en el <body> y en la sección head de una página HTML.

JavaScript en <body>

El siguiente ejemplo manipular el contenido de un elemento <p> existente cuando se carga la página:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>

El JavaScript se coloca en la parte inferior de la página para asegurarse de que se ejecuta

después de que el elemento <p> se crea.

Funciones de JavaScript y Eventos

La declaración de JavaScript en el ejemplo anterior, se ejecuta cuando se carga la página, pero eso no siempre
es lo que queremos.

A veces queremos ejecutar un código JavaScript cuando un evento ocurre, por ejemplo, cuando un usuario hace
clic en un botón. Entonces podemos escribir la secuencia de comandos en el interior de una función , y llamar a
la función cuando ocurra el evento.

Usted aprenderá más acerca de las funciones de JavaScript y eventos en capítulos posteriores.
5
Página
Una función de JavaScript en <head>

El ejemplo siguiente llama a una función en la sección head cuando se hace clic en un botón:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
[Link]("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Una función de JavaScript en <body>

Este ejemplo también se llama a una función cuando se pulsa un botón, pero la función se encuentra en el
<body>:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

Usted puede poner un número ilimitado de secuencias de comandos en el documento, y usted puede tener
secuencias de comandos en tanto el <body> y la sección head al mismo tiempo.

Es una práctica común poner funciones en la sección <head>, o en la parte inferior de la página. Así que están
todos en un solo lugar y no interfieren con el contenido de la página.

El uso de un JavaScript externo

Los scripts también se puede colocar en archivos externos. Los archivos externos a menudo contienen código
para ser utilizado por varias páginas web diferentes.

Archivos JavaScript externos tienen la extensión de archivo. Js.

Para utilizar un script externo momento, el archivo js en el atributo "src" de la etiqueta <script>.:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script src="[Link]"></script>
</body>
</html>

Usted puede poner el script en el head o <body> como quieras. El script se comportará como se encuentra
exactamente donde se coloca la etiqueta <script> en el documento.

Scripts externos no pueden contener etiquetas <script>.

7
Página
JavaScript declaraciones

JavaScript es una secuencia de instrucciones a ser ejecutadas por el navegador.

Declaraciones de JavaScript

Sentencias de JavaScript son los "comandos" en el navegador. El propósito de las declaraciones es decirle al
navegador qué hacer.

Esta afirmación JavaScript indica al navegador que escriba "Hello Dolly" dentro de un elemento HTML con id =
"demo":

[Link]("demo").innerHTML="Hello Dolly";

Punto y coma;

Punto y coma separa sentencias JavaScript.

Normalmente se agrega un punto y coma al final de cada instrucción ejecutable.

Con punto y coma también permite escribir muchas declaraciones en una línea.

Finalización de las declaraciones con punto y coma es opcional en JavaScript. Es posible que vea
ejemplos sin punto y coma.

JavaScript Code

El código JavaScript (o simplemente JavaScript) es una secuencia de sentencias JavaScript.

Cada instrucción es ejecutado por el navegador en el orden en que están escritas.

En este ejemplo se va a manipular dos elementos HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<p id="myDIV">A DIV.</p>

Sentencias de JavaScript pueden agruparse en bloques.

Bloques de comenzar con un corchete izquierdo, y terminar con un derecho llave.

El propósito de un bloque es hacer que la secuencia de instrucciones se ejecutan juntos.

Un buen ejemplo de los estados agrupados en bloques, son de JavaScript funciona .

En este ejemplo se va a ejecutar una función que manipular dos elementos HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<p id="myDIV">A DIV.</p>

<button type="button" onclick="myFunction()">Try it</button>

Usted aprenderá más acerca de las funciones en los capítulos posteriores.

JavaScript es sensible a mayúsculas

JavaScript distingue entre mayúsculas y minúsculas.

Cuidado con la capitalización de cerca al escribir sentencias de JavaScript:

getElementById no es el mismo que getElementById.

9
Página
JavaScript Comentarios
Comentarios de JavaScript se puede utilizar para hacer el código más legible.

Comentarios de JavaScript

Comentarios no será ejecutado por JavaScript. Se pueden añadir comentarios a explicar el código JavaScript, o
para hacer el código más legible. Comentarios de una sola línea de salida con / /.

El ejemplo siguiente utiliza los comentarios de una sola línea para explicar el código:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 id="myH1"></h1>
<p id="myP"></p>

<p><strong>Note:</strong> The comments are not executed.</p>

</body>
</html>

Javascript comentarios de varias líneas

Comentarios de varias líneas comienzan con / * y terminan con * /. En el ejemplo siguiente, se utiliza un
comentario de múltiples líneas para explicar el código:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 id="myH1"></h1>
<p id="myP"></p>

<p><strong>Note:</strong> The comment-block is not executed.</p>

</body>
Página

</html>
Uso de comentarios para evitar la ejecución

En el siguiente ejemplo el comentario se utiliza para impedir la ejecución de una de las codelines (puede ser
adecuado para la depuración):

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 id="myH1"></h1>
<p id="myP"></p>

<p><strong>Note:</strong> The comment is not executed.</p>

</body>
</html>

En el siguiente ejemplo el comentario se utiliza para prevenir la ejecución de un bloque de código (puede ser
adecuado para la depuración):

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 id="myH1"></h1>
<p id="myP"></p>

<p><strong>Note:</strong> The comment-block is not executed.</p>

</body>
</html>
11
Página
Uso de comentarios al final de una línea

En el siguiente ejemplo el comentario se coloca al final de una línea de código:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p id="myP"></p>

<p><strong>Note:</strong> The comments are not executed.</p>

</body>
</html>

12
Página
JavaScript Variables
Las variables son "contenedores" para almacenar información:

Tipos de datos de JavaScript

<!DOCTYPE html>
<html>
<body>
<script>
var answer1="He is called 'Johnny'";
var answer2='He is called "Johnny"';
var pi=3.14;
var x=123;
var y=123e5;
var z=123e-5;
var cars=["Saab","Volvo","BMW"];
var person={firstname:"John", lastname:"Doe", id:5566};
var carname

[Link](answer1 + "<br>")
[Link](answer2 + "<br>")
[Link](pi + "<br>")
[Link](x + "<br>")
[Link](y + "<br>")
[Link](z + "<br>")
[Link](cars[2] + "<br>")
[Link]([Link] + " " + person["lastname"] + "<br>")
[Link](carname + "<br>")
</script>
</body>
</html>

Como Algebra Escuela

Recuerde álgebra de la escuela?

x=5
y=6
z=x+y

¿Te acuerdas de que las letras (como x) se puede utilizar para mantener un valor (como 5), y que se puede
utilizar la información anterior para calcular el valor de z para ser 11?

Estas letras se llaman las variables , y las variables se pueden utilizar para contener valores (x = 5) o
expresiones (z = x + y).
13

Piense en variables como nombres o etiquetas dadas a los valores.

Página
Variables de JavaScript

Al igual que con el álgebra, las variables de JavaScript se utiliza para mantener los valores o expresiones.
Variable puede tener un nombre corto, como x e y, o los nombres más descriptivos, como la edad, la suma o,
totalvolume.

Estas son las reglas para los nombres de variables de JavaScript:

• Los nombres de variables distinguen entre mayúsculas y minúsculas (y, y Y son dos variables diferentes)
• Los nombres de variables deben comenzar con una letra, la carpeta $, o el carácter de subrayado

Ambas sentencias de JavaScript y las variables de JavaScript se distingue entre mayúsculas y

minúsculas.

Declarando (Creación) Variables de JavaScript

Creación de una variable en JavaScript es más a menudo referido como "declarando" una variable. Usted declara
variables de JavaScript con la var palabra clave:

var carname;

Después de la declaración, la variable está vacía (no tiene valor). Para asignar un valor a la variable, utilice el
signo igual:

carname="Volvo";

Sin embargo, también se puede asignar un valor a la variable cuando la declara:

var carname="Volvo";

En el ejemplo siguiente se crea una variable llamada carname, asigna el valor "Volvo" a la misma, y poner el
valor dentro del párrafo HTML con id = "demo":

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a variable, and display the result.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Es una buena práctica de programación para declarar todas las variables que se necesitan, en
un solo lugar, al principio de su código.
Página
Tipos de datos de JavaScript

Hay muchos tipos de variables de JavaScript, pero por ahora, sólo pensar en dos tipos: texto y números.

Al asignar un valor a una variable de texto, poner comillas dobles o simples alrededor del valor.

Al asignar un valor numérico a una variable, no ponga comillas alrededor del valor. Si usted pone comillas
alrededor de un valor numérico, será tratado como texto.

Una declaración, muchas variables

Puede declarar variables en un comunicado. Simplemente comienza con la declaración var y separar las
variables de coma:

var name="Doe", age=30, job="carpenter";

Su declaración también puede abarcar varias líneas:

var name="Doe",
age=30,
job="carpenter";

Valor = undefined

En los programas de ordenador, las variables se han declarado sin valor. El valor puede ser algo que tiene que
ser calculada, o algo que se proporciona más adelante, como la entrada del [Link] declarada sin valor
tendrá el valor indefinido .

La variable carname tendrá el valor no definido después de la ejecución de la siguiente instrucción:

var carname;

Vuelva a Declarar Variables de JavaScript

Si vuelve a declarar una variable de JavaScript, no perderá su valor:.

El valor de la variable carname aún tendrá el valor " Volvo "después de la ejecución de las siguientes
afirmaciones:

var carname="Volvo";
var carname;
15
Página
JavaScript Aritmética

Al igual que con el álgebra, puede realizar operaciones aritméticas con variables de JavaScript, la utilización de
operadores como = y +:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Given that y=5, calculate x=y+2, and display the result.</p>
<button onclick="myFunction()">Try it</button>

Usted aprenderá más acerca de los operadores de JavaScript en un capítulo posterior de este tutorial.

16
Página
Javascript Funciones
Una función puede ser ejecutada por un evento, como hacer clic en un botón.

Funciones de JavaScript

Una función es un bloque de código que se ejecuta solamente cuando usted le dice a ejecutar. Puede ser cuando
se produce un evento, como cuando un usuario hace clic en un botón, o de una llamada dentro de su secuencia
de comandos o desde una llamada a otra función.

Las funciones se pueden colocar tanto en el head y en la sección <body> de un documento, sólo asegúrese de
que la función existe, cuando se realiza la llamada.

Cómo definir una función

Sintaxis
function functionname(){
some code
}

El {y} la define el inicio y final de la función.

Nota: No se olvide de la importancia de las capitales de JavaScript! La palabra función debe escribirse en
minúsculas, de lo contrario se produce un error de JavaScript! También tenga en cuenta que usted debe llamar a
una función con las capitales exactamente los mismos que en el nombre de la función.

Ejemplo de la función JavaScript

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
<p>By clicking the button above, a function ... will alert a message.</p>
</body>
</html>

La función se ejecuta cuando el usuario hace clic en el botón.

Usted aprenderá más acerca de los eventos de JavaScript en el capítulo JS Eventos.

Página
Llamar a una función con argumentos

Cuando se llama a una función, se puede pasar a lo largo de algunos valores que, estos valores se
llaman argumentos o parámetros .

Estos argumentos pueden ser utilizados dentro de la función.

Usted puede enviar tantos argumentos como que te gusta, separados por comas (,)

myFunction(argument1,argument2)

Declarar el argumento, como variables, cuando se declara la función:

function myFunction(var1,var2){
some code
}

Las variables y los argumentos deben estar en el orden esperado. La primera variable se le da el valor del primer
argumento pasado etc

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

La función de arriba se alerta "Bienvenido Harry Potter, el mago" cuando el botón es pulsado.
18
Página
La función es flexible, puede llamar a la función con argumentos diferentes, y diferentes mensajes de bienvenida
se les dará:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click one of the buttons to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">
Click for Harry Potter</button>
<button onclick="myFunction('Bob','Builder')">Click for Bob</button>

El ejemplo anterior se alerta "Bienvenido Harry Potter, el mago" o "Bienvenido Bob, el constructor", dependiendo
de qué botón es pulsado.

Funciones con un valor devuelto

A veces usted quiere que su función para devolver un valor nuevo a donde se realizó la llamada.

Esto es posible mediante el retorno comunicado.

Cuando se utiliza el retorno comunicado, la función dejará de ejecutar y devolver el valor especificado.

function myFunction(){
var x=5;
return x;
}

La función anterior devuelve el valor 5.

Nota: No es el JavaScript entero que se detenga la ejecución, sólo la función. JavaScript continuará la ejecución
de código, donde la función de guardia fue hecho.

La función de llamada será reemplazado con el returnvalue:

var myVar=myFunction();

La variable myVar contiene el valor 5, que es lo que la función "myFunction ()" devuelve.

También puede utilizar el returnvalue sin almacenarlo como una variable:

[Link]("demo").innerHTML=myFunction();
Página

El innerHTML de la "demo" elemento será del 5, que es lo que la función "myFunction ()" devuelve.
Usted puede hacer una returnvalue sobre la base de argumentos pasados a la función:

Ejemplo

Calcular el producto de dos números y devuelve el resultado:

<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which perfoms a ... the result:</p>
<p id="demo"></p>

[Link]("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>

La sentencia return se utiliza también cuando simplemente quieres salir de una función. El retorno de valor es
opcional:

function myFunction(a,b){
if (a>b) {
return;
}
x=a+b
}

La función anterior se salga de la función si a> b, y no calculará la suma de a y b.

Variables locales de JavaScript

Una variable declarada (utilizando var) dentro de una función de JavaScript convierte LOCAL y sólo se puede
acceder desde dentro de esa función. (La variable tiene ámbito local).

Usted puede tener variables locales con el mismo nombre en diferentes funciones, ya que las variables locales
sólo se reconocen por la función en la que se declaran.

Las variables locales se eliminan tan pronto como la función se ha completado.

Variables globales de JavaScript

Las variables declaradas fuera de una función, se convierten GLOBAL , y todos los scripts y funciones de la
página web se puede acceder a él.
20
Página
La duración de las variables de JavaScript

Las variables de JavaScript vida comienza cuando se declaran.

Las variables locales se borran cuando la función se ha completado.

Las variables globales se eliminan al cerrar la página.

Asignación de valores a las variables no declaradas de JavaScript

Si se asigna un valor a una variable que no ha sido declarada, la variable será automáticamente declarado
como GLOBAL variable.

Esta afirmación:

carname="Volvo";

se declara la variable carname como una variable global, incluso si se ejecuta dentro de una función.

21
Página
JavaScript Tipos de datos
String, Number, Boolean, Array, Object, null, undefined.

JavaScript Strings

Una cadena es una variable que almacena una serie de caracteres como "John Doe".

Una cadena puede ser cualquier texto entre comillas. Se pueden utilizar comillas simples o dobles:

Ejemplo
var carname="Volvo XC60";
var carname='Volvo XC60';

Se pueden utilizar comillas dentro de una cadena, siempre y cuando no coinciden con las comillas que rodean la
cadena:

Ejemplo
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

O usted puede poner comillas dentro de una cadena mediante el carácter de escape \:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script>
var carname1="Volvo XC60";
var carname2='Volvo XC60';
var answer1="It's alright";
var answer2="He is called 'Johnny'";
var answer3='He is called "Johnny"';
var answer4="He is called \"Johnny\"";

[Link](carname1 + "<br>")
[Link](carname2 + "<br>")
[Link](answer1 + "<br>")
[Link](answer2 + "<br>")
[Link](answer3 + "<br>")
[Link](answer4 + "<br>")
[Link](carname1[7] + "<br>")
</script>
</body>
</html>
22

Se puede acceder a cada uno de los personajes de una cadena con [ posición ]:
Página
Ejemplo
var character=carname[7];

Los índices de cadenas están basados en cero, lo que significa que el primer carácter es [0], el segundo es [1], y
así sucesivamente.

Números de JavaScript

JavaScript tiene sólo un tipo de número.

Los números pueden ser con o sin decimales:

Ejemplo
var pi=3.14;
var x=34;

El número máximo de decimales es 17.

Extra pequeños números grandes o extra puede escribirse con notación científica:

Ejemplo
var y=123e5; // 12300000
var z=123e-5; // 0.00123

Aritmética JavaScript no es 100% exacto:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script>
var x=0.2+0.1;
var y=(0.2*10+0.1*10)/10;
var z=12345678901234567890;

[Link](x + "<br>");
[Link]("It helps multiplying and dividing by 10:<br>")
[Link](y + "<br>");
[Link]("Ony 17 digits:<br>")
[Link](z + "<br>");
</script>
</body>
</html>
23
Página
JavaScript Booleanos

Booleanos sólo puede tener dos valores: true o false.

var x=true
var y=false

Booleanos se utilizan a menudo en las pruebas condicional. Usted aprenderá más sobre la prueba condicional en
un capítulo posterior de este tutorial.

Las matrices de JavaScript

El siguiente código crea un conjunto denominado myCars:

var cars=new Array();

cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

o (matriz condensada):

var cars=new Array("Saab","Volvo","BMW");

o (array literal):

var cars=["Saab","Volvo","BMW"];

Índices de matrices se basan en cero, lo que significa que el primer elemento es [0], el segundo es [1], y así
sucesivamente.

Los objetos JavaScript

Un objeto está delimitado por llaves. Entre las llaves las propiedades del objeto se definen como pares de
nombre y valor (nombre: valor). Las propiedades están separados por comas:

var person={firstname:"John", lastname:"Doe", id:5566};

El objeto (persona) en el ejemplo de arriba tiene 3 propiedades: fistname, apellido, e id.

Los espacios y saltos de línea no son importantes. Su declaración puede abarcar varias líneas:

var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
24
Página
Puede responder a las propiedades de los objetos de dos maneras:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script>
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};

[Link]([Link] + "<br>");
[Link](person["lastname"] + "<br>");
</script>
</body>
</html>

Null o undefined

No-existente es el valor de una variable sin valor.

Las variables pueden ser vaciados por establecer el valor en null;

cars=null;
person=null;

La declaración de tipos de variables

Cuando se declara una nueva variable, se puede declarar el tipo con la "nueva" palabra clave:

var carname=new String;

var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

Todas las variables en JavaScript son objetos. Cuando se declara una variable se crea un nuevo
objeto.
25
Página
Javascript Operadores
= Se utiliza para asignar valores.

+ Se utiliza para agregar valores.

El operador de asignación = se utiliza para asignar valores a las variables de JavaScript.

El operador aritmético + se utiliza para agregar valores.

Ejemplo

Asignar valores a las variables y sumarlos:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

[Link]("demo").innerHTML=x;
}
</script>
</body>
</html>

JavaScript Operadores aritméticos

Los operadores aritméticos se usan para realizar operaciones aritméticas entre las variables y / o valores.

Teniendo en cuenta que y = 5 , la siguiente tabla se explican los operadores aritméticos:

Operador Descripción Ejemplo Resultado Resultado

de x de y
+ Adición x = y2 7 5
- Sustracción x = y-2 3 5
* Multiplicación x = y*2 10 5
/ División x = y/2 2,5 5
% Módulo (resto de la división) x = y 2% 1 5
++ Incremento x = ++y 6 6
x = y++ 5 6
- Disminuir x = -y 4 4
x = y- 5 4
26
Página
Operadores de asignación de JavaScript

Los operadores de asignación se utiliza para asignar valores a las variables de JavaScript.

Dado que x = 10 y y = 5 , la tabla a continuación explica los operadores de asignación:

Operador Ejemplo Sustituto Resultar

= x=y x = 5
+= x=y+ x = x+y x = 15
-= x = y- x = xy x = 5
*= x*=y x = x*y x = 50
/= x/=y x = x/y x = 2
%= %x=y x = x% y x = 0

El operador + usado en cuerdas

El operador + también se puede utilizar para agregar variables de cadena o valores de texto entre sí.

Ejemplo

Para sumar dos o más variables de cadena juntos, use el operador +.

<!DOCTYPE html>
<html>
<body>
<p>Click the button to create and add string variables.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

[Link]("demo").innerHTML=txt3;
}
</script>
</body>
</html>
27
Página
Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to create and add string variables.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

[Link]("demo").innerHTML=txt3;
}
</script>
</body>
</html>

Adición de Cadenas y Números

La adición de dos números, se devolverá el importe, pero añadiendo un número y una cadena devolverá una
cadena:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to add numbers and strings.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

var demoP=[Link]("demo");
[Link]=x + "<br>" + y + "<br>" + z;
}
</script>
</body>
</html>
28

La regla es: Si añade un número y una cadena, el resultado será una cadena!
Página
JavaScript comparación y operadores lógicos
Los operadores de comparación y lógicos se utilizan para probar la verdad o falso .

Operadores de comparación

Los operadores de comparación se utilizan en instrucciones lógicas para determinar la igualdad o la diferencia
entre las variables o valores.

Dado que x = 5 , la tabla a continuación explica los operadores de comparación:

Operador Descripción Comparando Devoluciones

== es igual a x == 8 falso
x == 5 verdadero
=== es exactamente igual a (valor y tipo) x === "5" falso
x 5 === verdadero
!= no es igual x! = 8 verdadero
! == no es igual (ni valor o tipo) x! == "5" verdadero
x! == 5 falso
> es mayor que x> 8 falso
< es menor que x <8 verdadero
>= es mayor que o igual a x> = 8 falso
<= es menor que o igual a x <= 8 verdadero

¿Cómo puede ser usado

Los operadores de comparación se pueden utilizar en sentencias condicionales para comparar valores y actuar en
función del resultado:

if (age<18) x="Too young";

Usted aprenderá más sobre el uso de declaraciones condicionales en el siguiente capítulo de este tutorial.

Operadores lógicos

Los operadores lógicos se utilizan para determinar la lógica entre variables o valores.

Dado que x = 6, y = 3 , la siguiente tabla se explican los operadores lógicos:

Operador Descripción Ejemplo

&& y (X <10 && y> 1) es verdadera
|| o (X == 5 | | y == 5) es falsa
! no ! (X == y) es verdadera

Operador condicional

JavaScript también contiene un operador condicional que asigna un valor a una variable en función de alguna
condición.

variablename=(condition)?value1:value2
29
Página
Ejemplo

Si la variable de edad es un valor por debajo de 18, el valor de la variable voteable será "demasiado joven, de lo
contrario el valor de voteable será "La suficiente":

<!DOCTYPE html>
<html>
<body>
<p>Click the button to check the age.</p>
Age:<input id="age" value="18" />
<p>Old enough to vote?</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

30
Página
JavaScript If ... Else declaraciones
Sentencias condicionales se utilizan para realizar diferentes acciones basadas en diferentes
condiciones.

Sentencias condicionales

Muy a menudo, cuando se escribe código, se desea llevar a cabo diferentes acciones para diferentes
decisiones. Puede utilizar sentencias condicionales en el código para hacer esto.

En JavaScript tenemos las instrucciones condicionales siguientes:

• if - utilizar esta instrucción para ejecutar algún código sólo si una condición especificada es verdadera
• if ... else - utilizar esta instrucción para ejecutar código si la condición es verdadera y otro código si la
condición es falsa
• if ... else if .... else - utilice esta sentencia para seleccionar uno de los muchos bloques de código que se
ejecutará
• cambiar declaración - utilice esta sentencia para seleccionar uno de los muchos bloques de código que
se ejecutará

Si Statement

Utilice la sentencia if para ejecutar algún código sólo si una condición especificada es verdadera.

if (condition) {
code to be executed if condition is true
}

Tenga en cuenta que si está escrito en letras minúsculas. Con letras mayúsculas (SI) generará un error de
JavaScript!

Ejemplo

Haga un "Buenos días" saludo si el tiempo si es inferior a 20:00:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a "Good day" ...is less than 20:00.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

If ... else

Utilice la sentencia else .... si para ejecutar algún código si una condición es verdadera y otro código si la
condición no es verdadera.

if (condition) {
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Ejemplo

Si el tiempo es inferior a 20:00, obtendrá un "buen día" saludo, de lo contrario obtendrá un "Buenas noches"
saludo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a time-based greeting.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

if (time<20) {
x="Good day";
}
else {
x="Good evening";
}
[Link]("demo").innerHTML=x;
}
</script>
</body>
</html>
32
Página
If ... else if ... else

Utilice el si .... else if ... else para seleccionar uno de varios bloques de código que se ejecutan.

if (condition1) {
code to be executed if condition1 is true
}
else if (condition2) {
code to be executed if condition2 is true
}
else {
code to be executed if neither condition1 nor condition2 is true
}

Ejemplo

Si el tiempo es inferior a 10:00, obtendrá un "buenos días", saludo, si no, pero el tiempo es inferior a 20:00,
obtendrá un "buen día" saludo, de lo contrario obtendrá un buen " noche "saludo:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a time-based greeting.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

if (time<10) {
x="Good morning";
}
else if (time<20) {
x="Good day";
}
else {
x="Good evening";
}

[Link]("demo").innerHTML=x;
}
</script>
</body>
</html>
33
Página
JavaScript Interruptor Declaración

La sentencia switch se utiliza para realizar una acción diferente en función de diferentes
condiciones.

La sentencia switch JavaScript

Utilice la sentencia switch para seleccionar uno de muchos bloques de código que se ejecutan.

switch(n){
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

Así es como funciona: En primer lugar tenemos una sola expresión n (casi siempre una variable), que se evalúa
una vez. El valor de la expresión se compara entonces con los valores para cada caso en la estructura. Si hay
una coincidencia, el bloque de código asociado con ese caso se ejecuta. Utilice romper para evitar que el código
se ejecute en el caso siguiente automáticamente.

Ejemplo

Visualización de hoy día de la semana-name. Tenga en cuenta que Domingo = 0, Lunes = 1, martes = 2, etc:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to display what day it is today.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

switch (d) {
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
34

x="Today it's Thursday";

break;
case 5:
Página

x="Today it's Friday";

break;
case 6:
x="Today it's Saturday";
break;
}
[Link]("demo").innerHTML=x;
}
</script>
</body>
</html>

El defecto Palabra

Utilice el valor predeterminado palabra clave para especificar lo que debe hacer si no hay ninguna coincidencia:

Ejemplo

Si NO es el sábado o el domingo, a continuación, escribir un mensaje predeterminado:

<html>
<body>
<p>Click the button to display a message based on what day it is today.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

switch (d) {
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend";
}
[Link]("demo").innerHTML=x;
}
</script>
</body>
</html>
35
Página
Javascript Popup Cajas

JavaScript tiene tres tipos de cajas emergente: cuadro de alerta, confirmar caja, y la caja del
sistema.

Cuadro de alerta

Un cuadro de alerta se utiliza a menudo si desea que la información que llega a través del usuario.

Cuando un cuadro de alerta aparece, el usuario tendrá que hacer clic en "Aceptar" para continuar.

alert("sometext");

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
alert("Hello! I am an alert box!");
}
</script>
</head>

Confirme Caja

Aparecerá un cuadro de confirmación a menudo se utiliza si desea que el usuario pueda verificar o aceptar algo.

Cuando aparezca un cuadro de confirmación aparece, el usuario tendrá que hacer clic en cualquiera de los dos
"Aceptar" o "Cancelar" para continuar.

Si el usuario hace clic en "Aceptar", aparecerá el cuadro devuelve true. Si el usuario hace clic en "Cancelar", el
cuadro vuelve falsa.

confirm("sometext");
36
Página
Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

if (r==true) {
x="You pressed OK!";
}
else {
x="You pressed Cancel!";
}
[Link]("demo").innerHTML=x;
}
</script>
</body>
</html>

Caja del sistema

Un cuadro de mensaje se utiliza a menudo si desea que el usuario introduzca un valor antes de entrar en una
página.

Cuando un cuadro de mensaje aparece, el usuario tendrá que hacer clic en cualquiera de los dos "Aceptar" o
"Cancelar" para continuar después de introducir un valor de entrada.

Si el usuario hace clic en "Aceptar" del cuadro devuelve el valor de entrada. Si el usuario hace clic en "Cancelar"
la caja devuelve null.

prompt("sometext","defaultvalue");

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

var x;
var name=prompt("Please enter your name","Harry Potter");
Página
if (name!=null) {
x="Hello " + name + "! How are you today?";
[Link]("demo").innerHTML=x;
}
}
</script>
</body>
</html>

Saltos de línea

Para mostrar los saltos de línea dentro de una ventana emergente, utilice una barra invertida seguida por el
carácter n.

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate line-breaks in a popup box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

38
Página
JavaScript Para Loop
Para Loops ejecutará un bloque de código un número específico de veces.

JavaScript Loops

A menudo, cuando se escribe código, desea que el mismo bloque de código se ejecute una y otra vez en una
fila. En lugar de añadir varias líneas casi iguales en una secuencia de comandos que puede utilizar bucles para
realizar una tarea como esta.

En JavaScript, hay dos tipos diferentes de bucles:

• para - bucles a través de un bloque de código un número determinado de veces

• mientras que - recorre un bloque de código mientras una condición especificada es verdadera

El bucle for

El bucle for se utiliza cuando se sabe de antemano cuántas veces la secuencia de comandos se debe ejecutar.

for (variable=startvalue;variable<endvalue;variable=variable+increment) {
code to be executed
}

Ejemplo

El ejemplo siguiente define un bucle que comienza con i = 0. El bucle continuará funcionando siempre y
cuando i es menor que 5. i se incrementará en 1 cada vez que se ejecute el bucle.

Nota: El parámetro de incremento también podría ser negativa, y el <podría ser cualquier declaración
comparando.

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Mientras Loops ejecutar un bloque de código mientras una condición especificada es verdadera.

El bucle while

Los bucles While Loop a través de un bloque de código mientras una condición especificada sea verdadera.

while (variable<endvalue)
{
code to be executed
}

Nota: La <podría ser cualquier operador de comparación.

El ejemplo siguiente define un bucle que comienza con i = 0. El bucle continuará funcionando siempre y
cuando i es menor que 5. i se incrementará en 1 cada vez que el bucle se ejecuta:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop through a block of as long as <em>i</em> is less
han 5.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Nota: No se olvide de aumentar el i variable utilizada en el estado, de lo contrario yo siempre será menor que 5,
y el bucle nunca terminará!
40
Página
El bucle do ... while

El bucle do ... while es una variante del bucle while. Este bucle se ejecutará el bloque de código una vez, antes
de verificar si la condición es verdadera, entonces se repite el bucle mientras la condición es verdadera.

do
{
code to be executed
}
while (variable<endvalue);

Ejemplo

El ejemplo siguiente utiliza un bucle do ... while. El bucle do ... while siempre se ejecuta al menos una vez,
incluso si la condición es falsa, ya que las sentencias se ejecutan antes de que la condición se comprueba:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop through a block of as long as <em>i</em> is less
han 5.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

while (i<5)
[Link]("demo").innerHTML=x;
}
</script>
</body>
</html>

Nota: No se olvide de aumentar el i variable utilizada en el estado, de lo contrario yo siempre será menor que 5,
y el bucle nunca terminará!
41
Página
JavaScript break y continue declaraciones

La sentencia break

La declaración de la rotura se romperá el bucle y continuar la ejecución del código que sigue después del bucle.

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to do a loop with a break.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

La sentencia continue

La sentencia continue se romperá la iteración actual del bucle y continuar con el siguiente valor.

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to do a loop which will skip the step where i=3.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

</html>
Página
JavaScript Para ... En el Estado de
JavaScript Para ... En el Estado Financiero

Los bucles for ... in comunicado a través de las propiedades de un objeto.

for (variable in object)

{
code to be executed
}

Nota: El bloque de código dentro del bucle for ... in se ejecuta una vez para cada propiedad.

Bucle a través de las propiedades de un objeto:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop through the properties ... person".</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

for (x in person){
txt=txt + person[x];
}

[Link]("demo").innerHTML=txt;
}
</script>
</body>
</html>

43
Página
JavaScript Eventos
Los eventos son acciones que pueden ser detectados por JavaScript.

Ejemplo

Mouse Over Me
Click Me

Eventos

Mediante el uso de JavaScript, tenemos la capacidad de crear páginas web dinámicas. Los eventos son acciones
que pueden ser detectados por JavaScript.

Cada elemento de una página web tiene ciertos eventos que pueden desencadenar un [Link] ejemplo,
podemos usar el onclick caso de un elemento de botón para indicar que una función se ejecutará cuando un
usuario hace clic en el botón.

Ejemplos de eventos:

• Al hacer clic en un botón (o cualquier otro elemento de HTML)

• Una página termina de cargar
• Una imagen se termine de cargar
• Al mover el cursor del ratón sobre un elemento
• Introducción de un campo de entrada
• Envío de una forma
• Una pulsación

Para ver todos los eventos reconocidos por JavaScript, vaya a nuestro evento de referencia completa .

Los eventos se utilizan normalmente en combinación con las funciones.

HTML atributos de eventos

Para asignar los eventos a elementos HTML que puedes usar los atributos de eventos.

Ejemplo

Asignar un evento onclick a un elemento de botón:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="myBtn" onclick="displayDate()">Try it</button>

<p id="demo"></p>
</body>
44

</html>
Página
En el ejemplo anterior, una función llamada DisplayDate se ejecutará cuando se pulsa el botón.

Asignar eventos usando el DOM HTML

Puede asignar eventos a elementos HTML dentro de un script o una función:

Ejemplo

Asignar un evento onclick a un elemento de botón:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="myBtn">Try it</button>

function displayDate(){
[Link]("demo").innerHTML=Date();
}
</script>

En el ejemplo anterior, una función llamada DisplayDate se ejecutará cuando se pulsa el botón.
45
Página
onload y onunload

Los eventos onload y onunload se activan cuando el usuario entra o sale de la página.

El proceso de carga se puede utilizar para verificar el tipo de navegador del visitante y la versión del navegador y
cargar la versión correcta de la página web basada en la información.

Los eventos onload y onunload se puede utilizar para hacer frente a las cookies.

Ejemplo

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<p>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>
</html>

onfocus, onblur y onchange

Los eventos del onfocus, onblur onchange y se utilizan a menudo en combinación con la validación de campos de
formulario.

A continuación se muestra un ejemplo de cómo utilizar el evento onchange. La función checkEmail () se llama
cuando el usuario cambia el contenido del campo:

<input type="text" onchange="checkEmail()" />

onSubmit

El evento onsubmit se puede utilizar para validar los campos del formulario antes de enviarlo.

A continuación se muestra un ejemplo de cómo utilizar el evento onsubmit. El checkForm () función se llama
cuando el usuario hace clic en el botón de enviar el formulario. Si los valores de los campos no se aceptan, se
someten debe ser cancelada.
46

<form method="post" action="[Link]" onsubmit="checkForm()">

Página
onmouseover, onmouseout

Los eventos onmouseover y onmouseout se puede utilizar para activar una función cuando el usuario mouses
sobre, o fuera de, un elemento HTML.

Ejemplo

Una simple-onmouseout onmouseover ejemplo:

<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-
color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

function mOut(obj){
[Link]="Mouse Over Me"
}
</script>
</body>
</html>

onmousedown, onmouseup y onclick

El onmousedown, onmouseup y eventos onclick son todos partes de un clic del ratón. En primer lugar, cuando un
ratón se hace clic en un botón, el evento onmousedown se dispara, entonces, cuando el ratón se suelta el botón,
el evento onmouseup se dispara, por último, cuando el clic del ratón se completa, el evento onclick se dispara.

Ejemplo

Un simple onmousedown-onmouseup ejemplo:

<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-
color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

</script>
</body>
Página

</html>
JavaScript Try ... Catch Declaración
El try ... catch le permite probar un bloque de código para los errores.

La captura de errores de JavaScript -

Al navegar por páginas Web en Internet, todos hemos visto un cuadro de alerta JavaScript decirnos que hay un
error en tiempo de ejecución y preguntando "¿Desea depurar?". Mensaje de error de este tipo puede ser útil para
los desarrolladores, pero no para los usuarios. Cuando los usuarios vean los errores, a menudo salir de la página
Web.

El try ... catch

El try ... catch le permite probar un bloque de código para los errores. El bloque try contiene el código que se
ejecuta, y el bloque catch contiene el código que se ejecuta si se produce un error.

try {
//Run some code here
}
catch(err) {
//Handle errors here
}

Tenga en cuenta que try ... catch se escribe en minúsculas. Utilizando las letras mayúsculas se generará un error
de JavaScript!

Ejemplos

Este ejemplo se supone que alertar "¡Bienvenido!" cuando se pulsa el botón. Sin embargo, hay un error en la
función del mensaje (). alert () es incorrecta como adddlert (). Un error de JavaScript se produce. El bloque
catch detecta el error y ejecuta un código personalizado para manejar la situación. El código muestra un mensaje
de error personalizado que informa al usuario lo que sucedió:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";

<body>
<input type="button" value="View message" onclick="message()" />
Página

</body>
</html>
El ejemplo siguiente utiliza una casilla de confirmación para mostrar un mensaje personalizado diciendo a los
usuarios que pueden hacer clic en Aceptar para continuar viendo la página o haga clic en Cancelar para volver a
la página principal. Si el método confirm devuelve false, el usuario hace clic en Cancelar, y el código redirige al
usuario. Si el método confirm devuelve true, el código no hace nada:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";

function message(){
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="There was an error on this page.\n\n";
txt+="Click OK to continue viewing this page,\n";
txt+="or Cancel to return to the home page.\n\n";

if(!confirm(txt)) {
[Link]="[Link]
}
}
}
</script>
</head>

La sentencia throw

La sentencia throw se puede utilizar junto con el try ... catch, para crear una excepción para el error. Obtener
información acerca de la instrucción throw en el próximo capítulo.
49
Página
JavaScript Lanza Declaración
La sentencia throw permite crear una excepción.

La sentencia throw

La sentencia throw permite crear una excepción. Si utiliza esta declaración junto con el try ... catch, se puede
controlar el flujo del programa y generar mensajes de error exactos.

throw exception

Tenga en cuenta que tiro está escrito en letras minúsculas. Utilizando las letras mayúsculas se generará un error
de JavaScript!

Ejemplo

El ejemplo a continuación determina el valor de una variable llamada x. Si el valor de x es superior a 10, inferior
a 5, o no, un número, vamos a lanzar un error. El error es entonces atrapada por el argumento de la captura y el
mensaje de error apropiado aparece:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script>
var x=prompt("Enter a number between 5 and 10:","");
try{
if(x>10) {
throw "Err1";
}
else if(x<5) {
throw "Err2";
}
else if(isNaN(x)) {
throw "Err3";
}
}
catch(err){
if(err=="Err1") {
[Link]("Error! The value is too high.");
}
if(err=="Err2") {
[Link]("Error! The value is too low.");
}
if(err=="Err3") {
[Link]("Error! The value is not a number.");
}
}
</script>
</body>
</html>
50
Página
JavaScript Caracteres especiales

En JavaScript se pueden agregar caracteres especiales a una cadena de texto utilizando el signo
de barra diagonal inversa.

Insertar caracteres especiales

La barra invertida (\) se utiliza para insertar apóstrofes, nuevas líneas, comillas y otros caracteres especiales en
una cadena de texto.

Mira el siguiente código JavaScript:

var txt="We are the so-called "Vikings" from the north.";

[Link](txt);

En JavaScript, una cadena que se inicia y se detiene con comillas simples o dobles. Esto significa que la cadena
anterior será cortado a: Somos la llamada

Para resolver este problema, debe colocar una barra invertida (\) antes de cada cita doble en el "Viking". Esto
convierte cada doble comilla en una cadena literal:

var txt="We are the so-called \"Vikings\" from the north.";

[Link](txt);

JavaScript ahora emitirá la cadena de texto apropiado: Somos los llamados "vikingos" desde el norte.

La tabla a continuación enumera otros caracteres especiales que se pueden agregar a una cadena de texto con el
signo barra invertida:

Código Salidas
\ ' comilla simple
\ " comillas dobles
\ \ barra diagonal inversa
\ N nueva línea
\ R retorno de carro
\ T lengüeta
\ B backspace
\ F Avance de

51
Página
JavaScript Directrices

Algunas cosas importantes para saber cuándo scripting con JavaScript.

JavaScript es sensible a mayúsculas

Una función llamada "myfunction" no es lo mismo que "myFunction" y una variable llamada "myVar" no es lo
mismo que "myvar".

JavaScript es sensible a mayúsculas - por lo tanto ver su capitalización de cerca cuando se crea o llamar
variables, objetos y funciones.

Espacio en blanco

JavaScript ignora espacios adicionales. Usted puede agregar espacio en blanco a su script para que sea más
legible. Las líneas siguientes son equivalentes:

var name="Hege";
var name = "Hege";

Romper una línea de código

Puede dividir una línea de código dentro de una cadena de texto con una barra invertida. En el ejemplo de
abajo se mostrará correctamente:

[Link]("Hello \
World!");

Sin embargo, no se puede romper una línea de código como este:

[Link] \
("Hello World!");

JavaScript Objetos Introducción

JavaScript es un lenguaje de programación basado en objetos.

Un lenguaje de programación basado en objetos le permite definir sus propios objetos y hacer
sus propios tipos de variables.

Objeto de programación basada en

JavaScript es un lenguaje de programación basado en objetos, y le permite definir sus propios objetos y hacer
sus propios tipos de variables.

Sin embargo, crear sus propios objetos se explicará más adelante, en la sección Advanced JavaScript. Vamos a
empezar por mirar a la incorporada en objetos JavaScript y cómo se utilizan. En las páginas siguientes se explica
52

cada objeto en JavaScript incorporado en detalle.

Página

Tenga en cuenta que un objeto es un tipo especial de datos. Un objeto tiene propiedades y métodos.
Propiedades

Las propiedades son los valores asociados a un objeto.

En el siguiente ejemplo se utiliza la propiedad length del objeto String para devolver el número de caracteres de
una cadena:

La salida del código anterior será:

Métodos

Los métodos son las acciones que se pueden realizar sobre los objetos.

En el siguiente ejemplo se utiliza el método toUpperCase () del objeto String para mostrar un texto en letras
mayúsculas:

La salida del código anterior será:

HELLO WORLD!

JavaScript cadena del objeto

El objeto String se utiliza para manipular una pieza de texto almacenada.

Cadena completa referencia de objeto

Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto String,
vaya a nuestra referencia completa objeto String .

La referencia contiene una breve descripción y los ejemplos de uso de cada propiedad y método!

Cadena objeto

El objeto String se utiliza para manipular una pieza de texto almacenada.

Ejemplos de uso:
53

El ejemplo siguiente utiliza la propiedad length del objeto String para encontrar la longitud de una cadena:
Página

var txt="Hello world!";

[Link]([Link]);
El código anterior resultará en la siguiente salida:

En el ejemplo siguiente, se utiliza el método toUpperCase () del objeto String para convertir una cadena a
mayúsculas:

var txt="Hello world!";

[Link]([Link]());

El código anterior resultará en la siguiente salida:

HELLO WORLD!

JavaScript Date objeto

El objeto Date se utiliza para trabajar con fechas y horas.

Fecha de Referencia completa del objeto

Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto Date, vaya
a nuestra referencia completa objeto Date .

La referencia contiene una breve descripción y los ejemplos de uso de cada propiedad y método!

Crear un objeto Date

El objeto Date se utiliza para trabajar con fechas y horas.

Objetos de fecha se creó con el constructor Date ().

Hay cuatro formas de iniciar una fecha:

new Date() // current date and time

new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

La mayoría de los parámetros anteriores son opcionales. Si no se especifica, hace que 0 que se pasa pulg

Una vez que un objeto de fecha de creación, una serie de métodos le permiten operar sobre él. La mayoría de los
métodos le permiten obtener y establecer el año, mes, día, hora, minuto, segundo y milisegundos del objeto,
utilizando la hora local o UTC (universal o GMT).

Todas las fechas se calculan en milisegundos desde 01 de enero 1970 00:00:00 Hora Universal (UTC), con un día
que contiene 86.400.000 milisegundos.

Algunos ejemplos de iniciar una fecha:

var today = new Date()

var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
54

var d3 = new Date(79,5,24,11,33,0)

Página
Establecer fechas

Es fácil manipular a la fecha utilizando los métodos disponibles para el objeto Date.

En el siguiente ejemplo hemos creado un objeto Date con la fecha (14 de enero de 2010):

var myDate=new Date();

[Link](2010,0,14);

Y en el siguiente ejemplo hemos creado un objeto Date a ser de 5 días en el futuro:

var myDate=new Date();

[Link]([Link]()+5);

Nota: Si la adición de cinco días para la fecha cambia el mes o el año, los cambios se realizan automáticamente
en el objeto Date de sí mismo!

Comparar dos fechas

El objeto Date se utiliza para comparar dos fechas.

El siguiente ejemplo compara la fecha actual con el 14 de enero 2100:

var x=new Date();

[Link](2100,0,14);
var today = new Date();

if (x>today) {
alert("Today is before 14th January 2100");
}
else {
alert("Today is after 14th January 2100");
}

55
Página
JavaScript matriz de objetos

El objeto Array se utiliza para almacenar varios valores en una sola variable.

Ejemplos

Crear una matriz y asignar valores a la misma:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (i=0;i<[Link];i++){
[Link](mycars[i] + "<br />");
}
</script>
</body>
</html>

Va a encontrar más ejemplos en la parte inferior de esta página.

¿Qué es una matriz?

Una matriz es una variable especial, que puede contener más de un valor a la vez.

Si usted tiene una lista de elementos (una lista de nombres de coche, por ejemplo), el almacenamiento de los
coches en una sola variable podría tener este aspecto:

var car1="Saab";
var car2="Volvo";
var car3="BMW";

Sin embargo, lo que si desea recorrer los coches y encontrar uno específico? ¿Y si no lo hubieras hecho 3 coches,
pero 300?

La solución es una matriz!

Una matriz puede contener muchos valores bajo un mismo nombre, y se puede acceder a los valores de
referencia a un número de índice.
56
Página
Crear una matriz

Un array puede ser creado de tres maneras.

El siguiente código crea un objeto Array denominado myCars:

1: Regular:

var myCars=new Array();

myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2: Condensado:

var myCars=new Array("Saab","Volvo","BMW");

3: Literal:

var myCars=["Saab","Volvo","BMW"];

Acceda a una matriz

Usted se refiere a un elemento de una matriz por referencia al índice de número.

Esta declaración acceso al valor del primer elemento en myCars:

var name=myCars[0];

Esta declaración modifica el primer elemento de myCars:

myCars[0]="Opel";

[0] es el primer elemento en una matriz. [1] es el segundo. . . . . (Índices de empezar con 0)

Usted puede tener diferentes objetos en una matriz

Todas las variables de JavaScript son objetos. Los elementos de matriz son objetos. Las funciones son objetos.

Debido a esto, usted puede tener variables de tipos diferentes en la misma matriz.

Puede hacer que los objetos en una matriz. Usted puede tener funciones en una matriz. Usted puede tener
matrices en una matriz:

myArray[0]=[Link];
myArray[1]=myFunction();
myArray[2]=myCars;
57
Página
Métodos y propiedades de matriz

El objeto Array tiene propiedades predefinidas y métodos:

var x=[Link] // the number of elements in myCars

var y=[Link]("Volvo") // the index position of "Volvo"

Gama completa referencia de objeto

Para una referencia completa de todas las propiedades y métodos, vaya a nuestra referencia completa objeto
Array.

La referencia contiene una descripción (y más ejemplos) de todas las propiedades y métodos de matriz.

Gama completa referencia de objeto

Crear nuevos métodos

Prototype es un constructor mundial en JavaScript. Se puede construir nuevas propiedades y métodos para los
objetos de JavaScript.

Ejemplo: Haga un método new Array.

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to create an array, call the new ucase()
method, and display the result.</p>

<button onclick="myFunction()">Try it</button>

function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
[Link]();
var x=[Link]("demo");
[Link]=fruits;
}
</script>
</body>
</html>

El ejemplo anterior hace que un método nueva matriz que transforma los valores de la matriz en mayúsculas.
58
Página
JavaScript Boolean objeto
El objeto booleano se utiliza para convertir un valor no booleano en un valor booleano (true o
false).

Referencia completa del objeto Boolean

Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto Boolean,
vaya a nuestra referencia completa objeto Boolean .

La referencia contiene una breve descripción y los ejemplos de uso de cada propiedad y método!

Crear un objeto Boolean

El objeto Boolean representa dos valores: "true" o "false".

El siguiente código crea un objeto Boolean llamado miBooleano:

var myBoolean=new Boolean();

Si el objeto Boolean no tiene valor inicial, o si el valor pasado es uno de los siguientes:

• 0
• -0
• nulo
• ""
• falso
• sin definir
• NaN

el objeto se establece en false. Para cualquier otro valor se establece en true (incluso con la cadena "false")!

JavaScript Matemáticas objeto

El objeto Math le permite realizar tareas matemáticas.

Matemáticas Referencia completa del objeto

Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto Math,
vaya a nuestra referencia completa objeto Math .

La referencia contiene una breve descripción y los ejemplos de uso de cada propiedad y método!

Objeto Math

El objeto Math le permite realizar tareas matemáticas.

El objeto Math incluye varias constantes matemáticas y métodos.

Página

Sintaxis para el uso de propiedades / métodos de matemática:

var x=[Link];
var y=[Link](16);

Nota: Las matemáticas no es un constructor. Todas las propiedades y métodos de la matemática puede ser
llamado usando matemáticas como un objeto sin crearla.

Constantes matemáticas

JavaScript proporciona ocho constantes matemáticas que se puede acceder desde el objeto [Link] son: E,
PI, la raíz cuadrada de 2, raíz cuadrada de 1/2, logaritmo natural de 2, logaritmo natural de 10, base-2 log de E,
y la base-10 log de E.

Usted puede hacer referencia a estas constantes de su código JavaScript como esta:

Math.E
[Link]
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Métodos Matemáticos

Además de las constantes matemáticas que se puede acceder desde el objeto Math también hay varios métodos
disponibles.

En el ejemplo siguiente, se utiliza el método round () del objeto Math para redondear un número al entero más
cercano:

[Link]([Link](4.7));

El código anterior resultará en la siguiente salida:

En el ejemplo siguiente se utiliza el método random () del objeto Math para devolver un número aleatorio entre 0
y 1:

[Link]([Link]());

El código anterior puede dar lugar a los siguientes resultados:

0.9874691816512495

En el ejemplo siguiente se utilizan los métodos de piso () y random () del objeto Math para devolver un número
aleatorio entre 0 y 10:

[Link]([Link]([Link]()*11));

El código anterior puede dar lugar a los siguientes resultados:

4
60
Página
JavaScript RegExp objeto

RegExp, es la abreviatura de la expresión regular.

Completa referencia de objeto RegExp

Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto RegExp,
vaya a nuestra referencia completa objeto RegExp . La referencia contiene una breve descripción y los ejemplos
de uso de cada propiedad y método!

¿Cuál es RegExp?

Una expresión regular es un objeto que describe un patrón de caracteres. Cuando usted busca en un texto,
puedes utilizar un patrón para describir lo que está buscando. Un modelo simple puede ser un carácter único.

Un patrón más complicado puede constar de más caracteres, y se puede utilizar para el análisis sintáctico, la
comprobación de formato, sustitución y más.

Las expresiones regulares se utilizan para realizar potente de patrones y "buscar y reemplazar" las funciones de
texto.

var patt=new RegExp(pattern,modifiers);

or more simply:

var patt=/pattern/modifiers;

• patrón especifica el patrón de una expresión

• modificadores especificar si la búsqueda debe ser global, mayúsculas y minúsculas, etc

RegExp Modificadores

Los modificadores se utilizan para realizar búsquedas entre mayúsculas y minúsculas y global. El modificador i se
utiliza para realizar las mayúsculas y minúsculas a juego.

El modificador g se utiliza para realizar una comparación global (todos los partidos en lugar de parar después de
la primera coincidencia).

Ejemplo 1

Haga una búsqueda entre mayúsculas y minúsculas para "w3schools" en una cadena:

<!DOCTYPE html>
<html>
<body>
<script>
var str = "Visit W3Schools";
var patt1 = /w3schools/i;
[Link]([Link](patt1));
</script>
61

</body>
</html>
Página
Ejemplo 2

Haga una búsqueda global de "es":

<!DOCTYPE html>
<html>
<body>
<script>
var str="Is this all there is?";
var patt1=/is/g;
[Link]([Link](patt1));
</script>
</body>
</html>

Ejemplo 3

Hacer un mundial, mayúsculas y minúsculas búsqueda de "es":

<!DOCTYPE html>
<html>
<body>
<script>
var str="Is this all there is?";
var patt1=/is/gi;
[Link]([Link](patt1));
</script>
</body>
</html>

test ()

El método test () busca una cadena para un valor especificado, y devuelve true o false, dependiendo del
resultado.

El ejemplo siguiente busca una cadena para el carácter "e":

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script>
var patt1=new RegExp("e");
[Link]([Link]("The best things in life are free"));
</script>
</body>
</html>
62
Página

Puesto que hay una "e" en la cadena, la salida del código anterior será: true
exec ()

El método exec () busca una cadena para un valor especificado y devuelve el texto del valor encontrado. Si no se
encuentra una coincidencia, devuelve null.

El ejemplo siguiente busca una cadena para el carácter "e":

Ejemplo 1

<!DOCTYPE html>
<html>
<body>
<script>
var patt1=new RegExp("e");
[Link]([Link]("The best things in life are free"));
</script>
</body>
</html>

63
Página
JavaScript Detección del navegador
El objeto navigator contiene información sobre el navegador del visitante.

Detección del navegador

Casi todo en este tutorial funciona en todos los navegadores con JavaScript habilitado. Sin embargo, hay algunas
cosas que simplemente no funcionan en algunos navegadores - especialmente en los navegadores antiguos.

A veces puede ser útil para detectar el navegador del visitante, y luego servir la información adecuada.

El objeto navigator contiene información sobre el nombre del navegador del visitante, versión, etc.

Nota: No existe una norma pública que se aplica al navegador de objetos, pero todos los principales
navegadores lo soportan.

El objeto Navigator

El objeto Navigator contiene toda la información sobre el navegador del visitante:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<div id="example"></div>

[Link]("example").innerHTML=txt;
</script>
</body>
</html>
64
Página
JavaScript cookies
Una cookie se utiliza a menudo para identificar a un usuario.

¿Qué es una cookie?

Una cookie es una variable que se almacena en la computadora del visitante. Cada vez que el equipo solicita una
misma página con un navegador, se enviará la cookie también. Con JavaScript, puede crear y recuperar los
valores de las cookies.

Ejemplos de cookies:

• Galleta Name - La primera vez que un visitante llega a su sitio web, él o ella debe llenar en su su /
nombre. El nombre es entonces almacenada en un cookie. La próxima vez que el visitante llega a tu
página, él o ella podría obtener un mensaje de bienvenida como "Doe John Bienvenido!" El nombre se
recupera de la cookie almacenado
• Conocer cookie - La primera vez que un visitante llega a su sitio web, la fecha actual se almacena en una
cookie. La próxima vez que el visitante llega a tu página, él o ella podría obtener un mensaje como "Su
última visita fue el martes 11 de agosto de 2005!" La fecha se recupera de la cookie almacenado

Crear y guardar una cookie

En este ejemplo vamos a crear un cookie que almacena el nombre de un visitante. La primera vez que un
visitante llega a la página web, se le pedirá que rellene su su / nombre. El nombre es entonces almacenada en
un cookie. La próxima vez que el visitante llega a la misma página, él o ella recibirá mensaje de bienvenida.

En primer lugar, creamos una función que almacena el nombre del visitante en una variable de cookie:

function setCookie(c_name,value,exdays){
var exdate=new Date();
[Link]([Link]() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : ";
expires="+[Link]());
[Link]=c_name + "=" + c_value;
}

Los parámetros de la función de arriba sin soltar el nombre de la cookie, el valor de la cookie, y el número de
días hasta que la cookie expira. Primero convertir el número de días a una fecha válida, entonces añadimos el
número de días hasta que la cookie debe expirar. Después de que se guarda el nombre de la cookie, el valor de
cookie y la fecha de caducidad en el objeto [Link].

Entonces, creamos otra función que devuelve un cookie especificada:

function getCookie(c_name){
var i,x,y,ARRcookies=[Link](";");
for (i=0;i<[Link];i++){
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=[Link](/^\s+|\s+$/g,"");

if (x==c_name) {
return unescape(y);
}
65

}
}
Página
La función de arriba hace que una matriz para recuperar los nombres y valores de galletas, a continuación,
comprueba si la cookie especificada existe, y devuelve el valor de la cookie.

Por último, creamos la función que muestra un mensaje de bienvenida si la cookie, y si la cookie no está
configurado, se mostrará un cuadro de diálogo, preguntando por el nombre del usuario, y almacena la cookie de
nombre de usuario de 365 días, llamando al la función setcookie:

function checkCookie(){
var username=getCookie("username");
if (username!=null && username!="") {
alert("Welcome again " + username);
}
else {
username=prompt("Please enter your name:","");

if (username!=null && username!=""){

setCookie("username",username,365);
}
}
}

Todos juntos ahora:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name){
var i,x,y,ARRcookies=[Link](";");

for (i=0;i<[Link];i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=[Link](/^\s+|\s+$/g,"");

if (x==c_name) {
return unescape(y);
}
}
}

function setCookie(c_name,value,exdays){
var exdate=new Date();
[Link]([Link]() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : ";
expires="+[Link]());
[Link]=c_name + "=" + c_value;
}
66
Página

function checkCookie(){
var username=getCookie("username");

if (username!=null && username!="") {

alert("Welcome again " + username);
}
else {
username=prompt("Please enter your name:","");

if (username!=null && username!="") {

setCookie("username",username,365);
}
}
}
</script>
</head>

Cargas denuevo

El ejemplo anterior se ejecuta la función checkCookie () cuando se carga la página.

67
Página

JavaScript Validación de formularios

JavaScript se puede utilizar para validar los datos de los formularios HTML antes de enviar el contenido a un
servidor.

Los datos del formulario que por lo general están controladas por un JavaScript podrían ser:

• el usuario ha dejado campos obligatorios vacíos?

• el usuario ha entrado en una dirección válida de e-mail?
• el usuario ha introducido una fecha válida?
• el usuario ha de introducir texto en un campo numérico?

Campos obligatorios

La siguiente función comprueba si un campo se ha quedado vacía. Si el campo está en blanco, un cuadro de
alerta avisa de un mensaje, la función devuelve false y el formulario no se presentará:

function validateForm(){
var x=[Link]["myForm"]["fname"].value;
if (x==null || x=="") {
alert("First name must be filled out");
return false;
}
}

La función anterior podría ser llamada cuando se envía un formulario:

Ejemplo

<!DOCTYPE html>
<html>
<head>

if (x==null || x=="") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()"
method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
68
Página

E-mail de validación
La siguiente función comprueba si el contenido tiene la sintaxis general de un correo electrónico.

Esto significa que los datos de entrada debe contener un signo @ y al menos un punto (.). Además, la @ no debe
ser el primer carácter de la dirección de correo electrónico, y el último punto debe estar presente después del
signo @, y un mínimo de 2 caracteres antes del final:

function validateForm(){
var x=[Link]["myForm"]["email"].value;
var atpos=[Link]("@");
var dotpos=[Link](".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=[Link]) {

alert("Not a valid e-mail address");
return false;
}
}

La función anterior podría ser llamada cuando se envía un formulario:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm(){
var x=[Link]["myForm"]["email"].value;
var atpos=[Link]("@");
var dotpos=[Link](".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=[Link]) {

alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();"
method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
69

JavaScript eventos de temporización

Página
Eventos de JavaScript temporización

Con JavaScript, es posible ejecutar código a intervalos de tiempo especificados. Esto se conoce como eventos de
tiempo.

Es muy fácil para los acontecimientos del tiempo en JavaScript. Los dos métodos principales que se utilizan son:

• setInterval () - ejecuta una función, una y otra vez, a intervalos de tiempo especificados
• setTimeout () - ejecuta una función, una vez que, después de esperar un número especificado de
milisegundos

Nota: La función setInterval () y setTimeout () son los dos métodos del objeto Window HTML DOM.

El método setInterval ()

El método setInterval () esperará un número especificado de milisegundos, a continuación, ejecutar una función
específica, y se continuará con la ejecución de la función, una vez en cada intervalo de tiempo dado.

setInterval("javascript function",milliseconds);

El primer parámetro de la función setInterval () debe ser una función.

El segundo parámetro indica la longitud de los intervalos de tiempo entre cada ejecución.

Nota: Hay 1000 milisegundos en un segundo.

Ejemplo

Alerta "hola" cada 3 segundos:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3
seconds. This goes on forever...</p>
<button onclick="myFunction()">Try it</button>

El ejemplo que muestran cómo el método setInterval () funciona, pero no es muy probable que usted desea
alertar a un mensaje cada 3 segundos.
70

A continuación se muestra un ejemplo que muestra la hora actual. El método setInterval () se utiliza para
ejecutar la función una vez cada 1 segundo, al igual que un reloj digital.
Página
Ejemplo

Muestra la hora actual:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the current time.</p>
<button onclick="myFunction()">Try it</button>

function myTimer(){
var d=new Date();
var t=[Link]();
[Link]("demo").innerHTML=t;
}
</script>

Cómo detener la ejecución?

El método clearInterval () se utiliza para detener las ejecuciones posteriores de la función especificada en el
método setInterval ().

clearInterval(intervalVariable)

Para poder utilizar el clearInterval () método, debe utilizar una variable global al crear el método de intervalo:

myVar=setInterval("javascript function",milliseconds);

Entonces usted será capaz de detener la ejecución mediante una llamada al método clearInterval ().
71

Ejemplo
Página

El mismo ejemplo que el anterior, pero hemos añadido un "Stop the timer" botón:
<!DOCTYPE html>
<html>
<body>
<p>Click the first button to display the current time, and the second button to
top the time.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop time</button>

<script>
var myVar;

function myFunction(){
myVar=setInterval(function(){myTimer()},1000);
}

function myTimer(){
var d=new Date();
var t=[Link]();
[Link]("demo").innerHTML=t;
}

function myStopFunction(){
clearInterval(myVar);
}
</script>

El método setTimeout ()

setTimeout("javascript function",milliseconds);

El método setTimeout () esperará el número especificado de milisegundos, a continuación, ejecutar la función

especificada.

El primer parámetro de setTimeout () debe ser una función.

El segundo parámetro indica cuántos milisegundos, a partir de ahora, se desea ejecutar el primer parámetro.

Ejemplo
72

Espere 3 segundos y luego alertar "Hello":

Página
<!DOCTYPE html>
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<button onclick="myFunction()">Try it</button>

Cómo detener la ejecución?

El método clearTimeout () se utiliza para detener la ejecución de la función especificada en el método setTimeout
().

clearTimeout(timeoutVariable)

Para poder utilizar el método clearTimeout (), debe utilizar una variable global al crear el método de tiempo de
espera:

myVar=setTimeout("javascript function",milliseconds);

Entonces, si la función no ha allready en ejecución, usted será capaz de detener la ejecución mediante una
llamada al clearTimeout () método.

73
Página
Ejemplo

El mismo ejemplo que el anterior, pero hemos añadido un "Alto a la alerta" botón:

<!DOCTYPE html>
<html>
<body>
<p>Click the first button alert "Hello" after waiting 3 seconds.</p>
<p>Click the second button to prevent the first function to execute. (You must
click it before the 3 seconds are up.)</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the alert</button>

<script>
var myVar;

function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}

function myStopFunction(){
clearTimeout(myVar);
}
</script>
</body>
</html>

74
Página
JavaScript crear sus propios objetos
Los objetos son útiles para organizar la información.

Los objetos JavaScript

Al principio de este tutorial hemos visto que JavaScript tiene varios objetos integrados, como String, Date, Array,
etc. Además de estos objetos incorporados, también puede crear el suyo propio.

Vamos a ilustrar con un ejemplo: Una persona es un objeto. Las propiedades son los valores asociados con el
objeto. Las propiedades de las personas "incluir el nombre, la altura, el peso, la edad, el tono de piel, color de
ojos, etc Todas las personas tienen estas propiedades, pero los valores de estas propiedades difieren de persona
a persona. Métodos a las «personas podrían comer (), sleep (), el trabajo (), play (), etc

Propiedades

La sintaxis para acceder a una propiedad de un objeto es:

[Link]

Puede agregar propiedades a un objeto con sólo dar un valor. Suponga que la personObj ya existe - se puede dar
propiedades con nombre Nombre, apellido edad, color de ojos y de la siguiente manera:

[Link]="John";
[Link]="Doe";
[Link]=30;
[Link]="blue";
[Link]([Link]);

El código anterior genera el siguiente resultado:

John

Métodos

Un objeto también puede contener mé[Link] llamar a un método con la siguiente sintaxis:

[Link]()

Para llamar a un método llamado sleep () para el personObj:

[Link]();

Crear objetos propios

Hay diferentes maneras de crear un objeto nuevo:

1. Crear una instancia de un objeto directo

El siguiente código crea una nueva instancia de un objeto, y añade cuatro propiedades a la misma:

personObj=new Object();
[Link]="John";
75

[Link]="Doe";
[Link]=50;
Página

[Link]="blue";
sintaxis alternativa (mediante literales de objeto):

personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

Adición de un método para la personObj es también simple. El código siguiente añade un método llamado coma
() a la personObj:

[Link]=eat;

2. Crear un constructor de objetos

Cree una función que construir objetos:

function person(firstname,lastname,age,eyecolor){
[Link]=firstname;
[Link]=lastname;
[Link]=age;
[Link]=eyecolor;
}

Dentro de la función es necesario asignar a las cosas [Link]. La razón de todo el "esto" cosas es que
usted va a tener más de una persona a la vez (que la persona que está tratando debe ser claro). Eso es lo que es
"esto": la instancia del objeto en cuestión.

Una vez que tenga el constructor de objetos, puede crear nuevas instancias del objeto, así:

var myFather=new person("John","Doe",50,"blue");

var myMother=new person("Sally","Rally",48,"green");

Usted puede también agregar algunos métodos al objeto persona. Esto también se hace dentro de la función:

function person(firstname,lastname,age,eyecolor){
[Link]=firstname;
[Link]=lastname;
[Link]=age;
[Link]=eyecolor;
[Link]=newlastname;
}

Tenga en cuenta que los métodos son funciones inherentes a los objetos. Entonces tendremos que escribir el
newlastname () función:

function newlastname(new_lastname){
[Link]=new_lastname;
}

El newlastname () la función define a la persona de nuevo apellido y asigna dicho a la [Link] sabe
que la persona que está hablando con "esto".. Así pues, ahora usted puede escribir: [Link]
("DOE").
76
Página
Usted ha aprendido JavaScript y ahora qué?

Resumen de JavaScript

Este tutorial te ha enseñado cómo agregar JavaScript a las páginas HTML, para hacer su sitio web más dinámica
e interactiva. Ha aprendido a crear respuestas a los eventos, validar formularios y cómo hacer diferentes scripts
se ejecutan en respuesta a distintos escenarios.

También ha aprendido cómo crear y usar objetos, y cómo usar incorporados de JavaScript objetos.

Para obtener más información acerca de JavaScript, por favor vaya a ejemplos de JavaScript y nuestra referencia
de JavaScript .

Ahora ya saben JavaScript, ¿qué sigue?

El siguiente paso es aprender sobre el DOM HTML, jQuery y AJAX.

Si usted quiere aprender acerca de scripting del lado del servidor, el siguiente paso es aprender ASP o PHP.

HTML DOM

El DOM HTML define una manera estándar para acceder y manipular documentos HTML. El DOM HTML de la
plataforma y el lenguaje independiente y puede ser utilizado por cualquier lenguaje de programación como Java,
JavaScript y VBScript.

Si desea obtener más información acerca de la DOM, por favor visite nuestro tutorial DOM HTML .

jQuery

jQuery es una biblioteca JavaScript. jQuery simplifica enormemente la programación JavaScript.

Si desea obtener más información acerca de jQuery, por favor visite nuestro tutorial jQuery .

AJAX

AJAX = Asynchronous JavaScript y XML. AJAX no es un nuevo lenguaje de programación, sino una nueva forma
de utilizar las normas existentes.

AJAX es sobre el intercambio de datos con un servidor, y piezas de actualización de una página web - sin tener
que recargar toda la página.

Ejemplos de las aplicaciones que utilizan AJAX: Google Maps, Gmail, Youtube, Facebook y pestañas.

Si desea obtener más información acerca de AJAX, por favor visite nuestro tutorial AJAX .

ASP / PHP

Mientras que los scripts en un archivo HTML se ejecutan en el cliente (en el navegador), secuencias de comandos
en un archivo ASP / PHP se ejecutan en el servidor.

Con ASP / PHP dinámicamente puede editar, cambiar o añadir cualquier contenido de una página web, responder
a los datos enviados desde formularios HTML, acceder a los datos o bases de datos y devolver los resultados a
un navegador, personalizar una página Web para que sea más útil para los usuarios individuales.

Desde ASP / PHP se devuelven los archivos como HTML sin formato, se pueden ver en cualquier navegador.
77

Si desea obtener más información sobre ASP, por favor visite nuestro tutorial de ASP .
Página

Si desea obtener más información acerca de PHP, por favor visite nuestro tutorial de PHP .

También podría gustarte

Guía Básica de JavaScript en PDF
Aún no hay calificaciones
Guía Básica de JavaScript en PDF
21 páginas
Javascript
Aún no hay calificaciones
Javascript
32 páginas
Usos y fundamentos de JavaScript
Aún no hay calificaciones
Usos y fundamentos de JavaScript
30 páginas
Ventajas y Desventajas de JavaScript
Aún no hay calificaciones
Ventajas y Desventajas de JavaScript
32 páginas
JavaScript para Formularios y DOM
Aún no hay calificaciones
JavaScript para Formularios y DOM
26 páginas
Introducción a JavaScript y su uso
Aún no hay calificaciones
Introducción a JavaScript y su uso
78 páginas
Guía Completa del Curso de JavaScript
Aún no hay calificaciones
Guía Completa del Curso de JavaScript
44 páginas
Fundamentos de JavaScript para Web
Aún no hay calificaciones
Fundamentos de JavaScript para Web
11 páginas
Manejo Avanzado de JavaScript y DOM
Aún no hay calificaciones
Manejo Avanzado de JavaScript y DOM
7 páginas
Introducción a JavaScript en HTML
Aún no hay calificaciones
Introducción a JavaScript en HTML
28 páginas
Manual Práctico de JavaScript
Aún no hay calificaciones
Manual Práctico de JavaScript
23 páginas
JavaScript para Soluciones IoT
Aún no hay calificaciones
JavaScript para Soluciones IoT
21 páginas
Apuntes de Java Qué Es Javascript y Codigos
Aún no hay calificaciones
Apuntes de Java Qué Es Javascript y Codigos
4 páginas
Introducción a JavaScript en Web
Aún no hay calificaciones
Introducción a JavaScript en Web
11 páginas
Introducción a JavaScript y HTML
Aún no hay calificaciones
Introducción a JavaScript y HTML
18 páginas
INTRODUCCIÓN A JAVASRIPT 4ESO Navarro Santafe
Aún no hay calificaciones
INTRODUCCIÓN A JAVASRIPT 4ESO Navarro Santafe
6 páginas
JavaScript Interno: Uso de <script>
Aún no hay calificaciones
JavaScript Interno: Uso de <script>
4 páginas
Introducción a HTML y JavaScript
Aún no hay calificaciones
Introducción a HTML y JavaScript
44 páginas
Fundamentos de JavaScript y Sintaxis
Aún no hay calificaciones
Fundamentos de JavaScript y Sintaxis
20 páginas
Introducción a JavaScript: Historia y Uso
Aún no hay calificaciones
Introducción a JavaScript: Historia y Uso
35 páginas
Subpropiedades de JavaScript en GA4
Aún no hay calificaciones
Subpropiedades de JavaScript en GA4
25 páginas
Introducción a JavaScript y ECMAScript
Aún no hay calificaciones
Introducción a JavaScript y ECMAScript
22 páginas
Especificaciones de JavaScript y Eventos
Aún no hay calificaciones
Especificaciones de JavaScript y Eventos
23 páginas
Introducción a JavaScript en Web
Aún no hay calificaciones
Introducción a JavaScript en Web
10 páginas
Introducción a JavaScript para HTML
Aún no hay calificaciones
Introducción a JavaScript para HTML
5 páginas
Introducción a JavaScript para Web
Aún no hay calificaciones
Introducción a JavaScript para Web
46 páginas
Introducción a JavaScript y su uso
Aún no hay calificaciones
Introducción a JavaScript y su uso
7 páginas
Introducción a Javascript: Fundamentos Básicos
Aún no hay calificaciones
Introducción a Javascript: Fundamentos Básicos
90 páginas
Introducción a JavaScript y Páginas Dinámicas
Aún no hay calificaciones
Introducción a JavaScript y Páginas Dinámicas
17 páginas
Funciones en JavaScript: Ejemplos y Tipos
Aún no hay calificaciones
Funciones en JavaScript: Ejemplos y Tipos
18 páginas
UD 1. Lenguaje Html.
Aún no hay calificaciones
UD 1. Lenguaje Html.
9 páginas
Taller de JavaScript con Yuliana Jáuregui
Aún no hay calificaciones
Taller de JavaScript con Yuliana Jáuregui
61 páginas
Ejemplos de JavaScript con Botones
Aún no hay calificaciones
Ejemplos de JavaScript con Botones
4 páginas
Introducción a HTML, CSS y Javascript
Aún no hay calificaciones
Introducción a HTML, CSS y Javascript
9 páginas
Fundamentos de Javascript y HTML
Aún no hay calificaciones
Fundamentos de Javascript y HTML
28 páginas
Introducción a jQuery y JavaScript
Aún no hay calificaciones
Introducción a jQuery y JavaScript
13 páginas
Introducción a JavaScript: Conceptos Básicos
Aún no hay calificaciones
Introducción a JavaScript: Conceptos Básicos
15 páginas
Diseno de Paginas Web Semana 2
Aún no hay calificaciones
Diseno de Paginas Web Semana 2
6 páginas
Introducción a JavaScript en HTML
Aún no hay calificaciones
Introducción a JavaScript en HTML
30 páginas
Introducción a JavaScript y sus Fundamentos
Aún no hay calificaciones
Introducción a JavaScript y sus Fundamentos
18 páginas
Introducción al Lenguaje JavaScript
Aún no hay calificaciones
Introducción al Lenguaje JavaScript
32 páginas
Introducción a JavaScript y su uso
Aún no hay calificaciones
Introducción a JavaScript y su uso
46 páginas
Introducción a JavaScript y su Sintaxis
Aún no hay calificaciones
Introducción a JavaScript y su Sintaxis
27 páginas
Historia y funciones de JavaScript
Aún no hay calificaciones
Historia y funciones de JavaScript
3 páginas
Introducción a Javascript Básico
Aún no hay calificaciones
Introducción a Javascript Básico
24 páginas
Introducción a JavaScript y su Sintaxis
Aún no hay calificaciones
Introducción a JavaScript y su Sintaxis
5 páginas
PPT Unidad 05 Tema 13 2025 01 Arquitectura de Entornos Web (1802)
Aún no hay calificaciones
PPT Unidad 05 Tema 13 2025 01 Arquitectura de Entornos Web (1802)
21 páginas
Funciones en JavaScript: Guía de Laboratorio
Aún no hay calificaciones
Funciones en JavaScript: Guía de Laboratorio
21 páginas
Ejemplos Prácticos de JavaScript
Aún no hay calificaciones
Ejemplos Prácticos de JavaScript
16 páginas
Introducción a HTML, CSS y JavaScript
Aún no hay calificaciones
Introducción a HTML, CSS y JavaScript
6 páginas
Conceptos Básicos de JavaScript
Aún no hay calificaciones
Conceptos Básicos de JavaScript
44 páginas
Introducción a JavaScript para Programadores
Aún no hay calificaciones
Introducción a JavaScript para Programadores
44 páginas
Introducción a JavaScript y su Uso
Aún no hay calificaciones
Introducción a JavaScript y su Uso
103 páginas
Introducción a Javascript en HTML
Aún no hay calificaciones
Introducción a Javascript en HTML
62 páginas
Fundamentos de HTML, CSS y JavaScript
Aún no hay calificaciones
Fundamentos de HTML, CSS y JavaScript
19 páginas
Apunte 08
Aún no hay calificaciones
Apunte 08
8 páginas
Introducción a JavaScript en Web
Aún no hay calificaciones
Introducción a JavaScript en Web
18 páginas
07 Manual Basico Fotografia Movil XXXXXXXXX
Aún no hay calificaciones
07 Manual Basico Fotografia Movil XXXXXXXXX
11 páginas
10 Manual Organizacion Viajes
Aún no hay calificaciones
10 Manual Organizacion Viajes
11 páginas
07 Manual Basico Fotografia Movil
Aún no hay calificaciones
07 Manual Basico Fotografia Movil
11 páginas
Expansión de Base Espacial para Wild Space
Aún no hay calificaciones
Expansión de Base Espacial para Wild Space
4 páginas
Carcassonne Mini4 - MinasDeOro Reglas
Aún no hay calificaciones
Carcassonne Mini4 - MinasDeOro Reglas
2 páginas
Instrucciones para Carcassonne: Despachos
Aún no hay calificaciones
Instrucciones para Carcassonne: Despachos
2 páginas
Ejercicios Prácticos con OWASP ZAP
Aún no hay calificaciones
Ejercicios Prácticos con OWASP ZAP
15 páginas
Programa de Informática I - Ing. Química USFX
Aún no hay calificaciones
Programa de Informática I - Ing. Química USFX
8 páginas
Resumen de Javascript Esencial
Aún no hay calificaciones
Resumen de Javascript Esencial
56 páginas
Proyecto de Software: FoodHub App
Aún no hay calificaciones
Proyecto de Software: FoodHub App
24 páginas
IntegrarTEC 2.0 Plan de Estudios
Aún no hay calificaciones
IntegrarTEC 2.0 Plan de Estudios
2 páginas
Fundamentos de JavaScript para Web
Aún no hay calificaciones
Fundamentos de JavaScript para Web
22 páginas
Inventario de Computación Actualizado
Aún no hay calificaciones
Inventario de Computación Actualizado
60 páginas
Tutorial PDF de HTML5 Canvas
Aún no hay calificaciones
Tutorial PDF de HTML5 Canvas
3 páginas
Chuleta de JavaScript en PDF
0% (2)
Chuleta de JavaScript en PDF
3 páginas
Creación de Carrito de Compras en HTML
Aún no hay calificaciones
Creación de Carrito de Compras en HTML
2 páginas
Introducción a JavaScript y DOM
Aún no hay calificaciones
Introducción a JavaScript y DOM
46 páginas
Lenguajes del Lado del Cliente
Aún no hay calificaciones
Lenguajes del Lado del Cliente
5 páginas
Examen Parcial Aplicaciones Web 2024
Aún no hay calificaciones
Examen Parcial Aplicaciones Web 2024
8 páginas
Programación Visual y Lógica Condicional
Aún no hay calificaciones
Programación Visual y Lógica Condicional
11 páginas
Algoritmos y Programación para Estudiantes
Aún no hay calificaciones
Algoritmos y Programación para Estudiantes
32 páginas
Introducción a HTML, CSS, PHP y JavaScript
Aún no hay calificaciones
Introducción a HTML, CSS, PHP y JavaScript
3 páginas
Comparativa de Scanners con WAVSEP
Aún no hay calificaciones
Comparativa de Scanners con WAVSEP
12 páginas
Especificacion Funcional - 2
100% (1)
Especificacion Funcional - 2
42 páginas
Curso Completo de PHP, JS y MySQL
Aún no hay calificaciones
Curso Completo de PHP, JS y MySQL
46 páginas
Ejercicios Avanzados de HTML y CSS
Aún no hay calificaciones
Ejercicios Avanzados de HTML y CSS
7 páginas
Bootcamp JavaScript Full Stack en Kambcode
Aún no hay calificaciones
Bootcamp JavaScript Full Stack en Kambcode
16 páginas
Definición de desarrollo web
Aún no hay calificaciones
Definición de desarrollo web
2 páginas
Propiedades y Eventos de Controles Web ASP.NET
Aún no hay calificaciones
Propiedades y Eventos de Controles Web ASP.NET
16 páginas
Portal Web para Gestión de Eventos Deportivos
Aún no hay calificaciones
Portal Web para Gestión de Eventos Deportivos
110 páginas
Parámetros de Applet en GeoGebra
Aún no hay calificaciones
Parámetros de Applet en GeoGebra
50 páginas
Estructura de Proyecto Web en Ingeniería
Aún no hay calificaciones
Estructura de Proyecto Web en Ingeniería
5 páginas
Arquitectura de Software en Juegos Web
Aún no hay calificaciones
Arquitectura de Software en Juegos Web
28 páginas
Gestión de Incidencias TIC en DAW
Aún no hay calificaciones
Gestión de Incidencias TIC en DAW
2 páginas
Crear Una Cuenta - Testigos de Jehová
Aún no hay calificaciones
Crear Una Cuenta - Testigos de Jehová
11 páginas