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.
You should have a strong understanding of the following language features/concepts:
if
, for
, switch
, ...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.
class
keyword, constructors, instance methods, class methods, super
, getters and setters.Try the following in a browser tab:
console.log()
.Array.map
function
Show archive.org snapshot
. Name it myMap
. It should work exactly like Array.map
, but should be your own code. The function can be a new instance method of all arrays (by patching Array.prototype
) or a stand-alone function that takes an array argument.mySelect
that works like Ruby's
Enumerable#select
Show archive.org snapshot
, only as a JavaScript equivalent. The function can be a new instance method of all arrays (by patching Array.prototype
) or a stand-alone function that takes an array argument.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()
In Ruby basics you built a searchable address book.
Port your code to JavaScript.