How did you choose which examples to use?

They're not randomly chosen. They're all programs with buttons. In fact they're all programs with buttons that look like buttons, with nice little borders and text in the middle.

How do i learn how to do this? what sections do i have to do ?

Hi there! You start with the Intro to JS (JavaScript) lessons at https://www.khanacademy.org/computing/computer-programming/programming Have fun!

What is button-y? I'm not sure that means. Thanks

Perhaps it should have been spelled "buttonie"? It was their attempt to adjective-fy a noun.

How could I hide the mouse cursor so that I could make it look how I wanted?

to change the cursor, you can add an image, however big you want it, and change the x and y parameters to mouseX and mouseY. this way, the image will follow it and it will look like you have a whole new mouse! `image(...,mouseX,mouseY)` have fun! :)

How do i make the buttons work in Pokemon

you can type ```if(mouseIsClicked&mouseX > __&mouseX<_&mouseY > __&mouseY<_) { } ``` if you don't know inequalities then I suggest you learn or you won't make it far in computer coding this means if the mouse is in this square and clicks the do whatever is in the curly brackets

How can I make my own program?

Start here: https://www.khanacademy.org/computer-programming/new/pjs

Main content

Computer programming - JavaScript and the web

Course: Computer programming - JavaScript and the web > Unit 4

Lesson 3: Buttons

What are buttons?

Q: How can I make my own program?

Start here: https://www.khanacademy.org/computer-programming/new/pjs

Google Classroom

Buttons. Buttons, buttons, buttons! Besides being the shape of my nose, a button is an area that you click to make something happen. Look around this webpage, how many button-y things do you see? Look around wherever you're sitting, how many button-y things surround you?

There are buttons everywhere, and you'll often want some sort of button in the programs that you make here. Check out these example programs to see how they use buttons:

There are some programming environments that provide buttons and other user interface elements out of the box, like HTML provides for webpages, but ProcessingJS is not one of those. Instead, ProcessingJS gives us building blocks:

commands to draw shapes and text
ways to listen to events
ways to detect the mouse location of them.

We can put those building blocks together to make buttons, and in doing so, we'll learn more about programming. We'll start with the simplest button possible, then make our code more re-usable with functions, and finally organize it even more with object-oriented principles.

Onward, to the button-mobile!

Want to join the conversation?

Sort by:

JMonster
Posted 9 years ago. Direct link to JMonster's post “How did you choose which ...”
How did you choose which examples to use?
Button navigates to signup pageComment on JMonster's post “How did you choose which ...”
(51 votes)
Answer
- Wrath Of Academy
  Posted 9 years ago. Direct link to Wrath Of Academy's post “They're not randomly chos...”
  They're not randomly chosen. They're all programs with buttons. In fact they're all programs with buttons that look like buttons, with nice little borders and text in the middle.
  Comment on Wrath Of Academy's post “They're not randomly chos...”
  (89 votes)
Michael Rizk
Posted 7 years ago. Direct link to Michael Rizk's post “How do i learn how to do ...”
How do i learn how to do this? what sections do i have to do ?
Button navigates to signup pageComment on Michael Rizk's post “How do i learn how to do ...”
(8 votes)
Answer
- Dalendrion
  Posted 7 years ago. Direct link to Dalendrion's post “Hi there! You start with ...”
  Hi there!
  You start with the Intro to JS (JavaScript) lessons at https://www.khanacademy.org/computing/computer-programming/programming
  Have fun!
  Button navigates to signup page
  (21 votes)
User 372
Posted 4 years ago. Direct link to User 372's post “What is button-y? I'm not...”
What is button-y? I'm not sure that means. Thanks
Button navigates to signup pageComment on User 372's post “What is button-y? I'm not...”
(6 votes)
Answer
- Bob Lyon
  Posted 4 years ago. Direct link to Bob Lyon's post “Perhaps it should have be...”
  Perhaps it should have been spelled "buttonie"? It was their attempt to adjective-fy a noun.
  Comment on Bob Lyon's post “Perhaps it should have be...”
  (19 votes)
James P. Sullivan
Posted 8 years ago. Direct link to James P. Sullivan's post “How could I hide the mous...”
How could I hide the mouse cursor so that I could make it look how I wanted?
Button navigates to signup pageComment on James P. Sullivan's post “How could I hide the mous...”
(6 votes)
Answer
- Maya C
  Posted 4 years ago. Direct link to Maya C's post “to change the cursor, you...”
  to change the cursor, you can add an image, however big you want it, and change the x and y parameters to mouseX and mouseY. this way, the image will follow it and it will look like you have a whole new mouse!
  image(...,mouseX,mouseY)
  have fun! :)
  Button navigates to signup page
  (6 votes)
kpendleton
Posted 5 years ago. Direct link to kpendleton's post “How do i make the buttons...”
How do i make the buttons work in Pokemon
Button navigates to signup pageComment on kpendleton's post “How do i make the buttons...”
(5 votes)
Answer
- auxilarium
  Posted 5 years ago. Direct link to auxilarium's post “you can type ```if(mous...”
  you can type
  
  if(mouseIsClicked&mouseX > _&mouseX<&mouseY > _&mouseY<) { }
  
  if you don't know inequalities then I suggest you learn or you won't make it far in computer coding this means if the mouse is in this square and clicks the do whatever is in the curly brackets
  Button navigates to signup page
  (3 votes)
9s.soliver
Posted 5 years ago. Direct link to 9s.soliver's post “Questions I have are, Wha...”
Questions I have are, What coding enviorment allows game controllers like a xbox controller to work? How does this explain you typing keyboard buttons? and finally What does this mean for consoles?
Button navigates to signup pageComment on 9s.soliver's post “Questions I have are, Wha...”
(5 votes)
Answer
gabrielhensley1805
Posted 4 years ago. Direct link to gabrielhensley1805's post “How can I make my own pro...”
How can I make my own program?
Button navigates to signup pageButton navigates to signup page
(3 votes)
Answer
- Bob Lyon
  Posted 4 years ago. Direct link to Bob Lyon's post “Start here: https://www.k...”
  Start here: https://www.khanacademy.org/computer-programming/new/pjs
  Button navigates to signup page
  (3 votes)
mishkl0838
Posted 5 years ago. Direct link to mishkl0838's post “If you are having trouble...”
If you are having trouble with the buttons here is a tip,
look in the bottom left corner of the program.
You see the users name?
click it and it would probably work.
Button navigates to signup pageComment on mishkl0838's post “If you are having trouble...”
(4 votes)
Answer
xinli
Posted 6 years ago. Direct link to xinli's post “Why don't the buttons wor...”
Why don't the buttons work for me?
Button navigates to signup pageComment on xinli's post “Why don't the buttons wor...”
(2 votes)
Answer
- N S
  Posted 2 years ago. Direct link to N S's post “Click on the link below t...”
  Click on the link below the picture. It will take you to the actual program.
  Button navigates to signup page
  (1 vote)
The πNosaur Guy
Posted 8 months ago. Direct link to The πNosaur Guy's post “how do you make something...”
how do you make something move with the arrow keys
Button navigates to signup pageComment on The πNosaur Guy's post “how do you make something...”
(2 votes)
Answer
- CodeKing Studios
  Posted 7 months ago. Direct link to CodeKing Studios's post “Use the KeyCode function!...”
  Use the KeyCode function! :)
  Comment on CodeKing Studios's post “Use the KeyCode function!...”
  (4 votes)