Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
1458 lines (1321 sloc) 50.3 KB
<!DOCTYPE html>
<html>
<head>
<title>Ladies Learning Ruby</title>
<meta charset='utf-8'>
<script src='default.js'></script>
</head>
<style>
</style>
<body style='display: none'>
<section class='slides layout-regular template-default'>
<img src='images/ladieslearningcode-125x125.gif'>
<article>
<h1>
Learning to Program
<br>
with Ruby
</h1>
<p>
Dessy Daskalov
<br>
@dess_e
</p>
</article>
<article id="what-is-ruby">
<style>
#what-is-ruby p { margin: 100px 0px; font-size: 40px; line-height: 50px; };
</style>
<h3>
What is Ruby?
</h3>
<p />
<div class="build">
<p class='large-font'>Ruby is a programming language.</p>
<p class='large-font'>Wait ... what's a programming language?</p>
<p class='large-font'>Let's backtrack a bit.</p>
</div>
</article>
<article id='two-things'>
<style>
#two-things p { margin: 200px 0px; }
</style>
<p class='large-font'>There are two things you should know about your computer.</p>
</article>
<article id='computer-wishes'>
<style>
#computer-wishes h3 { padding-bottom: 10px; }
#computer-wishes img { margin-left: 70px; }
</style>
<h3>
1. Your computer speaks a different language.
</h3>
<p>This is how your computer wishes you could speak to it:</p>
<p />
<img src="images/machine-language.jpg" width="600" height="411" border="1">
</article>
<article>
<h3>
This is where a programming language comes in.
</h3>
<p>A programming language is a language that is relatively easy for you to learn, but can also be understood by the computer.</p>
<p>It's the middle ground between English and the language that the computer understands.</p>
</article>
<article id='stupid-computer'>
<style>
#stupid-computer p { margin: 200px 0px; }
</style>
<h3>
2. Your computer is not very smart.
</h3>
<p class='large-font'>Your computer can only do what you tell it to if you give it exact instructions.</p>
</article>
<article>
<h3>People vs. Computers</h3>
<p>
Suppose you had to teach a person how to make a peanut butter sandwich.
You might give the person an easy to follow recipe.
</p>
<p>1. Toast two slices of bread</p>
<p>2. Spread peanut butter on one slice of bread</p>
<p>3. Spread jam on the other slice of bread</p>
<p>4. Put the two pieces of bread together</p>
<p>5. Put the sandwich on a plate and serve it</p>
</article>
<article>
<h3>People understand GENERAL instructions.</h3>
<p>
We left out some parts of the process, but a person could figure out:
</p>
<p>Where to find the ingredients</p>
<p>To use a butter knife to spread the peanut butter</p>
<p>To put the bread in a toaster in order to toast it</p>
<p>etc, etc, etc (there are many little steps)</p>
</article>
<article id='computers-exact'>
<style>
#computers-exact p { margin: 150px 0px; };
</style>
<h3>Computers understand EXACT instructions.</h3>
<p class='large-font'>
This same recipe for a computer would be much, much longer.
</p>
</article>
<article>
<h3>1. Toast two slices of bread</h3>
<p>What is bread?</p>
<p>Where is it found?</p>
<p>How do I open the bag?</p>
<p>What is a slice?</p>
<p>How do I slice the bread?</p>
<p>How do I "toast"?</p>
<p>What is a toaster?</p>
<p>How do I use a toaster?</p>
<p>etc, etc, etc</p>
</article>
<article>
<h3>2. Spread peanut butter on one slice of bread</h3>
<p>What is peanut butter?</p>
<p>How do I "spread" peanut butter?</p>
<p>What is a butter knife?</p>
<p>Where is it found?</p>
<p>How do I open the knife drawer?</p>
<p>Which slice do I spread it on?</p>
<p>How much peanut butter do I spread?</p>
<p>etc, etc, etc</p>
</article>
<article id='programming-languages'>
<style>
#programming-languages p { margin-top: 80px; }
#programming-languages .mixed-font { line-height: 50px; }
#programming-languages b { font-size: 40px; }
</style>
<h3>Back to programming languages.</h3>
<p>A programming language makes it easier for you to give the computer instructions.</p>
<p class='mixed-font'>
It's made up of <b>simple elements</b>, that when <b>combined together</b>,
are used to write a set of <b>instructions</b> that the computer then breaks down and interprets as its own language.
</p>
</article>
<article id='learned-programming'>
<style>
#learned-programming p { margin-top: 100px; }
</style>
<h3>
You've just learned what programming is!
</h3>
<p class='large-font'>Programming is writing out <b>exact instructions</b> that your computer can follow to do things.</p>
</article>
<article id='ruby-rocks'>
<style>
#ruby-rocks .large-font { margin: 50px; }
</style>
<h3>
Why Ruby Rocks!
</h3>
<p>Created in 1993 by Yukihiro Matsumoto, from Japan.</p>
<p class='large-font'>
"I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy.
That is the primary purpose of the Ruby language."
</p>
<p>Ruby is <b>fun</b>, it's <b>easy to learn</b>, and the <b>syntax is very forgiving</b>.</p>
</article>
<article>
<p class='large-font'>This is some code in Java:</p>
<section>
<pre>
class Person {
private String name, int age;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setAge(int age) {
this.age = age;
}
public String getAge() {
return age;
}
}</pre>
</section>
</article>
<article>
<p class='large-font'>The equivalent code in Ruby looks like this:</p>
<section>
<pre>
class Person
attr_accessor :name, :age
end
</pre>
</section>
</article>
<article id='irb-intro'>
<style>
#irb-intro .instructions { margin-top: 100px; }
</style>
<h3>
Time to see Ruby in action!
</h3>
<p>IRB is like text messaging with Ruby.</p>
<p>You'll ask Ruby to do something, and it will respond.</p>
<div class='instructions'>
<p><b>OS X</b></p>
<section>
<pre>Applications -> Utilities -> Terminal</pre>
</section>
<p />
<p><b>Windows</b> (C:\windows\system32\cmd.exe)</p>
<section>
<pre>Start -> All Programs -> Accessories -> Command Prompt</pre>
</section>
</div>
</article>
<article id='ask-ruby'>
<style>
#ask-ruby .large-font { margin-top: 100px; }
</style>
<section class='build'>
<pre>irb</pre>
<pre>ruby-1.9.2-p290 :001 > </pre>
<p class='large-font'>Let's ask Ruby to do something.</p>
</section>
</article>
<article>
<section class='build'>
<pre>> 1 + 1</pre>
<pre>=> 2</pre>
<pre>> 462 * 86</pre>
<pre>=> 39732</pre>
<p class='large-font'>Ruby can do math, and it can do it much quicker than a person can.</p>
</section>
</article>
<article id='ruby-knows'>
<style>
#ruby-knows .large-font { margin-top: 100px; }
</style>
<section class='build'>
<pre>> 1 + 2 + 3<br>=> 6</pre>
<pre>> "ladies" + "learning" + "code"</pre>
<pre>=> "ladieslearningcode"</pre>
<p class='large-font'>Ruby knows the difference between a number and a word.</p>
</section>
</article>
<article id='integer-string'>
<style>
#integer-string .ruby-class { margin: 100px 0px; }
</style>
<h3>
Numbers and Words, Integers and Strings
</h3>
<p>In Ruby ...</p>
<p class='ruby-class'>Numbers without decimals are called <b>INTEGERS</b>. We just did some math with some integers.</p>
<p class='ruby-class'>Letters, words, and sentences are called <b>STRINGS</b>. We tell Ruby that we are intending to use a string by wrapping it in quotes.</p>
</article>
<article id='objects-objects'>
<style>
#objects-objects .large-font { margin: 150px 0px; }
</style>
<h3>
Objects, Objects, Everywhere!
</h3>
<p>You've already met Objects. That's a programming word!</p>
<div class='build'>
<p class='large-font'>Everything in Ruby is an Object.</p>
</div>
</article>
<article id='classes-galore'>
<style>
#classes-galore .build { margin-top: 40px; }
#classes-galore .large-font { margin: 70px 0px; }
</style>
<h3>Classes</h3>
<div class='build'>
<p>Ruby is extremely picky and needs to classify everything before it knows what to do with it.<br>Ruby knows that ...</p>
<p class='large-font'>The number <b>1</b> is an <b>Integer</b>.
<p class='large-font'>The word <b>"ladies"</b> is a <b>String</b>.
<p>Integers and Strings are classes in Ruby. That's another programming word!</p>
</div>
</article>
<article>
<h3>City</h3>
<div class='class-diagram'>
<img src="images/toronto.png">
<img src="images/london.jpg">
<br>
<img src="images/new-york.jpg">
<img src="images/paris.jpg">
</div>
</article>
<article id='city-instance'>
<style>
#city-instance p { margin: 70px 0px; }
</style>
<div class='build'>
<p class='large-font'>Toronto is an instance of the class City.</p>
<p class='large-font'>London is an instance of the class City.</p>
<p class='large-font'>New York is an instance of the class City.</p>
<p class='large-font'>Paris is an instance of the class City.</p>
</div>
</article>
<article id='string-class'>
<style>
#string-class div { padding: 20px; }
</style>
<h3>String</h3>
<div class='class-diagram'>
"ladies"<br><br>
"ladieslearningcode"<br><br>
"The dog jumped over the fence."
</div>
</article>
<article id='string-instance'>
<style>
#string-instance p { margin: 70px 0px; }
</style>
<div class='build'>
<p class='large-font'>"ladies" is an instance of the class String.</p>
<p class='large-font'>"ladieslearningcode" is an instance of the class String.</p>
<p class='large-font'>"The dog jumped over the fence." is an instance of the class String.</p>
</div>
</article>
<article>
<h3>
Playing with Integers
</h3>
<section class='build'>
<pre>> 99.next</pre>
<pre>=> 100</pre>
<pre>> 99.odd?</pre>
<pre>=> true</pre>
<pre>> 99.even?</pre>
<pre>=> false</pre>
</section>
</article>
<article>
<h3>
Simple String Manipulation
</h3>
<section class='build'>
<pre>> "ladieslearningcode".capitalize</pre>
<pre>=> "Ladieslearningcode"</pre>
<pre>> "ladieslearningcode".upcase</pre>
<pre>=> "LADIESLEARNINGCODE"</pre>
<pre>> "ladieslearningcode".reverse</pre>
<pre>=> "edocgninraelseidal"</pre>
</section>
</article>
<article id='ruby-method'>
<style>
#ruby-method .large-font { margin: 60px 0px; }
</style>
<h3>
Methods
</h3>
<div class='build'>
<p class='large-font'><b>next</b>, <b>odd?</b>, and <b>even?</b> are all methods that you can call on an Integer.</p>
<p class='large-font'><b>capitalize</b>, <b>upcase</b>, and <b>reverse</b> are all methods that you can call on a String.</p>
<p class='large-font'>Methods are actions.</p>
</div>
</article>
<article id='class-methods'>
<style>
#class-methods .large-font { margin: 200px 0px; }
</style>
<p class='large-font'>Classes come packaged with methods.</p>
</article>
<article>
<h3>
I'm lazy! I don't want to do all of this typing!
</h3>
<p>What if we could type in "ladieslearningcode" just once, and store it for later use? We can!</p>
<section>
<pre>> llc = "ladieslearningcode"</pre>
<pre>=> "ladieslearningcode"</pre></section>
<p>You've just <b>assigned</b> the String "ladieslearningcode to the <b>variable</b> llc.</p>
<p>A programmer would say that the variable llc points to the object "ladieslearningcode".</p>
</article>
<article>
<h3>
Variables Can (And Often Do!) Vary
</h3>
<p>A variable is called just that because the object it points to can change.</p>
<section class='build'>
<pre>> llc = "a lady learning code"</pre><pre>=> "a lady learning code"</pre>
<div>llc <img src='images/arrow.png'> "a lady learning code"</div>
<p>Now let's ask for the value of llc.</p>
<pre>> llc</pre><pre>=> "a lady learning code"</pre>
</section>
</article>
<article>
<p>Let's try some more</p>
<section class='build'>
<pre>> llc = 99</pre><pre>=> 99</pre>
<div>llc <img src='images/arrow.png'> 99</div>
<p>Let's ask for the value of llc once again.</p>
<pre>> llc</pre><pre>=> 99</pre>
</section>
</article>
<article>
<h3>The More the Merrier</h3>
<p>Let's introduce another variable.</p>
<section class='build'>
<pre>> copy_cat = llc</pre><pre>=> 99</pre>
<div>llc <img src='images/arrow.png'> 99 <img src='images/back-arrow.png'> copy_cat</div>
</section>
</article>
<article>
<p>Let's ask for the value of each variable.</p>
<section class='build'>
<pre>> llc</pre><pre>=> 99</pre>
<pre>> copy_cat</pre><pre>=> 99</pre>
<p>Now set llc back to "ladieslearningcode"</p>
<pre>> llc = "ladieslearningcode"</pre><pre>=> "ladieslearningcode"</pre>
</section>
</article>
<article>
<h3>
String Manipulation With Our Variable
</h3>
<p>You can now use this variable exactly like you would have used "ladieslearningcode" before.</p>
<section>
<pre>> llc.capitalize</pre>
<pre>=> "Ladieslearningcode"</pre>
<pre>> llc.upcase</pre>
<pre>=> "LADIESLEARNINGCODE"</pre>
<pre>> llc.reverse</pre>
<pre>=> "edocgninraelseidal"</pre>
</section>
</article>
<article>
<h3>Modifying the value with a method</h3>
<section class='build'>
<pre>> llc.reverse</pre><pre>=> "edocgninraelseidal"</pre>
<p>Try asking for the value of llc now.</p>
<pre>> llc</pre><pre>=> "ladieslearningcode"</pre>
</section>
</article>
<article id='wait-why'>
<style>
#wait-why p { margin: 50px 0px; }
</style>
<h3>Wait. Why didn't it change?</h3>
<section class='build'>
<p class='large-font'>llc is still pointing to "ladieslearningcode". You didn't tell it to point to a different string.</p>
<div>llc <img src='images/arrow.png'> "ladieslearningcode"</div>
<p class='large-font'>If you want the value to change, you have to set it to something else.</p>
</section>
</article>
<article>
<section class='build'>
<pre>> llc = llc.reverse</pre><pre>=> "edocgninraelseidal"</pre>
<pre>> llc</pre><pre>=> "edocgninraelseidal"</pre>
<p class='large-font'>If you want the value of a variable to change, you have to explicitly tell it to change.</p>
</section>
</article>
<article>
<h3>
Let's Try One More
</h3>
<div class='build'>
<pre>> llc.length</pre>
<pre>=> 18</pre>
<p class='large-font'>
You're probably starting to get a sense of how Twitter knows
how many characters you've typed in.
</p>
</div>
</article>
<article>
<h3>Doing like Twitter does.</h3>
<section class='build'>
<pre>> tweet = "I'm writing my first program at the @llcodedotcom<br>Intro to Ruby workshop!"</pre>
<pre>=> "I'm writing my first program at the @llcodedotcom <br>Intro to Ruby workshop!"</pre>
<pre>> tweet.length</pre>
<pre>=> 73</pre>
<p class='large-font'>We now know enough to write a program.</p>
</section>
</article>
<article>
<h3>
Writing Our First Program
</h3>
<p>
Open any text editor, add the same code, and save it as twitter.rb in your llc directory.
</p>
<section>
<pre>tweet = "I'm writing my first program at the @llcodedotcom<br>Intro to Ruby workshop!"<br>tweet.length</pre>
</section>
<p>To run your program, type <b>quit</b> to exit from IRB, and then type:</p>
<section>
<pre>ruby twitter.rb</pre>
</section>
<div class='build'><p>Wait, what? Why didn't it show me the length of my string?</p></div>
</article>
<article id='ruby-output'>
<style>
#ruby-output .large-font { margin: 50px 0px; }
</style>
<h3>
Outputting Text to the Screen
</h3>
<p class='large-font'>IRB is like back-and-forth text messaging.</p>
<p class='large-font'>A program has to be told when to output something</p>
<p>Modify your program:</p>
<section>
<pre>tweet = "I'm writing my first program at the @llcodedotcom<br>Intro to Ruby workshop!"<br>puts tweet.length</pre>
</section>
</article>
<!-- just words, highlight in a different colour before -->
<article id='recap-one'>
<style>
#recap-one .large-font { margin: 50px 0px; text-align: center; }
</style>
<h3>
Recap Slide
</h3>
<div class='build'>
<p class='large-font'>Integer</p>
<p class='large-font'>String</p>
<p class='large-font'>Class</p>
<p class='large-font'>Object</p>
<p class='large-font'>Variable</p>
</div>
</article>
<article id='puzzle-one'>
<style>
#puzzle-one .large-font { margin: 100px 0px; }
</style>
<h3>
Puzzle One - Variables
</h3>
<p class='large-font'>Open puzzle_1.rb in the puzzles folder, and write down the output you expect to see if you were to run this script.</p>
<p class='large-font'>If you're not sure of something, remember that you can type <b>irb</b> again and try it out.</p>
</article>
<article id='real-twitter'>
<style>
#real-twitter .large-font { margin: 60px 0px; }
</style>
<h3>
Getting Input From the User
</h3>
<p>The real Twitter...</p>
<div class='build'>
<p class='large-font'>Asks you to type something.</p>
<p class='large-font'>Tells you how many characters you're working with.</p>
<p>So far, we've just been putting our tweet directly into the program.</p>
</div>
</article>
<article>
<h3>
Asking for Input
</h3>
<p>The <b>puts</b> method is used for output, and the <b>gets</b> method is used for input. Try this:</p>
<p>The gets method warns Ruby that you're about to speak.</p>
<section class='build'>
<pre>> tweet = gets</pre>
<pre class='all-string'>I'm learning Ruby with #ladieslearningcode</pre><pre>=> "I'm learning Ruby with #ladieslearningcode\n"</pre>
<p>
Wait, we didn't type \n in our tweet. What is that?
</p>
</section>
</article>
<article>
<h3>
Asking for Input
</h3>
<p>
The \n is there because you hit the enter button after you typed your tweet. It represents a new line, and counts as exactly one character.
To get rid of it, do this:
</p>
<section class='build'>
<pre>> tweet = gets.chomp</pre>
<pre class='all-string'>I'm learning Ruby with #ladieslearningcode</pre>
<pre>=> "I'm learning Ruby with #ladieslearningcode"</pre>
</section>
</article>
<article>
<h3>
Asking for Input
</h3>
<p>Now try this:</p>
<section class='build'>
<pre>> tweet = gets.chomp</pre>
<pre class='all-string'>I'm a lady learning code with @llcodedotcom #ladieslearningcode</pre>
<pre>=> "I'm a lady learning code with @llcodedotcom #ladieslearningcode"</pre>
<pre>> puts tweet</pre>
<pre class='all-string'>I'm a lady learning code with @llcodedotcom #ladieslearningcode<br>=> nil</pre>
</section>
</article>
<article id='nil-nothing'>
<style>
#nil-nothing p { margin: 80px 0px; }
</style>
<h3>What's nil? It's nothing, don't worry.</h3>
<p>You asked Ruby to output your tweet, and Ruby did just that.</p>
<p>
Remember that in IRB, Ruby always responds to your message.
This time, it gave the output, and had nothing else to say, so it returned nil.
</p>
<p>nil is also an Object, and it just represents nothing.</p>
</article>
<article id='ask-for-tweet'>
<style>
#ask-for-tweet .build { margin-top: 60px; }
</style>
<h3>
Back to your Twitter Program
</h3>
<p>Working with your group, modify your Twitter program to do the following:</p>
<div class='build'>
<p>1. Ask (politely!) for a tweet from the user.</p>
<p>2. Store the tweet in a variable, without \n</p>
<p>3. Output the tweet the user gave.</p>
<p>4. Output the number of characters in the tweet.</p>
<p>5. Output how many <b>more</b> characters the user can add until they hit 140 characters.</p>
<p>(answers in assignments/twitter_3.rb)</p>
</div>
</article>
<article id='conditional-twitter-1'>
<style>
#conditional-twitter-1 .large-font { margin-top: 100px; }
</style>
<h3>
Giving Output Based on Input
</h3>
<p>Twitter...</p>
<p class='large-font'>Lets you send your tweet if it is 140 characters or less</p>
<p class='large-font'>Tells you that your tweet is too long to send otherwise.</p>
</article>
<article id='conditional-twitter-2'>
<style>
#conditional-twitter-2 .large-font { margin-top: 100px; }
</style>
<h3>Giving Output Based on Input</h3>
<p class='large-font'>
So far we know how to determine the length of the user's tweet.
</p>
<p class='large-font'>
We don't know how to tell them
whether they can or cannot send their tweet, depending on it's length.
</p>
</article>
<article id='conditional-logic'>
<style>
#conditional-logic .large-font { margin-top: 100px; }
</style>
<h3>Conditional Logic</h3>
<p class='large-font'>Programming is writing out sets of simple instructions for the computer to follow.</p>
<p class='large-font'>Let's break down out tweet logic into simple instructions.</p>
</article>
<article id='conditional-instructions'>
<style>
#conditional-instructions .large-font { margin-top: 80px; }
</style>
<h3>
Conditional Logic
</h3>
<p>We want our program to ...</p>
<p class='large-font'>if the tweet is greater than 140 characters, tell the user that they cannot send their tweet</p>
<p class='large-font'>if the tweet is less than or equal to 140 characters, tell the user that they can send their tweet</p>
</article>
<article id='greater-than'>
<style>
#greater-than .large-font { margin: 100px 0px; }
</style>
<h3>
Conditional Logic: Greater Than
</h3>
<p class='large-font'>The math symbol for <b>greater than</b> is <b>></b></p>
<p>Try the code below in IRB:</p>
<section class='build'>
<pre>> 200 > 140</pre><pre>=> true</pre>
</section>
</article>
<article>
<h3>
Conditional Logic: Greater Than
</h3>
<p>Now try:</p>
<section class='build'>
<pre>> number_of_characters = 200</pre><pre>=> 200</pre>
<pre>> number_of_characters > 140</pre><pre>=> true</pre>
</section>
</article>
<article>
<h3>
Conditional Logic: Greater Than
</h3>
<p>Now try:</p>
<section class='build'>
<pre>> number_of_characters = 80</pre><pre>=> 80</pre>
<pre>> number_of_characters > 140</pre><pre>=> false</pre>
</section>
</article>
<article id='less-than'>
<style>
#less-than .large-font { margin: 50px 0px; }
</style>
<h3>
Conditional Logic: Less Than
</h3>
<p class='large-font'>The math symbol for <b>less than</b> is <b><</b></p>
<p>Try the code below in irb</p>
<section class='build'>
<pre>> llc = "ladieslearningcode"</pre><pre>=> "ladieslearningcode"</pre>
<pre>> llc.length < 140</pre><pre>=> true</pre>
</section>
</article>
<article id='conditional-logic'>
<h3>
Conditional Logic in Our Simple Twitter
</h3>
<p class='large-font'>Let's simplify our if statements.</p>
<p class='large-font'>Remember that we're storing the user's tweet in the variable tweet.</p>
</article>
<article id='conditional-simplify'>
<style>
#conditional-simplify p { margin: 50px 0px; }
</style>
<h3>
Conditional Logic in Our Simple Twitter
</h3>
<p>Original if statements:</p>
<p>if the tweet is greater than 140 characters, tell the user that they cannot send their tweet</p>
<p>if the tweet is less than 140 characters, tell the user that they can send their tweet</p>
<p />
<div class='build'>
<!-- split up, and put actual statement instead of crap code -->
<p>if tweet.length > 140 puts "Your tweet is too long!"</p>
<p>if tweet.length < 140 puts "Tweet your heart out!"</p>
</div>
</article>
<article>
<h3>
Try it out!
</h3>
<p>
Replace the puts statements in your Twitter program with the code below.
(see assignments/twitter_4.rb if needed)
</p>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>end<br><br>if tweet.length < 140<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p>
Using the tweets from tweets.txt, try out your new script!
What's the problem here? What do you notice happened when using the tweets in tweets.txt?
</p>
</article>
<article id='conditional-instructions'>
<h3>
Your First Bug!
</h3>
<p class='large-font'>We're not actually taking into account all possible tweet lengths.</p>
<p class='large-font'>Programming problems can be solved many different ways.</p>
<p class='large-font'>We'll look at three different solutions.</p>
</article>
<article id='conditional-logic'>
<h3>
First (Worst) Solution
</h3>
<p class='large-font'>Since we're only missing one case, the case where the tweet is exactly 140 characters, we can just add another if statement.</p>
</article>
<article>
<h3>
First (Worst) Solution
</h3>
<p>Add this last if statement to the bottom of your file: (see assignments/twitter_5.rb if needed)</p>
<section>
<pre>if tweet.length == 140<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p class='large-font'>
The == operator checks that the value of the objects on either side of it are equal.
</p>
</article>
<article id='conditional-logic'>
<h3>
Refactoring Our Code
</h3>
<p class='large-font'>
Programmers are always refactoring (re-strcturing, re-organizing) their code to make it cleaner and more readable.
Right now is a great time to do that.
</p>
</article>
<article>
<h3>
Refactoring Our Code
</h3>
<p>Three if statements are unnecessary. We can actually combine all of these if statements into one, like so:</p>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>elsif tweet.length < 140<br> puts "Tweet your heart out!"<br>elsif tweet.length == 140<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p>(see assignments/twitter_6.rb if needed)</p>
</article>
<article id='conditional-logic'>
<h3>if .. elsif</h3>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>elsif tweet.length < 140<br> puts "Tweet your heart out!"<br>elsif tweet.length == 140<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p class='large-font'>In the above code, if the first statement doesn't evaluate to true, then the next one is attempted, and so on.</p>
</article>
<article id='conditional-logic'>
<h3>if .. elsif</h3>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>elsif tweet.length < 140<br> puts "Tweet your heart out!"<br>elsif tweet.length == 140<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p class='large-font'>
Only one puts statement is ever executed.
The statements are evaluated in the order they are written, so the first one to evaluate to true is the only one executed.
</p>
</article>
<article id='conditional-logic'>
<h3>if .. elsif</h3>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>elsif tweet.length < 140<br> puts "Tweet your heart out!"<br>elsif tweet.length == 140<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p class='large-font'>If none of the statements evaluate to true, then none of the puts statements are executed.</p>
</article>
<article>
<h3>
Second Solution
</h3>
<p>Notice that the line puts "Tweet your hear out!" is unnecessarily repeated?</p>
<p>Let's cut it out by replacing the entire if statement with the code below:</p>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>elsif tweet.length <= 140<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p>(see assignments/twitter_7.rb if needed)</p>
</article>
<article id='conditional-instructions'>
<h3>Less than or equal to with <=, Greater than or equal to with >=</h3>
<p class='large-font'>The <b><=</b> operator checks for equality as well.</p>
<p class='large-font'>Checking for equality with greater than works exactly the same way, using the <b>>=</b> operator.</p>
</article>
<article>
<h3>
Third Time's a Charm
</h3>
<p>
This is better, but look at the logic closely. Do we really even need to specify the second condition?
</p>
<p>Replace your code again with the code below:</p>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>else<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p>(see assignments/twitter_8.rb if needed)</p>
</article>
<article id='conditional-logic'>
<h3>if .. else</h3>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>else<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p class='large-font'>
Just like with if .. elsif, only one puts statement is ever executed. The difference here is that one of the
puts statements is <b>always</b> executed.
</p>
</article>
<article id='conditional-logic'>
<h3>if .. else</h3>
<section>
<pre>if tweet.length > 140<br> puts "Your tweet is too long!"<br>else<br> puts "Tweet your heart out!"<br>end</pre>
</section>
<p class='large-font'>
The else is there are a <b>catch-all</b>. You can think of it like a last resort.
If none of the other options are true, then just execute the puts statement after the else.
</p>
</article>
<article>
<h3>Hello, Operator?</h3>
<table>
<tr><td>Operator</td><td>True</td><td>False</td></tr>
<tr>
<td>==</td>
<td>99 == 99</td>
<td>99 == 100</td>
</tr>
<tr>
<td>!=</td>
<td>99 != 100</td>
<td>99 != 99</td>
</tr>
<tr>
<td>></td>
<td>100 > 99</td>
<td>99 > 100</td>
</tr>
<tr>
<td><</td>
<td>99 < 100</td>
<td>100 < 99</td>
</tr>
<tr>
<td>>=</td>
<td>99 >= 99</td>
<td>99 >= 100</td>
</tr>
<tr>
<td><=</td>
<td>99 <= 99</td>
<td>100 <= 99</td>
</tr>
</table>
</article>
<article id='recap-two'>
<h3>Recap Slide</h3>
<style>
#recap-two .large-font { margin: 50px 0px; text-align: center; }
</style>
<div class='build'>
<p class='large-font'>puts</p>
<p class='large-font'>gets</p>
<p class='large-font'>if .. elsif</p>
<p class='large-font'>if .. elsif .. else</p>
<p class='large-font'>if .. else</p>
</div>
</article>
<article id='conditional-logic'>
<h3>
Puzzle Two - Conditionals
</h3>
<p class='large-font'>Look at the program in puzzle_2.rb.</p>
<p class='large-font'>The program asks the user for the month of their birthday,
and then outputs a message about the season the user celebrates their birthday in.
</p>
</article>
<article id='conditional-instructions'>
<h3>
Puzzle Two - Conditionals
</h3>
<p class='large-font'>Which months does this program consider to be spring, summer, winter, and fall?</p>
<p class='large-font'>
Simplify the logic to make the program as few lines of code as possible?
</p>
<p class='large-font'>Goal: 20 lines!</p>
</article>
<article>
<h3>
Loopy
</h3>
<p>
What if you want to be able to tell your program when to stop running? Create a new program with the following code,
or use run the program in assignments/loop_1.rb:
</p>
<section>
<pre>
puts "Hi!"
greeting = gets.chomp
while greeting != "bye!"
puts greeting
greeting = gets.chomp
end</pre>
</section>
<p>This is called a while loop. The program will run while the user inputs anything other than "bye!"</p>
</article>
<article id='conditional-logic'>
<h3>
What if we know exactly how many times the program needs to do that same thing?
</h3>
<p class='large-font'>Again, there are several ways to do this.</p>
</article>
<article>
<h3>Tell me exactly how many times</h3>
<p>Create a new program with the following code, or use run the program in assignments/loop_2.rb:</p>
<section>
<pre>
3.times do
puts "Hip-Hop-Hooray!"
sleep 1
end</pre>
</section>
<p>This program will output "Hip-Hip-Hooray!" exactly 3 times.</p>
</article>
<article>
<h3>Tell me exactly how many times</h3>
<section>
<pre>
3.times do
puts "Hip-Hop-Hooray!"
sleep 1
end</pre>
</section>
<p>The <b>sleep 1</b> tells the program to wait 1 second after outputting each statement.</p>
<p>Try taking it out to see what happens. Not as exciting.</p>
</article>
<article>
<h3>Count from 1 to 5</h3>
<p>Create a new program with the following code, or use run the program in assignments/loop_3.rb:</p>
<section>
<pre>
puts "Okay, on the count of 5 ..."
[1, 2, 3, 4, 5].each do |i|
puts i
sleep 1
end
puts "GO!"</pre>
</section>
</article>
<article>
<h3>Count from 1 to 5</h3>
<section>
<pre>
puts "Okay, on the count of 5 ..."
[1, 2, 3, 4, 5].each do |i|
puts i
sleep 1
end
puts "GO!"</pre>
</section>
<p>This program loops through each Integer from 1 to 5, and outputs the Integer, again sleeping for 1 second in between.</p>
<div style='padding:20px 0px 0px 240px;'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
</div>
<div style='padding-left:200px'>[&nbsp;
1,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
2,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
3,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
4,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
5&nbsp;&nbsp;]</div>
</article>
<article>
<h3>Counting down</h3>
<p>Maybe we wants a program that simulates a countdown.</p>
<p>Create a new program with the following code, or use run the program in assignments/loop_4.rb:</p>
<section>
<pre>
99.downto(1).each do |i|
puts "#{i} bottles of beer on the wall, #{i} bottles of beer.
Take one down, pass it around,
and now there are #{i - 1} bottles of beer on the wall!"
sleep 0.5
end</pre>
</section>
</article>
<article>
<h3>Counting down</h3>
<section>
<pre>
99.downto(1).each do |i|
puts "#{i} bottles of beer on the wall, #{i} bottles of beer.
Take one down, pass it around,
and now there are #{i - 1} bottles of beer on the wall!"
sleep 0.5
end</pre>
</section>
<p>
This program moves through each Integer from 99 down to 1, and outputs the Integer, this time sleeping for half a second in between.
</p>
<div style='padding:20px 0px 0px 205px;'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
</div>
<div style='padding-left:150px'>[&nbsp;
99,&nbsp;&nbsp;&nbsp;&nbsp;
98,&nbsp;&nbsp;&nbsp;&nbsp;
97,&nbsp;&nbsp;&nbsp;&nbsp;
96,&nbsp;&nbsp;&nbsp;&nbsp;
95, . . .&nbsp;&nbsp;]</div>
</article>
<article>
<h3>Counting down</h3>
<p>Wait a second, how did we get an Integer in that String?</p>
<section>
<pre>puts "#{i} bottles of beer on the wall, #{i} bottles of beer.
Take one down, pass it around,
and now there are #{i - 1} bottles of beer on the wall!"
</pre>
</section>
<p class='large-font'>
You can use the syntax <b>#{my_variable}</b> inside of the String,
and Ruby will treat the variable exactly like a String.
</p>
</article>
<article>
<h3>String Interpolation</h3>
<section class='build'>
<pre>> lesson = "Ruby"</pre>
<pre>=> "Ruby"</pre>
<pre>> tweet = "I am learning all about #{lesson} at the <br />#ladieslearningcode workshop"</pre>
<pre>=> "I am learning all about Ruby at the <br />#ladieslearningcode workshop"</pre>
</section>
</article>
<article>
<h3>String Interpolation</h3>
<section class='build'>
<pre>> lesson = "String Interpolation"</pre>
<pre>=> "String Interpolation"</pre>
<pre>> tweet = "I am learning all about #{lesson} at the <br />#ladieslearningcode workshop"</pre>
<pre>=> "I am learning all about String Interpolation at the <br />#ladieslearningcode workshop"</pre>
</section>
</article>
<article>
<h3>
What if we don't want to count, but we have a set of something else we want to loop over?
</h3>
<p>
Create a new program with the following code, or use run the program in assignments/loop_5.rb:
</p>
<section>
<pre>
puts "And the lucky numbers are ..."
[7, 13, 14, 16, 14, 48].each do |i|
puts i
sleep 1
end
puts "With a bonus number 32!"</pre>
</section>
<div style='padding:20px 0px 0px 170px;'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
<img src='images/curved-arrow.gif'>
</div>
<div style='padding-left:125px'>[&nbsp;
7,&nbsp;&nbsp;&nbsp;&nbsp;
13,&nbsp;&nbsp;&nbsp;&nbsp;
14,&nbsp;&nbsp;&nbsp;&nbsp;
16,&nbsp;&nbsp;&nbsp;&nbsp;
22,&nbsp;&nbsp;&nbsp;&nbsp;
48&nbsp;&nbsp;]</div>
</article>
<article id='conditional-instructions'>
<h3>Leaving early</h3>
<p class='large-font'>What if we want to be able to leave a loop early, before we have finished looping?</p>
<p class='large-font'>We need a way to tell Ruby to stop looping. We do that using the command <b>break</b>.</p>
<p class='large-font'><b>break</b> tells the loop to stop where it is.</p>
</article>
<article>
<h3>Leaving early</h3>
<p>Create a new program with the following code, or run the program in assignments/loop_6.rb:</p>
<section>
<pre>
puts "Time to play Blackjack! Let's simulate a losing game."
sum = 0
[2, 4, 10, 9, 3].each do |card|
sleep 1
puts "Dealing a card with value #{card}"
sum = sum + card
if sum > 21
puts "You lost!"
break
else
puts "Hit me!"
end
end</pre>
</section>
</article>
<article id='conditional-instructions'>
<h3>Loops + Arrays = <3</h3>
<p>
Every time you were looping, regardless or whether you were counting using <b>[1, 2, 3, 4, 5]</b>, or
just looping over <b>[7, 13, 14, 16, 14, 48]</b>, you were using <b>arrays</b>.
</p>
<p class='large-font'>
An <b>array</b> is simply a <b>collection of objects</b>. Loops are used to move from one element of an array to another.
</p>
</article>
<article id='string-class'>
<style>
#string-class div { padding: 20px; }
</style>
<h3>Array</h3>
<div class='class-diagram'>
[1, 2, 3, 4, 5]<br><br>
[7, 13, 14, 16, 14, 48]<br><br>
["ladies", "learning", "code"]
</div>
</article>
<article>
<h3>
There are many methods on Array, as well.
</h3>
<p>
Back in IRB, let's create an array of winning lottery numbers and store it in the variable lottery.
</p>
<section class='build'>
<pre>> lottery = [7, 13, 14, 16, 14, 48]</pre>
<pre>=> [7, 13, 14, 16, 14, 48]</pre>
</section>
</article>
<article>
<h3>
Methods that do NOT modify the array
</h3>
<section class='build'>
<pre>> lottery.join(', ')</pre>
<pre>=> "7, 13, 14, 16, 14, 48"</pre>
<pre>> lottery</pre>
<pre>=> [7, 13, 14, 16, 14, 48]</pre>
</section>
</article>
<article>
<h3>
Methods that do NOT modify the array
</h3>
<section class='build'>
<pre>> lottery[0]</pre>
<pre>=> 7</pre>
<pre>> lottery[1]</pre>
<pre>=> 13</pre>
<pre>> lottery[6]</pre>
<pre>=> nil</pre>
</section>
</article>
<article>
<h3>
Methods that do NOT modify the array
</h3>
<section class='build'>
<pre>> lottery.uniq</pre>
<pre>=> [7, 13, 14, 16, 48]</pre>
<pre>> lottery</pre>
<pre>=> [7, 13, 14, 16, 14, 48]</pre>
</section>
</article>
<article>
<h3>
Methods that DO modify the array
</h3>
<section class='build'>
<pre>> lottery.delete_at(0)</pre>
<pre>=> 7</pre>
<pre>> lottery</pre>
<pre>=> [13, 14, 16, 14, 48]</pre>
</section>
</article>
<article>
<h3>
Methods that DO modify the array
</h3>
<section class='build'>
<pre>> lottery << 92</pre>
<pre>=> [13, 14, 16, 14, 48, 92]</pre>
<pre>> lottery</pre>
<pre>=> [13, 14, 16, 14, 48, 92]</pre>
</section>
</article>
<article id='conditional-logic'>
<h3>
Puzzle 3 - Arrays
</h3>
<p class='large-font'>What will be the output of puzzle 3?</p>
<p class='large-font'>Remember to think about which methods modify the array, and which do not.</p>
</article>
<article id='instructions'>
<style>
#instructions .build { margin-top: 30px }
</style>
<h3>Favourite Colour</h3>
<p>Write a program that does the following:</p>
<div class='build'>
<p>1. Loops through an array of the colours red, green, blue, and yellow.</p>
<p>2. For each colour, asks the user if it is their favourite.</p>
<p>3. If the user types yes, then a variable called favourite_colour is set to that colour.</p>
<p>4. If the user types anything else, the loop continues.</p>
<p>
5. Once the loop is complete, if the user said yes to a colour, the program outputs their favourite colour to them.
If the user did not say yes to any of the colours, it tells them that their favourite colour is not red, green, blue, or yellow.
</p>
</div>
</article>
<article id='conditional-instructions'>
<h3>Blackjack Game</h3>
<p>We're going to create a Blackjack game with some simplified rules.</p>
<div class='build'>
<p class='large-font'>At the start of the game, the player and the dealer each get 2 cards.</p>
<p class='large-font'>
The player is told the sum of their two cards, and then has the opportunity to type h
if they want to hit, or anything else if they want to stand.
</p>
</div>
</article>
<article id='instructions'>
<h3>Blackjack Game</h3>
<div class='build'>
<p class='large-font'>The player continues to receive cards, and their sum continues to go up, until:</p>
<p>1. They no longer want to hit.</p>
<p>2. Their sum exceeds 21, in which case they lose.</p>
<p>3. Their sum amounts to exactly 21, in which case they win.</p>
<p class='large-font'>The player is told their current sum before every opportunity to hit.</p>
</div>
</article>
<article>
<h3>Blackjack Game</h3>
<p>
If the player manages to make it through the hitting cycle without winning or losing, the dealer
receives cards until their sum is greater than or equal to 17.
</p>
<p>The sum of the player's cards and the sum of the dealer's cards are compared.</p>
<p>If the dealer's sum is greater than 21, then the player wins.</p>
<p>Otherwise if the player's sum is greater than the dealer's sum, then the player wins.</p>
<p>Otherwise if the player's sum is equal to the dealer's sum, then there is a tie.</p>
<p>In all other cases, the player loses.</p>
</article>
<article id='credits-book'>
<style>
#credits-book img { margin: 30px 0px 0px 100px; }
</style>
<h3>Credits</h3>
<p>Inspired by Chris Pine's <b>Learn to Program</b></p>
<img src='images/learn-to-program.jpg'>
</article>
<article id='credits-twg'>
<style>
#credits-twg .large-font { line-height: 80px; margin: 100px; text-align: center; }
</style>
<p class='large-font'>
Big, big thank you to <br /><a href='http://www.theworkinggroup.ca'>The Working Group</a>,
to <a href='http://twitter.com/jack_neto'>Jack</a>, <a href='http://twitter.com/tadmanter'>Scott</a>,
and <a href='http://twitter.com/bgilham'>Brian</a>, for helping out with this workshop,
and to <a href='http://ladieslearningcode.com/'>Ladies Learning Code</a>!
</p>
</article>
</section>
</body>
</html>