SlideShare una empresa de Scribd logo
1 de 56
JavaScript Introducción

JavaScript es el lenguaje de programación más popular en Internet, y trabaja en todos los principales
navegadores, como Internet Explorer, Firefox, Chrome, Opera y Safari.

Lo que usted ya debe saber

Antes de continuar, debe tener una comprensión básica de lo siguiente:

       HTML y CSS

¿Qué es JavaScript?

       JavaScript se ha diseñado para añadir interactividad a las páginas HTML
       JavaScript es un lenguaje de scripting
       Un lenguaje de programación es un lenguaje de programación ligero
       JavaScript no está por lo general integrados directamente en páginas HTML
       JavaScript es un lenguaje interpretado (significa que las secuencias de comandos ejecutar sin
       recopilación preliminar)
       Todo el mundo puede usar JavaScript sin necesidad de adquirir una licencia

Java y JavaScript son lo mismo?

¡NO!

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

Java (desarrollado por Sun Microsystems) es un potente lenguaje de programación y mucho más
complejo - en la misma categoría como C y C + +.

¿Qué puede hacer JavaScript?

       JavaScript da a los diseñadores una herramienta de programación HTML - los autores
       de HTML no son normalmente los programadores, pero JavaScript es un lenguaje de script con
       una sintaxis muy simple! Casi cualquier persona puede poner pequeños "fragmentos" de
       código en sus páginas HTML
       JavaScript puede reaccionar a los acontecimientos - Un JavaScript puede ser
       configurado para ejecutarse cuando algo sucede, como cuando una página ha terminado de
       cargar o cuando un usuario hace clic en un elemento HTML
       JavaScript puede manipular elementos HTML - Un JavaScript puede leer y modificar el
       contenido de un elemento HTML
       JavaScript se puede utilizar para validar los datos - Un JavaScript se puede utilizar para
       validar la entrada de forma
       JavaScript puede ser utilizado para detectar el navegador del visitante - Un JavaScript
       puede ser utilizado para detectar el navegador del visitante, y - en función del navegador -
       cargar otra página diseñada específicamente para que el navegador
       JavaScript puede ser usado para crear las cookies - Un JavaScript puede ser usado para
       almacenar y recuperar información en la computadora del visitante

= JavaScript ECMAScript

JavaScript es una implementación del lenguaje estándar ECMAScript. ECMA-262 es el estándar oficial
de JavaScript.
JavaScript fue inventado por Brendan Eich en Netscape (con Navigator 2.0), y ha aparecido en todos
los navegadores desde 1996.

El oficial de normalización fue adoptada por la organización ECMA (Asociación estandarización de la
industria) en 1997.

El estándar ECMA (llamado ECMAScript-262) fue aprobado como norma internacional (ISO / IEC
16262) estándar en 1998.

El desarrollo está todavía en curso.

JavaScript Cómo

La etiqueta HTML <script> se utiliza para insertar un código JavaScript en un documento HTML.

El código HTML atributo "id" se utiliza para identificar los elementos HTML.

La manipulación de elementos HTML

JavaScript se utiliza normalmente para manipular elementos HTML existentes.

El código HTML atributo "id" se utiliza para identificar los elementos HTML.

Para acceder a un elemento HTML de un JavaScript, utilice el document.getElementById () método.

El document.getElementById () método se accede al elemento HTML con el id especificado.

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>
<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>

Ejemplo Explicación

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

Dentro de la etiqueta <script> utilizar el tipo de atributo para definir el lenguaje de scripting.

El <script> y </ script> dice que el código JavaScript se inicia y termina.

Las líneas entre el <script> y </ script> contiene el código JavaScript y son ejecutados por el
navegador:

<p id="demo">My First Paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

En este caso, el navegador acceder al elemento HTML con id = "demo", y sustituir el contenido con "Mi
primer JavaScript".

Algunos navegadores no soportan JavaScript

Los navegadores que no soporten JavaScript, mostrará JavaScript como el contenido de la página.

Para evitar que haciendo esto, y como parte del estándar de JavaScript, la etiqueta de comentario
HTML debe ser utilizado para "ocultar" el código JavaScript.

Sólo tiene que añadir una etiqueta de comentario HTML <- antes de la primera declaración de
JavaScript, y un -> (fin de comentario) después de la última declaración de JavaScript, de esta
manera:

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
<!--
document.getElementById("demo").innerHTML="My First JavaScript";
//-->
</script>
</body>
</html>

Las dos barras inclinadas al final de la línea de comentario (/ /) es el símbolo de comentario
JavaScript. Esto evita que se ejecute al activar - tag>.

Escribir directamente en el documento HTML

El siguiente ejemplo escribe un elemento <p> en el documento HTML:

Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html>

JavaScript Dónde

JavaScript se puede poner en el <body> y en las secciones <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>
<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>

Nota: El código JavaScript se coloca en la parte inferior de la página para asegurarse de que no se
ejecuta antes de que el elemento de <p> se crea.

JavaScript Funciones 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 JavaScript cuando ocurre un evento, como por ejemplo cuando un
usuario hace clic en un botón.

Luego ponemos el script dentro de una función .

Las funciones se utilizan normalmente en combinación con los eventos .

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

