Javascript

Summary

JS

JavaScript is a scripting language on the client side of web pages that allows developers to create dynamically generated content through object oriented or functional programming patterns.

The DOM

The DOM, or the Document Object Model, is where your code runs in the browser. JS and the DOM have a close relationship, since JS can call and store html elements in the browser and manipulate them. One of the most common ways of doing this is by using an eventListener. A good way to start working with JS is by adding an eventListener to a button and assigning that event a function that provides some feedback, such as a console.log message.

Run JS

Run your JS by referencing an external script file. Add this file as a script tag at the end of your html document. Your can then use ES6 imports to separate different aspects of your program in different files. This will make it easier to catch bugs and stay organized. Be aware that many articles online do not use ES6.

Resources I've Found Helpful

Eloquent JS Free Book Eloquent JS Sandbox Exercises Express/Node Intro Article Prototypical Inheritance Article High Quality JS Article Babel Sandbox JS Design Patterns Article FizzBuzz Kata Exercise JS MDN Guide

Cheat Sheet

Manipulate Arrays

Update an existing array

for(let i = 0; i < array.length; i++) { 
  // do something with the array data 
}

Add an event listener to every button

const buttons = document.querySelectorAll('button');
buttons.forEach((btn) => {
  btn.addEventListener('click', functionName)
});

Make a new array from input values

const inputs = document.querySelectorAll('inputs');
let arr = Array.from(inputs).map(inputs => inputs.value);

Export a Function

module.exports = functionName;

Javascript Projects

Start A Project

Escape tutorial purgatory by using a project to learn JS. Pick something you are interested in, whether that's accessibility, gaming, storytelling, or data. Then take a problem you would like solved related to your interest and use Javascript to solve it. You can start off with a discovery session by doing some research and brainstorming before you write any code. Then get your first draft of a program up and running. Start refactoring your code in small sections after you have it working. And, make sure to keep everything in a GitHub repo.

Complete Katas

Complete at least two katas. First get them working just with node. Then bring them to the browser, and give them some styling. Create a GitHub repo before you start, and push all of your changes as you go.