Other Pages

numbers_strings_and_booleans.step

goals do
  goal "Use the browser's console"
  goal "Understand the primitive types of numbers, strings and booleans"
end

overview do
  message <<-MARKDOWN
    ## Using the Browser's Console

    We'll experiment with javascript using the console of our browser. We recommend everyone use Chrome, for consistency through the class.

    To open the console on a Mac, use the shortcut `Command` + `Option` + `J`. To open the console in Windows or Linux, use the keyboard shortcut `Control` + `Shift` + `J`. Alternatively, right click, select 'Inspect Element' from the right-click menu, and click the 'Console' tab.

    The console is where we can experiment with javascript, by typing after the `>` prompt. The console will also show us the return value of an expression we type and will display any errors we get.

    ## Numbers
  MARKDOWN

  steps do
    step { message "In the console, type `5` and press enter. Notice that it will display the value `5` in response. Thus, our return value for the expression `5` is `5`." }
    step { message "Try `typeof(5)` and note what kind of object `5` is."}
    step { message "Try creating decimal numbers."}
    step { message "Try creating irrational numbers (a number that can only be fully expressed as the ratio of two numbers, like 2/3). Notice that it will convert it to a decimal."}
    step { message "Try adding or subtracting numbers in the console by typing `6 + 12` or `15 - 32`."}
    step { message "Try an edge case with numbers, like `12 / 0`." }
    step { message "To assign a number to a variable, type `favoriteNumber = 5` into the console prompt. Then use favoriteNumber in the next expression, like `favoriteNumber + 7`. Variables in Javascript are traditionally 'camel-cased' with capital letters separating words in a variable name." }
    step { message "More complex math, like exponents, will require us to use the Math object, as in `Math.pow(12, 2)`, but that shouldn't stop us from trying it out!"}
    step { message "Bonus Points: Check out [Mozilla Developer Network Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) for the Math object, and try using some of the other methods they describe in your console!"}
  end


  message <<-MARKDOWN
  ## Strings
  Strings are units of text, and we encapsulate them in `'single quotes'` or `"double quotes"`.
  MARKDOWN

  steps do
    step { message "Try creating a string by typing `'this is a string'` into the console prompt."}
    step { message "You can grab a string's individual characters with `'this is a string'[6]`, where the number 6 is the index of the character you want, starting at 0."}
    step { message "Concatenate strings with `'my name is' + 'Michelle' + '.'`."}
    step { message "Assign a string to a variable by writing `myName = 'Michelle'`."}
    step { message "Use the variable as you would a literal string: `'Is your name ' + myName + '?'`"}
    step { message "If you're ahead of others, check out the [MDN docs on strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)."}
  end


  message <<-MARKDOWN
  ## Booleans (True/False)
  Booleans are a type of object used to indicate true or false values in Javascript. They are most often used to help check whether a condition is true or not, or whether something exists.
  MARKDOWN

  steps do
    step { message "Try creating a Boolean by typing `'x = false'`." }
    step { message "`Type x==false?console.log(`'yes`'):console.log(`'no`');`." }
  end
end