The same detour on the way to understanding basic DOM Manipulation

Function Overview

So at this point in our detour we need to talk about what we need to use in order to accomplish our goal. To remind you what that goal is we're looking to be able to type a phrase into the input field, click the submit button and that phrase should appear on the page. That would be made possible if we wrote out a function. Functions play a huge role in Javascript and chances are if you've been working inside this playground of a language, you may already be familiar with functions. Functions could be thought of as small programs that perform work, from top to bottom, that will give us an output of some sort, given that we explicitly tell it we want an output. A basic function would look like this

function sayHello(){
     return "Hello Reader"
}

This is a function declaration. We declared a function by writing out the keyword function and then we gave it a name, sayHello. The name is followed by a pair of parentheses. Normally one would place some sort of parameter to be used by the function within the block, but in this example, we don't require parameters of any kind and so we don't have to write anything within the parentheses.

Following the parentheses, we have a pair of curly braces(called a block) and in between, we write out our statements, or instructions to be run when this function is invoked.

In the example, the block only contains the single instruction of return the string "Hello Reader". At a very high level, this is what a basic function is.

Javascript comes with many built-in methods that are available to us. Those methods are like functions wherein they perform a set of instructions to give us the desired outcome, but methods work on objects while functions do not. An easier way to think about this is that I could call sayHello() by itself and it would run, but I would not be able to call it on the form that we have in the HTML document. An available method I could call on the form is .addEventListener(). This method normally receives two arguments, this first being some type of action performed by the user. In this case, that action would be 'submit' written in quotations. The second argument would be a function to perform the desired work we want to be performed, which would be posting the phrase typed into the text box onto the page. Functions applied this way are normally referred to as callback functions. While that may sound a bit fancier, callback functions are still functions. The work that is necessary will still be performed in the same manner, running through each statement until the outcome is explicitly called on.

form.addEventListener("submit", function(){

});

Recall that in the previous post we set the element that carries the id of formPhrase to the form variable. So now we can call that addEventListener on the form variable that references the correct element. This is what gives us the big brother-esque surveillance that just lays in wait for you to press the submit on the 'PLUS ULTRA' phrase you excitingly put there.

Next post we bring it all together!