Please enable JavaScript to use CodeHS

Teaching Intro Computer Science in JavaScript

Description

In this lesson, students will learn how to print messages out onto the console using the Javascript command println.

Objective

Students will be able to:

  • Write a JavaScript program by typing commands with proper syntax in the start function
  • Write a program that prints out a message to the user
Description

In this lesson, students learn how to assign values to variables, manipulate those variable values, and use them in program statements. This is the introductory lesson into how data can be stored in variables.

Objective

Students will be able to…

  • Explain what variables are and what they are used for
  • Create their own variables
  • Print out the values stored in variables
Description

In this lesson, students learn how they can allow users to input information into their programs, and use that input accordingly.

Objective

Students will be able to…

  • Create programs that ask the user for input
  • Store user input in variables and print it back to the user
  • Choose the proper input function to use depending on the type of information needed
Description

In this lesson, students learn about the different mathematical operators they can use to perform mathematical computations and create useful programs that compute information for the user.

Objective

Students will be able to…

  • Describe the different mathematical operators we can use in programs
  • Create programs that use basic math to compute useful things
  • Create programs that take in user input, do simple computations with the input, and produce useful output
Description

In this lesson, students will learn the basics of creating graphics objects. Graphic creation relies on setting the type, shape, size, position, and color on the artist?s canvas before adding to the screen. Using the geometric concepts, and the concept of getWidth() and getHeight(), multiple graphic objects can be created in JavaScript.

Objective

Students will be able to…

  • Create graphical JavaScript programs that draw shapes on the canvas
  • Locate points on the graphics canvas using (x, y) coordinates
Description

In this lesson, students will learn more about boolean values. Booleans refer to a value that is either true or false, and are used to test whether a specific condition is true or false.

Objective

Students will be able to…

  • Create boolean variables to represent meaningful yes/no values
  • Print out the value of a boolean variable
Description

In this lesson, students will learn about logical operators. Logical operators allow students to connect or modify Boolean expressions. Three logical operators are the !, ||, && characters.

  • ! = NOT
  • || = OR
  • && = AND
Objective

Students will be able to…

  • Describe the meaning and usage of each logical operator: OR (||), AND (&&), and NOT (!)
  • Construct logical statements using boolean variables and logical operators
Description

In this lesson, students learn how to use comparison operators. Comparison operators let students compare two values.

Objective

Students will be able to…

  • Explain the meaning of each of the comparison operators (<, <=, >, >=, ==, !=)
  • Create programs using the comparison operators to compare values
  • Predict the boolean result of comparing two values
  • Print out the boolean result of comparing values
Description

In this lesson, students learn about if statements as a way to make decisions and execute specific code depending on the validity of a condition.

Objective

Students will be able to…

  • Explain the purpose of if statements
  • Create their own if statements to selective choose which code is executed in their programs
Description

In this lesson, students will learn in greater detail about for loops. For loops in Javascript are written and executed in the same manner as Karel exercises, except now students will explore modifying the initialization statement, test statement, and increment statements of the loops.

Objective

Students will be able to…

  • Create for loops in JavaScript
  • Explain the purpose of for loops
  • Utilize for loops to avoid typing out repeated code
  • Use the loop counter i inside the for loop code to do something different on each iteration
Description

In this lesson, students will explore while loops and JavaScript variables. This combines the ideas of creating variables, updating variables throughout a loop, and determining the correct ending condition.

Objective

Students will be able to…

  • Explain the purpose of a while loop
  • Create while loops to repeat code while a condition is true
  • Utilize while loops to solve new types of problems
Description

In this lesson, students learn about functions and parameters in the context of JavaScript, which builds on their prior knowledge of working with functions in Karel. This lesson focuses specifically on defining and calling functions, and passing simple, single parameters to functions.

Objective

Students will be able to…

  • Explain the purpose of functions
  • Create JavaScript functions
  • Utilize JavaScript functions to solve simple problems
  • Create functions that take in parameters as input
Description

In this lesson, students learn about return values so they can write functions that do some work and send the result back or use later in the program.

Objective

Students will be able to:

  • Explain the purpose of returning a value from a function.
  • Create functions that return values.
  • Create programs that call functions with return values and store the result for later use.
Description

In this lesson, students will explore the scoping of a variable, which is where the variable is ?defined? or where it exists.

Objective

Students will be able to:

  • Identify the scope of a variable
  • Identify which variables are in scope at a given point in a program
Description

In this lesson, students will be introduced to the concept of using timers for animation. Now instead of having graphics programs that stay the same, the content changes every time the timer runs. The first program students will see is a moving ball, so discussing this with the class as a demo on the projector is very useful.

Objective

Students will be able to:

  • Explain in their own words how animation works
  • Create animation in programs using the setTimer function
  • Explain what a callback function is
Description

In this lesson, we’ll look at more examples with timers and start making more interesting animations. Students will use timers and the Randomizer to create animations on the canvas.

Objective

Students will be able to:

  • Create programs with timers to create increasingly challenging animations
  • Analyze existing programs and explain how they create animations
  • Utilize the Randomizer to generate random events in their animations
Description

In this lesson, students are introduced to a way input can be taken from the user’s mouse using the mouse clicked method.

Objective

Students will be able to:

  • Describe how events are different than timers
  • Use mouse click events to create programs that respond to user clicks
Description

In this lesson, students learn how to extend mouse events to make interactive animations using the dragging motion of the mouse.

Objective

Students will be able to:

  • Explain how events are different from timers.
  • Create interactive programs that use events to respond to the mouse moving
Description

In this lesson, students will learn how to use keyboard keys to control events. Keyboard events capture when the user presses keys on the keyboard. This allows students to write programs that take input from the keyboard to change what is happening in the program.

Objective

Students will be able to:

  • Explain how events are different from timers.
  • Create interactive programs that use events to respond to the keyboard input.