An introduction to JavaScript

October 14th, 2014

By Arne Hassel

• Presentation: megoth.github.io/jsintro
• Repo: github.com/megoth/jsintro

Overview

• Why learn JS?
• Examples of applications
• Coding
• Tips

Why learn JavaScript?

• Just another programming language?
  • How does it compare to other programming languages?
• (Isn't it really, really messy and unstructured!?)

Just another programming language?

• De facto programming language of the (front-end) web
  • Supported by all major browsers
  • (Is getting more popular on the back-end as well)

Compared to Java

(Note: List is not exhaustive)

Complexity

• JS certainly has its quirks
  • Examples: wtfjs.com, Wat (video)
  • Cross-browser issues are a pain in the ass (check Can I use...)
• But there are tons of resources
  • Check your code: JSLint, JSHint
  • A large community (e.g. Stack Overflow)
  • Testing tools (e.g. Karma, Buster)
• And lots of frameworks
  • jQuery, AngularJS, Ember.js, +++
  • (Some even have good documentation!)
• Also, several pre-compilation language options:
  • CoffeeScript, TypeScript, Dart

Examples of applications

• Webpages/Apps
• Games
• Data Visualizations
• Program robots

Webpages/Apps

• Tons of libraries
  • jQuery, Moment.js, +++
• Tons of frameworks
  • Angular, Ember.js, +++
• Several options for cross-device apps
  • Cordova, Ionic, +++
• Cutting-edge APIs available through Polymer

Games

• More and more games
  • Case studies at HTML5 Rocks, HexGL
• Many game engines
  • Unity, Unreal Engine, Turbulenz, +++

Data visualizations

• D3.js
  • Mike Bostock

Robots!

• Cylon.js
• NodeBots
• NodeCopter

Syntax

• Variables
• Functions
• Objects
• Arrays

Variables

Functions

Objects

Arrays (lists)

Utilizing JS in webpages

• Inline code
• Script tags
• External files
• Progressive enhancement

Inline code

Script tags

External files

Progressive enhancement

Lets create a clock!

• Using "pure" JS (-ish)
• Using jQuery
• Using AngularJS

Using "pure" JS (-ish)

Using jQuery

Using AngularJS