[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit 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
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • 🔮Unit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • 🗃️🗃U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • 🗃️🗃U1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • 🎨🎨 Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • 🔮Unit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • 🗃️🗃U2LA1 Mini Project: Make a Traffic Light 🚦
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • 🗃️🗃U2LA2 Mini Project: Light Switch Game
    • U2LA3.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 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • 🗃️🗃U3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • 🗃️🗃U3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • 🗃️🗃U3LA5 Mini Project: Keyboard/Patatap
  • 🎨🎨Unit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • 🔮🔮 Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • 🗃️🗃 U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • 🎨🎨 Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • 🔮🔮 Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • 🗃️🗃 U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • 🗃️🗃 U5LA2 Mini Project: Build Your Own Challenge
    • 🔮🔮 Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • Overview & Teacher Feedback
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Blueprint Foundations Student Outcomes
  • Vocabulary
  • Planning Notes
  • 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
  • Extensions

Was this helpful?

  1. Unit 5: Functions & Abstraction

U5LA2.1: Data Type Scavenger Hunt

What are the different types of data used in JavaScript?

Overview & Teacher Feedback

While students have been working with data types throughout the whole unit (and have probably intuited when to use quotation marks and when they are not needed), there has been no solid, formal lesson that explores data types. This is there 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.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

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.

Blueprint Foundations Student Outcomes

Data, Data Abstraction & Storage: Data is represented in computers as binary, but humans save and use data on computers as lists, databases, key-value pairs, etc.

Programming, Syntax: All programming languages have a set of commands or reserved words and grammar rules that must be followed.

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

Planning Notes
Materials Needed

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 all be digital, but consider options if you think you need to print!)

Resources

Assessments

  • Data Type Scavenger Hunt Worksheet (formative)

  • Exit Slip (formative)

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. 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

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.

Previous🗃 U5LA1 Mini Project: Custom Function LibraryNextU5LA2.2: Functions that Return Values

Last updated 2 years ago

Was this helpful?

(Google Doc)

Scavenger Hunt Starter Code ( | )

(Youtube Video)

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