Lesson Planet
Search educational resources
  • Sign In Try It Free
  • AI Teacher Tools
    • Discover Resources Search reviewed educational resources by keyword, subject, grade, type, and more
    • Curriculum Manager (My Content) Manage saved and uploaded resources and folders To Access the Curriculum Manager Sign In or Join Now
    • Browse Resource Directory Browse educational resources by subject and topic
    • Curriculum Calendar Explore curriculum resources by date
    • Lesson Planning Articles Timely and inspiring teaching ideas that you can apply in your classroom
    • Our Story
    • Frequently Asked Questions
    • Testimonials
    • Contact Us
  • Pricing
  • School Access
    • Your school or district can sign up for Lesson Planet — with no cost to teachers
      Learn More
  • Sign In
  • Try It Free

Hi, what do you want to do?

Create a lesson plan
Create a lesson plan
Generate resources with 80+ AI teacher tools
Generate resources with 80+ AI teacher tools
Search 200,000 instructional videos
Search 200,000 instructional videos
Find a teaching resource
Find a teaching resource
Mouse Interaction, Computer Programming Instructional VideoMouse Interaction, Computer Programming Instructional Video
Publisher
Khan Academy
Resource Details
Curator Rating
Educator Rating
Not yet Rated
Grade
6th - Higher Ed
Subjects
STEM
1 more...
Resource Type
Instructional Videos
Media Length
3:00
Audiences
For Teacher Use
1 more...
Duration
10 mins
Instructional Strategies
Flipped Classroom
1 more...
Accessibility
Closed Captions
1 more...
Year
2014
Usage Permissions
Creative Commons
BY-NC-SA: 3.0
cc
Instructional Video

Mouse Interaction, Computer Programming

Curated and Reviewed by Lesson Planet
This Mouse Interaction, Computer Programming instructional video also includes:
  • JavaScript Guide
  • Mouse Interaction, Computer Programming (HTML version from khanacademy.org)
  • Join to access all included materials

Drawing objects based on where the user's mouse is located can be a beneficial and fun coding activity for new JavaScript coders. Here, the speaker shows how to use the mouseY and mouseX variables in a small section of code that draws a circle based on the mouse's location. You and your students will be amazed at how easy it is to get exciting results.

3 Views 1 Download

Concepts

javascript, computer code, Computer Programming, coding, computer drawing, animation, technology resources

Additional Tags

programming in javascript, drawing and animation coding

Classroom Considerations

  • This video is hosted on YouTube

Pros

  • Simple introduction to using information about the mouse's location to draw an object
  • Clear explanation 

Cons

  • At the time of this review, the video has a bug and stops working about halfway through. The speaker's voice is clear, but the coding demonstration doesn't continue. This might be an excellent opportunity for your class to work out precisely what the speaker intended to show on their own. 

See similar resources:

Instructional Video

Object Methods, Intro to JS: Drawing & Animation, Computer Programming

Khan Academy
This video shows young programmers how to use the same concept to duplicate objects with different properties and attach functions to them. This method allows functions to be easily called with various objects.
5 mins 6th - Higher Ed STEM
Instructional Video

Arrays of Objects, Intro to JS: Drawing & Animation, Computer Programming

Khan Academy
Expand your beginning coder's use of objects in programs by looking at examples where you can change code to define and use objects in arrays and pass objects as parameters to a function. All of this leads to a deeper understanding of...
6 mins 6th - Higher Ed STEM
Instructional Video

What is Programming?, Intro to JS: Drawing and Animation, Computer Programming

Khan Academy
It's time to unleash your class's inner geek. This introductory video starts one on a path of learning to code. It is the first in a series of videos that help you learn the fundamentals of coding. The series focuses on producing art and...
2 mins 5th - Higher Ed STEM
Instructional Video

Object Inheritance, Intro to JS: Drawing & Animation, Computer Programming

Khan Academy
There is an easier way to share functions among objects. The fifth section of a six-part series on object-oriented design introduces the concept of object inheritance. The coding helps pupils create a base object type that has all the...
7 mins 6th - Higher Ed STEM
Instructional Video

Logical Operators, Computer Programming

Khan Academy
As the author in this video states, "Life is complex." To handle this complexity, programming languages use something called Boolean operators. In a simple JavaScript code example, this video shows how to set up a conditional statement...
5 mins 6th - Higher Ed STEM
Instructional Video

The Power of the Docs, Intro to JS: Drawing and Animation, Computer Programming

Khan Academy
While learning to code is an interesting academic pursuit in its own right, it also has other learning benefits. For one, coders learn how to learn. They continually explore, test, and draw conclusions about how certain things work. The...
6 mins 5th - Higher Ed STEM
Instructional Video

How Exactly Does Binary Code Work?

TED-Ed
As far as languages go, binary is pretty easy to learn. Scholars watch an informative video on binary code. It explains the basics of how binary code works, and then shows how people encode colors and sound as binary code.
5 mins 9th - 12th STEM
Instructional Video

Intro to Drawing

Khan Academy
Leap right into programming in JavaScript with this first video in the series. Start off with drawing a rectangle. Remember computers only know what you tell them. So you need to specify exactly where on the screen you want the...
6 mins 5th - Higher Ed STEM
Instructional Video

More Drawing!

Khan Academy
Now let's expand our coding to include ellipses, rectangles, and lines using this easy-to-follow video. We are also adding some formality to the language we use by defining the following terms: function, parameters, pixels, and the x and...
5 mins 5th - Higher Ed STEM
Interactive

Challenge: Ice Cream Code

Khan Academy
Practice adding color to your simple JavaScript picture. Three layers of ice cream in a bowl with a cherry on top, gives your beginning coders a tasty challenge. 
6th - Higher Ed STEM
Try It Free
© 1999-2026 Learning Explorer, Inc.
Teacher Lesson Plans, Worksheets and Resources

Sign up for the Lesson Planet Monthly Newsletter

Open Educational Resources (OER)

  • Health
  • Language Arts
  • Languages
  • Math
  • Physical Education
  • Science
  • Social Studies
  • Special Education
  • Visual and Performing Arts
View All Lesson Plans

Discover Resources

  • Our Review Process
  • How it Works
  • How to Search
  • Create a Collection

Manage Curriculum

  • Edit a Collection
  • Assign to Students
  • Manage My Content
Contact Us Site Map Privacy Policy Terms of Use