-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgroup_js.html
331 lines (322 loc) · 21.4 KB
/
group_js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html ng-app="IntroductionApp">
<head>
<title>CodeFirst:Girls Introductory Course</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui/build/angular-ui.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
</head>
<body ng-controller="ContentController">
<div class="container" style="padding-top: 20px;">
<div class="row">
<div id="leftPane" class="col-xs-3">
<img class="cfg" src="cfg.png" alt="Code First Girls Logo" />
<p class="mini-bio">A short taster session into the fundamental technologies powering the world wide web.</p>
<div class="progress progress-danger">
<div class="progress-bar" role="progressbar" aria-valuenow="{{completedPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="width: {{completedPercentage()}}%;">
<span class="sr-only">{{completedPercentage()}}% Complete</span>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#intro">Tough Love Intro</a></li>
<li><a href="#problem">Problem Solving</a></li>
<li><a href="#theproblems">The Problems</a></li>
<li><a href="#html">The HTML</a></li>
<li><a href="#variables">Variables</a></li>
<li><a href="#arrays">Arrays</a></li>
<li><a href="#random">Random Tough Love</a></li>
<li><a href="#input">Displaying the Input</a></li>
<li><a href="#extensions">Optional Extras</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="intro">Tough Love with JavaScript</h1>
<p>
This is another group session, so you will need to get back into groups of two or three. This session is a little harder than the last!
</p>
<tasks>
<item title="Get into groups of 2/3 people"></item>
</tasks>
<p>
This task takes its inspiration from the amazing <a href="http://jenniferdewalt.com/">Jennifer Dewalt</a> - the lady that taught herself to code by building 180 websites in 180 days. Pretty impressive.
</p>
<p>
We're going to borrow one of her projects and build Tough Love. <a href="http://jenniferdewalt.com/tough_love.html">Have a play.</a>
</p>
<tasks>
<item title="Play with Tough Love"><a href="http://jenniferdewalt.com/tough_love.html">Find Tough Love here</a></item>
</tasks>
<p>
The idea of this project is to enable you to think like a programmer - being able to break problems down is the most important part of learning to code. Once you can successfully break a problem down into managable chunks you can start to solve it!
</p>
<h2 id="problem">Problem Solving</h2>
<p>
The art of breaking down a problem is so crucial that we will do it in our groups now. Try and do it without looking below!
</p>
<tasks>
<item title="Brainstorm what we will need to do to solve this problem"> What will we need to be able to build to create this?</item>
</tasks>
<h2 id="theproblems">The problems:</h2>
<p>
The problems that you may have come up with should include:
</p>
<ul>
<li>Creating a HTML page with a form input and button</li>
<li>Styling that HTML page</li>
<li>Being able to read the input in from a user and display it elsewhere when the button is clicked</li>
<li>Generating a Tough Love insult</li>
<li>Converting the pronouns in the message to second person</li>
</ul>
<h2 id="html">Building the HTML</h2>
<p>
By now you should be comfortable enough with HTML that you should be able to put together a simple site with headers and buttons, but we haven't seen the input tag yet.
</p>
<pre>
<input type="text">
</pre>
<p>
The above extract of HTML creates an input form that accepts text. With this new knowledge you should be able to create a simple HTML page with all the elements that we need.
</p>
<tasks>
<item title="Create a new folder for Tough Love"></item>
<item title="Create a new index.html file in this folder"></item>
<item title="Add the !DOCTYPE, html, head and body tags"></item>
<item title="In the body, add two headings an input and a button tag">The headings are for the input message to be displayed and the advice message</item>
<item title="Add jQuery to the site"> Remember to get the script tag from <a href="http://www.jquery.com/download">here</a> and place it in the <code><head></code></item>
<item title="Create a script tag above the </body>"></item>
<item title="Create a function that will eventually handle the click on the button"> Inside the function use an <code>alert('Hello World')</code> so you know it's working</item>
<item title="Register the above function as a click handler on the button tag">Remember <code>$("button").click()</code>?</item>
</tasks>
<h2 id="variables">JavaScript Variables</h2>
<p>
We'll need to know a little bit more about JavaScript and programming in general before we can crack on with the rest of Tough Love. In particular, we'll need to know what variables and arrays are.
</p>
<p>
Much like algebra, variables are containers for storing information.
</p>
<pre>
var x = 10;
var y = 20;
var x = x + y;
var sum = 10020;
var company = "Code First: Girls";
</pre>
<p>
var is a keyword in JavaScript that means I want to <em>declare</em>a variable.
</p>
<tasks>
<item title="Open Chrome's Developer Tools"></item>
<item title="Select the Console tab"></item>
<item title="Like the above, create some variables and assign them to names"> Once you've assigned something to a variable, typing the variable name will print out the contents of the variable</item>
<item title="Do some maths with variables">With the above variables declared, what does x * y equal?</item>
<item title="You can store more than just numbers"> Try assigning your name to a variable, you'll need to wrap it in quoteation marks though! This is called a string. </item>
</tasks>
<p>
</p>
<h2 id="arrays">JavaScript Arrays</h2>
<p>
JavaScript arrays are similar to variables, but they allow you to store multiple values in a single variable. You can consider arrays to be lists, in fact in some programming languages they are called exactly that.
</p>
<p>
Each of these values is an element of our array and is associated with a number, called an index.
</p>
<p>
These <em>lists</em> can be particularily useful when we need to represent a list of data that we may need to pick a random element from, or do some operation on each element.
</p>
<p>
To create an array we use square brackets, and comma seperated lists. For example:
</p>
<pre>
var myArray = ['First element', 'Second element', Third element];
</pre>
<p>
This creates an array called myArray with three string elements in.
</p>
<p>
Before arrays can be of much use to us, we need to know how to get elements back out of them. Every element in the array has an index associated with it. The first element in the array is associated with the 0 index, the second element in the array the 1 index etc.
</p>
<p>
This is a bit weird, but nearly all numbering in computer science starts with zero!
</p>
<pre>
var myArray = ['First element', 'Second element', 'Third element', 'Fourth element', 'Fifth element'];
myArray[0];
myArray[1];
myArray[3];
</pre>
<p>
The above code shows us how to get our elements out of arrays. We use the syntax <code>arrayName[index];</code>
</p>
<tasks>
<item title="Open the Console in Chrome"></item>
<item title="Create an array of strings"> Have at least 4 elements in the array. Use the syntax above to help out</item>
<item title="Practice getting elements back out of the array"> Remember, the first element has index 0!</item>
</tasks>
<p>
We can do more than just insert and get things out of arrays! There are a couple of really useful methods that you can use with arrays that we will explore now.
</p>
<pre>
var names = ["Nick", "Mark", "Maddie", "Alice", "Alan"];
var lengthOfNames = names.length;
</pre>
<p>
<code>arrayName.length</code> will tell you how many element are in your array. This can be really handy when you need to loop over everything in your array (which we'll do soon!).
</p>
<pre>
var names = ["Nick", "Mark", "Maddie", "Alice", "Alan"];
names.indexOf("Nick");
names.indexOf("Alice");
names.indexOf("Patrick");
</pre>
<p>
<code>arrayName.indexOf("Something")</code> will tell us which index "Something" is at in our array, if it exists at all. If the element we are searching for doesn't exist we will be given back -1.
</p>
<tasks>
<item title="In Chromes developer tools"></item>
<item title="Create a new array of names"></item>
<item title="User array.length to calculate the amount of elements"> Try storing that in a new array too.</item>
<item title="Use array.indexOf() to search for elements in your array"> Hint: check the syntax above if you get lost</item>
<item title="Create a new array with duplicate entries"> <code>var names = ["Nick", "Nick", "Tom"];</code></item>
<item title="names.indexOf('Nick')"> What happens?</item>
</tasks>
<h3 id="random">Selecting a Random element from an array</h3>
<pre>
var names = ['Nick', 'Alan', 'Trevor', 'Lucy'];
var randomIndex = Math.floor(Math.random() * names.length);
var randomElement = names[randomIndex];
</pre>
<p>
Okay - how does this work?
</p>
<p>
<code>Math.random()</code> generates a random number between 0 and 1 (but never actually 1, maybe 0.999999).
</p>
<p>
We then multiply that number by the length of our array. In this case our length is 4, so multiplying a random number between 0 and 1 by 4 will give us a number between 0 and 4 (but again never quite 4, maybe 3.99999).
</p>
<p>
We then use Math.floor() which takes a number and rounds it down to the nearest integer. So 3.9999 becomes 3. 2.1 becomes 2. We store this as randomIndex
</p>
<p>
We then use our normal way of accessing array elements to access our random index element!
</p>
<tasks>
<item title="Open the Console in Chrome"></item>
<item title="Use Math.random()"> Verify that it generates a different number between 0 and 1 each time you use it</item>
<item title="Math.random() * 6"> Veryify that multiplying a number between 0 and 1 by another number will generate a number between 0 and that number.</item>
<item title="Create an array"> with some elements in</item>
<item title="Math.random() * array.length"> Verify that Math.random() * yourArrayName.length works too!</item>
<item title="var index = Math.floor(Math.random() * array.length)"> Verify that this creates a random index that we can use to index our array. You can print our the index by typing <code>index</code> (which is the variable name)</item>
<item title="Access the random element!"> Use the code snippet above to get a random element out of your array!</item>
</tasks>
<h2 id="selecting">Selecting a random Tough Love</h2>
<p>
We now have enough knowledge to implement the selection of a random Tough Love message. Guess what? It'll use arrays and variables!
</p>
<pre>
var advice = ["That's terrible! You should knock that off!",
"Seriously? Why don't you grow the hell up?!",
"Aren't you a little old for that crap?",
"You are bad and you should feel bad!",
"Gross. You are gross.",
"Are you going to suck all your life?",
"What? Who does that?!",
"I thought you were better than that.",
"My disapproval is overwhelming.",
" ಠ__ಠ ",
"Are you freaking kidding me?",
"NO! Bad!",
"And when do you plan on becoming an adult?",
"That is totally unacceptable.",
"You should be utterly ashamed.",
"Ugh! That's horrible!",
"A kitten dies everytime you do that.",
"I can't believe you are that disgusting."]
</pre>
<tasks>
<item title="Head back into sublime"></item>
<item title="Find your function that handles the click on the button"></item>
<item title="At the top (but inside) this function add an array of advice messages."> You can use Jennifer's if you want.</item>
<item title="Select a random element out of this array and store it in a variable called message"></item>
<item title="Use jQuery to select the heading on your page that will display this message in"> Note: you may find it easier to add an id to the element in your HTML </item>
<item title="use $('heading_selector').text(message)"> This changes the heading elements text to be our random element </item>
</tasks>
<h2 id="input">Displaying the input message</h2>
<p>
We're almost there. We now need to take the message that the user inputs and display it on the page. Once we've displayed it we'll also need to clear the input box.
</p>
<tasks>
<item title='var inputMessage = $("input").val()'> This can be used to store the input message from the input box. .val() gets the current text that's inside the box. Add this below your code that pulls the random element of the array.</item>
<item title='$("heading_selector").text(inputMessage)'> Where heading_selector is the CSS selector that selects the heading element from our HTML that we want to display the user input in.</item>
<item title='$("input").val("")'> This resets the contents of the input box so that it is ready for another input</item>
<item title="Verify that it works!"> You should now be able to input some text and click the button. The text should be displayed along with a random Tough Love message.</item>
</tasks>
<h2 id="extensions">Optional Extras</h2>
<p>If you've made it this far and you still have time, try some of these extra exercises</p>
<h3>Making it pretty</h3>
<p>I'm sure you'll agree the plain HTML site we've created isn't going to win a <a href="https://www.webbyawards.com/">Webby!</a></p>
<tasks>
<item title="Add a sprinkle of CSS to make it look pretty"></item>
</tasks>
<h3>Adding a question mark to the end of the input message</h3>
<p>
If you study the original Tough Love website you'll notice Jennifer <em>appends</em> a question mark to the end of the message that the user types. We can do this too!
</p>
<pre>
var inputMessage = $('input').val();
inputMessage = inputMessage + "?";
</pre>
<p>
What this does is it gets the value of the text that is currently in the input box, and saves it in a variable called inputMessage.
</p>
<p>
We then do something called <em>string concatenation</em> to add two strings together. We do this with the + operator, which can be used on strings as well as maths!
</p>
<p>
<code>inputMessage + "?"</code> adds a question mark character to the end of the input string. We then overwrite the value of out old inputMessage and set the new one equal to this string (with the appended ?)
</p>
<tasks>
<item title="Add the code to append a ?"> The code is above and should be placed on the line below $('input').val()</item>
</tasks>
<h3>What if the input box is empty?</h3>
<p>
On Jeniffer's site, if you leave the input box blank and hit submit you get the default "You don't fill in forms?" remark. We should have this on our site.
</p>
<pre>
var inputMessage = $('input').val();
if(inputMessage == '') {
inputMessage = 'You don't fill in forms';
}
inputMessage = inputMessage + "?";
</pre>
<tasks>
<item title="Study the above code. Can you work out what it does?"> If you read it out, it sounds like english!</item>
</tasks>
<p>
This code uses what's called a <em>conditional statement</em> with an if statement. This checkes the if the <em>condition</em> is true, and if it is executes the code between the curly braces.
</p>
<p>
In this case, the code checks to see if the inputMessage (the input from the box) is empty <code>== ''</code>. The empty check tests to see if the string in the inputBox is equal to an empty string. If is is, the inputMessage is set to the default You don't fill in forms message.
</p>
<p>
One important gotcha is the <code>==</code>. The double equals. This tests for equality. We've seen the <code>=</code> single equals before, this is used to assign something to a variable. Programmers of all experiance get caught out by this at times, don't be one of them.
</p>
<tasks>
<item title="Add the above conditional statement to your code."> Can you work out where to put it? Does it work?</item>
</tasks>
</div> <!-- rightPane -->
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>