Fundamentos de Javascript Desarrollo de Aplicaciones para Internet

Agenda • ¿Qué es Javascript? • (JS == Java) • Propósitos de JS •

¿Qué es Javascript? • El nombre original es ECMAScript • Diseñado para añadir interactividad

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

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

Dónde introducir código Javascript • <head> y <body> • Inclusión de una librería js

Comentarios Javascript • Single Line • Multiline

Variables • Declaración Produce el mismo efecto que Si añade un número y una

Funciones • En Javascript, las funciones presentan un comportamiento similar al del resto de

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

Eventos • Javascript es capaz de detectar y manejar eventos relacionados con elementos de

Eventos • on. Load y on. Unload Este evento se disparan cada vez que

Eventos • on. Focus, on. Blur y on. Change Son usados en combinación con

Eventos • on. Submit Este evento se dispara cuando se requiere validar todos los

Eventos • on. Mouse. Over y on. Mouse. Out Generalmente para generar animaciones y

Síntesis • Se conocieron los fundamentos de Javascript como lenguaje del cliente • Será

Recursos The Acid 3 Test: http: //acid 3. acidtests. org/ The Javascript and HTML

Slides: 31

Download presentation

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

¿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 • Java. Script es un lenguaje interpretado

(Javacript == Java) NO!

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

Hola Mundo Javascript

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

Dónde introducir código Javascript • <head> y <body> • Inclusión de una librería js

Comentarios Javascript • Single Line • Multiline

Variables • Declaración Produce el mismo efecto que Si añade un número y una cadena, el resultado será una cadena!

Operadores • Aritméticos

Operadores • De Asignación

Operadores • De Comparación

Operadores • Lógicos

Estructuras de Condición • if - else

Estructuras de Condición • switch

Manejo de Popups • alert()

Manejo de Popups • confirm()

Manejo de Popups • prompt()

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++

Estructuras de Iteración • for • while

Estructuras de Iteración • do - while

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

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 mouse Carga de página Pasar el mouse por algún punto Seleccionar algún campo de formulario Enviar un formulario al servidor Teclear un botón Entre otros

Eventos • on. Load y on. Unload Este evento se disparan cada vez que el usuario entra o sale de la página

Eventos • on. Focus, on. Blur y on. Change Son usados en combinación con validaciones de entrada <input type="text" size="30" id="email" onchange="check. Email()">

Eventos • on. Submit 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 check. Form()">

Eventos • on. Mouse. Over y on. Mouse. Out Generalmente para generar animaciones y comportamiento relativo al mouse, en interacción con elementos de la página WEB <a href="http: //www. w 3 schools. com" onmouseover="alert('An on. Mouse. Over event'); return false"><img src="w 3 s. gif" alt="W 3 Schools" /></a>

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 W 3.

Recursos The Acid 3 Test: http: //acid 3. acidtests. org/ The Javascript and HTML DOM Reference : http: //www. w 3 schools. com/jsref/default. asp Javascript Introduction : http: //www. w 3 schools. com/js/js_intro. asp

Fundamentos de Javascript Desarrollo de Aplicaciones para Internet