Your SlideShare is downloading. ×
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Java script
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Java script

747

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
747
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript IntroducciónJavaScript es el lenguaje de programación más popular en Internet, y trabaja en todos los principalesnavegadores, como Internet Explorer, Firefox, Chrome, Opera y Safari.Lo que usted ya debe saberAntes 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 licenciaJava 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áscomplejo - 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 ECMAScriptJavaScript es una implementación del lenguaje estándar ECMAScript. ECMA-262 es el estándar oficialde JavaScript.
  • 2. JavaScript fue inventado por Brendan Eich en Netscape (con Navigator 2.0), y ha aparecido en todoslos navegadores desde 1996.El oficial de normalización fue adoptada por la organización ECMA (Asociación estandarización de laindustria) en 1997.El estándar ECMA (llamado ECMAScript-262) fue aprobado como norma internacional (ISO / IEC16262) estándar en 1998.El desarrollo está todavía en curso.JavaScript CómoLa 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 HTMLJavaScript 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.EjemploAcceder 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ónPara 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 elnavegador:<p id="demo">My First Paragraph.</p>
  • 3. <script type="text/javascript">document.getElementById("demo").innerHTML="My First JavaScript";</script>En este caso, el navegador acceder al elemento HTML con id = "demo", y sustituir el contenido con "Miprimer JavaScript".Algunos navegadores no soportan JavaScriptLos 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 comentarioHTML 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 deJavaScript, y un -> (fin de comentario) después de la última declaración de JavaScript, de estamanera:<!DOCTYPE html><html><body><script type="text/javascript"><!--document.getElementById("demo").innerHTML="My First JavaScript";//--></script></body></html>Las dos barras inclinadas al final de la línea de comentario (/ /) es el símbolo de comentarioJavaScript. Esto evita que se ejecute al activar - tag>.Escribir directamente en el documento HTMLEl 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óndeJavaScript se puede poner en el <body> y en las secciones <head> de una página HTML.JavaScript en <body>El siguiente ejemplo manipular el contenido de un elemento <p> existente cuando se carga la página:Ejemplo
  • 4. <!DOCTYPE html><html><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><script type="text/javascript">document.getElementById("demo").innerHTML="My First JavaScript";</script></body></html>Nota: El código JavaScript se coloca en la parte inferior de la página para asegurarse de que no seejecuta antes de que el elemento de <p> se crea.JavaScript Funciones y EventosLa declaración de JavaScript en el ejemplo anterior, se ejecuta cuando se carga la página, pero eso nosiempre es lo que queremos.A veces queremos ejecutar un JavaScript cuando ocurre un evento, como por ejemplo cuando unusuario hace clic en un botón.Luego ponemos el script dentro de una función .Las funciones se utilizan normalmente en combinación con los eventos .Usted aprenderá más acerca de las funciones de JavaScript y eventos en los capítulos posteriores.Funciones en JavaScript <head>El siguiente ejemplo llama a una función cuando se hace clic en un botón:Ejemplo<!DOCTYPE html><html><head><script type="text/javascript">function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></head><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button></body></html>Funciones en JavaScript <body>Este ejemplo también llama a una función cuando un botón es pulsado, pero el guión se coloca en laparte inferior de la página:Ejemplo
  • 5. <!DOCTYPE html><html><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button><script type="text/javascript">function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></body></html>Secuencias de comandos en <head> y <body>Usted puede colocar un número ilimitado de secuencias de comandos en el documento, y usted puedetener 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 inferiorde 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 externoActivar 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 declaracionesJavaScript es una secuencia de sentencias que se ejecutan en el navegador.JavaScript es entre mayúsculas y minúsculasA diferencia de HTML, JavaScript es sensible a mayúsculas - por lo tanto, ver su capitalización decerca al escribir sentencias JavaScript, crear o llamar a variables, objetos y funciones.
  • 6. Las declaraciones de JavaScriptUna declaración de JavaScript es un comando a un navegador. El propósito de la orden es para decirleal 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 piensaque esto es una buena práctica de programación, y la mayoría de las veces usted verá esto enejemplos de JavaScript en la web.El punto y coma es opcional (según el estándar de JavaScript), y el navegador se supone que debeinterpretar 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 CodeEl 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:Ejemplodocument.getElementById("demo").innerHTML="Hello Dolly";document.getElementById("myDIV").innerHTML="How are you?";Los bloques de JavaScriptSentencias 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:Ejemplofunction myFunction(){document.getElementById("demo").innerHTML="Hello Dolly";document.getElementById("myDIV").innerHTML="How are you?";}Usted aprenderá más acerca de las funciones y condiciones en los capítulos posteriores.JavaScript Comentarios
  • 7. Comentarios de JavaScript se puede utilizar para hacer que el código sea más legible.JavaScript ComentariosLos 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íneasComentarios 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ónEn el ejemplo siguiente, el comentario se utiliza para impedir la ejecución de una de las codelines(puede ser adecuado para la depuración):Ejemplo//document.getElementById("myH1").innerHTML="Welcome to my Homepage";document.getElementById("myP").innerHTML="This is my first paragraph.";En el ejemplo siguiente, el comentario se utiliza para impedir la ejecución de un bloque de código(puede ser adecuado para la depuración):Ejemplo/*document.getElementById("myH1").innerHTML="Welcome to my Homepage";document.getElementById("myP").innerHTML="This is my first paragraph.";*/Uso de comentarios al final de una línea
  • 8. En el ejemplo siguiente, el comentario se coloca al final de una línea de código:Ejemplovar x=5; // declare a variable and assign a value to itx=x+2; // Add 2 to the variable xJavaScript VariablesLas 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 sepuede 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 JavaScriptAl igual que con el álgebra, las variables de JavaScript se utiliza para mantener los valores oexpresiones.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 subrayadoNota: Debido a que JavaScript es sensible a mayúsculas, los nombres de variables distinguen entremayúsculas y minúsculas.La declaración de (Crear) Las variables de JavaScriptCreación de una variable en JavaScript con mayor frecuencia se refiere como "declarar" una variable.Usted declara variables de JavaScript con la var palabra clave:var carname;Después de la declaración se muestra más arriba, la variable está vacía (no tiene ningún valor aún).Para asignar un valor a la variable, utilice el igual (=) Signo del zodiaco:carname="Volvo";
  • 9. Sin embargo, también puede asignar un valor a la variable cuando se declara:var carname="Volvo";Después de la ejecución de la sentencia anterior, el carname mantendrá el valor de Volvo .Para escribir el valor dentro de un elemento HTML, simplemente se refieren a él utilizando su nombrede la variable:Ejemplovar 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 JavaScriptUna variable declarada dentro de una función de JavaScript se convierte LOCAL y sólo se puedeacceder 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 variableslocales 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 JavaScriptLas variables declaradas fuera de una función, se convierten en MUNDIAL , y todos los scripts yfunciones 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 JavaScriptSi se asigna valores a las variables que aún no han sido declaradas, las variables de forma automáticaserá declarado como variables globales.Esta declaración:carname="Volvo";se declare la variable carname como una variable global (si no existe ya).JavaScript Aritmética
  • 10. Al igual que con el álgebra, que se puede hacer operaciones aritméticas con variables de JavaScript:Ejemploy=5;x=y+2;Usted aprenderá más acerca de los operadores que se pueden utilizar en el próximo capítulo de estetutorial.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.EjemploAsigne valores a las variables y los sumará:y=5;z=2;x=y+z;El resultado de x será:7JavaScript Operadores aritméticosLos operadores aritméticos se utilizan para realizar operaciones aritméticas entre las variables y losvalores.Teniendo en cuenta que y = 5 , la siguiente tabla se explican los operadores aritméticos:Operador Descripción Ejemplo Resultado de Resultado de Inténtelo la x la y+ Adición x=y2 7 5 Pruébelo »- Sustracción x = y-2 3 5 Pruébelo »* Multiplicación x=y*2 10 5 Pruébelo »/ División x=y/2 2.5 5 Pruébelo »% Módulo (resto de división) x = y 2% 1 5 Pruébelo »++ Incremento x=++y 6 6 Pruébelo
  • 11. » x=y++ 5 6 Pruébelo »- Disminuir x=-Y 4 4 Pruébelo » x=y- 5 4 Pruébelo »JavaScript Operadores de asignaciónLos 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 cadenasEl operador + también puede ser utilizado para agregar variables de cadena o valores de texto juntos.EjemploPara 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 dayPara agregar un espacio entre las dos cadenas, insertar un espacio en una de las cadenas:Ejemplo
  • 12. txt1="What a very ";txt2="nice day";txt3=txt1+txt2;El resultado de txt3 será:What a very nice dayo insertar un espacio en la expresión:Ejemplotxt1="What a very";txt2="nice day";txt3=txt1+" "+txt2;El resultado de txt3 será:What a very nice dayAdición de Cadenas y NúmerosLa adición de dos números, se devolverá el importe, pero añadiendo un número y una cadenadevolverá una cadena:Ejemplox=5+5;y="5"+5;z="Hello"+5;El resultado de x , y , y z será:1055Hello5La regla es: Si se agrega un número y una cadena, el resultado será una cadena!JavaScript Comparación y Operadores lógicosLos operadores de comparación y lógicos se utilizan para probar la verdad o falsa .Operadores de comparaciónLos operadores de comparación se utilizan en los estados lógicos para determinar la igualdad o ladiferencia entre las variables o valores.Teniendo en cuenta que x = 5 , la siguiente tabla se explican los operadores de comparación:Operador Descripción Comparando Devoluciones Inténtelo== es igual a x == 8 falso Pruébelo
  • 13. » x == 5 verdadero Pruébelo »=== es exactamente igual a (valor y tipo) x === "5" falso Pruébelo » x 5 === verdadero Pruébelo »!= no es igual x! = 8 verdadero Pruébelo »! == no es igual (ni el valor o tipo) x! == "5" verdadero Pruébelo » x! == 5 falso Pruébelo »> es mayor que x> 8 falso Pruébelo »< es menor que x <8 verdadero Pruébelo »>= es mayor que o igual a x> = 8 falso Pruébelo »<= es menor o igual a x <= 8 verdadero Pruébelo »¿Cómo puede ser utilizadoLos operadores de comparación se pueden utilizar en sentencias condicionales para comparar valoresy 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ógicosLos operadores lógicos se utilizan para determinar la lógica entre las variables o valores.
  • 14. Teniendo en cuenta que x = 6 yy = 3 , la siguiente tabla se explican los operadores lógicos:Operador Descripción Ejemplo&& y (X <10 && y> 1) es verdadera|| o (X == 5 | | y == 5) es falsa! no ! (X == y) es verdaderaOperador condicionalJavaScript también contiene un operador condicional que asigna un valor a una variable en función dealguna condición.Sintaxisvariablename=(condition)?value1:value2EjemploEjemploSi la variable edad es un valor por debajo de 18, el valor de la variable voteable será "Demasiadojoven, de lo contrario el valor de voteable será "Antiguo suficiente":voteable=(age<18)?"Too young":"Old enough";JavaScript IF ... ELSE declaracionesLas instrucciones condicionales se usan para realizar diferentes acciones sobre la base de condicionesdiferentes.Sentencias condicionalesMuy a menudo, al escribir el código, que desea llevar a cabo diferentes acciones para diferentesdecisiones. 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ónUtilice la sentencia if para ejecutar un código si una condición especificada es verdadera.
  • 15. 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á unerror de JavaScript!EjemploHaga 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 ejecutarcódigo sólo si la condición especificada es verdadera .IF ... ELSEUtilice la sentencia else si .... para ejecutar un código si una condición es verdadera y otro código si lacondición no es cierto.Sintaxisif (condition) { code to be executed if condition is true }else { code to be executed if condition is not true }EjemploSi el tiempo es menos de las 20:00 horas, recibirá un "Buenos días" de saludo, de lo contrarioobtendrá un "Buenas tardes" saludoif (time<20) { x="Good day"; }else { x="Good evening"; }El resultado de x será:Good evening
  • 16. Si ... else if ... elseUtilice 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 }EjemploSi el tiempo es inferior a las 10:00, usted recibirá un "buenos días" de saludo, si no, pero el tiempo esmenos de las 20:00 horas, recibirá un "Buenos días" de saludo, de lo contrario obtendrá una buena "por la noche "saludo:if (time<10) { x="Good morning"; }else if (time<20) { x="Good day"; }else { x="Good evening"; }El resultado de x será:Good eveningEnlace aleatorioEn este ejemplo se va a escribir un enlace a cualquiera de W3Schools o para la Fundación Mundialpara la Naturaleza (WWF). Mediante el uso de un número aleatorio, hay una probabilidad de 50% paracada uno de los enlaces.<script type="text/javascript">var r=Math.random();var x=document.getElementById("demo")if (r>0.5){x.innerHTML="<a href=http://w3schools.com>Visit W3Schools</a>";}
  • 17. else{x.innerHTML="<a href=http://wwf.org>Visit WWF</a>";}</script>JavaScript interruptor DeclaraciónLa sentencia switch se utiliza para realizar una acción diferente en función de diferentes condiciones.La sentencia switch JavaScriptUtilice 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;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 unavariable), que se evalúa una vez. El valor de la expresión se compara entonces con los valores paracada caso en la estructura. Si existe una coincidencia, el bloque de código asociado a ese caso seejecuta. Utilice romper para evitar que el código se ejecute en el siguiente caso de forma automática.EjemploMostrar 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 its Sunday"; break;case 1: x="Today its Monday"; break;case 2: x="Today its Tuesday"; break;case 3: x="Today its Wednesday"; break;case 4: x="Today its Thursday"; break;
  • 18. case 5: x="Today its Friday"; break;case 6: x="Today its Saturday"; break;}El resultado de x será:Today its WednesdayLa omisión de palabras claveUtilice el valor predeterminado palabra clave para especificar qué hacer si no hay ningunacoincidencia:EjemploSi 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 its Saturday"; break;case 0: x="Today its Sunday"; break;default: x="Looking forward to the Weekend";}El resultado de x será:Looking forward to the WeekendJavaScript Popup CajasJavaScript tiene tres tipos de cajas del popup: cuadro de alerta, el cuadro Confirmar, y la caja delsistema.Cuadro de alertaUn cuadro de alerta se utiliza a menudo si usted quiere asegurarse que la información llega hasta elusuario.Cuando aparece un cuadro de alerta, el usuario tendrá que hacer clic en "Aceptar" para continuar.Sintaxisalert("sometext");
  • 19. Ejemplo<!DOCTYPE html><html><head><script type="text/javascript">function myFunction(){alert("I am an alert box!");}</script></head><body><input type="button" onclick="myFunction()" value="Show alert box" /></body></html>Confirme CajaUna 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 cajadevuelve false.Sintaxisconfirm("sometext");Ejemplovar r=confirm("Press a button");if (r==true) { x="You pressed OK!"; }else { x="You pressed Cancel!"; }Caja del sistemaUn cuadro de mensaje se utiliza a menudo si usted desea que el usuario introduzca un valor antes deentrar 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 clicen "Cancelar" la caja devuelve un valor nulo.Sintaxisprompt("sometext","defaultvalue");
  • 20. Ejemplovar name=prompt("Please enter your name","Harry Potter");if (name!=null && name!="") { x="Hello " + name + "! How are you today?"; }Saltos de líneaPara ver los saltos de línea dentro de un cuadro emergente, utilice una barra invertida seguida de la nde caracteres.Ejemploalert("HellonHow are you?");JavaScript FuncionesUna función puede ser ejecutado por un evento, como hacer clic en un botón.Funciones JavaScriptUna 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 llamadadentro 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óloasegúrese de que la función existe, cuando se realiza la llamada.¿Cómo definir una funciónSintaxisfunction 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 serescrito en letras minúsculas, de lo contrario se produce un error de JavaScript! También tenga encuenta que usted debe llamar a una función con las capitales de exactamente la misma como en elnombre de la función.Ejemplo de la función JavaScriptEjemplo<!DOCTYPE html><html><head><script type="text/javascript">
  • 21. function myFunction(){alert("Hello World!");}</script></head><body><button onclick="myFunction()">Try it</button></body></html>La función se ejecuta cuando el usuario hace clic en el botón.Usted aprenderá más acerca de los eventos de JavaScript en el capítulo de JS Eventos.Llamar a una función con argumentosCuando se llama a una función, puede pasar a lo largo de algunos valores a la misma, estos valores sellaman 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 valordel primer argumento pasado, etcEjemplo<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 debienvenida se les dará:Ejemplo
  • 22. <button onclick="myFunction(Harry Potter,Wizard)">Try it</button><button onclick="myFunction(Bob,Builder)">Try it</button>El ejemplo anterior alertar "Bienvenido Harry Potter, el mago" o "Bienvenido Bob, el Constructor",dependiendo de qué botón se hace clic.Funciones con un valor devueltoA 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 valorespecificado.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. JavaScriptcontinuará 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:EjemploCalcular el producto de dos números, y devolver el resultado:function myFunction(a,b){return a*b;}document.getElementById("demo").innerHTML=myFunction(4,3);
  • 23. El innerHTML de la "demo" de los elementos serán:12La sentencia return se utiliza también cuando simplemente desea salir de una función. El retorno devalor 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 JavaScriptSi se declara una variable, el uso de "var", dentro de una función, la variable sólo se puede accederdentro de esa función. Al salir de la función, la variable se destruye. Estas variables se denominanvariables 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 LoopPara Loops se ejecutará un bloque de código un número específico de veces.JavaScript LoopsA menudo, cuando se escribe código, desea que el mismo bloque de código se ejecute una y otra vezen una fila. En lugar de agregar varias líneas casi iguales en una secuencia de comandos que puedeutilizar 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 verdaderaEl bucle forEl bucle se utiliza cuando se sabe de antemano cuántas veces la secuencia de comandos se debeejecutar.Sintaxisfor (variable=startvalue;variable<endvalue;variable=variable+increment) {
  • 24. code to be executed }EjemploEl siguiente ejemplo define un ciclo que empieza con i = 0. El bucle continuará funcionandomientrasi 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 sentenciacomparar.Ejemplofor (i=0; i<5; i++) { x=x + "The number is " + i + "<br />"; }El bucle whileEl 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><script type="text/javascript">function myFunction(){var x="",i;for (i=1; i<=6; i++){x=x + "<h" + i + ">Heading " + i + "</h" + i + ">";}document.getElementById("demo").innerHTML=x;}</script>JavaScript WhileMientras Loops ejecutar un bloque de código mientras una condición especificada es verdadera.El bucle whileLos bucles de bucle, mientras que a través de un bloque de código mientras una condiciónespecificada sea verdadera.Sintaxiswhile (variable<endvalue) { code to be executed }Nota: El <podría ser cualquier operador de comparación.
  • 25. EjemploEl siguiente ejemplo define un ciclo que empieza con i = 0. El bucle continuará funcionandomientrasi es menor que 5. i se incrementará en 1 cada vez que el bucle se ejecuta:Ejemplowhile (i<5) { x=x + "The number is " + i + "<br />"; i++; }Nota: No se olvide de aumentar la i variable que se utiliza en el estado, de lo contrario yo siempreserá inferior a 5, y el bucle nunca terminará!El do ... y LoopEl do ... while es una variante del bucle while. Este bucle se ejecutará el bloque de código una solavez, antes de verificar si la condición es verdadera, entonces se repetirá el bucle mientras la condiciónes verdadera.Sintaxisdo { code to be executed }while (variable<endvalue);EjemploEl 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 secomprueba:Ejemplodo { 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 siempreserá inferior a 5, y el bucle nunca terminará!JavaScript break y continue DeclaracionesLa sentencia breakLa sentencia break se rompe el ciclo y continuar ejecutando el código que sigue después del bucle (siexiste).
  • 26. Ejemplofor (i=0;i<10;i++) { if (i==3) { break; } x=x + "The number is " + i + "<br />"; }La sentencia continueLa sentencia continue se romperá la iteración actual del bucle y continuar con el siguiente valor.Ejemplofor (i=0;i<=10;i++) { if (i==3) { continue; } x=x + "The number is " + i + "<br />"; }JavaScript Para ... En declaraciónPara activar ... En la DeclaraciónEl 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.EjemploBucle a través de las propiedades de un objeto:Ejemplovar person={fname:"John",lname:"Doe",age:25};for (x in person) { txt=txt + person[x]; }JavaScript EventosLos eventos son acciones que pueden ser detectados por JavaScript.Ejemplo
  • 27. Mouse Over Me Click MeEventosMediante el uso de JavaScript, tenemos la capacidad de crear páginas web dinámicas. Los eventos sonacciones que pueden ser detectados por JavaScript.Cada elemento de una página web tiene ciertos eventos que pueden desencadenar un JavaScript.Porejemplo, podemos usar el onclick caso de un elemento de botón para indicar que una función seejecutará 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 tecladoPara 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 eventosPara 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 nuestroeventode referencia completa .EjemploAsignar 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 HTMLPuede asignar los eventos a los elementos HTML dentro de un script o una función:EjemploAsignar un evento onclick a un elemento de botón:<script type="text/javascript">document.getElementById("myBtn").onclick=function(){displayDate()};
  • 28. </script>En el ejemplo anterior, una función llamada displayDate se ejecutará cuando se pulsa el botón.onload y onunloadLos 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 denavegador 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 onchangeLos eventos del onfocus, onblur y onchange se utilizan a menudo en combinación con la validación decampos 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()" />onsubmitEl 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ónse llama cuando el usuario hace clic en el botón de enviar en el formulario. Si los valores de loscampos no son aceptadas, el submit se debe cancelar.<form method="post" action="mySubmit.asp" onsubmit="checkForm()">onmouseover, onmouseoutLos eventos onmouseover y onmouseout se puede utilizar para activar una función cuando el usuariopasa el ratón por encima o fuera de, un elemento HTML.EjemploUn simple onmouseover onmouseout-ejemplo: Mouse Over Meonmousedown, onmouseup y onclickEl 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 elratón se suelta el botón, el evento onmouseup se dispara, por último, cuando el clic del ratón se hacompletado, el evento onclick se dispara.
  • 29. EjemploUn simple onmousedown-onmouseup ejemplo: Click MeJavaScript Try ... Catch DeclaraciónEl try ... catch le permite probar un bloque de código para los errores.- Los errores de JavaScript CatchingAl navegar por páginas web en Internet, todos hemos visto a un cuadro de alerta JavaScript que nosdice que hay un error de ejecución y preguntando "¿Desea realizar una depuración?". Mensaje deerror de este tipo puede ser útil para los desarrolladores, pero no para los usuarios. Cuando losusuarios 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 nopierda su público.El try ... catchEl try ... catch le permite probar un bloque de código para los errores. El bloque try contiene el códigopara 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 unerror de JavaScript!EjemplosEl siguiente ejemplo se supone que debe alertar a los "Bienvenido!" cuando se pulsa el botón. Sinembargo, 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ódigopersonalizado para manejar la situación. El código muestra un mensaje de error personalizado queinforma al usuario lo que sucedió:Ejemplo<!DOCTYPE html><html><head><script type="text/javascript">var txt="";function message()
  • 30. {try { adddlert("Welcome guest!"); }catch(err) { txt="There was an error on this page.nn"; txt+="Error description: " + err.message + "nn"; txt+="Click OK to continue.nn"; alert(txt); }}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>El siguiente ejemplo utiliza una caja de confirmación para mostrar un mensaje personalizado diciendoa los usuarios que pueden hacer clic en Aceptar para continuar viendo la página o haga clic enCancelar para volver a la página principal. Si el método de confirmación devuelve false, el usuario hizoclic en Cancelar, y el código redirige al usuario. Si el método de confirmación devuelve true, el códigono hace nada:Ejemplo<!DOCTYPE html><html><head><script type="text/javascript">var txt="";function message(){try { adddlert("Welcome guest!"); }catch(err) { txt="There was an error on this page.nn"; txt+="Click OK to continue viewing this page,n"; txt+="or Cancel to return to the home page.nn"; if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } }}</script></head><body>
  • 31. <input type="button" value="View message" onclick="message()" /></body></html>La sentencia throwLa sentencia throw se puede utilizar junto con el try ... catch, para crear una excepción para elerror. Más información sobre la instrucción throw en el próximo capítulo.JavaScript Lanza DeclaraciónLa sentencia throw le permite crear una excepción.La sentencia throwLa sentencia throw le permite crear una excepción. Si se utiliza esta sentencia junto con el try ...catch, es posible controlar el flujo del programa y generar mensajes de error exactos.Sintaxisthrow exceptionLa excepción puede ser una cadena, un entero, booleano o un objeto.Tenga en cuenta que tiro está escrito en letras minúsculas. Uso de mayúsculas va a generar un errorde JavaScript!EjemploEl ejemplo siguiente determina el valor de una variable llamada x. Si el valor de x es superior a 10,inferior a 5, o no un número, vamos a lanzar un error. El error es entonces capturada por elargumento de la captura y el mensaje de error adecuado se muestra:Ejemplo<!DOCTYPE html><html><body><script type="text/javascript">var x=prompt("Enter a number between 5 and 10:","");try { if(x>10) { throw "Err1"; } else if(x<5) { throw "Err2"; } else if(isNaN(x)) { throw "Err3"; } }
  • 32. catch(err) { if(err=="Err1") { document.write("Error! The value is too high."); } if(err=="Err2") { document.write("Error! The value is too low."); } if(err=="Err3") { document.write("Error! The value is not a number."); } }</script></body></html>JavaScript Caracteres especialesEn JavaScript se pueden agregar caracteres especiales a una cadena de texto usando el signo de barradiagonal inversa.Insertar caracteres especialesLa barra invertida () se utiliza para insertar apóstrofes, nuevas líneas, citas y otros caracteresespeciales 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. Estosignifica que la cadena anterior se cortó a: Somos la llamadaPara 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 textocon el signo de barra invertida:Código Salidas comilla simple" comillas dobles barra diagonal inversa
  • 33. N nueva líneaR retorno de carroT lengüetaB tecla de retrocesoF formar alimentaciónJavaScript DirectricesAlgunas cosas importantes para saber cuando las secuencias de comandos con JavaScript.JavaScript es entre mayúsculas y minúsculasUna 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 ollame a variables, objetos y funciones.Espacio en blancoJavaScript ignora los espacios adicionales. Usted puede agregar un espacio en blanco a su secuenciade 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ódigoUsted puede romper una línea de código dentro de una cadena de texto con una barra invertida. Elsiguiente 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ónJavaScript 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 propiostipos de variables.Objeto de programación basada enJavaScript es un lenguaje de programación basado en objetos, y le permite definir sus propios objetosy hacer sus propios tipos de variables.
  • 34. Sin embargo, crear sus propios objetos se explicará más adelante, en la sección avanzada deJavaScript. Vamos a empezar mirando a la incorporada en objetos JavaScript, y cómo se utilizan. Enlas 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 ymétodos.PropiedadesLas propiedades son los valores asociados a un objeto.En el siguiente ejemplo estamos usando la propiedad length del objeto String para devolver el númerode caracteres de una cadena:<script type="text/javascript">var txt="Hello World!";document.write(txt.length);</script>La salida del código anterior será:12MétodosLos 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 enletras 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 objetosEl 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>
  • 35. </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">
  • 36. function myFunction(){var str="Hello world, welcome to the universe.";var n=str.indexOf("welcome");document.getElementById("demo").innerHTML=n;}</script>Cadena completa referencia de objetoPara una referencia completa de todas las propiedades y métodos que pueden ser utilizados con elobjeto 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 StringEl 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 unacadena:var txt="Hello world!";document.write(txt.length);El código anterior se traducirá en la siguiente salida:12El siguiente ejemplo utiliza el método toUpperCase () del objeto String para convertir una cadena amayúsculas:var txt="Hello world!";document.write(txt.toUpperCase());El código anterior se traducirá en la siguiente salida:HELLO WORLD!JavaScript Fecha de objetosEl objeto Date se utiliza para trabajar con fechas y horas.Regresa la fecha actual y el tiempo¿Cómo usar el Date () método para obtener la fecha de hoy.<script type="text/javascript">var d=new Date();document.write(d);</script>
  • 37. getFullYear ()Uso getFullYear () para obtener el año.<script type="text/javascript">function myFunction(){var d = new Date();var x = document.getElementById("demo");x.innerHTML=d.getFullYear();}</script>getTime ()getTime () devuelve el número de milisegundos desde 1/1/1970.<script type="text/javascript">function myFunction(){var d = new Date();var x = document.getElementById("demo");x.innerHTML=d.getTime();}</script>setFullYear ()Cómo utilizar setFullYear () para establecer una fecha específica.<script type="text/javascript">function myFunction(){var d = new Date();d.setFullYear(2020,10,3);var x = document.getElementById("demo");x.innerHTML=d;}</script>toUTCString ()Cómo utilizar toUTCString () para convertir la fecha de hoy (según UTC) en una cadena.<script type="text/javascript">function myFunction(){var d = new Date();var x = document.getElementById("demo");x.innerHTML=d.toUTCString();}</script>getDay ()Uso getDay () y una gran variedad de escribir un día de semana, y no sólo un número.<script type="text/javascript">function myFunction(){var d = new Date();var weekday=new Array(7);weekday[0]="Sunday";weekday[1]="Monday";
  • 38. weekday[2]="Tuesday";weekday[3]="Wednesday";weekday[4]="Thursday";weekday[5]="Friday";weekday[6]="Saturday";var x = document.getElementById("demo");x.innerHTML=weekday[d.getDay()];}</script>Muestra un reloj¿Cómo mostrar un reloj en su página web.<!DOCTYPE html><html><head><script type="text/javascript">function startTime(){var today=new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();// add a zero in front of numbers<10m=checkTime(m);s=checkTime(s);document.getElementById(txt).innerHTML=h+":"+m+":"+s;t=setTimeout(function(){startTime()},500);}function checkTime(i){if (i<10) { i="0" + i; }return i;}</script></head><body onload="startTime()"><div id="txt"></div></body></html>Crear un objeto DateEl 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/01
  • 39. new Date(dateString)new Date(year, month, day, hours, minutes, seconds, milliseconds)La mayoría de los parámetros anteriores son opcionales. Si no se especifica, provoca 0 a pasar pulgUna vez que un objeto Date se crea una serie de métodos le permiten operar en él. La mayoría de losmétodos le permiten obtener y establecer el año, mes, día, hora, minuto, segundo y milisegundos delobjeto, 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 TiempoUniversal (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 deEs 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 realizanautomáticamente por el objeto Date sí mismo!Comparar dos fechasEl objeto Date se utiliza para comparar dos fechas.El siguiente ejemplo se compara la fecha de hoy, con el 14 de enero 2100:var x=new Date();x.setFullYear(2100,0,14);var today = new Date();if (x>today) { alert("Today is before 14th January 2100"); }else {
  • 40. alert("Today is after 14th January 2100"); }JavaScript array de objetosEl objeto Array se utiliza para almacenar varios valores en una sola variable.Crear una matrizCrear una matriz, asignar valores a ella, y escribir los valores en la salida.<script type="text/javascript">var i;var mycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW";for (i=0;i<mycars.length;i++){document.write(mycars[i] + "<br />");}</script>Gama completa referencia de objetoPara una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objetoArray, vaya a nuestra referencia completa objeto Array .La referencia contiene una breve descripción y ejemplos de uso para cada propiedad y método!¿Qué es un array?Un arreglo es una variable especial, que puede contener más de un valor, a la vez.Si usted tiene una lista de elementos (una lista de nombres de automóviles, por ejemplo), elalmacenamiento de los coches en una sola variable podría tener este aspecto:var car1="Saab";var car2="Volvo";var car3="BMW";Sin embargo, lo que si desea recorrer los coches y encontrar uno específico? ¿Y si no lo hubierashecho tres coches, pero 300?La mejor solución es utilizar una matriz!Una matriz puede contener todos los valores de las variables bajo un mismo nombre. Y usted puedeacceder 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 matrizUna matriz puede ser definida de tres maneras.
  • 41. El siguiente código crea un objeto Array denominado myCars:1:var myCars=new Array(); // regular array (add an optional integermyCars[0]="Saab"; // argument to control arrays size)myCars[1]="Volvo";myCars[2]="BMW";2:var myCars=new Array("Saab","Volvo","BMW"); // condensed array3:var myCars=["Saab","Volvo","BMW"]; // literal arrayNota: Si se especifica el número o los valores de verdadero / falso dentro de la matriz, entonces eltipo de variable será el número o booleano, en lugar de cadena.Acceso a una matrizPuede referirse a un elemento particular en una matriz por referencia al nombre de la matriz y elnú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:SaabModificar los valores de una matrizPara modificar un valor en una matriz existente, basta con añadir un nuevo valor a la matriz con unnúmero de índice especificado:myCars[0]="Opel";Ahora, la siguiente línea de código:document.write(myCars[0]);resultará en el siguiente resultado:OpelJavaScript Boolean ObjetoEl objeto Boolean se utiliza para convertir un valor no-booleano en un valor booleano (verdadero ofalso).
  • 42. 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 BooleanEl 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 NaNel objeto se establece en false. Para cualquier otro valor que se establece en true (incluso con lacadena "false")!JavaScript objeto MathEl objeto Math le permite realizar tareas matemáticas.round ()Cómo utilizar round ().<script type="text/javascript">function myFunction(){document.getElementById("demo").innerHTML=Math.round(2.5);}</script>
  • 43. random ()Cómo utilizar random () para devolver un número aleatorio entre 0 y 1.<script type="text/javascript">function myFunction(){document.getElementById("demo").innerHTML=Math.random();}</script>max ()Cómo utilizar MAX () para devolver el número con el más alto valor de dos números especificados.<script type="text/javascript">function myFunction(){document.getElementById("demo").innerHTML=Math.max(5,10);}</script>min ()cómo se utiliza Min () para devolver el número con el valor más bajo de los dos númerosespecificados.<script type="text/javascript">function myFunction(){document.getElementById("demo").innerHTML=Math.min(5,10);}</script>Matemáticas de objetosEl objeto Math le permite realizar tareas matemáticas.El objeto Math incluye varias constantes y métodos matemáticos.Sintaxis para el uso de las propiedades y métodos de Matemáticas:var x=Math.PI;var y=Math.sqrt(16);Nota: Las matemáticas no es un constructor. Todas las propiedades y métodos de Matemáticas sepuede llamar mediante el uso de matemáticas como un objeto sin crearla.Constantes matemáticasJavaScript dispone de ocho constantes matemáticas que se puede acceder desde el objeto Math.Estosson: E, PI, la raíz cuadrada de 2, raíz cuadrada de 1/2, logaritmo natural de 2, logaritmo natural de10, base 2 log de la E, y la base-10 de registro de E.Usted puede hacer referencia a estas constantes desde el JavaScript de esta manera:Math.EMath.PIMath.SQRT2
  • 44. Math.SQRT1_2Math.LN2Math.LN10Math.LOG2EMath.LOG10EMétodos MatemáticosAdemás de las constantes matemáticas que se puede acceder desde el objeto Math también hayvarios métodos disponibles.El siguiente ejemplo utiliza el método round () del objeto Math para redondear un número al enteromás cercano:document.write(Math.round(4.7));El código anterior se traducirá en la siguiente salida:5El siguiente ejemplo utiliza el método aleatorio () del objeto Math para devolver un número aleatorioentre 0 y 1:document.write(Math.random());El código anterior puede resultar en la siguiente salida:0.9232565215788782El siguiente ejemplo utiliza los métodos de piso () y random () del objeto Math para devolver unnúmero aleatorio entre 0 y 10:document.write(Math.floor(Math.random()*11));El código anterior puede resultar en la siguiente salida:5JavaScript RegExp objetoRegExp, 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, lacomprobación de formato, sustitución y más.
  • 45. Las expresiones regulares se utilizan para realizar poderosos de coincidencia de patrones y "buscar yreemplazar" las funciones de texto.Sintaxisvar 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, etcRegExp ModificadoresLos 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 enlugar de parar después de la primera coincidencia).Ejemplo 1Realice 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 W3SchoolsEjemplo 2Haga una búsqueda mundial de "es":var str="Is this all there is?";var patt1=/is/g;El marcado de texto a continuación muestra que la expresión obtiene un partido:Is this all there is?Ejemplo 3Hacer un mundial, las mayúsculas y minúsculas búsqueda de "es":var str="Is this all there is?";var patt1=/is/gi;El marcado de texto a continuación muestra que la expresión obtiene un partido:
  • 46. Is this all there is?test ()El método de prueba () busca una cadena para un valor especificado, y devuelve true o false,dependiendo del resultado.El ejemplo siguiente busca una cadena para el carácter "e":Ejemplovar 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á:trueexec ()El método exec () busca una cadena para un valor especificado, y devuelve el texto del valorencontrado. Si no se encuentra una coincidencia, devuelve null.El ejemplo siguiente busca una cadena para el carácter "e":Ejemplo 1var 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á:eJavaScript Detección del navegadorEl objeto navigator contiene información sobre el navegador del visitante.Detección del navegadorCasi 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 losnavegadores más antiguos.A veces puede ser útil para detectar el navegador del visitante, y luego servir la informaciónadecuada.El objeto navigator contiene información sobre el nombre del navegador del visitante, la versión, ymucho más. Nota: No existe una norma pública que se aplica al navegador de objetos, pero todos losprincipales navegadores lo apoyan.El objeto navigator
  • 47. El objeto navigator contiene toda la información sobre el navegador del visitante:Ejemplo<div id="example"></div><script type="text/javascript">txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";txt+= "<p>Browser Name: " + navigator.appName + "</p>";txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";txt+= "<p>Platform: " + navigator.platform + "</p>";txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";document.getElementById("example").innerHTML=txt;</script>JavaScript cookiesUna 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 equiposolicita mismos una página con un navegador, se enviará la cookie también. Con JavaScript, puedetanto 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 almacenadaCrear y guardar una cookieEn este ejemplo vamos a crear una cookie que almacena el nombre de un visitante. La primera vezque un visitante llega a la página web, él o ella se le pedirá que llene en su su / nombre. El nombre sealmacena en una cookie. La próxima vez que el visitante llega a la misma página, él o ella recibirá elmensaje 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, yel número de días hasta que la cookie expira.
  • 48. En la función anterior por primera vez convertir el número de días a una fecha válida, entoncesañadimos el número de días hasta que la cookie debe expirar. Después de eso se guarda el nombre dela 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, acontinuació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 noestá configurado, se mostrará un cuadro de diálogo, preguntando por el nombre del usuario, yalmacena la cookie de usuario de 365 días, llamando la función setCookie:function checkCookie(){var username=getCookie("username"); if (username!=null && username!="") { alert("Welcome again " + username); }else { username=prompt("Please enter your name:",""); if (username!=null && username!="") { setCookie("username",username,365); } }}Todos juntos ahora:Ejemplo<!DOCTYPE html><html><head><script type="text/javascript">function getCookie(c_name){
  • 49. var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^s+|s+$/g,""); if (x==c_name) { return unescape(y); } }}function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}function checkCookie(){var username=getCookie("username");if (username!=null && username!="") { alert("Welcome again " + username); }else { username=prompt("Please enter your name:",""); if (username!=null && username!="") { setCookie("username",username,365); } }}</script></head><body onload="checkCookie()"></body></html>El ejemplo anterior se ejecuta la función checkCookie () cuando se carga la página.Activar la validación de formulariosActivar la validación de formulariosJavaScript se puede utilizar para validar los datos en los formularios HTML antes de enviar elcontenido a un servidor.Los datos del formulario que normalmente están controladas por un código JavaScript podría ser:
  • 50. ha dejado que el usuario requiere campos vacíos? el usuario ha entrado en una dirección de e-mail? se ha introducido por el usuario una fecha válida? el usuario ha introducido texto en un campo numérico?Campos obligatoriosLa siguiente función comprueba si un campo se ha quedado vacía. Si el campo está en blanco, uncuadro 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ónLa 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 estarpresente después del signo @, y un mínimo de 2 caracteres antes del final:function validateForm(){var x=document.forms["myForm"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; }}La función anterior podría ser llamada cuando se envía un formulario:Ejemplo
  • 51. <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();"method="post">Email: <input type="text" name="email"><input type="submit" value="Submit"></form>JavaScript eventos de temporizaciónCon JavaScript, es posible ejecutar código en intervalos de tiempo especificados. Esto se conoce comoeventos 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 milisegundosNota: 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 unafunción específica, y se continuará con la ejecución de la función, una vez en cada intervalo de tiempodeterminado.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.EjemploAlerta 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 usteddesea 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 utilizapara ejecutar la función una vez cada 1 segundo, al igual que un reloj digital.EjemploMuestra la hora actual:function myFunction(){setInterval(function(){myTimer()},1000);
  • 52. }function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;}Cómo detener la ejecución?El método clearInterval () se utiliza para detener las ejecuciones adicionales de la función especificadaen el método setInterval ().SintaxisclearInterval(intervalVariable)Para poder utilizar el método clearInterval (), debe utilizar una variable global al crear el método deintervalo:myVar=setInterval("javascript function",milliseconds);Entonces usted será capaz de detener la ejecución mediante una llamada al método clearInterval ().EjemploEl mismo ejemplo anterior, pero hemos añadido una "Detener el temporizador" botón:var myVar;function myFunction(){myVar=setInterval(function(){myTimer()},1000);}function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;}function myStopFunction(){clearInterval(myVar);}El método setTimeout ()SintaxissetTimeout("javascript function",milliseconds);El método setTimeout () esperará el número especificado de milisegundos, y luego ejecutar la funciónespecificada.
  • 53. El primer parámetro de setTimeout () debe ser una función.El segundo parámetro indica cuántos milisegundos, a partir de ahora, que desea ejecutar el primerparámetro.EjemploEspere 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étodosetTimeout ().SintaxisclearTimeout(timeoutVariable)Para poder utilizar el método clearTimeout (), debe utilizar una variable global al crear el método detiempo de espera:myVar=setTimeout("javascript function",milliseconds);Entonces, si la función no ha Allready que se está ejecutando, usted será capaz de detener laejecución mediante una llamada al método clearTimeout ().EjemploEl 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 objetosLos objetos son útiles para organizar la información.Crear una instancia directa de un objeto<script type="text/javascript">personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}document.write(personObj.firstname + " is " + personObj.age + " years old.");</script>
  • 54. Crear una plantilla para un objeto<script type="text/javascript">function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}myFather=new person("John","Doe",50,"blue");document.write(myFather.firstname + " is " + myFather.age + " years old.");</script>Los objetos JavaScriptAnteriormente 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 crearel 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 asociadoscon 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 propiedadesdifieren de persona a persona. Los objetos también tienen métodos. Los métodos son las acciones quese pueden realizar sobre los objetos. Los métodos de personas podrían comer (), sleep (), trabajo (),play (), etcPropiedadesLa sintaxis para acceder a una propiedad de un objeto es:objName.propNamePuede agregar propiedades a un objeto, simplemente dando un valor. Supongamos que el personObjya existe - se puede dar a las propiedades con nombre primer nombre, edad apellido, y color de ojosde 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:JohnMétodosUn objeto también puede contener métodos.Usted puede llamar a un método con la siguiente sintaxis:
  • 55. objName.methodName()Nota: Los parámetros requeridos para el método se puede pasar entre los paréntesis.Para llamar a un método llamado sueño () para el personObj:personObj.sleep();Crear sus propios objetosHay diferentes maneras para crear un nuevo objeto:1. Crear una instancia directa de un objetoEl 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 llamadoeat () a la personObj:personObj.eat=eat;2. Crear un constructor de objetosCree 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 todoel "este" material es que usted va a tener más de una persona a la vez (que la persona que estátratando debe ser claro). Eso es lo que es "esto": la instancia del objeto en la mano.Una vez que el constructor de objetos, puede crear nuevas instancias del objeto, de esta manera:var myFather=new person("John","Doe",50,"blue");var myMother=new person("Sally","Rally",48,"green");
  • 56. Usted puede también agregar algunos métodos para el objeto persona. Esto también se hace dentrode 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 atener 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 lapersona.JavaScript sabe que la persona que está hablando con "esto".. Así pues, ahora usted puedeescribir: myMother.newlastname ("Pérez").

×