JavaScript 

This page is just a little place for me to refer to and/or share some JavaScript coding examples with others. I think JavaScript is a really fun language and I love learning more about it every day.

REMEMBER: To view the source code for each example below, be sure to right-click on the example page and then select "View page source" from your web browser's popup menu.

Also, if you'd like to see more JavaScript that I've authored simply view the JavaScript source code running on this site. Most code can be found in a file called flupe-scripts.js. It's easy to read as I haven't minified any of it. I think you'll be surprised at how much is happening under the covers for such a "simple" website.

Most of the code is written using plain vanilla JavaScript, but I use JQuery to handle the animations on this site. For instance, showing and hiding the quotes as well as swapping images in and out of the image carousel on the home page are both done with JQuery. JQuery also takes care of the smooth scrolling feature used throughout this site which is especially handy on the lessons page as there is a lot of content to navigate and scroll through.

Also, be sure to check out how the photo gallery works on the music page as there's some cool stuff going on there. All of the logic can be found in a script called music.js. NOTE: Care was taken to ensure the gallery could handle viewports with varying widths, so it's responsive. I've also integrated the photo gallery with Lightbox2 which enables each image to be displayed in a modal window when it's clicked on.

Finally, I've built many of features with feature toggles such that they can easily be turned on and off. There's also a debugging flag to turn console logging on and off. I also make use of feature configuration page objects to control how things work. Good stuff!

Coding Examples

- ↑ Back to Top
  • Dependent Drop-down Selectors - This page illustrates how to code dependent drop-down selectors. That is, this example shows how the value of a "parent" selector element determines how the values of its child (or dependent) drop-down selector element gets populated.
  • Matrix Swap - This was an interview question I was asked once ==> Write code to swap a 2-dimensional square array across the diagonal: [0,0], [1,1], etc. I have since modified the example slightly to include code to populate and display the matrix as well as to accept input to determine how big the square matrix should be. I think it's a pretty good interview question and I have had the opportunity to ask it to about a half of dozen developers while I worked for SketchUp.
  • Functional Programming Examples - Here are some examples I've worked through in trying to get a better understanding of functional programming using JavaScript.
  • Array and String Problems #1 - Here is a little example that finds the first non-repeating character of a string.
  • Array and String Problems #2 - This example removes characters from a string.
  • Mortgage Calculations - This example computes a fixed monthly mortgage payment.
  • Callbacks vs. Promises - An example illustrating the difference between Callbacks and Promises. Promises can be a little hard to understand and hopefully this example will shed some light on how to use them and how they differ from "old-school" Callbacks.