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

For the best experience please use the Google Chrome Web browser.

JavaScript / jQuery

AIS Value Added Forums

Headshot
Matt Swensen

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


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, 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
1JavaScript264,131
2Ruby218,812
3Java157,618
4PHP114,384
5Python95,002
6C++78,327
7C67,706
8Objective-C36,344
9C#32,170
10Shell28,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.

Additional JavaScript Resources

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.

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.