IP250F15A

From CourseWiki

(Redirected from IP250)
Jump to: navigation, search

jQuery: Beyond Fundamentals

jQuery: Beyond Fundamentals

Overview

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. In this workshop-oriented course, you learn to traverse and manipulate the Document Object Model, use AJAX to make asynchronous requests, respond to Events, and use Effects to enhance the user experience. You also use jQuery User Interface plugins to quickly create rich user experiences with minimal programming.

Duration: 12 hours

jQuery: Beyond Fundamentals
This is a workshop oriented course in which the focus will be on manipulating web pages with jQuery. You will work with jQuery live during our lab sessions and create web pages that include jQuery and use its capabilities. Prior exposure to JavaScript and Cascading Style Sheets would be very helpful but is not required for this course.

Objectives

Theoretical Objectives

  • Understand how jQuery fits into the context of web development
  • Understand where jQuery fits into the context of specific web pages
  • Understand these concepts in jQuery:
    • jQuery Core
    • Selectors
    • DOM Traversal
    • Attributes
    • Manipulation
    • CSS
    • Events
    • Effects
    • Ajax
    • Utilities
    • jQuery UI
    • jQuery Plugins
    • Know where to find and how to use jQuery resources

Practical Objectives

  • Create web pages that use jQuery to:
    • Manipulate content in a web page
    • Write content in a web page
    • Respond to Events
    • Import External Data into a web page
    • Use jQuery UI
    • Use jQuery Plugins

Prerequisites

Academic

The better you understand HTML - the more you will take from this course.

Technical

Access to the Internet You will need a good text editor and an FTP client to move files from / to our server to / from your remote location in order to successfully complete the assignment. Links to free resources will be provided during the course.

Computer Equipment

The sessions are conducted in a computer lab, and you will have a computer provided for your use. You are welcome to bring your own computer to the lab sessions if you prefer to use that. Wireless access is available in the lab.

Please note that at times you will be doing a fair bit of typing and you will want to have a large enough screen and separate physical keyboard so that you can view content and type at the same time.

If it appears that you are having challenges with your own device, we will ask you to use the computer provided for you in the lab.

Storage

Please plan to use your own cloud based storage SkyDrive, DropBox, iCloud (or similar) or a USB storage key.

Instructional Methods

  • Hands-on labs
  • Discussion
  • Online collaboration
  • Homework assignments submitted online
  • Lecture

Course Materials

  • Web site
  • Course notes
  • Printed copies of on-screen lecture notes available on request during lectures

No Recording or Pictures in the Lab

Please note: Taking pictures or video during the course sessions is not permitted. All the course materials and lecture notes are available in physical form and on the web.



jQuery

Coming Soon
Courses coming

Follow JimUBC on Twitter for latest course updates
Follow JimUBC on Twitter for latest course updates

Contents

Session One

Samples and Demos

Demo site

http://dotnet.tech.ubc.ca/OnlineWork/jquery/first_last00.htm (first_last00.htm would be the name of your home page)


  • Peerwise
  • Peerwise Course ID: 12330
  • Course Identifier IP250F15A

Blog for this session Please join the conversation.

Things to do right away

Set up Development Platform

Register for this course

  • Sessions: 4 Wednesdays: November 25th – December 16, 2015 6:30pm - 9:30pm
  • Location: Lab C460
  • Students: 6 [1]
  • Course Assistant: Mandy Lui




Note the session content schedule is subject to change.
The main topics and general order will remain, but what is covered in each session may vary from what is shown here.

Session One Outline


At the end of this session you should be able to:

  • Explain what jQuery is.
    • Specifically this:
      jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. — Source: jQuery.com
  • List three things that jQuery can do.
  • Explain why you might prefer to run jQuery from your local server vs. using a Content Delivery Network
  • Make jQuery accessible within a web page
  • Use jQuery to select and modify Document Object Model elements within an html page

Journal

Things to consider before we start:

To prepare for this session we will

What can I do with jQuery
  1. jQuery core functionality: Implements jQuery functions and commonly used utilities
  2. Selection and Traversal: Allows you to find elements within your document using common CSS concepts. Think "Query"
  3. Manipulation and CSS: Manipulate the Document Object Model (DOM). You can add, remove, and move content. You can also manipulate CSS.
  4. Events: Allows you to work with Events (typically for user interaction)
  5. Effects: Add animated effects to elements. jQuery lets you add effects like fading in/out, sliding in/out, and expanding/contracting.
  6. AJAX: Make XML (Ajax) requests. This allows you to interact with a back-end server without refreshing the current web page.
  • Forms: With jQuery you can add sophisticated client-side form validation, create auto-complete Ajax text fields that pull data from a server-side database

And then there's jQuery UI. But we'll get to that later.

