Your browser doesn't support the features required by this presentation, so you are presented with a simplified version.

JavaScript / jQuery

AIS Value Added Forums

Matt Swensen

  • 1st Year MISM, BYU
  • Software Engineer, Lucidchart



  • Introduction to JavaScript
  • Fundamentals
  • The Good Parts
  • Additional JavaScript Resources


  • Overview of jQuery
  • Fundamentals
  • Additional jQuery Resources


  • Demo


JavaScript is an interpreted language. (usually)

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

The Ultimate Trio

JavaScript, HTML, and CSS

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.

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

Rank Language # Repositories Created


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

if(hungry) { eat(); } = '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: [
    '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.

Additional JavaScript Resources

Check out these amazing things people are doing with JavaScript:

And now, on to jQuery...


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.


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.

  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.

Additional jQuery Resources

The best place to learn jQuery is its official documentation,

One last note...


JavaScript is a great language to write big software in.