General Assembly

Events & jQuery

Wilson Espina

Review

What did we do last lesson?

Events & jQuery

Learning Objective

Learning Objectives

At the end of this class, you will be able to:

  • Create DOM event handlers using vanilla JavaScript.
  • Select DOM elements and properties using jQuery.
  • Manipulate the DOM by using jQuery selectors and functions.

Events & jQuery

Agenda

  • JavaScript events
  • Event Objects
  • Introduction to jQuery
  • Getting and setting DOM elements with jQuery

Events & jQuery

Exit Ticket Questions

  1. Can we have more similar code-alongs and exercises?
  2. Can we have some help with css referencing?

Events & jQuery

Mid-Course Feedback

Events & jQuery

Events

Events & jQuery

DOM Events

Pensive statue
  • Most modern websites have interactive elements.
  • Interactivity is triggered by user driven events.

Events & jQuery

DOM Events

Mouse
  • click
  • dblcode
  • mouseenter
  • mouseleave
Keyboard
  • keypress
  • keydown
  • keyup
Form
  • submit
  • change
  • focus
  • blur
Document
  • resize
  • scroll

Events & jQuery

Event Listeners

Select the DOM Element:


const button = document.querySelector(‘.submitBtn’);

Attach event listener to DOM element:

Event Listener diagram 1

Events & jQuery

Event Listeners

Select the DOM Element:


const button = document.querySelector(‘.submitBtn’);

Attach event listener to DOM element:

Event Listener diagram 2

Events & jQuery

Event Listeners

Select the DOM Element:


const button = document.querySelector(‘.submitBtn’);

Attach event listener to DOM element:

Event Listener diagram 3

Events & jQuery

Event Listeners

Select the DOM Element:


const button = document.querySelector(‘.submitBtn’);

Attach event listener to DOM element:

Event Listener diagram 4

Events & jQuery

Mouse
  • click
  • dblcode
  • mouseenter
  • mouseleave
Keyboard
  • keypress
  • keydown
  • keyup
Form
  • submit
  • change
  • focus
  • blur
Document
  • resize
  • scroll
Event Listener diagram 5

Events & jQuery

Event Listeners

Select the DOM Element:


const button = document.querySelector(‘.submitBtn’);

Attach event listener to DOM element:

Event Listener diagram 6

Code along

Code Along

Open up: 00-events-codealong

Code Along

Lab - DOM Events

Exercise

Key Objective

  • Create DOM event handlers using vanilla JavaScript

Type of Exercise

  • Individual / Pairs

Location

  • 01-events-exercise

Timing

8 mins
  1. Add event listeners to the 3 buttons at the top of the page.
  2. Clicking each button should hide the block below it with the corresponding color.
  3. Use handout/slides as a guide for syntax.

Events & jQuery

Event Objects

Events & jQuery

Referencing an Event

  • The event object contains information about the triggering event is passed to a function called in response to an event.
  • We can specify a parameter to be able to reference this event in your code.
  • By convention we use event or e

submitButton.on('click', (event) => {
  console.log(event); // Access to event object
});

Events & jQuery

preventDefault()

  • Prevents element from executing default behaviour in response to an event, e.g. preventing the browser from refreshing when submitting a form.

submitButton.on('click', (event) => {
  event.preventDefault();
});

Code along

Code Along

Open up: 02-event-object-codealong

Code Along

Exercise - Event Object

Exercise

Type of Exercise

  • Individual

Location

  • 03-event object—exercise

Timing

3 mins
  1. Update the code to prevent the form from submitting when the button is clicked.
  2. Test your code in the browser and check that the form is not being submitted and causing a full page reload.

Events & jQuery

jQuery

Events & jQuery

JavaScript Libraries

  • A JavaScript library is a collection of code, predominantly reusable methods, that serve a particular purpose.
  • Developers often come across the same problems in their day-to-day work.
  • Libraries can often save time and allow you to do more with less code.
  • There's no need to reinvent the wheel!
