Javascript Intro

Part 1

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.

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.
More on events at w3schools.

First, let’s make a button that toggles a class on a specific div.

The HTML:

<!-- first we set up the button that is triggering our javascript --> <!-- note that the element doesn't need to be a <button> to work --> <button onclick="toggle()">Click me...</button> <!-- the box that we will be altering with our javascript --> <div id="box"> the box </div>

The CSS:

.active { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; }

The Javascript we’ll place at the bottom of our body, inside a script tag:

<script> function toggle() { var element = document.getElementById("box"); element.classList.toggle("active"); } </script>

---

Part 2

Next, let’s borrow code from elsewhere and practice using different libraries and plugins with Javascript. As an example, let's try to add a marquee to our site.

A quick search for “javascript marquee” brought me here: jQuery.marquee.

You'll often come across free to use and open-source plugins/code in spaces like github. The clarity and usefulness of the documentation will vary — but over time and with practice, parsing and understanding how to implement found code will only get faster and easier over time.

Before we jump into following the setup instructions on the github page, we'll need to prepare our document a bit.

Since this script was written using jQuery we’ll need to link the jQuery library to our website. A library is a collection of functions, operations, and other bits of code that expand on or extend the use of a given programming language. jQuery is a widely used javascript library that defines itself as “a fast, small, and feature-rich JavaScript library.” Essentially, it simplifies javascript programming by reducing the length of standard javascript syntax and packaging commonly used functions into shorter, easy to use methods.
You can read more on the w3schools jQuery intro

First, we'll need to download the latest “compressed production build” from here.

Copy the jQuery .js file into your website folder.

Next, we’ll create a link to it in our html document. We’ll place it at the bottom of the body:

<script src="path-to-js/jquery.js"></script>

Next, create a new file and name it something like “functions.js”. This will be the .js file where we will add our own functions to.

Create a link to it in the same way that we linked the “jquery.js” file, but make sure it is below the jQuery reference link. The order here is important as the javascript that we will be writing in our “functions.js” file will be dependent on the jquery library above it — and as we know by now, the HTML document is being read from the top to the bottom.

<script src="path-to-js/functions.js"></script>

Now, we’ll just follow the install instructions on jQuery.marquee to set everything up!

---

Beyond...