Javascript�Let’s get functional
Week 9
jQuery�But, in like, an easier way...
JavaScript�Is a coding language that connects to your HTML to add functionality.��People often refer to asking for some code in “vanilla javascript” to distinguish itself as having no added features or you know, flavours.
jQuery�A tool written in javascript.
It is a “library” for javascript that you can pull items from to write javascript shorter without remembering as much.
Why jQuery
“jQuery is like learning how to cook first using a microwave. Sure, you can reheat and prepare quite a few meals using the microwave, but it’s not really “cooking”. You wouldn’t cook Thanksgiving dinner in the microwave, right?”��-Chris Castiglione
Why jQuery
“What the hell, why aren’t I learning JavaScript then if this is the equivalent to the microwaving of cooking”
Why jQuery
Why jQuery
Why jQuery
Why jQuery
“But I want to be a designer who also develops code”
Why jQuery
“But I want to be a designer who also develops code”
That is excellent. You will be in high demand in the job market and have a lot of versatility.
While developers aren’t using much jQuery anymore, it is an excellent starting point for beginners. At the end of the day, it’s still javascript, we are just writing in shortcuts.
The code concepts and language we will be learning are directly transferable; they just take longer to write in javaScript.
Why jQuery
“But why is it the microwave of cooking if everything is directly transferable to javaScript? Why don’t people use jQuery”
Why jQuery
“But why is it the microwave of cooking if everything is directly transferable to javaScript? Why don’t people use jQuery”
Why jQuery
“But why is it the microwave of cooking if everything is directly transferable to javaScript? Why don’t people use jQuery”
Why jQuery
Preamble over�Let’s get functional w/ jQuery
Week 9
JavaScript
Setting up jQuery
Make another folder guys :)�Last new folder, I promise!
images
css
sass
js
index.html
Setting up jQuery
Make another folder guys :)�Last new folder, I promise!
images
css
sass
js
index.html
Setting up jQuery
images
css
sass
js
index.html
Setting up jQuery
Linking it
Unlike our CSS or Google fonts, we link our javascript right at the end of the page, just before the closing </body> tag.
This is the standard location for these files. Have the entire page load first before the javascript is read.
<script src="js/myscripts.js"></script>
</body>�</html>
Setting up jQuery
But with jQuery, that’s not all.
Setting up jQuery
We need to link/install our jQuery library
**** THIS MUST appear before the script tag you added with your own js file or it WILL NOT work ****
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/myscripts.js"></script>
</body>�</html>
Setting up jQuery
Some jQuery Concepts
Some javascript/jQuery Concepts
Variables
jQuery concepts: Variables
Variables
You can store content or data in a shortcut word called a variable.
�Simply define that variable’s word or name is in your file and put anything in it.
var cookies = 10;
jQuery concepts: Variables
var cookies = 10;
To define a new variable in your js file, the formula is �var variablename = value;
Declares we are defining a variable
Your custom variable name (use only letters). No spaces!
The value
jQuery concepts: Variables
var cookies = 10;
To define a new variable in your js file, the formula is �var variablename = value;
Variables can store a few types of things:�- Numbers (integers or floats)
jQuery concepts: Variables
var cookies = 10;
cookies = cookies-1;
To define a new variable in your js file, the formula is �var variablename = value;
Variables can store a few types of things:�- Numbers (integers or floats)
You can do math with variables that are defined as number based variables.
jQuery concepts: Variables
var cookies = 10;
cookies = 10-1;
To define a new variable in your js file, the formula is �var variablename = value;
Variables can store a few types of things:�- Numbers (integers or floats)
jQuery concepts: Variables
var cookies = 10;
var name = 'Jessica';
To define a new variable in your js file, the formula is �var variablename = value;
Variables can store a few types of things:�- Numbers (integers or floats)�- Text (string)
Text can be any length and multiple words just wrap it in between apostrophes.
jQuery concepts: Variables
var cookies = 10;
var name = 'Jessica';
var favQuote = 'Learning never exhausts the mind.';
To define a new variable in your js file, the formula is �var variablename = value;
Variables can store a few types of things:�- Numbers (integers or floats)�- Text (string)
jQuery concepts: Variables
var cookies = 10;
var name = 'Jessica';
var table = $('.table');
To define a new variable in your js file, the formula is �var variablename = value;
Variables can store a few types of things:�- Numbers (integers or floats)�- Text (string)
- Objects in your HTML
We’ll talk about targeting HTML elements later
jQuery concepts: Variables
var cookies = 10;
var name = 'Jessica';
var table = $('.table');
var happy = true;
To define a new variable in your js file, the formula is �var variablename = value;
Variables can store a few types of things:�- Numbers (integers or floats)�- Text (string)
- Objects in your HTML
- True or false (boolean)
Can either be set to true or false
jQuery concepts: Variables
var cookies = 10;
cookies = cookies-1;
To define a new variable in your js file, the formula is �var variablename = value;
Variables can store a few types of things:�- Numbers (integers or floats)�- Text (string)
- Objects in your HTML
- True or false (boolean)
After a variable has been defined, you can simply call the variable in the document whenever you want.
jQuery concepts: Variables
Some javascript/jQuery Concepts
If statements (IFTTT)�If this, then that.
If statements
Jessica’s parents have given her very specific instructions.
If she gets above an 80% in her English class, she will get 2 cookies as a reward. If not, but she gets above a 65%, she’ll get 1 cookie as a reward. If she does any worse than that, she won’t get any cookies.
jQuery concepts: if statements
If Jessica gets above an 80:
She gets 2 cookies
Otherwise, if she gets above a 65:�She gets 1 cookie
If she doesn’t reach those criteria:�She gets nothing
jQuery concepts: if statements
var grade;
var cookieStash = 0;
if(grade > 80) {
cookieStash = cookieStash+2;
}
else if(grade > 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
If Jessica gets above an 80:
She gets 2 cookies
Otherwise, if she gets above a 65:�She gets 1 cookie
If she doesn’t reach those criteria:�She gets nothing
var grade;
var cookieStash = 0;
grade = 70;
if(grade > 80) {
cookieStash = cookieStash+2;
}
else if(grade > 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
var grade;
var cookieStash = 0;
grade = 70;
if(grade > 80) {
cookieStash = cookieStash+2;
}
else if(grade > 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
cookieStash = cookieStash+1;
1 cookie
var grade;
var cookieStash = 0;
if(grade > 80) {
cookieStash = cookieStash+2;
}
else if(grade > 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
var grade;
var cookieStash = 0;
if(grade > 80) {
cookieStash = cookieStash+2;
}
else if(grade > 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
cookieStash = cookieStash+0;
0 cookies
var grade;
var cookieStash = 0;
grade = 80;
if(grade > 80) {
cookieStash = cookieStash+2;
}
else if(grade > 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
var grade;
var cookieStash = 0;
grade = 80;
if(grade > 80) {
cookieStash = cookieStash+2;
}
else if(grade > 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
cookieStash = cookieStash+1;
1 cookie
If statement comparative symbols
> Greater than
>= Greater than or equal to
< Less than
<= Less than or equal to
== Exactly equal to
!= Does not equal
jQuery concepts: if statements
var grade;
var cookieStash = 0;
grade = 80;
if(grade >= 80) {
cookieStash = cookieStash+2;
}
else if(grade >= 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
var grade;
var cookieStash = 0;
grade = 80;
if(grade >= 80) {
cookieStash = cookieStash+2;
}
else if(grade >= 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
jQuery concepts: if statements
cookieStash = cookieStash+2;
2 cookies
What’s the point of “else if”, why don’t I start another if?
jQuery concepts: if statements
var grade;
var cookieStash = 0;
grade = 80;
if(grade >= 80) {
cookieStash = cookieStash+2;
}
if(grade >= 65) {
cookieStash = cookieStash+1;
}
jQuery concepts: if statements
var grade;
var cookieStash = 0;
grade = 80;
if(grade >= 80) {
cookieStash = cookieStash+2;
}
if(grade >= 65) {
cookieStash = cookieStash+1;
}
jQuery concepts: if statements
Both statements will be read as true. Resulting in more cookies than intended
cookieStash = cookieStash+2;
cookieStash = cookieStash+1;
3 cookies
if(grade >= 80) {
cookieStash = cookieStash+2;
}
if(grade >= 65) {
cookieStash = cookieStash+1;
}
jQuery concepts: if statements
if(grade >= 80) {
cookieStash = cookieStash+2;
}
else if(grade >= 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
if(grade >= 80) {
cookieStash = cookieStash+2;
}
if(grade >= 65) {
cookieStash = cookieStash+1;
}
jQuery concepts: if statements
if(grade >= 80) {
cookieStash = cookieStash+2;
}
else if(grade >= 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
var grade = 80;
jQuery concepts: if statements
if(grade >= 80) {
cookieStash = cookieStash+2;
}
else if(grade >= 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
var grade = 80;
jQuery concepts: if statements
if(grade >= 80) {
cookieStash = cookieStash+2;
}
else if(grade >= 65) {
cookieStash = cookieStash+1;
}
else {
cookieStash = cookieStash+0;
}
var grade = 70;
How complicated can I get with an �if statement?
jQuery concepts: if statements
How complicated can I get with an �if statement?
jQuery concepts: if statements
Incredibly complicated. If you know an if statement, you can do anything.
How complicated can I get with an �if statement?
jQuery concepts: if statements
Incredibly complicated. If you know an if statement, you can do anything.
if( understandIfStatements == true) {
doAnything = true;
}
else {
doAnything = false;
}
Jessica’s parents have found great success in her English mark improvements from their cookie agreement, so they have decided to expand it.
If she gets above an 80% in her English and Math class, she will get 4 cookies. If she only gets above an 80% in either English or Math, she’ll get 2 cookies. Otherwise, they will take a cookie away from her stash.
jQuery concepts: if statements
jQuery concepts: if statements
var englishGrade;
var mathGrade;
var cookieStash = 6;
if(englishGrade>=80 && mathGrade>=80) {
cookieStash = cookieStash+4;
}
else if(englishGrade>=80 || mathGrade>=80) {
cookieStash = cookieStash+2;
}
else {
cookieStash = cookieStash-1;
}
If statement operative symbols
&& And
|| Or
jQuery concepts: if statements
jQuery concepts: if statements
var englishGrade;
var mathGrade;
var cookieStash = 6;
if((englishGrade>=80) && (mathGrade>=80)) {
cookieStash = cookieStash+4;
}
else if((englishGrade>=80) || (mathGrade>=80)) {
cookieStash = cookieStash+2;
}
else {
cookieStash = cookieStash-1;
}
You can use brackets to get really intense with if statement conditions
jQuery concepts: if statements
jQuery concepts: if statements
if((englishGrade>=80) && (mathGrade>=80)) {
cookieStash = cookieStash+4;
}
Jessica’s parents agreed that even if she didn’t get above 80 in english and math, that if she did maintain an average of above 90 then clearly she still deserved a reward.
if((englishGrade>=80 && mathGrade>=80) || gradeAverage>=90) {
cookieStash = cookieStash+4;
}
jQuery concepts: if statements
Think of these statements regarding how they are read with BEDMAS in mind. Some old school math :)
if((englishGrade>=80 && mathGrade>=80) || gradeAverage>=90) {
cookieStash = cookieStash+4;
}
You can also nest if statements inside each other if you need to
jQuery concepts: if statements
jQuery concepts: if statements
if(englishGrade>=80 && mathGrade>=80)) {
if(artGrade >= 70) {
cookieStash = cookieStash+6;
}
else {
cookieStash = cookieStash+4;
}
}
If Jessica gets above an 80 in english and math, she’ll get 4 cookies. But if she also gets above a 70 ontop of that, she’ll get 6 cookies instead of 4.
jQuery
Targeting HTML items
Target items in your HTML following this template:
$('targeted-item');
Start with a dollar sign and a pair of brackets. Inside the brackets, name the element in between apostrophes. Elements are targeted just like in CSS:
jQuery: targeting HTML items
<p>Lorem ipsum dolor sit amet.</p>
$('p');
$('.large');
$('#special-jump-link');
<div class="large"></div>
<h2 id="special-jump-link"></h2>
Target an HTML item’s direct parent or direct child element with .parent() and .children()
$('.large').parent('.container');
jQuery: targeting HTML items
$('.large').children('.button');
<div class="container">
<div class="large"></div>
</div>
<div class="large">
<a class="button"></a>
</div>
How the logic works: everything references whatever appears before it that is attached by a period.
$('.large').children('.button');
jQuery: targeting HTML items
Target elements with a class name of ‘large’. Then change my target to any elements that are inside my previous target (‘large’), that have a class name of ‘button’.
Target HTML items that appear somewhere inside your previous target, but not requiring it to be a direct child, with .find()
$('.large').find('.button');
jQuery: targeting HTML items
<div class="large">
<div class="nav">
<a class="button"></a>
</div>
</div>
Target the first HTML item that is containing your previous target, but not requiring it to be a direct parent, with .closest()
$('.large').closest('.container');
jQuery: targeting HTML items
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="large">
</div>
</div>
</div>
</div>
jQuery
Some quick shortcut things you can do functionally.
Hide something with .hide();
$('.fancy-disappearing-box').hide();
jQuery: functionality
Show something with .show();
$('.fancy-disappearing-box').show();
jQuery: functionality
Fade in or out an object to have it appear or disappear with some jazz
$('.fancy-disappearing-box').fadeIn();
$('.fancy-disappearing-box').fadeOut();
jQuery: functionality
jQuery
Manipulating class names on HTML items to change their CSS.
You can add or remove class names from an HTML element live.
$('.slider').addClass('open');
$('.slider').removeClass('open');
jQuery: functionality
.toggleClass() will simply add or remove a specified class name depending on whether it has it or not
$('.slider').toggleClass('open');
jQuery: functionality
javascript/jQuery
Functions
Functions can contain a set of commands within them, that when called, will run through.
function openSlider() {
$('.slider').toggleClass('open');
$('.slider').css('left', '0px');
}
jQuery: functions
Functions can contain a set of commands within them, that when called, will run through.
function closeSlider() {
$('.slider').toggleClass('open');
$('.slider').css('left', '-500px');
}
jQuery: functions
Name functions whatever you want! �(only letters, no spaces, case sensitive)
jQuery
Click events
To run jQuery commands when something is clicked, it is written like this, creating an unnamed click function:
$('.slider-button').click(function() {
openSlider();
});
jQuery: clicking something
$('.slider-button').click(function() {
$(this).hide();
});
jQuery: clicking something
You can use $(this) to refer to an object that has started a function (e.g., a click event) —it will not by default pass to another function
Video tutorial examples:
jQuery: make a bar slide in from the left
Creating a popup: �https://youtu.be/xFPwd7dKxwI
Explaining purpose of $(this): �https://youtu.be/qyFCVYrjZgs
Creating a slider: �https://youtu.be/9ApOaY49ExQ
Detecting where a user is scrolled in the page to and do something
jQuery: make a bar slide in from the left
Scroll event: pixel value
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
if (scrollPos > 100) {
$('.header').addClass('active');
} else {
$('.header').removeClass('active');
}
});
jQuery: scroll events
If you scroll past 100px, the header will have the active class added to it
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
if (scrollPos > $('.intro').offset().top) {
$('.header').addClass('active');
} else {
$('.header').removeClass('active');
}
});
jQuery: scroll events
Scroll event: object
If you scroll past the top of the intro of the page (.intro), the header will have the active class added to it
Recognizing javaScript
jQuery: recognizing the differences from javaScript
jQuery and JavaScript comparison
jQuery: recognizing the differences from javaScript
$('p');
$('.large');
$('#special-jump-link');
var par = document.querySelectorAll('p');
document.querySelectorAll('.large');
document.querySelector('#special-jump-link');
jQuery and JavaScript comparison
jQuery: recognizing the differences from javaScript
$('.slider').addClass('open');
document.querySelectorAll('.slider').forEach(function(aSlider) {
aSlider.classList.add('open');
});
Micro-Assignment