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:

<div onclick="toggle()">Click me...</div> <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. A quick search for “javascript marquee” brought me here: jQuery.marquee.

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. Ideally, you will have an assets or a specific js folder for it.

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>

Create a new file in the same js folder 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!

---

Exercise

Make a sketch that utilizes javascript in some way — practice writing your own javascript or try borrowing and implementing an existing javascript (or jquery) plugin.

---

Beyond...