Playing With jQuery

Goals

  • Write JavaScript code in a .js file.

  • Write a function that takes advantage of jQuery.

Overview

In addition to being a powerful programming language, Javascript allows you to make your web site interactive. You can use it to build anything from a simple animation to a giant web application like Twitter or Github. It gives you total control to add, remove, or modify content you've made with HTML. You can also use it to change styles and add or remove classes.

In this lesson, we'll also be using jQuery to make interacting with the page easier. jQuery is a JavaScript library that is widely used in the industry to alter pages, make requests, and create animations. We're going to create a function that adds a new item to our list.

Steps

Step 1

In addition to writing JavaScript in the browser's console, you can also write javascript in .js files. We're going to write our code in app.js, which will run whenever the page loads. In this step, we're going to assign a variable in app.js using the jQuery selector. Open app.js in your text editor, and add the following code.

var itemTemplate = $('#templates .item')
var list         = $('#list')

Refresh the page in your browser. Open the console and write 'itemTemplate' and 'list'. What do you see? What other functions can you call on list and itemTemplate?

Step 2

In this step, we're going to write a function to create items. It's going to create a copy of the itemTemplate, add data to the new item, and append the new item to the list element. Add the following code to the bottom of app.js.

var addItemToPage = function(itemData) {
  var item = itemTemplate.clone()
  item.attr('data-id',itemData.id)
  item.find('.description').text(itemData.description)
  if(itemData.completed) {
    item.addClass('completed')
  }
  list.append(item)
}

Refresh the page and go back to the developer console. Lets use our new function! Type this into the console:

var orange = { description: 'Orange', id: 9000, completed: false }
addItemToPage(orange)

Your list should now have an orange!

Explanation

You just used JavaScript to update a page! Websites do this all time, in order to make the user experience interactive and seamless. You used a couple of handy jQuery functions:

  • The jQuery Selector $() is an easy way to fetch an item from the page. All you need to do is specify the class, id, or tag of the element or elements you want.

  • .clone() creates a copy of a selected element. It's helpful for creating elements from a template.

  • .find() helps you find elements nested inside other elements.

  • .text() allows you to get and alter the text of an element.

  • .attr() allows you to get and alter attributes stored in your HTML. In this case, we used it store the id of an item in a data-id attribute, that is not used for styling, just for data storage.

  • .addClass() allows you to add a class to an element.

  • .append() takes an element and attaches it to the end of another element! That way, your element will actually show up on the page.

There are many other jQuery functions that are helpful – we'll use more as we go along. In the meantime, play around in the developer console and see what you can change on the page using JavaScript and jQuery!

Next Step:

Go on to Creating A List