Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
1536 lines (1396 sloc) 53 KB
<!--
Google HTML5 slide template
Original slides by:
Authors: Luke Mahé (code)
Marcin Wichary (code and design)
Dominic Mazzoni (browser compatibility)
Charles Chen (ChromeVox support)
URL: http://code.google.com/p/html5slides/
Modifications by: Dessy Daskalov
-->
<!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='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 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 id='middle-ground'>
<h3>
This is where a programming language comes in.
</h3>
<style>
#middle-ground p { margin-top: 100px }
</style>
<p>A programming language is a language that is relatively <b>easy for you to learn</b>, but can also be <b>understood by the computer</b>.</p>
<p>It's the <b>middle ground</b> 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 id='stupid-computer'>
<h3>People vs. Computers</h3>
<p class='large-font'>
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>
</article>
<article>
<h3>People vs. Computers</h3>
<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='ruby-robot'>
<style>
#ruby-robot img { margin: 50px 0 0 450px; }
</style>
<h3>
Meet Ruby Robot
</h3>
<img src="images/robot.png">
</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>
<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>
<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>
<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='classes-galore'>
<style>
#classes-galore .build { margin-top: 40px; }
#classes-galore .large-font { margin: 70px 0px; }
</style>
<h3>Classes</h3>
<div>
<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 id='back-ruby-robot'>
<style>
#back-ruby-robot .large-font { margin: 80px 0 50px 0; }
</style>
<h3>
Back to Ruby Robot
</h3>
<p>Ruby Robot has pages and pages of instructions for what to do with different classes of objects.</p>
<p class='large-font'>When you ask Ruby Robot what <b>1 + 2</b> is:</p>
<p>It finds the instruction sheet for INTEGER.</p>
<p>Scans the instruction sheet for <b>+</b>.</p>
<p>Sees that when you ask for an INTEGER + INTEGER, you want it to add the two together.</p>
</article>
<article>
<h3>
Playing with Integers
</h3>
<pre>> 99.next</pre>
<section class='build'>
<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>
<pre>> "ladieslearningcode".capitalize</pre>
<section class='build'>
<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>
<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 id='back-ruby-robot'>
<style>
#back-ruby-robot .large-font { margin: 80px 0 50px 0; }
</style>
<h3>
Back to Ruby Robot
</h3>
<p class='large-font'>You gave Ruby Robot the string "<b>ladieslearningcode</b>", and asked it to put a sticky note with "<b>llc</b>" on that string.</p>
<p class='large-font'>Now, when you ask for "llc", Ruby Robot will know where to find your string, because it has labelled it.</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>
<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>
<br />
<p>Now let's ask for the value of llc.</p>
<pre>> llc</pre>
<section class='build'>
<pre>=> "a lady learning code"</pre>
</section>
</article>
<article>
<p>Let's try some more</p>
<pre>> llc = 99</pre><pre>=> 99</pre>
<div>llc <img src='images/arrow.png'> 99</div>
<br />
<p>Let's ask for the value of llc once again.</p>
<pre>> llc</pre>
<section class='build'>
<pre>=> 99</pre>
</section>
</article>
<article>
<h3>The More the Merrier</h3>
<p>Let's introduce another variable.</p>
<section>
<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>
<pre>> llc.reverse</pre><pre>=> "edocgninraelseidal"</pre>
<p>Try asking for the value of llc now.</p>
<pre>> llc</pre>
<section class='build'>
<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>
<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>
<pre>> llc = llc.reverse</pre><pre>=> "edocgninraelseidal"</pre>
<pre>> llc</pre>
<section class='build'>
<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>
<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>
<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>
<section class='build'>
<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>
From your text editor, open the file twitter.rb in your llc directory and add the following:
</p>
<section>
<pre>tweet = "I'm writing my first program at the @llcodedotcom<br>Intro to Ruby workshop!"<br>puts 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>
</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 with <b>puts</b>.</p>
<p class='large-font'>Let's try a few more examples together.</p>
</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>
<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>
<pre>> tweet = gets</pre>
<pre class='all-string'>I'm learning Ruby with #ladieslearningcode</pre><pre>=> "I'm learning Ruby with #ladieslearningcode\n"</pre>
<section class='build'>
<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>
<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>
<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>
<section class='build'>
<pre class='all-string'>I'm a lady learning code with @llcodedotcom #ladieslearningcode<br>=> nil</pre>
</section>
</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>
<pre>> 200 > 140</pre><pre>=> true</pre>
</section>
</article>
<article>
<h3>
Conditional Logic: Greater Than
</h3>
<p>Now try:</p>
<pre>> number_of_characters = 200</pre><pre>=> 200</pre>
<br />
<pre>> number_of_characters > 140</pre>
<section class='build'>
<pre>=> true</pre>
</section>
</article>
<article>
<h3>
Conditional Logic: Greater Than
</h3>
<p>Now try:</p>
<pre>> number_of_characters = 80</pre><pre>=> 80</pre>
<pre>> number_of_characters > 140</pre>
<section class='build'>
<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>
<pre>> llc = "ladieslearningcode"</pre><pre>=> "ladieslearningcode"</pre>
<pre>> llc.length < 140</pre>
<section class='build'>
<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-structuring, 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 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 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 want 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 soda on the wall, #{i} bottles of soda.
Take one down, pass it around,
and now there are #{i - 1} bottles of soda 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 soda on the wall, #{i} bottles of soda.
Take one down, pass it around,
and now there are #{i - 1} bottles of soda 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 soda on the wall, #{i} bottles of soda.
Take one down, pass it around,
and now there are #{i - 1} bottles of soda 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>
<pre>> lesson = "Ruby"</pre>
<pre>=> "Ruby"</pre>
<pre>> tweet = "I am learning all about #{lesson} at the <br />#ladieslearningcode workshop"</pre>
<section class='build'>
<pre>=> "I am learning all about Ruby at the <br />#ladieslearningcode workshop"</pre>
</section>
</article>
<article>
<h3>String Interpolation</h3>
<pre>> lesson = "String Interpolation"</pre>
<pre>=> "String Interpolation"</pre>
<pre>> tweet = "I am learning all about #{lesson} at the <br />#ladieslearningcode workshop"</pre>
<section class='build'>
<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>
<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>
<pre>> lottery.join(', ')</pre>
<pre>=> "7, 13, 14, 16, 14, 48"</pre>
<pre>> lottery</pre>
<section class='build'>
<pre>=> [7, 13, 14, 16, 14, 48]</pre>
</section>
</article>
<article>
<h3>
Methods that do NOT modify the array
</h3>
<pre>> lottery[0]</pre>
<section class='build'>
<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>
<pre>> lottery.uniq</pre>
<pre>=> [7, 13, 14, 16, 48]</pre>
<pre>> lottery</pre>
<section class='build'>
<pre>=> [7, 13, 14, 16, 14, 48]</pre>
</section>
</article>
<article>
<h3>
Methods that DO modify the array
</h3>
<pre>> lottery.delete_at(0)</pre>
<pre>=> 7</pre>
<pre>> lottery</pre>
<section class='build'>
<pre>=> [13, 14, 16, 14, 48]</pre>
</section>
</article>
<article>
<h3>
Methods that DO modify the array
</h3>
<pre>> lottery << 92</pre>
<pre>=> [13, 14, 16, 14, 48, 92]</pre>
<pre>> lottery</pre>
<section class='build'>
<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='rails'>
<style>
#rails .large-font { margin-top: 70px }
</style>
<h3>Ruby on Rails</h3>
<p>Ruby became popular mostly because of Rails.</p>
<section class='build'>
<p class='large-font'>Ruby on Rails is a framework.</p>
<p class='large-font'>GREAT.</p>
<p class='large-font'>What's a framework?</p>
</section>
</article>
<article id='rails'>
<style>
#rails .house { margin: 30px 0 0 140px }
</style>
<h3>Ruby on Rails</h3>
<section class='build'>
<p class='large-font'>Imagine you're building a house.</p>
<img src='images/house.jpg' class="house">
</section>
</article>
<article id='rails'>
<style>
#rails .house { margin: 30px 0 0 140px }
</style>
<h3>Ruby on Rails</h3>
<p class='large-font'>Many people before you have built houses.</p>
<p class='large-font'>Why do the boring work?</p>
<p class='large-font'>Rails gives you the foundation, the plumbing, the electrical work, and the structural walls.</p>
</article>
<article id='rails'>
<style>
#rails img { display: block; margin: 0 auto; }
table tr td { border: none; }
</style>
<h3>Ruby on Rails</h3>
<p>Rails was extracted from work done on Basecamp at 37signals. (2004)</p>
<table>
<tr>
<td><img src='images/rails-basecamp.jpg'></td>
<td><img src='images/rails-twitter.png'></td>
</tr>
<tr>
<td><img src='images/rails-groupon.png'></td>
<td><img src='images/rails-shopify.jpg'></td>
</tr>
</table>
</article>
<article id='from-scratch'>
<style>
#from-scratch .large-font { margin-top: 70px }
</style>
<h3>A Program All Your Own</h3>
<p>Let's write a program from scratch.</p>
<p class='large-font'>For the biggest challenge:</p>
<p>Create a new document called <b>colours.rb</b> and write the program from scratch.</p>
<p class='large-font'>For a little bit of guidance:</p>
<p>Open the file <b>colours.rb</b> in the <b>assignments</b> folder.</p>
<br />
<p>Answers can be found in <b>assignments/answers/colours.rb</b></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='from-scratch'>
<style>
#from-scratch .large-font { margin-top: 70px }
</style>
<h3>An (Addictive) Program All Your Own</h3>
<p>Let's write something more complicated from scratch.</p>
<p class='large-font'>For the biggest challenge:</p>
<p>Create a new document called <b>blackjack.rb</b> and write the program from scratch.</p>
<p class='large-font'>For a little bit of guidance:</p>
<p>Open the file <b>blackjack.rb</b> in the <b>assignments</b> folder.</p>
<br />
<p>Answers can be found in <b>assignments/answers/blackjack.rb</b></p>
</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>