Skip to content

Instantly share code, notes, and snippets.

@ESOComputing

ESOComputing/FCC Challenge 13 - Dash 5.1 - SlideTranscripts

Created January 16, 2015 08:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ESOComputing/103b465a1faf25ce05e1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ESOComputing/103b465a1faf25ce05e1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FCC Challenge 13 - Dash 5.1 - SlideTranscripts
FCC Challenge 13 (Dash Project 5 - Madlibs Game: 5.1)
********************************************************************************************
Slide 1/47
********************************************************************************************
Lin’s Madlib Game
Part 1: You Can Count On Arrays!
********************************************************************************************
Slide 2/47
********************************************************************************************
Lin: “I just saw the project you made for Cotter on the front page of Reddit!
Congratulations!
Can you make me something, too?”
********************************************************************************************
Slide 3/47
********************************************************************************************
Lin loves all kinds of word games --- especially Mad Libs. She wants you to make one just for her!
********************************************************************************************
Slide 4/47
********************************************************************************************
OUR MISSION: In this lesson, we’ll cover 3 main things:
New data type: arrays!
How to count in JavaScript
Translating JavaScript into HTML
********************************************************************************************
Slide 5/47
********************************************************************************************
LET’S GET STARTED
********************************************************************************************
Slide 6/47
********************************************************************************************
Hooray! Arrays!
********************************************************************************************
Slide 7/47
********************************************************************************************
A Mad Lib is a word substitution game that uses parts of speech.
ex Give me a NOUN! - Panda bear!
Give me a VERB! - Poop!
********************************************************************************************
Slide 8/47
********************************************************************************************
Josh asked Debbie on a panda bear to go poop with him.
or
Josh asked Debbie on a chair to go bounce with him.
********************************************************************************************
Slide 9/47
********************************************************************************************
Our JavaScript Mad Lib will ask the user one question, and then, after they answer it, a brand new question will appear on screen as if by magic!
It’s not really magic, though, it’s JavaScript.
********************************************************************************************
Slide 10/47
********************************************************************************************
There are [a] whole bunch of data types in JavaScript. We’ve already covered functions, numbers, and strings.
********************************************************************************************
Slide 11/47
********************************************************************************************
To make Lin’s Mad Lib, you could write a gazillion individual variables, OR you could try to hold a bunch of different pieces of information in one fancy value.
And that’s what arrays were made for!
********************************************************************************************
Slide 12/47
********************************************************************************************
An array is another data type in JavaScript. The array below has three things inside of it. Each thing is separated by a comma.
ex var array = [ thing, nextThing, anotherThing];
1 2 3
This isn’t the array you need, so don’t bother copying it out!
********************************************************************************************
Slide 13/47
********************************************************************************************
Here’s an example of an array that is useful for Lin’s project.
You can put each thing on it’s own line to make it easier for humans to read.
ex <script>
//Lists of prompts for the user
var prompts = [
‘Type your name’,
‘Type an adjective’,
‘Type a noun’
];
</script>
********************************************************************************************
Slide 14/47
********************************************************************************************
This variable, called prompts, contains an array; the array contains three strings. Each item is a string because strings can hold multiple words and spaces.
ex var prompts = [
‘Type your name’,
‘Type an adjective’,
‘Type a noun’
];
Combining data types is totally encouraged!
********************************************************************************************
Slide 15/47
********************************************************************************************
CHECKPOINT #1
Copy out the array from the last slide inside your script tags
********************************************************************************************
Slide 16/47
********************************************************************************************
How do you kow that JavaScript understands the code, and that the code will work? Of course: write an alert!
But what should you ask the alert to say?
********************************************************************************************
Slide 17/47
********************************************************************************************
Arrays have a special property called .length.
Sometimes you have an array with hundreds of items. You can use the length property to answer the question: how many items are in this array?
********************************************************************************************
Slide 18/47
********************************************************************************************
Let’s find out how many items your variable called prompts contains.
ex alert(prompts.length);
********************************************************************************************
Slide 19/47
********************************************************************************************
CHECKPOINT #2
Write an alert below your variable definition to tell you the length of the array prompts.
********************************************************************************************
Slide 20/47
********************************************************************************************
Now, click the red RUN JAVASCRIPT button down below and see what pops up.
********************************************************************************************
Slide 21/47
********************************************************************************************
Perfect! Your array does have three things in it.
[Image of the javascript alert with the #3]
Now, let’s try to alert just one of those things.
********************************************************************************************
Slide 22/47
********************************************************************************************
ALERTS AND TYPES
To alert numbers and variables, you stick them in parentheses right up against the alert keyword.
ex alert(2);
alert(name);
********************************************************************************************
Slide 23/47
********************************************************************************************
ALERTS AND TYPES
Strings are alerted inside quotes. It doesn’t make a difference if you use double quotes or single quotes.
ex alert(‘name’);
alert(“your name”);
********************************************************************************************
Slide 24/47
********************************************************************************************
ALERTS AND TYPES
Your array is in a variable, so the alert needs to call both the variable’s name and which item in the array to show.
ex alert(prompts[1]);
There are three items inside prompts; let’s display the first one.
********************************************************************************************
Slide 25/47
********************************************************************************************
This alert should display item number 1 in the array contained inside of the prompts variable:
ex alert(prompts[1]);
That first item is: “Type your name”
********************************************************************************************
Slide 26/47
********************************************************************************************
CHECKPOINT #3
Comment out the length alert
Copy the alert from the previous slide to display the first prompt
********************************************************************************************
Slide 27/47
********************************************************************************************
Click the red RUN JAVASCRIPT button to see what pops up.
********************************************************************************************
Slide 28/47
********************************************************************************************
2. Don’t Count On It
********************************************************************************************
Slide 29/47
********************************************************************************************
[Image of JavaScript Alert stating “Type an adjective”]
Huh. That’s weird. It alert the second item.
********************************************************************************************
Slide 30/47
********************************************************************************************
JavaScript doesn’t count like you or me. When it looks at an array that says [red, orange, yellow, green], and you ask which item is in position 1, it takes one step forward from its starting position.
********************************************************************************************
Slide 31/47
********************************************************************************************
JavaScript counts from ZERO---so moving forward one step lands in a box labelled orange. To get red, you need to ask what’s in the zero box.
ex [BOX 1 - RED] [BOX 2 - ORANGE] [BOX 3 - YELLOW] [BOX 4 - GREEN]
0 1 2 3
********************************************************************************************
Slide 32/47
********************************************************************************************
Why start at 0? It’s one of those odd relics from back when computers couldn’t handle large amounts of data. The smaller the numbers used in calculations, the quicker the computer could perform them.
Just roll with it.
********************************************************************************************
Slide 33/47
********************************************************************************************
CHECKPOINT #4
Change your alert so that it says alert(prompts[0]);
********************************************************************************************
Slide 34/47
********************************************************************************************
Run JavaScript and see what pops up.
FYI: The second prompt is at position 1, one spot away from the beginning. The third item is in position 2.
********************************************************************************************
Slide 35/47
********************************************************************************************
3. JavaScript, Meet HTML
********************************************************************************************
Slide 36/47
********************************************************************************************
When you built Cotter’s robot, you used jQuery function .css to shove information out of JavaScript into your CSS stylesheet.
******************************************************************************************** . Slide 37/47
********************************************************************************************
GUESS WHAT?
********************************************************************************************
Slide 38/47
********************************************************************************************
First, make an empty HTMLl container to hold the content that the JavaScript will spit out.
ex <div class=”prompt”></div>
********************************************************************************************
Slide 39/47
********************************************************************************************
CHECKPOINT #5
Put an empty div into the body of your html.
Give it the class name prompt.
Have you commented out both of your alerts.
********************************************************************************************
Slide 40/47
********************************************************************************************
Here’s how the jQuery .html function looks.
ex $(‘.prompt’).html(prompts[0]);
That says: find a class named .prompt; put whatever’s in the 0 position of [the] array prompts inside it.
********************************************************************************************
Slide 41/47
********************************************************************************************
Is your head spinning yet?
********************************************************************************************
Slide 42/47
********************************************************************************************
CHECKPOINT #6
Write a .html function that will put the first item from your array into the HTML
Include a useful comment ABOVE the function describing what this function does.
********************************************************************************************
Slide 43/47
********************************************************************************************
Run JavaScript and see what happens.
********************************************************************************************
Slide 44/47
********************************************************************************************
Now, edit your .html function so that it displays the third item in the array
********************************************************************************************
Slide 45/47
********************************************************************************************
Lin: “So… at the end of the project, I’ll have an interactive Mad Lib that me and my friends can play?
I can’t wait.”
********************************************************************************************
Slide 46/47
********************************************************************************************
In the next DASH lesson, you’ll learn even more about arrays, like how to change which prompt is displayed on the screen with a single magnificent click.
********************************************************************************************
Slide 47/47
********************************************************************************************
YOU’RE DONE - GREAT JOB!
[buttons to share on social media & move on to the next lesson]
********************************************************************************************
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment