<html> <head> <title>My First Web Page: Lesson 3</title> <link href="https://compasstech.com.au/master.css" rel="stylesheet" type="text/css" media="all" charset="utf-8" /> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-873325-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body onload='document.getElementById("textBox").value = headText + bodyText1 + endText;'> <a name="top"></a> <div id="HeaderBar"> <P><strong><a href="https://compasstech.com.au/index.html">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a>&larr; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; Lesson 3</strong></P> </div> <blockquote> &nbsp;&nbsp; <H1><font color="red">My First Web Page: Lesson 3: Interacting with Your Web Page</font></H1> <blockquote> <H4><i>Create Your Own Live Mathematics and STEM Web Pages</i></H4> <P><font size=-1><a href="https://w3schools.com" target="top">W3Schools.com: Taking Your Web Page Skills to the Next Level</a></font></P> &nbsp;&nbsp; <blockquote><blockquote> <blockquote><blockquote> <font color="green"> <UL> <P><LI><a href="index.html" target="top">Introduction: A Sampler</a></LI></P> <P><LI><a href="index2.html" target="top">Lesson 2: Styles and Layout</a></LI></P> <P><LI>Lesson 3: Interacting with your web page</LI></P> <P><LI><a href="index4.html" target="top">Lesson 4: Adding a GeoGebra Applet</a></LI></P> <P><LI>Lesson 5: Adding Web Bluetooth Support: Talking to your SensorTag </LI></P> <P><LI>Lesson 6: Adding Web Bluetooth Support (2): Talking to your LaunchPad </LI></P> </UL> </font> </blockquote></blockquote> </blockquote></blockquote> &nbsp;&nbsp; <HR width=50%></HR> &nbsp;&nbsp; <font color="blue" size=+1> <P>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 <b>scripting</b>. And it is here that we move seamlessly from HTML to JavaScript.</P> <P>In this lesson, you will learn about these three important coding features and, in the process, move from static pages to interactive ones!</P> &nbsp;&nbsp; <H3><font color="red">Scripts and Buttons</font></H3> <P>Begin with the simple default code in the text box below.</P> <P>You might first notice something new in the HEAD: a script. This very simple script simply defines some variables that will be used later. By defining these in the HEAD they will be available throughout the page that follows.</P> <P>In the BODY you will find two buttons defined: the first demonstrates an <u><b><a onclick="alert('This is an alert!')">alert</a></b></u> and the second, a <u><b><a onclick="prompt('Can you see the difference between and alert and a prompt?','')">prompt</a></b></u>. <i>(In fact, you can try these right now by clicking on the underlined terms in the previous sentence!)</i></P> <P>Look at the simple structure of the <b>button</b> tag, with the important <b>onclick</b> 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.</P> <P>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!</P> <P>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.</P> <P><i>To see how this might work, you should move to the next section, in which we introduce both text areas and functions.</i></P> &nbsp;&nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; </font> </blockquote> <script type="text/javascript"> var headText = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 3</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '\t\t<script>\n' + '\t\t\tvar textVar = "This is an alert!"\n' + '\t\t\tvar textVar1 = "This is a prompt! Please type something..."\n' + '\t\t\tvar textVar2 = "?"\n' + '\t\t<\/script>\n' + '</HEAD>\n'; var bodyText1 = '<BODY>\n' + '<blockquote>\n' + '\t<H1>Interacting with Buttons on Your Web Page</H1>\n' + '\t<P><button onclick="alert(textVar);">Click Me</button></P>\n' + '\t<P><button onclick="prompt(textVar1,textVar2);">Click Me Too</button></P>\n' + '</blockquote>\n' var endText = '</BODY>\n' + '</HTML>'; function setText1() { document.getElementById("textBox").value = headText + bodyText1 + endText; } var headText2 = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 3</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '\t\t<script>\n' + '\t\t\tvar textName = "textBox"\n' + '\t\t\tvar textVar = "Please type something in the box!"\n' + '\t\t\tvar textVar1 = "This is a prompt! Please type something..."\n' + '\t\t\tvar textVar2 = "?"\n\n' + '\t\tfunction setText() {\n' + '\t\t\ttextVar3 = prompt(textVar1,textVar2);\n' + '\t\t\tdocument.getElementById("textBox").value = textVar3\n' + '\t\t}\n' + '\t\t<\/script>\n' + '</HEAD>\n'; var bodyText2 = '<BODY onload="document.getElementById(textName).value = textVar">\n' + '<blockquote>\n' + '\t<H1>Interacting with Text Boxes on Your Web Page</H1>\n' + '\t<P><textarea ID="textBox"></textarea></P>\n' + '\t<P><button onclick="alert(document.getElementById(textName).value);">Get Text from the Box</button></P>\n' + '\t<P><button onclick="setText();">Set Text to the Box</button></P>\n' + '</blockquote>\n' var endText2 = '</BODY>\n' + '</HTML>'; function setText2() { document.getElementById("textBox").value = headText2 + bodyText2 + endText2; } var headTextBday = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 3: Birthdays</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '</HEAD>\n'; var bodyTextBday = '<BODY>\n' + '<BLOCKQUOTE>\n' + '<H2>Birthdays and Other Problems</H2>\n\n' + '&nbsp;&nbsp;\n\n' + '<blockquote>\n' + '<i>\n' + '<P><font color="green" size=+2>Monday\'s child is fair of face,</P>\n' + '<P>Tuesday\'s child is full of grace,</P>\n' + '<P>Wednesday\'s child is full of woe,</P>\n' + '<P>Thursday\'s child has far to go,</P>\n' + '<P>Friday\'s child is kind and giving,</P>\n' + '<P>Saturday\'s child works hard for a living,</P>\n' + '<P>And the child who is born on the Sabbath day,</P>\n' + '<P>Is fair, and wise, and good, and gay.</P>\n' + '<center>\n' + '<P><button onclick="birthday();" style="font-size : 24px; width: 100%; height: 48px;">Which are you?</button></P>\n' + '&nbsp;&nbsp;\n' + '<P id="result"></P>\n' + '</center>\n' + '</blockquote>\n' + '&nbsp;&nbsp;\n' + '<script>\n\n' + 'function birthday() {\n' + '\tday = prompt("On what day of the month were you born?","");\n' + '\tmonth = prompt("In what month?","");\n' + '\tyear = prompt("and in what year?","");\n\n' + 'if(year<100){\n' + '\tyear = eval(parseInt(year) + 1900)}\n' + 'o = parseInt(month)\n' + 't = parseInt(year)\n\n' + 'if(month<3){\n' + '\tmonth = eval(parseInt(month) + 12)\n' + '\tyear = eval(parseInt(year) - 1)\n' + '}\n\n' + 'u = Math.floor((3*(parseInt(month) +1)/5))\n' + 'q = parseInt(2) + parseInt(day) + 2*parseInt(month)\n' + 'r = eval(parseInt(year) + parseInt(year/4))\n' + 's = eval(parseInt(year/100) - parseInt(year/400))\n' + 'var w = eval(parseInt(u) + parseInt(q) + parseInt(r) - parseInt(s))\n' + 'w %= 7\n' + 'var dayList = ["Saturday","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday"];\n' + 'alert(day + "/" + o + "/" + t + " falls on a " + dayList[w]);' + 'document.getElementById("result").innerHTML = day + "/" + o + "/" + t + " falls on a " + dayList[w]\n' + '}\n\n' + '<\/script>'; function setTextBday() { document.getElementById("textBox").value = headTextBday + bodyTextBday + endText;; } var headText3 = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 3</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '\t\t<script>\n' + '\t\t\tvar aVar = "Please type a value for a"\n' + '\t\t\tvar bVar= "Please type a value for b"\n' + '\t\t\tvar cVar= "And a value for c?"\n' + '\t\t\tvar textVar2 = ""\n\n' + '\t\tfunction setText() {\n' + '\t\t\t aVal = prompt(aVar,textVar2);\n' + '\t\t\t bVal = prompt(bVar,textVar2);\n' + '\t\t\t cVal = prompt(cVar,textVar2);\n' + '\t\t\t soln1 = eval("(-1*" + bVal + "+ Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln2 = eval("(-1*" + bVal + "- Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln = "the solution set = {" + soln1 + ", " + soln2 + "}";\n' + '\t\t\t eqn = "When a = " + aVal + ", b = " + bVal + ", c = " + cVal + " then " + soln;\n' + '\t\t\t alert(eqn);\n' + '\t\t\tdocument.getElementById("result").innerHTML = eqn\n' + '\t\t}\n' + '\t\t<\/script>\n' + '</HEAD>\n'; var bodyText3 = '<BODY>\n' + '<blockquote>\n' + '\t<H1>Interacting with Pop-Ups on Your Web Page</H1>\n' + '\t&nbsp;\n' + '\t<center><b><font color=blue size=+2><P><b>a x<sup>2</sup> + b x + c = 0</b></P>\n' + '\t&nbsp;\n' + '\t<P><button onclick="setText();" style="font-size : 24px; width: 100%; height: 80px;">Enter values for the quadratic</button></P>\n' + '\t</b><i><P id="result">To solve the quadratic equation, please enter values for a, b and c</P> </i></font></center>\n\n' + '</blockquote>\n' var endText3 = '</BODY>\n' + '</HTML>'; function setText3() { document.getElementById("textBox").value = headText3 + bodyText3 + endText3; } var headText4 = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 3</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '\t\t <style type="text\/css">\n' + '\t\t\t textarea {\n' + '\t\t\t\t vertical-align: middle;\n' + '\t\t\t}\n' + '\t\t </\style>\n' + '\t\t<script>\n' + '\t\t\tvar textVar2 = ""\n\n' + '\t\tfunction setText() {\n' + '\t\t\t aVal = document.getElementById("aBox").value;\n' + '\t\t\t bVal = document.getElementById("bBox").value;\n' + '\t\t\t cVal = document.getElementById("cBox").value;\n' + '\t\t\t soln1 = eval("(-1*" + bVal + "+ Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln2 = eval("(-1*" + bVal + "- Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln = "the solution set = {" + soln1 + ", " + soln2 + "}";\n' + '\t\t\t eqn = "When a = " + aVal + ", b = " + bVal + ", c = " + cVal + " then " + soln;\n' + '\t\t\tdocument.getElementById("result").innerHTML = eqn\n' + '\t\t}\n' + '\t\t<\/script>\n' + '</HEAD>\n'; var bodyText4 = '<BODY>\n' + '<blockquote>\n' + '\t<H1>Interacting with Text Boxes on Your Web Page</H1>\n\n' + '<center>\n' + '\t<P><font color="blue" size=+2><textarea ID="aBox" rows="2" cols="3" value="?" style="font-size : 20px;"></textarea> x<sup>2</sup> + ' + '<textarea ID="bBox" rows="2" cols="3" value="?" style="font-size : 20px;"></textarea> x + ' + '<textarea ID="cBox" rows="2" cols="3" value="?" style="font-size : 20px;"></textarea> = 0</P>\n\n' + '</center>\n' + '\t<i><P id="result">To solve the quadratic equation, please enter values for a, b and c</P></i></b></font></center>\n\n' + '\t<P><button onclick="setText();" style="font-size : 24px; width: 100%; height: 80px;">Solve the quadratic</button></P>\n' + '</blockquote>\n' var endText4 = '</BODY>\n' + '</HTML>'; function setText4() { document.getElementById("textBox").value = headText4 + bodyText4 + endText4; } function MakePage(objName) { contents = document.getElementById("textBox").value + '\n<FONT COLOR="RED" size=-1>' + '<A HREF="javascript:window.close()">' + '<P><HR width=50%></P>' + 'Back to ' + '<I>' + 'My First Web Page: Lesson 3</i></FONT></A>'; Opts = "toolbar=0,location=0,directories=0,status=1,menubar=1," + "scrollbars=1,resizable=1,width=900,height=900"; PopUp = window.open("", "", Opts); PopUp.document.write(contents) PopUp.document.close() } </script> <center> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Display My Web Page</button></P> <P><textarea ID="textBox" rows="20" cols="80" value="" style="font-size : 20px;"></textarea></P> <P> <button onclick="setText1();" style="font-size : 24px; width: 100%; height: 80px;">RESET Default Page</button></P> </font> </center> &nbsp; <HR width=50%></HR> &nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <H2><font color="red">Pop-Ups, Text Boxes and Functions</font></H2> <TABLE cellpadding="10"> <TR><TD width=50%> <center> <P> <button onclick="setText2();" style="font-size : 24px; width: 100%; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Create This Page</button></P> </center> </TD><TD> </font><font color="blue" size=+1> <blockquote><blockquote><blockquote> <P>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.</P> <P>Once again, something new appears in the HEAD of this coded page: a function called <b>setText()</b>, which does two things: First, it prompts the user and then it assigns the user response to the text box, defined using the <b>textarea</b> tag and given the ID "textBox" (which for my own ease of use I have also assigned to a variable, <b>textName</b>).</P> <P>Notice, too, the important structure <i>document.getElementById("textBox").value</i> 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 <b>BODY</b> tag with the <b>onload</b> command - this results in the text box being populated whenever the page is loaded.</P> <P>Like the <b>button</b> tag, the <b>textarea</b> tag is very simple to understand - with an important inclusion: it needs an <b>ID</b> by which it can be identified.</P> <P>Play with these buttons and see how they work. <i>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?</i></P> </blockquote></blockquote></blockquote> </TD></TR> </TABLE> &nbsp; <HR width=50%></HR> &nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <H2><font color="red">Something Mathematical?</font></H2> <TABLE cellpadding="5"> <TR><TD width=50%> <center> <P> <button onclick="setText3();" style="font-size : 20px; width: 100%; height: 80px;">Set Code<BR>(Prompts)</button></P> <P> <button onclick="setText4();" style="font-size : 20px; width: 100%; height: 80px;">Set Code<BR> (TextBoxes)</button></P> <P><button onclick="MakePage('T');" style="font-size : 20px; width: 100%; height: 80px;">Create This Page</button></P> </center> </TD><TD> </font><font color="blue" size=+1> <blockquote><blockquote><blockquote> <P>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.</P> <P>Study the code for the first example.</P> <P><font color="red"><i>NOTE that when you wish to concatenate (glue together) HTML strings, use the <b>+</b> as the glue. For both text and computations, this is very important.</i></font></P> <P>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 (<i>ID = "result")</i> and this is used in the <b>setText</b> function to print the final result directly to the page using <b>document.getElementById("result").innerHTML</b>.</P> <P>Finally, 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.</P> </blockquote></blockquote></blockquote> </TD></TR> </TABLE> &nbsp; <HR width=50%></HR> &nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <H2><font color="red">Revisiting Birthdays</font></H2> <TABLE cellpadding="10"> <TR><TD width=50%> <center> <P> <button onclick="setTextBday();" style="font-size : 24px; width: 100%; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Create This Page</button></P> </center> </TD><TD> </font><font color="blue" size=+1> <blockquote><blockquote><blockquote> <P>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...</P> </blockquote></blockquote></blockquote> </TD></TR> </TABLE> &nbsp;&nbsp; <HR width=50%></HR> &nbsp;&nbsp; <blockquote><blockquote> <font color="blue" size=+1> <P>Take some time to <b>play</b> with the code and study the effect - as always, you will learn best by <b>doing</b>.</P> &nbsp;&nbsp; </blockquote></blockquote> &nbsp;&nbsp; <HR width=50%></HR> &nbsp;&nbsp; </i> &nbsp;&nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <P><strong><a href="https://compasstech.com.au/index.html">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a> &larr; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; <b>Lesson 3</P> </body> </html>