JavaScript Tutorial

(for CSE 90025 FUTURES HTML5 and JavaScript)
10 sessions hours.

Sections:

1. Course intro and HTML Review
2. Javascript Intro and Basics
3. JavaScript Basics
4. Object Oriented JavaScript
5. Basic DOM Interaction
6. Event Handling
7. Animation
8. Building Interactive Webpages aka Games
9. Projects
10. Conclusions / Presentations

Introduction:

Behavior:

Do no harm. And other advice.

Practice  Iterative Design.

Respect others. Do not distract. Do not belittle. Special care will be taken for women and minorities as they are regularly disrespected. Racism or sexism in any form will NOT be tolerated in this class!

History.

GitHub account setup post your first code (from the first excercise) and raise an issue on the class repo introducing yourself.

DevTools Console is a sort of IDE built into every copy of Chrome

Troubleshooting and Common errors and Cuiosities in Javascript

Glossary

Excercises:

https://www.javascript.com/

Short Circuits

'cat' && 'dog' what does that return? Why? How might that be useful?

'cat' || 'dog' what does that return? Why? How might that be useful?

hints: && is logical AND which needs to know that both values are true. || is logical OR and doesn't need to know the second value if the first is true. 'cat' and 'dog' both evaluate to true.

var attrib = obj && obj.subobject && obj.subobject.attribute || 'default'
or if attribute is just one level down, use:
var attrib = obj ? obj.attribute : 'default'

var thing = getThing(parameter) || reporterror(message)
Keeps the focus on the expected action but still handles occasional errors. e.g.
var contents = fs.open('filename') || process.exit(1) (actually only useful in node)

See also:

• https://dev.to/zeyu2001/build-a-simple-chess-ai-in-javascript-18eg +
• https://codecombat.com/students?_cc=WestShelfRoad Learn JavaScript while playing a game.+
• http://jsforcats.com/ JavaScript for Cats
• https://www.udacity.com/course/html5-canvas--ud292 From pixels to animation+
• https://www.udemy.com/course/javascript-essentials/ +
• https://www.udemy.com/course/code-your-first-game/ +
• https://glitch.com/edit/#!/difficult-termite-yx43knmnsd?path=index.html%3A8%3A4 Shared hosting and community for Javascrip apps.

  .