The Language of the Web

• JavaScript and what it can do
• Kickstart your learning in JavaScript
• NOT a crash course on JavaScript

• Also known as Mocha, LiveScript, JScript, ECMAScript
• Developed in an extremely short amount of time
• Scripting language
  • Not compiled, interpreted and executed on-the-fly
• Dynamic typing
• Supports object-oriented, imperative and functional programming styles
• Despite its name, it has nothing to do with Java

• Provides interactivity to web applications
• Mainly executed in the browser to:
  • Manipulate DOM elements
  • Load content into the document without reloading
• Can be used in an application's back end using NodeJS

• No installation needed!
  • Unless you're doing Node
• JavaScript comes with all browsers. Yes, even IE!
• Simply fire up your browser's console

• Similar to C
• Learn it yourself (:
• But beware of wats... (from 1:22 onwards)
• Read more about JS quirks here

• Case-sensitive
  • getElementById !== getElementByid
• Semicolons are optional
  • But please add them
• Variable scoping
  • Blocks do not have scope
  • Only functions do
  • Global variables

• Automatic Semicolon Insertion (ASI)

// Before ASI
a = b + c
foo()

// After ASI
a = b + c; foo() // All is good

• However, ASI is only applied if the parser needs to do so in order to make sense of the code in question.

// Before ASI
a = b + c
[1].push(a)

// After ASI
a = b + c[1].push(a) // KABOOM!

• Declaring variables without the var keyword:

> var foo = function () { bar = 1; }
> foo();
> console.log(bar); // bar is now a global variable
1

• You almost never want to use globals

• Closures are functions that refer to independent variables.
• The function defined in the closure 'remembers' the environment in which it was created.

function makeFunc () {
  function displayName() {
    alert(name);
  }
  var name = 'CS3216 Rocks!';
  return displayName;
}

var myFunc = makeFunc();
myFunc();

• A function factory can create closures with different environments

function makeAdder (x) {
  return function (y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

• Callback functions are derived from functional programming
• A function is passed into another function as a parameter
• Callback functions are used in:
  • Asynchronous executions
  • In Event Listeners/Handlers
  • In setTimeout and setInterval methods
• Read more on JavaScript callbacks here
• 
• Common beginner mistakes

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, i * 1000);
}
// vs
for (var i = 0; i < 5; i++) {
  function print (x) {
    setTimeout(function () {
      console.log(x);
    }, x * 1000);
  }
  print(i);
}

• To run javascript in your HTML file, simply do:

<script src="myscript.js"></script>
// or
<script> console.log('Hello World!'); </script>

• Retrieving DOM elements using JavaScript:

document.getElementById('some-id');
document.getElementsByClassName('some-class');
document.getElementsByTagName('some-tag');

• Try this on IVLE class roster!

var rows = document.querySelectorAll('tr[class*="dataGridCtrl-Alter"], tr[class*="dataGridCtrl-Item"]');
for (var i = 0; i < rows.length; i++) {
  rows[i].childNodes[3].innerHTML = 'Nala Cat';
  var img = rows[i].querySelectorAll('img')[0];
  img.src = 'http://nalacat.com/wp-content/uploads/2013/01/photo-2.jpg';
}

• Attach functions to events
  • Examples of events: click, focus, blur, hover, change, keydown, etc

<div class="clickable" onclick="handleClick();"></div>
<div class="focusable" onfocus="handleFocus();"></div>
<div class="keyable" onkeyup="handleKeyup();"></div>

function handleClick() { ... }
function handleFocus() { ... }
function handleKeyup() { ... }

• Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications
• Used by Facebook, Google, Twitter, YouTube, Yahoo, Wikipedia, etc
• In fact, Vanilla JS is already used on more websites than jQuery, Prototype JS, MooTools, YUI, and Google Web Toolkit - combined
• Download the source here

• jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML
• Write less, do more
• Use either the jQuery or $ object
• Get the source here

$(document).ready(function () {
  // Do your stuff 
});

• Have to wait for DOM to load before you start manipulating it

• jQuery comes with some handy animations including: fadeIn, fadeOut, hide, slideUp
• jQUery animations are slow
• Use CSS3 animations instead

• Beware of DOM injection when rendering user-submitted content on your webpage!
• Use jQuery's .text() method for encoding of special characters such as < and >

• UnderscoreJS
  • A library of functional programming helpers, such as map, filter, reduce, etc
  • Recommended for functional all programmers
• RequireJS
  • Forces you to write modular javascript
  • Handles nested dependencies
• Bower
  • A package manager, not a library
  • Keeps your libraries structured

• Why use front end MVC frameworks?
  • Prevent DOM manipulation logic from being intermingled with application logic and network requests
  • Better organziation of front end code
  • When does it make sense to use an MVC framework for JavaScript
• Examples: AngularJS, EmberJS, BackboneJS.
• Bonus: Full stack JS framework - MeteorJS
• JavaScript Framework Comparisons

• DailyJS
• SuperheroJS
• Best Resources to Learn JavaScript
• Must Watch Videos of JavaScript

• Eloquent JavaScript
• Secrets of the JavaScript Ninja
• JavaScript: The Definitive Guide
• JavaScript: The Good Parts
• 

• JavaScript:The World's Most Misunderstood Programming Language
• Douglas Crockford: The JavaScript Programming Language
• Semicolons
• The Truth About Semicolons in JavaScript
• JavaScript Function Closures