JavaScript - Información general
¿Qué es JavaScript?
Javascript es un lenguaje de programación dinámico. Es ligero y más comúnmente usado como una parte de las páginas web, cuyas implementaciones permitir que del lado del cliente secuencia de comandos para interactuar con el usuario y hacer que las páginas dinámicas. Es un lenguaje de programación interpretado con capacidades orientadas a objetos.
JavaScript fue conocido como LiveScript, pero Netscape cambió su nombre a JavaScript, posiblemente a causa de la emoción que se genera por Java. JavaScript hizo su primera aparición en Netscape 2.0 en 1995 con el nombre LiveScript. El núcleo de uso general de la lengua se ha incrustado en Netscape, Internet Explorer y otros navegadores web.
- JavaScript es un lenguaje de programación ligero, interpretada.
- Diseñado para crear aplicaciones centradas en redes.
- Como complemento de e integrado con Java.
- Como complemento de e integrado con HTML.
- Abrir y multiplataforma
Del lado del cliente JavaScript
Del lado del cliente JavaScript es la forma más común de la lengua. El guión debe ser incluido o referenciado por un documento HTML para el código debe ser interpretado por el navegador.
Esto significa que una página web no tiene por qué ser un HTML estático, sino que puede incluir programas que interactúan con el usuario, controlar el navegador, y crear de forma dinámica el contenido HTML.
El mecanismo del lado del cliente JavaScript ofrece muchas ventajas sobre los scripts de servidor CGI tradicionales. Por ejemplo, podría utilizar JavaScript para comprobar si el usuario ha introducido una dirección válida de correo electrónico en un campo de formulario.
El código JavaScript se ejecuta cuando el usuario envía el formulario, y sólo si todas las entradas son válidas, que se presentaría en el servidor Web.
JavaScript puede ser usado para eventos iniciados por el usuario trampa como clics de los botones de navegación, enlaces, y otras acciones que el usuario inicia explícita o implícitamente.
Ventajas de JavaScript
Los méritos de uso de JavaScript son -
- Interacción servidor Menos - Puede validar la entrada del usuario antes de enviar la página fuera al servidor. Esto ahorra el tráfico del servidor, lo que significa menos carga en el servidor.
- La retroalimentación inmediata a los visitantes - Ellos no tienen que esperar a que una recarga la página para ver si se han olvidado de entrar en algo.
- El aumento de la interactividad - Usted puede crear interfaces que reaccionan cuando el usuario se desplaza sobre ellos con el ratón o los activa a través del teclado.
- Interfaces de Richer - Puede utilizar JavaScript para incluir elementos tales como componentes de arrastrar y soltar y deslizadores para dar una interfaz Rich a los visitantes del sitio.
Limitaciones de JavaScript
No podemos tratar a JavaScript como un lenguaje de programación de pleno derecho.Carece de las siguientes características importantes -
- Del lado del cliente JavaScript no permite la lectura o escritura de archivos. Esta se ha mantenido por razones de seguridad.
- JavaScript no se puede utilizar para aplicaciones de redes porque no hay tal soporte disponible.
- JavaScript no tiene ninguna capacidad multithreading o multiprocesador.
Una vez más, JavaScript es un lenguaje ligero, interpretado de programación que permite crear interactividad en páginas HTML estáticas de lo contrario.
Herramientas de desarrollo de JavaScript
Una de las principales fortalezas de JavaScript es que no requiere de herramientas de desarrollo caros. Puede comenzar con un simple editor de texto como Bloc de notas.Dado que es un lenguaje interpretado dentro del contexto de un navegador web, usted ni siquiera necesita para comprar un compilador.
Para hacer nuestra vida más sencilla, varios vendedores han llegado con muy buenas herramientas de edición de JavaScript. Algunos de ellos se enumeran aquí -
- Microsoft FrontPage - Microsoft ha desarrollado un editor HTML popular llamado FrontPage. FrontPage también proporciona a los desarrolladores web con una serie de herramientas de JavaScript para ayudar en la creación de sitios web interactivos.
- Macromedia Dreamweaver MX - Macromedia Dreamweaver MX es un HTML muy popular y editor de JavaScript en el profesional de multitud de desarrollo web. Proporciona varios componentes de JavaScript prediseñados práctico, se integra bien con las bases de datos, y se ajusta a los nuevos estándares como XHTML y XML.
- HomeSite 5 - HomeSite 5 es un HTML muy querido y editor de JavaScript de Macromedia que se puede utilizar para administrar sitios web personales con eficacia.
¿Dónde está JavaScript hoy?
El estándar ECMAScript Edition 5 será la primera actualización que se publicará en más de cuatro años. JavaScript 2.0 se ajusta a la edición 5 de la norma ECMAScript, y la diferencia entre los dos es extremadamente menor.
La especificación para JavaScript 2.0 se puede encontrar en el siguiente sitio:http://www.ecmascript.org/
Hoy en día, de Netscape JavaScript y Microsoft JScript cumplen con el estándar ECMAScript, aunque ambos los idiomas siguen apoyando las características que no forman parte de la norma.
JavaScript - Sintaxis
JavaScript puede implementarse utilizando sentencias JavaScript que se colocan dentro de la <script> ... </ script> etiquetas HTML en una página web.
Puede colocar los <script> etiquetas, que contiene el JavaScript, en cualquier lugar dentro de ti la página web, pero normalmente se recomienda que usted debe mantenerlo dentro de los <head> etiquetas.
La etiqueta <script> alerta al programa de navegación para comenzar la interpretación de todo el texto entre esas etiquetas como un guión. Una sencilla sintaxis de su JavaScript aparecerá de la siguiente manera.
<script ...>
JavaScript code
</script>
La etiqueta de script tiene dos atributos importantes -
- Idioma - Este atributo especifica qué lenguaje de script que está utilizando. Por lo general, su valor será el javascript. Aunque las versiones recientes de HTML (y XHTML, su sucesor) han eliminado el uso de este atributo.
- Tipo - Este atributo es lo que ahora se recomienda para indicar el lenguaje de programación en uso y su valor se debe establecer en "text / javascript".
Así que su segmento de JavaScript se verá así -
<script language="javascript" type="text/javascript">
JavaScript code
</script>
Su Primera JavaScript Guión
Tomemos un ejemplo de muestra para imprimir "Hola Mundo". Hemos añadido un comentario HTML opcional que rodea nuestro código JavaScript. Esta es salvar nuestro código desde un navegador que no admite JavaScript. El comentario finaliza con un "// ->". Aquí "//" significa un comentario en JavaScript, por lo que se agrega que para evitar un navegador de la lectura final del comentario HTML como una pieza de código JavaScript. A continuación, se llama a una función document.write que escribe una cadena en nuestro documento HTML.
Esta función se puede utilizar para escribir texto, HTML, o ambos. Echa un vistazo a el siguiente código.
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>
Este código producirá el siguiente resultado -
Hello World!
Espacios en blanco y saltos de línea
JavaScript ignora espacios, tabuladores y saltos de línea que aparecen en programas de JavaScript. Puede utilizar los espacios, tabulaciones y saltos de línea libremente en su programa y usted es libre para dar formato y sangría a sus programas de una manera ordenada y coherente que hace el código más fácil de leer y entender.
Puntos y comas son opcionales
Declaraciones simples en JavaScript son seguidos generalmente por un punto y coma, tal y como son en C, C ++ y Java. JavaScript, sin embargo, le permite omitir este punto y coma si cada uno de sus estados de cuenta se colocan en una línea separada. Por ejemplo, el siguiente código podría escribirse sin punto y coma.
<script language="javascript" type="text/javascript">
<!--
var1 = 10
var2 = 20
//-->
</script>
Pero cuando formateado en una sola línea de la siguiente, debe utilizar punto y coma -
<script language="javascript" type="text/javascript">
<!--
var1 = 10; var2 = 20;
//-->
</script>
Nota - Es una buena práctica de programación para usar el punto y coma.
Mayúsculas y minúsculas
JavaScript es un lenguaje de mayúsculas y minúsculas. Esto significa que las palabras clave del lenguaje, variables, nombres de funciones, y cualesquiera otros identificadores siempre se deben escribir con una capitalización consistente de letras.
Así que el identificadores Tiempo y TIEMPO transmitirán diferentes significados en JavaScript.
NOTA - Se debe tener cuidado al escribir los nombres de variables y funciones en JavaScript.
Los comentarios en JavaScript
JavaScript soporta tanto al estilo de C y C ++ - los comentarios de estilo: Así -
- Cualquier texto entre un // y el final de una línea se trata como un comentario y es ignorado por JavaScript.
- Cualquier texto entre los caracteres / * y * / se trata como un comentario. Esto puede abarcar varias líneas.
- JavaScript también reconoce la secuencia de apertura de comentario HTML <! -.JavaScript trata esto como un comentario de una sola línea, tal como lo hace el comentario //.
- El comentario HTML secuencia final -> no reconoce JavaScript por lo que debe ser escrito como // ->.
Ejemplo
El siguiente ejemplo muestra cómo utilizar comentarios en JavaScript.
<script language="javascript" type="text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>
Activación de JavaScript en los navegadores
Todos los navegadores modernos vienen con soporte incorporado para JavaScript. Con frecuencia, es posible que deba activar o desactivar esta ayuda de forma manual. En este capítulo se explica el procedimiento de activación y desactivación de soporte JavaScript en su navegador: Internet Explorer, Firefox, Chrome y Opera.
JavaScript en Internet Explorer
Aquí están los pasos sencillos para activar o desactivar JavaScript en su Internet Explorer -
- Siga Herramientas → Opciones de Internet en el menú.
- Seleccione Seguridad pestaña del cuadro de diálogo.
- Haga clic en el Nivel personalizado botón.
- Desplácese hacia abajo hasta encontrar la opción de secuencias de comandos.
- Seleccione Habilitar botón de radio bajo secuencias de comandos ActiveX.
- Finalmente haga clic en Aceptar y salir
Para desactivar la compatibilidad con JavaScript en su Internet Explorer, es necesario seleccionar Desactivar botón de radio bajo secuencias de comandos ActiveX.
JavaScript en Firefox
Aquí están los pasos para activar o desactivar JavaScript en Firefox -
- Abrir un nuevo tipo pestaña → about: config en la barra de direcciones.
- A continuación se encuentra el diálogo de advertencia. Seleccione Tendré cuidado, lo prometo!
- A continuación encontrará la lista de opciones de configuración en el navegador.
- En la barra de búsqueda, escriba javascript.enabled.
- Allí podrá encontrar la opción de activar o desactivar javascript haciendo clic derecho sobre el valor de esa opción → selecto de palanca.
Si javascript.enabled es cierto; convierte a falso cuando se hace clic toogle. Si javascript está deshabilitado; que se activa al hacer clic en alternancia.
JavaScript en Chrome
Aquí están los pasos para activar o desactivar JavaScript en Chrome -
- Haga clic en el menú de Chrome en la esquina superior derecha de tu navegador.
- Seleccione Ajustes.
- Haga clic en Mostrar opciones avanzadas al final de la página.
- Bajo la privacidad sección, haga clic en el botón Configuración de contenido.
- En la sección "Javascript", seleccione "No permitir que ningún sitio ejecute JavaScript" o "Permitir que todos los sitios ejecuten JavaScript (recomendado)".
JavaScript en Opera
Aquí están los pasos para activar o desactivar JavaScript en Opera -
- Siga Herramientas → Preferencias en el menú.
- Seleccionar avanzada opción en el cuadro de diálogo.
- Seleccionar contenido de los artículos mencionados.
- Seleccione Habilitar JavaScript casilla.
- Por último, haga clic en Aceptar y salir.
Para desactivar la compatibilidad con JavaScript en su ópera, no debe seleccionar lacasilla de verificación Habilitar JavaScript.
Advertencia para los No JavaScript Navegadores
Si usted tiene que hacer algo importante con JavaScript, entonces usted puede mostrar un mensaje de advertencia al usuario utilizando <noscript> etiquetas.
Puede agregar un noscript bloque inmediatamente después de que el bloque de script de la siguiente manera -
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>
Ahora bien, si el navegador del usuario no soporta JavaScript o JavaScript no está habilitado, entonces el mensaje de </ noscript> se mostrará en la pantalla.
JavaScript - Colocación en archivo HTML
Hay una flexibilidad dada para incluir código JavaScript en cualquier lugar en un documento HTML. Sin embargo las formas más preferidas que incluyen JavaScript en un archivo HTML son los siguientes -
- Guión en <head> ... </ head> sección.
- Guión en <body> ... </ body> sección.
- Guión en <body> ... </ body> y <head> ... </ head> secciones.
- Secuencia de comandos en un archivo externo y luego incluir en <head> ... </ head> sección.
En la siguiente sección, vamos a ver cómo podemos colocar JavaScript en un archivo HTML de diferentes maneras.
JavaScript en <head> ... </ head>
Si usted quiere tener un script ejecutarse en algún evento, por ejemplo, cuando un usuario hace clic en alguna parte, entonces usted va a colocar ese guión en la cabeza de la siguiente manera -
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
Este código producirá los siguientes resultados -
JavaScript en <body> ... </ body> sección
Si usted necesita un script que se ejecute como se carga la página para que el script genera el contenido de la página, a continuación, el guión va en el <body> parte del documento. En este caso, usted no tendría ninguna función definida utilizando JavaScript. Echa un vistazo a el siguiente código.
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
Este código producirá los siguientes resultados -
JavaScript en <body> y <head> Secciones
Usted puede poner su código JavaScript en <head> y <body> sección por completo de la siguiente manera -
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
Este código producirá el siguiente resultado -
JavaScript en archivo externo
Al comenzar a trabajar más intensamente con JavaScript, usted será probable encontrar que hay casos en los que estás Reutilizando idéntico código JavaScript en varias páginas de un sitio.
Usted no está limitado a mantener el código idéntico en varios archivos HTML. Laescritura de la etiqueta proporciona un mecanismo que le permite almacenar JavaScript en un archivo externo y luego de incluir en tus archivos HTML.
Aquí está un ejemplo para mostrar cómo se puede incluir un archivo JavaScript externo en el código HTML mediante la escritura de etiquetas y su src atributo.
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
Para el uso de JavaScript de una fuente de archivo externo, tiene que escribir todo el código fuente de JavaScript en un archivo de texto simple con los ".js" de extensión y luego incluir ese archivo como se muestra arriba.
Por ejemplo, usted puede mantener el siguiente contenido en filename.js archivo y entonces usted puede utilizar sayHello función en su archivo HTML después de incluir el archivo filename.js.
function sayHello() {
alert("Hello World")
}
JavaScript - Variables
Tipos de datos de JavaScript
Una de las características más fundamentales de un lenguaje de programación es el conjunto de tipos de datos que soporta. Estos son el tipo de valores que se pueden representar y manipular en un lenguaje de programación.
JavaScript le permite trabajar con tres tipos de datos primitivos -
- Los números, por ejemplo. 123, 120.50 etc.
- Cuerdas de texto, por ejemplo "Esta cadena de texto", etc.
- Boole por ejemplo, verdadero o falso.
JavaScript también define dos tipos de datos triviales, nulos y no definidos, cada uno de los cuales define un único valor. Además de estos tipos de datos primitivos, JavaScript es compatible con un tipo de datos compuesto conocido como objeto. Vamos a cubrir los objetos en detalle en un capítulo aparte.
Nota - Java no hace distinción entre valores enteros y valores de punto flotante. Todos los números en JavaScript se representan como valores de punto flotante. JavaScript representa números con el formato de punto flotante de 64 bits definido por la norma IEEE 754.
Variables JavaScript
Al igual que muchos otros lenguajes de programación, JavaScript tiene variables. Las variables pueden ser considerados como contenedores con nombre. Usted puede colocar datos en estos contenedores y luego referirse a los datos simplemente nombrando el contenedor.
Antes de utilizar una variable en un programa JavaScript, deberá declararlo. Las variables se declaran con la var palabra clave de la siguiente manera.
<script type="text/javascript">
<!--
var money;
var name;
//-->
</script>
También puede declarar múltiples variables con el mismo var palabra clave de la siguiente manera -
<script type="text/javascript">
<!--
var money, name;
//-->
</script>
Almacenamiento de un valor en una variable se llama inicialización de variables. Usted puede hacer la inicialización de la variable en el momento de la creación variable o en un momento posterior en el tiempo cuando se necesita esa variable.
Por ejemplo, puede crear una variable llamada dinero y asignar el valor de 2.000,50 a ella más tarde. Por otra variable, se puede asignar un valor en el momento de la inicialización de la siguiente manera.
<script type="text/javascript">
<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>
Nota - Utilice el var palabra clave única para la declaración o de inicialización, una vez para la vida de cualquier nombre de variable en un documento. Usted no debe volver a declarar la misma variable dos veces.
JavaScript es sin tipo idioma. Esto significa que una variable de JavaScript puede contener un valor de cualquier tipo de datos. A diferencia de muchos otros idiomas, usted no tiene que decirle a JavaScript durante la declaración de variables del tipo de valor tendrá la variable. El tipo de valor de una variable puede cambiar durante la ejecución de un programa y JavaScript se encarga de forma automática.
JavaScript Alcance Variable
El alcance de una variable es la región de su programa en el que se define. Variables JavaScript sólo tienen dos ámbitos.
- Variables globales - Una variable global tiene un alcance global que significa que puede ser definido en cualquier parte de su código JavaScript.
- Variables Locales - Una variable local será visible sólo dentro de una función donde se define. Parámetros de la función son siempre locales a esa función.
Dentro del cuerpo de una función, una variable local tiene prioridad sobre una variable global con el mismo nombre. Si se declara una variable local o parámetro de la función con el mismo nombre que una variable global, se oculta de manera efectiva la variable global. Echa un vistazo en el siguiente ejemplo.
<script type="text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>
Esto produce el siguiente resultado -
local
JavaScript nombres de variable
Mientras que nombrar las variables en JavaScript, tenga las siguientes reglas en mente.
- Usted no debe utilizar cualquiera de las palabras clave JavaScript reservados como un nombre de variable. Estas palabras clave se mencionan en la siguiente sección. Por ejemplo, ruptura o booleanas nombres de las variables no son válidos.
- Nombres de variables de JavaScript no deben comenzar con un número (0-9).Ellos deben comenzar con una letra o un carácter de subrayado. Por ejemplo,123test es un nombre de variable válido pero _123test es válida.
- Nombres de variables de JavaScript distinguen entre mayúsculas y minúsculas.Por ejemplo, Nombre y nombre son dos variables diferentes.
Palabras JavaScript Reservados
Una lista de todas las palabras reservadas en JavaScript se dan en la siguiente tabla.Ellos no se pueden utilizar como variables de JavaScript, funciones, métodos, etiquetas de bucle, o cualquier nombres de objeto.
abstracto boolean descanso byte caso captura Char clase const continuar depurador por defecto borrar hacer doble | otro enum exportación se extiende falso final finalmente flotador para función ir si implementos importación en | en vez de int interfaz largo nativo nuevo nulo paquete privado protegido público regreso corto estático súper | interruptor sincronizada esta lanzar tiros transitorio cierto probar tipo de var vacío volátil mientras con |
JavaScript - Operadores
¿Qué es un operador?
Tomemos una simple expresión 4 + 5 es igual a 9. Aquí 4 y 5 son llamados operandos y '+' se llama el operador. JavaScript soporta los siguientes tipos de operadores.
- Operadores aritméticos
- Operadores de Comparación
- (O relacionales) Operadores lógicos
- Los operadores de asignación
- Condicionales (o ternario) Operadores
Vamos a echar un vistazo a todos los operadores de uno por uno.
Operadores aritméticos
JavaScript soporta los siguientes operadores aritméticos -
Asumir la variable A tiene 10 y la variable B tiene 20, entonces -
| No senor | Operador y descripción |
|---|---|
| 1 | + (Suma) Añade dos operandos Ej: A + B dará 30 |
| 2 | - (Resta) Resta el segundo operando desde el primer Ej: A - B dará -10 |
| 3 | * (Multiplicación) Multiplique ambos operandos Ej: A * B dará 200 |
| 4 | / (División) Divide el numerador por el denominador Ej: B / A dará 2 |
| 5 | % (Módulo) Emite el resto de una división entera Ej: B% Un dará 0 |
| 6 | ++ (Incremento) Aumenta un valor entero por uno Ej: A ++ dará 11 |
| 7 | - (Disminuir) Disminuye un valor entero por uno Ej: A-- dará 9 |
Nota - operador de suma (+) trabaja para numérico, así como Strings. por ejemplo, "a" + 10 dará "a10".
Ejemplo
El código siguiente muestra cómo utilizar los operadores aritméticos en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = a++;
document.write("a++ = ");
result = a++;
document.write(result);
document.write(linebreak);
b = b--;
document.write("b-- = ");
result = b--;
document.write(result);
document.write(linebreak);
//-->
</script>
Set the variables to different values and then try...
</body>
</html>
Salida
a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
a++ = 33
b-- = 10
Set the variables to different values and then try...
Operadores de comparación
JavaScript soporta los siguientes operadores de comparación -
Asumir la variable A tiene 10 y la variable B tiene 20, entonces -
| No senor | Operador y descripción |
|---|---|
| 1 | = = (Igual) Comprueba si el valor de los dos operandos son iguales o no, si es así, entonces la condición se convierte en verdad. Ej: (A == B) no es cierto. |
| 2 | ! = (Distinto) Comprueba si el valor de los dos operandos son iguales o no, si los valores no son iguales, entonces la condición se convierte en realidad. Ej: (! A = B) es cierto. |
| 3 | > (Mayor que) Comprueba si el valor del operando de la izquierda es mayor que el valor del operando de la derecha, si es así, entonces la condición se convierte en realidad. Ej: (A> B) no es cierto. |
| 4 | <(Menos) Comprueba si el valor del operando de la izquierda es menor que el valor del operando de la derecha, si es así, entonces la condición se convierte en realidad. Ej: (A <B) es cierto. |
| 5 | > = (Mayor o igual a) Comprueba si el valor del operando de la izquierda es mayor o igual al valor del operando de la derecha, si es así, entonces la condición se convierte en realidad. Ej: (A> = B) no es cierto. |
| 6 | <= (Menor o igual que) Comprueba si el valor del operando de la izquierda es menor o igual al valor del operando de la derecha, si es así, entonces la condición se convierte en realidad. Ej: (A <= B) es cierto. |
Ejemplo
El código siguiente muestra cómo utilizar los operadores de comparación en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
document.write("(a < b) => ");
result = (a < b);
document.write(result);
document.write(linebreak);
document.write("(a > b) => ");
result = (a > b);
document.write(result);
document.write(linebreak);
document.write("(a != b) => ");
result = (a != b);
document.write(result);
document.write(linebreak);
document.write("(a >= b) => ");
result = (a >= b);
document.write(result);
document.write(linebreak);
document.write("(a <= b) => ");
result = (a <= b);
document.write(result);
document.write(linebreak);
//-->
</script>
Set the variables to different values and different operators and then try...
</body>
</html>
Salida
(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
(a >= b) => false
a <= b) => true
Set the variables to different values and different operators and then try...
Operadores lógicos
JavaScript soporta los siguientes operadores lógicos -
Asumir la variable A tiene 10 y la variable B tiene 20, entonces -
| No senor | Operador y descripción |
|---|---|
| 1 | && (AND lógico) Si ambos operandos son no-cero, entonces la condición se convierte en realidad. Ej: (A && B) es cierto. |
| 2 | || (OR lógico) Si alguno de los dos operandos son no-cero, entonces la condición se convierte en realidad. Ej: (A || B) es cierto. |
| 3 | ! (NOT lógico) Invierte el estado lógico de su operando. Si una condición es verdadera, entonces el operador NOT lógico hará que sea falsa. Ejemplo:! (A && B) es falsa. |
Ejemplo
Pruebe el siguiente código para aprender cómo implementar Operadores lógicos en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var a = true;
var b = false;
var linebreak = "<br />";
document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
document.write("(a || b) => ");
result = (a || b);
document.write(result);
document.write(linebreak);
document.write("!(a && b) => ");
result = (!(a && b));
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
Salida
(a && b) => false
(a || b) => true
!(a && b) => true
Set the variables to different values and different operators and then try...
Los operadores bit a bit
JavaScript soporta los siguientes operadores bit a bit -
Asumir la variable A tiene 2 y la variable B tiene 3, entonces -
| No senor | Operador y descripción |
|---|---|
| 1 | Y (AND bit a bit) Realiza una operación booleana AND en cada bit de sus argumentos enteros. Ej: (A & B) es 2. |
| 2 | | (OR bit a bit) Realiza un booleano OR operación en cada bit de sus argumentos enteros. Ej: (A | B) es 3. |
| 3 | ^ (Bitwise XOR) Realiza una exclusiva booleano OR operación en cada bit de sus argumentos enteros. Exclusiva O significa que cualquier operando es verdadero o operando dos es cierto, pero no ambos. Ej: (A ^ B) es 1. |
| 4 | ~ (Bitwise No) Es un operador unario y opera mediante la inversión de todos los bits en el operando. Ej: (~ B) es de -4. |
| 5 | << (Mayúsculas izquierda) Se mueve todos los bits en su primer operando de la izquierda por el número de posiciones especificado en el segundo operando. Nuevos bits se rellenan con ceros. Desplazar un valor dada por una posición es equivalente a multiplicar por 2, cambiando dos posiciones es equivalente a multiplicar por 4, y así sucesivamente. Ej: (A << 1) es 4. |
| 6 | >> (Mayús derecha) Binary Operador Mayús derecha. El valor del operando de la izquierda se mueve a la derecha por el número de bits especificado por el operando de la derecha. Ej: (A >> 1) es 1. |
| 7 | >>> (Desplazamiento derecha con Zero) Este operador es igual que el operador >>, salvo que los bits desplazados en la izquierda son siempre cero. Ej: (A >>> 1) es 1. |
Ejemplo
Pruebe el siguiente código para implementar operador Bitwise en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var a = 2; // Bit presentation 10
var b = 3; // Bit presentation 11
var linebreak = "<br />";
document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);
document.write("(a | b) => ");
result = (a | b);
document.write(result);
document.write(linebreak);
document.write("(a ^ b) => ");
result = (a ^ b);
document.write(result);
document.write(linebreak);
document.write("(~b) => ");
result = (~b);
document.write(result);
document.write(linebreak);
document.write("(a << b) => ");
result = (a << b);
document.write(result);
document.write(linebreak);
document.write("(a >> b) => ");
result = (a >> b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0
Set the variables to different values and different operators and then try...
Los operadores de asignación
JavaScript soporta los siguientes operadores de asignación -
| No senor | Operador y descripción |
|---|---|
| 1 | = (Asignación simple) Asigna valores del operando lado derecho para el operando de la izquierda Ej: C = A + B asignará el valor de A + B en C |
| 2 | + = (Agregar y Asignación) Añade el operando derecho al operando izquierdo y asigna el resultado al operando de la izquierda. Ex: C = A + es equivalente a C = C + A |
| 3 | - = (Resta y asignación) Se resta el operando derecho del operando de la izquierda y asigna el resultado al operando de la izquierda. Ex: C - = A es equivalente a C = C - A |
| 4 | * = (Multiplicar y asignación) Se multiplica el operando de la derecha con el operando izquierdo y asigna el resultado al operando de la izquierda. Ex: C = A * es equivalente a C = C * A |
| 5 | / = (Divide y Asignación) Divide el operando de la izquierda con el operando derecho y asigna el resultado al operando de la izquierda. Ex: C / = A es equivalente a C = C / A |
| 6 | % = (Módulos y Asignación) Se necesita el módulo utilizando dos operandos y asigna el resultado al operando de la izquierda. Ex:% C = A es equivalente a C = C% A |
Nota - La misma lógica se aplica a los operadores bit a bit por lo que llegarán a ser como << =, >> =, >> =, & =, | = y ^ =.
Ejemplo
Pruebe el siguiente código para implementar operador de asignación en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var a = 33;
var b = 10;
var linebreak = "<br />";
document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a *= b) => ");
result = (a *= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
Salida
Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...
Varios Operador
Vamos a discutir dos operadores de aquí que son muy útiles en JavaScript: el operador condicional (:) y el? Operador typeof.
Operador condicional (? :)
El operador condicional evalúa primero una expresión para un valor verdadero o falso y luego ejecuta una de las dos declaraciones dados dependiendo del resultado de la evaluación.
| No senor | Operador y descripción |
|---|---|
| 1 | ? : (Condicional) Si condición es verdadera? Entonces valor X: valorar lo contrario Y |
Ejemplo
Pruebe el siguiente código para entender cómo funciona el operador condicional en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write ("((a > b) ? 100 : 200) => ");
result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);
document.write ("((a < b) ? 100 : 200) => ");
result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
Salida
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...
Operador typeof
El typeof operador es un operador unitario que se coloca antes de su único operando, que puede ser de cualquier tipo. Su valor es una cadena que indica el tipo de datos del operando.
El typeof operador se evalúa como "número", "cadena", o "boolean" si su operando es un número, cadena o valor booleano y devuelve verdadero o falso sobre la base de la evaluación.
Aquí está una lista de los valores de retorno para el typeof operador.
| Escribe | Cadena devuelta por typeof |
|---|---|
| Número | "número" |
| Cuerda | "cuerda" |
| Boole | "booleano" |
| Objeto | "objeto" |
| Función | "función" |
| Indefinido | "indefinido" |
| Nulo | "objeto" |
Ejemplo
El siguiente código muestra cómo implementar typeof operador.
<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = "String";
var linebreak = "<br />";
result = (typeof b == "string" ? "B is String" : "B is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
result = (typeof a == "string" ? "A is String" : "A is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
Salida
Result => B is String
Result => A is Numeric
Set the variables to different values and different operators and then try...
JavaScript - si ... Else
Mientras escribe un programa, puede haber una situación en la que usted necesita para adoptar uno de un conjunto dado de caminos. En tales casos, es necesario utilizar instrucciones condicionales que permiten a su programa para tomar decisiones correctas y realizar acciones correctas.
JavaScript soporta sentencias condicionales que se utilizan para llevar a cabo diferentes acciones basadas en diferentes condiciones. Aquí vamos a explicar el if..elsecomunicado.
Gráfico de flujo if-else
El siguiente diagrama de flujo muestra cómo funciona la instrucción if-else.
JavaScript soporta las siguientes formas de if..else declaración -
- if
- if ... else
- if ... else if ... comunicado.
if
El caso de declaración es la sentencia de control fundamental que permite JavaScript para tomar decisiones y ejecutar sentencias condicionalmente.
Sintaxis
La sintaxis de una base, si la declaración es el siguiente -
if (expression){
Statement(s) to be executed if expression is true
}
Aquí se evalúa una expresión JavaScript. Si el valor resultante es cierto, la declaración (s) dada se ejecutan. Si la expresión es falsa, entonces no sería ejecutado ninguna declaración. La mayoría de las veces, se utilizarán los operadores de comparación, mientras que la toma de decisiones.
Ejemplo
Pruebe el siguiente ejemplo para entender cómo el si trabaja comunicado.
<html>
<body>
<script type="text/javascript">
<!--
var age = 20;
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Qualifies for driving
Set the variable to different value and then try...
if ... else:
El 'if ... else' declaración es el siguiente formulario de la declaración de control que permite JavaScript para ejecutar sentencias de una manera más controlada.
Sintaxis
if (expression){
Statement(s) to be executed if expression is true
}
else{
Statement(s) to be executed if expression is false
}
Aquí se evalúa la expresión de JavaScript. Si el valor resultante es cierto, la declaración dada (s) en el bloque de "si", se ejecutan. Si la expresión es falsa, entonces la declaración dada (s) en el bloque else se ejecuta.
Ejemplo
Pruebe el siguiente código para aprender cómo implementar una sentencia if-else en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var age = 15;
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}
else{
document.write("<b>Does not qualify for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Does not qualify for driving
Set the variable to different value and then try...
if ... else if ... declaración
El if ... else if ... afirmación es una forma avanzada de if ... else que permite JavaScript para tomar una decisión correcta de varias condiciones.
Sintaxis
La sintaxis de un if-else-if es la siguiente -
if (expression 1){
Statement(s) to be executed if expression 1 is true
}
else if (expression 2){
Statement(s) to be executed if expression 2 is true
}
else if (expression 3){
Statement(s) to be executed if expression 3 is true
}
else{
Statement(s) to be executed if no expression is true
}
No hay nada especial en este código. Es sólo una serie de si los estados, donde cadacaso es una parte de la otra cláusula de la declaración anterior. Declaración (s) se ejecutan sobre la base de la condición verdadera, si ninguna de las condiciones es verdadera, entonces la cosa se ejecuta el bloque.
Ejemplo
Pruebe el siguiente código para aprender cómo implementar una sentencia if-else-if en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var book = "maths";
if( book == "history" ){
document.write("<b>History Book</b>");
}
else if( book == "maths" ){
document.write("<b>Maths Book</b>");
}
else if( book == "economics" ){
document.write("<b>Economics Book</b>");
}
else{
document.write("<b>Unknown Book</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
<html>
Salida
Maths Book
Set the variable to different value and then try...
JavaScript - Caso Interruptor
Puede utilizar múltiples if ... else ... si las declaraciones, al igual que en el capítulo anterior, para llevar a cabo una rama de múltiples vías. Sin embargo, esto no siempre es la mejor solución, especialmente cuando todas las ramas dependen del valor de una sola variable.
Comenzando con JavaScript 1.2, puede utilizar un interruptor de declaración que maneja exactamente esta situación, y lo hace de manera más eficiente que repite si ... else if declaraciones.
Diagrama de Flujo
El siguiente diagrama de flujo explica funciona una sentencia switch de los casos.
Sintaxis
El objetivo de un interruptor de declaración es dar una expresión para evaluar y varios estados diferentes para ejecutar basándose en el valor de la expresión. El intérprete comprueba cada caso contra el valor de la expresión hasta que se encuentra una coincidencia. Si nada se compara con un valor predeterminado se utilizará condición.
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}
Las vacaciones de declaraciones indican el final de un caso particular. Si se omiten, el intérprete continuará ejecutando cada declaración en cada uno de los siguientes casos.
Vamos a explicar ruptura declaración de Control de Lazo capítulo.
Ejemplo
Pruebe el siguiente ejemplo para implementar sentencia switch de los casos.
<html>
<body>
<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
case 'A': document.write("Good job<br />");
break;
case 'B': document.write("Pretty good<br />");
break;
case 'C': document.write("Passed<br />");
break;
case 'D': document.write("Not so good<br />");
break;
case 'F': document.write("Failed<br />");
break;
default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...
Sentencias break juegan un papel importante en los estados de conmutación de casos.Pruebe el siguiente código que utiliza sentencia switch de los casos sin ninguna sentencia break.
<html>
<body>
<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
case 'A': document.write("Good job<br />");
case 'B': document.write("Pretty good<br />");
case 'C': document.write("Passed<br />");
case 'D': document.write("Not so good<br />");
case 'F': document.write("Failed<br />");
default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Set the variable to different value and then try...
JavaScript - Mientras Loops
Mientras escribe un programa, puede encontrarse con una situación en la que usted necesita para llevar a cabo una acción una y otra vez. En tales situaciones, usted tendría que escribir sentencias de bucle para reducir el número de líneas.
JavaScript soporta todos los lazos necesarios para aliviar la presión hacia abajo de la programación.
El bucle while
El bucle más básico en JavaScript es el tiempo de bucle que se discute en este capítulo.El propósito de un tiempo bucle es para ejecutar una instrucción o bloque de código en varias ocasiones, siempre y cuando una expresión es verdadera. Una vez que la expresión se convierte en falsa, el bucle termina.
Diagrama de Flujo
El diagrama de flujo de bucle while se ve de la siguiente manera -
Sintaxis
La sintaxis del bucle while en JavaScript es el siguiente -
while (expression){
Statement(s) to be executed if expression is true
}
Ejemplo
Pruebe el siguiente ejemplo para implementar bucle while.
<html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop ");
while (count < 10){
document.write("Current Count : " + count + "<br />");
count++;
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...
El do ... while Loop
El tiempo hacer ... bucle es similar al tiempo de bucle excepto que la verificación de la condición ocurre al final del bucle. Esto significa que el bucle siempre se ejecuta al menos una vez, incluso si la condición es falsa.
Diagrama de Flujo
El diagrama de flujo de un do-while loop sería la siguiente -
Sintaxis
La sintaxis para do-while bucle en JavaScript es el siguiente -
do{
Statement(s) to be executed;
} while (expression);
Nota - No se pierda el punto y coma se utiliza al final del bucle do ... while.
Ejemplo
Pruebe el siguiente ejemplo para aprender cómo implementar un do-while bucle en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
do{
document.write("Current Count : " + count + "<br />");
count++;
}
while (count < 5);
document.write ("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...
JavaScript - Para Loop
La 'para loop' es la forma más compacta de bucle. Incluye las tres partes importantes siguientes -
- La inicialización de bucle donde inicializamos nuestro contador a un valor de partida. La declaración de inicialización se ejecuta antes de que empiece el bucle.
- La declaración de la prueba que pondrá a prueba si una determinada condición es verdadera o no. Si la condición es verdadera, entonces se ejecutará el código dado dentro del bucle, de lo contrario el control saldrá del bucle.
- La declaración iteración donde se puede aumentar o disminuir su contador.
Usted puede poner todas las tres partes en una sola línea separados por punto y coma.
Diagrama de Flujo
El diagrama de flujo de un bucle en JavaScript sería la siguiente -
Sintaxis
La sintaxis del bucle for es JavaScript es el siguiente -
for (initialization; test condition; iteration statement){
Statement(s) to be executed if test condition is true
}
Ejemplo
Pruebe el siguiente ejemplo para aprender cómo funciona un bucle en JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++){
document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...
JavaScript para ... en bucle
El for ... in bucle se utiliza para recorrer las propiedades de un objeto. Como no hemos discutido objetos, sin embargo, es posible que no se sienten cómodos con este bucle.Pero una vez que entienda cómo los objetos se comportan de JavaScript, se encuentra este lazo muy útil.
Sintaxis
for (variablename in object){
statement or block to execute
}
En cada iteración, una propiedad del objeto se asigna a nombrevariable y este bucle continúa hasta que todas las propiedades del objeto se agotan.
Ejemplo
Pruebe el siguiente ejemplo para implementar bucle 'for-in'. Imprime del navegador Web Navigator objeto.
<html>
<body>
<script type="text/javascript">
<!--
var aProperty;
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator) {
document.write(aProperty);
document.write("<br />");
}
document.write ("Exiting from the loop!");
//-->
</script>
<p>Set the variable to different object and then try...</p>
</body>
</html>
Salida
Navigator Object Properties
serviceWorker
webkitPersistentStorage
webkitTemporaryStorage
geolocation
doNotTrack
onLine
languages
language
userAgent
product
platform
appVersion
appName
appCodeName
hardwareConcurrency
maxTouchPoints
vendorSub
vendor
productSub
cookieEnabled
mimeTypes
plugins
javaEnabled
getStorageUpdates
getGamepads
webkitGetUserMedia
vibrate
getBattery
sendBeacon
registerProtocolHandler
unregisterProtocolHandler
Exiting from the loop!
Set the variable to different object and then try...
JavaScript - Control de Lazo
JavaScript proporciona un control total para manejar bucles y sentencias switch. Puede haber una situación en la que usted necesita para salir de un bucle sin alcanzar en su parte inferior. También puede haber una situación en la que desea omitir una parte de su bloque de código y empezar la siguiente iteración de la mirada.
Para hacer frente a todas estas situaciones, JavaScript proporciona romper y seguirinstrucciones. Estas declaraciones se utilizan para venir inmediatamente de cualquier lazo o para iniciar la siguiente iteración de cualquier bucle respectivamente.
La sentencia break
La ruptura declaración, que fue presentado brevemente con el interruptor dedeclaración, se utiliza para salir de un bucle temprano, salir de las llaves que encierran.
Diagrama de Flujo
El diagrama de flujo de una sentencia break se vería de la siguiente manera -
Ejemplo
El siguiente ejemplo ilustra el uso de una ruptura declaración con un bucle while.Observe cómo el lazo se rompe antes de tiempo una vez x alcanza el 5 y llega adocument.write (..) declaración justo debajo de la llave de cierre -
<html>
<body>
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
if (x == 5){
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...
Ya hemos visto el uso de ruptura declaración dentro de un interruptor comunicado.
La sentencia continue
El continuar declaración dice al intérprete para iniciar de inmediato la siguiente iteración del bucle y salte el bloque de código restante. Cuando un continuar se encuentra comunicado, el flujo del programa se desplaza a la comprobación de la expresión bucle de inmediato y si la condición sigue siendo cierto, entonces se inicia la siguiente repetición, de lo contrario el control sale del bucle.
Ejemplo
Este ejemplo ilustra el uso de un continuar declaración con un bucle while. Observe cómo el seguir se utiliza comunicado saltarse la impresión cuando el índice se celebró en la variable x alcanza 5 -
<html>
<body>
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
x = x + 1;
if (x == 5){
continue; // skill rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Salida
Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Utilización de etiquetas para controlar el flujo
A partir de JavaScript 1.2, una etiqueta se puede utilizar con pausa y continuar para controlar el flujo de manera más precisa. Una etiqueta es simplemente un identificador seguido de dos puntos (:) que se aplica a una declaración o un bloque de código.Veremos dos ejemplos diferentes de entender cómo usar las etiquetas con rotura de puente y continuar.
Nota - Los saltos de línea no están permitidas entre el 'continuar' o 'break' declaración y su nombre de la etiqueta. Además, no debe haber ninguna otra declaración por entre un nombre de etiqueta y el bucle asociado.
Pruebe las siguientes dos ejemplos para una mejor comprensión de las etiquetas.
Ejemplo 1
El siguiente ejemplo muestra cómo implementar la etiqueta con una sentencia break.
<html>
<body>
<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 5; i++)
{
document.write("Outerloop: " + i + "<br />");
innerloop:
for (var j = 0; j < 5; j++)
{
if (j > 3 ) break ; // Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) break outerloop; // Quit the outer loop
document.write("Innerloop: " + j + " <br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
</body>
</html>
Salida
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!
Ejemplo 2
<html>
<body>
<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 3; i++)
{
document.write("Outerloop: " + i + "<br />");
for (var j = 0; j < 5; j++)
{
if (j == 3){
continue outerloop;
}
document.write("Innerloop: " + j + "<br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
</body>
</html>
Salida
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!
JavaScript - Funciones
Una función es un grupo de código reutilizable que se puede llamar en cualquier parte de su programa. Esto elimina la necesidad de escribir el mismo código una y otra vez.Ayuda a los programadores por escrito códigos modulares. Funciones permiten a un programador para dividir un gran programa en un número de funciones pequeñas y manejables.
Como cualquier otro lenguaje de programación avanzada, JavaScript también soporta todas las características necesarias para escribir funciones de código usando modulares. Usted debe haber visto funciones como alerta () y write () en los capítulos anteriores. Estábamos usando estas funciones una y otra vez, pero que había sido escrito en el núcleo de JavaScript sólo una vez.
JavaScript nos permite escribir nuestras propias funciones. En esta sección se explica cómo escribir sus propias funciones en JavaScript.
Función Definición
Antes de usar una función, tenemos que definirlo. La forma más común para definir una función en JavaScript está utilizando la función de palabras clave, seguido de un nombre único de la función, una lista de parámetros (que podría estar vacío), y un bloque de instrucciones rodeado de llaves.
Sintaxis
La sintaxis básica se muestra aquí.
<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>
Ejemplo
Pruebe el siguiente ejemplo. Define una función llamada sayHello que no toma parámetros -
<script type="text/javascript">
<!--
function sayHello()
{
alert("Hello there");
}
//-->
</script>
Llamar a una función
Para invocar una función de algún lugar más adelante en la secuencia de comandos, usted sólo tendrá que escribir el nombre de esa función, como se muestra en el siguiente código.
<html>
<head>
<script type="text/javascript">
function sayHello()
{
document.write ("Hello there!");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>
Salida
Parámetros de funciones
Hasta ahora, hemos visto las funciones sin parámetros. Pero hay una facilidad para pasar diferentes parámetros al llamar a una función. Estos parámetros pasados pueden ser capturados dentro de la función y de cualquier manipulación se pueden hacer sobre esos parámetros. Una función puede tener múltiples parámetros separados por comas.
Ejemplo
Pruebe el siguiente ejemplo. Hemos modificado nuestra sayHello función aquí. Ahora tiene dos parámetros.
<html>
<head>
<script type="text/javascript">
function sayHello(name, age)
{
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>
Salida
La Declaración de retorno
Una función de JavaScript puede tener una opción de retorno comunicado. Esto es necesario si desea devolver un valor desde una función. Esta declaración debe ser la última declaración de una función.
Por ejemplo, puede pasar dos números en una función y entonces usted puede esperar que la función retorne su multiplicación en su programa de llamada.
Ejemplo
Pruebe el siguiente ejemplo. Define una función que toma dos parámetros y los concatena antes de regresar la resultante en el programa de llamada.
<html>
<head>
<script type="text/javascript">
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
function secondFunction()
{
var result;
result = concatenate('Zara', 'Ali');
document.write (result );
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="Call Function">
<form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>
Salida
Hay mucho que aprender acerca de las funciones de JavaScript, sin embargo hemos cubierto los conceptos más importantes en este tutorial.
JavaScript - Eventos
¿Qué es un evento?
La interacción de JavaScript con HTML se maneja a través eventos que se producen cuando el usuario o el navegador manipula una página.
Cuando se carga la página, se llama un evento. Cuando el usuario hace clic en un botón, ese clic es también un evento. Otros ejemplos incluyen eventos como pulsar cualquier tecla, el cierre de una ventana, cambiar el tamaño de una ventana, etc.
Los desarrolladores pueden utilizar estos eventos para ejecutar JavaScript codificado respuestas, que causan botones para cerrar las ventanas, los mensajes que se mostrarán a los usuarios, los datos sean validados, y prácticamente cualquier otro tipo de respuesta imaginable.
Los eventos son una parte de la Document Object Model (DOM) Nivel 3 y cada elemento HTML contiene un conjunto de eventos que pueden desencadenar Código JavaScript.
Por favor, vaya a través de este pequeño tutorial para una mejor comprensiónReferencia HTML Evento. Aquí vamos a ver algunos ejemplos para entender una relación entre eventos y JavaScript -
onclick Tipo de evento
Este es el tipo de evento más frecuente que se produce cuando un usuario hace clic en el botón izquierdo de su ratón. Usted puede poner su validación, advertencia, etc., en contra de este tipo de evento.
Ejemplo
Pruebe el siguiente ejemplo.
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>
Salida
Tipo de evento onsubmit
onsubmit es un evento que ocurre cuando intenta enviar un formulario. Usted puede poner su validación de formularios en contra de este tipo de evento.
Ejemplo
El siguiente ejemplo muestra cómo utilizar onsubmit. Aquí hacemos un llamado avalidate () la función antes de enviar a los datos del formulario al servidor web. Sivalidate () función devuelve true, el formulario se presentará, de lo contrario no va a enviar los datos.
Pruebe el siguiente ejemplo.
<html>
<head>
<script type="text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>
onmouseover y onmouseout
Estos dos tipos de eventos le ayudará a crear efectos agradables con imágenes, o incluso con el texto también. El onmouseover evento se dispara cuando usted trae su ratón sobre cualquier elemento y el onmouseout desencadena cuando se mueve el puntero del ratón a partir de ese elemento. Pruebe el siguiente ejemplo.
<html>
<head>
<script type="text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
Salida
HTML 5 Eventos estándar
Los HTML 5 eventos estándar se enumeran aquí para su referencia. Aquí guión indica una función Javascript para ser ejecutado en contra de ese evento.
| Cualidad | Valor | Descripción |
|---|---|---|
| Desconectado | guión | Dispara cuando el documento se queda sin conexión |
| OnAbort | guión | Dispara en un evento de aborto |
| onafterprint | guión | Dispara después de que el documento se imprime |
| onbeforeonload | guión | Dispara antes de que las cargas de documentos |
| OnBeforePrint | guión | Dispara antes de imprimir el documento |
| onblur | guión | Dispara cuando la ventana pierde el foco |
| oncanplay | guión | Dispara cuando los medios pueden empezar a jugar, pero la fuerza tiene que parar por buffering |
| oncanplaythrough | guión | Dispara cuando los medios de comunicación pueden jugar hasta el final, sin parar de búfer |
| onchange | guión | Dispara cuando un elemento cambia |
| al hacer clic | guión | Dispara en un clic del ratón |
| OnContextMenu | guión | Dispara cuando se activa un menú contextual |
| ondblclick | guión | Dispara en un ratón haga doble clic |
| ondrag | guión | Dispara cuando se arrastra un elemento |
| ondragend | guión | Disparadores al final de una operación de arrastre |
| ondragenter | guión | Dispara cuando un elemento ha sido arrastrado a un destino de colocación válida |
| OnDragLeave | guión | Dispara cuando un elemento está siendo arrastrado en un destino de colocación válida |
| ondragover | guión | Disparadores en el inicio de una operación de arrastre |
| ondragstart | guión | Disparadores en el inicio de una operación de arrastre |
| ondrop | guión | Dispara cuando se cayó elemento arrastrado |
| ondurationchange | guión | Disparadores cuando se cambia la longitud de los medios de comunicación |
| onemptied | guión | Dispara cuando un elemento de recurso de medios de repente se vuelve vacía. |
| onended | guión | Se dispara cuando los medios de comunicación ha llegar al final |
| onerror | guión | Dispara cuando se produzca un error |
| onfocus | guión | Dispara cuando la ventana se pone el foco |
| onformchange | guión | Se dispara cuando un formulario cambios |
| onforminput | guión | Dispara cuando una forma se pone la entrada del usuario |
| onhaschange | guión | Dispara cuando el documento tiene el cambio |
| oninput | guión | Dispara cuando un elemento recibe la entrada del usuario |
| oninvalid | guión | Dispara cuando un elemento no es válido |
| onkeydown | guión | Dispara cuando se pulsa una tecla |
| onkeypress | guión | Dispara cuando se pulsa una tecla y puesto en libertad |
| onkeyup | guión | Dispara cuando se suelta una tecla |
| onload | guión | Se dispara cuando las cargas de documentos |
| onloadeddata | guión | Dispara cuando los datos medios se carga |
| onloadedmetadata | guión | Dispara cuando la duración y otros datos de los medios de un elemento material está cargado |
| onLoadStart | guión | Dispara cuando el navegador comienza a cargar los datos de los medios |
| onmessage | guión | Dispara cuando se activa el mensaje |
| onmousedown | guión | Dispara cuando se pulsa un botón del ratón |
| onmousemove | guión | Se dispara cuando el puntero del ratón se mueve |
| onmouseout | guión | Dispara cuando el puntero del ratón se mueve fuera de un elemento |
| onmouseover | guión | Dispara cuando el puntero del ratón se mueve sobre un elemento |
| onmouseup | guión | Dispara cuando se suelta el botón del ratón |
| onMouseWheel | guión | Dispara cuando se hace girar la rueda del ratón |
| onoffline | guión | Dispara cuando el documento se queda sin conexión |
| onoine | guión | Dispara cuando el documento se pone en línea |
| ononline | guión | Dispara cuando el documento se pone en línea |
| onpagehide | guión | Dispara cuando la ventana está oculta |
| onpageshow | guión | Dispara cuando la ventana se hace visible |
| onPause | guión | Dispara cuando se hace una pausa de datos multimedia |
| onplay | guión | Dispara cuando los datos medios de comunicación va a empezar a jugar |
| onplaying | guión | Dispara cuando los datos de medios de comunicación ha empezar a jugar |
| onpopstate | guión | Dispara cuando cambia la historia de la ventana |
| en progreso | guión | Dispara cuando el navegador es ir a buscar los datos de los medios de comunicación |
| onratechange | guión | Dispara cuando el tipo de juego de los datos de los medios ha cambiado |
| onreadystatechange | guión | Se dispara cuando los cambios de estado listo |
| onredo | guión | Dispara cuando el documento realiza una redo |
| onresize | guión | Dispara cuando se cambia el tamaño de la ventana |
| onscroll | guión | Dispara cuando se está desplazando la barra de desplazamiento de un elemento |
| onseeked | guión | Dispara cuando el atributo de búsqueda de un elemento de los medios de comunicación ya no es así, y la búsqueda ha terminado |
| onseeking | guión | Dispara cuando el atributo de búsqueda de un elemento de comunicación es verdad, y la búsqueda se ha iniciado |
| onselect | guión | Dispara cuando se selecciona un elemento |
| onstalled | guión | Dispara cuando hay un error en ir a buscar datos de los medios |
| onstorage | guión | Se activa cuando se carga el documento |
| onsubmit | guión | Dispara cuando se envía un formulario |
| onsuspend | guión | Dispara cuando el navegador ha sido ir a buscar los datos de los medios de comunicación, pero se detuvo antes de que el archivo entero de medios era descabellada |
| ontimeupdate | guión | Dispara cuando los medios cambia su posición de juego |
| OnUndo | guión | Dispara cuando un documento realiza una deshacer |
| onunload | guión | Dispara cuando el usuario abandona el documento |
| onvolumechange | guión | Dispara cuando los medios cambia el volumen, también cuando el volumen está ajustado en "mute" |
| onwaiting | guión | Dispara cuando los medios de comunicación ha dejado de jugar, pero se espera que reanude |
JavaScript y Cookies
¿Qué son las cookies?
Los navegadores Web y servidores utilizan el protocolo HTTP para comunicarse y HTTP es un protocolo sin estado. Pero para un sitio web comercial, se requiere para mantener la información de la sesión entre las diferentes páginas. Por ejemplo, un registro de usuario termina después de completar muchas páginas. Pero la forma de mantener la información de sesión de los usuarios a través de todas las páginas web.
En muchas situaciones, el uso de las cookies es el método más eficiente de recordar y el seguimiento de las preferencias, las compras, las comisiones, y otra información necesaria para la mejor experiencia de visitante o sitio estadísticas.
Cómo funciona ?
Su servidor envía algunos datos al navegador del visitante en la forma de una cookie. El navegador puede aceptar la cookie. Si lo hace, se almacena como un registro de texto sin formato en el disco duro del visitante. Ahora, cuando el visitante llega a otra página en su sitio, el navegador envía la misma cookie al servidor para su recuperación. Una vez recuperado, el servidor sabe / recuerda lo que estaba almacenado antes.
Las cookies son un registro de datos de texto sin formato de 5 campos de longitud variable -
- Expira - La fecha de la cookie expirará. Si está en blanco, la cookie expirará cuando el visitante se cierra el navegador.
- Dominio - El nombre de dominio de su sitio.
- Ruta - La ruta de acceso al directorio o página web que establece la cookie. Esto puede ser en blanco si desea recuperar la cookie desde cualquier directorio o página.
- Secure - Si este campo contiene la palabra "seguro", entonces la cookie sólo puede ser recuperada con un servidor seguro. Si este campo está en blanco, no existe tal restricción.
- Nombre = Valor - Cookies se establecen y se recuperan en forma de pares clave-valor
Las cookies fueron diseñadas originalmente para la programación CGI. Los datos contenidos en una cookie se transmite automáticamente entre el navegador y el servidor web, por lo que los scripts CGI en el servidor pueden leer y escribir valores de las cookies que se almacenan en el cliente.
JavaScript también puede manipular las cookies utilizando la cookie de propiedad deldocumento objeto. JavaScript puede leer, crear, modificar y eliminar las cookies que se aplican a la página web actual.
El almacenamiento de las Cookies
La forma más sencilla de crear una cookie es asignar un valor de cadena para el objeto document.cookie, que se parece a esto.
document.cookie = "key1=value1;key2=value2;expires=date";
Aquí el expira atributo es opcional. Si proporciona este atributo con una fecha u hora válida, entonces la cookie expirará en una fecha o tiempo determinado ya partir de entonces, el valor de las cookies "no será accesible.
Nota - Los valores de cookies no pueden incluir un punto y coma, comas o espacios en blanco. Por esta razón, es posible que desee utilizar el JavaScript de escape () función para codificar el valor antes de guardarla en la cookie. Si usted hace esto, usted también tendrá que utilizar el correspondiente unescape () función cuando se lee el valor de la cookie.
Ejemplo
Pruebe lo siguiente. Establece un nombre de cliente en una cookie de entrada.
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
if( document.myform.customer.value == "" ){
alert("Enter some value!");
return;
}
cookievalue= escape(document.myform.customer.value) + ";";
document.cookie="name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>
Salida
Ahora el equipo tiene una cookie llamada nombre. Puede configurar múltiples galletas utilizando múltiples pares clave = valor separados por comas.
La lectura de las galletas
La lectura de una cookie es tan simple como escribir uno, debido a que el valor del objeto document.cookie es la cookie. Así que usted puede utilizar esta cadena cada vez que desee acceder a la cookie. La cadena document.cookie mantendrá una lista de nombre = valor pares separados por punto y coma, donde nombre es el nombre de una galleta y valor es el valor de la cadena.
Puede utilizar cadenas 'split () la función de romper una cadena en clave y los valores de la siguiente manera -
Ejemplo
Pruebe el siguiente ejemplo para obtener todos los cookies.
<html>
<head>
<script type="text/javascript">
<!--
function ReadCookie()
{
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++){
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<p> click the following button and see the result:</p>
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>
Nota - Aquí longitud es un método de matriz de clase que devuelve la longitud de una matriz. Vamos a discutir matrices en un capítulo aparte. Por ese tiempo, intenta digerir.
Nota - Puede haber algunas otras cookies ya establecidos en su máquina. El código anterior mostrará todas las cookies creadas en su máquina.
Configuración de cookies Fecha de caducidad
Puede extender la vida de una galleta más allá de la sesión actual del navegador mediante el establecimiento de una fecha de caducidad y el ahorro de la fecha de caducidad en el cookie. Esto se puede hacer mediante el establecimiento de la "expira"atributo a una fecha y hora.
Ejemplo
Pruebe el siguiente ejemplo. Ilustra cómo extender la fecha de expiración de una cookie por 1 mes.
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
Salida
Eliminación de una galleta
A veces tendrá que eliminar una cookie para que los intentos posteriores para leer la nada retorno cookie. Para ello, sólo tiene que ajustar la fecha de caducidad a un tiempo en el pasado.
Ejemplo
Pruebe el siguiente ejemplo. Ilustra cómo eliminar una cookie mediante el establecimiento de la fecha de caducidad a un mes tras la fecha actual.
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
Salida
JavaScript - Página redirección
¿Qué es la página de redirección?
Es posible que haya encontrado con una situación en la que hizo clic una dirección URL para llegar a una página X pero internamente se le ha remitido a otra página Y. Esto ocurre debido a la página de redirección. Este concepto es diferente de JavaScript Actualizar página.
Podría haber varias razones por las que le gustaría volver a dirigir a un usuario de la página original. Estamos enumerando abajo algunas de las razones -
- No te gustaba el nombre de su dominio y se está mudando a una nueva. En tal escenario, es posible que desee dirigir todos sus visitantes al nuevo sitio. Aquí usted puede mantener su antiguo dominio, pero poner una sola página con una redirección de la página de forma que aparezca dominio viejos pueden llegar a su nuevo dominio.
- Has urbanizada varias páginas basadas en versiones de navegadores o sus nombres o puede estar basado en diferentes países, a continuación, en lugar de utilizar la página en el servidor de redirección, puede utilizar la página del lado del cliente de redirección a la tierra de sus usuarios en la página correspondiente.
- Los motores de búsqueda pueden ya han indexado sus páginas. Pero mientras se mueve a otro dominio, que no le gustaría perder a sus visitantes que vienen a través de motores de búsqueda. Así que usted puede utilizar la página del lado del cliente de redirección. Pero tenga en cuenta que esto no se debe hacer para engañar a los motores de búsqueda, que podría conducir a su sitio para obtener prohibido.
Cómo Página Obras Re-dirección?
Las implementaciones de Página-redirección son los siguientes.
Ejemplo 1
Es muy simple de hacer una redirección página usando JavaScript en el lado del cliente.Para redirigir a sus visitantes a una página nueva, sólo tiene que añadir una línea en su sección de la cabeza de la siguiente manera.
<html>
<head>
<script type="text/javascript">
<!--
function Redirect() {
window.location="http://www.tutorialspoint.com";
}
//-->
</script>
</head>
<body>
<p>Click the following button, you will be redirected to home page.</p>
<form>
<input type="button" value="Redirect Me" onclick="Redirect();" />
</form>
</body>
</html>
Salida
Ejemplo 2
Usted puede mostrar un mensaje adecuado a sus visitantes del sitio antes de redirigir a una página nueva. Esto necesitaría un tiempo de retardo de bits para cargar una nueva página. El siguiente ejemplo muestra cómo implementar la misma. Aquí setTimeout () es una función incorporada en JavaScript que puede ser utilizado para ejecutar otra función después de un intervalo de tiempo dado.
<html>
<head>
<script type="text/javascript">
<!--
function Redirect() {
window.location="http://www.tutorialspoint.com";
}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</script>
</head>
<body>
</body>
</html>
Salida
You will be redirected to tutorialspoint.com main page in 10 seconds!
Ejemplo 3
El siguiente ejemplo muestra cómo redirigir a sus visitantes a una página diferente, basado en sus navegadores.
<html>
<head>
<script type="text/javascript">
<!--
var browsername=navigator.appName;
if( browsername == "Netscape" )
{
window.location="http://www.location.com/ns.htm";
}
else if ( browsername =="Microsoft Internet Explorer")
{
window.location="http://www.location.com/ie.htm";
}
else
{
window.location="http://www.location.com/other.htm";
}
//-->
</script>
</head>
<body>
</body>
</html>
JavaScript - Cuadros de diálogo
JavaScript soporta tres tipos importantes de cuadros de diálogo. Estos cuadros de diálogo se pueden utilizar para subir y alerta, o para obtener la confirmación de cualquier entrada o tener un tipo de entrada de los usuarios. Aquí vamos a discutir cada cuadro de diálogo uno a uno.
Cuadro de diálogo Alerta
Un cuadro de diálogo de alerta se utiliza sobre todo para dar un mensaje de advertencia a los usuarios. Por ejemplo, si un campo de entrada requiere que introduzca algún texto, pero el usuario no proporciona ninguna entrada, a continuación, como parte de la validación, puede utilizar un cuadro de alerta para dar un mensaje de advertencia.
Sin embargo, un cuadro de alerta se puede seguir utilizando para los mensajes más amigables. Cuadro de alerta le da sólo un botón "OK" para seleccionar y proceder.
Ejemplo
<html>
<head>
<script type="text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="Warn();" />
</form>
</body>
</html>
Salida
Cuadro de diálogo de confirmación
Un cuadro de diálogo de confirmación se utiliza sobre todo para tener el consentimiento del usuario en cualquier opción. Muestra un cuadro de diálogo con dos botones:Cancelar.
Si el usuario hace clic en el botón Aceptar, el método de la ventana de confirmación ()devolverá true. Si el usuario hace clic en el botón Cancelar, luego confirmar () devuelve falso. Puede utilizar un cuadro de diálogo de confirmación de la siguiente manera.
Salida
<html>
<head>
<script type="text/javascript">
<!--
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
return true;
}
else{
Document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getConfirmation();" />
</form>
</body>
</html>
Salida
Cuadro de diálogo Prompt
El cuadro de diálogo del sistema es muy útil cuando se desea pop-up de un cuadro de texto para obtener la entrada del usuario. Por lo tanto, le permite interactuar con el usuario. El usuario tiene que llenar el campo y haga clic en Aceptar.
Se muestra este cuadro de diálogo utilizando un método llamado prompt () que toma dos parámetros: (i) una etiqueta que desea mostrar en el cuadro de texto y (ii) una cadena predeterminada que se mostrará en el cuadro de texto.
Este cuadro de diálogo tiene dos botones: Aceptar y Cancelar. Si el usuario hace clic en el botón Aceptar, el método de la ventana prompt () devolverá el valor introducido en el cuadro de texto. Si el usuario hace clic en el botón Cancelar, el método de la ventanaprompt () devuelve nulo.
Ejemplo
El siguiente ejemplo muestra cómo utilizar un cuadro de diálogo de solicitud -
<html>
<head>
<script type="text/javascript">
<!--
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body>
</html>
Salida
JavaScript - Palabra clave Void
void es una palabra clave importante en JavaScript que puede ser utilizado como un operador unario que aparece antes de su único operando, que puede ser de cualquier tipo. Este operador especifica una expresión para ser evaluada sin devolver un valor.
Sintaxis
La sintaxis de vacío puede ser cualquiera de los dos siguientes -
<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()
or:
void(func())
javascript:void(func())
//-->
</script>
</head>
Ejemplo 1
El uso más común de este operador se encuentra en un lado del cliente javascript: URL, donde se le permite evaluar una expresión para sus efectos secundarios sin el explorador que muestra el valor de la expresión evaluada.
Aquí la expresión alert ('Advertencia !!!') se evalúa pero no se carga de nuevo en el documento actual -
<html>
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<p>Click the following, This won't react at all...</p>
<a href="javascript:void(alert('Warning!!!'))">Click me!</a>
</body>
</html>
Salida
Ejemplo 2
Echa un vistazo a el siguiente ejemplo. En el siguiente enlace no hace nada porque la expresión "0" no tiene ningún efecto en JavaScript. Aquí se evalúa la expresión "0", pero no se carga de nuevo en el documento actual.
<html>
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<p>Click the following, This won't react at all...</p>
<a href="javascript:void(0))">Click me!</a>
</body>
</html>
Salida
Ejemplo 3
Otro uso de vacío es generar deliberadamente la Indefinido valor como sigue.
<html>
<head>
<script type="text/javascript">
<!--
function getValue(){
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body>
</html>
Salida
JavaScript - Página de impresión
Muchas veces les gustaría colocar un botón en su página web para imprimir el contenido de esa página web a través de una impresora real. JavaScript ayuda a implementar esta funcionalidad utilizando la impresión de la función de ventana deobjeto.
La función de impresión JavaScript window.print () imprime la página web actual cuando se ejecuta. Usted puede llamar a esta función directamente mediante el onclickevento como se muestra en el siguiente ejemplo.
Ejemplo
Pruebe el siguiente ejemplo.
<html>
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>
<html>
Salida
A pesar de que sirve al propósito de conseguir una impresión, no es un método recomendado. Una página para imprimir en realidad es sólo una página con el texto, sin imágenes, gráficos, o la publicidad.
Usted puede hacer un printer friendly page de las siguientes maneras -
- Haga una copia de la página y dejar de lado el texto deseado y gráficos, a continuación, vincular a esa página para imprimir de la original. CompruebeEjemplo.
- Si no desea guardar una copia adicional de una página, entonces usted puede marcar el texto para imprimir usando los comentarios apropiados como <! - IMPRESIÓN COMIENZA AQUÍ -> ..... <! - PRINT TERMINA AQUÍ -> y entonces usted puede utilizar Perl o cualquier otro script en segundo plano para purgar texto imprimible y visualización para la impresión final. Nosotros en Tutorialspoint utilizamos este método para proporcionar instalaciones de impresión a nuestros visitantes del sitio. Compruebe Ejemplo.
Cómo imprimir una página
Si usted no encuentra las instalaciones anteriores en una página web, entonces usted puede utilizar la barra de herramientas estándar del navegador para obtener imprimir la página web. Siga el enlace de la siguiente manera.
File → Print → Click OK button.
JavaScript - Objetos Información general
JavaScript es un lenguaje de programación orientada a objetos (POO). Un lenguaje de programación se puede llamar si proporciona cuatro capacidades básicas a los desarrolladores orientada a objetos -
- Encapsulación - la capacidad de almacenar información relacionada, si los datos o métodos, juntos en un objeto.
- Agregación - la capacidad para almacenar un objeto dentro de otro objeto.
- Herencia - la capacidad de una clase a confiar en otra clase (o número de clases) para algunas de sus propiedades y métodos.
- Polimorfismo - la capacidad de escribir una función o método que funciona en una variedad de maneras diferentes.
Los objetos se componen de atributos. Si un atributo contiene una función, se considera que es un método del objeto, de lo contrario el atributo se considera una propiedad.
Propiedades del objeto
Propiedades de objeto pueden ser cualquiera de los tres tipos de datos primitivos, o cualquiera de los tipos abstractos de datos, tal como otro objeto. Propiedades del objeto suelen ser las variables que se utilizan internamente en los métodos del objeto, pero también pueden ser las variables a nivel mundial visibles que se utilizan en toda la página.
La sintaxis para añadir una propiedad a un objeto es -
objectName.objectProperty = propertyValue;
Por ejemplo - El código siguiente obtiene el título del documento usando el "título" de propiedad del documento objeto.
var str = document.title;
Métodos de objeto
Los métodos son las funciones que permiten al objeto de hacer algo o dejar que se haga algo a ella. Hay una pequeña diferencia entre una función y un método - en una función es una unidad independiente de los estados y un método está unido a un objeto y se puede hacer referencia por el este de palabras clave.
Los métodos son útiles para todo, desde la visualización de los contenidos del objeto a la pantalla para realizar operaciones matemáticas complejas en un grupo de propiedades locales y parámetros.
Por ejemplo - A continuación se presenta un ejemplo simple para mostrar cómo utilizar la escritura () método del documento objeto de escribir cualquier contenido en el documento.
document.write("This is test");
Objetos definidos por el usuario
Todos los objetos definidos por el usuario y los objetos incorporados son descendientes de un objeto llamado objeto.
El nuevo operador
El nuevo operador se utiliza para crear una instancia de un objeto. Para crear un objeto, el nuevo operador es seguido por el método constructor.
En el siguiente ejemplo, los métodos constructores son Object (), Array () y Date (). Estos constructores están incorporados en las funciones de JavaScript.
var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");
El Object () Constructor
Un constructor es una función que crea e inicializa un objeto. JavaScript ofrece una función especial llamada constructor Object () para construir el objeto. El valor de retorno del Object () constructor se asigna a una variable.
La variable contiene una referencia al nuevo objeto. Las propiedades asignadas al objeto no son variables y no se definen con la var palabra clave.
Ejemplo 1
Pruebe el siguiente ejemplo; que muestra cómo crear un objeto.
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object(); // Create the object
book.subject = "Perl"; // Assign properties to the object
book.author = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>
Salida
Book name is : Perl
Book author is : Mohtashim
Ejemplo 2
Este ejemplo muestra cómo crear un objeto con una función definida por el usuario.Aquí esta palabra clave se utiliza para hacer referencia al objeto que se ha pasado a una función.
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
this.title = title;
this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>
Salida
Book title is : Perl
Book author is : Mohtashim
Definir métodos para un objeto
Los ejemplos anteriores muestran cómo el constructor crea el objeto y le asigna propiedades. Pero tenemos que completar la definición de un objeto mediante la asignación de métodos a la misma.
Ejemplo
Pruebe el siguiente ejemplo; que muestra cómo agregar una función, junto con un objeto.
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
// Define a function which will work as a method
function addPrice(amount){
this.price = amount;
}
function book(title, author){
this.title = title;
this.author = author;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>
Salida
Book title is : Perl
Book author is : Mohtashim
Book price is : 100
El 'con' Palabra clave
El "por" palabra clave se utiliza como una especie de taquigrafía para hacer referencia a propiedades de un objeto o métodos.
El objeto especificado como argumento para la convierte en el objeto predeterminado de la duración del bloqueo que sigue. Las propiedades y métodos para el objeto puede utilizarse sin nombrar el objeto.
Sintaxis
La sintaxis para con objeto es la siguiente -
with (object){
properties used without the object name and dot
}
Ejemplo
Pruebe el siguiente ejemplo.
<html>Salida
<head>
<title>User-defined objects</title>
<script type="text/javascript">
// Define a function which will work as a method
function addPrice(amount){
with(this){
price = amount;
}
}
function book(title, author){
this.title = title;
this.author = author;
this.price = 0;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>
Book title is : Perl
Book author is : Mohtashim
Book price is : 100
Nativo JavaScript Objetos
JavaScript tiene varios incorporado u objetos nativos. Estos objetos son accesibles en cualquier parte de su programa y trabajarán de la misma manera en cualquier navegador que se ejecuta en cualquier sistema operativo.
Aquí está la lista de todos los importantes JavaScript nativos Objetos -
