<!DOCTYPE html> <html> <!-- Our first SJAT example... --> <!-- by: Sharon Tuttle (based on example in Ch. 12 of course text) last modified: 5-6-13 --> <head> <title> SJAT Example 1 </title> <meta charset="utf-8" /> <script type="text/javascript"> // when button with id of "load" is clicked, // I hope to synchronously fill a textarea window.onload = function() { var loadButton = document.getElementById("load"); loadButton.onclick = loadClick; }; // signature: function: loadClick: void -> void // purpose: expects nothing, and returns // nothing, BUT hopefully has the side- // effect of filling the textarea with // id of "output" with the contents // of the local file notes.txt function loadClick() { var ajax = new XMLHttpRequest(); ajax.open("GET", "notes.txt", false); ajax.send(null); // when request has completed var outputTextArea = document.getElementById("output"); outputTextArea.value = ajax.responseText; } </script> </head> <body> <noscript> <p> Your browser does not support JavaScript, or has it disabled; this page will not behave as it should. </p> </noscript> <h1> SJAT Example 1 </h1> <!-- feels odd -- but there's NOT a form here! --> <p> <textarea name="notes" rows="5" cols="30" id="output"> </textarea> </p> <p> <button id="load"> Load </button> </p> <hr /> <p> <a href="http://validator.w3.org/check/referer"> Validate this HTML5 page </a> </p> <p> For full credit, this page must also pass the tests at <a href="http://lint.brihten.com/html/"> http://lint.brihten.com/html/ </a> when its URL is entered (and without modifying the default options). </p> <p> <a href= "http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS3!" height="31" width="88" /> </a> </p> </body> </html>