YEAR2023

CLASS SYLLABUS

DAY/TIME/PLACE

Part One
Summer 2023 (starts June 20th)
Online Asynchronous

Part Two
Winter 2024 (tentative)
TBD, 6:30pm-9:30pm
Instructor: Bruce Donald Campbell

Faculty, Continuing Education - RISD, Providence, RI
Director, Watersheds Project, Providence, RI
Email: bcampbel01@risd.edu bcampbel01@risd.edu

Prerequisites: Digital Design for the Screen or equivalent experience

DESCRIPTION

JavaScript is a platform-independent, event-driven, interpreted programming language that enables a web designer to add exciting features to what might otherwise be a static web page.

Part one of this course starts with an introduction to the document object model and a review of basic programming concepts and builds momentum as students learn to use and customize freely available scripts and to avoid common pitfalls. Browser integration with a JavaScript enhanced page is also a lesson topic that pays heed to the primary objective of all web authors as they create an attractive site with full data retrievability. Class exercises give students the experience of setting up a small set of web pages using examples of JavaScript, such as status bar messages, event handlers and image rollovers.

Part two looks covers a more in-depth exploration of programming concepts to build a better instinct for writing popular emerging code styles such as Asynchronous JavaScript and XML (AJAX) and object-oriented library development (for building personal design frameworks). Advanced interactive data processing design and application development are covered as a by-product of investigating available frameworks ideal for JavaScript-based development.

GRADING

Class participation - 20%
Written project - 40%
Homework assignments - 40%

RESOURCES

Books

There are no required books associated with part one of class - instead, we will use a multitude of online tutorials, advanced research skills, our imaginations, and common sense to piece together a model for how Javascript opens up the Web page to enrich our day-to-day lives and where it might support new human-enabling features in the future.

There are two recommended books for part two of the sequence. They are Javascript: The Good Parts and Learning JavaScript Design Patterns. I would encourage you to dive into The Good Parts early, often, and in the hiatus between parts one and two of this class.

A free book to consider is Eloquent Javascript (though it is getting a bit outdated now).

Course Handouts and On-line Readings as identified below and in class


OTHER LINKS

part one

SYLLABUS

WEEK1

welcome and getting started

Welcome to Javascript and the Document Object Model

Goal: To get over any initial angst about learning a scripting language by building a good internal model of how a scripting language builds upon a Web language and takes advantage of available resources in the Web browser.

Read:

Homework:

  • Pre-test: Please write a 500-word essay of your current understanding of Web scripting languages and what they provide a Web designer, or if you think you know nothing, admit it and let me know what you do with any programming or scripting language general. We will discuss our understanding online and debunk any myths that emerge as a level set.

WEEK2

scripting languages

Goal: Begin your self-dialog when exploring JavaScript code and library examples so that you build your personal framework for what JavaScript is and how JavaScript works.

Read:

Homework:

  1. Read more about the Document Object Model.
  2. Review the week two homework suggested diagramming solutions of examples we did in class.
  3. Diagram the JavaScript examples page we used in Week One and e-mail me your attempt before next week's class.
  4. Start with the JQuery Learning Center
Videos:
  1. Video One-31 minutes (Introduction to Video Night)
  2. Video Two-14 minutes (Form Field Prompt Example)
  3. Video Three-21 minutes (JQuery Expand/Collapse)
  4. Video Four-34 minutes (JQuery Draggable and Clone)
  5. Video Five-16 minutes (Editable Content with Local Storage)
  6. Video Six-22 minutes (HTML 5 Canvas)
  7. Video Seven-15 minutes (Gallerific Framework Example)
  8. Video Eight-22 minutes (JQuery API and Tutorials)

WEEK3

events and user interactivity

Goal: Become fluent at understanding Web browser events so that you can write code to handle them for providing intended user interactivity.

Read:

Homework:

  1. Review the workbook diagramming from Week 2
  2. Check out the interactive debugging of the online JSBin tool.
  3. Check out a JavaScript coding tool.
  4. Review this Student Example from class.
  5. Create a project proposal document as described in class.

