Main content
Computer programming
Course: Computer programming > Unit 4
Lesson 3: ButtonsWhat are buttons?
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?
How did you choose which examples to use?(50 votes)
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.(83 votes)
How do i learn how to do this? what sections do i have to do ?(8 votes)
Hi there!
You start with the Intro to JS (JavaScript) lessons at https://www.khanacademy.org/computing/computer-programming/programming
Have fun!(17 votes)
What is button-y? I'm not sure that means. Thanks(5 votes)
Perhaps it should have been spelled "buttonie"? It was their attempt to adjective-fy a noun.(16 votes)
How could I hide the mouse cursor so that I could make it look how I wanted?(6 votes)
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! :)(6 votes)
- How do i make the buttons work in Pokemon(5 votes)
you can typeif(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(3 votes)
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?(5 votes)
How can I make my own program?(3 votes)
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.(4 votes)
Why don't the buttons work for me?(2 votes)
Click on the link below the picture. It will take you to the actual program.(1 vote)
i want to play a game how do i play a game(1 vote)
You can head to the project list and find many! Here is the link to said place: https://www.khanacademy.org/computing/computer-programming/browse
You may want to also sort by 'Votes' and you will find some of the most played and popular games on KA!(5 votes)