Skip to content

Commit 2c6fd1b

Browse files
author
raorao
committed
creates intermediate JavaScript curriculum
* requires an operational listalous.herokuapp.com (as an API) * asks students to download resorces from https://github.com/raorao/IntermediateTodoList
1 parent b6d6c1a commit 2c6fd1b

13 files changed

+1019
-0
lines changed

‎sites/en/javascript-to-do-list/adding_an_item.step‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
goals do
2+
goal "Allow a user to create a new item."
3+
goal "Understand how to make an AJAX request when prompted by a user's action."
4+
end
5+
6+
overview do
7+
message <<-MARKDOWN
8+
JavaScript allows us to make our web page dynamic, and responsive to
9+
the actions of our users. In this lesson, we'll allow our users to create
10+
a new item for our list, and ask the server to save it to the database.
11+
12+
To do so, we're going to use JavaScript's ability to perform a task when a
13+
user has taken an action on the page. JavaScript refers to these actions as
14+
__events__, and we can trigger code to run by using an __event listener__. We will
15+
be using jQuery to accomplish this, as it provides a powerful and readable interface
16+
to respond to user events.
17+
18+
Our code will take the following steps.
19+
20+
1. When the user loads the page, our code will start listening for when the user
21+
submits the form at the top of the page.
22+
23+
2. When a user submits the form (by pressing enter), we will prevent the page
24+
from refreshing, which is the normal behavior for a form.
25+
26+
3. We will make an AJAX request to our server, creating an item with the
27+
description our user just provided.
28+
29+
4. Once the request succeeds, we will add a new item to the page!
30+
MARKDOWN
31+
end
32+
33+
steps do
34+
step do
35+
message "Add the following code the bottom of app.js."
36+
37+
source_code :javascript, <<-JAVASCRIPT
38+
$('#add-form').on('submit', function(event) {
39+
itemDescription = event.target.itemDescription.value
40+
alert('trying to create a new item with a description ' + itemDescription)
41+
})
42+
JAVASCRIPT
43+
44+
message <<-MARKDOWN
45+
Refresh the page and try creating an item. An alert should pop up when you try! What
46+
happens after that? why?
47+
MARKDOWN
48+
end
49+
50+
step do
51+
message "Before the alert we wrote in the last step, add the following line of code."
52+
53+
source_code :javascript, <<-JAVASCRIPT
54+
event.preventDefault()
55+
JAVASCRIPT
56+
57+
message <<-MARKDOWN
58+
Try creating an item again. What changed? Why did it change?
59+
MARKDOWN
60+
end
61+
62+
step do
63+
message <<-MARKDOWN
64+
Now that we've successfully listened for a form submission and prevented the page from
65+
refreshing, we're going to ask the server to save this item into the database. Remove
66+
the alert that you wrote in step one, and replace it with the following code. replace
67+
'YOUR-LIST-NAME-HERE' with your list's name.
68+
MARKDOWN
69+
70+
source_code :javascript, <<-JAVASCRIPT
71+
var creationRequest = $.ajax({
72+
type: 'POST',
73+
url: "http://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/items",
74+
data: { description: itemDescription, completed: false }
75+
})
76+
JAVASCRIPT
77+
78+
message <<-MARKDOWN
79+
Try creating an item again. After you submit the form, look at the network tab. A
80+
new request should have occurred to http://listalous.herokuapp.com/ !
81+
MARKDOWN
82+
end
83+
84+
step do
85+
message <<-MARKDOWN
86+
Finally, we need to add the new item to the list. We'll use our addItemToPage function
87+
again to do so. After the creationRequest, add the following code:
88+
MARKDOWN
89+
90+
source_code :javascript, <<-JAVASCRIPT
91+
creationRequest.done(function(itemDataFromServer) {
92+
addItemToPage(itemDataFromServer)
93+
})
94+
JAVASCRIPT
95+
96+
message <<-MARKDOWN
97+
Try creating an item one more time. Once you hit enter, a new item should appear
98+
on the page! If not, flag an instructor down to help you debug the problem.
99+
MARKDOWN
100+
end
101+
end
102+
103+
explanation do
104+
105+
message "Here's what the bottom of app.js should now look like:"
106+
107+
source_code :javascript, <<-JAVASCRIPT
108+
$('#add-form').on('submit', function(event) {
109+
event.preventDefault()
110+
itemDescription = event.target.itemDescription.value
111+
var creationRequest = $.ajax({
112+
type: 'POST',
113+
url: "https://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/items",
114+
data: { description: itemDescription, completed: false }
115+
})
116+
117+
creationRequest.done(function(itemDataFromServer) {
118+
addItemToPage(itemDataFromServer)
119+
})
120+
})
121+
122+
JAVASCRIPT
123+
124+
message <<-MARKDOWN
125+
126+
### The AJAX process
127+
128+
You've just done something that many JavaScript developers do daily: Use JavaScript
129+
to make a request to a server, and then update the page with the data with which
130+
the server responds. This abstract process is repeated over and over again:
131+
132+
1. Add an event listener.
133+
2. Parse out the information the user is submitting.
134+
3. Prevent the default action from occuring, if necessary.
135+
4. Make a request to the server using AJAX.
136+
5. When the request succeeds, parse the data the server sends back.
137+
6. Update the page with the newly received data.
138+
139+
This process is the basis of most modern web pages!
140+
MARKDOWN
141+
end
142+
143+
next_step "marking_an_item_as_complete"

‎sites/en/javascript-to-do-list/creating_a_list.step‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
goals do
2+
goal "Understand how the internet is made up of clients and servers."
3+
goal "Write some basic requests using JavaScript, jQuery and your browser's console."
4+
goal "Create a list and your first item."
5+
end
6+
7+
overview do
8+
9+
message <<-MARKDOWN
10+
11+
So far, we've learned about JavaScript, HTML, and CSS. These are the languages
12+
your browser understands, and it uses them to give structure, style, and interactivity
13+
to your website.
14+
15+
The problem, though, is that browsers don't remember anything. Every time you refresh
16+
a page, your browser reruns all of your CSS, HTML, and JavaScript. A browser, by itself,
17+
doesn't remember who your users are, or any of their information.
18+
19+
But wait, we need our website to remember things! Specifically, we need our website
20+
to remember all the items on our list, and whether we've completed them. That's where
21+
a __server__ comes in. A server is a catch-all term for a web application that can be
22+
reached over the internet. They are often attached to __databases__ that store information
23+
about their users. If you make an __HTTP request__ with the correct __URL__ (like
24+
http://www.google.com) and __HTTP method__ (like GET or POST), the server will
25+
respond with helpful data.
26+
27+
Servers are written in dozens of languages, including Java, PHP, and Ruby.
28+
For this exercise, we've already built a server (using Ruby on Rails), and its
29+
available at https://listalous.herokuapp.com/. If you want to learn more about how
30+
to write a server, take a look at our Rails curriculum!
31+
32+
Browsers, like Chrome and Internet Explorer, are in the business of making requests
33+
to servers, and displaying the data they receive as a web page. Browsers are a
34+
type of __client__, which consume data. There are other types of clients, too.
35+
Your computer can be a client, using the curl command in the terminal. An iPhone
36+
is another type of client, and servers can even communicate with each other.
37+
38+
Every time you refresh a web page, your browser is making another request to
39+
the server. On modern websites, browsers often make multiple requests to a server,
40+
depending on what the user is doing. For instance, Twitter doesn't load your entire
41+
feed at once – as you scroll down the page, it's making more and more requests!
42+
43+
To accomplish that feat, websites can use JavaScript to make requests to servers,
44+
updating the page without the user having to refresh. This type of
45+
request is called an __AJAX__ request, which stands for __A__synchronous __J__avaScript
46+
__a__nd __X__ML. It's a technique that is used by most major websites, to provide
47+
a seamless experience to their users.
48+
49+
In this lesson, we'll be making AJAX requests using our browser's console.
50+
MARKDOWN
51+
end
52+
53+
steps do
54+
55+
step do
56+
message <<-MARKDOWN
57+
Copy the following code into your browser's console, replacing 'YOUR-LIST-NAME-HERE'
58+
with your name of choice. Note: it has to be unique! I'd suggest using your github username.
59+
MARKDOWN
60+
61+
source_code :javascript, <<-JAVASCRIPT
62+
$.ajax({
63+
type: 'POST',
64+
url: "https://listalous.herokuapp.com/lists",
65+
data: { name: 'YOUR-LIST-NAME-HERE' }
66+
})
67+
JAVASCRIPT
68+
69+
message <<-MARKDOWN
70+
Now click over to your browser's network tab. It should look something like this.
71+
72+
<img src='img/network_tab.png' alt="image of chrome's network tab.">
73+
74+
Find the request to listalous.herokuapp.com. Was it successful? If not, why
75+
do you think it failed? Once you've successfully created a list, move on to the next step.
76+
MARKDOWN
77+
end
78+
79+
step do
80+
message <<-MARKDOWN
81+
Now that we've created a list, let's create our list's first item. We're
82+
going to use jQuery's AJAX function again to do so. Copy the following
83+
code into your browser's console, replacing 'YOUR-LIST-NAME-HERE' with
84+
your list's name, and 'DESCRIPTION-OF-YOUR-ITEM' with your item's description.
85+
MARKDOWN
86+
87+
source_code :javascript, <<-JAVASCRIPT
88+
$.ajax({
89+
type: 'POST',
90+
url: "https://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/items",
91+
data: { description: 'DESCRIPTION-OF-YOUR-ITEM', completed: false }
92+
})
93+
JAVASCRIPT
94+
95+
message <<-MARKDOWN
96+
Check the network tab again. Was your request successful? If it was, take a look at what
97+
the server's response. You'll notice that the item has an id attribute now. This is how
98+
the server will uniquely identify your item in the future.
99+
MARKDOWN
100+
end
101+
102+
step do
103+
message <<-MARKDOWN
104+
Finally, lets fetch our list from the server. Your list application will need to do this
105+
every time someone refreshes the page, so that it can load previously created items. Copy
106+
the following code into your browser's console, replacing 'YOUR-LIST-NAME-HERE' with your
107+
list's name.
108+
MARKDOWN
109+
110+
source_code :javascript, <<-JAVASCRIPT
111+
$.ajax({
112+
type: 'GET',
113+
url: "https://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/"
114+
})
115+
JAVASCRIPT
116+
117+
message <<-MARKDOWN
118+
Check the network tab one more time. What data did the server send back? If your
119+
request was successful, it should have returned all the data associated with your list:
120+
your list's name, as well as all of your list's items. This is data will be basis
121+
of your list application!
122+
MARKDOWN
123+
end
124+
end
125+
126+
explanation do
127+
message <<-MARKDOWN
128+
129+
That was a lot of copying and pasting! What did it all mean?
130+
131+
### Adding a Server to the Equation.
132+
133+
Remember, web pages have short memories. Whenever you refresh the page, all the HTML,
134+
CSS, and JavaScript on that page has to reload and rerun. A common way for a website
135+
to remember information about you (the fact that you have logged in before, your previous
136+
purchases, etc.) is by getting a server involved. A server, attached to a database, can
137+
persist information about your web site as users come and go.
138+
139+
In this case, we have a server that can be reached over the internet at
140+
https://listalous.herokuapp.com/. It's attached to a database that
141+
stores all lists and items, that can fetched to make hundreds of independent to do lists.
142+
143+
In step 1, we used jQuery's AJAX function to ask the server to make a
144+
new list in its database. It only did so if the list's name was unique;
145+
otherwise, how could the server tell your list apart from someone else's list?
146+
147+
In step 2, we asked the server to create an item associated with your
148+
list. The server responded with information regarding this item, including an
149+
id, that we can use to identify that item later (if we want to mark it as complete,
150+
or delete it.)
151+
152+
In step 3, we asked the server to return all information associated with
153+
our list, including all of the list's items. When we start building our list
154+
application, we will use this data to load all items on our list every time we
155+
refresh the page.
156+
157+
We did all of this in the browser's console. In the next lesson, we'll integrate
158+
some of this code into our site, so it runs automatically whenever a user
159+
visits your web site.
160+
161+
MARKDOWN
162+
end
163+
164+
165+
next_step "loading_items"

‎sites/en/javascript-to-do-list/deploying_your_site.step‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
message <<-MARKDOWN
2+
### Goal
3+
4+
<!-- Lesson 14 - Putting Your Game Online -->
5+
6+
Hosting your list requires you to make the HTML, JavaScript and CSS files
7+
available over the Internet.
8+
9+
There are three hosting options, depending on how much of a challenge you are looking
10+
for:
11+
12+
* Use a static site hosting service
13+
* Use git and Github Pages
14+
* Roll your own with a hosting provider
15+
16+
### Using a Static Site Hosting Service
17+
18+
If you are brand new to hosting websites, you may want to use a static site
19+
hosting service. These allow you to upload a zip file of html, css and
20+
javascript and have a working website. An easy one is
21+
[GetForge](https://getforge.com/).
22+
23+
1. Sign up for Get Forge
24+
2. Zip your `IntermediateTodoList-master` directory
25+
3. Drag it into the get forge website
26+
27+
Now you have a fully functioning list hosted online! Share the link
28+
with your friends and family and wow them with your skills!
29+
30+
### Using Git and Github Pages
31+
32+
If you like with git and github, take a stab at setting up your site
33+
with [Github Pages](http://pages.github.com/). The easiest thing to do is:
34+
cd .
35+
1. From the terminal, `cd` into your `IntermediateTodoList-master` directory
36+
1. Turn it into a git repository by running `git init`
37+
1. Checkout a branch called `gh-pages`
38+
1. Commit all the files
39+
1. Create a remote repository on github for the game.
40+
1. Follow their instructions for adding the github remote to your existing repo
41+
1. Follow the instructions on [Github Pages](http://pages.github.com) for
42+
setting up a project site from scratch.
43+
1. Make the `gh-pages` the default branch
44+
1. Push it on up!
45+
46+
### Rolling Your Own Hosting With a Cloud Provider
47+
48+
If you secretly are an unix admin who floats in the cloud; consider
49+
using Amazon
50+
[S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) or
51+
[Rackspace Cloud
52+
Files](http://www.rackspace.com/knowledge_center/article/use-cloud-files-to-serve-static-content-for-websites)
53+
54+
Both of these services are designed to serve up static files without needing to
55+
pay for a virtual server. This makes your monthly hosting bill for even large,
56+
high traffic sites incredibly cheap.
57+
MARKDOWN
58+
59+
60+
next_step "next_steps"

0 commit comments

Comments
 (0)