Posted about 4 years ago. Visible to the public.

JavaScript basics

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 use JavaScript.

JavaScript

  • Read the MDN JavaScript Basics. You should understand the basic language concepts.
  • Try it in your browser
    • Press Ctrl+Shift+J to open the developer tools' console.
    • Assigns some variables
    • Create an array and iterate over it. Use console.log to print each element to the console.
    • Create an object and set/get properties.
    • Create functions an call them. For example:
      • Have a function that prints to the console.
      • Call that function from the loop iterating the array.
      • Have a function that takes an array and iterates it, calling the printing function.
    • Understand the difference between function pointers ("anonymous functions") and function invocations
      • Understand the parallels between blocks/lambdas in Ruby and anonymous functions in JavaScript
  • Understand the concept of "this" why it's painful to use.

DOM interaction

jQuery

  • jQuery is a JavaScript framework that simplifies DOM traversal or DOM manipulation. Lots of libraries use it, and we use it in several applications.
  • See the "A Brief Look" section at https://jquery.com/ to get an idea of how using jQuery looks.
  • Work through the jQuery Fundamentals. You should already know everything from the "JavaScript Basics" section.
  • Understand the difference between a jQuery collection/object/result set and naked DOM elements.
  • Try it on a jQuery-enabled page
    • Visit https://makandracards.com/makandra
    • Open your developer tools' console.
    • Collect all card titles visible on the page in an array
    • Hide the 3rd card through jQuery.
    • Give a red border to all cards.
    • Register an event handler that shows a browser alert when hovering a card.
    • Unregister that event handler. Note that you must provide the same function reference when unregistering as when registering.
    • Register a similar event handler on document that will trigger when hovering any card.

ES5 vs ES6+

  • When talking about "JavaScript", people often mean ECMAScript 5. It is supported by all browsers.
  • There are no classes in ES5. Understand some workarounds that people use:
  • When talking about "ES6", people often mean ECMAScript 6 or newer versions.
  • In modern applications, we write ES6+ code because it is much more comfortable to use than ES5.
  • Read through "ES6 for beginners" and learn about its new features.
    • Understand let and const
    • Understand arrow functions
    • Understand ES6 classes
  • Try out ES6
    • Open Chrome's developer tools' console
    • Assign variables
    • Write a class with constructor, getters, and setters.
    • Instantiate that class and get/set its properties.
  • To ensure code runs on all browsers, we use a transpiler software ("Babel") on our servers which converts modern ES code into ES5.
  • See how Babel converts code into ES5

CoffeeScript

  • In the times before ES6, we used CoffeeScript to write JavaScript.
  • Visit https://coffeescript.org and learn what CoffeeScript looks like. You don't need to understand the language in its entirety.
    • Understand CoffeeScript's class syntax.
    • Understand CoffeeScript's implicit return.
  • Use the "Try CoffeeScript" live console. Type some CoffeeScript into the left pane and see the resulting ES5 code in the right pane.

Utility libraries

  • Dealing with lists, objects, or collections often feels a bit too complicated using vanilla JavaScript.
  • Libraries like LoDash provide nicer interfaces to do that.
  • Experiment with LoDash
    • Visit https://lodash.com/docs/
    • Get the first and last 2 elements from an array
    • Fetch the "name" property from a collection of objects
  • Understand that ES6+ added several functions that reduce the need for libraries like LoDash.

Exercises

  • Write your own version of the Array.map function. 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, 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.
  • In your MovieDB, in the movies list, add a button that says "Count movies". Once the user clicks on that button, a piece of JavaScript will count the movies in the list above and replace the button text with the number of movies counted.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
about 1 month ago
by Stefan Wagner
Posted by Arne Hartherz to makandra Curriculum
This website uses cookies to improve usability and analyze traffic.
Accept or learn more