JavaScript 101

gistfile1.md

Why?

More and more of our application code will live in the browser over time as JavaScript, and perhaps our server code will utilize the same language as well. Luckily, it's pretty easy to learn JavaScript. JavaScript is becoming more central to web applications.

With this in mind, it will be beneficial for non-developers to gain a better understanding of this language, and how it is used in the browser and on the server. We can start out simple, and work up to the level of proficiency required to aid in debugging web app issues, writing automated end-to-end tests. Perhaps you will find yourself developing a web application of your own.

Course Outline

I hope to hold 1 - 1.5 hour sessions every 2-3 weeks, depending on my schedule. Perhaps other developers can assist as well, schedule permitting.

Week 1: "Hello, Widen": Basic Concepts

• What is JavaScript?
• Why is it important?
• Objects, Functions, and primitives

Week 2: JavaScript & the Browser

• HTML tags and their JavaScript counterparts
• Browsers and JavaScript (implementation differences)

Week 3: Extending Objects & What is this?

• What am I? Type determination & speculation
• Inheritence
• Scope
• Context

Learning/Session Tools

All tools should be web-based, simple to use but powerful, useful for collaboration and after-session reference, and demonstrative of the power of JavaScript.

• GitHub: to hold/serve code (in a public repo) from sessions for reference, and for participants to ask questions and request future topics
• codio.com: real-time collaborative coding, no-nonsense web-based IDE, and because it's cool
• slid.es: for (public) slides to drive the session content

I'd be willing to teach a topic.

Some links for learning JS that have served me well:

• http://bonsaiden.github.io/JavaScript-Garden/ (so useful for learning the quirky bits)
• http://eloquentjavascript.net/

Others that I just found:

• https://developer.mozilla.org/en-US/learn/javascript
• https://github.com/rwaldron/idiomatic.js

Interactive Tutorials:

• http://nodeschool.io/ (with a "make your own workshop" module: https://github.com/rvagg/workshopper)

Another idea is to set up jsfiddles with sandboxed environments. Small problems related to the topic being taught could be baked into the fiddle as exercises.

I also liked James Shore's test-driven teaching style where he would write a feature, and then write tests for it. The feature and tests were designed in a way that new concepts were covered as development went on.

Perhaps you will find yourself developing a web application of your own.

I think that should be the goal. It's one thing to apply what you've learned to a small problem at hand, it's another to apply multiple things you've learned to a larger problem.

http://nodeschool.io/ (with a "make your own workshop" module: https://github.com/rvagg/workshopper)

I really want to focus on JavaScript in the browser. I think it will be important for those attending the sessions to be most comfortable with this environment. I plan to keep it simple and primarily use the snippets tab in Chrome dev tools for all code written during the sessions.

Another idea is to set up jsfiddles with sandboxed environments. Small problems related to the topic being taught could be baked into the fiddle as exercises.

I'll probably just start with something simple like console.log("hi") and break down what is going on when this command is invoked. For example, what is console? What is log? Where did console come from? What are two other ways to render output via JavaScript? Each of these questions can easily evolve into many sub-topics that will allow basic concepts to be covered.

I also liked James Shore's test-driven teaching style where he would write a feature, and then write tests for it. The feature and tests were designed in a way that new concepts were covered as development went on.

It's important to keep in mind that these are sessions for non-developers. It would be nice if some of those attending were able to write their own non-trivial web apps after the sessions, but this is likely not a very realistic goal. The primary goals are to make those attending more comfortable with JavaScript, and the dev tools to aid in troubleshooting bugs and perhaps write some E2E or even unit tests using jasmine. It may be useful to cover dev tools in all major browsers as well.

I really think it's important to go slow in these sessions and set realistic goals based on the background of those attending.

I really want to focus on JavaScript in the browser.

Agreed. I think there is a lot of cross-over with the basic constructs (primitives, conditionals, loops, lambdas, etc.) though. I also know that the popularity of grunt, karma, et. al -- none of which run on the browser -- are increasing. It would be useful to be familiar with both environments, but I am in favor of prioritizing the browser.

I'll probably just start with something simple like console.log("hi") and break down what is going on when this command is invoked

I think this is good to get started; practical usage is important too. console.log and console.dir are indispensable for debugging so maybe having an exercise where participants use that strategy to solve a problem would be beneficial. For example, maybe you would need to see what was going on inside of an event handler -- maybe the code in the exercise has a typo on a property on an event or something -- and one way to solve the problem is to just console.log the object and fix the typo.

This way, you are learning, then applying what you've learned. This process (disclaimer: not a teacher) gets the information across in multiple ways which helps with learning and making more connections.

It's important to keep in mind that these are sessions for non-developers. It would be nice if some of those attending were able to write their own non-trivial web apps after the sessions, but this is likely not a very realistic goal.

Baby steps at first, but it's possible. I think the course would have to be well designed and strategized for it to happen. I really do think that having a pre-built testing environment and using that as a tool for teaching would be beneficial at some point. Maybe just a small repo with karma and jasmine installed already where the students could use assertions on simple things.

I'm looking for more topics to include in the sessions. Preferably "basic concepts" topics. Any suggestions, please let me know. I'll be adding to this list over the next few days, and hope to start scheduling sessions after that.

Suggestion:

Events

• What are events? What events are possible?
• How to deal with events
• Event bubbling

Asynchronous APIs

• XMLHttpRequest
• Handling Failure
• Promises

Double vs. Triple Equals

Browser Quirks

Talk about the major differences between the browsers, and things to keep in mind.

• IE8
• IE9
• Mobile
• ... ?

Good stuff. Events and Async APIs are topics with some overlapping concepts. I'm finding that I actually have less time to plan all of this out than I imagined. So, I'll probably just plan one session at a time. I'm going to start putting together details for Week 1 shortly. If you have any suggestions for week 1 that aren't already addressed, let me know.

I'll probably use a public slides.com for the sessions. The slides, as per usual with my presentations, will contain cues, and I'll fill in the details via speaker notes and on-the-spot train of thought.

Slides will be here

Per @feltnerm's suggestion, I think I'll create a Github repo to host the session notes, code (,etc?). It can also be used for the participants to ask questions regarding the topics and suggest upcoming topics.

I'd like to move all of this over to the repo I created for these sessions. I'll continue to port stuff over from here, but I'd like any further collaboration/planning to happen in the repo.