Laboratorio N° 3 pacd1985
<ul><li>Es un lenguaje para crear scripts. Es el más conocido y es soportado por la mayoría de browsers. Ej: IE, Firefox, ...
<ul><li>Fue diseñado para añadir interactividad a páginas HTML. Ej: Eventos. </li></ul><ul><li>Es un lenguaje de programac...
<ul><li>Es usualmente embebido directamente en las páginas HTML. </li></ul><ul><li>Es un lenguaje interpretado. </li></ul>...
<ul><li>Puede leer y escribir elementos HTML. </li></ul><ul><li>Puede poner texto dinámico en un HTML. </li></ul><ul><li>P...
<ul><li><html>  </li></ul><ul><li><head>  </li></ul><ul><li>… </li></ul><ul><li></head>  </li></ul><ul><li><body>  </li></...
<ul><li>Los browsers que no soportan el HTML desplegar án el javascript como contenido; así que se suele colocar el script...
<ul><li>El Javascript en el body se ejecutará mientras la página carga. </li></ul><ul><li>El Javascript en el head se ejec...
<ul><li>El Javascript también puede encontrarse en un archivo externo, esto favorece la reutilización de código. </li></ul...
<ul><li>Para usar un script externo, se apunta al recurso en el atributo  src  del tag  <script> .   </li></ul><ul><ul><li...
<ul><li>Se puede usar la etiqueta  <noscript>  para mostrar un mensaje al usuario cuando el navegador no puede ejecutar Ja...
<ul><li><noscript> </li></ul><ul><li><p>Bienvenido a Mi Sitio</p> </li></ul><ul><li><p>La página que estás viendo requiere...
<ul><li>Javascript es Case Sensitive. </li></ul><ul><li>Se coloca un “;” al final de cada declaración. </li></ul><ul><li>C...
<ul><li>Los nombres deben empezar con una letra o con el carácter “  _  ”. </li></ul><ul><li>Se declaran variables con la ...
<ul><li>Si se asignan valores a variables que no han sido declaradas, estas serán automáticamente declaradas. </li></ul><u...
<ul><li>Los operadores lógicos son: </li></ul><ul><ul><ul><li>&&  -> and </li></ul></ul></ul><ul><ul><ul><li>||  -> or </l...
<ul><li><script type=&quot;text/javascript&quot;>  </li></ul><ul><ul><li>/* Escribe “Buenas tardes” si es más de las 12 pe...
<ul><li>Sirven para describir cadenas de carateres para comparaciones o reemplazos complejos. </li></ul><ul><li>Algunos ej...
<ul><li>Un ejemplo m ás complejo sería: </li></ul><ul><li>/^([0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-w]*[0-9a-zA-Z]....
<ul><li>Javascript te permite crear tus propios objetos, pero ya tiene objetos creados. </li></ul><ul><li>Por ejemplo, uti...
<ul><li>Ahora, utilicemos el método  toUpperCase()  del objeto String para desplegar su texto en mayúsculas. </li></ul><ul...
<ul><li>Es un estándar de la W3C que define un conjunto de objetos para acceder y manipular documentos HTML. </li></ul><ul...
 
<ul><li>Para DOM, todo en un documento HTML es un “nodo”. </li></ul><ul><li>Algunas propiedades típicas de DOM: </li></ul>...
<ul><li>Algunos métodos típicos de DOM son: </li></ul><ul><ul><li>x.getElementById(id) – Obtiene el elemento con ese id </...
<ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li>… </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><...
 
<ul><li>Sirve para validar la data de los inputs antes de que sean enviadas al servidor. Por ejemplo: </li></ul><ul><ul><l...
Upcoming SlideShare
Loading in …5
×

Javascript

1,248 views

Published on

Javascript, regular expressions, DOM and some validation stuff

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,248
On SlideShare
0
From Embeds
0
Number of Embeds
180
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript

  1. 1. Laboratorio N° 3 pacd1985
  2. 2. <ul><li>Es un lenguaje para crear scripts. Es el más conocido y es soportado por la mayoría de browsers. Ej: IE, Firefox, Opera. </li></ul><ul><li>Un script es un conjunto de instrucciones que permite la automatización de una tarea creando pequeñas utilidades. </li></ul>
  3. 3. <ul><li>Fue diseñado para añadir interactividad a páginas HTML. Ej: Eventos. </li></ul><ul><li>Es un lenguaje de programación ligero y se ejecuta en la máquina cliente. </li></ul><ul><li>Algunos ejemplos de aplicación son: validación de formularios y detección de browsers. </li></ul>
  4. 4. <ul><li>Es usualmente embebido directamente en las páginas HTML. </li></ul><ul><li>Es un lenguaje interpretado. </li></ul><ul><li>No se necesita licencia para usarlo. </li></ul><ul><li>NO TIENE NADA QUE VER CON JAVA. </li></ul>
  5. 5. <ul><li>Puede leer y escribir elementos HTML. </li></ul><ul><li>Puede poner texto dinámico en un HTML. </li></ul><ul><li>Puede validar data. </li></ul><ul><li>Puede detectar el browser del visitante. </li></ul><ul><li>Puede crear cookies. </li></ul>
  6. 6. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li>… </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script type=&quot;text/javascript&quot;> document.write(“Soy un javascript&quot;); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  7. 7. <ul><li>Los browsers que no soportan el HTML desplegar án el javascript como contenido; así que se suele colocar el script como un comentario HTML. </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li><!– </li></ul><ul><li>document.write(&quot;Hello World!&quot;); </li></ul><ul><li>--> </li></ul><ul><li></script> </li></ul>
  8. 8. <ul><li>El Javascript en el body se ejecutará mientras la página carga. </li></ul><ul><li>El Javascript en el head se ejecutará cuando sea llamado. </li></ul><ul><li><head> </li></ul><ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul></ul><ul><ul><li>.... </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><li></head> </li></ul>
  9. 9. <ul><li>El Javascript también puede encontrarse en un archivo externo, esto favorece la reutilización de código. </li></ul><ul><li>Un archivo Javascript externo no contiene los tags <script> . </li></ul><ul><li>Un archivo Javascript externo tiene la extensión “.js”. </li></ul>
  10. 10. <ul><li>Para usar un script externo, se apunta al recurso en el atributo src del tag <script> . </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;xxx.js&quot;> </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li>Este se coloca donde normalmente se escribiría el script en el HTML, en el head o en el body. </li></ul></ul>
  11. 11. <ul><li>Se puede usar la etiqueta <noscript> para mostrar un mensaje al usuario cuando el navegador no puede ejecutar JavaScript. </li></ul><ul><li>Se debe incluir en el interior de la etiqueta <body> (normalmente se incluye al principio de <body>) y el mensaje que muestra <noscript> puede incluir cualquier elemento HTML. </li></ul>
  12. 12. <ul><li><noscript> </li></ul><ul><li><p>Bienvenido a Mi Sitio</p> </li></ul><ul><li><p>La página que estás viendo requiere para su funcionamiento el uso de JavaScript. </li></ul><ul><li>Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p> </li></ul><ul><li></noscript> </li></ul>
  13. 13. <ul><li>Javascript es Case Sensitive. </li></ul><ul><li>Se coloca un “;” al final de cada declaración. </li></ul><ul><li>Cada declaración será ejecutada por el browser según el orden en que están. </li></ul><ul><li>Los comentarios pueden ser de una línea </li></ul><ul><li>( // … ) o multi-líneas ( / * … */ ). </li></ul>
  14. 14. <ul><li>Los nombres deben empezar con una letra o con el carácter “ _ ”. </li></ul><ul><li>Se declaran variables con la palabra reservada “ var ”. </li></ul><ul><li>var x; </li></ul><ul><li>var nombre_alumno; </li></ul><ul><li>Se pueden asignar valores en la misma declaración. Por ej: var x = 5;var nom=“yo”; </li></ul>
  15. 15. <ul><li>Si se asignan valores a variables que no han sido declaradas, estas serán automáticamente declaradas. </li></ul><ul><li>La concatenación se hace utilizando el operador “ + ”. </li></ul><ul><li>Los operadores de comparaci ón son “ == “, “ != “, “ > ”, “ < “, “ >= “ y “ <= “. </li></ul>
  16. 16. <ul><li>Los operadores lógicos son: </li></ul><ul><ul><ul><li>&& -> and </li></ul></ul></ul><ul><ul><ul><li>|| -> or </li></ul></ul></ul><ul><ul><ul><li>! -> not </li></ul></ul></ul><ul><li>Las declaraciones condicionales son: </li></ul><ul><ul><ul><li>If </li></ul></ul></ul><ul><ul><ul><li>If else </li></ul></ul></ul><ul><ul><ul><li>If else if </li></ul></ul></ul><ul><ul><ul><li>switch </li></ul></ul></ul>
  17. 17. <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><ul><li>/* Escribe “Buenas tardes” si es más de las 12 pero menos de las 7 */ </li></ul></ul><ul><ul><li>var d=new Date(); </li></ul></ul><ul><ul><li>var time=d.getHours(); </li></ul></ul><ul><ul><li>if ((time > 12) && (time < 19)) </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>document.write(&quot;<b>Buenas Tardes</b>&quot;); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li></script> </li></ul>
  18. 18. <ul><li>Sirven para describir cadenas de carateres para comparaciones o reemplazos complejos. </li></ul><ul><li>Algunos ejemplos sencillos son: </li></ul><ul><ul><ul><li>/ingeniero/ </li></ul></ul></ul><ul><ul><ul><li>/ingenier [oa]/ </li></ul></ul></ul><ul><ul><ul><li>/ingenier[0-9]/ </li></ul></ul></ul><ul><ul><ul><li>/ingenier[0-9a-z]/ </li></ul></ul></ul>
  19. 19. <ul><li>Un ejemplo m ás complejo sería: </li></ul><ul><li>/^([0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-w]*[0-9a-zA-Z].)+[a-zA-Z]{2,9})$/ </li></ul><ul><li>Esta expresión regular representa la estructura de una dirección de email. </li></ul>
  20. 20. <ul><li>Javascript te permite crear tus propios objetos, pero ya tiene objetos creados. </li></ul><ul><li>Por ejemplo, utilicemos la propiedad length del objeto String para hallar su n úmero de caracteres. </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var txt=&quot;Hello World!&quot;; </li></ul><ul><li>document.write(txt.length); </li></ul><ul><li></script> </li></ul>
  21. 21. <ul><li>Ahora, utilicemos el método toUpperCase() del objeto String para desplegar su texto en mayúsculas. </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var str=&quot;Hello world!&quot;; document.write(str.toUpperCase()); </li></ul><ul><li></script> </li></ul>
  22. 22. <ul><li>Es un estándar de la W3C que define un conjunto de objetos para acceder y manipular documentos HTML. </li></ul><ul><li>DOM presenta un documento HTML como una estructura de nodos, con elementos, atributos y texto. </li></ul>
  23. 24. <ul><li>Para DOM, todo en un documento HTML es un “nodo”. </li></ul><ul><li>Algunas propiedades típicas de DOM: </li></ul><ul><ul><li>x.innerHTML – El texto interno del elemento x </li></ul></ul><ul><ul><li>x.nodeName – El name del elemento x </li></ul></ul><ul><ul><li>x.nodeValue – El value del elemento x </li></ul></ul><ul><ul><li>x.parentNode – El nodo padre del elemento x </li></ul></ul><ul><ul><li>x.childNodes – Los nodos hijo del elemento x </li></ul></ul><ul><ul><li>x.attributes – Los nodos atributo del elemento x </li></ul></ul>
  24. 25. <ul><li>Algunos métodos típicos de DOM son: </li></ul><ul><ul><li>x.getElementById(id) – Obtiene el elemento con ese id </li></ul></ul><ul><ul><li>x.getElementsByTagName(name) – Obtiene los elementos con ese name </li></ul></ul><ul><ul><li>x.appendChild(node) – Inserta un nodo hijo a x </li></ul></ul><ul><ul><li>x.removeChild(node) – Remueve un nodo hijo de x. </li></ul></ul><ul><li>Ahora veamos un ejemplo: </li></ul>
  25. 26. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li>… </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;intro&quot;>Hola!</p> </li></ul><ul><li><p id=&quot;main&quot;>Este es un ejemplo.</p> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>txt=document.getElementById(&quot;intro&quot;).innerHTML; </li></ul><ul><li>document.write(“El texto de intro: &quot; + txt); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  26. 28. <ul><li>Sirve para validar la data de los inputs antes de que sean enviadas al servidor. Por ejemplo: </li></ul><ul><ul><li>¿Campos obligatorios vacíos? </li></ul></ul><ul><ul><li>¿El email es válido? </li></ul></ul><ul><li>Se utiliza principalmente por dos razones: Evitar recargar de peticiones innecesarias al servidor y agilizar la interactividad de la página. </li></ul>

×