Library gif
React js logo Underscore js logo D3 js logo

Events & jQuery

What is jQuery?

jQuery logo
  • jQuery is a JavaScript library that you include in your project.
  • It provides hundreds of helpful methods for interacting with the DOM.
  • jQuery's syntax was developed to mimic CSS selector syntax, making code easier to develop, read, and manage.
  • jQuery is just JavaScript.

Events & jQuery

jQuery Popularity

Stackoverflow survey 2020

Events & jQuery

How it works

jQuery allows us to keep using the CSS-style selectors with a more concise syntax:

jQuery vs javascript 1

Events & jQuery

DOM Manipulation

jQuery statements for DOM manipulation are more concise than Vanilla JavaScript:

jQuery vs javascript 2

Events & jQuery

jQuery vs JavaScript

JQUERY

✅ Write less code

✅ Plenty of tutorials / examples
jQuery logo
VANILLA JAVASCRIPT

✅ Better performance

✅ Faster
JavaScript logo

Events & jQuery

Using jQuery

Events & jQuery

Working with Script files

  • It is considered best practice to keep JavaScript files organised in one folder.
  • The JavaScript folder is typically called scripts or js.
Folder structure screenshot

Events & jQuery

Referencing Script Files in HTML


<body>
  <!-- HTML content goes here -->

  <script src="js/main.js"></script>
</body>
  1. Create your custom JavaScript file with a .js extension (example: main.js).
  2. Add your script just before the closing </body> tag and after the <script>

Events & jQuery

Add jQuery Script


<body>
  <!-- HTML content goes here -->
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/main.js"></script>
</body>
  1. Create your custom JavaScript file with a .js extension (example: main.js).
  2. Add your script just before the closing </body> tag and after the <script>
  3. Add the jQuery <script> tag before the main.js file (the order matters).

Events & jQuery

Using a CDN

  • The jQuery library can be loaded from a CDN (content delivery network) instead of downloading it locally.
  • Visit https://code.jquery.com and choose the minified option for the latest release. Copy and paste the script tag into your file.
CDN 

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Events & jQuery

jQuery Selections

Events & jQuery

a jQuery Statement involves 2 parts

jQuery selection part 1

Events & jQuery

jQuery Selector

jQuery selector

Events & jQuery

Selectors at a glance

CSS JQUERY

ELEMENT

a { color: blue; }

$('a')

ID

#main { color: blue; }

$('#main')

CLASS

.info { color: blue; }

$('.info')

NESTED SELECTOR

div span { color: blue; }

$('div span')

Events & jQuery

jQuery Objects

Selecting elements with vanilla JavaScript returns an element reference (querySelector) or a collection of element references (querySelectorAll)

Vanilla JavaScript Selector


querySelector('selector')
Blue arrow

Plain Element Selector


<element reference>

Events & jQuery

jQuery Objects

Selecting elements with jQuery returns a jQuery object, which is one or more element references packaged with jQuery methods and properties.

jQuery Selector


$('selector')
Blue arrow

jQuery Object


{
  element reference
  methods
  properties
}

Events & jQuery

Naming Variables

A typical naming convention is to include $ at start of variable name to indicate that its value is a jQuery object.


const $openTab = $('.open');

Code along

Code Along

Open up: 04-jquery-statements-codealong

Code Along

Events & jQuery

a jQuery Statement involves 2 parts

jQuery selection part 2

Events & jQuery

jQuery Methods

jQuery methods

Events & jQuery

jQuery Documentation

api.jquery.com/

 jQuery docs

Events & jQuery

What we can do with jQuery

What we can do with jQuery

📚 See your handout or the jQuery docs for the list

Events & jQuery

Finding elements block
jQuery traversing the DOM 1

Events & jQuery

Finding elements block
jQuery traversing the DOM 2

Events & jQuery

Traversing the DOM

Finding elements block
METHODS EXAMPLES

.find() finds all descendants

$('div').find('a');

.parent()

$('#box1').parent();

