Human-Computer Interaction
Track B: JavaScript I
Clemens Nylandsted Klokmose – September 8th 2021
Learning goals
• Know the basic syntax of JavaScript
• Variables and constants
• Conditional statements
• Loops
• Understand how arrays work in JavaScript
• Understand how functions work in JavaScript
• Write your first (at least first in this course) JavaScript program
JavaScript
JavaScript
• One of the world’s most used programming languages
• Originally designed for interaction on web sites
• Introduced in the NetScape browser in 1995
• Today used in many contexts
• Web development
• Data science
• Games
• Server-side programming
• IoT
• …
• Inspired by Scheme but with Java-like syntax
“JavaScript is high-level, often just-in-time compiled,
and multi-paradigm. It has curly-bracket syntax,
dynamic typing, prototype-based object-orientation,
and first-class functions.”
Wikipedia
JavaScript
• Gone through many version
• We’ll use ECMAScript version 6
• Introduces class declarations, lexical block scoping, iterators,
generators, and more.
JavaScript notebook in the warp
If you haven’t already:
Login with AU account at warp.cs.au.dk
Create your own programming notebook using:
warp.cs.au.dk/notebook/release/?copy
Keep the URL!
Data in JavaScript
• Numbers
2, 3.14
• Strings
“Hello, world!”
• Booleans
true, false
• Arrays
[“Apple”, “Orange”, “Banana”]
• Objects
{name: “Clemens”, age: “39”}
Operators in JavaScript
• Arithmetic
+ - * /
• Comparison
== === != !== < > <= >=
• Logical
&& || !
Variables and constants
• Variables
let name = “Clemens”; // Block scoped (nice)
var age = 39; // Function scoped (not so nice
• Constants
const country = “Denmark”; // Block scope
Statements and expressions
Statement
let total = balance - 2;
Statements and expressions
let total = balance - 2;
Expression
Conditional statements
if ([condition1])
[Run if condition1 is true
} else if ([condition2])
[Run if condition1 is false and condition2 is true
} else
[Run if condition1 and condition2 are false
}
{
Loops
while ([condition])
[code to be repeated
for (let i = 0; i < 10; i++)
[code to be repeated
for (let person of persons)
[code to be repeated
}
}
Arrays
• let persons = [“Jim”, “Cathy”, “Pete”
• Has properties (e.g., .length)
• Has methods (e.g., .push(x), .pop())
• Elements accessed with [], e.g., persons[2
• 0-indexed
Iteration over arrays
for (let i = 0; i < myArray.length; i++)
console.log(myArray[i])
}
for (let o of myArray)
console.log(o)
myArray.forEach(function(o)
console.log(o)
});
}
Functions
Function expressions
let inverse = function(x)
return -x;
};
Function declaration
function inverse(x)
return -x
};
Arrow function expression
let inverse = (x) =>
return -x
};
;
Local scope
• Functions define a local scope for variables
• A function can “see” outside variables but not the other way around
• A variable declared outside a function, becomes global
let x = 10
function scope()
let y = 20
console.log(x + y)
scope()
console.log(x + y); // Throws an error!
}
Block scope
• Block scoped variables and constants cannot be accessed outside
their block
let x = 10
if (x > 0)
let y = x + 20
console.log(y); // ReferenceError: y is not defined
}
First-class functions
Functions can be passed as an argument to other functions
function biggerThanB(letter)
return letter > "b"
let lettersBiggerThanB = count("Brian Bech Nielsen", biggerThanB);
or
let lettersBiggerThanB = count("Brian Bech Nielsen", function(letter)
return letter > "b"
});
(Some) Array methods
map
let initials = [“Peter”, “Jane”, “Robert”].map(name => name[0]
filter
let shortNames = [“Peter”, “Jane”, “Robert”].filter(name =>
name.length < 5)
map + reduce
let totalChars = [“Peter", "Jane", "Robert"].map(name =>
name.length).reduce((acc, len) => acc + len);
;
JavaScript exercises
