From 2a1f1741cec0618d7e099c14b1dc7793fc4afc27 Mon Sep 17 00:00:00 2001 From: Josh Hill Date: Thu, 23 Oct 2014 12:35:29 +0100 Subject: [PATCH 1/4] Match example to gist --- js/lesson3/tutorial.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/lesson3/tutorial.md b/js/lesson3/tutorial.md index 26dbe504..8297c5ab 100644 --- a/js/lesson3/tutorial.md +++ b/js/lesson3/tutorial.md @@ -24,10 +24,10 @@ jQuery is a JavaScript library that supplies you with functionality independent Selectors are simplified in jQuery. You can access elements by element type, id or class, just like in `CSS`. -For example, to retrieve all paragraph elements you can use this selector `$("p")` or to retrieve all elements with a specific id `$("#message")` instead of using `getElementByTag("p")` or `getElementById("message")`. +For example, to retrieve all paragraph elements you can use this selector `$("div")`, or to retrieve all elements with a specific id `$("#container")` instead of vanilla JavaScript: `getElementByTag("div")`, or `getElementById("container")`. ```javascript -$("p") // all paragraph elemenets +$("div") // all div elemenets $("#container") // an element with the ID container $(".total") // elements with the class total $("ol#items") // ordered list elements with the ID items From 0a4a455ea85a6a3ebc7c852208c7a11cbac852ec Mon Sep 17 00:00:00 2001 From: Josh Hill Date: Thu, 23 Oct 2014 12:22:31 +0100 Subject: [PATCH 2/4] Rework event listener intro --- js/lesson3/tutorial.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/js/lesson3/tutorial.md b/js/lesson3/tutorial.md index 8297c5ab..d2378026 100644 --- a/js/lesson3/tutorial.md +++ b/js/lesson3/tutorial.md @@ -108,24 +108,26 @@ We've learned in the previous lesson how to bind events on **click** by setting Show an alert box ``` -With jQuery we can achieve the same thing with an event listener. To listen for -events anywhere on the page we attach the event listener to the document -element. +With jQuery we can achieve the same thing with an event listener. ```js $(document).on('click','.done', function() { - alert("Click event"); + alert("Click event"); }); ``` -There are two differences between these examples: +Although these two examples do the same thing there are some differences. - - This event listener will listen for `click` on all the elements with class - `done`, i.e. one listener can listen to many elements. - - jQuery's `on()` method is dynamic, so if we add new items to the page with - class `done` the listener will listen to them as well. +##Event listeners -**Handling events** + - Event listeners are usually attached to the document element so they listen + for events anywhere on the page. + - The event listener uses a selector like `.done` to listen to specific + elements. A selector can match more than one element, so one listener can + listen to many elements. + - jQuery's `on()` method is dynamic, so if we add elements to the page that + match the selector, i.e. add an element with class `done`, then the listener + will automatically listen to them too. To create your own event listener choose an `event` to listen for on the elements matching a `selector`. Then put the code you want to run each time the From 560bb6927c1cb167e0ae01380662c1431926795d Mon Sep 17 00:00:00 2001 From: Josh Hill Date: Sat, 1 Nov 2014 13:51:44 +0000 Subject: [PATCH 3/4] Flesh out exercise 1 instructions --- js/lesson3/tutorial.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/js/lesson3/tutorial.md b/js/lesson3/tutorial.md index d2378026..e9c23430 100644 --- a/js/lesson3/tutorial.md +++ b/js/lesson3/tutorial.md @@ -183,23 +183,27 @@ function addToList(item) { } ``` -In the `index.html` file, we already have an `
    ` component, so we want to add each new item, as a list item. We can do that by constructing the html we need `"
  1. " + item + "
    2. "` and adding it to the list using `append()`. +In the `index.html` file there is an empty list, `
      `, and we're going to add list items to it. -We can get the ordered list using the element tag and the id `$("ol#items")` +Target the empty list using its html tag and id: `$("ol#items")`. -Try running the function you've just written from the inspector +Then construct the html for a new list item `"
    1. " + item + "
      2. "` and add it to the end of the list using jQuery's `append()` method. + +Try running the function you've just written from the browser console. ```js addToList("build a website"); ``` -Now that you can successfully add items to the list, bind the function to the button with the id `#add-to-list`. To get the text from the input field, you can use `$("#item").val()`. +Now that you can successfully add items to the list, write an event handler to listen for the `click` event on the button. Tip: the button's id is `#add-to-list`. + +Then use jQuery's `val()` method to get the text from the input field and run your `addToList()` function with the input field text as the argument from the event handler. Tip: the input field's id is `#item`. ###Bonus -After adding the item to the list +After adding the item to the list: -1. Empty the text field -2. Use `focus()` to place the cursor back to the text field +1. Empty the text field after adding the item to the list. +2. Use jQuery's `focus()` method to place the cursor back in the text field after clicking the button. ###Label items From 5c8bac6047cee78e7e1a66b87433bf2014d4dfd9 Mon Sep 17 00:00:00 2001 From: Josh Hill Date: Sun, 2 Nov 2014 06:57:42 +0000 Subject: [PATCH 4/4] Tweak match example to gist --- js/lesson3/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/lesson3/tutorial.md b/js/lesson3/tutorial.md index e9c23430..faf87686 100644 --- a/js/lesson3/tutorial.md +++ b/js/lesson3/tutorial.md @@ -24,7 +24,7 @@ jQuery is a JavaScript library that supplies you with functionality independent Selectors are simplified in jQuery. You can access elements by element type, id or class, just like in `CSS`. -For example, to retrieve all paragraph elements you can use this selector `$("div")`, or to retrieve all elements with a specific id `$("#container")` instead of vanilla JavaScript: `getElementByTag("div")`, or `getElementById("container")`. +For example, to retrieve all div elements you can use this selector `$("div")`, or to retrieve all elements with a specific id use `$("#container")` instead of vanilla JavaScript: `getElementByTag("div")`, or `getElementById("container")`. ```javascript $("div") // all div elemenets