By the end of today, you will be able to:
Imagine we have a function that will check to see if a triple of numbers are a Pythagorean triple, namely that:
a2+b2=c2
Here's the definition of the function:
(Can you think of a more succinct definition?)
Here are some invocations of the function:
isPythTriple(1,2,3); isPythTriple(3,4,5); isPythTriple(5,3,4); isPythTriple(5,11,12); isPythTriple(5,12,13); x = 3; y = 4; z = 5; isPythTriple(x,y,z); isPythTriple(z,x,y);
Open up your JS console and try some!
Questions:
return
do?
The isPythTriple
function, above, has no side-effects. It
doesn't pop up any alerts and it doesn't prompt for input. It doesn't
modify the page. How can it do anything useful?
Actually, functions like that can be very useful, because they aren't
tied to a particular problem. Maybe the argument values come from a form
that the user fills out. Maybe they come from
using prompt
. Maybe they are numbers that are randomly
generated, searching for more triples. It doesn't matter; this function
will still accept them and report whether they meet the criteria.
The use of that return value is similarly undetermined. It might be reported to the user, it might be used to control a loop (stop looping when you find a triple), or it might be to grade an exam (did the user enter a correct triple?). Again, it doesn't matter. This function just does its job and doesn't worry about the larger context.
We will often do this. In fact, we did on the homework.
Let's look at the following:
We learned about forms and event handlers.
form
tag is a wrapper for a set of inputs
or controls.
input
tag. There are some fancy
new ones (with types like email
or phone
), but
the old-fashioned type=text
is universally supported.
textarea
,
with attributes of rows
and cols
.
select
tag, with each menu item
using the option
tag.
button
tag, and its near
twin, input type="button"
submit
buttons submit the form. For now, we'll
use type=button
, for a button that is just a
button. That's the one we'll attach an event handler to.
this
is bound to the target of the event (for
example, the element that was clicked on).
We also learned about jQuery's .val()
method, which
retrieves the value of a form control.
In the events reading, we saw this example of a form to convert pounds to kilos:
Here's the code:
Notice that we defined two separate functions. One is a generally useful function to convert pounds to kilograms; we could imagine using it in lots of problem-solving. The second is a very specific function to pull some data out of a particular form and insert an answer into a place on the page. It would be hard to imagine re-using this function elsewhere. However, it makes an excellent event-handler.
This pattern is very common. It's good practice to write code that is generally useful and could be re-used in other contexts and for other purposes. We can't do that if the code is intermingled with stuff that is very tied to a particular situation. So, we separate the problem-specific stuff from the general stuff.
We're going to build the following form: colorslider (instructor only).
No, I'm not going to show you the source code. ☺
Which of the following creates a slider from 0 to 100, with the initial value of 50?
<input type="range" min=0 max=100 value=50>
<input type="slider" start=0 finish=100 value=50>
<input type="range" start=0 finish=100 value=50>
<input type="slider" min=0 max=100 value=50>
Build the page and form above. You can start with the following jsfiddle.
type="button"
, that we'll later use to
set the color.
Your solution might look like this: v1. Some notes on the solution:
<form>
tag as a wrapperfor the whole form.
<p>
tag.
<span>
element as a place to put
the values we report. They can initially be empty.
<label>
elements are not required
for the form to work. They're there to improve accessibility
<button>
tag creates the set colorbutton. Currently it does nothing.
Which of the following replaces the contents of a div whose ID
is quest
with the text "to seek the grail"?
$(quest).html("to seek the grail");
$("#quest").innerHTML("to seek the grail");
$(".quest").html("to seek the grail");
$("#quest").html("to seek the grail");
Which of the following implements a button that says "Some call me ... Tim!" when clicked on?
Here's a demo:
<button type="button" id="tim_button">what is your name?</button> function iamTim() { alert("Some call me ... Tim!"); } $("#tim_button").onclick(iamTim);
<button type="button" id="tim_button">what is your name?</button> function iamTim { alert("Some call me ... Tim!"); } $("#tim_button").click(iamTim);
<button type="button" id="tim_button">what is your name?</button> function iamTim() { alert("Some call me ... Tim!"); } $("#tim_button").click(iamTim);
<button type="button" id="tim_button">what is your name?</button> function iamTim() { alert("Some call me ... Tim!"); } $("#tim_button").click(iamTim());
Observations:
Discussion:
Which of the following functions would copy the value of the red slider
(ID is Rslider
) to the span whose ID
is redVal
?
function showRed() { var rVal = $("#Rslider").val(); $("#redVal").html = rVal; }
function showRed() { var rVal = $("#Rslider").value(); $("#redVal").html(rVal); }
function showRed() { var rVal = $("#Rslider").val(); $("#redVal").html(rVal); }
function showRed() { var rVal = $("#redVal").val(); $("#Rslider").html(rVal); }
showRed
above that looks up
the value of the red slider and inserts it into the appropriate
span.
onChange
event on the slider, using
jQuery's change
method:
$(selector).change(func);
Your solution might work like this: v2a
The activities on functions, last week, included the development of
a hexByte
function. Here's a different implementation,
using the fact that numbers have a .toString()
method that
takes as its argument the number base to convert to.
Open the JS console and try some of the following:
var a = 7; a.toString(16); var b = 11; b.toString(16); var c = 17; c.toString(16); var d = 255; d.toString(16);
Here's the definition of a hexByte
function that does that
and a little bit more, returning a 2-digit string in hexadecimal. It
also ensured that the value is a number by
using parseInt()
.
Open the JS console and try some of these:
hexByte(2); hexByte(55); hexByte(255);
Define a function named hexColor
that takes three
parameters, one for each color primary, and returns a color
specification using the hexadecimal notation, like #3399FF
.
Don't forget to glue on the leading hash mark. The return value will be
a string. Feel free to use the hexByte
function if that's
useful. (Hint: it is.)
// function definition here // sample output: alert( hexColor(51, 128, 255) ); // should be #3380ff alert( hexColor(0, 9, 192) ); // should be #0009C0
Your solution might look like this:
function hexColor(red,green,blue) { return "#"+hexByte(red)+hexByte(green)+hexByte(blue); } // sample output: alert( hexColor(51, 128, 255) ); // should be #3380ff alert( hexColor(0, 9, 192) ); // should be #0009C0
Thank goodness for functions! Think of what a mess that code would be
if we didn't have the hexByte
function! That function makes
the code for hexColor
clear, concise and correct.
Do the following, testing after each step.
Or, use this jsFiddle #3
setColor
that looks up
the numeric value of each slider (hint,
use parseInt
on the value).
hexColor
to convert it to
a color string.
background-color
CSS property of
the #box
.
click
event on the set colorbutton, using the jQuery
$(...).click(func)
method.
Your solution might work like this: v5d or this: jsFiddle #4
We hope that after these activities you have a good understanding of:
Will be posted later, visit again after .
Quiz questions:
1. A 2. D 3. C 4. C