Funciones en JavaScript <head>

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

Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
document.getElementById("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>


Funciones en JavaScript <body>

Este ejemplo también llama a una función cuando un botón es pulsado, pero el guión se coloca en la
parte inferior de la página:

Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>


Secuencias de comandos en <head> y <body>

Usted puede colocar un número ilimitado de secuencias de comandos en el documento, y usted puede
tener secuencias de comandos en el cuerpo y la sección de la cabeza, al mismo tiempo.

Es una práctica común para poner todas las funciones en la sección de la cabeza, o en la parte inferior
de la página. De esta manera todos están en un lugar y de no interferir con el contenido de la página.

Usando un JavaScript externo

Activar también se puede colocar en archivos externos.

Archivos JavaScript externos a menudo contienen código que se utiliza en varias páginas del web.

Archivos JavaScript externos tienen la extensión. Js.

Nota: script externo no puede contener el <script> </ script> etiquetas!

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

Ejemplo
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="myScript.js"></script>
</body>
</html>

Nota: Usted puede colocar la secuencia de comandos en la cabeza o el cuerpo como quieras.

Nota: El script se comportará como se encuentra en el documento, exactamente donde usted lo pone.

JavaScript declaraciones

JavaScript es una secuencia de sentencias que se ejecutan en el navegador.

JavaScript es entre mayúsculas y minúsculas

A diferencia de HTML, JavaScript es sensible a mayúsculas - por lo tanto, ver su capitalización de
cerca al escribir sentencias JavaScript, crear o llamar a variables, objetos y funciones.
Las declaraciones de JavaScript

Una declaración de JavaScript es un comando a un navegador. El propósito de la orden es para decirle
al navegador qué hacer.

Esta declaración le dice al navegador JavaScript para escribir "Hello Dolly" a un elemento HTML:

document.getElementById("demo").innerHTML="Hello Dolly";

Es normal para añadir un punto y coma al final de cada instrucción ejecutable. Mucha gente piensa
que esto es una buena práctica de programación, y la mayoría de las veces usted verá esto en
ejemplos de JavaScript en la web.

El punto y coma es opcional (según el estándar de JavaScript), y el navegador se supone que debe
interpretar el final de la línea como el final de la instrucción. Por ello, es frecuente encontrar ejemplos,
sin el punto y coma al final.

Nota: Con punto y coma hace que sea posible escribir varias instrucciones en una línea.

JavaScript Code

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

Cada instrucción es ejecutada por el navegador en el orden en que están escritos.

En este ejemplo se va a manipular dos elementos HTML:

Ejemplo
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";

Los bloques de JavaScript

Sentencias de JavaScript se pueden agrupar en bloques.

Bloques de comenzar con una Llave izquierda {y terminan con una llave derecha}.

El propósito de un bloque es hacer que la secuencia de estados ejecutan conjuntamente.

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

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

Ejemplo
function myFunction()
{
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
}

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

JavaScript Comentarios
Comentarios de JavaScript se puede utilizar para hacer que el código sea más legible.

JavaScript Comentarios

Los comentarios no serán ejecutados por JavaScript.

Se pueden añadir comentarios para explicar el JavaScript, o para hacer que el código sea más legible.

Comentarios de una sola línea de salida con / /.

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

Ejemplo
// Write to a heading:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// Write to a paragraph:
document.getElementById("myP").innerHTML="This is my first paragraph.";


JavaScript comentarios de varias líneas

Comentarios multilínea empiezan con / * y terminan con * /.

El siguiente ejemplo se utiliza un comentario de múltiples líneas para explicar el código:

Ejemplo
/*
The code below will write
to a heading and to a paragraph,
and will represent the start of
my homepage:
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";

Uso de comentarios para evitar la ejecución

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

Ejemplo
//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";

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

Ejemplo
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/

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

Ejemplo
var x=5; // declare a variable and assign a value to it
x=x+2; // Add 2 to the variable x



JavaScript Variables

Las variables son "contenedores" para almacenar información.

¿Te acuerdas de Álgebra de la Escuela?

¿Te acuerdas de álgebra de la escuela? x = 5, y = 6, z = x + y

¿Te acuerdas que una carta (como x) se podría utilizar para mantener un valor (como 5), y que se
puede utilizar la información anterior para calcular el valor de z en el 11?

Estas cartas se llaman las variables y las variables pueden ser usados para sostener los valores (x =
5) o expresiones (z = x + y).

Las variables de JavaScript

Al igual que con el álgebra, las variables de JavaScript se utiliza para mantener los valores o
expresiones.

Una variable puede tener un nombre corto, como x, o un nombre más descriptivo, como carname.

Reglas para los nombres de JavaScript variables:

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

Nota: Debido a que JavaScript es sensible a mayúsculas, los nombres de variables distinguen entre
mayúsculas y minúsculas.

La declaración de (Crear) Las variables de JavaScript

Creación de una variable en JavaScript con mayor frecuencia se refiere como "declarar" una variable.

Usted declara variables de JavaScript con la var palabra clave:

var carname;

Después de la declaración se muestra más arriba, la variable está vacía (no tiene ningún valor aún).

Para asignar un valor a la variable, utilice el igual (=) Signo del zodiaco:

carname="Volvo";
Sin embargo, también puede asignar un valor a la variable cuando se declara:

var carname="Volvo";

Después de la ejecución de la sentencia anterior, el carname mantendrá el valor de Volvo .

Para escribir el valor dentro de un elemento HTML, simplemente se refieren a él utilizando su nombre
de la variable:

Ejemplo
var carname="Volvo";
document.getElementById("myP").innerHTML=carname;

Nota: Cuando se asigna un valor de texto a una variable, poner comillas alrededor del valor.

Nota: Cuando se asigna un valor numérico a una variable, no ponga las comillas que definen el valor,
si se pone comillas alrededor de un valor numérico, que será tratado como texto.

Nota: Si usted redeclare una variable de JavaScript, no perderá su valor.

Las variables locales de JavaScript

Una variable declarada dentro de una función de JavaScript se convierte LOCAL y sólo se puede
acceder 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 son reconocidos por la función en la que se declaran.

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

Usted aprenderá más acerca de las funciones en un capítulo posterior de este tutorial.

Variables globales de JavaScript

Las variables declaradas fuera de una función, se convierten en MUNDIAL , y todos los scripts y
funciones de la página web se puede acceder a él.

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

Asignación de valores a las variables no declaradas JavaScript

Si se asigna valores a las variables que aún no han sido declaradas, las variables de forma automática
será declarado como variables globales.

Esta declaración:

carname="Volvo";

se declare la variable carname como una variable global (si no existe ya).

JavaScript Aritmética
Al igual que con el álgebra, que se puede hacer operaciones aritméticas con variables de JavaScript:

Ejemplo
y=5;
x=y+2;

Usted aprenderá más acerca de los operadores que se pueden utilizar en el próximo capítulo de este
tutorial.

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

Asigne valores a las variables y los sumará:

y=5;
z=2;
x=y+z;

El resultado de x será:

7

JavaScript Operadores aritméticos

Los operadores aritméticos se utilizan para realizar operaciones aritméticas entre las variables y los
valores.

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


Operador     Descripción                       Ejemplo         Resultado de Resultado de Inténtelo
                                                               la x         la y
+            Adición                           x=y2            7               5               Pruébelo
                                                                                               »
-            Sustracción                       x = y-2         3               5               Pruébelo
                                                                                               »
*            Multiplicación                    x=y*2           10              5               Pruébelo
                                                                                               »
/            División                          x=y/2           2.5             5               Pruébelo
                                                                                               »
%            Módulo (resto de división)        x = y 2%        1               5               Pruébelo
                                                                                               »
++           Incremento                        x=++y           6               6               Pruébelo
»
                                               x=y++          5               6                Pruébelo
                                                                                               »
-            Disminuir                         x=-Y           4               4                Pruébelo
                                                                                               »
                                               x=y-           5               4                Pruébelo
                                                                                               »


JavaScript Operadores de asignación

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

Teniendo en cuenta que x = 10 y y = 5 , la siguiente tabla se explican los operadores de asignación:


Operador     Ejemplo                           Igual que            Resultado                  Inténtelo
=            x=y                                                    x=5                        Pruébelo
                                                                                               »
+=           x+=y                              x=x+y                x = 15                     Pruébelo
                                                                                               »
-=           x=y                               x = xy               x=5                        Pruébelo
                                                                                               »
*=           x*=y                              x=x*y                x = 50                     Pruébelo
                                                                                               »
/=           x/=y                              x=x/y                x=2                        Pruébelo
                                                                                               »
%=           %x=y                              x = x% y             x=0                        Pruébelo
                                                                                               »


El operador + utiliza en cadenas

El operador + también puede ser utilizado para agregar variables de cadena o valores de texto juntos.

Ejemplo

Para sumar dos o más variables de cadena en conjunto, utilice el operador +.

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

El resultado de txt3 será:

What a verynice day

Para agregar un espacio entre las dos cadenas, insertar un espacio en una de las cadenas:

Ejemplo
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

El resultado de txt3 será:

What a very nice day

o insertar un espacio en la expresión:

Ejemplo
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

El resultado de txt3 será:

What a very nice day

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
x=5+5;
y="5"+5;
z="Hello"+5;

El resultado de x , y , y z será:

10
55
Hello5

La regla es: Si se agrega un número y una cadena, el resultado será una cadena!

JavaScript Comparación y Operadores lógicos

Los operadores de comparación y lógicos se utilizan para probar la verdad o falsa .

Operadores de comparación

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

Teniendo en cuenta que x = 5 , la siguiente tabla se explican los operadores de comparación:


Operador        Descripción                              Comparando        Devoluciones     Inténtelo


==              es igual a                               x == 8            falso            Pruébelo
»


                                                          x == 5             verdadero        Pruébelo
                                                                                              »


===            es exactamente igual a (valor y tipo)      x === "5"          falso            Pruébelo
                                                                                              »


                                                          x 5 ===            verdadero        Pruébelo
                                                                                              »


!=             no es igual                                x! = 8             verdadero        Pruébelo
                                                                                              »


! ==           no es igual (ni el valor o tipo)           x! == "5"          verdadero        Pruébelo
                                                                                              »


                                                          x! == 5            falso            Pruébelo
                                                                                              »


>              es mayor que                               x> 8               falso            Pruébelo
                                                                                              »


<              es menor que                               x <8               verdadero        Pruébelo
                                                                                              »


>=             es mayor que o igual a                     x> = 8             falso            Pruébelo
                                                                                              »


<=             es menor o igual a                         x <= 8             verdadero        Pruébelo
                                                                                              »




¿Cómo puede ser utilizado

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

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


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

Operadores lógicos

Los operadores lógicos se utilizan para determinar la lógica entre las variables o valores.
Teniendo en cuenta que x = 6 yy = 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.

Sintaxis
variablename=(condition)?value1:value2

Ejemplo
Ejemplo

Si la variable 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á "Antiguo suficiente":

voteable=(age<18)?"Too young":"Old enough";

JavaScript IF ... ELSE declaraciones

Las instrucciones condicionales se usan para realizar diferentes acciones sobre la base de condiciones
diferentes.

Sentencias condicionales

Muy a menudo, al escribir el código, que desea llevar a cabo diferentes acciones para diferentes
decisiones. Puede utilizar instrucciones condicionales en el código para hacer esto.

En JavaScript tenemos las instrucciones condicionales siguientes:

        if - utilizar esta sentencia para ejecutar código si una condición especificada es verdadera
        si ... else - utilizar esta sentencia para ejecutar código si la condición es verdadera y el código
        de otra, si la condición es falsa
        si ... else if .... else - utilizar esta sentencia para seleccionar uno de los muchos bloques de
        código que se ejecutará
        sentencia switch - utilizar esta sentencia para seleccionar uno de los muchos bloques de
        código que se ejecutará

Si Declaración

Utilice la sentencia if para ejecutar un código si una condición especificada es verdadera.
Sintaxis
if (condition)
  {
  code to be executed if condition is true
  }


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

Ejemplo

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

if (time<20)
  {
  x="Good day";
  }


Tenga en cuenta que no hay otra cosa .. .. en esta sintaxis. Usted le dice al navegador para ejecutar
código sólo si la condición especificada es verdadera .

IF ... ELSE

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

Sintaxis
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 menos de las 20:00 horas, recibirá un "Buenos días" de saludo, de lo contrario
obtendrá un "Buenas tardes" saludo

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


El resultado de x será:

Good evening
Si ... else if ... else

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

Sintaxis
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 las 10:00, usted recibirá un "buenos días" de saludo, si no, pero el tiempo es
menos de las 20:00 horas, recibirá un "Buenos días" de saludo, de lo contrario obtendrá una buena "
por la noche "saludo:

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


El resultado de x será:

Good evening


Enlace aleatorio
En este ejemplo se va a escribir un enlace a cualquiera de W3Schools o para la Fundación Mundial
para la Naturaleza (WWF). Mediante el uso de un número aleatorio, hay una probabilidad de 50% para
cada uno de los enlaces.

<script type="text/javascript">
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="<a href='http://w3schools.com'>Visit W3Schools</a>";
}
else
{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>

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 los muchos bloques de código que se ejecutará.

Sintaxis
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 (con mayor frecuencia 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 existe una coincidencia, el bloque de código asociado a ese caso se
ejecuta. Utilice romper para evitar que el código se ejecute en el siguiente caso de forma automática.

Ejemplo

Mostrar de hoy día de la semana-nombre. Tenga en cuenta que Domingo = 0, lunes = 1, martes = 2,
etc:

var day=new Date().getDay();
switch (day)
{
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:
  x="Today it's Thursday";
  break;
case 5:
  x="Today it's Friday";
  break;
case 6:
  x="Today it's Saturday";
  break;
}


El resultado de x será:

Today it's Wednesday

La omisión de palabras clave

Utilice el valor predeterminado palabra clave para especificar qué hacer si no hay ninguna
coincidencia:

Ejemplo

Si no es sábado o domingo, a continuación, escribir un mensaje por defecto:

var day=new Date().getDay();
switch (day)
{
case 6:
  x="Today it's Saturday";
  break;
case 0:
  x="Today it's Sunday";
  break;
default:
  x="Looking forward to the Weekend";
}


El resultado de x será:

Looking forward to the Weekend

JavaScript Popup Cajas

JavaScript tiene tres tipos de cajas del popup: cuadro de alerta, el cuadro Confirmar, y la caja del
sistema.

Cuadro de alerta

Un cuadro de alerta se utiliza a menudo si usted quiere asegurarse que la información llega hasta el
usuario.

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

Sintaxis
alert("sometext");
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>
</html>

Confirme Caja

Una casilla de confirmación se utiliza a menudo si usted desea que el usuario verifique o aceptar algo.

Cuando una casilla de confirmación aparece, el usuario tendrá que haga clic en "Aceptar" o en
"Cancelar" para continuar.

Si el usuario hace clic en "Aceptar", la caja devuelve true. Si el usuario hace clic en "Cancelar", la caja
devuelve false.

Sintaxis
confirm("sometext");

Ejemplo
var r=confirm("Press a button");
if (r==true)
  {
  x="You pressed OK!";
  }
else
  {
  x="You pressed Cancel!";
  }

Caja del sistema

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

Cuando un cuadro de mensaje aparece, el usuario tendrá que haga clic en "Aceptar" o en "Cancelar"
para continuar después de entrar en un valor de entrada.

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

Sintaxis
prompt("sometext","defaultvalue");
Ejemplo
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
  {
  x="Hello " + name + "! How are you today?";
  }




Saltos de línea

Para ver los saltos de línea dentro de un cuadro emergente, utilice una barra invertida seguida de la n
de caracteres.

Ejemplo
alert("HellonHow are you?");

JavaScript Funciones

Una función puede ser ejecutado por un evento, como hacer clic en un botón.

Funciones JavaScript

Una función es un bloque de código que se ejecuta solamente cuando se lo dices a ejecutar.

Puede ser cuando ocurre 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 dentro de 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 los capitales en JavaScript! La palabra la función debe ser
escrito en letras 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 de exactamente la misma como en el
nombre de la función.

Ejemplo de la función JavaScript

Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</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 de JS Eventos.

Llamar a una función con argumentos

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

Estos argumentos se pueden utilizar 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
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script type="text/javascript">
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>


La función anterior le avisará "Bienvenido Harry Potter, el mago", cuando se pulsa el botón.

La función es flexible, puede llamar a la función con argumentos diferentes, y diferentes mensajes de
bienvenida se les dará:

Ejemplo
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<button onclick="myFunction('Bob','Builder')">Try it</button>


El ejemplo anterior alertar "Bienvenido Harry Potter, el mago" o "Bienvenido Bob, el Constructor",
dependiendo de qué botón se hace clic.

Funciones con un valor devuelto

A veces, usted quiere que su función para devolver un valor de vuelta a donde se hizo la llamada.

Esto es posible mediante el retorno comunicado.

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

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


La función anterior devolverá el valor 5.

Nota: No es el código JavaScript de todo el que se dejen de ejecutar, sólo la función. JavaScript
continuará la ejecución de código, donde la función de llamada se hizo a partir.

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

var myVar=myFunction();


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

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

document.getElementById("demo").innerHTML=myFunction();


El innerHTML de la "demo" de los elementos será de 5, que es lo que la función de "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 devolver el resultado:

function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
El innerHTML de la "demo" de los elementos serán:

12


La sentencia return se utiliza también cuando simplemente desea 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 ayb.

La duración de las variables de JavaScript

Si se declara una variable, el uso de "var", dentro de una función, la variable sólo se puede acceder
dentro de esa función. Al salir de la función, la variable se destruye. Estas variables se denominan
variables locales. Usted puede tener variables locales con el mismo nombre en diferentes funciones,
porque cada uno es reconocido sólo por la función en la que se declara.

Si se declara una variable fuera de una función, todas las funciones de la página se puede acceder a
él. La vida útil de estas variables se inicia cuando se declaran, y termina cuando la página está
cerrada.

JavaScript Para Loop

Para Loops se 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 agregar varias líneas casi iguales en una secuencia de comandos que puede
utilizar bucles para llevar a cabo una tarea como ésta.

En JavaScript, hay dos diferentes tipos de circuitos:

        para - bucles a través de un bloque de código un número determinado de veces
        al mismo tiempo - un bucle a través de un bloque de código mientras una condición
        especificada es verdadera

El bucle for

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

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

Ejemplo

El siguiente ejemplo define un ciclo que empieza con i = 0. El bucle continuará funcionando
mientrasi 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 negativo, y el <puede ser cualquier sentencia
comparar.

Ejemplo
for (i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br />";
  }

El bucle while

El bucle while se explicará en el próximo capítulo.

Bucle a través de títulos HTML
bucle a través de los seis títulos diferentes de HTML.

<button onclick="myFunction()">Try it</button>
<div id="demo"></div>
<script type="text/javascript">
function myFunction()
{
var x="",i;
for (i=1; i<=6; i++)
{
x=x + "<h" + i + ">Heading " + i + "</h" + i + ">";
}
document.getElementById("demo").innerHTML=x;
}
</script>

JavaScript While

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

El bucle while

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

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


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

El siguiente ejemplo define un ciclo que empieza con i = 0. El bucle continuará funcionando
mientrasi es menor que 5. i se incrementará en 1 cada vez que el bucle se ejecuta:

Ejemplo
while (i<5)
  {
  x=x + "The number is " + i + "<br />";
  i++;
  }


Nota: No se olvide de aumentar la i variable que se utiliza en el estado, de lo contrario yo siempre
será inferior a 5, y el bucle nunca terminará!

El do ... y Loop

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

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

Ejemplo

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

Ejemplo
do
  {
  x=x + "The number is " + i + "<br />";
  i++;
  }
while (i<5);


Nota: No se olvide de aumentar la i variable que se utiliza en el estado, de lo contrario yo siempre
será inferior a 5, y el bucle nunca terminará!

JavaScript break y continue Declaraciones

La sentencia break

La sentencia break se rompe el ciclo y continuar ejecutando el código que sigue después del bucle (si
existe).
Ejemplo
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br />";
  }

La sentencia continue

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

Ejemplo
for (i=0;i<=10;i++)
  {
  if (i==3)
    {
    continue;
    }
  x=x + "The number is " + i + "<br />";
  }
JavaScript Para ... En declaración

Para activar ... En la Declaración

El de ... en circuitos de declaración a través de las propiedades de un objeto.

Sintaxis
for (variable in object)
  {
  code to be executed
  }


Nota: El bloque de código dentro de la de ... en el bucle se ejecutará una vez para cada propiedad.

Ejemplo

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

Ejemplo
var person={fname:"John",lname:"Doe",age:25};

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

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 JavaScript.Por
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 HTML)
          Una página haya terminado de cargarse
          Una imagen se termina de cargar
          Moviendo el cursor del ratón sobre un elemento
          Introducción de un campo de entrada
          Envío de un formulario
          Un golpe de teclado

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

Los eventos se utiliza normalmente en combinación con funciones.

HTML atributos de eventos

Para asignar sucesos a los elementos HTML se pueden utilizar los atributos de eventos.

Para obtener una lista completa de todos los atributos de eventos disponibles, vaya a nuestroevento
de referencia completa .

Ejemplo

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

<button id="myBtn" onclick="displayDate()">Try it</button>

En el ejemplo anterior, una función llamada displayDate se ejecutará cuando se pulsa el botón.

Asignación de Uso de Eventos del DOM HTML

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

Ejemplo

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

<script type="text/javascript">

document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

En el ejemplo anterior, una función llamada displayDate se ejecutará cuando se pulsa el botón.

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 del visitante navegador y versión de
navegador y cargar la versión correcta de la página web sobre la base de la información.

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

Ejemplo
<body onload="checkCookies()" />

onfocus, onblur y onchange

Los eventos del onfocus, onblur y onchange 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 de 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 () la función
se llama cuando el usuario hace clic en el botón de enviar en el formulario. Si los valores de los
campos no son aceptadas, el submit se debe cancelar.

<form method="post" action="mySubmit.asp" onsubmit="checkForm()">

onmouseover, onmouseout

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

Ejemplo

Un simple onmouseover onmouseout-ejemplo:

                                             Mouse Over Me

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 el 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 ha
completado, el evento onclick se dispara.
Ejemplo

Un simple onmousedown-onmouseup ejemplo:

                                                Click Me

JavaScript Try ... Catch Declaración

El try ... catch le permite probar un bloque de código para los errores.

- Los errores de JavaScript Catching

Al navegar por páginas web en Internet, todos hemos visto a un cuadro de alerta JavaScript que nos
dice que hay un error de ejecución y preguntando "¿Desea realizar una depuración?". 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 dejan la página Web.

Este capítulo le enseñará cómo capturar y manejar mensajes de error de JavaScript, de modo que no
pierda su público.

El try ... catch

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

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


Tenga en cuenta que try ... catch se escribe en letras minúsculas. Uso de mayúsculas va a generar un
error de JavaScript!

Ejemplos

El siguiente ejemplo se supone que debe alertar a los "Bienvenido!" cuando se pulsa el botón. Sin
embargo, hay un error tipográfico en el mensaje de la función (). 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 type="text/javascript">
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.nn";
  txt+="Error description: " + err.message + "nn";
  txt+="Click OK to continue.nn";
  alert(txt);
  }
}
</script>
</head>

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

</html>


El siguiente ejemplo utiliza una caja 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 de confirmación devuelve false, el usuario hizo
clic en Cancelar, y el código redirige al usuario. Si el método de confirmación devuelve true, el código
no hace nada:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.nn";
  txt+="Click OK to continue viewing this page,n";
  txt+="or Cancel to return to the home page.nn";
  if(!confirm(txt))
    {
    document.location.href="http://www.w3schools.com/";
    }
  }
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>

La sentencia throw

La sentencia throw se puede utilizar junto con el try ... catch, para crear una excepción para el
error. Más información sobre la instrucción throw en el próximo capítulo.

JavaScript Lanza Declaración

La sentencia throw le permite crear una excepción.

La sentencia throw

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

Sintaxis
throw exception


La excepción puede ser una cadena, un entero, booleano o un objeto.

Tenga en cuenta que tiro está escrito en letras minúsculas. Uso de mayúsculas va a generar un error
de JavaScript!

Ejemplo

El ejemplo siguiente 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 capturada por el
argumento de la captura y el mensaje de error adecuado se muestra:

Ejemplo
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
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")
    {
    document.write("Error! The value is too high.");
    }
  if(err=="Err2")
    {
    document.write("Error! The value is too low.");
    }
  if(err=="Err3")
    {
    document.write("Error! The value is not a number.");
    }
  }
</script>
</body>
</html>

JavaScript Caracteres especiales

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

Insertar caracteres especiales

La barra invertida () se utiliza para insertar apóstrofes, nuevas líneas, citas 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.";
document.write(txt);

En JavaScript, una cadena que se inicia y se detiene, ya sea con comillas simples o dobles. Esto
significa que la cadena anterior se cortó a: Somos la llamada

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

var txt="We are the so-called "Vikings" from the north.";
document.write(txt);

Activar ahora la salida de la cadena de texto correcto: Somos los llamados "vikingos" desde el norte.

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


Código                       Salidas
'                           comilla simple
"                           comillas dobles
                           barra diagonal inversa
N                           nueva línea
R                           retorno de carro
T                           lengüeta
B                           tecla de retroceso
F                           formar alimentación



JavaScript Directrices

Algunas cosas importantes para saber cuando las secuencias de comandos con JavaScript.

JavaScript es entre mayúsculas y minúsculas

Una función denominada "MyFunction" no es lo mismo que "myFunction" y una variable denominada
"myVar" no es lo mismo que "mivar".

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

Espacio en blanco

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

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


Romper una línea de código

Usted puede romper una línea de código dentro de una cadena de texto con una barra invertida. El
siguiente ejemplo se mostrarán correctamente:

document.write("Hello 
World!");

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

document.write 
("Hello World!");


JavaScript Objetos Introducción

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

Un lenguaje de programación basado en 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 avanzada de
JavaScript. Vamos a empezar mirando a la incorporada en objetos JavaScript, y cómo se utilizan. En
las páginas siguientes se explica cada objeto incorporado en JavaScript en detalle.

Tenga en cuenta que un objeto es sólo 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 estamos usando la propiedad length del objeto String para devolver el número
de caracteres de una cadena:

<script type="text/javascript">
var txt="Hello World!";
document.write(txt.length);
</script>

La salida del código anterior será:

12


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:

<script type="text/javascript">
var str="Hello world!";
document.write(str.toUpperCase());
</script>

La salida del código anterior será:

HELLO WORLD!


JavaScript cadena de objetos

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

Devuelve la longitud de una cadena
Cómo devolver la longitud de una cadena.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var txt = "Hello World!";
document.write(txt.length);
</script>
</body>
</html>

Cadenas de estilo
Cómo cadenas de estilo.

<script type="text/javascript">
var txt = "Hello World!";
document.write("<p>Big: " + txt.big() + "</p>");
document.write("<p>Small: " + txt.small() + "</p>");
document.write("<p>Bold: " + txt.bold() + "</p>");
document.write("<p>Italic: " + txt.italics() + "</p>");
document.write("<p>Fixed: " + txt.fixed() + "</p>");
document.write("<p>Strike: " + txt.strike() + "</p>");
document.write("<p>Fontcolor: " + txt.fontcolor("green") + "</p>");
document.write("<p>Fontsize: " + txt.fontsize(6) + "</p>");
document.write("<p>Subscript: " + txt.sub() + "</p>");
document.write("<p>Superscript: " + txt.sup() + "</p>");
document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>");
document.write("<p>Blink: " + txt.blink() + " (does not work in IE, Chrome, or Safari)</p>");
</script>

El toLowerCase () y toUpperCase () los métodos de
Cómo convertir una cadena en minúsculas o mayúsculas.

<script type="text/javascript">
var txt="Hello World!";
document.write(txt.toLowerCase() + "<br />");
document.write(txt.toUpperCase());
</script>

El método match ()
¿Cómo buscar un valor especificado en una cadena.

<script type="text/javascript">
var str="Hello world!";
document.write(str.match("world") + "<br />");
document.write(str.match("World") + "<br />");
document.write(str.match("worlld") + "<br />");
document.write(str.match("world!"));
</script>

Reemplazar caracteres de una cadena - replace ()
Cómo reemplazar un valor especificado por otro valor en una cadena.

<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace("Microsoft","W3Schools");
document.getElementById("demo").innerHTML=n;
}
</script>

El método indexOf ()
¿Cómo devolver la posición de la primera aparición de encontrar un valor especificado en una cadena.

<script type="text/javascript">
function myFunction()
{
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
document.getElementById("demo").innerHTML=n;
}
</script>


Cadena completa referencia de objeto

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

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

Objeto String

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

Ejemplos de uso:

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

var txt="Hello world!";
document.write(txt.length);

El código anterior se traducirá en la siguiente salida:

12

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

var txt="Hello world!";
document.write(txt.toUpperCase());

El código anterior se traducirá en la siguiente salida:

HELLO WORLD!


JavaScript Fecha de objetos

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

Regresa la fecha actual y el tiempo
¿Cómo usar el Date () método para obtener la fecha de hoy.

<script type="text/javascript">
var d=new Date();
document.write(d);
</script>
getFullYear ()
Uso getFullYear () para obtener el año.

<script type="text/javascript">
function myFunction()
{
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.getFullYear();
}
</script>

getTime ()
getTime () devuelve el número de milisegundos desde 1/1/1970.

<script type="text/javascript">
function myFunction()
{
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.getTime();
}
</script>

setFullYear ()
Cómo utilizar setFullYear () para establecer una fecha específica.

<script type="text/javascript">
function myFunction()
{
var d = new Date();
d.setFullYear(2020,10,3);
var x = document.getElementById("demo");
x.innerHTML=d;
}
</script>

toUTCString ()
Cómo utilizar toUTCString () para convertir la fecha de hoy (según UTC) en una cadena.

<script type="text/javascript">
function myFunction()
{
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.toUTCString();
}
</script>

getDay ()
Uso getDay () y una gran variedad de escribir un día de semana, y no sólo un número.

<script type="text/javascript">
function myFunction()
{
var d = new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";

var x = document.getElementById("demo");
x.innerHTML=weekday[d.getDay()];
}
</script>

Muestra un reloj
¿Cómo mostrar un reloj en su página web.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

Crear un objeto Date

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

Fecha de objetos son creados 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, provoca 0 a pasar pulg

Una vez que un objeto Date se crea una serie de métodos le permiten operar en é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 milésimas de segundo de 01 de enero 1970 00:00:00 Tiempo
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)
var   d3 = new Date(79,5,24,11,33,0)

Establecer las fechas de

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

En el siguiente ejemplo se establece un objeto Date a una fecha concreta (14 de enero de 2010):

var myDate=new Date();
myDate.setFullYear(2010,0,14);


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

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);


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

Comparar dos fechas

El objeto Date se utiliza para comparar dos fechas.

El siguiente ejemplo se compara la fecha de hoy, con el 14 de enero 2100:

var x=new Date();
x.setFullYear(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");
  }

JavaScript array de objetos

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

Crear una matriz
Crear una matriz, asignar valores a ella, y escribir los valores en la salida.

<script type="text/javascript">
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />");
}
</script>


Gama completa referencia de objeto

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

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

¿Qué es un array?

Un arreglo 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 automóviles, 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 tres coches, pero 300?

La mejor solución es utilizar una matriz!

Una matriz puede contener todos los valores de las variables bajo un mismo nombre. Y usted puede
acceder a los valores por referencia al nombre del array.

Cada elemento de la matriz tiene su propia identificación, de modo que se puede acceder fácilmente.

Crear una matriz

Una matriz puede ser definida de tres maneras.
El siguiente código crea un objeto Array denominado myCars:

1:

var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab";       // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";


2:

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


3:

var myCars=["Saab","Volvo","BMW"]; // literal array


Nota: Si se especifica el número o los valores de verdadero / falso dentro de la matriz, entonces el
tipo de variable será el número o booleano, en lugar de cadena.

Acceso a una matriz

Puede referirse a un elemento particular en una matriz por referencia al nombre de la matriz y el
número de índice. El número de índice comienza en 0.

La siguiente línea de código:

document.write(myCars[0]);


resultará en el siguiente resultado:

Saab

Modificar los valores de una matriz

Para modificar un valor en una matriz existente, basta con añadir un nuevo valor a la matriz con un
número de índice especificado:

myCars[0]="Opel";


Ahora, la siguiente línea de código:

document.write(myCars[0]);


resultará en el siguiente resultado:

Opel

JavaScript Boolean Objeto

El objeto Boolean se utiliza para convertir un valor no-booleano en un valor booleano (verdadero o
falso).
Comprobar el valor de Boolean
Comprueba si un objeto booleano es verdadero o falso.

<script type="text/javascript">
var b1=new Boolean(0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");

document.write("0 is boolean "+ b1 +"<br />");
document.write("1 is boolean "+ b2 +"<br />");
document.write("An empty string is boolean "+ b3 + "<br />");
document.write("null is boolean "+ b4+ "<br />");
document.write("NaN is boolean "+ b5 +"<br />");
document.write("The string 'false' is boolean "+ b6 +"<br />");
</script>


Crear un objeto Boolean

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

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

var myBoolean=new Boolean();


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

        0
        -0
        nulo
        ""
        falso
        indefinido
        NaN

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

JavaScript objeto Math

El objeto Math le permite realizar tareas matemáticas.

round ()
Cómo utilizar round ().

<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML=Math.round(2.5);
}
</script>
random ()
Cómo utilizar random () para devolver un número aleatorio entre 0 y 1.

<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML=Math.random();
}
</script>

max ()
Cómo utilizar MAX () para devolver el número con el más alto valor de dos números especificados.

<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML=Math.max(5,10);
}
</script>

min ()
cómo se utiliza Min () para devolver el número con el valor más bajo de los dos números
especificados.

<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML=Math.min(5,10);
}
</script>

Matemáticas de objetos

El objeto Math le permite realizar tareas matemáticas.

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

Sintaxis para el uso de las propiedades y métodos de Matemáticas:

var x=Math.PI;
var y=Math.sqrt(16);


Nota: Las matemáticas no es un constructor. Todas las propiedades y métodos de Matemáticas se
puede llamar mediante el uso de matemáticas como un objeto sin crearla.

Constantes matemáticas

JavaScript dispone de ocho constantes matemáticas que se puede acceder desde el objeto Math.Estos
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 la E, y la base-10 de registro de E.

Usted puede hacer referencia a estas constantes desde el JavaScript de esta manera:

Math.E
Math.PI
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.

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

document.write(Math.round(4.7));


El código anterior se traducirá en la siguiente salida:

5


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

document.write(Math.random());


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

0.9232565215788782


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

document.write(Math.floor(Math.random()*11));


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

5

JavaScript RegExp objeto

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

¿Qué es RegExp?

Una expresión regular es un objeto que describe un patrón de caracteres.

Cuando usted busca en un texto, puede utilizar un modelo para describir lo que estás buscando.

Un modelo sencillo puede ser un solo carácter.

Un patrón más complicado puede constar de más caracteres, y puede ser utilizado para el análisis, la
comprobación de formato, sustitución y más.
Las expresiones regulares se utilizan para realizar poderosos de coincidencia de patrones y "buscar y
reemplazar" las funciones de texto.

Sintaxis
var patt=new RegExp(pattern,modifiers);

or more simply:

var patt=/pattern/modifiers;


           patrón especifica el patrón de una expresión
           modificadores de 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 mundial.

El modificador i se utiliza para realizar las mayúsculas y minúsculas coincidencia.

El modificador g se utiliza para realizar una comparación global (encontrar todas las coincidencias en
lugar de parar después de la primera coincidencia).

Ejemplo 1

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

var str="Visit W3Schools";
var patt1=/w3schools/i;


El marcado de texto a continuación muestra que la expresión obtiene un partido:

Visit W3Schools

Ejemplo 2

Haga una búsqueda mundial de "es":

var str="Is this all there is?";
var patt1=/is/g;


El marcado de texto a continuación muestra que la expresión obtiene un partido:

Is this all there is?

Ejemplo 3

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

var str="Is this all there is?";
var patt1=/is/gi;


El marcado de texto a continuación muestra que la expresión obtiene un partido:
Is this all there is?

test ()

El método de prueba () 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
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));


Dado que no hay una "e" de 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
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));


Dado que no hay una "e" de la cadena, la salida del código anterior será:

e

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 - sobre todo en los
navegadores más 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, la versión, y
mucho más.


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

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

Ejemplo
<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

JavaScript cookies

Una cookie a menudo se utiliza para identificar 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 mismos una página con un navegador, se enviará la cookie también. Con JavaScript, puede
tanto crear y recuperar los valores de cookie.

Ejemplos de cookies:

        Nombre de cookies - La primera vez que un visitante llega a su página web, él o ella debe
        llenar en su su / nombre. El nombre se almacena en una cookie. La próxima vez que el
        visitante llega a tu página, él o ella podría recibir un mensaje de bienvenida como "Pérez
        Bienvenido John!" El nombre se recupera de la cookie almacenada
        Fecha de galletas - La primera vez que un visitante llega a su página 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
        recibir un mensaje como "Su última visita fue el martes 11 de agosto de 2005!" La fecha se
        recupera de la cookie almacenada

Crear y guardar una cookie

En este ejemplo vamos a crear una cookie que almacena el nombre de un visitante. La primera vez
que un visitante llega a la página web, él o ella se le pedirá que llene en su su / nombre. El nombre se
almacena en una cookie. La próxima vez que el visitante llega a la misma página, él o ella recibirá el
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();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}


Los parámetros de la función por encima de mantener el nombre de la cookie, el valor de la cookie, y
el número de días hasta que la cookie expira.
En la función anterior por primera vez 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 eso se guarda el nombre de
la cookie, valor de la cookie y la fecha de caducidad en el objeto document.cookie.

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

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^s+|s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}


La función de arriba hace un arreglo para recuperar los nombres de las cookies y los valores, 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 usuario de 365 días, llamando 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 type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^s+|s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

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>
<body onload="checkCookie()">
</body>
</html>


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

Activar la validación de formularios

Activar la validación de formularios

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

Los datos del formulario que normalmente están controladas por un código JavaScript podría ser:
ha dejado que el usuario requiere campos vacíos?
        el usuario ha entrado en una dirección de e-mail?
        se ha introducido por el usuario una fecha válida?
        el usuario ha introducido 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 falso, y la forma no se presentará:

function validateForm()
{
var x=document.forms["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
<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>

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=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}


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

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

JavaScript eventos de temporización

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

Es muy fácil a los eventos de 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 métodos del objeto Window DOM HTML.

El método setInterval ()

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

Sintaxis
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 de "hola" cada 3 segundos:

setInterval(function(){alert("Hello")},3000);


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

A continuación se muestra un ejemplo que muestre 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.

Ejemplo

Muestra la hora actual:

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

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

Cómo detener la ejecución?

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

Sintaxis
clearInterval(intervalVariable)


Para poder utilizar el método clearInterval (), 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 ().

Ejemplo

El mismo ejemplo anterior, pero hemos añadido una "Detener el temporizador" botón:

var myVar;

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

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

function myStopFunction()
{
clearInterval(myVar);
}

El método setTimeout ()

Sintaxis
setTimeout("javascript function",milliseconds);


El método setTimeout () esperará el número especificado de milisegundos, y luego 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, que desea ejecutar el primer
parámetro.

Ejemplo

Espere 3 segundos, y luego alertar a "Hola":

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

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 ().

Sintaxis
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 que se está ejecutando, usted será capaz de detener la
ejecución mediante una llamada al método clearTimeout ().

Ejemplo

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

var myVar;

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

function myStopFunction()
{
clearTimeout(myVar);
}

JavaScript crear sus propios objetos

Los objetos son útiles para organizar la información.

Crear una instancia directa de un objeto

<script type="text/javascript">
personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(personObj.firstname + " is " + personObj.age + " years old.");
</script>
Crear una plantilla para un objeto

<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

Los objetos JavaScript

Anteriormente en este tutorial hemos visto que JavaScript tiene varios de los objetos incorporados,
como String, Date, Array, y mucho más. Además de estos objetos incorporados, también puede crear
el suyo propio.

Un objeto es un tipo especial de datos, con una colección de propiedades y métodos.

Vamos a ilustrar con un ejemplo: Una persona es un objeto. Las propiedades son los valores asociados
con el objeto. Propiedades de las personas de incluir el nombre, estatura, peso, edad, color de piel,
color de ojos, etc Todas las personas tienen estas propiedades, pero los valores de las propiedades
difieren de persona a persona. Los objetos también tienen métodos. Los métodos son las acciones que
se pueden realizar sobre los objetos. Los métodos de personas podrían comer (), sleep (), trabajo (),
play (), etc

Propiedades

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

objName.propName


Puede agregar propiedades a un objeto, simplemente dando un valor. Supongamos que el personObj
ya existe - se puede dar a las propiedades con nombre primer nombre, edad apellido, y color de ojos
de la siguiente manera:

personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";

document.write(personObj.firstname);


El código anterior genera el siguiente resultado:

John

Métodos

Un objeto también puede contener métodos.

Usted puede llamar a un método con la siguiente sintaxis:
objName.methodName()


Nota: Los parámetros requeridos para el método se puede pasar entre los paréntesis.

Para llamar a un método llamado sueño () para el personObj:

personObj.sleep();

Crear sus propios objetos

Hay diferentes maneras para crear un nuevo objeto:

1. Crear una instancia directa de un objeto

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

personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";


sintaxis alternativa (mediante literales de objetos):

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


Agregar un método a la personObj también es simple. El siguiente código añade un método llamado
eat () a la personObj:

personObj.eat=eat;


2. Crear un constructor de objetos

Cree una función que la construcción de objetos:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}


Dentro de la función que usted necesita para asignar cosas que this.propertyName. La razón de todo
el "este" material 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 la mano.

Una vez que el constructor de objetos, puede crear nuevas instancias del objeto, de esta manera:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
Usted puede también agregar algunos métodos para el objeto persona. Esto también se hace dentro
de la función:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.newlastname=newlastname;
}


Tenga en cuenta que los métodos son funciones asociadas a los objetos. A continuación, vamos a
tener que escribir el newlastname () la función:

function newlastname(new_lastname)
{
this.lastname=new_lastname;
}


El newlastname () la función define a la persona de nuevo apellido y le asigna que a la
persona.JavaScript sabe que la persona que está hablando con "esto".. Así pues, ahora usted puede
escribir: myMother.newlastname ("Pérez").

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
 
Todo Javascript para canibales
Todo Javascript para canibalesTodo Javascript para canibales
Todo Javascript para canibales
 
Java Script de canibaless
Java Script de canibalessJava Script de canibaless
Java Script de canibaless
 
Qué es html
Qué es htmlQué es html
Qué es html
 
Introduccion silverlight
Introduccion silverlightIntroduccion silverlight
Introduccion silverlight
 
Manual de java script practico
Manual de java script practicoManual de java script practico
Manual de java script practico
 
Buenas Prácticas de desarrollo en Ruby on Rails
Buenas Prácticas de desarrollo en Ruby on RailsBuenas Prácticas de desarrollo en Ruby on Rails
Buenas Prácticas de desarrollo en Ruby on Rails
 
Html5, css3, java script
Html5, css3, java scriptHtml5, css3, java script
Html5, css3, java script
 
Cómo hacer una página web básica
Cómo hacer una página web básicaCómo hacer una página web básica
Cómo hacer una página web básica
 
Asp
AspAsp
Asp
 
expo
expoexpo
expo
 
Javascript
JavascriptJavascript
Javascript
 
TEMA Nº 3: ELEMENTOS DE JSP
TEMA Nº 3: ELEMENTOS DE JSPTEMA Nº 3: ELEMENTOS DE JSP
TEMA Nº 3: ELEMENTOS DE JSP
 
Tutorial Javascript01
Tutorial Javascript01Tutorial Javascript01
Tutorial Javascript01
 
Clase 4 JavaScript Básico
Clase 4 JavaScript BásicoClase 4 JavaScript Básico
Clase 4 JavaScript Básico
 
Semana 2 Configuración entorno de desarrollo
Semana 2   Configuración entorno de desarrolloSemana 2   Configuración entorno de desarrollo
Semana 2 Configuración entorno de desarrollo
 

Destacado

JavaScript funciones
JavaScript funcionesJavaScript funciones
JavaScript funcionesjcremiro
 
Base de datos
Base de datosBase de datos
Base de datosdanicerv
 
Las funciones en JavaScript para la programación orientada a objetos
Las funciones en JavaScript para la programación orientada a objetosLas funciones en JavaScript para la programación orientada a objetos
Las funciones en JavaScript para la programación orientada a objetosFrancisco Javier Arce Anguiano
 
Base de Datos
Base de DatosBase de Datos
Base de DatosFRDO
 
Javascript 1
Javascript 1Javascript 1
Javascript 1Juan C
 
Numeros racionales
Numeros racionalesNumeros racionales
Numeros racionalesjcremiro
 
Abf leccion 17
Abf leccion 17Abf leccion 17
Abf leccion 17victdiazm
 
Contabilidad
ContabilidadContabilidad
ContabilidadWagnerfer
 
Ccna exploration routing_protocols_and_concepts_-_chapter_3_overview_es
Ccna exploration routing_protocols_and_concepts_-_chapter_3_overview_esCcna exploration routing_protocols_and_concepts_-_chapter_3_overview_es
Ccna exploration routing_protocols_and_concepts_-_chapter_3_overview_esvictdiazm
 
Reuniones internacionales de mujeres by eliud gamez
Reuniones internacionales de mujeres by eliud gamezReuniones internacionales de mujeres by eliud gamez
Reuniones internacionales de mujeres by eliud gamezEliud Gamez Gomez
 
Semana 10 -_managing_processes_guia_de_ejercicios_resuelta
Semana 10 -_managing_processes_guia_de_ejercicios_resueltaSemana 10 -_managing_processes_guia_de_ejercicios_resuelta
Semana 10 -_managing_processes_guia_de_ejercicios_resueltavictdiazm
 

Destacado (20)

JavaScript funciones
JavaScript funcionesJavaScript funciones
JavaScript funciones
 
Base de datos
Base de datosBase de datos
Base de datos
 
Las funciones en JavaScript para la programación orientada a objetos
Las funciones en JavaScript para la programación orientada a objetosLas funciones en JavaScript para la programación orientada a objetos
Las funciones en JavaScript para la programación orientada a objetos
 
Base de Datos
Base de DatosBase de Datos
Base de Datos
 
Javascript 1
Javascript 1Javascript 1
Javascript 1
 
Numeros racionales
Numeros racionalesNumeros racionales
Numeros racionales
 
Clase 23
Clase 23Clase 23
Clase 23
 
Linaramirez
LinaramirezLinaramirez
Linaramirez
 
Abf leccion 17
Abf leccion 17Abf leccion 17
Abf leccion 17
 
Conoce quienes votaron por la repartija en el congreso
Conoce quienes votaron por la repartija en el congresoConoce quienes votaron por la repartija en el congreso
Conoce quienes votaron por la repartija en el congreso
 
Curso básico intro
Curso básico introCurso básico intro
Curso básico intro
 
Contabilidad
ContabilidadContabilidad
Contabilidad
 
Clase 9
Clase 9Clase 9
Clase 9
 
Ccna exploration routing_protocols_and_concepts_-_chapter_3_overview_es
Ccna exploration routing_protocols_and_concepts_-_chapter_3_overview_esCcna exploration routing_protocols_and_concepts_-_chapter_3_overview_es
Ccna exploration routing_protocols_and_concepts_-_chapter_3_overview_es
 
Articles 172204 recurso-1
Articles 172204 recurso-1Articles 172204 recurso-1
Articles 172204 recurso-1
 
Reuniones internacionales de mujeres by eliud gamez
Reuniones internacionales de mujeres by eliud gamezReuniones internacionales de mujeres by eliud gamez
Reuniones internacionales de mujeres by eliud gamez
 
PROPUESTA DE NUEVO REGIMEN ESPECIAL DE LIMA .
PROPUESTA DE NUEVO REGIMEN ESPECIAL DE LIMA .PROPUESTA DE NUEVO REGIMEN ESPECIAL DE LIMA .
PROPUESTA DE NUEVO REGIMEN ESPECIAL DE LIMA .
 
Horarios 2013 segundo periodo 1
Horarios 2013 segundo periodo 1Horarios 2013 segundo periodo 1
Horarios 2013 segundo periodo 1
 
955 10 ojogorev42008espanhol
955 10 ojogorev42008espanhol955 10 ojogorev42008espanhol
955 10 ojogorev42008espanhol
 
Semana 10 -_managing_processes_guia_de_ejercicios_resuelta
Semana 10 -_managing_processes_guia_de_ejercicios_resueltaSemana 10 -_managing_processes_guia_de_ejercicios_resuelta
Semana 10 -_managing_processes_guia_de_ejercicios_resuelta
 

Similar a JS Intro (20)

2.1
2.12.1
2.1
 
Introducción a javascript
Introducción a javascriptIntroducción a javascript
Introducción a javascript
 
Guia JavaScript INCES Militar - Kurt Gude
Guia JavaScript INCES Militar - Kurt GudeGuia JavaScript INCES Militar - Kurt Gude
Guia JavaScript INCES Militar - Kurt Gude
 
Mod2ud1 1
Mod2ud1 1Mod2ud1 1
Mod2ud1 1
 
Javascript
JavascriptJavascript
Javascript
 
JAVASCRIP
JAVASCRIPJAVASCRIP
JAVASCRIP
 
Javascript
JavascriptJavascript
Javascript
 
Curso HTML 5 & jQuery - Leccion 11
 Curso HTML 5 & jQuery - Leccion 11 Curso HTML 5 & jQuery - Leccion 11
Curso HTML 5 & jQuery - Leccion 11
 
Tutorial Java Script
Tutorial Java ScriptTutorial Java Script
Tutorial Java Script
 
Lenguaje de programacion
Lenguaje de programacionLenguaje de programacion
Lenguaje de programacion
 
Desarrollo de página web dinámica
Desarrollo de página web dinámicaDesarrollo de página web dinámica
Desarrollo de página web dinámica
 
Js
JsJs
Js
 
Diseño web clase03
Diseño web clase03Diseño web clase03
Diseño web clase03
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javacript
JavacriptJavacript
Javacript
 
ProgramacióN Java Script
ProgramacióN Java ScriptProgramacióN Java Script
ProgramacióN Java Script
 

Más de victdiazm

Semana 2 y_3_-_file_ownerships_and_permissions
Semana 2 y_3_-_file_ownerships_and_permissionsSemana 2 y_3_-_file_ownerships_and_permissions
Semana 2 y_3_-_file_ownerships_and_permissionsvictdiazm
 
Semana 9 standard io and pipes guia de ejercicios resuelta
Semana 9   standard io and pipes  guia de ejercicios resueltaSemana 9   standard io and pipes  guia de ejercicios resuelta
Semana 9 standard io and pipes guia de ejercicios resueltavictdiazm
 
Semana 7 y 8 the linux filesystem guia de ejercicios resuelta
Semana 7 y 8   the linux filesystem guia de ejercicios resueltaSemana 7 y 8   the linux filesystem guia de ejercicios resuelta
Semana 7 y 8 the linux filesystem guia de ejercicios resueltavictdiazm
 
Semana 4 y 5 la shell bash guia de ejercicios resuelta
Semana 4 y 5  la shell bash guia de ejercicios resueltaSemana 4 y 5  la shell bash guia de ejercicios resuelta
Semana 4 y 5 la shell bash guia de ejercicios resueltavictdiazm
 
Semana 2 y 3 file ownerships and permissions guia de ejercicios resuelta
Semana 2 y 3   file ownerships and permissions guia de ejercicios resueltaSemana 2 y 3   file ownerships and permissions guia de ejercicios resuelta
Semana 2 y 3 file ownerships and permissions guia de ejercicios resueltavictdiazm
 
Semana 1 quick tours guia de ejercicios resuelta
Semana 1   quick tours guia de ejercicios resueltaSemana 1   quick tours guia de ejercicios resuelta
Semana 1 quick tours guia de ejercicios resueltavictdiazm
 
Semana 4 y_5_-_la_shell_bash
Semana 4 y_5_-_la_shell_bashSemana 4 y_5_-_la_shell_bash
Semana 4 y_5_-_la_shell_bashvictdiazm
 
Semana 2 y_3_-_file_ownerships_and_permissions
Semana 2 y_3_-_file_ownerships_and_permissionsSemana 2 y_3_-_file_ownerships_and_permissions
Semana 2 y_3_-_file_ownerships_and_permissionsvictdiazm
 
Semana 1 -_quick_tours_guia_de_ejercicios_resuelta
Semana 1 -_quick_tours_guia_de_ejercicios_resueltaSemana 1 -_quick_tours_guia_de_ejercicios_resuelta
Semana 1 -_quick_tours_guia_de_ejercicios_resueltavictdiazm
 
Semana 1 -_quick_tours
Semana 1 -_quick_toursSemana 1 -_quick_tours
Semana 1 -_quick_toursvictdiazm
 
Semana 16 usuarios y grupos
Semana 16 usuarios y gruposSemana 16 usuarios y grupos
Semana 16 usuarios y gruposvictdiazm
 
Semana 13 y 14 aplicaciones de redes
Semana 13 y 14 aplicaciones de redesSemana 13 y 14 aplicaciones de redes
Semana 13 y 14 aplicaciones de redesvictdiazm
 
Semana 12 filesystem basico
Semana 12  filesystem basicoSemana 12  filesystem basico
Semana 12 filesystem basicovictdiazm
 
Semana 10 administracion de procesos
Semana 10 administracion de procesosSemana 10 administracion de procesos
Semana 10 administracion de procesosvictdiazm
 
Semana 9 entradas salidas estandar y pipes
Semana 9 entradas salidas estandar y pipesSemana 9 entradas salidas estandar y pipes
Semana 9 entradas salidas estandar y pipesvictdiazm
 
Semana 8 herramientas de procesos de string
Semana 8  herramientas de procesos de stringSemana 8  herramientas de procesos de string
Semana 8 herramientas de procesos de stringvictdiazm
 
Semana 7 y 8 sistemas de archivos linux
Semana 7 y 8 sistemas de archivos linuxSemana 7 y 8 sistemas de archivos linux
Semana 7 y 8 sistemas de archivos linuxvictdiazm
 
Control1 victoria diaz
Control1   victoria diazControl1   victoria diaz
Control1 victoria diazvictdiazm
 

Más de victdiazm (20)

Semana 2 y_3_-_file_ownerships_and_permissions
Semana 2 y_3_-_file_ownerships_and_permissionsSemana 2 y_3_-_file_ownerships_and_permissions
Semana 2 y_3_-_file_ownerships_and_permissions
 
Semana 9 standard io and pipes guia de ejercicios resuelta
Semana 9   standard io and pipes  guia de ejercicios resueltaSemana 9   standard io and pipes  guia de ejercicios resuelta
Semana 9 standard io and pipes guia de ejercicios resuelta
 
Semana 7 y 8 the linux filesystem guia de ejercicios resuelta
Semana 7 y 8   the linux filesystem guia de ejercicios resueltaSemana 7 y 8   the linux filesystem guia de ejercicios resuelta
Semana 7 y 8 the linux filesystem guia de ejercicios resuelta
 
Semana 4 y 5 la shell bash guia de ejercicios resuelta
Semana 4 y 5  la shell bash guia de ejercicios resueltaSemana 4 y 5  la shell bash guia de ejercicios resuelta
Semana 4 y 5 la shell bash guia de ejercicios resuelta
 
Semana 2 y 3 file ownerships and permissions guia de ejercicios resuelta
Semana 2 y 3   file ownerships and permissions guia de ejercicios resueltaSemana 2 y 3   file ownerships and permissions guia de ejercicios resuelta
Semana 2 y 3 file ownerships and permissions guia de ejercicios resuelta
 
Semana 1 quick tours guia de ejercicios resuelta
Semana 1   quick tours guia de ejercicios resueltaSemana 1   quick tours guia de ejercicios resuelta
Semana 1 quick tours guia de ejercicios resuelta
 
Semana 4 y_5_-_la_shell_bash
Semana 4 y_5_-_la_shell_bashSemana 4 y_5_-_la_shell_bash
Semana 4 y_5_-_la_shell_bash
 
Semana 2 y_3_-_file_ownerships_and_permissions
Semana 2 y_3_-_file_ownerships_and_permissionsSemana 2 y_3_-_file_ownerships_and_permissions
Semana 2 y_3_-_file_ownerships_and_permissions
 
Semana 1 -_quick_tours_guia_de_ejercicios_resuelta
Semana 1 -_quick_tours_guia_de_ejercicios_resueltaSemana 1 -_quick_tours_guia_de_ejercicios_resuelta
Semana 1 -_quick_tours_guia_de_ejercicios_resuelta
 
Semana 1 -_quick_tours
Semana 1 -_quick_toursSemana 1 -_quick_tours
Semana 1 -_quick_tours
 
Semana 16 usuarios y grupos
Semana 16 usuarios y gruposSemana 16 usuarios y grupos
Semana 16 usuarios y grupos
 
Semana 13 y 14 aplicaciones de redes
Semana 13 y 14 aplicaciones de redesSemana 13 y 14 aplicaciones de redes
Semana 13 y 14 aplicaciones de redes
 
Semana 12 filesystem basico
Semana 12  filesystem basicoSemana 12  filesystem basico
Semana 12 filesystem basico
 
Semana 10 administracion de procesos
Semana 10 administracion de procesosSemana 10 administracion de procesos
Semana 10 administracion de procesos
 
Semana 9 entradas salidas estandar y pipes
Semana 9 entradas salidas estandar y pipesSemana 9 entradas salidas estandar y pipes
Semana 9 entradas salidas estandar y pipes
 
Semana 8 herramientas de procesos de string
Semana 8  herramientas de procesos de stringSemana 8  herramientas de procesos de string
Semana 8 herramientas de procesos de string
 
Semana 7 y 8 sistemas de archivos linux
Semana 7 y 8 sistemas de archivos linuxSemana 7 y 8 sistemas de archivos linux
Semana 7 y 8 sistemas de archivos linux
 
Script
ScriptScript
Script
 
Control1 victoria diaz
Control1   victoria diazControl1   victoria diaz
Control1 victoria diaz
 
Compresor
CompresorCompresor
Compresor
 

JS Intro

  • 1. JavaScript Introducción JavaScript es el lenguaje de programación más popular en Internet, y trabaja en todos los principales navegadores, como Internet Explorer, Firefox, Chrome, Opera y Safari. Lo que usted ya debe saber Antes de continuar, debe tener una comprensión básica de lo siguiente: HTML y CSS ¿Qué es JavaScript? JavaScript se ha diseñado para añadir interactividad a las páginas HTML JavaScript es un lenguaje de scripting Un lenguaje de programación es un lenguaje de programación ligero JavaScript no está por lo general integrados directamente en páginas HTML JavaScript es un lenguaje interpretado (significa que las secuencias de comandos ejecutar sin recopilación preliminar) Todo el mundo puede usar JavaScript sin necesidad de adquirir una licencia Java y JavaScript son lo mismo? ¡NO! Java y JavaScript son dos lenguajes completamente diferentes, tanto en el concepto y el diseño! Java (desarrollado por Sun Microsystems) es un potente lenguaje de programación y mucho más complejo - en la misma categoría como C y C + +. ¿Qué puede hacer JavaScript? JavaScript da a los diseñadores una herramienta de programación HTML - los autores de HTML no son normalmente los programadores, pero JavaScript es un lenguaje de script con una sintaxis muy simple! Casi cualquier persona puede poner pequeños "fragmentos" de código en sus páginas HTML JavaScript puede reaccionar a los acontecimientos - Un JavaScript puede ser configurado para ejecutarse cuando algo sucede, como cuando una página ha terminado de cargar o cuando un usuario hace clic en un elemento HTML JavaScript puede manipular elementos HTML - Un JavaScript puede leer y modificar el contenido de un elemento HTML JavaScript se puede utilizar para validar los datos - Un JavaScript se puede utilizar para validar la entrada de forma JavaScript puede ser utilizado para detectar el navegador del visitante - Un JavaScript puede ser utilizado para detectar el navegador del visitante, y - en función del navegador - cargar otra página diseñada específicamente para que el navegador JavaScript puede ser usado para crear las cookies - Un JavaScript puede ser usado para almacenar y recuperar información en la computadora del visitante = JavaScript ECMAScript JavaScript es una implementación del lenguaje estándar ECMAScript. ECMA-262 es el estándar oficial de JavaScript.
  • 2. JavaScript fue inventado por Brendan Eich en Netscape (con Navigator 2.0), y ha aparecido en todos los navegadores desde 1996. El oficial de normalización fue adoptada por la organización ECMA (Asociación estandarización de la industria) en 1997. El estándar ECMA (llamado ECMAScript-262) fue aprobado como norma internacional (ISO / IEC 16262) estándar en 1998. El desarrollo está todavía en curso. JavaScript Cómo La etiqueta HTML <script> se utiliza para insertar un código JavaScript en un documento HTML. El código HTML atributo "id" se utiliza para identificar los elementos HTML. La manipulación de elementos HTML JavaScript se utiliza normalmente para manipular elementos HTML existentes. El código HTML atributo "id" se utiliza para identificar los elementos HTML. Para acceder a un elemento HTML de un JavaScript, utilice el document.getElementById () método. El document.getElementById () método se accede al elemento HTML con el id especificado. 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> <script type="text/javascript"> document.getElementById("demo").innerHTML="My First JavaScript"; </script> </body> </html> Ejemplo Explicación Para insertar un archivo JavaScript en una página HTML, utilice la etiqueta <script>. Dentro de la etiqueta <script> utilizar el tipo de atributo para definir el lenguaje de scripting. El <script> y </ script> dice que el código JavaScript se inicia y termina. Las líneas entre el <script> y </ script> contiene el código JavaScript y son ejecutados por el navegador: <p id="demo">My First Paragraph.</p>
  • 3. <script type="text/javascript"> document.getElementById("demo").innerHTML="My First JavaScript"; </script> En este caso, el navegador acceder al elemento HTML con id = "demo", y sustituir el contenido con "Mi primer JavaScript". Algunos navegadores no soportan JavaScript Los navegadores que no soporten JavaScript, mostrará JavaScript como el contenido de la página. Para evitar que haciendo esto, y como parte del estándar de JavaScript, la etiqueta de comentario HTML debe ser utilizado para "ocultar" el código JavaScript. Sólo tiene que añadir una etiqueta de comentario HTML <- antes de la primera declaración de JavaScript, y un -> (fin de comentario) después de la última declaración de JavaScript, de esta manera: <!DOCTYPE html> <html> <body> <script type="text/javascript"> <!-- document.getElementById("demo").innerHTML="My First JavaScript"; //--> </script> </body> </html> Las dos barras inclinadas al final de la línea de comentario (/ /) es el símbolo de comentario JavaScript. Esto evita que se ejecute al activar - tag>. Escribir directamente en el documento HTML El siguiente ejemplo escribe un elemento <p> en el documento HTML: Ejemplo <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <script type="text/javascript"> document.write("<p>My First JavaScript</p>"); </script> </body> </html> JavaScript Dónde JavaScript se puede poner en el <body> y en las secciones <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
  • 4. <!DOCTYPE html> <html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <script type="text/javascript"> document.getElementById("demo").innerHTML="My First JavaScript"; </script> </body> </html> Nota: El código JavaScript se coloca en la parte inferior de la página para asegurarse de que no se ejecuta antes de que el elemento de <p> se crea. JavaScript Funciones 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 JavaScript cuando ocurre un evento, como por ejemplo cuando un usuario hace clic en un botón. Luego ponemos el script dentro de una función . Las funciones se utilizan normalmente en combinación con los eventos . Usted aprenderá más acerca de las funciones de JavaScript y eventos en los capítulos posteriores. Funciones en JavaScript <head> El siguiente ejemplo llama a una función cuando se hace clic en un botón: Ejemplo <!DOCTYPE html> <html> <head> <script type="text/javascript"> function myFunction() { document.getElementById("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> Funciones en JavaScript <body> Este ejemplo también llama a una función cuando un botón es pulsado, pero el guión se coloca en la parte inferior de la página: Ejemplo
  • 5. <!DOCTYPE html> <html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script type="text/javascript"> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script> </body> </html> Secuencias de comandos en <head> y <body> Usted puede colocar un número ilimitado de secuencias de comandos en el documento, y usted puede tener secuencias de comandos en el cuerpo y la sección de la cabeza, al mismo tiempo. Es una práctica común para poner todas las funciones en la sección de la cabeza, o en la parte inferior de la página. De esta manera todos están en un lugar y de no interferir con el contenido de la página. Usando un JavaScript externo Activar también se puede colocar en archivos externos. Archivos JavaScript externos a menudo contienen código que se utiliza en varias páginas del web. Archivos JavaScript externos tienen la extensión. Js. Nota: script externo no puede contener el <script> </ script> etiquetas! Para utilizar un script externo punto, en el archivo js en el atributo "src" de la etiqueta <script>.: Ejemplo <!DOCTYPE html> <html> <body> <script type="text/javascript" src="myScript.js"></script> </body> </html> Nota: Usted puede colocar la secuencia de comandos en la cabeza o el cuerpo como quieras. Nota: El script se comportará como se encuentra en el documento, exactamente donde usted lo pone. JavaScript declaraciones JavaScript es una secuencia de sentencias que se ejecutan en el navegador. JavaScript es entre mayúsculas y minúsculas A diferencia de HTML, JavaScript es sensible a mayúsculas - por lo tanto, ver su capitalización de cerca al escribir sentencias JavaScript, crear o llamar a variables, objetos y funciones.
  • 6. Las declaraciones de JavaScript Una declaración de JavaScript es un comando a un navegador. El propósito de la orden es para decirle al navegador qué hacer. Esta declaración le dice al navegador JavaScript para escribir "Hello Dolly" a un elemento HTML: document.getElementById("demo").innerHTML="Hello Dolly"; Es normal para añadir un punto y coma al final de cada instrucción ejecutable. Mucha gente piensa que esto es una buena práctica de programación, y la mayoría de las veces usted verá esto en ejemplos de JavaScript en la web. El punto y coma es opcional (según el estándar de JavaScript), y el navegador se supone que debe interpretar el final de la línea como el final de la instrucción. Por ello, es frecuente encontrar ejemplos, sin el punto y coma al final. Nota: Con punto y coma hace que sea posible escribir varias instrucciones en una línea. JavaScript Code El código JavaScript (o simplemente JavaScript) es una secuencia de sentencias de JavaScript. Cada instrucción es ejecutada por el navegador en el orden en que están escritos. En este ejemplo se va a manipular dos elementos HTML: Ejemplo document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; Los bloques de JavaScript Sentencias de JavaScript se pueden agrupar en bloques. Bloques de comenzar con una Llave izquierda {y terminan con una llave derecha}. El propósito de un bloque es hacer que la secuencia de estados ejecutan conjuntamente. Un ejemplo de los estados agrupados en bloques, son de JavaScript funciones . En este ejemplo se va a ejecutar una función que va a manipular dos elementos HTML: Ejemplo function myFunction() { document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; } Usted aprenderá más acerca de las funciones y condiciones en los capítulos posteriores. JavaScript Comentarios
  • 7. Comentarios de JavaScript se puede utilizar para hacer que el código sea más legible. JavaScript Comentarios Los comentarios no serán ejecutados por JavaScript. Se pueden añadir comentarios para explicar el JavaScript, o para hacer que el código sea más legible. Comentarios de una sola línea de salida con / /. El siguiente ejemplo utiliza los comentarios de una sola línea a explicar el código: Ejemplo // Write to a heading: document.getElementById("myH1").innerHTML="Welcome to my Homepage"; // Write to a paragraph: document.getElementById("myP").innerHTML="This is my first paragraph."; JavaScript comentarios de varias líneas Comentarios multilínea empiezan con / * y terminan con * /. El siguiente ejemplo se utiliza un comentario de múltiples líneas para explicar el código: Ejemplo /* The code below will write to a heading and to a paragraph, and will represent the start of my homepage: */ document.getElementById("myH1").innerHTML="Welcome to my Homepage"; document.getElementById("myP").innerHTML="This is my first paragraph."; Uso de comentarios para evitar la ejecución En el ejemplo siguiente, el comentario se utiliza para impedir la ejecución de una de las codelines (puede ser adecuado para la depuración): Ejemplo //document.getElementById("myH1").innerHTML="Welcome to my Homepage"; document.getElementById("myP").innerHTML="This is my first paragraph."; En el ejemplo siguiente, el comentario se utiliza para impedir la ejecución de un bloque de código (puede ser adecuado para la depuración): Ejemplo /* document.getElementById("myH1").innerHTML="Welcome to my Homepage"; document.getElementById("myP").innerHTML="This is my first paragraph."; */ Uso de comentarios al final de una línea
  • 8. En el ejemplo siguiente, el comentario se coloca al final de una línea de código: Ejemplo var x=5; // declare a variable and assign a value to it x=x+2; // Add 2 to the variable x JavaScript Variables Las variables son "contenedores" para almacenar información. ¿Te acuerdas de Álgebra de la Escuela? ¿Te acuerdas de álgebra de la escuela? x = 5, y = 6, z = x + y ¿Te acuerdas que una carta (como x) se podría utilizar para mantener un valor (como 5), y que se puede utilizar la información anterior para calcular el valor de z en el 11? Estas cartas se llaman las variables y las variables pueden ser usados para sostener los valores (x = 5) o expresiones (z = x + y). Las variables de JavaScript Al igual que con el álgebra, las variables de JavaScript se utiliza para mantener los valores o expresiones. Una variable puede tener un nombre corto, como x, o un nombre más descriptivo, como carname. Reglas para los nombres de JavaScript variables: Los nombres de variables distinguen entre mayúsculas y minúsculas (y e Y son dos variables diferentes) Los nombres de variables deben comenzar con una letra, el carácter $, o el carácter de subrayado Nota: Debido a que JavaScript es sensible a mayúsculas, los nombres de variables distinguen entre mayúsculas y minúsculas. La declaración de (Crear) Las variables de JavaScript Creación de una variable en JavaScript con mayor frecuencia se refiere como "declarar" una variable. Usted declara variables de JavaScript con la var palabra clave: var carname; Después de la declaración se muestra más arriba, la variable está vacía (no tiene ningún valor aún). Para asignar un valor a la variable, utilice el igual (=) Signo del zodiaco: carname="Volvo";
  • 9. Sin embargo, también puede asignar un valor a la variable cuando se declara: var carname="Volvo"; Después de la ejecución de la sentencia anterior, el carname mantendrá el valor de Volvo . Para escribir el valor dentro de un elemento HTML, simplemente se refieren a él utilizando su nombre de la variable: Ejemplo var carname="Volvo"; document.getElementById("myP").innerHTML=carname; Nota: Cuando se asigna un valor de texto a una variable, poner comillas alrededor del valor. Nota: Cuando se asigna un valor numérico a una variable, no ponga las comillas que definen el valor, si se pone comillas alrededor de un valor numérico, que será tratado como texto. Nota: Si usted redeclare una variable de JavaScript, no perderá su valor. Las variables locales de JavaScript Una variable declarada dentro de una función de JavaScript se convierte LOCAL y sólo se puede acceder 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 son reconocidos por la función en la que se declaran. Las variables locales se eliminan tan pronto como la función se ha completado. Usted aprenderá más acerca de las funciones en un capítulo posterior de este tutorial. Variables globales de JavaScript Las variables declaradas fuera de una función, se convierten en MUNDIAL , y todos los scripts y funciones de la página web se puede acceder a él. Las variables globales se eliminan al cerrar la página. Asignación de valores a las variables no declaradas JavaScript Si se asigna valores a las variables que aún no han sido declaradas, las variables de forma automática será declarado como variables globales. Esta declaración: carname="Volvo"; se declare la variable carname como una variable global (si no existe ya). JavaScript Aritmética
  • 10. Al igual que con el álgebra, que se puede hacer operaciones aritméticas con variables de JavaScript: Ejemplo y=5; x=y+2; Usted aprenderá más acerca de los operadores que se pueden utilizar en el próximo capítulo de este tutorial. 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 Asigne valores a las variables y los sumará: y=5; z=2; x=y+z; El resultado de x será: 7 JavaScript Operadores aritméticos Los operadores aritméticos se utilizan para realizar operaciones aritméticas entre las variables y los valores. Teniendo en cuenta que y = 5 , la siguiente tabla se explican los operadores aritméticos: Operador Descripción Ejemplo Resultado de Resultado de Inténtelo la x la y + Adición x=y2 7 5 Pruébelo » - Sustracción x = y-2 3 5 Pruébelo » * Multiplicación x=y*2 10 5 Pruébelo » / División x=y/2 2.5 5 Pruébelo » % Módulo (resto de división) x = y 2% 1 5 Pruébelo » ++ Incremento x=++y 6 6 Pruébelo
  • 11. » x=y++ 5 6 Pruébelo » - Disminuir x=-Y 4 4 Pruébelo » x=y- 5 4 Pruébelo » JavaScript Operadores de asignación Los operadores de asignación se utilizan para asignar valores a las variables de JavaScript. Teniendo en cuenta que x = 10 y y = 5 , la siguiente tabla se explican los operadores de asignación: Operador Ejemplo Igual que Resultado Inténtelo = x=y x=5 Pruébelo » += x+=y x=x+y x = 15 Pruébelo » -= x=y x = xy x=5 Pruébelo » *= x*=y x=x*y x = 50 Pruébelo » /= x/=y x=x/y x=2 Pruébelo » %= %x=y x = x% y x=0 Pruébelo » El operador + utiliza en cadenas El operador + también puede ser utilizado para agregar variables de cadena o valores de texto juntos. Ejemplo Para sumar dos o más variables de cadena en conjunto, utilice el operador +. txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; El resultado de txt3 será: What a verynice day Para agregar un espacio entre las dos cadenas, insertar un espacio en una de las cadenas: Ejemplo
  • 12. txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; El resultado de txt3 será: What a very nice day o insertar un espacio en la expresión: Ejemplo txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; El resultado de txt3 será: What a very nice day 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 x=5+5; y="5"+5; z="Hello"+5; El resultado de x , y , y z será: 10 55 Hello5 La regla es: Si se agrega un número y una cadena, el resultado será una cadena! JavaScript Comparación y Operadores lógicos Los operadores de comparación y lógicos se utilizan para probar la verdad o falsa . Operadores de comparación Los operadores de comparación se utilizan en los estados lógicos para determinar la igualdad o la diferencia entre las variables o valores. Teniendo en cuenta que x = 5 , la siguiente tabla se explican los operadores de comparación: Operador Descripción Comparando Devoluciones Inténtelo == es igual a x == 8 falso Pruébelo
  • 13. » x == 5 verdadero Pruébelo » === es exactamente igual a (valor y tipo) x === "5" falso Pruébelo » x 5 === verdadero Pruébelo » != no es igual x! = 8 verdadero Pruébelo » ! == no es igual (ni el valor o tipo) x! == "5" verdadero Pruébelo » x! == 5 falso Pruébelo » > es mayor que x> 8 falso Pruébelo » < es menor que x <8 verdadero Pruébelo » >= es mayor que o igual a x> = 8 falso Pruébelo » <= es menor o igual a x <= 8 verdadero Pruébelo » ¿Cómo puede ser utilizado Los operadores de comparación se pueden utilizar en sentencias condicionales para comparar valores y tomar medidas en función del resultado: if (age<18) x="Too young"; Usted aprenderá más sobre el uso de sentencias condicionales en el siguiente capítulo de este tutorial. Operadores lógicos Los operadores lógicos se utilizan para determinar la lógica entre las variables o valores.
  • 14. Teniendo en cuenta que x = 6 yy = 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. Sintaxis variablename=(condition)?value1:value2 Ejemplo Ejemplo Si la variable 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á "Antiguo suficiente": voteable=(age<18)?"Too young":"Old enough"; JavaScript IF ... ELSE declaraciones Las instrucciones condicionales se usan para realizar diferentes acciones sobre la base de condiciones diferentes. Sentencias condicionales Muy a menudo, al escribir el código, que desea llevar a cabo diferentes acciones para diferentes decisiones. Puede utilizar instrucciones condicionales en el código para hacer esto. En JavaScript tenemos las instrucciones condicionales siguientes: if - utilizar esta sentencia para ejecutar código si una condición especificada es verdadera si ... else - utilizar esta sentencia para ejecutar código si la condición es verdadera y el código de otra, si la condición es falsa si ... else if .... else - utilizar esta sentencia para seleccionar uno de los muchos bloques de código que se ejecutará sentencia switch - utilizar esta sentencia para seleccionar uno de los muchos bloques de código que se ejecutará Si Declaración Utilice la sentencia if para ejecutar un código si una condición especificada es verdadera.
  • 15. Sintaxis if (condition) { code to be executed if condition is true } Tenga en cuenta que si está escrito en letras minúsculas. Uso de letras mayúsculas (SI) generará un error de JavaScript! Ejemplo Haga un "Buenos días" saludo si el tiempo si es inferior a las 20:00: if (time<20) { x="Good day"; } Tenga en cuenta que no hay otra cosa .. .. en esta sintaxis. Usted le dice al navegador para ejecutar código sólo si la condición especificada es verdadera . IF ... ELSE Utilice la sentencia else si .... para ejecutar un código si una condición es verdadera y otro código si la condición no es cierto. Sintaxis 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 menos de las 20:00 horas, recibirá un "Buenos días" de saludo, de lo contrario obtendrá un "Buenas tardes" saludo if (time<20) { x="Good day"; } else { x="Good evening"; } El resultado de x será: Good evening
  • 16. Si ... else if ... else Utilice el si .... else if ... else para seleccionar uno de varios bloques de código que se ejecutará. Sintaxis 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 las 10:00, usted recibirá un "buenos días" de saludo, si no, pero el tiempo es menos de las 20:00 horas, recibirá un "Buenos días" de saludo, de lo contrario obtendrá una buena " por la noche "saludo: if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; } El resultado de x será: Good evening Enlace aleatorio En este ejemplo se va a escribir un enlace a cualquiera de W3Schools o para la Fundación Mundial para la Naturaleza (WWF). Mediante el uso de un número aleatorio, hay una probabilidad de 50% para cada uno de los enlaces. <script type="text/javascript"> var r=Math.random(); var x=document.getElementById("demo") if (r>0.5) { x.innerHTML="<a href='http://w3schools.com'>Visit W3Schools</a>"; }
  • 17. else { x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>"; } </script> 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 los muchos bloques de código que se ejecutará. Sintaxis 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 (con mayor frecuencia 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 existe una coincidencia, el bloque de código asociado a ese caso se ejecuta. Utilice romper para evitar que el código se ejecute en el siguiente caso de forma automática. Ejemplo Mostrar de hoy día de la semana-nombre. Tenga en cuenta que Domingo = 0, lunes = 1, martes = 2, etc: var day=new Date().getDay(); switch (day) { 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: x="Today it's Thursday"; break;
  • 18. case 5: x="Today it's Friday"; break; case 6: x="Today it's Saturday"; break; } El resultado de x será: Today it's Wednesday La omisión de palabras clave Utilice el valor predeterminado palabra clave para especificar qué hacer si no hay ninguna coincidencia: Ejemplo Si no es sábado o domingo, a continuación, escribir un mensaje por defecto: var day=new Date().getDay(); switch (day) { case 6: x="Today it's Saturday"; break; case 0: x="Today it's Sunday"; break; default: x="Looking forward to the Weekend"; } El resultado de x será: Looking forward to the Weekend JavaScript Popup Cajas JavaScript tiene tres tipos de cajas del popup: cuadro de alerta, el cuadro Confirmar, y la caja del sistema. Cuadro de alerta Un cuadro de alerta se utiliza a menudo si usted quiere asegurarse que la información llega hasta el usuario. Cuando aparece un cuadro de alerta, el usuario tendrá que hacer clic en "Aceptar" para continuar. Sintaxis alert("sometext");
  • 19. Ejemplo <!DOCTYPE html> <html> <head> <script type="text/javascript"> function myFunction() { alert("I am an alert box!"); } </script> </head> <body> <input type="button" onclick="myFunction()" value="Show alert box" /> </body> </html> Confirme Caja Una casilla de confirmación se utiliza a menudo si usted desea que el usuario verifique o aceptar algo. Cuando una casilla de confirmación aparece, el usuario tendrá que haga clic en "Aceptar" o en "Cancelar" para continuar. Si el usuario hace clic en "Aceptar", la caja devuelve true. Si el usuario hace clic en "Cancelar", la caja devuelve false. Sintaxis confirm("sometext"); Ejemplo var r=confirm("Press a button"); if (r==true) { x="You pressed OK!"; } else { x="You pressed Cancel!"; } Caja del sistema Un cuadro de mensaje se utiliza a menudo si usted desea que el usuario introduzca un valor antes de entrar en una página. Cuando un cuadro de mensaje aparece, el usuario tendrá que haga clic en "Aceptar" o en "Cancelar" para continuar después de entrar en un valor de entrada. Si el usuario hace clic en "Aceptar" del cuadro devuelve el valor de la entrada. Si el usuario hace clic en "Cancelar" la caja devuelve un valor nulo. Sintaxis prompt("sometext","defaultvalue");
  • 20. Ejemplo var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { x="Hello " + name + "! How are you today?"; } Saltos de línea Para ver los saltos de línea dentro de un cuadro emergente, utilice una barra invertida seguida de la n de caracteres. Ejemplo alert("HellonHow are you?"); JavaScript Funciones Una función puede ser ejecutado por un evento, como hacer clic en un botón. Funciones JavaScript Una función es un bloque de código que se ejecuta solamente cuando se lo dices a ejecutar. Puede ser cuando ocurre 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 dentro de 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 los capitales en JavaScript! La palabra la función debe ser escrito en letras 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 de exactamente la misma como en el nombre de la función. Ejemplo de la función JavaScript Ejemplo <!DOCTYPE html> <html> <head> <script type="text/javascript">
  • 21. function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">Try it</button> </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 de JS Eventos. Llamar a una función con argumentos Cuando se llama a una función, puede pasar a lo largo de algunos valores a la misma, estos valores se llaman argumentos o parámetros . Estos argumentos se pueden utilizar 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 <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <script type="text/javascript"> function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } </script> La función anterior le avisará "Bienvenido Harry Potter, el mago", cuando se pulsa el botón. La función es flexible, puede llamar a la función con argumentos diferentes, y diferentes mensajes de bienvenida se les dará: Ejemplo
  • 22. <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <button onclick="myFunction('Bob','Builder')">Try it</button> El ejemplo anterior alertar "Bienvenido Harry Potter, el mago" o "Bienvenido Bob, el Constructor", dependiendo de qué botón se hace clic. Funciones con un valor devuelto A veces, usted quiere que su función para devolver un valor de vuelta a donde se hizo la llamada. Esto es posible mediante el retorno comunicado. Cuando se utiliza el retorno de la declaración, la función dejará de ejecutarse, y devolver el valor especificado. Sintaxis function myFunction() { var x=5; return x; } La función anterior devolverá el valor 5. Nota: No es el código JavaScript de todo el que se dejen de ejecutar, sólo la función. JavaScript continuará la ejecución de código, donde la función de llamada se hizo a partir. La función de llamada será reemplazado por el returnvalue: var myVar=myFunction(); La variable myVar contiene el valor 5, que es lo que la función de "myFunction ()" devuelve. También puede utilizar el returnvalue sin almacenarlo en una variable: document.getElementById("demo").innerHTML=myFunction(); El innerHTML de la "demo" de los elementos será de 5, que es lo que la función de "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 devolver el resultado: function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3);
  • 23. El innerHTML de la "demo" de los elementos serán: 12 La sentencia return se utiliza también cuando simplemente desea 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 ayb. La duración de las variables de JavaScript Si se declara una variable, el uso de "var", dentro de una función, la variable sólo se puede acceder dentro de esa función. Al salir de la función, la variable se destruye. Estas variables se denominan variables locales. Usted puede tener variables locales con el mismo nombre en diferentes funciones, porque cada uno es reconocido sólo por la función en la que se declara. Si se declara una variable fuera de una función, todas las funciones de la página se puede acceder a él. La vida útil de estas variables se inicia cuando se declaran, y termina cuando la página está cerrada. JavaScript Para Loop Para Loops se 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 agregar varias líneas casi iguales en una secuencia de comandos que puede utilizar bucles para llevar a cabo una tarea como ésta. En JavaScript, hay dos diferentes tipos de circuitos: para - bucles a través de un bloque de código un número determinado de veces al mismo tiempo - un bucle a través de un bloque de código mientras una condición especificada es verdadera El bucle for El bucle se utiliza cuando se sabe de antemano cuántas veces la secuencia de comandos se debe ejecutar. Sintaxis for (variable=startvalue;variable<endvalue;variable=variable+increment) {
  • 24. code to be executed } Ejemplo El siguiente ejemplo define un ciclo que empieza con i = 0. El bucle continuará funcionando mientrasi 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 negativo, y el <puede ser cualquier sentencia comparar. Ejemplo for (i=0; i<5; i++) { x=x + "The number is " + i + "<br />"; } El bucle while El bucle while se explicará en el próximo capítulo. Bucle a través de títulos HTML bucle a través de los seis títulos diferentes de HTML. <button onclick="myFunction()">Try it</button> <div id="demo"></div> <script type="text/javascript"> function myFunction() { var x="",i; for (i=1; i<=6; i++) { x=x + "<h" + i + ">Heading " + i + "</h" + i + ">"; } document.getElementById("demo").innerHTML=x; } </script> JavaScript While Mientras Loops ejecutar un bloque de código mientras una condición especificada es verdadera. El bucle while Los bucles de bucle, mientras que a través de un bloque de código mientras una condición especificada sea verdadera. Sintaxis while (variable<endvalue) { code to be executed } Nota: El <podría ser cualquier operador de comparación.
  • 25. Ejemplo El siguiente ejemplo define un ciclo que empieza con i = 0. El bucle continuará funcionando mientrasi es menor que 5. i se incrementará en 1 cada vez que el bucle se ejecuta: Ejemplo while (i<5) { x=x + "The number is " + i + "<br />"; i++; } Nota: No se olvide de aumentar la i variable que se utiliza en el estado, de lo contrario yo siempre será inferior a 5, y el bucle nunca terminará! El do ... y Loop El do ... while es una variante del bucle while. Este bucle se ejecutará el bloque de código una sola vez, antes de verificar si la condición es verdadera, entonces se repetirá el bucle mientras la condición es verdadera. Sintaxis do { code to be executed } while (variable<endvalue); Ejemplo El ejemplo siguiente utiliza un do ... while. El hacer ... while se ejecutará siempre al menos una vez, incluso si la condición es falsa, porque las sentencias se ejecutan antes de que la condición se comprueba: Ejemplo do { x=x + "The number is " + i + "<br />"; i++; } while (i<5); Nota: No se olvide de aumentar la i variable que se utiliza en el estado, de lo contrario yo siempre será inferior a 5, y el bucle nunca terminará! JavaScript break y continue Declaraciones La sentencia break La sentencia break se rompe el ciclo y continuar ejecutando el código que sigue después del bucle (si existe).
  • 26. Ejemplo for (i=0;i<10;i++) { if (i==3) { break; } x=x + "The number is " + i + "<br />"; } La sentencia continue La sentencia continue se romperá la iteración actual del bucle y continuar con el siguiente valor. Ejemplo for (i=0;i<=10;i++) { if (i==3) { continue; } x=x + "The number is " + i + "<br />"; } JavaScript Para ... En declaración Para activar ... En la Declaración El de ... en circuitos de declaración a través de las propiedades de un objeto. Sintaxis for (variable in object) { code to be executed } Nota: El bloque de código dentro de la de ... en el bucle se ejecutará una vez para cada propiedad. Ejemplo Bucle a través de las propiedades de un objeto: Ejemplo var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; } JavaScript Eventos Los eventos son acciones que pueden ser detectados por JavaScript. Ejemplo
  • 27. 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 JavaScript.Por 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 HTML) Una página haya terminado de cargarse Una imagen se termina de cargar Moviendo el cursor del ratón sobre un elemento Introducción de un campo de entrada Envío de un formulario Un golpe de teclado Para ver todos los eventos reconocidos por JavaScript, vaya a nuestro evento de referencia completa . Los eventos se utiliza normalmente en combinación con funciones. HTML atributos de eventos Para asignar sucesos a los elementos HTML se pueden utilizar los atributos de eventos. Para obtener una lista completa de todos los atributos de eventos disponibles, vaya a nuestroevento de referencia completa . Ejemplo Asignar un evento onclick a un elemento de botón: <button id="myBtn" onclick="displayDate()">Try it</button> En el ejemplo anterior, una función llamada displayDate se ejecutará cuando se pulsa el botón. Asignación de Uso de Eventos del DOM HTML Puede asignar los eventos a los elementos HTML dentro de un script o una función: Ejemplo Asignar un evento onclick a un elemento de botón: <script type="text/javascript"> document.getElementById("myBtn").onclick=function(){displayDate()};
  • 28. </script> En el ejemplo anterior, una función llamada displayDate se ejecutará cuando se pulsa el botón. 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 del visitante navegador y versión de navegador y cargar la versión correcta de la página web sobre la base de la información. Los eventos onload y onunload se puede utilizar para hacer frente a las cookies. Ejemplo <body onload="checkCookies()" /> onfocus, onblur y onchange Los eventos del onfocus, onblur y onchange 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 de 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 () la función se llama cuando el usuario hace clic en el botón de enviar en el formulario. Si los valores de los campos no son aceptadas, el submit se debe cancelar. <form method="post" action="mySubmit.asp" onsubmit="checkForm()"> onmouseover, onmouseout Los eventos onmouseover y onmouseout se puede utilizar para activar una función cuando el usuario pasa el ratón por encima o fuera de, un elemento HTML. Ejemplo Un simple onmouseover onmouseout-ejemplo: Mouse Over Me 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 el 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 ha completado, el evento onclick se dispara.
  • 29. Ejemplo Un simple onmousedown-onmouseup ejemplo: Click Me JavaScript Try ... Catch Declaración El try ... catch le permite probar un bloque de código para los errores. - Los errores de JavaScript Catching Al navegar por páginas web en Internet, todos hemos visto a un cuadro de alerta JavaScript que nos dice que hay un error de ejecución y preguntando "¿Desea realizar una depuración?". 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 dejan la página Web. Este capítulo le enseñará cómo capturar y manejar mensajes de error de JavaScript, de modo que no pierda su público. El try ... catch El try ... catch le permite probar un bloque de código para los errores. El bloque try contiene el código para ser ejecutado, y el bloque catch contiene el código que se ejecutará si se produce un error. Sintaxis try { //Run some code here } catch(err) { //Handle errors here } Tenga en cuenta que try ... catch se escribe en letras minúsculas. Uso de mayúsculas va a generar un error de JavaScript! Ejemplos El siguiente ejemplo se supone que debe alertar a los "Bienvenido!" cuando se pulsa el botón. Sin embargo, hay un error tipográfico en el mensaje de la función (). 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 type="text/javascript"> var txt=""; function message()
  • 30. { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.nn"; txt+="Error description: " + err.message + "nn"; txt+="Click OK to continue.nn"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html> El siguiente ejemplo utiliza una caja 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 de confirmación devuelve false, el usuario hizo clic en Cancelar, y el código redirige al usuario. Si el método de confirmación devuelve true, el código no hace nada: Ejemplo <!DOCTYPE html> <html> <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.nn"; txt+="Click OK to continue viewing this page,n"; txt+="or Cancel to return to the home page.nn"; if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } } } </script> </head> <body>
  • 31. <input type="button" value="View message" onclick="message()" /> </body> </html> La sentencia throw La sentencia throw se puede utilizar junto con el try ... catch, para crear una excepción para el error. Más información sobre la instrucción throw en el próximo capítulo. JavaScript Lanza Declaración La sentencia throw le permite crear una excepción. La sentencia throw La sentencia throw le permite crear una excepción. Si se utiliza esta sentencia junto con el try ... catch, es posible controlar el flujo del programa y generar mensajes de error exactos. Sintaxis throw exception La excepción puede ser una cadena, un entero, booleano o un objeto. Tenga en cuenta que tiro está escrito en letras minúsculas. Uso de mayúsculas va a generar un error de JavaScript! Ejemplo El ejemplo siguiente 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 capturada por el argumento de la captura y el mensaje de error adecuado se muestra: Ejemplo <!DOCTYPE html> <html> <body> <script type="text/javascript"> 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"; } }
  • 32. catch(err) { if(err=="Err1") { document.write("Error! The value is too high."); } if(err=="Err2") { document.write("Error! The value is too low."); } if(err=="Err3") { document.write("Error! The value is not a number."); } } </script> </body> </html> JavaScript Caracteres especiales En JavaScript se pueden agregar caracteres especiales a una cadena de texto usando el signo de barra diagonal inversa. Insertar caracteres especiales La barra invertida () se utiliza para insertar apóstrofes, nuevas líneas, citas 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."; document.write(txt); En JavaScript, una cadena que se inicia y se detiene, ya sea con comillas simples o dobles. Esto significa que la cadena anterior se cortó a: Somos la llamada Para resolver este problema, debe colocar una barra invertida () antes de cada cita doble en el "Viking". Esto convierte cada comillas dobles en una cadena literal: var txt="We are the so-called "Vikings" from the north."; document.write(txt); Activar ahora la salida de la cadena de texto correcto: Somos los llamados "vikingos" desde el norte. La siguiente tabla enumera otros caracteres especiales que se pueden agregar a una cadena de texto con el signo de barra invertida: Código Salidas ' comilla simple " comillas dobles barra diagonal inversa
  • 33. N nueva línea R retorno de carro T lengüeta B tecla de retroceso F formar alimentación JavaScript Directrices Algunas cosas importantes para saber cuando las secuencias de comandos con JavaScript. JavaScript es entre mayúsculas y minúsculas Una función denominada "MyFunction" no es lo mismo que "myFunction" y una variable denominada "myVar" no es lo mismo que "mivar". JavaScript es sensible a mayúsculas - por lo tanto, ver su capitalización de cerca cuando se crea o llame a variables, objetos y funciones. Espacio en blanco JavaScript ignora los espacios adicionales. Usted puede agregar un espacio en blanco a su secuencia de comandos para que sea más legible. Las siguientes líneas son equivalentes: var name="Hege"; var name = "Hege"; Romper una línea de código Usted puede romper una línea de código dentro de una cadena de texto con una barra invertida. El siguiente ejemplo se mostrarán correctamente: document.write("Hello World!"); Sin embargo, no se puede romper una línea de código como este: document.write ("Hello World!"); JavaScript Objetos Introducción JavaScript es un lenguaje de programación basado en objetos. Un lenguaje de programación basado en 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.
  • 34. Sin embargo, crear sus propios objetos se explicará más adelante, en la sección avanzada de JavaScript. Vamos a empezar mirando a la incorporada en objetos JavaScript, y cómo se utilizan. En las páginas siguientes se explica cada objeto incorporado en JavaScript en detalle. Tenga en cuenta que un objeto es sólo 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 estamos usando la propiedad length del objeto String para devolver el número de caracteres de una cadena: <script type="text/javascript"> var txt="Hello World!"; document.write(txt.length); </script> La salida del código anterior será: 12 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: <script type="text/javascript"> var str="Hello world!"; document.write(str.toUpperCase()); </script> La salida del código anterior será: HELLO WORLD! JavaScript cadena de objetos El objeto String se utiliza para manipular una pieza de texto almacenados. Devuelve la longitud de una cadena Cómo devolver la longitud de una cadena. <!DOCTYPE html> <html> <body> <script type="text/javascript"> var txt = "Hello World!"; document.write(txt.length); </script> </body>
  • 35. </html> Cadenas de estilo Cómo cadenas de estilo. <script type="text/javascript"> var txt = "Hello World!"; document.write("<p>Big: " + txt.big() + "</p>"); document.write("<p>Small: " + txt.small() + "</p>"); document.write("<p>Bold: " + txt.bold() + "</p>"); document.write("<p>Italic: " + txt.italics() + "</p>"); document.write("<p>Fixed: " + txt.fixed() + "</p>"); document.write("<p>Strike: " + txt.strike() + "</p>"); document.write("<p>Fontcolor: " + txt.fontcolor("green") + "</p>"); document.write("<p>Fontsize: " + txt.fontsize(6) + "</p>"); document.write("<p>Subscript: " + txt.sub() + "</p>"); document.write("<p>Superscript: " + txt.sup() + "</p>"); document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>"); document.write("<p>Blink: " + txt.blink() + " (does not work in IE, Chrome, or Safari)</p>"); </script> El toLowerCase () y toUpperCase () los métodos de Cómo convertir una cadena en minúsculas o mayúsculas. <script type="text/javascript"> var txt="Hello World!"; document.write(txt.toLowerCase() + "<br />"); document.write(txt.toUpperCase()); </script> El método match () ¿Cómo buscar un valor especificado en una cadena. <script type="text/javascript"> var str="Hello world!"; document.write(str.match("world") + "<br />"); document.write(str.match("World") + "<br />"); document.write(str.match("worlld") + "<br />"); document.write(str.match("world!")); </script> Reemplazar caracteres de una cadena - replace () Cómo reemplazar un valor especificado por otro valor en una cadena. <button onclick="myFunction()">Try it</button> <script type="text/javascript"> function myFunction() { var str=document.getElementById("demo").innerHTML; var n=str.replace("Microsoft","W3Schools"); document.getElementById("demo").innerHTML=n; } </script> El método indexOf () ¿Cómo devolver la posición de la primera aparición de encontrar un valor especificado en una cadena. <script type="text/javascript">
  • 36. function myFunction() { var str="Hello world, welcome to the universe."; var n=str.indexOf("welcome"); document.getElementById("demo").innerHTML=n; } </script> Cadena completa referencia de objeto Para una referencia completa de todas las propiedades y métodos que pueden ser utilizados con el objeto String, vaya a nuestra referencia completa objeto String . La referencia contiene una breve descripción y ejemplos de uso para cada propiedad y método! Objeto String El objeto String se utiliza para manipular una pieza de texto almacenados. Ejemplos de uso: El siguiente ejemplo utiliza la propiedad length del objeto String para encontrar la longitud de una cadena: var txt="Hello world!"; document.write(txt.length); El código anterior se traducirá en la siguiente salida: 12 El siguiente ejemplo utiliza el método toUpperCase () del objeto String para convertir una cadena a mayúsculas: var txt="Hello world!"; document.write(txt.toUpperCase()); El código anterior se traducirá en la siguiente salida: HELLO WORLD! JavaScript Fecha de objetos El objeto Date se utiliza para trabajar con fechas y horas. Regresa la fecha actual y el tiempo ¿Cómo usar el Date () método para obtener la fecha de hoy. <script type="text/javascript"> var d=new Date(); document.write(d); </script>
  • 37. getFullYear () Uso getFullYear () para obtener el año. <script type="text/javascript"> function myFunction() { var d = new Date(); var x = document.getElementById("demo"); x.innerHTML=d.getFullYear(); } </script> getTime () getTime () devuelve el número de milisegundos desde 1/1/1970. <script type="text/javascript"> function myFunction() { var d = new Date(); var x = document.getElementById("demo"); x.innerHTML=d.getTime(); } </script> setFullYear () Cómo utilizar setFullYear () para establecer una fecha específica. <script type="text/javascript"> function myFunction() { var d = new Date(); d.setFullYear(2020,10,3); var x = document.getElementById("demo"); x.innerHTML=d; } </script> toUTCString () Cómo utilizar toUTCString () para convertir la fecha de hoy (según UTC) en una cadena. <script type="text/javascript"> function myFunction() { var d = new Date(); var x = document.getElementById("demo"); x.innerHTML=d.toUTCString(); } </script> getDay () Uso getDay () y una gran variedad de escribir un día de semana, y no sólo un número. <script type="text/javascript"> function myFunction() { var d = new Date(); var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday";
  • 38. weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; var x = document.getElementById("demo"); x.innerHTML=weekday[d.getDay()]; } </script> Muestra un reloj ¿Cómo mostrar un reloj en su página web. <!DOCTYPE html> <html> <head> <script type="text/javascript"> function startTime() { var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); // add a zero in front of numbers<10 m=checkTime(m); s=checkTime(s); document.getElementById('txt').innerHTML=h+":"+m+":"+s; t=setTimeout(function(){startTime()},500); } function checkTime(i) { if (i<10) { i="0" + i; } return i; } </script> </head> <body onload="startTime()"> <div id="txt"></div> </body> </html> Crear un objeto Date El objeto Date se utiliza para trabajar con fechas y horas. Fecha de objetos son creados 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
  • 39. 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, provoca 0 a pasar pulg Una vez que un objeto Date se crea una serie de métodos le permiten operar en é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 milésimas de segundo de 01 de enero 1970 00:00:00 Tiempo 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) var d3 = new Date(79,5,24,11,33,0) Establecer las fechas de Es fácil manipular a la fecha mediante el uso de los métodos disponibles para el objeto Date. En el siguiente ejemplo se establece un objeto Date a una fecha concreta (14 de enero de 2010): var myDate=new Date(); myDate.setFullYear(2010,0,14); Y en el siguiente ejemplo se establece un objeto Date a ser de 5 días en el futuro: var myDate=new Date(); myDate.setDate(myDate.getDate()+5); Nota: Si la adición de cinco días a una fecha cambia el mes o un año, los cambios se realizan automáticamente por el objeto Date sí mismo! Comparar dos fechas El objeto Date se utiliza para comparar dos fechas. El siguiente ejemplo se compara la fecha de hoy, con el 14 de enero 2100: var x=new Date(); x.setFullYear(2100,0,14); var today = new Date(); if (x>today) { alert("Today is before 14th January 2100"); } else {
  • 40. alert("Today is after 14th January 2100"); } JavaScript array de objetos El objeto Array se utiliza para almacenar varios valores en una sola variable. Crear una matriz Crear una matriz, asignar valores a ella, y escribir los valores en la salida. <script type="text/javascript"> var i; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (i=0;i<mycars.length;i++) { document.write(mycars[i] + "<br />"); } </script> Gama completa referencia de objeto Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto Array, vaya a nuestra referencia completa objeto Array . La referencia contiene una breve descripción y ejemplos de uso para cada propiedad y método! ¿Qué es un array? Un arreglo 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 automóviles, 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 tres coches, pero 300? La mejor solución es utilizar una matriz! Una matriz puede contener todos los valores de las variables bajo un mismo nombre. Y usted puede acceder a los valores por referencia al nombre del array. Cada elemento de la matriz tiene su propia identificación, de modo que se puede acceder fácilmente. Crear una matriz Una matriz puede ser definida de tres maneras.
  • 41. El siguiente código crea un objeto Array denominado myCars: 1: var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; myCars[2]="BMW"; 2: var myCars=new Array("Saab","Volvo","BMW"); // condensed array 3: var myCars=["Saab","Volvo","BMW"]; // literal array Nota: Si se especifica el número o los valores de verdadero / falso dentro de la matriz, entonces el tipo de variable será el número o booleano, en lugar de cadena. Acceso a una matriz Puede referirse a un elemento particular en una matriz por referencia al nombre de la matriz y el número de índice. El número de índice comienza en 0. La siguiente línea de código: document.write(myCars[0]); resultará en el siguiente resultado: Saab Modificar los valores de una matriz Para modificar un valor en una matriz existente, basta con añadir un nuevo valor a la matriz con un número de índice especificado: myCars[0]="Opel"; Ahora, la siguiente línea de código: document.write(myCars[0]); resultará en el siguiente resultado: Opel JavaScript Boolean Objeto El objeto Boolean se utiliza para convertir un valor no-booleano en un valor booleano (verdadero o falso).
  • 42. Comprobar el valor de Boolean Comprueba si un objeto booleano es verdadero o falso. <script type="text/javascript"> var b1=new Boolean(0); var b2=new Boolean(1); var b3=new Boolean(""); var b4=new Boolean(null); var b5=new Boolean(NaN); var b6=new Boolean("false"); document.write("0 is boolean "+ b1 +"<br />"); document.write("1 is boolean "+ b2 +"<br />"); document.write("An empty string is boolean "+ b3 + "<br />"); document.write("null is boolean "+ b4+ "<br />"); document.write("NaN is boolean "+ b5 +"<br />"); document.write("The string 'false' is boolean "+ b6 +"<br />"); </script> Crear un objeto Boolean El objeto Boolean representa dos valores: "true" o "falso". El siguiente código crea un objeto Boolean llamada miBooleano: var myBoolean=new Boolean(); Si el objeto booleano no tiene valor inicial, o si el valor pasado es uno de los siguientes: 0 -0 nulo "" falso indefinido NaN el objeto se establece en false. Para cualquier otro valor que se establece en true (incluso con la cadena "false")! JavaScript objeto Math El objeto Math le permite realizar tareas matemáticas. round () Cómo utilizar round (). <script type="text/javascript"> function myFunction() { document.getElementById("demo").innerHTML=Math.round(2.5); } </script>
  • 43. random () Cómo utilizar random () para devolver un número aleatorio entre 0 y 1. <script type="text/javascript"> function myFunction() { document.getElementById("demo").innerHTML=Math.random(); } </script> max () Cómo utilizar MAX () para devolver el número con el más alto valor de dos números especificados. <script type="text/javascript"> function myFunction() { document.getElementById("demo").innerHTML=Math.max(5,10); } </script> min () cómo se utiliza Min () para devolver el número con el valor más bajo de los dos números especificados. <script type="text/javascript"> function myFunction() { document.getElementById("demo").innerHTML=Math.min(5,10); } </script> Matemáticas de objetos El objeto Math le permite realizar tareas matemáticas. El objeto Math incluye varias constantes y métodos matemáticos. Sintaxis para el uso de las propiedades y métodos de Matemáticas: var x=Math.PI; var y=Math.sqrt(16); Nota: Las matemáticas no es un constructor. Todas las propiedades y métodos de Matemáticas se puede llamar mediante el uso de matemáticas como un objeto sin crearla. Constantes matemáticas JavaScript dispone de ocho constantes matemáticas que se puede acceder desde el objeto Math.Estos 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 la E, y la base-10 de registro de E. Usted puede hacer referencia a estas constantes desde el JavaScript de esta manera: Math.E Math.PI Math.SQRT2
  • 44. 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. El siguiente ejemplo utiliza el método round () del objeto Math para redondear un número al entero más cercano: document.write(Math.round(4.7)); El código anterior se traducirá en la siguiente salida: 5 El siguiente ejemplo utiliza el método aleatorio () del objeto Math para devolver un número aleatorio entre 0 y 1: document.write(Math.random()); El código anterior puede resultar en la siguiente salida: 0.9232565215788782 El siguiente ejemplo utiliza los métodos de piso () y random () del objeto Math para devolver un número aleatorio entre 0 y 10: document.write(Math.floor(Math.random()*11)); El código anterior puede resultar en la siguiente salida: 5 JavaScript RegExp objeto RegExp, es la abreviatura de la expresión regular. ¿Qué es RegExp? Una expresión regular es un objeto que describe un patrón de caracteres. Cuando usted busca en un texto, puede utilizar un modelo para describir lo que estás buscando. Un modelo sencillo puede ser un solo carácter. Un patrón más complicado puede constar de más caracteres, y puede ser utilizado para el análisis, la comprobación de formato, sustitución y más.
  • 45. Las expresiones regulares se utilizan para realizar poderosos de coincidencia de patrones y "buscar y reemplazar" las funciones de texto. Sintaxis var patt=new RegExp(pattern,modifiers); or more simply: var patt=/pattern/modifiers; patrón especifica el patrón de una expresión modificadores de 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 mundial. El modificador i se utiliza para realizar las mayúsculas y minúsculas coincidencia. El modificador g se utiliza para realizar una comparación global (encontrar todas las coincidencias en lugar de parar después de la primera coincidencia). Ejemplo 1 Realice una búsqueda entre mayúsculas y minúsculas para "w3schools" en una cadena: var str="Visit W3Schools"; var patt1=/w3schools/i; El marcado de texto a continuación muestra que la expresión obtiene un partido: Visit W3Schools Ejemplo 2 Haga una búsqueda mundial de "es": var str="Is this all there is?"; var patt1=/is/g; El marcado de texto a continuación muestra que la expresión obtiene un partido: Is this all there is? Ejemplo 3 Hacer un mundial, las mayúsculas y minúsculas búsqueda de "es": var str="Is this all there is?"; var patt1=/is/gi; El marcado de texto a continuación muestra que la expresión obtiene un partido:
  • 46. Is this all there is? test () El método de prueba () 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 var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); Dado que no hay una "e" de 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 var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free")); Dado que no hay una "e" de la cadena, la salida del código anterior será: e 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 - sobre todo en los navegadores más 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, la versión, y mucho más. Nota: No existe una norma pública que se aplica al navegador de objetos, pero todos los principales navegadores lo apoyan. El objeto navigator
  • 47. El objeto navigator contiene toda la información sobre el navegador del visitante: Ejemplo <div id="example"></div> <script type="text/javascript"> txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Browser Name: " + navigator.appName + "</p>"; txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt+= "<p>Platform: " + navigator.platform + "</p>"; txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; document.getElementById("example").innerHTML=txt; </script> JavaScript cookies Una cookie a menudo se utiliza para identificar 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 mismos una página con un navegador, se enviará la cookie también. Con JavaScript, puede tanto crear y recuperar los valores de cookie. Ejemplos de cookies: Nombre de cookies - La primera vez que un visitante llega a su página web, él o ella debe llenar en su su / nombre. El nombre se almacena en una cookie. La próxima vez que el visitante llega a tu página, él o ella podría recibir un mensaje de bienvenida como "Pérez Bienvenido John!" El nombre se recupera de la cookie almacenada Fecha de galletas - La primera vez que un visitante llega a su página 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 recibir un mensaje como "Su última visita fue el martes 11 de agosto de 2005!" La fecha se recupera de la cookie almacenada Crear y guardar una cookie En este ejemplo vamos a crear una cookie que almacena el nombre de un visitante. La primera vez que un visitante llega a la página web, él o ella se le pedirá que llene en su su / nombre. El nombre se almacena en una cookie. La próxima vez que el visitante llega a la misma página, él o ella recibirá el 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(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; } Los parámetros de la función por encima de mantener el nombre de la cookie, el valor de la cookie, y el número de días hasta que la cookie expira.
  • 48. En la función anterior por primera vez 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 eso se guarda el nombre de la cookie, valor de la cookie y la fecha de caducidad en el objeto document.cookie. Entonces, creamos otra función que devuelve un cookie especificada: function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^s+|s+$/g,""); if (x==c_name) { return unescape(y); } } } La función de arriba hace un arreglo para recuperar los nombres de las cookies y los valores, 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 usuario de 365 días, llamando 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 type="text/javascript"> function getCookie(c_name) {
  • 49. var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^s+|s+$/g,""); if (x==c_name) { return unescape(y); } } } function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; } 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> <body onload="checkCookie()"> </body> </html> El ejemplo anterior se ejecuta la función checkCookie () cuando se carga la página. Activar la validación de formularios Activar la validación de formularios JavaScript se puede utilizar para validar los datos en los formularios HTML antes de enviar el contenido a un servidor. Los datos del formulario que normalmente están controladas por un código JavaScript podría ser:
  • 50. ha dejado que el usuario requiere campos vacíos? el usuario ha entrado en una dirección de e-mail? se ha introducido por el usuario una fecha válida? el usuario ha introducido 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 falso, y la forma no se presentará: function validateForm() { var x=document.forms["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 <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> 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=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; } } La función anterior podría ser llamada cuando se envía un formulario: Ejemplo
  • 51. <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> Email: <input type="text" name="email"> <input type="submit" value="Submit"> </form> JavaScript eventos de temporización Con JavaScript, es posible ejecutar código en intervalos de tiempo especificados. Esto se conoce como eventos de tiempo. Es muy fácil a los eventos de 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 métodos del objeto Window DOM HTML. El método setInterval () El método setInterval () esperará un número especificado de milisegundos, y luego ejecutar una función específica, y se continuará con la ejecución de la función, una vez en cada intervalo de tiempo determinado. Sintaxis 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 de "hola" cada 3 segundos: setInterval(function(){alert("Hello")},3000); El ejemplo que muestran cómo el método setInterval () funciona, pero no es muy probable que usted desea para alertar a un mensaje cada 3 segundos. A continuación se muestra un ejemplo que muestre 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. Ejemplo Muestra la hora actual: function myFunction() { setInterval(function(){myTimer()},1000);
  • 52. } function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } Cómo detener la ejecución? El método clearInterval () se utiliza para detener las ejecuciones adicionales de la función especificada en el método setInterval (). Sintaxis clearInterval(intervalVariable) Para poder utilizar el método clearInterval (), 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 (). Ejemplo El mismo ejemplo anterior, pero hemos añadido una "Detener el temporizador" botón: var myVar; function myFunction() { myVar=setInterval(function(){myTimer()},1000); } function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } function myStopFunction() { clearInterval(myVar); } El método setTimeout () Sintaxis setTimeout("javascript function",milliseconds); El método setTimeout () esperará el número especificado de milisegundos, y luego ejecutar la función especificada.
  • 53. El primer parámetro de setTimeout () debe ser una función. El segundo parámetro indica cuántos milisegundos, a partir de ahora, que desea ejecutar el primer parámetro. Ejemplo Espere 3 segundos, y luego alertar a "Hola": setTimeout(function(){alert("Hello")},3000); 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 (). Sintaxis 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 que se está ejecutando, usted será capaz de detener la ejecución mediante una llamada al método clearTimeout (). Ejemplo El mismo ejemplo anterior, pero hemos añadido un "Alto a la alerta" botón: var myVar; function myFunction() { myVar=setTimeout(function(){alert("Hello")},3000); } function myStopFunction() { clearTimeout(myVar); } JavaScript crear sus propios objetos Los objetos son útiles para organizar la información. Crear una instancia directa de un objeto <script type="text/javascript"> personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"} document.write(personObj.firstname + " is " + personObj.age + " years old."); </script>
  • 54. Crear una plantilla para un objeto <script type="text/javascript"> function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; } myFather=new person("John","Doe",50,"blue"); document.write(myFather.firstname + " is " + myFather.age + " years old."); </script> Los objetos JavaScript Anteriormente en este tutorial hemos visto que JavaScript tiene varios de los objetos incorporados, como String, Date, Array, y mucho más. Además de estos objetos incorporados, también puede crear el suyo propio. Un objeto es un tipo especial de datos, con una colección de propiedades y métodos. Vamos a ilustrar con un ejemplo: Una persona es un objeto. Las propiedades son los valores asociados con el objeto. Propiedades de las personas de incluir el nombre, estatura, peso, edad, color de piel, color de ojos, etc Todas las personas tienen estas propiedades, pero los valores de las propiedades difieren de persona a persona. Los objetos también tienen métodos. Los métodos son las acciones que se pueden realizar sobre los objetos. Los métodos de personas podrían comer (), sleep (), trabajo (), play (), etc Propiedades La sintaxis para acceder a una propiedad de un objeto es: objName.propName Puede agregar propiedades a un objeto, simplemente dando un valor. Supongamos que el personObj ya existe - se puede dar a las propiedades con nombre primer nombre, edad apellido, y color de ojos de la siguiente manera: personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=30; personObj.eyecolor="blue"; document.write(personObj.firstname); El código anterior genera el siguiente resultado: John Métodos Un objeto también puede contener métodos. Usted puede llamar a un método con la siguiente sintaxis:
  • 55. objName.methodName() Nota: Los parámetros requeridos para el método se puede pasar entre los paréntesis. Para llamar a un método llamado sueño () para el personObj: personObj.sleep(); Crear sus propios objetos Hay diferentes maneras para crear un nuevo objeto: 1. Crear una instancia directa de un objeto El siguiente código crea una nueva instancia de un objeto, y agrega cuatro propiedades a la misma: personObj=new Object(); personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=50; personObj.eyecolor="blue"; sintaxis alternativa (mediante literales de objetos): personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}; Agregar un método a la personObj también es simple. El siguiente código añade un método llamado eat () a la personObj: personObj.eat=eat; 2. Crear un constructor de objetos Cree una función que la construcción de objetos: function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; } Dentro de la función que usted necesita para asignar cosas que this.propertyName. La razón de todo el "este" material 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 la mano. Una vez que el constructor de objetos, puede crear nuevas instancias del objeto, de esta manera: var myFather=new person("John","Doe",50,"blue"); var myMother=new person("Sally","Rally",48,"green");
  • 56. Usted puede también agregar algunos métodos para el objeto persona. Esto también se hace dentro de la función: function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; this.newlastname=newlastname; } Tenga en cuenta que los métodos son funciones asociadas a los objetos. A continuación, vamos a tener que escribir el newlastname () la función: function newlastname(new_lastname) { this.lastname=new_lastname; } El newlastname () la función define a la persona de nuevo apellido y le asigna que a la persona.JavaScript sabe que la persona que está hablando con "esto".. Así pues, ahora usted puede escribir: myMother.newlastname ("Pérez").