In this session we will create an environment in which you can experiment with jQuery and then we will look at:

  • Selectors (major focus tonight) with examples (non-exhaustive)
    • Traversing the Document Object Model
    • Hierarchy
    • .filter()
  • Manipulating existing html elements (to prove that we have successfully selected specific elements.
  • Review this these tables of jQuery Selectors
  • See it live in jsbin

Session One Assignment

Write jQuery

  • Create at least two jsbin pages that use jQuery.
    • Use selectors to pick matching elements from the DOM (Document Object Model)
    • Change or otherwise affect the elements (.addClass() or .html() or .text() or .attr() or ....?)
    • Keep track of the URLs for the pages (email to yourself or make sure that you can recognize them in the "my bins" list in jsbin. We will need this to discuss in the lab next week.
  • In jsbin - use the Bins tab, and download your bin files so you can view the complete page.

Do it real web pages

[edit] Recall and Reflect

See the tabs for Recall and Reflect

  • Login in to PeerWise :IP250F15A
  • Create at least one new question.
  • Answer at least five questions.
    • Correct your answers if necessary.
      • Confirm your answers as you go along.
    • Help where you can to improve explanations.
    • Add comments in the questions.
    • Rate the questions.

Detailed Instructions

Reflect in the course blog


Please click the picture above and answer the following questions in the course blog.

Highlights / Metacognition
  • What did you think was the most valuable thing that happened for you tonight?
  • What did you learn from that?
  • What will you do with that knowledge?
Questions?
  • Now that we've had our session together, what do you want to know?
  • What could we have done better?

Course Blog Tutorial (video)

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
http://jquery.com

External Definition

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.[1] It was released in January 2006 at BarCamp NYC by John Resig. It is currently developed by a team of developers led by Dave Methvin. jQuery is the most popular JavaScript library in use today, with installation on 73% of the top 10 million highest-trafficked sites on the Web.[1][1][1]
jQuery is free and open source software, licensed under the MIT License.[1] jQuery's syntax is designed to make it easier to navigate a document, select Document Object Model(DOM) elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.
Microsoft and Nokia have announced plans to bundle jQuery on their platforms.[1] Microsoft is adopting it initially within Visual Studio[1] for use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework while Nokia has integrated it into their Web Run-Time widget development platform.[1] jQuery has also been used in MediaWiki since version 1.16.[1]
http://en.wikipedia.org/wiki/JQuery

    1. .↑ http://jquery.com
    2. .↑ http://trends.builtwith.com/javascript/JQuery
    3. .↑ http://w3techs.com/technologies/overview/javascript_library/all
    4. .↑ http://docs.jquery.com/License
    5. .↑ http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/
    6. .↑ http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
    7. .↑ http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT
    8. .↑ http://www.mediawiki.org/wiki/JQuery

    What can I do with jQuery

    1. jQuery core functionality: Implements jQuery functions and commonly used utilities
    2. Selection and Traversal: Allows you to find elements within your document using common CSS concepts. Think "Query"
    3. Manipulation and CSS: Manipulate the Document Object Model (DOM). You can add, remove, and move content. You can also manipulate CSS.
    4. Events: Allows you to work with Events (typically for user interaction)
    5. Effects: Add animated effects to elements. jQuery lets you add effects like fading in/out, sliding in/out, and expanding/contracting.
    6. AJAX: Make XML (Ajax) requests. This allows you to interact with a back-end server without refreshing the current web page.
    • Forms: With jQuery you can add sophisticated client-side form validation, create auto-complete Ajax text fields that pull data from a server-side database

    And then there's jQuery UI. But we'll get to that later.

    Looking at the Document Object Model

    Mini lab session - using browser developer tools to understand the Document Object Model.

    In most modern browsers you can access developer tools by pressing the F12 Key.


    Overview

    Session One

    In this session we will create an environment in which you can experiment with jQuery and then we will look at:

    • Selectors (major focus tonight) with examples (non-exhaustive)
      • Traversing the Document Object Model
      • Hierarchy
      • .filter()
    • Manipulating existing html elements (to prove that we have successfully selected specific elements.

    jQuery Features

    • Core functionality
      Implements core jQuery functions and commonly used utilities
    • Selection and Traversal
      finding content in the documents navigating within the document using selectors and filters
    • Manipulation and CSS
      finding and changing document content and working with CSS data
    • Events
      working with events in simple, consistent syntax that works cross-browsers
    • Effects
      animations, hiding, revealing, moving things around
    • Ajax
      The jQuery library has a full suite of AJAX capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh.
    • jQuery UI
    • jQuery Plugins

    Session One Lab Session

    jQuery in your page

    jQuery on Google CDN (Content Delivery Network)

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

    jQuery on Microsoft CDN (Content Delivery Network)
    source: http://www.asp.net/ajaxlibrary/cdn.ashx

    Use jQuery UI in jsbin
    Image:jsbinAddjQueryUI.png


    Optional backup to load local copy
    As a backup option you can still host jQuery on your web server and only reference it if your visitor somehow fails to load the CDN hosted jQuery library.

    Add this method below your CDN jQuery reference. This code will check to see if jQuery is loaded and if it isn't the script will load the jQuery library from your web server. — source: Using a Content Delivery Network to Host jQuery

    jQuery with jsbin

    It's easy to add a jQuery library to a jsbin.

    Image:jsbinJquery01.jpg


    Image:jsbinJquery02.jpg

    Writing jQuery

    Starting

    More
    See it live (right click - open in new window) In the <head> section

    <script>
     
    // full name
    jQuery(document).ready(function(){
    // your jQuery here	
    });
     
    // more common
    $(document).ready(function(){
    // your jQuery here	
    });
     
    // shortcut- remove "document).ready("
    $(function(){
    // your jQuery here	
    });
    </script>

    permanent link

    Some simple things to try

    <script>
    // jQuery Scripts here
    // write something to the body
    $(document).ready(function(){
    // your jQuery here
    //  $("body").html("Hello from jQuery"); // careful, this overwrites everything in the body
    //  $("#start").html("Hello from jQuery");
    });
     
    // insert a new element and write to that
    $(document).ready(function(){
    // your jQuery here
    // Append a string of HTML
    //  $('#start').append( "<p>Here's a string of HTML in the start</p>" );
     
    // Append a new div (first child)
    //  $("body").append("<div id=\"middle\"></div>");
     
    // Append text to the new div (first child)
    //  $('#middle').append( "<p>Here's a string of HTML in the middle</p>" );
    });
    </script>

    Really annoying things to try.

    Add a link to the HTML section

    <a href="jquery.com">jquery.com</a>

    and then.

    $("a").click(function (event) {
        alert("Hello world!");
        event.preventDefault();
    });

    or

    $("a").hover(function (event) {
    	alert("Hello from Hover");
    	event.preventDefault();
    });
    Capturing Events

    With jQuery you can capture and respond to events. Here is an introduction to the concept.

    Capturing Events Demo

    Selectors

    When you use a jQuery selector it creates an array of jQuery objects. These jQuery objects form a wrapper around the DOM (Document Object Model) elements you specified. The jQuery objects give you features that allow you to operate on the DOM elements in a high level way.

    SELECTOR What it does Example
    tagname Finds all elements that are named tagname <table>
    #identifier Finds the elements with ID identifier < ... id = "fred" ... >
    .className Finds all elements that have class attribute with the value: className < ... class = "special"... >
    tagname.className Finds all elements that are named tagname that have a class with the value className <table class="special"... >
    tagname#id.className Finds the elements named tagname that has ID of identifier with the class attribute className <table id="fred" class = "special"... >
    * Finds all elements on the page  

    Hierarchy and Combination Selectors

    SELECTOR What it does
    selector, selector, ... Finds all the specified selectors
    .className1.className2 Finds all elements that have class attribute with the value: className1 and className2 applied
    parent>child Finds all child elements that are direct children of elements of type parent
    ancestor descendent Finds all decendent elements that are contained within the element of type ancestor.
    prev + next Finds all next elements that are next to a previous element
    prev ~ siblings Finds all sibling elements that come after previous and match the siblings selector

    Using #ids and .classes (and a few more tricks)

    More
    See it live

    $(document).ready(function(){
    // 1 specific section highlight
    //  $("#section1").addClass("highlight");
     
    // 2 article with id 1a highlight2
    //  $("#1a").addClass("highlight2");
     
    // 3 ul with id list1a highlight
    //  $("#list1a").addClass("highlight");
     
    // 4 first list item highlight
    //  $("li").first().addClass("highlight");
     
    // 5 odd list items (includes all li's)  highlight (index is 0)
    //  $("li:odd").addClass("highlight");
     
    // 5a  odd list item of each list  highlight (index is 0)
    //  $("li:odd" , "ul").addClass("highlight");
     
    // 6 odd list item of list with context "article" highlight (index is 0)
    //  $("li:odd","article").addClass("highlight");
     
    // 6a odd list item of list with context "section" highlight (index is 0)
    //  $("li:odd","section").addClass("highlight");
     
    // 7 odd table rows highlight (index is 0. Scroll down to see
    //  $("tr:odd").addClass("highlight");
      // .scrollTop to a number... 
      // in this case, the number of pixels that #tblRandom is from the top
    //  $(window).scrollTop($('#tblRandom1').offset().top);
     
    // 8 odd table rows with context <table> highlight (index is 0)
    //  $("tr:odd","table").addClass("highlight");
    //  $(window).scrollTop($('#tblRandom1').offset().top);
     
    // 9 even table rows on specific table highlight (index is 0)
    //   $("tr:odd","#tblRandom1").addClass("highlight");
    //   $(window).scrollTop($('#tblRandom1').offset().top);
     
    // 10 anything with id containing a letter eg. "b" and then try "c"
    //  $("[id*='c']").addClass("highlight2");
     
    // 11 article with id containing a letter eg. "c" 
    //  $("article[id*='c']").addClass("highlight2");
     
    // 12 any id containing a letter eg. "c" 
    //  set the context to section so we look INSIDE sections  
    //  $("[id*='c']","section").addClass("highlight2");
     
    // 13 anything  that contains "jQuery" highlight2 
    //  $("*:contains('jQuery')").addClass("highlight2");
     
    // 14 list item  that contains "Lorem" hightlight2
    //  $("li:contains('Lorem')").addClass("highlight2");
     
    // 15 table row  that contains "Excel" highlight2 
    //  $("tr:contains('Excel')").addClass("highlight2");
      // scroll to first instance
    //  $(window).scrollTop($("tr:contains('Excel')").offset().top);
     
    // 16 table data  that contains "root" underline it
    //  $("td:contains('root')").css("text-decoration","underline");
      // scroll to first instance
    //  $(window).scrollTop($("td:contains('root')").offset().top);
     
    });

    permanent link

    Traversing the Document Object Model

    Selectors: Without using #ids or .classes

    More
    See it live

    $(document).ready(function(){
    // all sections  highlight
    // $("section").addClass("highlight");
     
    // first article highlight
    //  $("article :first" ).addClass("highlight");
     
    // first article in each section  highlight
    //   $("article :first", "section").addClass("highlight");
     
    // first child in every article highlight2
    //   $("article :first-child", "section").addClass("highlight2");  
     
     
    // first h1 in each section (to fix colour of headings)  
    //  $("h1 :first","section" ).css("color","#ffffff");
    //  $("h1 :first","section" ).css("margin-left","10px");
    // better still - use chaining instead of two lines above  
    //  $("h1 :first","section" ).css("color","#ffffff").css("margin-left","10px");
     
     
    // first paragraph after a heading fix spacing
    //   $("h1").next().css("margin-top","0px")
     
    // table odd rows highlight
    //   $("tr:odd","section").addClass("highlight");  
     
     
    // hide the paragraphs by clicking on h1s  
    /*   
       $("h1").click(function ( event ) {
       event.preventDefault();
       $(this).next().toggle(); 
       }); 
       */
    });

    permanent link

    Selectors Hierarchy and .filter()

    More
    See it live

    //jQuery Selectors Hierarchy and .filter()
    $(document).ready(function () {
    // plants that are edible in an ordered list - even items only
    $("li.edible ul li ol li", "#plants").filter(":even").addClass("highlight");
    // animals that are inedible in an unordered list - first item only
    $("li.inedible ul li li", "#animals").filter(":first").addClass("highlight2");
    });

    permanent link

    Reading

    jsbin Settings and Tips

    jsbin settings video

    In the video linked above Remy tells us how to set options in jsbin. Here are some notes I took while watching the video.

    You can get more details about available options at CodeMirror.net ⇐ takes you to the user manual.

    Examples that Remy did: In your browser of choice, open the console.

    • IE: F12, click Console tab
    • Firefox: ctrl-shift-k
    • Google Chrome: F12
    • Opera: Open Opera Dragonfly with ctrl-shift-I then click the Console button

    Type in any of these commands, press enter, then ctrl-r to refresh the browser.

    Your changes are recorded in local storage and will persist across browser sessions.

    • jsbin.settings.editor.lineNumbers=true; (or double-click on headings)
    • jsbin.settings.editor.matchBrackets=true;
    • jsbin.settings.editor.theme="solarized-light";
    • delete jsbin.settings.editor.theme="solarized-light";
    • jsbin.settings.editor.theme="solarized-dark";
    • jsbin.settings.debug=true; or false

    jsbin testing for Ajax requests

    hint - use tab for code completion.
    follow along live

    JS Bin Template


    Session Two


    At the end of this session (and after completion of the session two assignment) you should be able to:

    • Recognize, create and use jQuery methods in the Attributes Category. These methods get and set DOM attributes or elements.
    • Build pages that use jQuery Attributes methods that we did not discuss in the lab

    Journal

    • What do you know about HTML Attributes?

    To prepare for this session we will

    Show and Tell Lab
    • How did we do with PeerWise
    • Team up and Show your pages to a partner.
    • Talk about
      • What you did: Issues and challenges you encountered while doing the work.
      • What you learned.
      • How you will apply what you learned.
    Outcomes

    At the end of this session you should be able to

    • Identify the concepts that you used in the page you are sharing with your partner
    • Discuss the challenges you had to overcome to make it work
    • Describe what you learned
    • Discuss how you will apply what you learned in another context
    • Help your partner by suggesting solutions or improvements where appropriate
    We will discuss
    These methods get and set DOM attributes of elements.


    source: Category: Attributes

    We will explore the jQuery Attributes category. These methods get and set DOM attributes of elements.

    • .html() .text()
    • .attr() .removeAttr()
    • .addClass() .removeClass() .hasClass() .toggleClass()
    • .prop() .removeProp()
    • .val()

    Write jQuery

    This week please review these objectives and write as many examples as you feel are necessary for you to meet the following.

    Outcomes for this Session

    At the end of this session (and after completion of the session two assignment) you should be able to:

    If you have questions about jQuery or this assignment - please post them in the course blog (Session Two Notes).

    If you spot a question from someone else and you can answer it - please do.

    • Login in to PeerWise :IP250F15A
    • Create at least one new question.
    • Answer at least five questions.
      • Correct your answers if necessary.
        • Confirm your answers as you go along.
      • Help where you can to improve explanations.
      • Add comments in the questions.
      • Rate the questions.

    Detailed Instructions

    Reflect in the course blog


    Please click the picture above and answer the following questions in the course blog.

    Highlights / Metacognition
    • What did you think was the most valuable thing that happened for you tonight?
    • What did you learn from that?
    • What will you do with that knowledge?
    Questions?
    • Now that we've had our session together, what do you want to know?
    • What could we have done better?

    Course Blog Tutorial (video)


    Show and Tell

    • How did we do with PeerWise
    • Team up and Show your pages to a partner.
    • Talk about
      • issues
      • learning
      • how you will apply

    Why is Context second

    Brought forward from last week:

    Why is Context second

    Well first you specify the Selector. It is always first.

    Context is optional so it follows the Selector.

    More thoughts: Selector Context By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. For example, to do a search within an event handler, the search can be restricted like so:

    $( "div.foo" ).click(function() { $( "span", this ).addClass( "bar" ); });

    When the search for the span selector is restricted to the context of this, only spans within the clicked element will get the additional class.

    Source: jQuery Selector Context

    I added the emphasis.

    This looks backwards at first but if you consider query languages like SQL they operate much the same way.

    e.g.

    SELECT lastname, firstname, telephone, city FROM people;

    The context (e.g. the table people) is the last thing specified in the statement.

    or

    SELECT lastname, firstname, telephone, city FROM people WHERE city="Vancouver";

    Where the qualifying (scope limiting) part is last.


    Overview Session Two

    The main focus of these examples is jQuery Attributes

    These methods get and set DOM (Document Object Model) attributes or elements.

    jQuery Category:Attributes

    We will be working with a block of html that looks like this. It doesn't do anything interesting yet:

    Text HTML
    Fruit
    • Apples
    • Peaches
    • Pears
    • Plums
    • Coconut
    Vegetables
    • Asparagus
    • Beans
    • Broccoli
    • Carrots
    • Beats


    .attr(), .append(), .prepend(), some .html() and .each()

    In this example we will move through list items adding an attribute id and then write out a list of all the ids and the list items to which they refer.

    More

    See it live: workshop version
    See it live: completed version


    References:

    html() and text() part one: buttons

    Display the contents of an element as text

    More
    See it live


    References:

    html() and text part two: radio buttons A .prop()

    Radio Buttons Part A

    More
    See it live (right click - open in new window) Here is the HTML for the form with the radio buttons.

    And the scripting in the head section.

    References:

    The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

    .prop()

    Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

    Attributes vs. Properties

    The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

    For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method.

    .prop()


    html() and text part three: radio buttons B

    Radio Buttons Part B (using switch instead of if)

    More

    Here is the HTML for the form with the radio buttons.

    And the scripting in the head section.


    See it live

    html() and text part four: toggle button

    Single button toggle. Let's use one button to toggle back and forth between states. This is not jQuery.toggle(). We'll do that later.

    More
    You can see this example on CodePen

    $(document).ready(function(){
     var htmlOriginal=$("#htmlDemo").html();
     var isHTML=true;
     
      $("#toggleButton").click(function(){
        if (isHTML) {
            // display the original contents as text
          $("#htmlDemo").text(htmlOriginal);
         lastWord("Rendered");
        }else{
           // display the original contents as html
          $("#htmlDemo").html(htmlOriginal);
          lastWord("Source");
        }
        isHTML=!isHTML;
      });
     
    function lastWord(theWord){
     var buttonText=$("#toggleButton").html();
     var buttonTextArray=buttonText.split(" ");
     buttonTextArray[buttonTextArray.length-1]=theWord;
     $("#toggleButton").html(buttonTextArray.join(" ")); 
      }
    });

    See it live

    Interesting Functions

    More


    Some interesting things to watch for next session

    More

    • putting a matched element into a variable

    • jQuery options are like an array

    birds in flight example
    another example of the syntax

    jQuery.each()

    Description: A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.
    jquery.com/jQuery.each/
    See more: jQuery.each() example See it live: jQuery.each() example




    Session Three


    At the end of this session (and after completion of the session three assignment) you should be able to:

    • Recognize, create and use callbacks inside the context of jQuery methods
    • Use JavaScript Object literals as arguments passing multiple parameters to jQuery methods
    • Use Method Chaining to perform multiple methods on the same set of elements
    • Create scenarios to use jQuery effects to build dynamic user experiences
    • Compare similar jQuery Effects and decide on the most effective one to use in scenario that you will design
    • Build pages that use jQuery Effects that we did not discuss in the lab

    Journal

    • What do you know about JavaScript Callbacks?
    • What do you know about JavaScript Object Literal Syntax?

    To prepare for this session we will visit these aspects of JavaScript (not jQuery specific)

    • Callbacks (because we see this all over jQuery)
    • Object Literal Syntax (because we can pass objects as parameters to jQuery methods
    • and a really quick look at document.createFragment() as a way to reduce the overhead of making multiple updates to the Document Object Model
    Show and Tell Lab
    Outcomes

    At the end of this session you should be able to

    • Identify the concepts that you used in the page you are sharing with your partner
    • Discuss the challenges you had to overcome to make it work
    • Describe what you learned
    • Discuss how you will apply what you learned in another context
    • Help your partner by suggesting solutions or improvements where appropriate

    We will explore jQuery.each() a general utility function.

    And then move on to a quick look at the jQuery (DOM) Manipulation category

    All of the methods in this section manipulate the DOM in some manner. A few of them simply change one of the attributes of an element (also listed in the Attributes category), while others set an element’s style properties (also listed in the CSS category). Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as “setters,” as they change the values of properties.


    A few of these methods—such as .attr(), .html(), and .val()—also act as “getters,” retrieving information from DOM elements for later use.

    • .html() and .text()
    • .before() .prepend() .append() .after()
    • a closer examination of .append()
    • .wrap() and .unwrap()
    • .css()

    and the jQuery Effects

    • .hide() / .show()
    • .slidedown() / .slideup()
    • .toggle()
    • .draggable() / .droppable()
    • .hover()
    • .animate

    Write jQuery

    This week please review these objectives and write as many examples as you feel are necessary for you to meet the following.

    Outcomes for this Session

    At the end of this session (and completion of the session three assignment) you should be able to:

    • Recognize, create and use callbacks inside the context of jQuery methods
    • Use JavaScript Object literals as arguments passing multiple parameters to jQuery methods
    • Use " Method Chaining to perform multiple methods on the same set of elements
    • Create scenarios to use jQuery effects to build dynamic user experiences
    • Compare similar jQuery Effects and decide on the most effective one to use in scenario that you will design
    • Build pages that use jQuery Effects that we did not discuss in the lab

    If you have questions about jQuery or this assignment - please post them in the course blog (Session Three Notes).

    If you spot a question from someone else and you can answer it - please do.

    • Login in to PeerWise :IP250F15A
    • Create at least one new question.
    • Answer at least five questions.
      • Correct your answers if necessary.
        • Confirm your answers as you go along.
      • Help where you can to improve explanations.
      • Add comments in the questions.
      • Rate the questions.

    Detailed Instructions

    Reflect in the course blog


    Please click the picture above and answer the following questions in the course blog.

    Highlights / Metacognition
    • What did you think was the most valuable thing that happened for you tonight?
    • What did you learn from that?
    • What will you do with that knowledge?
    Questions?
    • Now that we've had our session together, what do you want to know?
    • What could we have done better?

    Course Blog Tutorial (video)



    Some interesting things to remember from last session

    More

    • putting a matched element into a variable

    • jQuery options can be an array or an object

    birds in flight example
    another example of the syntax birds in flight example

    jQuery.each()

    Description: A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.
    jquery.com/jQuery.each/
    See it live: jQuery.each() example

    JavaScript Callbacks

    Open the live version of this page. The outputs are in the Console.

    Several interesting things are happening here:

    • Announce that we're starting the sequence
    • Call a function: doSomething () that has a callback function. The doSomething() function will take 1500 milliseconds to run before invoking the callback.
    • Announce that we're waiting for doSomething() to happen
    • Carry on with several other operations¹ even though doSomething() is still running (has not finished but the processing carries on asynchronously.
    • Eventually doSomething() completes and its callback let's us now that it's done.

    ¹ Other operations demonstrating that we can pass a function as a parameter to another function.

    • function doMath( number, number, function)
    • We have two more functions:
      • subtract ( number, number )
      • multiply ( number, number )
    • We call doMath() three times
      1. doMath ( number, number , subtract)
      2. doMath ( number, number , multiply)
      3. doMath ( number, number , function(){})
    See it live: JavaScript Callbacks

    References:



    Outcomes

    At the end of this section you should be able to:

    • Identify callbacks inside JavaScript programming code
    • Discuss the concept that JavaScript functions are First Class Objects, and the forms in which we see them in JavaScript programs
    • Write a function with a callback within a short program that demonstrates that the function and the callback are working.
      • Two versions of the function are required.
        1. the callback is named function
        2. the callback is an anonymous function


    JavaScript Object Literal Syntax

    This is a quick review of JavaScript Object Literal Syntax.

    An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}). You should not use an object literal at the beginning of a statement. This will lead to an error or not behave as you expect, because the { will be interpreted as the beginning of a block.
    Object_literals MDN

    View the JavaScript
    See it live: JavaScript Object Literal Syntax Check the console.

    Another version that uses an anonymous function for age.

    View the JavaScript
    See it live: JavaScript Object Literal Syntax Check the console.


    Outcomes

    At the end of this section you should be able to:

    • Identify a JavaScript Object literal
    • Write a JavaScript Object literal that includes a short anonymous function


    • Recognize be able to use JavaScript Objects as options (parameters) in jQuery

    birds in flight example

    Another example of the syntax birds in flight example

    document.CreateFragment

    Save a little bit of writing to the DOM with document.createFragment.

    show source code for example

    See it live: document.createFragment



    jQuery Manipulation Category

    The main focus of these examples is jQuery Category:Manipulation

    All of the methods in this section manipulate the DOM in some manner. A few of them simply change one of the attributes of an element (also listed in the Attributes category), while others set an element’s style properties (also listed in the CSS category). Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as “setters,” as they change the values of properties. A few of these methods—such as .attr(), .html(), and .val()—also act as “getters,” retrieving information from DOM elements for later use. jQuery Category:Manipulation


    Outcomes for jQuery Manipulation

    This section expands on some of the methods in the Manipulation category that we explored last week. ( .html() .text() .append() .css() ) and explores others.

    At the end of this section you should be able to:

    • Navigate through the jQuery documentation for the Manipulation category
    • Write jQuery to manipulate Document Object Model (DOM) Elements using .html() .text() .append() .css AND
      • .before() .prepend() .after()
      • Write a short example that uses .wrap() and .unwrap to surround selected elements with new elements, and then undo that.

    .html() and .text()

    .html()

    Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

    .text()

    Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

    We have already worked with these in a previous example


    before() .prepend() .append() .after()

    See it live on jsbin

    .before()

    Insert content, specified by the parameter, before each element in the set of matched elements.

    .prepend()

    Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

    .append()

    Insert content, specified by the parameter, to the end of each element in the set of matched elements.

    .after()

    Insert content, specified by the parameter, after each element in the set of matched elements.


    More

    See it live: before prepend append after

    $(document).ready(function(){
      $("#compellingContent")
      .before("<span> .before(&quot;before the matched element(s)&quot;) </span>")
      .prepend("<span> .prepend(&quot;before the content in the matched element(s)&quot;) </span>")
      .append("<span>.append(&quot;after the content in the matched element(s)&quot;) </span>")
      .after("<span>.after(&quot;after the  matched element(s)&quot;) </span>");
    });

    Other views of this live example in:

    References:

    .append()

    Insert content, specified by the parameter, to the end of each element in the set of matched elements.

    In this example we will append rows to a table.

    ItemFruitDescription

    Starting with an empty table, use jQuery to populate the table from a couple of arrays using .append().

    More
    See it live: appending rows to a table html JavaScript

    References:

    .wrap() & .unwrap

    A good cat story has all the elements of any good story: plot, characters, setting, intrigue, excitement, drama! This is the kind of cat story you will love to tell and to which your audience will love to listen, whether that audience fills an auditorium or is one little person on your knee.

    Cats can be described in as many ways as there are cats. They are independent and sometimes quirky. Cats can be lazy or a bundle of energy. One thing that is certain: Cats are soft to the touch and many people love them to distraction. As characters in stories, cats are often humorous, maybe because they are like someone we know.

    .wrap()
    Wrap an HTML structure around each element in the set of matched elements.
    .unwrap()
    Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
    DOM Insertion, Around

    Let's use the new HTML5 <mark> element

    The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. ... the mark element

    Someone has used span tags with classes to do what <mark> can do. So we want to get use <mark> instead.


    More

    Live example

    See it live: .wrap() and .unwrap()

    jQuery

    CSS

    HTML


    References:

    .css()

    Same text - this time using .css()

    A good cat story has all the elements of any good story: plot, characters, setting, intrigue, excitement, drama! This is the kind of cat story you will love to tell and to which your audience will love to listen, whether that audience fills an auditorium or is one little person on your knee.

    Cats can be described in as many ways as there are cats. They are independent and sometimes quirky. Cats can be lazy or a bundle of energy. One thing that is certain: Cats are soft to the touch and many people love them to distraction. As characters in stories, cats are often humorous, maybe because they are like someone we know.

    Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element. .css()
    <span> css background-color:

    More
    See it live (right click - open in new window)

    jQuery

    CSS

    HTML


    References:




    Dynamic Interaction

    The following methods are all about providing visual interaction with the viewer of your web pages.

    Outcomes for jQuery Dynamic Interaction

    At the end of this section you should be able to:

    • Navigate through the jQuery documentation for the Dynamic Interaction category
    • Write several examples jQuery to create visible responses to user activity. That is: Use the jQuery to respond to events to manipulate visibility and presentation of elements.

    .hide() / .show()

    Hide the matched elements.
    This method does not accept any arguments.

    Hide the matched elements. .hide()

    More
    See it live (right click - open in new window)
    See it live using only one button (right click - open in new window)

    jQuery

    CSS

    HTML

    References:

    .slideDown()

    Display the matched elements with a sliding motion.

    Display the matched elements with a sliding motion. .slideDown()

    More
    See it live (right click - open in new window)
    Can you make the live example slideUp?

    jQuery

    CSS

    HTML

    References:

    .slideUp()

    Hide the matched elements with a sliding motion.

    Hide the matched elements with a sliding motion. .slideUp()

    More
    See it live (right click - open in new window)
    Can you make the live example slideDown?

    jQuery

    CSS

    HTML

    References:

    .toggle() animation

    There is an effect .toggle() that we will talk about here, and an event .toggle() that was deprecated in jQuery 1.8 and removed in jQuery 1.9.

    Display or hide the matched elements. .toggle()

    More
    See it live (right click - open in new window)

    jQuery

    CSS

    HTML

    References:

    .draggable()

    Drag me

    The jQuery UI Draggable plugin makes selected elements draggable by mouse. Draggable elements gets a class of ui-draggable. During drag the element also gets a class of ui-draggable-dragging. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables. jQueryUI .draggable()

    More
    See it live (right click - open in new window)

    .dropppable()

    hungry plant

    The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept. jQueryUI .droppable()
    More
    See it live (right click - open in new window)


    References:

    .hover()

    Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.
    Calling
    $(selector).hover(handlerIn, handlerOut)
    is shorthand for:
    $(selector).mouseenter(handlerIn) .mouseleave(handlerOut); jQuery .hover()

    .hover( handlerIn(eventObject), handlerOut(eventObject) ) Returns ⇐ jQuery

    Please run your mouse along the quoted text above.

    More

    CSS

    jQuery

    HTML

    .hover() applied previous example

    More
    See it live (right click - open in new window)

    hover highlight in the quote above

    References:

    .animate()

    Perform a custom animation of a set of CSS properties. .animate()

    Now eating: nothing - click me.

    More
    See it live (right click - open in new window)

    jQuery

    HTML


    References:

    jQuery Booklet Plugin demo (review)

    IP250 jQuery Plugin Booklet Demo

    jQueryPluginBooklet.htm - as above in separate page

    http://builtbywill.com/code/booklet/ - source for the booklet plugin used above.

    Barebones implementation/demo







    Assignment

    Assignment 3

    Session Four


    At the end of this session (and completion of the session four assignment) you should be able to:

    • Use jQuery Keyboard Events.
    • Create and use your own jQuery Plugin.
    • Use jQuery Ajax methods: jQuery.get() or jQuery.load() to pull data (text or JSON) into a web page asynchronously.
    • Select and use jQuery UI to add dynamic user experiences to your web pages.
    • Review what we know about jQuery and ways in which we can use it.

    Journal

    • What do you know about user events other than click?
    • What do you know about AJAX?
    • Have you used jQuery UI?

    To prepare for this session we will visit a few more key jQuery concepts and then dig into jQuery plugins, using jQuery Ajax and then using jQuery UI.

    • jQuery Keyboard Events (.keydown(), .keyup(), .keypress() .focusout() .focus() )
    • jQuery Plugins
    • jQuery Ajax (looking back to last week) and exploring jQuery.get() and jQuery.load().
    • jQuery UI (.tabs .accordion .sortable)

    • jQuery Key Events
    • jQuery Plugins
    • jQuery Ajax
    • JSON
    • jQuery UI

    Write jQuery

    This week please review these objectives and write as many examples as you feel are necessary for you to meet the following.

    Outcomes for this Session

    At the end of this session (and completion of the session four assignment) you should be able to:

    • Create and use your own jQuery Plugin.
    • Use jQuery Ajax methods: jQuery.get() or jQuery.load() to pull data (text or JSON) into a web page asynchronously.
    • Select and use jQuery UI to add dynamic user experiences to your web pages.
    Send me an email JimUBC@live.com with links to your work in jsbin or jsfiddle or any environment where I will be able to see all the source code for your work.
    Please note that to successfully complete this course you must have made four blog entries and created at least 4 PeerWise questions.

    • Login in to PeerWise :IP250F15A
    • Create at least one new question.
    • Answer at least five questions.
      • Correct your answers if necessary.
        • Confirm your answers as you go along.
      • Help where you can to improve explanations.
      • Add comments in the questions.
      • Rate the questions.

    Detailed Instructions

    Reflect in the course blog


    Please click the picture above and answer the following questions in the course blog.

    Highlights / Metacognition
    • What did you think was the most valuable thing that happened for you tonight?
    • What did you learn from that?
    • What will you do with that knowledge?
    Questions?
    • Now that we've had our session together, what do you want to know?
    • What could we have done better?

    Course Blog Tutorial (video)



    Keyboard Events

    .keydown(), .keyup(), .keypress() .focusout() .focus()

    Keyboard Events
    Output Text:
    keydown event.which:
    keyup      event.which:
    keypress  event.which:
    focus     
    .focusout()
    Bind an event handler to the “focusout” JavaScript event.
    .keydown()
    Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.
    .keypress()
    Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.
    .keyup()
    Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.
    Keyboard Events

    Keydown: triggers on when you press a key and it returns the scan-code from the keyboard.
    (A and a both return 65)

    Keypress: triggers after keydown, and it returns the charcode.
    (A returns 65 and a returns 97)
    But this only works reliably for character codes (not Esc, Home, End, Arrows etc. and the results are browser dependent).

    Article: Detecting Keys - [quirksmode]

    More
    See it live (right click - open in new window) (IE not displaying properly in Output window issue 570 filed.)
    jsfiddle.net alternate view.
    CodePen.io alternate view.

    jQuery

    CSS

    HTML


    References:



    jQuery Plugins

    Extending jQuery with plugins and methods is very powerful and can save you and your peers a lot of development time by abstracting your most clever functions into plugins. Authoring jQuery Plugins

    Discussion:



    Basic Plugin Authoring


    Using the tutorial from learn.jquery.com

    1. first version Basic Plugin
    2. second version Chaining
    3. third version Protecting the $ Alias and Adding Scope
    4. fourth version Using the .each() Method
    5. fifth version Accepting Options e.g. { name: "value" }
    6. sixth version New plugin for showing links URLs and chaining to previous plugin for coloring links

    .title( title , alt ) Version 1 without {options}

    jsbin .imgInfo(title,alt)

    jsfiddle .imgInfo(title,alt)

    More

    Use the HTML alt attribute to provide alternative text for an element, to be shown when the element can't be displayed.
    Use the title attribute to supply additional text to describe the element in more detail when necessary.

    Felix the Cat is a funny animal cartoon character created in the silent film era. The anthropomorphic black cat with his black body, white eyes, and giant grin.

    Snowball the 87 pound cat from Chalk River Ontario.


    jQuery

    CSS

    HTML




    Version 2 .imgLink( {options} )

    More

    jQuery plugin .imgLink()

    We create and use a jQuery plugin called .imgLink(). It takes three options; title, alt, href. The first two are standard attributes of an <img> and the third href is a link target.
    .imgLink({options})
    Use the alt option to provide alternative text for an element, to be shown when the element can't be displayed.
    Use the title option to supply additional text to describe the element in more detail when necessary.
    Use the href option to specify a link destination
    Notes:
    1. Felix the Cat is a funny animal cartoon character created in the silent film era. The anthropomorphic black cat with his black body, white eyes, and giant grin.
    2. Snowball the 87 pound cat from Chalk River Ontario.



    jsbin jsbin version

    jsfiddle jsFiddle version

    Live version — plain html

    jQuery

    CSS

    HTML

    References and Further Reading


    jQuery Ajax

    JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

    Introducing JSON

    JSON is built on two structures:

    • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
    • An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

    These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangeable with programming languages also be based on these structures.

    In JSON, they take on these forms:

    An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).



    json testing with jsbin

    sample json file

    sample json file generated with parameters

    http://jsbin.com/uvucop/1?name=Dobbie&gender=female

    working version

    Using jsbin to debug json requests (video on youtube)


    jQuery.get()

    If there is any jQuery specific content it should appear here


    jQuery.get()
    Load data from the server using a HTTP GET request.
    .get()
    This is a Shorthand method of Ajax.

    Additional Notes:

    • Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
    • If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the .error() method of the jqXHR object returned by jQuery.get() is also available for error handling.
    • Script and JSONP requests are not subject to the same origin policy restrictions.
    jQuery.get


    jsbin version

    More
    Another example with a different stylesheet

    jQuery

    CSS

    HTML



    jQuery.load()

    Click the Button for an inspirational message.


    jQuery.load()
    Load data from the server and place the returned HTML into the matched element.
    .load()
    This is a Shorthand method of Ajax.

    Additional Notes:

    • Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
    • If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the .error() method of the jqXHR object returned by jQuery.get() is also available for error handling.
    • Script and JSONP requests are not subject to the same origin policy restrictions.
    jQuery.load()


    jsbin version (this will not work in jsbin because of the same origin policy

    jsFiddle version (this will not work in jsfiddle because of the same origin policy


    live version html

    This is based on Doctor Feelgood

    See it running Doctor Feelgood with source code

    More
    These will not work because of the same origin policy
    Another example with a different stylesheet

    jQuery

    CSS

    HTML


    jQueryUI

    .tabs()

    jQueryUI Tabs
    A single content area with multiple panels, each associated with a header in a list. jQuery Tabs

    Note that in addition to jQuery, you need jQueryUI and the jquery-ui.css

    heightStyle controls the height of the tabs widget and each panel. Possible values:
    • "auto": All panels will be set to the height of the tallest panel.
    • "fill": Expand to the available height based on the tabs' parent height.
    • "content": Each panel will be only as tall as its content.
    Tabs Options


    jsbin jsbin version

    jsfiddle jsFiddle backup

    Another example with a different stylesheet

    jQuery

    CSS

    HTML




    .Accordion()

    This example is based on code found here http://jqueryui.com/accordion/

    Section 1

    Section 1 Content
    This is the jQuery Accordion Widget.
    See Section 3 to find out why this is so tall.
    Or we could have set the autoheight option to false $("#accordion").accordion({ autoHeight: false});

    Documentation: see the autoheight parameter
    Click the header "Section 1" to collapse the accordion and see the other sections.

    Section 2

    Section 2 Content
    Use this when you have multiple sections and want only one visible at a time.

    In this example you can close all the sections because the collapsible option is set to true

    $("#accordion").accordion({ collapsible: true });

    Try it. Click the bar above that says "Section 2"

    Section 3

    Section 3 Content
    Use caution - and notice that if you have really long content it may be difficult to see the accordion section links. And the longest section sets the height for all of the sections.

    http://huwshimi.com/comic/

    Section 4

    Section 4 Content
    Thanks for reading all four sections.


    jsbin version

    jsFiddle version

    Another example with a different stylesheet

    Two Accordions on the same page

    jQuery

    CSS

    HTML





    .sortable( {options} )

    This example is based on code found here jqueryui.com/sortable and extended to maintain state across browser sessions using HTML5 localStorage.

    Goal: Create a sortable list and save the list so that it is available later.

    Your shopping list is being saved to localStorage so that it will be here the next time you visit this page.



    jsbin jsbin version

    jsfiddle jsFiddle backup

    Live version — plain html

    two lists jsbin version

    Live version — plain html

    jQuery

    CSS

    HTML



    Assignment Four

    Due Midnight May 7, 2013

    Write jQuery

    This week please review these objectives and write as many examples as you feel are necessary for you to meet the following.

    Outcomes for this Session

    At the end of this session (and completion of the session four assignment) you should be able to:

    • Create and use your own jQuery Plugin.
    • Use jQuery Ajax methods: jQuery.get() or jQuery.load() to pull data (text or JSON) into a web page asynchronously.
    • Select and use jQuery UI to add dynamic user experiences to your web pages.
    Send me an email JimUBC@live.com with links to your work in jsbin or jsfiddle or any environment where I will be able to see all the source code for your work.
    Please note that to successfully complete this course you must have made four blog entries and created at least 4 PeerWise questions.

    Latest blog entries for this course





    Optional Reading


    Here's some light reading - maybe 20-30 minutes.

    Native JavaScript Equivalents of jQuery Methods - Craig Buckler


    Assignments

    For each session see the Tabs

    Image:SessionTabs.png

    • Apply
    • Recall
    • Reflect
    • Extend

    Related Downloads

    Online Resources

    Reading

    jQuery Succinctly

    Tools

    Sample file to validate:

    http://dotnet.tech.ubc.ca/onlinework/html5/zStudent_Template.html

    1. HTML5 Validator (whatwg.org) Note - two validators available there.
    2. HTML5 Validator (validator.nu)
    3. HTML5 Validator (w3.org)
    4. HTML5 Outliner





    [[Category:IP250F15A]]




    Views
    Personal tools
    Navigation
    Toolbox