JavaScript / jQuery

AIS Value Added Forums

Matt Swensen

1^st Year MISM, BYU
Software Engineer, Lucidchart

mjswensen.com

Agenda

JavaScript

Introduction to JavaScript
Fundamentals
The Good Parts
Additional JavaScript Resources

jQuery

Overview of jQuery
Fundamentals
Additional jQuery Resources

Conclusion

Demo

Introduction

JavaScript is an interpreted language. (usually)

The most common use case for JavaScript code is within the Web browser.

The Ultimate Trio

JavaScript was originally developed by Brendan Eich and shipped with Netscape Navigator 2.0 in 1995.

In 1996 it was submitted to ECMA International to become an industry standard. It has been evolving ever since.

Wikipedia article

Did you know? Top 10 languages on GitHub in 2013:

Rank	Language	# Repositories Created
1	JavaScript	264,131
2	Ruby	218,812
3	Java	157,618
4	PHP	114,384
5	Python	95,002
6	C++	78,327
7	C	67,706
8	Objective-C	36,344
9	C#	32,170
10	Shell	28,561

Fundamentals

JavaScript's syntax is C-like. It is also weakly typed.

if(hungry) { eat(); }
foo.bar = 'baz';
var time = new Date();

JavaScript employs function scoping, which is different than block scoping.

var myFunc = function() {// New scope here.

  var myVar = 'Hello, world.';

  if(true) {// NO new scope here!
    // This would be a redeclaration of myVar and will produce
    // unexpected results, as well as errors/warnings for linters.
    var myVar = 'Goodbye.';
  }

  console.log(myVar);// 'Goodbye.', not 'Hello, world.'

};

JavaScript employs prototypal rather than classical inheritance.

There are therefore no classes in JavaScript, only objects.

So objects "inherit" from other objects.

The Good Parts

Look how easy it is to create objects in JavaScript:

var han = {
  firstName: 'Han',
  lastName: 'Solo',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  },
  occupation: 'Smuggler',
  jedi: false,
  favoriteThings: [
    'Chewy',
    'Leia',
    'Millenium Falcon'
  ]
};

Arrays have a nice literal syntax, too:

var stuff = ['apples', 'oranges', 5, true];

As do regular expressions:

var matches = /\s*(\w+)\n/g.exec(myString);

Functions are at the heart of what makes JavaScript great. The best way to get a feel for them is to jump in and try.

Interactive Sandbox (jsfiddle.net/mjswensen/KgkPG/)

View example solutions

Additional JavaScript Resources

(Free!)

(Free!)

Check out these amazing things people are doing with JavaScript:

And now, on to jQuery...

Introduction

jQuery is a JavaScript library that makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler. It also takes care of making these functionalities cross-browser.

Fundamentals

jQuery uses the façade design pattern, meaning that access to the entire API is done through a single function:

$();

Typically you pass jQuery a string CSS selector:

$('.accordion') ...

And it returns the elements, wrapped in a jQuery object, that match the selector. Then you call methods on the jQuery object to manipulate the elements.

$('.accordion').slideDown(300);// Display all elements with "accordion" class (0.3-second sliding animation)

Another common use case for jQuery is to make asynchronous requests.

$.ajax({
  url: '/users/create',
  type: 'POST',
  data: {
    first_name: 'Admiral',
    last_name: 'Ackbar',
    bio: 'It\'s a trap!'
  },
  success: function(data, textStatus, jqXHR) {
    console.log('User created successfully (' + jqXHR.status + ').');
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log('There was a problem creating the user. The server responded: ' + jqXHR.status + ' ' + errorThrown);
  }
});

Let's dive in and build our own JavaScript application with jQuery.

Interactive Sandbox (jsfiddle.net/mjswensen/bRsbr/)

View completed application

Additional jQuery Resources

The best place to learn jQuery is its official documentation, api.jquery.com.

One last note...

Conclusion

JavaScript is a great language to write big software in.

Demo (lucidchart.com/demo)