DAY/TIME/PLACE

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

• JQuery Home Page (note the Learning Center)
• The JQuery API Reference
• A popular site for 'Best of' Sites
• Mozilla Learn JavaScript Site
• Processing encoded as JavaScript
• Javascript Specification
• MV* Component Frameworks Comparison
• ECMAScript 8 New Features
• ECMAScript 7 New Features
• ECMAScript 6 New Features (compatibility)
• JavaScript SQL Workbench

part one

SYLLABUS

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:

• Welcome To Class
• JavaScript and The Document Object Model (this one page and then as much of the other past lessons made available as links as you are ready and willing to read).
• Internal v. External JavaScript
• Class Examples with subExamples reviewed in class

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.

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:

• The Week Two Lecture Notes
• JQuery Example 1
• JQuery Example 2

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)

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

Read:

• Try out the HTML 5 Event Triggers in a Web page.
• The Week Three Lecture Notes

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.

Javascript Rollovers and Window Management Techniques

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

Read:

• Week 4 Lecture Notes
• Code from Videos (use Safari in the classroom for Example 5)
• Latest Gallerific Library

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.

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:

• Week 5 Lecture Notes (and flushed out examples)

Homework:

• Work on your projects
• Review last week's workbook assignment answers.

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

Read:

• Week 6 Class Notes
• Javascript Operators Reference

Homework:

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

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

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:

• Procedural, Object-Oriented, Functional programming styles.
• Object-Oriented JavaScript
• Design Patterns
• Our 2015 class project involved this AJAX code for working with dynamic turtle tracks.
• Our class project will be working with real-time web apps whereby we create our own interesting application (an example | documentation).

Read:

• Welcome To Class
• The Good Parts, chapters 1-3
• Object-Oriented Notes

Video:

• Debugging JavaScript in Chrome

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.

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

Consider:

• The Constructor and Module Design Patterns
• The Good Parts, chapters 4 and 6
• A basic Madlib example created by a student in a previous class.

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.

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:

• Review object-oriented concepts via student constructor (code bundle) and module examples
• Guest presenter: Shawn Thomas, University of Washington (local example | code bundle)
• Asynchronous data passing with AJAX
• Popular to send text, XML, or JSON
• Overview of Server Side Technologies (MAMP, WAMP, LAMP, node.js)

Consider:

• a minimal native AJAX base example.
• a clean use of AJAX with the HTML5 canvas (image converter here).
• a basic JQuery approach to AJAX with a face example that executes Javscript incrementally.
• AJAX applied to the sea turtle example built in last year's class.

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.

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

• Review a student's observer pattern example (code bundle).
• Consider the node.js library for networked web applications.
• Review Shawn Thomas' code with an AJAX available service.
• Study the observer pattern example, using our module syntax.

Homework:

• Work on your Observer pattern project as an extension of what we did in class
• Review using node with the AJAX face example as we did in class
• Consider JSON (JavaScript Object Notation) for sharing data

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.

• We'll look at inheritance via a student's example and then focus on the MVC design pattern.
• Review Angularjs as a MVC derivative (code example).
• Review Knockout as a MVC derivative (Kevin's example). Example uses an API
• Review how Backbone provides MVC pattern support (code example).

Read:

• The MVC discussion in our design patterns resource.
• The Top 10 Javascript MVC Frameworks Reviewed

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.

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:

• We're reviewing RequireJS, Processing, and the D3 library as a result of class interest.
• We'll show off any work anyone has done that they want to share (my project here).
• Check out the code for our final real-time web application (read the instructions).

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.