My First Web Page: Lesson 4: Interacting with Your Web Page

Create Your Own Live Mathematics and STEM Web Pages

W3Schools.com: Learn JavaScript

  

Introduction: A Sampler Lesson 2: Styles and Layout Lesson 3: Adding Beautiful Mathematics to your web page Lesson 4: Interacting with your web page Lesson 5(a): Adding a GeoGebra Applet Lesson 5(b): Adding a Geometry Expressions Applet Lesson 6(a): Creating a GeoGebra Assessment Task Lesson 6(b): Creating a Geometry Expressions Assessment Task Lesson 7: Interacting with Third Party Apps Lesson 8: JavaScript, STEM and Internal Device Sensors Lesson 9: JavaScript, STEM and GPS Lesson 10: Adding Web Bluetooth Support (1): Talking to your SensorTag Lesson 11: Adding Web Bluetooth Support (2): Talking to your LaunchPad Lesson 12: Introduction to HTML Graphics: Canvas

  

---

  

Since we began this short journey, you may have noticed that you have been using two key elements that support interactivity with a web page: buttons and text boxes. While these may be used straight "out of the box", such elements become powerful when coupled with scripting. And it is here that we move seamlessly from HTML to JavaScript.

In this lesson, you will learn about these three important coding features and, in the process, move from static pages to interactive ones!

  

Scripts and Buttons

Begin with the simple default code in the text box below.

In the BODY you will find two buttons defined: the first demonstrates an alert and the second, a prompt. (In fact, you can try these right now by clicking on the underlined terms in the previous sentence!)

Look at the simple structure of the button tag, with the important onclick instruction. Makes sense, doesn't it? Later we will add a few more components that will make our buttons bigger, easier to see and easier to use.

Alerts and prompts can be a great way to add interactivity to an otherwise static page. Critics point out that the user loses control of the page during the process, but this should not generally be a problem for most applications - and they certainly capture the user's attention!

It is easy to see when you might want to use an alert - simply put, to grab the user's attention and, often, to impart information or instructions. The prompt, however, while obvious in its usefulness, clearly requires something extra to be functional - and that something will generally be a script, usually containing a function which makes use of the user response.

To see how this might work, you should move to the next section, in which we introduce both text areas and functions.

If you have any questions or would like to share your experience with this utility, please drop me an email!

  

Back to Top

  

Display My Web Page

RESET Default Page

 

---

 

Back to Top

  

Pop-Ups, Text Boxes and Functions

Show

Back to Top

  

Set Code Create This Page

Suppose you want to get some response from the page user. There are two simple ways to do this: using a prompt (as described above) or by using a text box, as shown in this example. Something new appears in the HEAD of this coded page: a function called setText(), which does two things: First, it prompts the user and then it assigns the user response to the text box, defined using the textarea tag and given the ID "textBox". Notice, too, the important structure document.getElementById("textBox").value which can be used both to set the value of the text area and to get whatever value is currently in there. You should even notice that this has been used in the BODY tag with the onload command - this results in the text box being populated whenever the page is loaded. Like the button tag, the textarea tag is very simple to understand - with an important inclusion: it needs an ID by which it can be identified. Play with these buttons and see how they work. You might like to try to change the script function so that, as well as dropping your prompt response into the textBox, it triggers an alert, which repeats that response?

 

---

 

Back to Top

  

Something Mathematical?

Show

Back to Top

  

Set Code (Prompts) Create This Page

Time for some mathematics! Study the code for this relatively simple example. NOTE that when you wish to concatenate (glue together) HTML strings, use the + as the glue. For both text and computations, this is very important. Look closely at the Pop-Up code. As well as the prompt statements, notice something different? In the BODY, there is a paragraph with an ID defined (ID = "result") and this is used in the setText function to print the final result directly to the page using document.getElementById("result").innerHTML.

Here we begin to see some JavaScript used - we define some variables (in this case, using a couple of useful mathematical functions - parseInt (which returns an integer result) and Math.random() which returns a random value between 0 and 1). We also define a string variable (result) for convenience so that we don't have to repeatedly type in the same code - an important part of learning to code!

Then we act upon these variables. Study how this works - then look closely at the conditional - if (some condition) {a result} else {another result}.

Try changing parts of the code to do different things - for example, instead of multiplication, use this quiz for addition or one of the other operations. Are some easier to code than others?

 

---

 

Back to Top

  

Something More Mathematical?

Show

Back to Top

  

Set Code (Prompts) Set Prompts with MathJax Set Code (TextBoxes) Set TextBoxes with MathJax Create This Page

Consider two ways to present this page: the first, using just prompts and alerts (pop-ups) and the second, using text boxes. Of course, a better way still might involve a combination of both, but to learn how each works, we simplify the alternatives. Study the code for the first example. Once again, we see prompts used to support interaction from the user, this time in a more complex but interesting example. In the TextBox code, you will see the text boxes blended with HTML text to pose the question, and the result delivered to the "result" paragraph using innerHTML. Compare both code sets with the alternative approach using MathJax - you should notice that by simply including the MathJax source link, it becomes much easier to present the mathematics in correct form.

 

---

 

Back to Top

  

Revisiting Birthdays

Show

Back to Top

  

Set Code Set Code with Remote Script Create This Page

You are now in a good position to revisit the Birthday example from the Introduction. Take some time to work through the code, both for the HTML and JavaScript that you will learn, but also for the lovely mathematics involved... Note the second option which calls the script from a .js file saved in the same directory: instead of placing my script in the HEAD or BODY, I simply saved it (without the <script> and </script> tags) into a text document with suffix .js. This simplifies the document and, where a lot of scripts are involved, can make life much easier!

 

---

 

Back to Top

  

Revisiting Continued Fractions

Show

Back to Top

  

Value ⇒ Continued Fraction List List ⇒ Continued Fraction Value or List ⇒ Continued Fraction Continued Fraction + Matrix Result Create This Page

Finally, time to revisit the JavaScript function from Lesson 3 which invited the user to create their own continued fraction - or at least a simpler form. In the first version, simply enter a mathematical value (eg 0.625, 37/15, pi, e, sqrt(2), cbrt(2)) to convert to a continued fraction list In the second version, enter such a comma-separated list to build the continued fraction, and to display it beautifully using MathJax. Version 3 puts these two together - enter a value or a list. We use the two functions previously defined, one calling the other and passing on the list value which was initially defined as a global variable. The final version shows how to add the calculated result, and then, to add the matrix representation to each method. Note the link to the external src script.

NOTE: The MathJax Cloudflare script source link which loads all the MathJax code,

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async></script>

only loads once when the page is loaded. So MathJax code present in the original web page will load and appear as expected.

If you introduce new code - such as in a JavaScript function like the continued fraction element above, then the code needs to be refreshed for new mathematics to appear. For this, add this snippet at the end of the function:

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

  

---

  

Take some time to play with the code and study the effect - as always, you will learn best by doing.

  

  

---

     

Back to Top

  

Home ← Live Mathematics and STEM on the Web ← My First Web Page: Introduction ← Lesson 4