JavaScript for Teachers

To teach my students basic JavaScript, I use the Codecademy JavaScript modules, along with, you know, a curriculum.

The Codecademy module leads right into this lovely project:

See the Pen Technology (Random Colors) by S-K (@bsk) on CodePen.

Press RERUN a few times. What do you notice?

Here, I'm going to highlight a few uses of JavaScript.

Event Handlers

Event handlers are a piece of JavaScript code that run when something happens on the page, like a click:

See the Pen JavaScript Lightbulb by S-K (@bsk) on CodePen.

or the mouse hovering over something:

See the Pen Interactive Page (onmouseover) by S-K (@bsk) on CodePen.

Here, we use onmouseover to change the color of the navbar, and onclick to toggle the button.

Thanks to Aankit Patel for creating this demo! ↩

So, that's fun, but I want to focus on JavaScript functions. Why? Because they let you do awesome stuff like this →

Bootstrap has a whole bunch of JavaScript built it. With a little bit of work, you can make this:

I can collapse part of a page!

This is how I displayed the code in the Typography lesson.

This is the collapse.js plugin. You can find it here.

This is the modal.js plugin. You can find it here.

If you are beyond the Bootstrap examples, this is a clock, built in JavaScript, where the color is set by the hex # of the time.

Advanced JavaScript Project

									//let's display the current time var d, h, m, s, color; function displayTime() { d = new Date(); //new data object h = d.getHours(); m = d.getMinutes(); s = d.getSeconds(); //add zero to the left of the numbers if they are single digits if
										(h <= 9) h = '0' + h; if (m <= 9) m = '0' + m; if (s <= 9) s = '0' + s; color = "#" + h + m + s; //set background color document.body.style.background = color; //set time document.getElementById("hex").innerHTML
										= color; //retrigger the function every second setTimeout(displayTime, 1000); } //call the function displayTime();

See the Pen Color Clock by S-K (@bsk) on CodePen.

Who doesn't love interactive footnotes? ↩

This is still a work in progress... ↩

Javascript

Event Handlers

If you build it...