.siblings()

$('p').siblings('.important');

.children()

$('ul').children('li');

Events & jQuery

What we can do with jQuery

What we can do with jQuery

📚 See your handout or the jQuery docs for the list

Events & jQuery

Common DOM Manipulation Methods

Get/Set elements block
METHODS EXAMPLES

.html()

$(‘h1').html('Content');

.text()

$(‘h1’).text('Just text content!’);

.attr()

$('img').attr('src', ‘images/bike.png');

Events & jQuery

Common DOM Manipulation Methods - Classes

Get/Set elements block
METHODS EXAMPLES

.addClass()

$('p').addClass('success');

.removeClass()

$('p').removeClass('my-class-here');

.toggleClass()

$('p').toggleClass('special');

Code along

Code Along

Open up: 04-jquery-statements-codealong

Code Along

Lab - jQuery DOM Manipulation - Part 1

Exercise

Key Objective

  • Utilise jQuery to access and manipulate DOM elements.

Type of Exercise

  • Pairs

Location

  • 05-jquery-statements-exercise

Timing

5 mins
  1. Follow the instructions under Part 1 in main.js
  2. Use handout/slides as a guide for syntax.

Events & jQuery

What we can do with jQuery

What we can do with jQuery

📚 See your handout or the jQuery docs for the list

Events & jQuery

Common Effects Methods

Add effects block
METHODS EXAMPLES

.show()

$('h1').show();

.hide()

$('ul').hide();

.fadeIn()

$('h1').fadeIn(300);

.fadeOut()

$('.special').fadeOut('fast');

.slideUp()

$('div').slideUp();

.slideDown()

$('#box1').slideDown('slow');

.slideToggle()

$('p').slideToggle(300); animation speed

Code along

Code Along

Open up: 04-jquery-statements-codealong

Code Along

Events & jQuery

What we can do with jQuery

What we can do with jQuery

📚 See your handout or the jQuery docs for the list

Events & jQuery

jQuery Events

Events & jQuery

Event Listeners

Create event listeners block

We use the on() method to handle events in jQuery:

jQuery events 1

Events & jQuery

Event Listeners

Create event listeners block

We use the on() method to handle events in jQuery:

jQuery events 2

Events & jQuery

Event Listeners

Create event listeners block

We use the on() method to handle events in jQuery:

jQuery events 3

Events & jQuery

Event Listeners

Create event listeners block

We use the on() method to handle events in jQuery:

jQuery events 4

Events & jQuery

Mouse
  • click
  • dblcode
  • mouseenter
  • mouseleave
Keyboard
  • keypress
  • keydown
  • keyup
Form
  • submit
  • change
  • focus
  • blur
Document
  • resize
  • scroll
jQuery events 5

Events & jQuery

Event Listeners

Create event listeners block

We use the on() method to handle events in jQuery:

jQuery events 6

Code along

Code Along

Open up: 06-jquery-events-codealong

Code Along

Lab - jQuery DOM Manipulation - Part 2

Exercise

Key Objective

  • Utilise jQuery to access and manipulate DOM elements.

Type of Exercise

  • Individual / Pairs

Location

  • Continue with 05-jquery-statements-exercise

Timing

5 mins
  1. Follow the instructions under Part 2 in main.js
  2. Use handout/slides as a guide for syntax.

Events & jQuery

Learning Objective

Learning Objectives - Review

At the end of this class, you will be able to:

  • Create DOM event handlers using vanilla JavaScript.
  • Select DOM elements and properties using jQuery.
  • Manipulate the DOM by using jQuery selectors and functions.

Events & jQuery

Look Ahead to Next Lesson

  • Identify all the HTTP verbs & their uses.
  • Describe APIs and how to make calls and consume API data.
  • Access public APIs and get information back.
  • Implement an Ajax request with Fetch.
  • Create an Ajax request using jQuery.

Events & jQuery

Q&A

Events & jQuery

Homework

Events & jQuery

Exit Ticket

(Lesson #09)