Connecting the pieces – Selecting an element – Content Sliders
Intro to JavaScript using jQuery
Slides available at: bit.ly/CnCjQuery
Powered By:
Ask Alex &/Or Rebecca to talk about the marketing committeKansas City Developer Conference
June 22 - 24, 2016
KCWiT 10% off Discount Code: KCWITROCKS
June 24 - 26, 2016
Presentation
Our Hosts
The Nerdery
Mentors
Last Month - CSS Compilers
- What are they? (Less, Sass, Stylus, etc)
- Why should we use them (Cleaner Code)
- Sass features
- Interaction Through the Command Line
- Presentation & Worksheet Link
What we'll cover
- How JavaScript fits into web pages
- How do we manipulate our website and respond to the user?
- Why jQuery?
- jQuery basics and syntax
Introduction
What does JavaScript do for us?
- Improve the user experience
- Provide dynamic functionality
- Reduce reliance on server for interaction
History
- Developed in 1995
- Originally named Mocha, then LiveScript and finally JavaScript (JS)
- JavaScript is not the same as Java
- ECMAScript is the official standard language, JS is one implementation of the standard
- JavaScript library
- Simple syntax
- Can speed up development time
- Easy element selection
Terms & Definitions
- Document Object Model (DOM) - Heirarchical format of HTML elements
html
/ \
head body
/ \ / \
meta link nav div
Terms & Definitions
Selector - Picks out the element to manipulate
element: div, p, h1, etc #id-selector: #my-id, #btn-submit, etc .class-selector: .my-class, .container, etc
Terms & Definitions
- Variable - Placeholder to store values
var myIngredient = "Vodka";
Terms & Definitions
Function - Takes input, processes the input and produces output
function cocktailShaker (vodka, cappelletti, lime, sugar, pellegrino) {
var cocktail = vodka + cappelletti + lime + sugar + pellegrino;
return cocktail;
}
Connecting the pieces
Like a <link> tag in the html <head> section connects your CSS, a <script> tag connects your JavaScript
<script src="assets/scripts/jQuery.min.js"></script> <script src="assets/scripts/script.js"></script>
NOTE: Order of script tags is important!
If your script file depends on another script file (as our script file depends jQuery), the dependancy has to be loaded prior to the script that depends on it so in our case the jQuery script tag has to come before our script tag.
jQuery Basics
What is this $ thing anyway?
What is this $ thing anyway?
$ is an alias for the jQuery function
$('p') = jQuery('p')
Allows for shorter, faster coding
Ready Event
We want our code to be able to run as soon as the page is ready - as soon as the DOM heierarchy has been constructed.
$(document).ready();
$(document).ready(function () {
//your jQuery code goes in here
});
The function above is referred to as a "callback." This is executable code that is passed as a parameter to another function or piece fo code
we pass the function into the ready function to run whatever code we've placed inside. Functions are objects so we're passing in a function object containing the code we want to have running. This is referred to as a "callback" functions without a name are referred to as anonymous functionsSelecting an element
In order to capture interactions and react to them we need to be able to pick out HTML elements
$() is used to select elements
The this keyword always refers to the element that was clicked and can come in handy for reacting to events.
This creates a jQuery object containing the selected elements that you can call methods (such as .fadeOut() or .html()) onSelecting an element
Given the HTML:
<div class="main">
<h2>My Section Title</h2>
<p id="my-id">Paragraph content. Not feeling creative.</p>
<div>
Select the h2 with an element selector:
$('h2')
select the div with a class selector:
$('.main')
select the paragraph with an id selector:
$('#my-id')
Parent/Child Elements
In the case where an element is nested inside of another, the inner element is the child element and the outer element is the parent element.
<nav>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
ul is a child of the nav element and the nav element is a parent of the ul element.
Parent/Child Elements
Parent selection example using jQuery
Given the HTML:
<nav>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
select the nav element using the parent method:
$('ul').parent(); //nav element is selected
Event Handling
Capture the action on an element and tell the browser what to do when it occurs.
What is an event?
- Click
- Hover
- Focus
- Mouseenter
- Mouseleave
- Keypress
- Many more
Event Handling
Given the HTML:
<div class="display"></div>
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
<button>Submit</button>
Gather click event on the Submit button:
$('button').click(function () {
//code for what you want to do when
//the button is clicked goes here
});
Reacting to Events
These are things that happen when an event is handled!
Effects
- Hide
- Show
- slideUp
- slideDown
- FadeIn
- FadeOut
Styling
- toggleClass
- css
Creating elements
When you add < & > around the element in the jquery function, you're creating an element instead of selecting it.
Selecting
$('div')
Creating
$('<div>')
The above creates an element but how do we add that element to the page?
Adding Content
html() method
Updates and replaces content nested inside the selected element
Given HTML:
<div><h5>This will get replaced!</h5></div>
jQuery:
$('div').html('<h2>My Heading</h2>');
Creates:
<div><h2>My Heading</h2></div>
append() method
Adds content inside the selected element
Given HTML:
<h1>Page Title</h1> <div id="main-header"></div>
jQuery:
$('#main-header').append('<h2>Sub Heading</h2>');
Creates:
<h1>Page Title</h1>
<div id="main-header">
<h2>Sub Heading</h2>
</div>
If we ran the same append a second time we'd get:
<h1>Page Title</h1>
<div id="main-header">
<h2>Sub Heading</h2>
<h2>Sub Heading</h2>
</div>
Building a String
Sometimes you want to combine the value from a variable with other text. In order to do that we utilize what is called concatenation. In the same way that we use + to add numbers we can use it in jQuery to add strings together.
var myVar = 'Chocolate'; var newString = myVar + ' is delicious!'; //newString = "Chocolate is delicious!"
Debugging
- Use your developer tools!
Keyboard shortcut: cmd+option+i on Macs, cmd+shift+i or F12 on Windows
- Console.log(); becomes your best friend
- Watch for errors!
Work Time
Work through part 1 of tonight's worksheet
Content Sliders
What is a slider?
- A "slideshow"
- Highlight important content in a visually appealing way
- Slider, Carousel, Gallery
Content Slider Examples
bxSlider - jQuery Library
bxSlider Your browser does not support the video tag.Review
- Why we need JavaScript and how to connect it
- jQuery Basics - Ready Event, Selecting Elements, Handling Events
- Content Sliders
Work through part 2 of Tonight's Worksheet
Questions?
Thank You!
Keep in touch!
#LadyDevs
#KCWiT
#CodingAndCocktailsKC