JavaScript: A Developer's Notes

Below I've listed the things I've wanted to take away from MDN's JavaScript tutorials. This won't go into depth of general purpose programming concepts like how conditional statements, looping, or classes work. Examples of those may be listed as a reference as to how JavaScript implements them. Instead, I'll be listing out things I feel are important for an established developer to know in order to be able to write satisfactory JavaScript. Enjoy!

Debugging

console.log("some string") or alert("some string") are the easiest ways to debug JavaScript.

The <script> Tag

This is where JavaScript belongs, but it can happen in two forms. You can embed the JavaScript directly.

<script>
  console.log("Hello World")
</script>

or we can reference a file

<script src="/assets/some_js_file.js"></script>

Both are simplified but you get the idea.

Manipulating the DOM

Note: Prefixing a . to the identifier (e.g. .product_listing) indicates that we are looking for an element that has product_listing set as a class. A # (e.g. #product_listing_table) indicates an element with that specific id. Remember ids should be specific to a single element, and classes can be applied to multiple elements.

Below are how we make the DOM bend to our will.

document.querySelector

I need to manipulate that DOM element, but first I need to get to it.

document.querySelectorAll

Get me all the DOM elements that match so that I can do something with them all, most likely loop through them all.

document.createElement

I need to create a new element to add to the page. Don't forget to add an eventHandler if it should be doing something when it's interacted with.

myInputElement.value

I have my form element, and I need to read its value or update it with something.

myElement.textContent

I have my element (probably a <p> element), now I need to dump text to it.

myElement.setAttribute('class', 'warning')

I have an element, now I need to set an attribute. Takes the attribute and the value.

myOneElement.appendChild(myOtherElement)

I have two elements that I want to connect by making the other element nest within the one.

myOneElement.removeChild(myOtherElement)

I have an element within another. Now I want to remove that nested element.

var vs let vs const

var used to be the way to declare variables, but it had a dark secret that any seasoned developer will recognize as evil (why is another blog post). However MDN noted some details

let allows you to declare variables that are limited to the scope of a block statement, or expression on which it is used, unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

In other words, use let and forget about var.

const is how we define constant values. Any attempt to write to it after it has been set, you'll run into TypeError: invalid assignment to const

if, a Simple Example

Pretty standard stuff.

if (condition) {
  code to run if condition is true
} else if (another condition) {
  code to run if that other condition is true
} else {
  run some other code instead
}

Ternary statement example

I always forget this one

( condition ) ? run this code : run this code instead

Functions, an example

See MDN for more detail.

function myFunction() {
  alert('hello');
}

myFunction();
// calls the function once

Anonymous Functions

Anonymous functions are everywhere in JavaScript. They power reactions when event handlers are triggered.

const myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}

The === and == operators

=== and !== are stricter than == and != as the former check type too. == and != could lead to false positives. The rule of thumb is to use === and !==

Event Listeners

Event handlers should be attached one of two ways.

someDomElement.onclick = doSomething

or

someDomElement.addEventListener('click', doSomething);

Both approaches attach the doSomething function to someDomElement that gets triggered when the element is clicked. There is an approach to add event handlers inline in HTML, but that should be avoided in order to keep HTML and JavaScript separate.

There are many different events that can be fired off. MDN has a good list

Some Handy Event Handler Properties

These are properties that contain a function that will be fired off when an event happens. Either a named function or an anonymous function can be used.

  • onclick
  • onfocus
  • onblur
  • ondblclick
  • onmouseover
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

Note: some of the document methods for pulling back elements return an array (e.g. getElementsByClassName). An event handler has to be set on the individual element. An array of elements doesn't have the wiring to propagate the desired event handler to its contained elements.

Named Function Example

function heyThere() {
  alert("Hey")
}

btn.onclick = heyThere;

Anonymous Function Example

btn.onclick = function() {
 alert("Hey")
};

Event Objects

When an event is triggered it can send information about the action that triggered it. The triggering function just needs a parameter to accept it.

btn.onclick = function(e) {
 console.log(e)
};

A particularly helpful attribute in this set of information is target. It points to the element that was the source of the event.

Preventing the Event's Default Behavior

use preventDefault on the event object like so

e.preventDefault();

Event Bubbling and Capture

See MDN for a great example, but the tldr is that if you have elements that could trigger events with a single action then unexpected things could happen.

Back