🎨
[JS] Intro to Computational Media 2.0
CS4All Resources
  • Curriculum Overview
  • How to Use this Curriculum
  • 📬Leave Us Feedback
  • Curriculum Extras
    • 🔮Curriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt. 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Pathfinding Algorithms && Facial Scanning
    • Playing with Pixels
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Draw & Draw With Functions
    • 🔮Unit 1 Overview
    • U1LA1.1: p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4: Other Shapes && Styling
    • 🗃️U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1: Intro to Color with RGB && HSB
    • 🤓EXTRA: Color & Data Storage
    • 🤓EXTRA: Color Palette Practice
    • ✨U1LA3.1: Introducing Variables
    • ✨U1LA3.2: Creating Custom Variables
    • ✨U1LA4.1: What is Abstraction?
    • ✨U1LA4.2: Intro to Functions && Function Calls
    • U1LA4.3: Draw with Functions
    • U1LA4.4: Using the Random Function
    • 🗃️U1LA4 Mini Project: Custom Emoji
    • U1LA5.1: Your Custom Function Library
    • 🎨Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond and Draw on Canvas
    • 🔮Unit 2 Overview
    • ✨U2LA1.1: Conditionals and If Statements
    • ✨U2LA1.2: Conditionals and if, else if, and else statements
    • ✨U2LA1.3: Logical Operators And/Or
    • 🗃️U2LA1 Mini Project: Make a Traffic Light
    • U2LA2.1: Draw with Mouse
    • U2LA2.2: The Map Function
    • ✨U2LA3.1: Data Type Scavenger Hunt
    • ✨U2LA3.2: Functions that Return Values
    • 🤓U2LA3.3: Functions with Purpose
    • U2LA4.1: Collision Functions && Collide2D
    • U2LA4.2: Mouse Clicks && Shapes as Buttons
    • 🗃️U2LA2 Mini Project: Light Switch Game
    • U2LA5.1: Key Presses && Nested Conditionals
    • 🎨Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • 🔮Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • 🗃️U3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • 🗃️U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • U3LA2.4: Updating and Deleting from Arrays
    • 🗃️🤓 U3LA2 Mini Project 2: CodeWars Array Challenges
    • U3LA3.1: Preload, Images, Tint
    • 🤓U3LA3.2: Images and Arrays with ml5
    • U3LA3.3: Fonts && Text Styling
    • 🗃️U3LA4 Mini Project 4: Typography
    • U3LA4.1: Loading & Playing Sound Files
    • 🎨Unit 3 Final Project: Patatap
  • Unit 4: Motion, Objects, Transformation
    • 🔮Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions && Make it Bounce
    • U4LA2.1: Introduction to Classes and Objects
    • U4LA2.2: Reading and Updating Object Properties
    • U4LA2.3: Methods Off Canvas
    • U4LA2.4: Objects on Canvas
    • 🗃️U4LA2 Mini Project: Build a Tamagotchi
    • U4LA3.1: Creating Many Objects
    • 🤓🗃 Optional U4LA3 Mini Project: Rebuild with Objects
    • U4LA4.1: Translation Battleship
    • U4LA4.2: Rotations
    • 🤓U4LA5.1: Sine && Oscillating Motion
    • 🤓U4LA5.2: Cosine && Circular Motion
    • 🎨Unit 4 Final Project: Animated Greeting Card || PSA
  • Unit 5: Final Project
    • 🔮Unit 5 Overview
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes && Overview
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Vocabulary
  • Planning Notes && Materials
  • Resources
  • Assessments
  • Do Now/Warm Up (2-3 minutes)
  • Discussion & Scavenger Hunt Instructions (~7- 10 minutes)
  • Data Type Scavenger Hunt (~10 - 15 minutes)
  • Wrap-Up (~5-10 minutes)
  • Extensions
  1. Unit 2: Respond and Draw on Canvas

U2LA3.1: Data Type Scavenger Hunt

What are the different types of data used in JavaScript?

Teacher Notes && Overview

NB: Students who come in with a programming background may already be familiar with different data types. In that instance, this lesson could be abbreviated, altered, or skipped.

Students have been working with data of different types all year, but they have not necessarily realized it and there has not be a solid, formal lesson on data types. This is their chance to discuss and explore the types of data being used and their purpose before they start engaging with and creating functions that will return data rather than simply performing actions on the canvas.

Objectives

Students will be able to:

  • List common datatypes used in JavaScript

  • Test and identify the types of different pieces of data

Suggested Duration

