Javascript Intro
Now that we understand the fundamentals of the web, we can start venturing into the weeds of javascript...
This excercise will focus on copy/pasting code from sources and tweaking it to get it to behave the way we want it to.
To start, it might help to define some of the things we'll be dealing with:
Functions
"Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value." In this example we'll be writing a simple function that contains a series of tasks that we want it to execute every time that function is called.
More on functions at w3schools and mdn docs.
Variables
Variables, written as 'var', 'let', or 'const', are "containers for storing data." In this example we'll be using a variable to create a shorthand way of referencing a longer string of text (in this case a 'method') that will be used to select an element in our HTML.
More on variables at w3schools and mdn docs.
Events
An event is something that "the browser does, or something a user does." Events are happening all the time in the background as the user interacts with the webpage and we can use javascript to react to those events. In this example, we'll be using the 'onclick' event to trigger our function. As the name suggests, this event will be triggered when the user clicks on a specified element.
More on events at w3schools.
We’ll start by writing some javascript directly inside our HTML document. We can place this anywhere we like, but it’s recommended to place it at the bottom of the body element, just before the closing tag. If we are adding javascript to our HTML document, it must be written between script tags.
Copy and paste this script with a simple function inside to the bottom of your body element:
On its own, this function won’t do anything until we determine how we want to execute it. To execute it, let’s create a button with an onclick event listener applied to it. This we can place anywhere within our body element:
Keep in mind: the onclick attribute can be used on any kind of HTML element, it does not need to be a button.
Now, let’s add the 'change()' function name to the onclick attribute. Make sure to include the parentheses!
This should be all we need to get our javascript working. However, for the time being, we won’t see anything happen on our page when we click on the button. To confirm it’s working, let’s open our browser developer tools (right click + inspect) and navigate to the “console” tab. The console is the dedicated javascript and error log for our browser. Anytime we’re writing or debugging javascript, it’s a good idea to have the console window open to make sure things are working as intended.
In our function is a single line:
This line will send whatever text is within its parentheses to the browser’s console when it is executed. So, if you click on your button and ‘it works!’ appears in your console then your javascript is working as intended!
Now that we know it works, let’s do something more interesting with our function. Let’s add this line to our script, underneath the console.log() line:
There’s a lot going on in this line, but, essentially, it will toggle a class on and off on the specified element when executed. We specify the element we want to target with querySelector() and we designate the class we want to toggle with classList.toggle().
Pay close attention to the casing of the letters! This form of notation is called camelCase and it’s crucial to follow exactly, otherwise our functions won’t work properly.
Now, let’s create an element that we want to alter when we click on our button:
Let’s update our javascript toggle line with the class of our div:
Next, let’s create a name for the class that we want to toggle on the element when the button is clicked:
And finally, let’s define the .active class in our CSS: