Experimental forum for "Technology" discussions (computers, cameras, etc).

Re: Learn to Program: JavaScript

Postby Bob Kuczewski » Sat Sep 07, 2024 10:59 pm

Buttons

So far, most of our programs have had no user interaction. There have been a few examples of buttons (to show the time or roll the dice), but they were not explained to any depth. This post explains the basics of using buttons in Javascript.

This was our first example program using buttons:

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>


Let's review that program first.

As with most of our HTML programs, this one starts with a "DOCTYPE html" statement that lets the world know that it's supposed to be an HTML document. That's followed by an <html> tag at the top and a matching </html> tag at the bottom. Inside the <html> tags is a pair of matching <body> and </body> tags. These generally define what will be shown in the browser window itself. Below the opening <html> tag is a level 2 heading (<h2> and </h2>). This shows up as large bold text near the top of the page.

There are only 2 more HTML tags left to be discussed, the button tag ("<button ...>") and the paragraph tag ("<p ...>"). It turns out that these two tags work together in this example because the button uses the paragraph as a place to show the date and time. Let's see how this works.

Let's start with the paragraph tag. Here it is:

<p id="demo"></p>


What's most odd here is that a normal paragraph tag will have text inside of it. For example, a typical paragraph might look like this:

<p>Four score and seven years ago ...</p>


The paragraph text is sandwiched between the <p> tag and the </p> tag. With no text between those tags, this paragraph is empty and shows nothing (other than taking up some space). What purpose would that serve?

The answer is in the second odd thing. This paragraph tag has an "id" inside of it (id="demo"). The "id" name ("demo" in this case) lets Javascript get ahold of this paragraph and modify it. So while it may start off as being empty, Javascript can change that by putting things into this particular paragraph. And that's exactly what happens through the button tag.

Here's the button tag with some color coding and indentation:

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.
</button>


The black text between the start and end tags ("Click me to display Date and Time.") is the text that is shown of the face of the button. The blue parts represent the basic tag pair itself (<button...> and </button>). But this button also has two parameters with names of "type" and "onclick". The "type" parameter is a bit redundant and not of interest here. But the "onclick" parameter is the key to understanding how a button works.

When a button is clicked, the web browser will perform whatever Javascript is contained in the "onclick" parameter. In this case, a button click will perform the following Javascript code:

document.getElementById('demo').innerHTML = Date()


This can be roughly translated as "get the element with an ID of "demo" and set its innerHTML to the current date (including current time)". Well, which element has an ID of "demo"? That would be the empty paragraph that we mentioned earlier. So clicking the button will put the current date and time into the otherwise empty paragraph. And clicking again will replace the previous date (and time) with the current value. That's the heart of this little program.

Now that we know the basics of using buttons, let's create a new program with buttons to select the background color ("body" color) of the page. Here's what it will look like with "Pink" selected:

bg_buttons.png
bg_buttons.png (5.69 KiB) Viewed 80 times


To keep things simple (and easier to type), we'll initially use the three primary colors and white. We'll also omit the redundant "button" parameter (but be prepared to add it if your browser complains). We'll start by defining the buttons without connecting them to any logic:

<!DOCTYPE html>
<html>
<body>
<button> Red </button>
<button> Green </button>
<button> Blue </button>
<button> White </button>
</body>
</html>


If you run that program, it will show all four buttons, but clicking them won't do anything. So next we'll add the logic to find the "body" tag and set the background color according to the label on each button. We could define an ID for the body (as we did earlier), but we can also look up the body element by its tag name of "body" (since there should only be one "body" in the HTML document). Here's the updated program:

<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementsByTagName('body')[0].bgColor = 'red'"> Red </button>
<button onclick="document.getElementsByTagName('body')[0].bgColor = 'green'"> Green </button>
<button onclick="document.getElementsByTagName('body')[0].bgColor = 'blue'"> Blue </button>
<button onclick="document.getElementsByTagName('body')[0].bgColor = 'white'"> White </button>
</body>
</html>


We can skip the details of the "getElementsByTagName function for now, and it turns out that this version works very well. But there is quite a bit of duplicated code for each button. This would be a good place to use a function. We haven't covered functions yet, so this is just a preview. Basically, a Javascript function is a bit of code with a name so it can be used from other parts of the program. Functions should be defined between <script> and </script> tags. We'll name our new function "setbg" (for set background), and it will take a color name and then set it as the background color for the "body" tag. Then each of the color buttons can simply call this function instead of doing the detailed work. This removes the duplicated code, and makes it easier to add new colors. In this example, the new colors yellow, pink, and black have been added:

<!DOCTYPE html>
<html>
<body>
<script>
function setbg ( color ) {
document.getElementsByTagName('body')[0].bgColor = color;
}
</script>
<button onclick="setbg('red')"> Red </button>
<button onclick="setbg('green')"> Green </button>
<button onclick="setbg('blue')"> Blue </button>
<button onclick="setbg('yellow')"> Yellow </button>
<button onclick="setbg('pink')"> Pink </button>
<button onclick="setbg('black')"> Black </button>
<button onclick="setbg('white')"> White </button>
</body>
</html>


This version is now complete. It uses 7 buttons and one function. The final version (and all others are in the attached .zip file).

 
 
Exercise 6 (Run each of the JavaScript Programs):

Copy each of the programs in this post and run them. You can copy each program and save it in a text file to open with your browser or paste each program into the w3schools web interface to run it.


 
Exercise 7 (Modify the final program to add 2 more colors):

Copy the final program in this post and change it to include at least 2 more colors. Run it to be sure that they all work. You can edit a text file to open with your browser or enter the program into the w3schools web interface to run it.


 
Attachments
bg_buttons.zip
(1.2 KiB) Downloaded 3 times
Join a National Hang Gliding Organization: US Hawks at ushawks.org
View my rating at: US Hang Gliding Rating System
Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
Bob Kuczewski
User avatar
Contributor
Contributor
 
Posts: 8339
Joined: Fri Aug 13, 2010 2:40 pm
Location: San Diego, CA

Re: Learn to Program: JavaScript

Postby Bob Kuczewski » Sun Sep 08, 2024 2:16 am

Input Fields

Buttons are very useful, but sometimes an actual value is needed. For those cases, HTML provides an "input" element that accepts a string of characters. This post explains the basics of using input fields in Javascript.

In this post, we'll build a program to convert between square feet and square meters - a useful tool for hang glider pilots. Here's a peek at the final result:

Screenshot at 2024-09-08 16-29-43.png
Screenshot at 2024-09-08 16-29-43.png (15.26 KiB) Viewed 80 times


The conversion is fairly simple. As defined by Wikipedia:

1 square meter = 10.763911 square feet


Since we might want to convert in both directions, we can define two input fields - one for feet and one for meters. We will have two buttons (one to convert in each direction). We will probably also want a column header to signify which side is square feet and which is square meters. This suggests a centered two-column table with one side representing square feet, and the other representing square meters. The table will have three rows: label, input, button, and each row will be split into two columns. Here's what that might look like:

Table_Layout.png
Table_Layout.png (17.71 KiB) Viewed 54 times


To add some space between the feet and meters columns, we'll add another empty column to adjust the spacing (there are other ways to do this, but adding an empty column is simplest for now). Here's the color-coded HTML that would build a table of 3 rows and 3 columns:

<table>
<tr> <td>Row1 Col1</td> <td>Row1 Col2</td> <td>Row1 Col3</td> </tr>
<tr> <td>Row2 Col1</td> <td>Row2 Col2</td> <td>Row2 Col3</td> </tr>
<tr> <td>Row3 Col1</td> <td>Row3 Col2</td> <td>Row3 Col3</td> </tr>
</table>


You'll notice that the entire table is contained between the <table> and </table> tags. Each row is contained between the <tr> and </tr> tags (which stand for "table row"). And finally, each column within each row is contained between the <td> and </td> tags (which stand for "table data").

Unfortunately, if we built the actual HTML table written like that, the HTML code for the rows would get extremely long. So rather than writing the table as 3 rows of HTML code, we'll put each column in its own line of HTML. We'll use indentation to show that the three "table data" items ("td") are contained within a row. That gives this layout for the table's HTML code:

<table>
<tr>
<td>Row1 Col1</td>
<td>Row1 Col2</td>
<td>Row1 Col3</td>
</tr>
<tr>
<td>Row2 Col1</td>
<td>Row2 Col2</td>
<td>Row2 Col3</td>
</tr>
<tr>
<td>Row3 Col1</td>
<td>Row3 Col2</td>
<td>Row3 Col3</td>
</tr>
</table>


