Presentación de conceptos básicos para el uso del JavaScript. Realizada para alumnos de ITIS de la facultad de ciencias de la computación BUAP

1. Herramientas Web
MCC. LUIS YAEL MÉNDEZ SÁNCHEZ
Email: luis.mendezsanchez@correo.buap.mx

2. JavaScript y JQuery
HERRAMIENTAS WEB 2

3. ¿Qué es JavaScript?
JavaScript es un lenguaje de programación de alto nivel estándar
para la programación web creado por Netscape.
Permite la implementación funciones complejas en páginas web.
Permite crear contenido de actualización dinámica, controlar
multimedia, anima imágenes y prácticamente todo.
Es la tercera capa de la programación web después de HTML y CSS.
HERRAMIENTAS WEB 3

4. ¿Por qué JavaScript?
JavaScript se ejecuta en el navegador del cliente por lo que reduce
la carga en el servidor.
Permite almacenar valores útiles dentro de variables.
Permite operar fragmentos de texto.
Ejecuta código ante ciertos eventos que ocurren en una página
web.
Actualización en tiempo real.
HERRAMIENTAS WEB 4

5. Sintaxis Básica de JavaScript
Variables
Para definir una variable podemos definirla de la siguiente manera
 let miVariable = 'Bob’; (String)
 let miVariable = 10; (Number)
 let miVariable = true; (Boolean)
 let miVariable = [1,'Bob','Steve',10]; (Array)
 let miVariable = document.querySelector('h1’); (Object)
Todas las líneas de JS deben acabar en punto y coma (;)
HERRAMIENTAS WEB 5

6. Operadores
Un operador básicamente es un símbolo matemático que actúa
sobre dos valores o variables para producir un resultado.
Algunos de los operadores más utilizados son los siguientes:
Suma: 6 + 9;
Concatenado: "Hola " + "mundo!";
Resta:9 - 3;
Multiplicación: 8 * 2;
División: 9 / 3;
HERRAMIENTAS WEB 6

7. Operadores
Asignacion: let miVariable = 'Bob’;
Igualdad: Variable === 4;
Negación, distinto, No igual: Variable !== 3;
HERRAMIENTAS WEB 7

8. Condicionales
Las condicionales son estructuras de código que permiten comprobar si una
expresión devuelve true o no, después ejecuta un código dependiendo del
resultado:
If..else:
HERRAMIENTAS WEB 8

9. Condicionales
Switch:
HERRAMIENTAS WEB 9

10. Condicionales
While:
HERRAMIENTAS WEB 10

11. Funciones
Las funciones son un amanera de encapsular una funcionalidad que quieres
reutilizar, de manera que puedes llamar a esa función con un solo nombre y no
se tiene que volver a escribir el código entero cada vez que la utilices.
HERRAMIENTAS WEB 11

12. Manipulación del DOM (Document
Object Model)
JavaScript se utiliza para modificar la estructura y el contenido de una página web en tiempo
real.
Document Object Model (DOM) es una representación en árbol de la página.
Uso de métodos como getElementById y querySelector para interactuar con elementos HTML.
getElementById: Se obtiene un elemento especifico a través de un Id
querySelector: Devuelve el primer elemento del documento que coincida con el grupo especificado de
selectores.
HERRAMIENTAS WEB 12

13. Eventos
Los eventos son estructuras de código que captan lo que sucede en el navegador y permite que
en respuesta a las acciones que suceden se ejecute un código.
El ejemplo más fácil de entender es un evento al momento de un clic:
Se manda a llamar a un elemento HTML para asignar una acción para un evento tal como el de
un clic.
HERRAMIENTAS WEB 13

14. JQuery
JQuery es una biblioteca de JavaScript minificada de código abierto
creada para simplificar las operaciones JavaScript.
Se utiliza para codificar rápidamente una serie de comandos
diferentes que llevarían más tiempo si se utilizara código HTML
La biblioteca de JQuery es de las más populares de JavaScript ya
que es fácil de modificar y utilizar.
HERRAMIENTAS WEB 14

15. Ventajas de JQuery
Manejo de eventos: la función del clic del mouse y él envió de formularios
toma pocas líneas de código.
Modificación de Elementos HTML: a través de la Manipulación del Modelo de
Objetos del Documento (DOM). La interfaz del navegador web es más fácil de
usar ya que te permite añadir, editar y eliminar elementos web utilizando
varios métodos de eventos.
Método AJAX: Ideal para desarrollar sitios web responsivos utilizando las
funciones de AJAX. Mejora la experiencia del usuario al simplificar las
operaciones de petición HTTP sin recargar la página.
Efectos de animación
Compatibilidad: JQuery es compatible con todos los navegadores y funciona
con selectores CSS y la sintaxis del lenguaje de rutas XML.
HERRAMIENTAS WEB 15

16. Desventajas de JQuery
Tiempo de carga: Debido a que la base de código sigue creciendo se tarda más
en abrir el archivo JS lo cual genera una carga adicional para la computadora del
usuario
Dificulta el aprendizaje y uso de JavaScript: Simplificando la creación de
eventos tareas como la manipulación de DOM requerirá mayor conocimiento de
JavaScript para obtener mejores resultados.
Retrocompatibilidad: Como JQuery tiene muchas versiones, se tiene que alojar
la biblioteca uno mismo y actualizarla periódicamente.
HERRAMIENTAS WEB 16

17. Selección de elementos con JQuery
El concepto más básico de JQuery es el seleccionar elementos y realizar acciones con ellos.
A continuación, se muestran técnicas comunes para la selección de elementos.
 Selección de elementos en base de su Id
 $('#myId');
 Selección de elementos en base al nombre de la clase
 $('div.myClass');
 Selección de elementos por su atributo
 $('input[name=first_name]');
 Selección de elementos en forma de selector CSS
 $('#contents ul.people li');
 Pseudo-Selectores
 // selecciona el primer elemento <a> con la clase 'external'
 $('a.external:first');
HERRAMIENTAS WEB 17

18. Manipulación del DOM con jQuery
JQuery proporciona métodos para manipular DOM de manera eficiente.
html(): obtiene el contenido html del primero elemento coincidente.
 selector.html( )
replaceWith(): remplaza un elemento DOM completo.
 selector.replaceWith( content )
empty(): elimina todos los nodos secundarios del conjunto de elementos coincidentes.
 selector.empty( )
 remove(): elimina todos los elementos coincidentes del DOM
 selector.remove( [ expr ])
after(): Inserta contenido después de cada uno de los elementos coincidentes.
 selector.after( content )
before(): Inserta contenido antes de cada uno de los elementos coincidentes
 selector.before( content )
HERRAMIENTAS WEB 18

19. Funciones JQuery
Eventos:
click(handler): Asigna un controlador de eventos al clic
Hover(inHandler, outHandler): Asigna controladores de eventos al pasar el mouse por encima y
salir
HERRAMIENTAS WEB 19

20. Funciones JQuery
Eventos:
on(evento,handler): Asigna controladores de eventos a elementos
off(event): Elimina controladores de eventos previamente asignados.
HERRAMIENTAS WEB 20

21. Funciones JQuery
Animaciones
fadeIn(): Hace que un elemento se desvanezca gradualmente.
fadeOut(): Hace que un elemento desaparezca gradualmente.
slideDown(): Muestra un elemento con un efecto de deslizamiento.
slideUp(): Oculta un elemento con un efecto de deslizamiento.}
HERRAMIENTAS WEB 21