Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

31
Fundamentos de Javascript Desarrollo de Aplicaciones para Internet

Transcript of Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Page 1: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Fundamentos de JavascriptDesarrollo de Aplicaciones para Internet

Page 2: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Agenda• ¿Qué es Javascript?• (JS == Java)• Propósitos de JS• Hola Mundo• Dónde introducir código Javascript• Comentarios Javascript• Variables• Operadores• Estructuras de Condición• Manejo de Popups• Funciones• Estructuras de Iteración• Eventos

Page 3: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

¿Qué es Javascript?

• El nombre original es ECMAScript• Diseñado para añadir interactividad a

las páginas HTML• integrado directamente en páginas HTML• JavaScript es un lenguaje interpretado

Page 4: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

(Javacript == Java)

NO!

Page 5: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Propósitos de Javascript

• Javascript ofrece a los diseñadores una herramienta de programación HTML

• Texto dinámico en una página HTML• Captura de Eventos• Validar los datos• Crear cookies• Entre muchas otras funciones

Page 6: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Hola Mundo Javascript

Page 7: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Dónde introducir código Javascript• <head>

• <body>

Page 8: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Dónde introducir código Javascript• <head> y <body>

• Inclusión de una librería js

Page 9: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Comentarios Javascript

• Single Line

• Multiline

Page 10: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Variables

• Declaración

Produce el mismo efecto que

Si añade un número y una cadena, el resultado será una cadena!

Page 11: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Operadores

• Aritméticos

Page 12: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Operadores

• De Asignación

Page 13: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Operadores

• De Comparación

Page 14: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Operadores

• Lógicos

Page 15: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Estructuras de Condición

• if

• if - else

Page 16: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Estructuras de Condición

• switch

Page 17: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Manejo de Popups

• alert()

Page 18: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Manejo de Popups

• confirm()

Page 19: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Manejo de Popups

• prompt()

Page 20: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Funciones• En Javascript, las funciones presentan un

comportamiento similar al del resto de los lenguajes:

• También es posible retornar valores, de la manera Java, C o C++

Page 21: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Estructuras de Iteración• for

• while

Page 22: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Estructuras de Iteración• do - while

Page 23: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Estructuras de Iteración• for …. in (muy útil en el manejo de arrays)

Page 24: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Eventos• Javascript es capaz de detectar y manejar

eventos relacionados con elementos de una página WEB

• Cada elemento de una página WEB tiene una serie de eventos que pueden ser manejados vía JS:

Clic de mouseCarga de páginaPasar el mouse por algún punto Seleccionar algún campo de formularioEnviar un formulario al servidorTeclear un botónEntre otros

Page 25: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Eventos• onLoad y onUnload

Este evento se disparan cada vez que el usuario entra o sale de la página

Page 26: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Eventos• onFocus, onBlur y onChange

Son usados en combinación con validaciones de entrada

<input type="text" size="30" id="email" onchange="checkEmail()">

Page 27: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Eventos• onSubmit

Este evento se dispara cuando se requiere validar todos los campos de un formulario antes de enviarlo

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

Page 28: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Eventos• onMouseOver y onMouseOut

Generalmente para generar animaciones y comportamiento relativo al mouse, en interacción con elementos de la página WEB

<a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');return false"><img src="w3s.gif" alt="W3Schools" /></a>

Page 29: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Síntesis• Se conocieron los fundamentos de Javascript como lenguaje del cliente• Será necesario poner en práctica cada uno de los ítems anteriores• Se sugiere el seguimiento del sitio de entrenamiento de W3.

Page 30: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Recursos

The Acid3 Test: http://acid3.acidtests.org/The Javascript and HTML DOM Reference :

http://www.w3schools.com/jsref/default.aspJavascript Introduction : http://www.w3schools.com/js/js_intro.asp

Page 31: Fundamentos de Javascript Desarrollo de Aplicaciones para Internet.

Fundamentos de JavascriptDesarrollo de Aplicaciones para Internet