JavaScript Basics

JavaScript

    JavaScript is a programming/scripting language that that is behind almost all complex webpages. Any time you see a non-static webpage, you can almost bet that JavaScript is involved. It allows for dynamic content updates, multimedia control, animated images and much more. Javascript is a way for web developers to implement common programming language features such as the use of variables, operations on strings and running code in response to events. Javascript also allows for the use of API’s on web pages.

The DOM

    The DOM (Document-object model) allows the manipulation of HTML and CSS, creating, changing and removing HTML elements and attributes, dynamically assigning and applying CSS styles with JavaScript is all possible thanks to the DOM. It is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of a document.

Let’s take a look at the Document Object for the Wikipedia page for transistors.

    In the developer console we can see the HTML elements listed on the top and the JavaScript console below. In the JavaScript window, running console.log(document) will return the Document Object (as seen above), an arrangement of technical data from the web-page with a hyper-media driven design. This style of design is what allows the developer to select, change, add and remove Elements/Attributes and Styles. It allows for traversing all the HTML and CSS that is loaded with the web page request, and it’s available for manipulation thanks to JavaScript.

    So, the DOM is really just a structure of a web-page. It’s an Object representation with Methods and Properties, JavaScript is just the syntax we use to access and manipulate it. Thinking about it in this way helps visualize how the DOM can be leveraged and used to change features of a web page “on-the-fly.”

Event Listeners

    The document.addEventListener() method attaches an event handler to the document. It has two required parameters, and a single optional parameter. 

A complete list of HTML DOM Event Objects

Functions, Callbacks and Refactoring

Dom manipulation with event driven callbacks

Original JavaScript

After Refactoring

CSS Gradient Generator (Simple Project)

JavaScript Scope

JavaScript has two main types of Scope:
    1. Global Scope – attached to ‘window’
    2. Local Scope – inside a function

Another thing to remember is ‘Children’ have access to the ‘Parent’ Scope, but ‘Parents’ dont have access to ‘Children’ scope.

JavaScript Currying

The process in JavaScript that converts a function that takes multiple arguments, into a function that takes multiple arguments one at a time.

…..So why is this idea important?

    Well because it makes code more reusable. More extensible. Little pieces of code can be configured and reused with ease. It also helps create a higher order function, and is very helpful in event handling (as outlined in this blog post)

JavaScript Composure

The act of putting two or more functions together to form a new function, where the output of one function is the input of the other. Composing functions together is like snapping a series of pipes together for data to flow through.

Simply, a composion of functions ‘f’ and ‘g’ can be defined as ‘f(g(a))’, which evaluates from the inside out, and right to left.

  1. ‘a’
  2. ‘g’
  3. ‘f’

Leave a Comment