programming_with_javascript.step

goals do
goal "Be able to use the basic building blocks of JavaScript code"
goal "Do simple calculations"
goal "Use and understand variables"
goal "Use and understand arrays"
goal "Use loops and conditional statements"
end
overview do
message <<-MARKDOWN
JavaScript is a fully featured programming language with variables, loops,
and conditionals. Just like Ruby, Java, Python, and PHP, you can use JavaScript
to do math, model large systems, and perform complex calculations – all in your browser!
In this lesson, we'll learn about the fundamentals of the JavaScript programming language.
MARKDOWN
end
steps do
step do
message "Open up your browser's developer tools, and click over to the console tab. Type the following code:"
source_code :javascript, <<-JAVASCRIPT
console.log('programming!')
JAVASCRIPT
message <<-MARKDOWN
Press enter. Your browser should now look like this:
<img src="img/browser_console.png" alt="image of browser console with console.log"></img>
Congrats, you just wrote your first lines of JavaScript code! __console.log__ is an important function –
it allows you to print information to the browser's console. It's very helpful in debugging! You can also
use the __alert__ function to make a message pop up in the browser. Try it out!
MARKDOWN
end
step do
message "Next try some simple math that's built into JavaScript. Type these lines into console:"
source_code :javascript, <<-JAVASCRIPT
3 + 3
7 * 6
JAVASCRIPT
end
step do
message "**Variables** are names with values assigned to them."
source_code :javascript, <<-JAVASCRIPT
var myVariable = 5
JAVASCRIPT
message "This assigns the value `5` to the name `myVariable`."
end
step do
message "You can also do math with variables:"
source_code :javascript, <<-JAVASCRIPT
myVariable + 2
myVariable * 3
JAVASCRIPT
end
step do
message "Variables can also hold more than one value. This is called an **array**."
source_code :javascript, 'var fruits = ["kiwi", "strawberry", "plum"]'
message "Here we're using the variable `fruits` to hold a collection of fruit names."
end
step do
message "Arrays are a type of __object__ in JavaScript. Objects often include helpful attributes!"
source_code :javascript, <<-JAVASCRIPT
fruits.length
JAVASCRIPT
message <<-MARKDOWN
Objects can also have __functions__, which can be helpful for altering objects and learning more about them.
Functions are __invoked__ with parentheses, which causes them to run.
MARKDOWN
source_code :javascript, <<-JAVASCRIPT
fruits.push("orange")
fruits.slice(1)
JAVASCRIPT
message <<-MARKDOWN
The __push__ function allows us to add new items to an array. The slice function returns a new array with
with everything to the right of the __index__ we provided. Here, we passed the function the number 1, so
slice returned an array with everything after the first element in the array. (Note that the first element is assigned 0 as its index rather than 1.)
MARKDOWN
end
step do
message "You can also make your own functions:"
source_code :javascript, <<-JAVASCRIPT
var pluralize = function(word) {
return word + "s"
}
pluralize("kiwi")
JAVASCRIPT
message "Functions take **parameters**, which are the variables they work on. In this case, we made a function called pluralize that takes one parameter, a word."
message "Functions can also return data. In this case, pluralize returns the word with an 's' added to the end of it. In order for a function to return something, you have to use the __return__ keyword."
end
step do
message "Arrays have a function called **forEach** which iterates through the list running code on each item. It takes another function as a parameter."
source_code :javascript, <<-JAVASCRIPT
fruits.forEach(function(fruit) {
console.log(fruit)
})
JAVASCRIPT
message "This takes the first item from the `fruits` array (`\"strawberry\"`), assigns it to the variable `fruit`, and runs the code between curly brackets. Then it does the same thing for each other item in the list. The code above should print a list of the fruits."
end
step do
message "A **conditional** runs code only when a statement evaluates to true."
source_code :javascript, <<-JAVASCRIPT
if(myVariable > 1) {
console.log('YAY')
}
JAVASCRIPT
message "This prints `YAY!` if the value stored in `myVariable` is greater than 1."
message "Try changing the `>` in the conditional to a `<`."
end
end
next_step "playing_with_jquery"

Going through this curriculum on your own? Get help on our Discourse forum, where RailsBridge volunteers can answer your questions.

If you have a suggestion for improving the docs, please make a pull request or drop us a note via GitHub Issues (no technical knowledge required).