Now we just need to put what we want in each row and column. As mentioned, the first row will just be the titles for each column. We'll use the "align" feature to get a symmetrical layout where both columns are pushed toward the center. So the left column will be aligned to the right, and the right column will be aligned to the left. The center column will just have two spaces for separation ("&nbsp;" is a "non-breaking space"). Here's that first row of the table:

<tr>
<td align="right">Square Meters</td>
<td align="center">&nbsp;&nbsp;</td>
<td align="left">Square Feet</td>
</tr>


The second row will contain the input boxes where the actual numbers are entered. We'll want a box on the left for square meters and a box on the right for square feet. Input boxes are created with the "input" tag, and we'll specify an "id" name so we can reference each box from the Javascript. We'll set the initial value to an empty string (value="") and we'll also specify a size for the width of each input box (size="14"). We'll set these two input fields to be "autofocus". Here's what the second row looks like:

<tr>
<td align="right"><input id="meters" value="" size="14" autofocus></input></td>
<td align="center"> </td>
<td align="left"><input id="feet" value="" size="14" autofocus></input></td>
</tr>


Finally, the third row will contain the buttons. Each button will also have an id (either "toFeet" or "toMeters"). The label on each button will contain an "arrow" showing the direction of the conversion (either "->" or "<-"). But in HTML, those characters ("<" and ">") are special. So we have to use "&gt;" for the "GreaterThan" symbol and "&lt;" for the "LessThan" symbol. Here's the HTML code for the third row:

<tr>
<td align="right"><button id="toFeet">To Feet -&gt;</button></td>
<td align="center"> </td>
<td align="left"><button id="toMeters">&lt;- To Meters</button></td>
</tr>


If we put that all together (and inside the <html>, <body>, and <center> tags), we'll have a good start for our web page:

<!DOCTYPE html>
<html>
<body>
<center>
<h3>Square Meters &lt;--&gt; Square Feet</h3>
<table>
<tr>
<td align="right">Square Meters</td>
<td align="center">&nbsp;&nbsp;</td>
<td align="left">Square Feet</td>
</tr>
<tr>
<td align="right"><input id="meters" value="" size="14" autofocus></input></td>
<td align="center"> </td>
<td align="left"><input id="feet" value="" size="14" autofocus></input></td>
</tr>
<tr>
<td align="right"><button id="toFeet">To Feet -&gt;</button></td>
<td align="center"> </td>
<td align="left"><button id="toMeters">&lt;- To Meters</button></td>
</tr>
</table>

</center>
</body>
</html>


To make this version a little nicer, we'll add a "head" section to the HTML. The "head" contains things that apply to the entire document (like title, character set, etc). It can also be a good place to put Javascript code. Here's the updated version:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Square Meters <--> Square Feet</title>
</head>

<body>
<center>
<h3>Square Meters &lt;--&gt; Square Feet</h3>
<table>
<tr>
<td align="right">Square Meters</td>
<td align="center">&nbsp;&nbsp;</td>
<td align="left">Square Feet</td>
</tr>
<tr>
<td align="right"><input id="meters" value="" size="14" autofocus></input></td>
<td align="center">&nbsp;</td>
<td align="left"><input id="feet" value="" size="14" autofocus></input></td>
</tr>
<tr>
<td align="right"><button id="toFeet">To Feet -&gt;</button></td>
<td align="center">&nbsp;</td>
<td align="left"><button id="toMeters">&lt;- To Meters</button></td>
</tr>
</table>
</center>
</body>
</html>


Everything up to this point has just been the HTML needed to make a reasonably nice looking web page. We added a title and a table. The table contains the labels, fields, and buttons to make it useful and easy enough to understand. But we haven't added any Javascript to actually do anything yet. That's what we'll do next.

To make our program actually work, we will need to add some Javascript to do the conversion. We'll start by adding a <script></script> section to the <head> of the HTML file. We'll need to add two functions (one to convert in each direction). The "to_feet" function will read from the meters field and write to the feet field. The "to_meters" function will do the opposite. Here are those two functions (described in detail below):

<script>
function to_feet() {
m = document.getElementById('meters');
f = document.getElementById('feet');
f.value = m.value * 10.763911;
}
function to_meters() {
f = document.getElementById('feet');
m = document.getElementById('meters');
m.value = f.value / 10.763911;
}
</script>


