JavaScript/: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
Hearken to the days of <code>view-source:</code>! The history of free online education for web programming led the web where it is today.
=JavaScript Class=
By Garrett Smith
Held weekly, Friday 7pm


In this course, I'll explore Object Oriented JavaScript as it pertains to client side web programming.
===Course Overview===
This course covers Object Oriented JavaScript, testing, and the DOM.


== Course Introduction ==  
==EcmaScript Programming Language==
I started in the year 2000. For some of what I learned, I offer a background of how I got to what I know now.
* Property accessors, <code>[]</code> and <code>.</code> <nowiki>[[Get]], [[Put]]</nowiki> and the Reference type.
* Prototypal inheritance
* typeof operator
* Arrays
* Primitive types
* Functions, callbacks, "I'm done", Event Notification System
* Scope chain and identifier resolution, Closures
* Entering an execution context (this)
* <code>call</code>, <code>apply</code>)
* <nowiki>[[Construct]], [[Call]]</nowiki>
* Literal syntax [], {}, /a/i RegularExpression literal


=== Luddite! ===
===ECMA 6===
"DHTML" is an old term, now. But the DHTML guys in 2000-2004 were the ones pushing and advocating standards-based code that became more common around 2004. Here's a little [https://bugzilla.mozilla.org/buglist.cgi?emailreporter1=1&emaillongdesc1=1&short_desc=%20&resolution=---&emailtype1=substring&query_format=advanced&emailqa_contact1=1&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&short_desc_type=allwordssubstr&email1=dhtmlkitchen free QA for Mozilla], to put it in perspective.
* Promises
* Modules


Dan Steinman's Dynamic Duo's DynLayer was a wrapper or "Decorator". It worked in Netscape 4 and IE5. Dan explained all about how it worked and the source code was pretty easy to read.  
===DOM===
* Debugging Tools
* Validator.w3.org


Mike Hall's Brainjar had some really great articles, too. His article on Events and CSS were incredibly thorough and explained the intricacies and edge cases of these specifications and their implementations.
===Patterns and Object Oriented JavaScript===
* Decorator pattern
* Custom Events
* EventRegistry
* Factory, Abstract Factory
* Strategy/delegation - Example: APE StyleTransition object.


Soon, I would set off to build my own site much like these sites. I picked DHTMLKitchen.com.
===Tools ===
* Dust Me CSS Selectors [https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/]
* Color Zilla [https://addons.mozilla.org/en-US/firefox/addon/colorzilla/]


DHTML Central forums came along and soon after that, 13th parallel. These were great sites that lead to many successful programming careers, including those of Tim Scarfe, Aaron Boodman, Daniel Pupius, Alex Russell, Michael van Ouwerkerk, Tom Trenka and many others. This was a stomping ground for us.
== Resources ==
 
* HTML Validator [http://validator.w3.org/]
We helped each other out with testing and code checks. I got some help building this blast-from-the past: [http://web.archive.org/web/20040504042251/http://girliemac.com/dress_room.html Dress Room!] a Drag'n'Drop game for girls. That was live, until two months ago, when she deleted it in anger.
* CSS Validator [http://jigsaw.w3.org/css-validator/]
 
=== Netscape 4: The Bad Old Days ===
Back in those days, to support Netscape 4 meant using document.layers, which meant DFS was needed for image swaps:
<source lang="javascript">
function findImage(name, doc) {
  var i, img;
  for (i = 0; i < doc.images.length; i++)
    if (doc.images[i].name == name)
      return doc.images[i];
  for (i = 0; i < doc.layers.length; i++)
    if ((img = findImage(name, doc.layers[i].document)) != null) {
      img.container = doc.layers[i];
      return img;
    }
  return null;
}
</source>
We hated it, of course!
 
=== Pushing the Web Forward ===
Around this time (c2003), aListApart was getting bigger and promoting anti-Netscape4 pages or warnings. I had one on my site, as did Brainjar.
 
Such code was to become a thing of the past. Instead, we focused on standards there. I learned a lot about the DOM from Brainjar and from reading specs.
 
=== OOP Books ===
Years later, I had some success in making some very detailed articles about JavaScript. I read books on object oriented programming, including:
* Agile Software Development: Principles, Patterns, Practices, Robert Cecil Martin
* Effective Java, Josh Bloch
* UML Distilled, Martin Fowler
* Refactoring, Martin Fowler
* Domain Driven Design, Eric Evans
* Head First Design Patterns, Elisabeth Freeman, Eric Freeman, Bert Bates, Kathy Sierra, Elisabeth Robson
 
=== Surly JavaScript Experts ===
I eventually found comp.lang.javascript, where I learned a lot more about ECMAScript from Richard Cornford ([http://jibbering.com/faq/notes/closures closures]), Lasse Reichstein Nielsen, Eric Bednarz, and Peter Michaux, and Thomas Lahn. My knowledge of the DOM deepened greatly during this time.
 
=== RTFM! ===
My wife printed out a copy of the ECMAScript specification, which I kept bedside and read for months. I still have this copy.
 
=== Aftermath ===
My interests now have returned towards fitness, health, athletics, and music. I have not had success in teaching music, so have to return to programming.
 
But for what I've learned, I offer a background of how I got to what I know now.  It was a long journey and I have a lot to offer.

Revision as of 10:58, 31 October 2013

JavaScript Class

By Garrett Smith Held weekly, Friday 7pm

Course Overview

This course covers Object Oriented JavaScript, testing, and the DOM.

EcmaScript Programming Language

  • Property accessors, [] and . [[Get]], [[Put]] and the Reference type.
  • Prototypal inheritance
  • typeof operator
  • Arrays
  • Primitive types
  • Functions, callbacks, "I'm done", Event Notification System
  • Scope chain and identifier resolution, Closures
  • Entering an execution context (this)
  • call, apply)
  • [[Construct]], [[Call]]
  • Literal syntax [], {}, /a/i RegularExpression literal

ECMA 6

  • Promises
  • Modules

DOM

  • Debugging Tools
  • Validator.w3.org

Patterns and Object Oriented JavaScript

  • Decorator pattern
  • Custom Events
  • EventRegistry
  • Factory, Abstract Factory
  • Strategy/delegation - Example: APE StyleTransition object.

Tools

  • Dust Me CSS Selectors [1]
  • Color Zilla [2]

Resources

  • HTML Validator [3]
  • CSS Validator [4]
Retrieved from "https://main-wiki.extremist.software/index.php?title=JavaScript/&oldid=34907"