Java script

JavaScript Introducción

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

Lo que usted ya debe saber

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

HTML y CSS

¿Qué es JavaScript?

JavaScript se ha diseñado para añadir interactividad a las páginas HTML JavaScript es un lenguaje de scripting Un lenguaje de programación es un lenguaje de programación ligero JavaScript no está por lo general integrados directamente en páginas HTML JavaScript es un lenguaje interpretado (significa que las secuencias de comandos ejecutar sin

recopilación preliminar) Todo el mundo puede usar JavaScript sin necesidad de adquirir una licencia

Java y JavaScript son lo mismo?

¡NO!

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

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

¿Qué puede hacer JavaScript?

JavaScript da a los diseñadores una herramienta de programación HTML - los autores de HTML no son normalmente los programadores, pero JavaScript es un lenguaje de script con una sintaxis muy simple! Casi cualquier persona puede poner pequeños "fragmentos" de código en sus páginas HTML

JavaScript puede reaccionar a los acontecimientos - Un JavaScript puede ser configurado para ejecutarse cuando algo sucede, como cuando una página ha terminado de cargar o cuando un usuario hace clic en un elemento HTML

JavaScript puede manipular elementos HTML - Un JavaScript puede leer y modificar el contenido de un elemento HTML

JavaScript se puede utilizar para validar los datos - Un JavaScript se puede utilizar para validar la entrada de forma

JavaScript puede ser utilizado para detectar el navegador del visitante - Un JavaScript puede ser utilizado para detectar el navegador del visitante, y - en función del navegador - cargar otra página diseñada específicamente para que el navegador

JavaScript puede ser usado para crear las cookies - Un JavaScript puede ser usado para almacenar y recuperar información en la computadora del visitante

= JavaScript ECMAScript

JavaScript es una implementación del lenguaje estándar ECMAScript. ECMA-262 es el estándar oficial de JavaScript.

JavaScript fue inventado por Brendan Eich en Netscape (con Navigator 2.0), y ha aparecido en todos los navegadores desde 1996.

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

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

El desarrollo está todavía en curso.

JavaScript Cómo

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

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

La manipulación de elementos HTML

JavaScript se utiliza normalmente para manipular elementos HTML existentes.

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

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

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

Ejemplo

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

<!DOCTYPE html><html><body><h1>My First Web Page</h1><p id="demo">My First Paragraph</p><script type="text/javascript">document.getElementById("demo").innerHTML="My First JavaScript";</script></body></html>

Ejemplo Explicación

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

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

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

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

<p id="demo">My First Paragraph.</p>

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

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

Algunos navegadores no soportan JavaScript

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

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

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

<!DOCTYPE html><html><body><script type="text/javascript"></script></body></html>

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

Escribir directamente en el documento HTML

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

Ejemplo

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

JavaScript Dónde

JavaScript se puede poner en el <body> y en las secciones <head> de una página HTML.

JavaScript en <body>

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

Ejemplo

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

<button type="button" onclick="myFunction()">Try it</button><script type="text/javascript">function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></body></html>

Secuencias de comandos en <head> y <body>

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

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

Usando un JavaScript externo

Activar también se puede colocar en archivos externos.

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

Archivos JavaScript externos tienen la extensión. Js.

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

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

Ejemplo

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

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

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

JavaScript declaraciones

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

JavaScript es entre mayúsculas y minúsculas

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

Las declaraciones de JavaScript

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

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

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

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

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

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

JavaScript Code

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

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

En este ejemplo se va a manipular dos elementos HTML:

Ejemplo

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

Los bloques de JavaScript

Sentencias de JavaScript se pueden agrupar en bloques.

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

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

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

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

Ejemplo

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

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

JavaScript Comentarios

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

JavaScript Comentarios

Los comentarios no serán ejecutados por JavaScript.

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

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

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

Ejemplo

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

JavaScript comentarios de varias líneas

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

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

Ejemplo

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

Uso de comentarios para evitar la ejecución

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

Ejemplo

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

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

Ejemplo

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

Uso de comentarios al final de una línea

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

Ejemplo

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

JavaScript Variables

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

¿Te acuerdas de Álgebra de la Escuela?

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

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

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

Las variables de JavaScript

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

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

Reglas para los nombres de JavaScript variables:

Los nombres de variables distinguen entre mayúsculas y minúsculas (y e Y son dos variables diferentes)

Los nombres de variables deben comenzar con una letra, el carácter $, o el carácter de subrayado

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

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

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

Usted declara variables de JavaScript con la var palabra clave:

var carname;

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

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

carname="Volvo";

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

var carname="Volvo";

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

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

Ejemplo

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

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

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

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

Las variables locales de JavaScript

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

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

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

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

Variables globales de JavaScript

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

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

Asignación de valores a las variables no declaradas JavaScript

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

Esta declaración:

carname="Volvo";

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

JavaScript Aritmética

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

Ejemplo

y=5;x=y+2;

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

JavaScript Operadores

= Se utiliza para asignar valores.

+ Se utiliza para agregar valores.

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

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

Ejemplo

Asigne valores a las variables y los sumará:

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

El resultado de x será:

7

JavaScript Operadores aritméticos

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

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

Operador Descripción Ejemplo Resultado de la x

Resultado de la y

Inténtelo

+ Adición x = y 2 7 5 Pruébelo »

- Sustracción x = y-2 3 5 Pruébelo »

* Multiplicación x = y * 2 10 5 Pruébelo »

/ División x = y / 2 2.5 5 Pruébelo »

% Módulo (resto de división) x = y 2% 1 5 Pruébelo »

+ + Incremento x = + + y 6 6 Pruébelo »

x = y + + 5 6 Pruébelo »

- Disminuir x = - Y 4 4 Pruébelo »

x = y - 5 4 Pruébelo »

JavaScript Operadores de asignación

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

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

Operador Ejemplo Igual que Resultado Inténtelo

= x = y x = 5 Pruébelo »

+ = x + = y x = x + y x = 15 Pruébelo »

- = x = y x = xy x = 5 Pruébelo »

* = x * = y x = x * y x = 50 Pruébelo »

/ = x / = y x = x / y x = 2 Pruébelo »

% = % x = y x = x% y x = 0 Pruébelo »

El operador + utiliza en cadenas

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

Ejemplo

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

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

El resultado de txt3 será:

What a verynice day

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

Ejemplo

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


What a very nice day

o insertar un espacio en la expresión:

Ejemplo

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


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á:

1055Hello5

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

JavaScript Comparación y Operadores lógicos

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

Operadores de comparación

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

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

Operador Descripción Comparando Devoluciones Inténtelo

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

»

x == 5 verdadero Pruébelo

»

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

»

x 5 === verdadero Pruébelo

»

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

»

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

http://www.w3schools.com/js/tryit.asp?filename=tryjs_comparison6











»

x! == 5 falso Pruébelo

»

> es mayor que x> 8 falso Pruébelo

»

< es menor que x <8 verdadero Pruébelo

»

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

»

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

»

¿Cómo puede ser utilizado

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

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

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

Operadores lógicos

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

Teniendo en cuenta que x = 6 yy = 3 , la siguiente tabla se explican los operadores lógicos:

Operador Descripción Ejemplo

&& y (X <10 && y> 1) es verdadera

| | o (X == 5 | | y == 5) es falsa

! no ! (X == y) es verdadera

Operador condicional

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












Sintaxisvariablename=(condition)?value1:value2

EjemploEjemplo

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.

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

Sintaxisif (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"; }


Good evening

Si ... else if ... else

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

Sintaxisif (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"; }


Good evening

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

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

JavaScript interruptor Declaración

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

La sentencia switch JavaScript

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

Sintaxisswitch(n){case 1: execute code block 1 break;case 2: execute code block 2 break;

http://www.w3schools.com/js/tryit.asp?filename=tryjs_randomlink

default: code to be executed if n is different from case 1 and 2}

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

Ejemplo

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

var day=new Date().getDay();switch (day){case 0: x="Today it's Sunday"; break;case 1: x="Today it's Monday"; break;case 2: x="Today it's Tuesday"; break;case 3: x="Today it's Wednesday"; break;case 4: x="Today it's Thursday"; break;case 5: x="Today it's Friday"; break;case 6: x="Today it's Saturday"; break;}


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";}


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.

Sintaxisalert("sometext");

Ejemplo

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

Confirme Caja

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

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

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

Sintaxisconfirm("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.

Sintaxisprompt("sometext","defaultvalue");

Ejemplo

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

Saltos de línea

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

Ejemplo

alert("Hello\nHow 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

Sintaxisfunction functionname(){some code}

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

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

Ejemplo de la función JavaScript

Ejemplo

<!DOCTYPE html><html><head><script type="text/javascript">function myFunction(){alert("Hello World!");}</script></head><body><button onclick="myFunction()">Try it</button></body></html>

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

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

Llamar a una función con argumentos

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

Estos argumentos se pueden utilizar dentro de la función.

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

myFunction(argument1,argument2)

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

function myFunction(var1,var2){some code}

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

Ejemplo

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

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

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

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

Ejemplo

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

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

Funciones con un valor devuelto

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

Esto es posible mediante el retorno comunicado.

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

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

La función anterior devolverá el valor 5.

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

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

var myVar=myFunction();

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

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

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

El innerHTML de la "demo" de los elementos será de 5, que es lo que la función de "myFunction ()" devuelve.

Usted puede hacer una returnvalue sobre la base de argumentos pasados a la función:

Ejemplo

Calcular el producto de dos números, y devolver el resultado:

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

document.getElementById("demo").innerHTML=myFunction(4,3);

El innerHTML de la "demo" de los elementos serán:

12

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

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

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

La duración de las variables de JavaScript

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

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

JavaScript Para Loop

Para Loops se ejecutará un bloque de código un número específico de veces.

JavaScript Loops

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

En JavaScript, hay dos diferentes tipos de circuitos:

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

especificada es verdadera

El bucle for

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

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

Ejemplo

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

Nota: El parámetro de incremento también podría ser negativo, y el <puede ser cualquier sentencia comparar.

Ejemplo

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

El bucle while

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

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

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

http://www.w3schools.com/js/tryit.asp?filename=tryjs_fornext_header

}while (variable<endvalue);

Ejemplo

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

Ejemplo

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

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

JavaScript break y continue Declaraciones

La sentencia break

La sentencia break se rompe el ciclo y continuar ejecutando el código que sigue después del bucle (si existe).

Ejemplo

for (i=0;i<10;i++) { if (i==3) { break; } x=x + "The number is " + i + "<br />"; }

La sentencia continue

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

Ejemplo

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

Para activar ... En la Declaración

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

Sintaxisfor (variable in object) { code to be executed }

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

Ejemplo

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

Ejemplo

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

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

JavaScript Eventos

Los eventos son acciones que pueden ser detectados por JavaScript.

Ejemplo

Mouse Over Me

Click Me

Eventos

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

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

Ejemplos de eventos:

Al hacer clic en un botón (o cualquier otro elemento HTML) Una página haya terminado de cargarse Una imagen se termina de cargar Moviendo el cursor del ratón sobre un elemento Introducción de un campo de entrada Envío de un formulario Un golpe de teclado

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

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

HTML atributos de eventos

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

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

Ejemplo

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

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

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

Asignación de Uso de Eventos del DOM HTML

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

Ejemplo

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

<script type="text/javascript">

document.getElementById("myBtn").onclick=function(){displayDate()};

</script>

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

onload y onunload

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

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

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

Ejemplo

<body onload="checkCookies()" />

onfocus, onblur y onchange

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

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

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

onsubmit

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

A continuación se muestra un ejemplo de cómo utilizar el evento onsubmit. El checkForm () la función se llama cuando el usuario hace clic en el botón de enviar en el formulario. Si los valores de los campos no son aceptadas, el submit se debe cancelar.

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

onmouseover, onmouseout

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

Ejemplo

Un simple onmouseover onmouseout-ejemplo:

Mouse Over Me

onmousedown, onmouseup y onclick

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

Ejemplo

Un simple onmousedown-onmouseup ejemplo:

Click Me

JavaScript Try ... Catch Declaración

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

- Los errores de JavaScript Catching

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

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

El try ... catch

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

Sintaxistry { //Run some code here }catch(err) {

//Handle errors here }

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

Ejemplos

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

Ejemplo

<!DOCTYPE html><html><head><script type="text/javascript">var txt="";function message(){try { adddlert("Welcome guest!"); }catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; 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">

<!DOCTYPE html><html><body><script type="text/javascript">var x=prompt("Enter a number between 5 and 10:","");try { if(x>10) { throw "Err1"; } else if(x<5) { throw "Err2"; } else if(isNaN(x)) { throw "Err3"; } }catch(err) { if(err=="Err1") { document.write("Error! The value is too high."); } if(err=="Err2") { document.write("Error! The value is too low."); } if(err=="Err3") { document.write("Error! The value is not a number."); } }</script></body></html>

JavaScript Caracteres especiales

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

Insertar caracteres especiales

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

Mira el siguiente código JavaScript:

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

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

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

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

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

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

Código Salidas

\ ' comilla simple

\ " comillas dobles

\ \ barra diagonal inversa

\ N nueva línea

\ R retorno de carro

\ T lengüeta

\ B tecla de retroceso

\ F formar alimentación

JavaScript Directrices

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

JavaScript es entre mayúsculas y minúsculas

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

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

Espacio en blanco

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

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

Romper una línea de código

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

document.write("Hello \World!");

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

document.write \("Hello World!");

JavaScript Objetos Introducción

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

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

Objeto de programación basada en

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

Sin embargo, crear sus propios objetos se explicará más adelante, en la sección avanzada de JavaScript. Vamos a empezar mirando a la incorporada en objetos JavaScript, y cómo se utilizan. En las páginas siguientes se explica cada objeto incorporado en JavaScript en detalle.

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

Propiedades

Las propiedades son los valores asociados a un objeto.

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

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

La salida del código anterior será:

12

Métodos

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

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

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

La salida del código anterior será:

HELLO WORLD!

JavaScript cadena de objetos

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

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

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

Cadenas de estiloCó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 deCómo convertir una cadena en minúsculas o mayúsculas.

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

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

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

</script>

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

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

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

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

Cadena completa referencia de objeto

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

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

Objeto String

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

Ejemplos de uso:

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

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

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

12

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

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


HELLO WORLD!

JavaScript Fecha de objetos

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

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

<script type="text/javascript">var d=new Date();document.write(d);</script>

getFullYear ()Uso getFullYear () para obtener el año.

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

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

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

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

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

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

<script type="text/javascript">function myFunction(){

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_toutcstring

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_setfullyear2

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_gettime

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_getfullyear

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_date

</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 timenew Date(milliseconds) //milliseconds since 1970/01/01new 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:

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

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

Crear una matriz

Una matriz puede ser definida de tres maneras.

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

1:

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

2:

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

3:

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

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

Acceso a una matriz

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

La siguiente línea de código:

document.write(myCars[0]);

resultará en el siguiente resultado:

Saab

Modificar los valores de una matriz

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

myCars[0]="Opel";

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

document.write(myCars[0]);

resultará en el siguiente resultado:

Opel

JavaScript Boolean Objeto

El objeto Boolean se utiliza para convertir un valor no-booleano en un valor booleano (verdadero o falso).

Comprobar el valor de BooleanComprueba 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 ().

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_round

http://www.w3schools.com/js/tryit.asp?filename=tryjs_boolean

Math.EMath.PIMath.SQRT2Math.SQRT1_2Math.LN2Math.LN10Math.LOG2EMath.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));


5

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

document.write(Math.random());

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

0.9232565215788782

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

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

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

5

JavaScript RegExp objeto

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

¿Qué es RegExp?

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

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

Un modelo sencillo puede ser un solo carácter.

Un patrón más complicado puede constar de más caracteres, y puede ser utilizado para el análisis, la comprobación de formato, sustitución y más.

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

Sintaxis

var patt=new RegExp(pattern,modifiers);

or more simply:

var patt=/pattern/modifiers;

patrón especifica el patrón de una expresión modificadores de especificar si la búsqueda debe ser global, mayúsculas y minúsculas, etc

RegExp Modificadores

Los modificadores se utilizan para realizar búsquedas entre mayúsculas y minúsculas y mundial.

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

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

Ejemplo 1

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

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

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

Visit W3Schools

Ejemplo 2

Haga una búsqueda mundial de "es":

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


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;


Is this all there is?

test ()

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

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

Ejemplo

var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));

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

true

exec ()

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

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

Ejemplo 1

var patt1=new RegExp("e");document.write(patt1.exec("The best things in life are free"));

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

e

JavaScript Detección del navegador

El objeto navigator contiene información sobre el navegador del visitante.

Detección del navegador

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

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

El objeto navigator contiene información sobre el nombre del navegador del visitante, la versión, y mucho más.

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

El objeto navigator

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

Ejemplo

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

JavaScript cookies

Una cookie a menudo se utiliza para identificar un usuario.

¿Qué es una cookie?

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

Ejemplos de cookies:

Nombre de cookies - La primera vez que un visitante llega a su página web, él o ella debe llenar en su su / nombre. El nombre se almacena en una cookie. La próxima vez que el visitante llega a tu página, él o ella podría recibir un mensaje de bienvenida como "Pérez Bienvenido John!" El nombre se recupera de la cookie almacenada

Fecha de galletas - La primera vez que un visitante llega a su página web, la fecha actual se almacena en una cookie. La próxima vez que el visitante llega a tu página, él o ella podría recibir un mensaje como "Su última visita fue el martes 11 de agosto de 2005!" La fecha se recupera de la cookie almacenada

Crear y guardar una cookie

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

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

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

Los parámetros de la función por encima de mantener el nombre de la cookie, el valor de la cookie, y el número de días hasta que la cookie expira.

En la función anterior por primera vez convertir el número de días a una fecha válida, entonces añadimos el número de días hasta que la cookie debe expirar. Después de eso se guarda el nombre de la cookie, valor de la cookie y la fecha de caducidad en el objeto document.cookie.

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

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

La función de arriba hace un arreglo para recuperar los nombres de las cookies y los valores, a continuación, comprueba si la cookie especificada existe, y devuelve el valor de la cookie.

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

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

Todos juntos ahora:

Ejemplo

<!DOCTYPE html><html><head>

Los datos del formulario que normalmente están controladas por un código JavaScript podría ser:

ha dejado que el usuario requiere campos vacíos? el usuario ha entrado en una dirección de e-mail? se ha introducido por el usuario una fecha válida? el usuario ha introducido texto en un campo numérico?

Campos obligatorios

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

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

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

Ejemplo

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

E-mail de validación

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

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

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

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

Ejemplo

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

JavaScript eventos de temporización

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

Es muy fácil a los eventos de tiempo en JavaScript. Los dos métodos principales que se utilizan son:

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

de milisegundos

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

El método setInterval ()

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

SintaxissetInterval("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);}

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

SintaxisclearTimeout(timeoutVariable)

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

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

Entonces, si la función no ha Allready que se está ejecutando, usted será capaz de detener la ejecución mediante una llamada al método clearTimeout ().

Ejemplo

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

var myVar;

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

function myStopFunction(){clearTimeout(myVar);}

JavaScript crear sus propios objetos

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

Crear una instancia directa de un objeto

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

Crear una plantilla para un objeto

<script type="text/javascript">

http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object2

http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object1

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

Los objetos JavaScript

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

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

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

Propiedades

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

objName.propName

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

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

document.write(personObj.firstname);

El código anterior genera el siguiente resultado:

John

Métodos

Un objeto también puede contener métodos.

Usted puede llamar a un método con la siguiente sintaxis:

objName.methodName()

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

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

personObj.sleep();

Crear sus propios objetos

Hay diferentes maneras para crear un nuevo objeto:

1. Crear una instancia directa de un objeto

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

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

sintaxis alternativa (mediante literales de objetos):

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

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

personObj.eat=eat;

2. Crear un constructor de objetos

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

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

Dentro de la función que usted necesita para asignar cosas que this.propertyName. La razón de todo el "este" material es que usted va a tener más de una persona a la vez (que la persona que está tratando debe ser claro). Eso es lo que es "esto": la instancia del objeto en la mano.

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

var myFather=new person("John","Doe",50,"blue");var myMother=new person("Sally","Rally",48,"green");

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

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

this.newlastname=newlastname;}

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

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

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

Java script

Documents

Transcript of Java script