Skip to content

Workshop: JavaScript Values and Variables

A simple 2D platform game scene with a lava pit, platforms, and a box
representing the player

A scene from Dark Blue by Thomas Palef, in Marijn Haverbeke, chapter 16 of Eloquent JavaScript, 3rd edition.

For this workshop, practice working with JS values and variables by writing a story about a character of your choosing--a pet, a person or thing from a movie or a book, etc.

Aesop’s Fables

You can use one of Aesop’s fables if you like! There is a nice edition for children at read.gov.

Advanced option

Are you already pretty good at JS values and variables? Then do this workshop by defining an object with properties and methods as appropriate, rather than raw variables in the global namespace.

  1. Create a new webpage with an index.html file, and add an index.js file or script.js file that is imported and run in the HTML file. Log something to the console, and check that you can run the script and see outputs in the browser console.

  2. Begin developing your story character by defining defining some string variables. Maybe a name, favorite things, emotional states, attributes, etc. Name each variable in a way that makes sense and is easy to read and understand for other people reading your program.

    Tip

    You can put emoji in string values. 😎

  3. Define some number variables for your character. Maybe age, height / size, amount of money or other possessions, or other attributes.

  4. Define some boolean variables for your character. Maybe whether they’re having a good day, whether they can swim, whether they’re cold-blooded.

  5. Now that you’ve defined the variables, make a new section where you make things happen. Re-assign variables as needed to show the action or arc of the story. Log the results. Incorporate operators if you can, to do comparisons or checks or introduce decision points.

User input

Finished your story and want to do more? Try to integrate user inputs into the story. See if you can make the outcome of the story differ based on the user input.

Another character

Introduce another character to the story, with their own variables, and make the story depend on the interaction between the two characters.

Requirements checklist

For homework credit, here are the main things to try to get right:

  • Several string variables properly assigned.
  • Several number variables properly assigned.
  • Several boolean variables properly assigned.
  • The variable names make sense and are consistently styled.
  • The program tells a story.
  • Key information is logged to the console.
  • There are no errors when the program runs.

Content CC BY 4.0 | Code AGPL 3.0