Before the lab
- Watch the WAT talk by Gary Bernhardt,
Background
- Values, Types and Operators
- Program Structure
- Node.js REPL
- JavaScript functions
- Node.js modules
- CommonJS modules
Questions
- Time
- 15 minutes
- Activity
- Group discussion
- about A2 ?
- about the quiz?
Running JavaScript
- Time
- 15 minutes
- Activity
- Demo
In a file
- Create a new file
~/fcshome/cs2613/labs/L08/hello-world.js
- Add some JavaScript code, save
console.log("Hello world");
Running a script
open a terminal, find the right directory
$ node hello-world.js
commit your file
In a Browser
- Note
- Examples involving "prompt" and "alert" will only work in a browser.
Start Firefox
Open the "Web Console" with Ctrl-Shift-K (or navigate via the "hamburger menu" to "Web Developer -> Web Console" ).
Select the tab "Console"
Copy-paste the code in.
In the REPL
Start up a node repl
$ node
Load your code into the repl
> .load hello-world.js
Evaluate some expressions
> 1 + 1 > "Hello " + "world!"
Translating Racket expressions into Javascript
- Time
- 15 minutes
- Activity
- Individual Work
make a new file
~/fcshome/cs2613/labs/L08/expr.js
and fill in the JavaScript expressions equivalent to the given Racket expressions.- You can test your solutions with the REPL either by pasting in the expressions, or by using
.load
.
- You can test your solutions with the REPL either by pasting in the expressions, or by using
note that if you want to run your code from the command line, you'll need to use console.log
//(string-append "Hello\n" "world!")
//(* (+ 1 2 3) 7)
//(< 41 (* 6 7))
//(equal? (* (+ 1 2 3) 7) 42)
//(equal? "Spongebob" "Squarepants")
//(and (equal? (* 6 7) 42) (equal? "Spongebob" "Squarepants"))
//(equal? 42 (if (< 3 5) (* 6 7) "turnip"))
// (or #t (/ 1 0))
// (and #f (/ 1 0))
JavaScript equality and type coercion
- Time
- 15 Minutes
- Activity
- Demo
We remember from earlier Eloquent JavaScript Chapter 1, and the WAT talk by Gary Bernhardt, that type coercion is an important part of evaluating JS expressions. This is sometimes useful
> 42 + 'is a big number'
But just as often a source of errors and confusion.
> "" + 1
> x=""
> x++
One operator where type coercion can be particularly surprising is the
standard equality test ==
. Not only does type coercion apply:
> "" == 0
> false == 0
> "" == 0
but special rules apply to "undefined" and "null"
> false == undefined
> undefined == null
> undefined == undefined
even though they would normally be considered falsy (considered false in boolean contexts).
> if (undefined) { console.log("truthy") } else { console.log("falsey") }
NaN
is another falsy value not ==
to the other falsy values, not even itself:
> NaN == undefined
> NaN == NaN
To avoid this twisty maze of "helpful" type coercion, you can use the "strict equality" checker ===
> "" === 0
> false === 0
> "" === 0
> false === undefined
> undefined === null
> undefined === undefined
Javascript functions
- Time
- 20 minutes
- Activity
- Individual
Reference for this section is JavaScript functions Like Racket, JavaScript has two different ways of defining functions. The first way is by assigning an anonymous function to a variable.
(define square (lambda (x) (* x x)))
let square = x => x*x;
let square2 = function (x) {return x*x};
- Answer the following questions in your journal:
How is assignment (
=
) in javascript different from binding (let
,define
) in Racket?return
is mandatory. What does it mean?what is the difference between the two kinds of anonymous functions in JavaScript? Hint: the first example is an arrow function.
The more compact way of defining functions in both Racket and
JavaScript combines the binding and creation of a function
/lambda
(define (square x) (* x x))
function square(x) { return x*x }
- Start a new file
~/fcshome/cs2613/labs/L08/loop-arith.js
, and fill in the following definition formult
usingplus
andfor
.
function plus(a,b) {
for (let i=0; i < a; i++){
b++;
}
return b;
}
function mult(a,b) {
sum=0;
return sum;
}
- Test your file manually, using e.g. the
node
REPL.
Node.js modules
- Time
- 10 minutes
- Activity
- Demo
Chapter 10 contains a explanation of the CommonJS module system we will be using, but we don't want to wait that long to use modules. So the extremely quick and dirty guide to to CommonJS modules follows.
- Exporting
- This is analogous to
provide
in Racket. The syntax will make more sense when we know about Javascript objects. Add toarithmetic.js
(likeprovide
in racket)
exports.plus = plus;
exports.mult = mult;
For now, let's put these at the bottom of our files.
- Requiring
- This is analogous to the form of the same name in Racket.
Create a new file
client.js
let arith=require("./loop-arith.js");
console.log(arith.plus(2,2));