Both functions will start by getting both fields (for feet and meters) and assigning them to the variables "f" and "m". We could name these variables almost anything we like, but "f" and "m" are nice short abbreviations for "feet" and "meters". Both functions will use the "document.getElementById" function to get the fields from the HTML using their "id" strings. Remember that our input fields (in the HTML) were specified with "id" values of "feet" and "meters" so we could reference them from Javascript. That's what we're doing here. So getting the feet field will be done with:

f = document.getElementById('feet');


Similarly, getting the meters field will be done with:

m = document.getElementById('meters');


So the variable "f" represents the input box for "feet", and the variable "m" represents the input box for "meters". But the input boxes are not the same as the values inside of them. To get the value itself, we'll need to use the ".value" part of each variable. So the value for feet will be "f.value", and the value for meters will be "m.value". So to convert from meters to feet, we use this:

f.value = m.value * 10.763911;


And to convert in the other direction (from feet to meters), we use this:

m.value = f.value / 10.763911;


So those two conversions will be found inside of our two functions ("to_feet" and "to_meters"). But how will those functions get called (or invoked)? Each function (either "to_feet" or "to_meters") will be called when the appropriate button is pressed. We want to call the "to_feet" function when the "To Feet ->" button is pressed, and we want to call the "to_meters" function when the "<- To Meters" button is pressed. So we add those functions to each button using the "onclick=" feature.

<td align="right"><button id="toFeet" onclick="to_feet();">To Feet -&gt;</button></td>
:
<td align="left"><button id="toMeters" onclick="to_meters();">&lt;- To Meters</button></td>


So when you click the "To Feet ->" button, it will call the "to_feet" function and convert the value from the "meters" field to the "feet" field. Similarly, when you click the "<- To Meters" button, it will call the "to_meters" function and convert the value from the "feet" field to the "meters" field. That's the little bit of Javascript that makes it actually work.

If we put all of that together, here's the final web page with the Javascript additions in red:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Square Meters <--> Square Feet</title>
<script>
function to_feet() {
m = document.getElementById('meters');
f = document.getElementById('feet');
f.value = m.value * 10.763911;
}
function to_meters() {
f = document.getElementById('feet');
m = document.getElementById('meters');
m.value = f.value / 10.763911;
}
</script>

</head>
<body>
<center>
<h3>Square Meters &lt;--&gt; Square Feet</h3>
<table>
<tr>
<td align="right">Square Meters</td>
<td align="center">&nbsp;&nbsp;</td>
<td align="left">Square Feet</td>
</tr>
<tr>
<td align="right"><input id="meters" value="" size="14" autofocus></input></td>
<td align="center">&nbsp;</td>
<td align="left"><input id="feet" value="" size="14" autofocus></input></td>
</tr>
<tr>
<td align="right"><button id="toFeet" onclick="to_feet();">To Feet -&gt;</button></td>
<td align="center">&nbsp;</td>
<td align="left"><button id="toMeters" onclick="to_meters();">&lt;- To Meters</button></td>
</tr>
</table>
</center>
</body>
</html>


That program (HTML/Javascript web page) will give us the final product:

Screenshot at 2024-09-08 16-29-43.png
Screenshot at 2024-09-08 16-29-43.png (15.26 KiB) Viewed 80 times


We can type a value into either the "Square Meters" column or the "Square Feet" column. The "To Feet" or "To Meters" buttons will convert a value from one field to the other.

All three versions are included in the attached .zip file below.
 
 
Exercise 8 (Run each of the JavaScript Programs):

Copy each of the programs in this post and run them. You can copy each program and save it in a text file to open with your browser or paste each program into the w3schools web interface to run it.


 
Exercise 9 (Convert the square area of at least one of your gliders):

Copy the final program in this post and run it to do the conversion. You can edit a text file to open with your browser or enter the program into the w3schools web interface to run it.


 
Attachments
Feet_Meters.zip
(1.38 KiB) Downloaded 3 times
Join a National Hang Gliding Organization: US Hawks at ushawks.org
View my rating at: US Hang Gliding Rating System
Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
Bob Kuczewski
User avatar
Contributor
Contributor
 
Posts: 8339
Joined: Fri Aug 13, 2010 2:40 pm
Location: San Diego, CA

Previous
Forum Statistics

Who is online

Users browsing this forum: No registered users and 5 guests

Options

Return to Technology Forum