CSCI-396 Jeff Bush
1
HTML has several controls that we can use to get input from the user:
▪ Buttons
▪ Checkboxes
▪ Radio buttons
▪ Drop-down menus ▪ Sliders
▪ Text input
▪ And many more…
2
Add them to the HTML document
Make sure they have an id attribute so they
can be found within the JS code
Recommended to place them in a
so they show by themselves and not squished with other controls
3
The input tag is used for several controls:
Where type is one of: ▪ button
▪ checkbox
▪ number/range
▪ text
▪ and others…
4
More advanced buttons can be created use the
Does not come with any text, you have to add it yourself
Can add the attribute checked to make it checked by default
6
Only allows certain numbers to be typed in and provides up and down arrows to jump between values
Supports the additional attributes:
▪ step – the step between allowed values
▪ size – proportional to the displayed width
7
A slide bar for choosing numbers but does not display the text for the value
Supports the additional attributes:
▪ step – the step between allowed values
▪ size – proportional to the displayed width
8
A textbox that the user can enter any one line of text into
Supports the additional attributes:
▪ value – the initial value
▪ size – proportional to the displayed width
9
Slightly harder than the basic ones, but not much:
The initially selected option can be chosen by
putting the selected attribute on one of the option tags
10
Now that we have added these controls to the HTML page, how do we utilize them?
In the JS code we can do:
let ctrl = document.getElementById(“…”);
Then we have the HTML control element in a variable
Get the current value of a control:
▪ Example: let x = mySlider.value;
▪ Note: for checkboxes and radios use the checked Boolean attribute instead
Can also set the control’s current value: mySlider.value = 200;
11
HTML controls support the change event which fires every time the value changes because of user interaction (i.e. not due to the program changing the value)
▪ The event doesn’t fire until after the user is done (e.g. still typing or still moving the slider)
Example: mySldr.addEventListener(“change”,
sliderUpdated); In the function you can than use this to refer to
the element which fired the event
12
Buttons don’t really have a value that changes based on the user
What event would we want to use instead for a button?
13
Buttons don’t really have a value that changes based on the user
Instead we listen for the click event on a button
14
TODO: Modify circle-resize by adding a slider or number input that controls the radius of the circle
Still support clicking to change the size
▪ If the user click to change the size, the value of the
slider/number input updates to the new radius
Challenge: add a checkbox that makes the slider/number input be the diameter instead of the radius
15
We can also get input directly from the user: ▪ keyboard
▪ mouse
▪ touchscreen
▪ etc
We can obtain the information with:
▪ Request/polling ▪ Event
16
Request (Polling):
▪ We get the current value right when we need it
▪ We don’t care if since the last time we checked it changed but we always get the current value
Event:
▪ Notified of each change
▪ Can track every single change and only update when a change occurs
▪ Might be slightly delayed if there are a lot of events at the same time
17
When we register event listeners we register them on a specific HTML element
Usually it makes sense
▪ We want to know when that button is clicked or
that slider changes value
Sometimes more ambiguous
▪ Do I only care if a keyboard key was pressed when the canvas was focused or could anything in the whole document be focused?
18
Window: load, resize, focus, blur
Input: change, input
Mouse: click, down, up, move, wheel, enter, leave Keyboard: down, press, up
Underlined: we have already seen and used Italics: we are about to see and will use often Others may come up or are used in the book
19
Fired when window resizes, can grow/shrink
Apply resizing upon loading the document
▪ Just need to call the event handler at the in load, no longer need to:
▪ Callrenderinload ▪ Set viewport in load
If you want the canvas remain a square:
let sz = Math.min(window.innerWidth,
window.innerHeight);
To touch the edges add this to the