JavaScript is a scripting language supported by all browsers. Browsers don't speak Ruby, so if we want to implement client-side logic that runs in the browser, we need to express ourselves in JavaScript.
Goals
You should have a strong understanding of the following language features/concepts:
- Writing and reading variables
- Defining and calling functions
- Control flow:
if
,for
,switch
, ... - Functions and function pointers
- Iterating over lists
- Throwing and catching errors
- The arcane rules around
this
.
Coming from Ruby you should notice that parentheses (()
) are not optional in JavaScript function calls. Understand the difference between function pointers (foo
) and function invocations (foo()
). Notice the parallels between blocks ("procs", "lambdas") in Ruby and function pointers in JavaScript.
Resources
- MDN JavaScript Basics Show archive.org snapshot : You should understand the basic language concepts.
-
ES6 classes
Show archive.org snapshot
: You should understand the
class
keyword, constructors, instance methods, class methods,super
, getters and setters.
Exercises
First steps
Try the following in a browser tab:
- Press Ctrl+Shift+J to open the developer tools' console.
- Assign some variables.
- Print a variable to the console using
console.log()
. - Create an array and iterate over it. Print each element to the console.
- Create an empty object and set/get some properties on it.
- Define a function that prints its first argument to the console.
- Call that function from the loop iterating the array.
Working with lists
- Write your own version of the
Array.map
function Show archive.org snapshot . Name itmyMap
. It should work exactly likeArray.map
, but should be your own code. The function can be a new instance method of all arrays (by patchingArray.prototype
) or a stand-alone function that takes an array argument. - Write a JavaScript function
mySelect
that works like Ruby'sEnumerable#select
Show archive.org snapshot , only as a JavaScript equivalent. The function can be a new instance method of all arrays (by patchingArray.prototype
) or a stand-alone function that takes an array argument.
Did you learn how this
works?
Execute the code snippets below in your browser console (one by one).
First, define this object:
var student = {
name: 'Anna',
sayHello: function() { console.log("Hello, my name is", this.name) }
}
What does the following print?
student.sayHello()
What does the following print? Why?
student.sayHello
What does the following print? Why?
var fn = student.sayHello
fn()
What does the following print? Why?
var fn = student.sayHello.bind(student)
fn()
setTimeout()
Show archive.org snapshot
executes a function after some time.
What does the following print in 1 second? Why?
setTimeout(student.sayHello, 1000)
What does the following print in 1 second? Why?
setTimeout(function() { student.sayHello() }, 1000)
What does the following print in 1 second? Why?
setTimeout(student.sayHello.bind(student), 1000)
Now we use another object:
var student = {
name: 'Anna',
sayHello: function() { console.log("Hello, my name is", this.name) },
sayHelloInOneSecond: function() {
console.log("The value of this is", this)
setTimeout(this.sayHello, 1000)
}
}
What does the following print? Why?
student.sayHelloInOneSecond()
Can we fix it like this? Why not?
student.sayHelloInOneSecond.bind(student)()
Now we use another object:
var student = {
name: 'Anna',
sayHello: function() { console.log("Hello, my name is", this.name) },
sayHelloInOneSecond: function() {
console.log("The value of this is", this)
setTimeout(function() { this.sayHello() }, 1000)
}
}
What does the following print? Why?
student.sayHelloInOneSecond()
Now we use another object:
var student = {
name: 'Anna',
sayHello: function() { console.log("Hello, my name is", this.name) },
sayHelloInOneSecond: function() {
console.log("The value of this is", this)
setTimeout(() => { this.sayHello() }, 1000)
}
}
What does the following print? Why?
student.sayHelloInOneSecond()
Address search
In Ruby basics you built a searchable address book.
Port your code to JavaScript.