JavaScript Guide

Project Overview

This website is an introductory guide to the basics of JavaScript and some of it's peripherals. Its purpose is to demonstrate the student's scripting abilities and general knowledge acquired in BCIT's "Web Scripting 1" course. Also incorporated in this site for demonstration purposes are some projects from the "Animation for New Media" and "Mobile Web" courses that demonstrate the student's deployment of 3rd party plug-ins and libraries.

This piece was generated for my term project in "Web Scripting 1", in Term 2 of BCIT's New Media Design and Web Development program. The assignment was to create an introductory guide to JavaScript with 3 sections covering a range of topics chosen from a provided list of suggestions.

Design Phase

It was my intention with this site to keep the design aesthetic quite minimal and focus my efforts on creating a smooth and relaxing user experience that would be conducive to learning. I wanted to use different color themes to separate the 3 sections, while maintaining common typography to give continuity throughout the site. I generated lo-fi thumbnail sketches (hand drawn) to visualize the distribution of my content over the slides for each section.

Development

I wanted to make a 'full-screen scrolling' site so I decided to use a Javascript plugin we were introduced to in class. Fullpage.js provides a simple HTML structure for smooth-scrolling 'single page' sites with optional landscape scrolling. I put each of my top-level sections in a 'section' div, and the content of each section is distributed over a series of horizontally scrolling 'slide' divs.

Content

The first section of my site explains some basic scripting concepts using lists, diagrams and code snippets. In this section, I have used the jQuery UI Library to implement collapsible 'accordions' to maximize page space. Three subheadings cover some basic JavaScript concepts: The DOM, Functions and Variables. I used the [code] tag to display code snippets in my slides. I created a chart in Adobe Illustrator to illustrate the DOM hierarchy.

Plugins & Libraries

In the second section, I describe and demonstrate some uses of the jQuery library. In the third section I describe and demonstrate some JavaScript add-ons. Examples include: GSAP (Green Sock Animation Protocol), an animation library with many useful features; and Slick Slider, an image slider plug in with many possible configurations. I have included projects from my 'Animation For New Media' and 'Mobile Web' classes as examples of each, respectively.

Acknowledgements