Tpd 03

634 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
634
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tpd 03

  1. 1. TALLER DE PROGRAMACIÓN DISTRIBUIDA Instituto Superior de Educación Publico “LA SALLE” TERCERA ACTIVIDAD DE APRENDIZAJE ANIMANDO PÁGINAS WEB CON EL LENGUAJE JS Docente: Ing. Alex Fernando Huillca
  2. 2. JAVASCRIPT <ul><li>JavaScript es un lenguaje de scripts desarrollado por Netscape para incrementar las funcionalidades del lenguaje HTML </li></ul><ul><li>Su núcleo se corresponde con ECMA-262, el lenguaje de scripts estándar de la Oficina de Estándares de la Unión Europea </li></ul><ul><li>JavaScript es un lenguaje de scripts desarrollado por Netscape para incrementar las funcionalidades del lenguaje HTML </li></ul><ul><li>JavaScript es un lenguaje interpretado </li></ul><ul><li>Java Script es un lenguaje orientado a eventos </li></ul><ul><li>Java script es un lenguaje orientado a objetos </li></ul>
  3. 3. <ul><li>¿Cómo introducir JavaScript en el código HTML? </li></ul><ul><li>Básicamente existen dos formas de introducir un script de JavaScript en una página HTML: </li></ul><ul><li>1RA: Embebido en el código HTML, entre las etiquetas o tags <script> y </script> . </li></ul><ul><li><HTML> <HEAD> <TITLE>Introducción a JavaScript</TITLE> <SCRIPT LANGUAGE=&quot;JavaScript“ > <!-- function saludo() { window.alert('¡Bienvenido a JavaScript!') } //--> </SCRIPT> </HEAD> <BODY onLoad=&quot;saludo()&quot;> </BODY> </li></ul><ul><li></HTML> </li></ul><!– - //  para evitar que se generen errores en navegadores que no soporten JavaScript y para que estos navegadores no muestren el código del script en la página.
  4. 4. <ul><li>2DA: Como archivo .js que se carga con la página HTML. Para ello, debe indicarse en las tags anteriores el nombre y ubicación del archivo .js que contiene el script JavaScript: </li></ul><ul><li><HTML> <HEAD> <TITLE>Llamando un archivo JavaScript</TITLE> <SCRIPT LANGUAGE=&quot;JavaScript“ SRC=&quot;codigo.js&quot;></SCRIPT> </HEAD> <BODY> </BODY> </li></ul><ul><li></HTML> </li></ul>
  5. 5. Maneras de ejecutar un JS 1. Ejecución directa <ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>document.write(&quot;Texto generado desde JavaScript&quot;) </li></ul><ul><li></SCRIPT> </li></ul>
  6. 6. 1. Empezando a conocer JS <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Primer ejemplo de JavaScript</TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Esto es texto normal de un documento HTML </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>Texto generado desde JavaScript </li></ul><ul><li></SCRIPT> </li></ul><ul><li>Esto es, de nuevo, HTML </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  7. 7. <ul><li>2. Respuesta a un evento </li></ul><ul><li>Los eventos son acciones que realiza el usuario. Los programas como Javascript están preparados para atrapar determinadas acciones realizadas sobre la página, y realizar acciones como respuesta. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li>function clic() { </li></ul><ul><li>alert(&quot;Hola!&quot;); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><form> </li></ul><ul><li><input type=&quot;button&quot; name=&quot;Boton&quot; value=&quot;Presióneme aqui&quot; onclick=&quot;clic()&quot;> </li></ul><ul><li></form> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 8. 3. Comentarios <ul><li>// Comentario de una Linea </li></ul><ul><li>/*Comentarios </li></ul><ul><li>De varias </li></ul><ul><li>Líneas de código */ </li></ul>
  9. 9. Ejemplos <ul><li>Ejemplo 01: Código JS que genera un evento del MOUSE </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script language=“JavaScript&quot;> </li></ul><ul><li>//Escondemos la funcion </li></ul><ul><li>function hello() { </li></ul><ul><li>alert(&quot;Hola!&quot;); </li></ul><ul><li>} </li></ul><ul><li>// Fin del codigo </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><a href=&quot;&quot; onMouseOver=&quot;hello()&quot;>link</a> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  10. 10. Ejemplo 02: Validación de Campo de Texto Vacio <HTML> <HEAD><TITLE>Eventos</TITLE> <SCRIPT> function Reacciona(campo) {     alert(&quot;¡Introduzca un valor!&quot;)     campo.focus() } </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE=text NAME=campo onFocus=&quot;Reacciona(this)&quot;> </FORM> </BODY> </HTML>

×