FEWDRemote

Lecture 16

Events and jQuery

Taq Karim

Senior Software Engineer, ** Intersection**

-

Welcome to Lecture 15! Here’s a brief rundown. bricks

-

Learning Objectives

Agenda

Vanilla JS

Let’s explore what can be done with vanilla js

-

Golden Rule

Generally, we first select the DOM element we wish to manipulate and then we leverage NodeList object properties to make the manipulations themselves.

-

Adding CSS

const div = document.querySelector('div')
div.style.border = '1px solid red';

-

Reading CSS

const div = document.querySelector('div')
console.log(div.style.border);

-

Accessing ComputedStyles

Consider this documentation. Based on the docs, how could you access the computed width of a div that has a CSS width set to 100%?

-

Class manipulation

The browser gives us access to the the classList property to handle class manipulation.

-

const div = document.querySelector('div'); // <div></div>
div.classList.add('test'); // <div class="test"></div>
div.classList.remove('test'); // <div></div>
div.classList.contains('test'); // false

Always prefer to use the classList property as an interface for class manipulation on DOM HTML elements.

-

Getting/Setting Attributes

We are able to use the getAttribute and setAttribute properties to manipulate DOM element attributes

// <a></a>
const a = document.querySelector('a');

a.setAttribute('href', 'https://www.google.com');
// ^^ <a href="https://www.google.com"></a>

console.log(a.getAttribute('href')); 
// ^^ https://www.google.com

-

Note about querySelector

Question: How can we select class js-nested below?

<div>
	<span class="js-nested"></span>
</div>

// either:
document.querySelector('.js-nested')

// OR:
const par = document.querySelector('div');
const nested = par.querySelector('.js-nested')

Advantage: for large HTML pages, there may be a performance boost to search within a DOM node vs entire page

-

innerHTML, innerText, textContent

const div = document.querySelector('div')
if (div.innerText) {
	div.innerText = 'test'
}
else {
	div.textContent = 'test'
}

Exercise

👇👇👇

-

Consider this repo. Download and open the jQuery_review folder. Complete the problems from basicMethodsReviewVANILLA.js file.

jQuery

-

Everything we just did using vanilla JavaScript, we can also do using jQuery, a third-party library.

There’s a good chance our syntax would have been less verbose and marginally easier to remember.

-

…Why did we just cover vanilla JavaScript?

-

It’s important to realize that jQuery uses vanilla JavaScript and is written using vanilla JavaScript.

-

You might not always have access to or be able to use jQuery. For example, React discourages manipulating the DOM directly and from using third-party libraries like jQuery when you absolutely need to modify the DOM directly.

-

As a front-end engineer, you need to be able to manipulate the DOM with and without jQuery.

-

jQuery Background

-

-

Upsides to Using jQuery

-

-

Downsides to Using jQuery

-

-

TBF there aren’t that many good reason to use jQuery these days. However, as an engineer, you should keep tradeoffs in mind.

-

jQuery() Function

-

jQuery’s primary function is called jQuery(), also aliased under $(). It is exposed as a global variable on the window object when we include the library.

-

It does different things depending on the argument passed to it.

-

Including jQuery

-

For today’s class, we’ll include jQuery from a CDN (content delivery network). There’s quite a few CDNs; we’ll go with Google’s:

https://developers.google.com/speed/libraries/#jquery

-

jQuery() Function Example

-

<ul class="special-list">
    <li>First Child</li>
    <li>Second Child</li>
</ul>

// returns a jQuery object containing
// all the `li` inside `.special-list`
$(".special-list li")
// jQuery(".special-list li")

-

jQuery Object

-

The main use of the jQuery function is to select a group of elements. It’s a lot like querySelectorAll().

-

However, the jQuery function returns a jQuery object, an array-like collection of elements.

We only have access to jQuery methods on jQuery objects, not vanilla JavaScript objects, e.g. Nodelist returned from querySelectorAll().

-

-

// bracket notation
$(".special-list li")[0];
// get method*
$(".special-list li").get(0);

-

Advice

Please don’t worry about knowing every single DOM API method and every single jQuery method.

 

I recommend getting comfortable reading documentation. You’ll be reading the JavaScript documentation on MDN and the jQuery documentation on jQuery’s website, as well as using Google, regularly.

-

https://api.jquery.com/

Their search functionality is poor, so use Google and prefix your search with “jQuery”.

Exercise

-

Consider this repo. Download and open the jQuery_review folder. Complete the selectorsReview.js file.

We solved it before without jQuery , now solve again with jQuery. Then, solve basicMethodsReview.js, again this time with jQuery

Event Handling

-

We use event listeners, also called event handlers, to designate certain code to run based on events.

-

There are built-in events for things that happen on our page, e.g. click, hover, submit, page finished loading, etc.

-

Common events are: submit, click, mouseenter, mouseleave, load.

You can find a full list of events here.

-

addEventListener()

element.addEventListener(type, listener);

-

We can attach a listener, a function to run when the event occurs, to an element on the page.

-

We can retrieve the element using the methods mentioned previously, e.g. document.querySelector().

-

addEventListener() Example

<a href="https://www.google.com/" target="_blank" rel="noopener">
    Click Me!
</a>

const anchorElem = document.querySelector("a");
// The parameter `event` is an object with information
// about the mouse click.
anchorElem.addEventListener("click", event => {
    // There are some default actions associated
    // with an element.
    // For anchor tags, we're taken to a new page.
    // We need to disable that default behavior
    // using `preventDefault()`
    event.preventDefault();
    console.log("You clicked the anchor tag!");
});

Exercises

Create the following files:

  1. index.html, create a simple text input field and a button.
  2. app.js, write an event listener for your button that, when triggered will console.log out the contents of your input field.

(No need to create a js folder for now, this is a quick exercise)

-

Consider this repo. Download and open the simple_events_review folder. Complete the ask in js/app.js file.

Solve twice, once without jQuery and then again with jQuery.

-

Consider this repo. Download and open the dragging folder. Think about how you would implement dragging functionality

Solve twice, once without jQuery and then again with jQuery.