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.

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 set up instructions on the github page, we'll need to prepare our document a bit.

Since this script was written in jQuery we’ll need to link the jQuery library to our website. “jQuery is a fast, small, and feature-rich JavaScript library.” Essentially, it simplifies javascript programming.

Download the latest “compressed production build” from here.

Copy the jQuery .js file to 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 that we will add our specific 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 link.

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

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

---

Beyond...