Worksheet Javascript
Table of Contents
1. Questions and Completion
If you have questions as you go through this worksheet, please feel free to post them on the discussion forum.
2. JavaScript
2.1. Getting Started (Browser Console)
Try the JavaScript console in your browser (Mozilla Firefox has a good one) with simple examples.
1 + 2
console.log (1 + 2);
function f (x) { console.log ("Called with " + x); return x + 1; } f (5);
2.2. Getting Started (JS Bin)
Now repeat the same examples using JS Bin.
You should
- Press the "JavaScript" button to display the JavaScript pane.
- Press the "Add Library" button, then select the "jQuery" entry with a version number of the form 1.x.y, where x is the highest version in the list.
Add the following HTML
input
element inside the existingbody
element of the HTML document.<input id="input-elt" type="text" value="empty"/>
Put the following code in the JavaScript pane.
$(document).ready (function () { // can add code here $('#input-elt').val (1 + 2); // and change expression });
Then 3
should appear in a text box in the Output pane.
Now change the JavaScript code to the following.
$(document).ready (function () { var output = 1 + 2; $('#input-elt').val (output); // and change expression });
At this point, you can try putting other code inside the function, and any output that you want to see can be assigned to the output
variable.
You can also press the "Console" button on JS Bin to display the Console pane. Then you can send messages to that console using, e.g.,
console.log ("this message goes to the console");
2.3. Scope
For each of the following pieces of JavaScript code, work out what will be written to the console then try running it using JS Bin to confirm your hypothesis (put your code inside the body of the anonymous function).
Remember that JavaScript does not have block scope with var
declarations because they are automatically "hoisted" up to the enclosing function declaration or global scope.
var x = "a"; console.log (x); x = x + "b"; console.log (x);
console.log (x); x = x + "b"; console.log (x); var x = "a"; console.log (x);
var x = "a"; function f () { console.log (x); x = x + "b"; console.log (x); var x = "c"; console.log (x); } f ();
var x = "a"; function f () { console.log (x); x = x + "b"; console.log (x); } f ();
var x = "a"; function f () { console.log (x); x = x + "b"; console.log (x); if (false) { var x = "c"; } console.log (x); } f ();
var x = "a"; function f () { console.log (x); x = x + "b"; console.log (x); (function () { var x = "c"; console.log (x); }) (); console.log (x); } f ();
var x = "a"; function f () { console.log (x); x = x + "b"; console.log (x); if (false) { let x = "c"; } console.log (x); } f ();
2.4. Application: Nested Functions For GUI Event Handling
Set up a JS Bin page with jQuery as before, then add the following HTML inside the body
element.
<input id="button1" type="button" value="Button 1"/> <input id="button2" type="button" value="Button 2" disabled="true"/> <input id="button3" type="button" value="Button 3" disabled="true"/> <br/> <input id="input-elt" type="text" value=""/>
Note that buttons 2 and 3 are disabled initially.
Add the following JavaScript in the JavaScript pane.
$(document).ready (function () { var node = $('#input-elt'); function extendOutput (s) { var current = node.val (); node.val (current + s); } $("#button1").click (function () { extendOutput ("1 pressed;"); $("#button2").attr ("disabled", false).click (function () { extendOutput ("2 pressed;"); // TODO }); }); });
node
refers to the input-elt
.
The function extendOutput
concatenates a new string s
to the current contents of input-elt
.
Now when you press button 1, it should change the contents of input-elt
to 1 pressed;
, enable button 2, and add a click handler to button 2.
Try it out, and then extend the JavaScript so that pressing button 2 does the same thing for button 3.
Solution: Application: Nested Functions For GUI Event Handling
3. Static and Dynamic Scope
Design your own example to show the difference between static and dynamic scope. Try running it in Scala, Scheme, C, Java.
Optionally, install the Perl interpreter and demonstrate that Perl uses dynamic scope for your example when you declare local variables using the local
keyword.
Feel free to post your solutions to the discussion forum.
4. Solutions
4.1. Solution: Application: Nested Functions For GUI Event Handling
$(document).ready (function () { var node = $('#input-elt'); function extendOutput (s) { var current = node.val (); node.val (current + s); } $("#button1").click (function () { extendOutput ("1 pressed;"); $("#button2").attr ("disabled", false).click (function () { extendOutput ("2 pressed;"); $("#button3").attr ("disabled", false).click (function () { extendOutput ("3 pressed;"); }); }); }); });