WEEK4

popular uses of Javascript

Javascript Rollovers and Window Management Techniques

Goal: Gain experience with the most popular JavaScript use cases on the Web today.

Read:

Homework:
  • Work on your projects (submit a project plan if you have not done so) and play with examples if you have time left over.

WEEK5

loops and conditions

Goal: Learn the features of JavaScript that take advantage of what computers do especially well and humans can find tedious — loops and condition recognition.

Read:

Homework:

WEEK6

javascript libraries

Goal: To explore a shared journey of JavaScript library exploration together so that we build communication skills typical of a scripting specialist.

Read:

Homework:

  1. Projects are Due five days after our last class meeting.
  2. Check out the class project submissions

----------------------------------------------------------------------------------------------------

JAN6 TH

part two

DESCRIPTION

If you are acquainted with JavaScript, you know it as a platform-agnostic, event-driven, interpreted programming language that delivers the dynamic user interfaces, response times and exciting features Web users expect. This course helps Web designers to broaden their existing knowledge of the language. Students explore programming concepts to develop a better instinct for writing the popular emerging code styles such as Asynchronous JavaScript and XML (Ajax), as well as learn how to use JavaScript libraries such as jQuery. We investigate available frameworks that are ideal for JavaScript-based development, and discuss advanced interactive data processing design and application development.

SYLLABUS

advanced javascript concepts

Goal: To gain a better fundamental understanding of programming concepts that are directional to Web development and available for use in the JavaScript language.

Concepts Covered:

Read:

Homework:

  • Create a basic JQuery Project like the slide show demonstrated in class
  • If you are interested in data visualization, take a look at the Protovis and/or D3 libraries.

JAN13 TH

object-oriented JavaScript

Goal: Gain experience with all the JavaScript language components available for interactive data processing with your target audience.

Consider:

Homework:

  1. Review the Yahtzee project using the Constructor and Module Design Patterns
    (note the encapsulation of Die.js and Rules.js)
  2. Finish your own simple project using the Constructor and Module Design Patterns
  3. Consider this video that discusses encapsulation.

JAN20 TH

introduction to ajax

AJAX (Asynchronous JavaScript and XML)

Goal: Become fluent at communicating AJAX concepts to others and begin to write your own examples of proper AJAX use.

Concepts Covered:

Consider:

Homework:

  1. Expand upon any of the AJAX examples from class or create one of your own from scratch.
  2. Get node.js working on a machine you have access to.
  3. Launch two node.js examples from the your node bin directory within a terminal
    (e.g. ./node launch_script.js) to anticipate next week's class.

JAN27 TH

ajax and the observer pattern

Goal: Gain experience with the current popular interactive method for data sharing in applications within a Web browser. Code: Homework:

FEB3 RD

model-view-controller

Focus on the Model-View-Controller Design Pattern

Goal: Learn the features of JavaScript that allow you to implement the tried-and-true successful design pattern known as MVC.

Read:

Homework:
  • Consider the (many) arguments made in Magic Ink. Are his information software revolution steps ideal?:
    1. Generate widespread recognition of the need for designers to be involved.
    2. Find those people with talent for visual communication in design.
    3. Complement those designers' talents with skill achieved through education and practice.
    4. Supplement those designers' talents and skill with much better tools and platforms.
    5. Provide a better environment where experimentation, evolution, and interplay of ideas can thrive.
  • Work on an MVC project
  • Take a look at a node.js server script that comes from work with a client of mine.

FEB10 TH

javascript libraries

Revisiting Javascript Libraries for AJAX Integration

Goal: To share JavaScript library exploration together so that we build a critical eye in reviewing AJAX implementations.

Read:

Homework:

  1. Final Project is due Sunday at 11:59pm
  2. Keep reading JavaScript The Good Parts and playing with more Design Patterns.

Turn in your project contribution by 11:59pm on February 13th.