Worksheet Javascript

1. Questions and Completion
2. JavaScript
3. Static and Dynamic Scope
4. Solutions
- 4.1. Solution: Application: Nested Functions For GUI Event Handling

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 existing body 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;");
      }); 
    }); 
  }); 
});