JavaScript basics [2d]
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 Archive : You should understand the basic language concepts.
-
ES6 classes
Archive
: 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 Archive . 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
Archive , 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:
Copyvar student = { name: 'Anna', sayHello: function() { console.log("Hello, my name is", this.name) } }
What does the following print?
Copystudent.sayHello()
What does the following print? Why?
Copystudent.sayHello
What does the following print? Why?
Copyvar fn = student.sayHello fn()
What does the following print? Why?
Copyvar fn = student.sayHello.bind(student) fn()
setTimeout()
Archive
executes a function after some time.
What does the following print in 1 second? Why?
CopysetTimeout(student.sayHello, 1000)
What does the following print in 1 second? Why?
CopysetTimeout(function() { student.sayHello() }, 1000)
What does the following print in 1 second? Why?
CopysetTimeout(student.sayHello.bind(student), 1000)
Now we use another object:
Copyvar 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?
Copystudent.sayHelloInOneSecond()
Can we fix it like this? Why not?
Copystudent.sayHelloInOneSecond.bind(student)()
Now we use another object:
Copyvar 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?
Copystudent.sayHelloInOneSecond()
Now we use another object:
Copyvar 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?
Copystudent.sayHelloInOneSecond()
Address search
In Ruby basics you built a searchable address book.
Port your code to JavaScript.
Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for unsupported versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2).