Girl Develop It

Introduction to JavaScript and jQuery

Class 3

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

What is a library?

  • Software libraries hold functions (not books!)
  • When you include a library, you can use all the functions in that library
  • That means: you get to take advantage of other people's experience!
  • And... Save time!

What is jQuery?

jQuery is a library of JavaScript functions.

It contains many functions to help simplify your programming, including:

  • HTML element selection & manipulation
  • CSS manipulation
  • HTML events
  • JavaScript effects and animations

Why use jQuery?

Including jQuery

Two ways to include jQuery on your page:
Download the library, store it locally: 

<head>
	<script src="jquery.js"></script>
</head>
Include the library from a CDN: 

<head>
	<script src="https://code.jquery.com/jquery-latest.min.js">
	</script>
</head>
Note: CDN-hosted code can change or be unavailable! It's always best to specify the exact version you want, and provide a fallback.

jQuery Selectors

Remember document.getElementById() and document.getElementsByTagName()?

jQuery selectors let you get elements by:

  • Element name (div, p) 
    
var $divs = $("div"); // All divs on page
  • ID name (#mainpicture, #results) 
    
var $img = $("#mainpicture"); //img with id mainpicture
  • Class name (.result, .picture) 
    
var $images = $(".picture"); //All images with class picture

jQuery Actions

jQuery has hundreds of actions that can be performed on any element

All the actions are methods

As methods they are called with dot notation

Action format 

$(selector).action();

Updating attributes and css


<img id="mainpicture" src="images/boring-image.png">
						

var $img = $('#mainpicture');

// Attribute Get/Set
$img.attr('src');
$img.attr('src', 'images/pink-logo.png');

// CSS Get/Set
$img.css('width');
$img.css('width', '200px');

Updating values and html


<div id="results-slide-9">Boo!</div>

Get and set html value


var $results = $('#results-slide-9');
$results.html();
$results.html('New html!');

Try it!

Boo!

Append and Prepend


<div id="results-slide-10">Boo!</div>         
					

var $results = $('#results-slide-10');

// Append html
$results.append('Additional html');

// Prepend html
$results.prepend('Additional html (on top)');

Try it!

Boo!

Creating new element


var $newDiv = $('<div></div>');
Seriously. That's it!

Let's Develop It!

Try to convert last week's DOM interaction into jQuery.

Don't forget to include jQuery in your HTML head!

Document Ready

Webpages take time to load

Almost always, you don't want the JavaScript to be called until the page is loaded

Document ready is a method called when the page is loaded 

$(document).ready(function(){
	// your code here
});
Note: The function() inside is an "anonymous function". It has no name, but still performs like a function.

Where to Put Your JavaScript

When you wrap your code with $(document).ready(function(){});, you can follow best practices and load your JavaScript at the end of your HTML document, right before the closing </body> tag.

This lets your content load quickly, and ensures the DOM is fully loaded before you start modifying it.

HTML events

Events occur on a webpage via user interaction

Common Events:

  • mouseenter -- mouse goes inside an element
  • mouseleave -- mouse leaves an element
  • click -- mouse clicks an element
  • Other events

Handling events


$(selector).on('mouseenter', function(){
	//code when the mouse enters
})
					

$('.box').on('mouseenter', function(){
	$(this).css('background-color', 'purple')
})
The $(this) selector in jQuery refers to the element on whom the action was called.
Here $(this) is the $('.box') that the mouse entered.

Handling event examples


$('.box').on('mouseenter', function(){
	$(this).css('background-color', 'purple')
})
						

$('.box').on('mouseleave', function(){
	$(this).css('background-color', 'orange')
})
						

$('.box').on('click', function(){
	$(this).css('background-color', 'green')
})

Combining events

If you want multiple events to happen on the same element, you can pass an object to the on method. We call this an event map.


$('.box').on({
	click: function() {
		$(this).css('background-color', 'green')
	},
	mouseenter: function() {
		$(this).css('background-color', 'purple')
	},
	mouseleave: function(){
		$(this).css('background-color', 'orange')
	}
});

Let's Develop It

  • Move your <script> tags to the end of your HTML file.
  • Add a div to your HTML that is 100px by 200px
  • Bind events to the div in your JavaScript file
  • Don't forget to surround your events with document ready!
  • Try to change size, color, or event the HTML inside the div
  • Bonus: change all the onclick events on your buttons to jQuery click events

HTML forms

HTML Forms allow users to enter information


<form id="about-me">
	<input type="text" id="name" placeholder="Enter a name"/>
	<label>Do you like popcorn?</label>
	<label for="popcorn-yes">Yes</label>
		<input type="radio" name="popcorn" id="popcorn-yes" value="yes"/>
	<label for="popcorn-no">No </label>
		<input type="radio" name="popcorn" id="popcorn-no" value="no"/>
	<label for="dinosaur">Favorite Dinosaur</label>
	<select id="dinosaur">
		<option value="t-rex">Tyrannosaurus Rex</option>
		<option value="tri">Triceratops</option>
		<option value="stego">Stegosaurus</option>
		<option value="other">Other</option>
	</select>
	<input type="submit" value="Go!"/>
</form>

HTML forms

HTML Forms allow users to enter information






Values from Forms

You can use JavaScript to get values from a form


$('#name').val();
$('select#dinosaur').val();
$('input:radio[name="popcorn"]:checked').val();
Or set values of a form 

$('#name').val('Mitch');
$('select#dinosaur').val('stego');
$('input:radio[name="popcorn"][value="no"]').attr('checked',true);

Values from Forms

jQuery has an event for form submission


$('#about-me').on('submit', function(event){
	//code to execute after submission
	event.preventDefault();
});
You can use "event.preventDefault();" to prevent the form trying to submit to a server.

Let's Develop It

  • Choose one (or all!) of your functions made so far
  • i.e. lifetime supply, favorite things, or my friends
  • Create a form to send dynamic data to the function when you click the submit button
  • Don't forget to add parameters to your existing functions!

  • This is a little harder than all the other exercises.
  • Be creative!

Questions?

?