1 Period (~45 minutes)

NYS Standards

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

  • Data Types

    • String: characters enclosed in “ “, ‘ ‘, or ``.

    • Number: numeric values not enclosed in “ “, ‘ ‘, or . They can be further broken down into integers (positive values, negative values, and zero without decimal places) and floats (values with decimal places), but it is not necessary to make this distinction in JavaScript.

    • Boolean: a data type with only two value options often seen as “true” or “false”

    • Object: a standalone entity, with a type and the option to have many distinct properties. A good example is a sneaker - while it may always follow the same design, it can come in different colors, sizes, types of laces, etc. This would be one object with its own properties.

Planning Notes && Materials

Planning Notes
Materials

This lesson is largely driven by student exploration and it can feel as if it goes by quite quickly - however, while the actual task is brief, it is meant to lead into a discussion to deepen student understanding.

Students should be prepared to identify data types and start thinking about when data types are useful by the end of this lesson.

Scavenger Hunt Starter Code && Document (This can and perhaps should all be digital, but consider options if you think you need to print!)

Resources

Assessments

Formative:

  • Data Type Scavenger Hunt Worksheet

  • Exit Slip

Summative:

  • Light Switch Project (upcoming mini project)

  • Interactive Drawing Application (upcoming unit final)

Do Now/Warm Up (2-3 minutes)

Display on board: Why won’t this code work?

ellipse(“fifty”, 100, 25)

Discussion & Scavenger Hunt Instructions (~7- 10 minutes)

After allowing students time to think through the do now and write down their responses, ask for some shares - many students will recognize that “fifty” is what breaks the code, despite the fact that we understand “fifty” to be a number.

Use this to launch into a conversation about data types in computer science generally, and JavaScript specifically. Be sure to review the names and definitions of these data types (some of which students may remember):

  • Strings

  • Numbers (you can discuss floats and ints if students have a background in other languages, or will progress from this class to a class run in another language)

  • Booleans

  • Objects (object literals, but arrays are also a type of object!)

Explain that there are many other data types, but JavaScript is a lightly typed language, so it is pretty kind about moving between them. Make sure students understand that we are focusing on data types today because they are about to start focusing on functions that pass data rather than conduct an action like drawing a design, and it’s important that they understand the different types of data that they can pass.

Data Type Scavenger Hunt (~10 - 15 minutes)

Distribute and explain the data type scavenger hunt to students based on the worksheet instructions, and then let them begin working. The goal is for them to plug different pieces of data into the code which then tell them the type of data the computer sees it as.

Be sure to circulate, as some students may need assistance to make sure they are removing/adding quotation marks when necessary and recording data types AND the actual data that gets printed in the correct locations.

This activity can be completed individually, in pairs, or in small groups. Best suggestion is to ask students to each complete their own activity, but compare answers within a small group.

Wrap-Up (~5-10 minutes)

Once students have completed their scavenger hunts, gather them to review answers - if not to all the data, to some of the trickier ones. Ask students to explain where possible and fill in any gaps or misconceptions they may have.

Ask:

  • What are things you noticed when doing this activity?

  • Did any of the answers surprise or confuse you?

  • What happened when you tested the data type of variables?

Make sure students understand that EVERY piece of data in their code has a type, and variables simply hold onto a piece of data and take the type of that piece.

You may choose to give a prolonged exit slip where students try to determine data types without computers. Consider leveling the data so you ask questions as follows:

  • What is the data type of “Rebecca”? (MILD)

  • What is the data type of 4519000? (MILD)

  • What is the data type of “Cat” != “Dog”? (MEDIUM)

  • What is the data type of [“cs”, “is”, “the”, “best”]? (MEDIUM)

  • What is the data type of the variable mouseIsPressed? (SPICY)

For any and all, feel free to ask students for an explanation of how they know. You can choose to have students answer all questions or a mix depending on in-class performance.

Extensions

Ask students to dig more deeply into data. Challenge them to try to create their own pieces of data, predict the type, and then see what comes up.

You may also want students to start understanding that the data type of object represents a whole set - such as an entire array - while each item in that set, or array, still maintains its own type. Consider asking them to save an array (or even an object!) to a variable and try to call individual items to see what comes up.

PreviousU2LA2.2: The Map FunctionNextU2LA3.2: Functions that Return Values

Last updated 2 years ago

(Google Doc)

Scavenger Hunt Starter Code ( | )

(Youtube Video)

✨
Scavenger Hunt Worksheet
p5.js editor
repl.it
Data Types in JavaScript