Javascript
Upcoming SlideShare
Loading in...5
×
 

Javascript

on

  • 1,835 views

Javascript, regular expressions, DOM and some validation stuff

Javascript, regular expressions, DOM and some validation stuff

Statistics

Views

Total Views
1,835
Views on SlideShare
1,665
Embed Views
170

Actions

Likes
0
Downloads
41
Comments
0

2 Embeds 170

http://localhost 141
http://faviangaro1973.tripod.com 29

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript Javascript Presentation Transcript

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