Embed Size (px)
Citation preview
Fundamentos de JavascriptDesarrollo 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• JavaScript 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
• 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 mouseCarga de páginaPasar el mouse por algún punto Seleccionar algún campo de formularioEnviar un formulario al servidorTeclear un botónEntre otros
Eventos• onLoad y onUnload
Este evento se disparan cada vez que el usuario entra o sale de la página
Eventos• onFocus, onBlur y onChange
Son usados en combinación con validaciones de entrada
<input type="text" size="30" id="email" onchange="checkEmail()">
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()">
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>
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.
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
Fundamentos de JavascriptDesarrollo de Aplicaciones para Internet
![[Valdez Pallas] Fundamentos y Aplicaciones Con PIC](https://img.pdfslide.us/doc/110x75/5529e51c550346556e8b4604/valdez-pallas-fundamentos-y-aplicaciones-con-pic.jpg)
