Este documento introduce JavaScript como el lenguaje de programación más popular en Internet. Explica que JavaScript se utiliza para agregar interactividad a las páginas HTML y que es un lenguaje de scripting ligero e interpretado. También aclara que Java y JavaScript son lenguajes diferentes y describe algunas de las cosas que JavaScript puede hacer, como manipular elementos HTML y crear cookies. Además, cubre conceptos básicos como variables, funciones, comentarios y el uso de JavaScript en páginas web.
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").