Posted over 7 years ago. Visible to the public.

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

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 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.
  • Write a JavaScript function mySelect that works like Ruby's Enumerable#select Archive , 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.

Did you learn how this works?

Execute the code snippets below in your browser console (one by one).

First, define this object:

Copy
var student = { name: 'Anna', sayHello: function() { console.log("Hello, my name is", this.name) } }

What does the following print?

Copy
student.sayHello()

What does the following print? Why?

Copy
student.sayHello

What does the following print? Why?

Copy
var fn = student.sayHello fn()

What does the following print? Why?

Copy
var fn = student.sayHello.bind(student) fn()

setTimeout() Archive executes a function after some time.

What does the following print in 1 second? Why?

Copy
setTimeout(student.sayHello, 1000)

What does the following print in 1 second? Why?

Copy
setTimeout(function() { student.sayHello() }, 1000)

What does the following print in 1 second? Why?

Copy
setTimeout(student.sayHello.bind(student), 1000)

Now we use another object:

Copy
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?

Copy
student.sayHelloInOneSecond()

Can we fix it like this? Why not?

Copy
student.sayHelloInOneSecond.bind(student)()

Now we use another object:

Copy
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?

Copy
student.sayHelloInOneSecond()

Now we use another object:

Copy
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?

Copy
student.sayHelloInOneSecond()

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).

Owner of this card:

Avatar
Henning Koch
Last edit:
8 months ago
by Michael Leimstädtner
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra Curriculum
This website uses short-lived cookies to improve usability.
Accept or learn more