Javascript & jQuery

CDGD304 - Fall 2011
http://bit.ly/massart-304-8

HTML/CSS Are Static

(Now only mostly true, as you can add interactivity via CSS Hover, Animation)

Anything else dynamic is "programmed"

Animation effects
Sliders
Drag and Drop
Autocomplete
Ajax

And, unless it's flash..

It's programmed in Javascript
"Lingua Franca" of the Web

Disclaimer:

Programming is Hard

We'll do our best..

But you're not going to learn it in a day. It take a lot longer than that...

About Javascript

First created in '96
Nothing, whatsoever to do with Java.
People hated it for a long time. Now people love it.
Now can be used for:
- Client Side
- Server Side
- Mobile (iPhone, Android)
- Desktop

Javascript is both:

The worlds most popular language (beat Visual Basic)
The world's most unpopular language (people love to complain about it)

Why so much hate for JavaScript?

Incompatible Implementations
OO, but not a classical inheritance
Initial Implementation were slow
It looked like a silly toy next to Flash
No AJAX to start with (while Flash did)

What Changed?

The "Gmail" and "Goole Maps Era" (2004-2005)
Google Maps
"Framework Era" (2005-Today) jQuery
"Chrome Era" (2008-Today)
The "javascript MVC era" (2010-Today) salon.io

Where does Javascript go?

Similar to CSS - multiple options (notice: type='text/javascript' NOT required in HTML5):

Include external .js file via:
```
<script src='file.js'></script>
```

Include in the <head> tag

<script>
 Our Javascript Code Goes Here
</script>

Include in the <body> tag

<script>
document.write("Let's write some HTML right here!");
</script>

Include as an event

<a href='javascript:void(0);' onclick='alert("Hello World!");'>

Where do we prefer?

Also Similar to CSS - the less 'inline' the better. (Generalization)

Downright Bad: Include as an event
Even Less Good: Include in the <body> tag
Less Good: Include in the <head> tag
Best: Include external .js file

Again, we're not really teaching "programming"

There's way too much to try to cover in 1 class

We're really want to be able to use jQuery

And need just enough Javascript to get by.

3 Main Goals for today

Be able to read and understand some JavaScript
Be able to manipulate documents with jQuery
Be able to use jQuery plugins

What is jQuery?

Most of what we do in Javscript is manipulate the DOM and Ajax
These are very long and cumbersome to do in straight javscript
On top of this, different browsers have different behavior
jQuery is a library that makes this easy and clean and consistent
Works with CSS selectors

What pieces of Javascript do we need to understand?

Strings and numbers - basic pieces of information
Variables - where to store pieces of information
Functions - how to call reusable pieces of code
Callbacks - functions that get called in response to something else
Arrays - store a list of values (like a list of variables)
Objects - We just need to understand a little bit on these
Conditionals - controlling what parts of a program executes

A Little Demo

The goal is to understand everything in here by the end of class today

<script>
  $(function() {
  var images = [
    { img: "images/image1.jpg", 
      title: "This is a drop",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image2.jpg", 
      title: "Dog here",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image3.jpg", 
      title: "Some sort of building",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image4.jpg", 
     title: "Nightscape",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" }
    ];
  
  $.each(images,function() {
    var imageInfo = this;
    
    var img = $("<img>").attr({'src' : imageInfo.img,
                     'width' : 128 });
    img.click(function() {
       window.open(this.src,"mywin","status=0,toolbar=0,width=400,height=400");
    });
    
    img.hover(function() {
      $(this).addClass("selected");
      $("#thumbnails img:not(.selected)").stop().animate({opacity: 0.4});

      $("#details").show();
      $("#title").text(imageInfo.title);
      $("#description").text(imageInfo.description);

    },function() {
      $("#thumbnails img:not(.selected)").stop().animate({opacity: 1.0});
      $(this).removeClass("selected");
      
      $("#details").hide();
    });

    img.appendTo("#thumbnails");
  });
  
});
  
</script>

<section id='thumbnails'>
  
</section>
<section id='details' style='display:none;'>
<h2>Title: <span id='title'></span></h2>
<p>Description: <span id='description'></span></p>
</section>

<style>
  #thumbnails img {
    margin:10px;
    border:4px solid white;
  }
  
  #thumbnails img:hover {
    border-color:#CCC;
  }
</style>

Javascript Housekeeping

<script>
  // Two double slashes are one line comments

  /* 
     Slash star, star slash are multi-line comments
   */

  // Statements should end in a semi-colon:
  alert("Statement 1");
  alert("Statement 2");
</script>

Hello World!

Call the built in 'alert' function and have it say "Hello World!" We don't use this all that often (it's ugly) - but it's really useful for debugging.


  <script>
     // Function call to Alert goes here
  </script>

Our friend the console and console.log

Puts a result in the console - use Chrome or Firebug (must be open)


  <script>
     console.log(10);
  </script>

What is a variable?

Stores a value
Deﬁned with “var” keyword*
Can be assigned with a single "="
Can be changed with +=, -=, *=, etc. (which are just shortcuts to ( i = i + 1 )
Are assigned by value to simple types, reference for objects.

Variables

Let's do some math and some string manipulation and write out to the console.

  <script>
     var a = 10;
     var b = 5;

     // b += 10;

     console.log("A: " + a);
     console.log("B: " + b);
     console.log("A + B: " + (a + b))

  </script>

Scope

You can only use variables that are defined in the scope you call them.

  <script>
     var a = 10;

     function myFunc() {
      var c = 200;

       console.log("in myFunc A: " + a);
       console.log("in myFunc C: " + c);
     }
     myFunc();

     console.log("A: " + a);
     console.log("C: " + c);
  </script>

Functions

Created with the "function" keyword, create reusable pieces of functionality.

  <script>

    function sqr(num) {
       // call console.log on the square of num
    }

    sqr(10); // Should log 100
    sqr(5);  // Should log 25
    sqr(4);  // Should log 16
  </script>

Returning from Functions

Use the return keyword to pass a value back to whatever called the function

  <script>

    function sqr(num) {
       // return the square of the number
    }

    console.log(sqr(10)); // Should log 100
    alert(sqr(5));  // Should alert 25

    var value = sqr(sqr(4));  

    alert(value);  // What is this?
  </script>

Timeouts

we can use setTimeout to have something happen later, try it

  <script>

    var delay = 5000; // Delay in MS

    function callback() {
         alert("Timer went off!");
    }

    setTimeout(callback,delay);

  </script>

Anonymous functions, callbacks

We don't have to give our callback function a name, we can do it anonymously

  <script>


    setTimeout(function() {
      console.log('Timer1');
    },5000);

    // Add a second timer, called 5 second after the first

  </script>

Why callbacks?

A lot of stuff on the web happens "Asynchronously" - AJAX, user actions, etc

  <button id='my-button'>Click me Yo!</button>
  <script>

    var clickCount = 0;

    // This here is some jQuery, don't worry about it
    // We'll cover it in a few slides.
    $("#my-button").click(function() {
      clickCount += 1;

      alert("Time's I've been clicked:" + clickCount);
    });
  </script>

Arrays

Stores an “array” of values.
Usually created with the bracket [ ] operator:
```
var arr = [ 10, 20, 30 ];
```
Pull out a value using square brackets [] starting at 0:
```
arr[0] // 10
arr[1] // 20
```
get the number of entries with .length
```
arr.length // 3                
```

Playing with arrays

  <script>

    var myArray = [ 0, 10, 20, 30, 40 ];

    console.log("myArray[2] is:" + myArray[2]);

    var index = 2;

    // Using a variable as an index
    console.log("myArray[" + index + "] is:" + myArray[index]);

    // Showing all variable values with jQuery $.each and a callback
    // Stored in this
  /*  $.each(myArray,function(idx) {
      console.log("myArray[" + idx + "] is:" + this);
    }); */

  </script>

Objects

A way to store data and methods together.
Array was an example of a built in object
Can create with JSON notation:
```
var obj = { a: 1, b: 2 };
```
Access the same as arrays - with square brackets.
```
obj['a'] // 1 
obj['b'] // 2
```
Can also access with the dot operator
```
obj.a // 1
obj.b // 2
```
Can also have functions as properties
Those functions can use the this property when called

Objects

  <script>
    var myObject = { 'a' : 10,
                     'b' : 'Stringer',
                     'c' : 20
                   };

   // Try pulling out various pieces of myObject using
   // both square brackets and the dot operator

    alert(myObject.a);

  </script>

Conditionals

Things in javascript are either true or not true.
0, false, null, "" are all false
Everything else is true.

Use operands to check relationship between two values:

==, ===, <=, >=, !=

1 == 2 // false
1 == 1 // true

Basic conditionals:

```
if(condition) { }
```
```
if(condition) { } else { }
```
```
if(condition) { } else if { } else { }
```

Conditional Exercise

Use a conditional to check if a user confirmed a ok/cancel question. Then use prompt and test against a return value.

  <script>
    console.log(confirm("Really delete everything?"));
    console.log(prompt("Delete how many items?"));
  </script>

jQuery Basics

Everything is “namespaced” inside of the jQuery object, which is aliased with “$”
...which means everything you do in jQuery starts with a $
Uses CSS selectors for picking pieces of the DOM out.

Docs are your Friend

Get comfortable with docs.jquery.com

Loading jQuery

Include from a CDN or locally

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

Or

<script src='js/jquery.min.js'></script>

Need to make sure we have the file in the right location, can view in browser if there's a problem.

Using jQuery

Since we often include Javscript in the head of the document, we need to make sure we wait until the page is loaded before we use it. We can use the jQuery bind function to load stuff at the appropriate point.

<script>
$(document).bind("ready",function() {
  // Dom Loaded
});
</script>

Why this is important..

<script>
  $("#header").html("Modified Header");
</script>
<h2 id='header'>A Header</h2>

Shorthand

Since this is so common, we can use a shorthand for this of $(function() { }) ...

<script>
$(function() {
  // Dom Loaded
});
</script>

Basic selection + manipulation

Let's try out $.text, $.html, $.hide, $.show, $.css, $.attr, $.addClass, $.hasClass, $.removeClass Selector Docs / Manipulation Docs

<script>
$(function() {


});
</script>
<header>
   <h1>Site Header</h1>
</header>
<nav id='main-nav'>
  <a href='#'>Item 1</a> <a href='#'>Item 2</a> <a href='#'>Item 3</a>
</nav>
<section>
  <article>
  <h1 class='article-header'>Title</h1>
  <p>Lorem Ipsum Dolor Sic Amet</p>
  </article>
  <article>
    <h1  class='article-header'>Title 2</h1>
    <p>Lorem Ipsum Dolor Sic Amet</p>
  </article>
</section>

Some basic DOM insertion

Let's try out creating elements with $(), then using $.before, $.after, $.append, $.prepend, $.wrap, $.appendTo, both with text and elements.

<script>
$(document).ready(function() {


});
</script>
<header>
   <h1>Site Header</h1>
</header>
<nav id='main-nav'>
  <a href='#'>Item 1</a> <a href='#'>Item 2</a> <a href='#'>Item 3</a>
</nav>
<section>
  <article>
  <h1 class='article-header'>Title</h1>
  <p>Lorem Ipsum Dolor Sic Amet</p>
  </article>
  <article>
    <h1  class='article-header'>Title 2</h1>
    <p>Lorem Ipsum Dolor Sic Amet</p>
  </article>
</section>

Fun Stuff: Animation and transforms

$.fadeOut, $.fadeIn, $.slideDown, $.slideUp, $.toggle, $.stop, $.animate

<script>
$(document).ready(function() {


});
</script>


<style>
  .box { 
    position:absolute; 
    width:100px; 
    height:100px;
    background-color:red;
    }

  #box2 { right:0px; }
</style>

<div class='box' id='box1'></div>
<div class='box' id='box2'></div>

Events

$.bind, $.click, $.dblclick, $.mouseenter, $.mouseleave, $.hover

<script>

$(document).ready(function() {


});

</script>


<style>
  .box { 
    position:absolute; 
    width:100px; 
    height:100px;
    background-color:red;
    }

  #box2 { right:0px; }
</style>

<div class='box' id='box1'></div>
<div class='box' id='box2'></div>

Demo Revisited

The goal is to understand everything in here by the end of class today

<script>
  $(function() {
  var images = [
    { img: "images/image1.jpg", 
      title: "This is a drop",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image2.jpg", 
      title: "Dog here",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image3.jpg", 
      title: "Some sort of building",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image4.jpg", 
     title: "Nightscape",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" }
    ];
  
  $.each(images,function() {
    var imageInfo = this;
    
    var img = $("<img>").attr({'src' : imageInfo.img,
                     'width' : 128 });
    img.click(function() {
       window.open(this.src,"mywin","status=0,toolbar=0,width=400,height=400");
    });
    
    img.hover(function() {
      $(this).addClass("selected");
      $("#thumbnails img:not(.selected)").stop().animate({opacity: 0.4});

      $("#details").show();
      $("#title").text(imageInfo.title);
      $("#description").text(imageInfo.description);

    },function() {
      $("#thumbnails img:not(.selected)").stop().animate({opacity: 1.0});
      $(this).removeClass("selected");
      
      $("#details").hide();
    });

    img.appendTo("#thumbnails");
  });
  
});
  
</script>

<section id='thumbnails'>
  
</section>
<section id='details' style='display:none;'>
<h2>Title: <span id='title'></span></h2>
<p>Description: <span id='description'></span></p>
</section>

<style>
  #thumbnails img {
    margin:10px;
    border:4px solid white;
  }
  
  #thumbnails img:hover {
    border-color:#CCC;
  }
</style>

Putting it all together

Let's use two buttons to increase and decrease a counter.

  <button id='increase'>Increase</button>
  <button id='decrease'>Decrase</button>

  <div id='counter'>0</div>
  <script>

    var counterValue = 0;

    // Use the click method on $("#increase").click(function() { ... });
    // Use console.log to map the value

    // Next use the click method on #decrease to decrease the counter

    // Now use the html() method to set the value of coutner

    // Now make sure we don't go under 0 or over 10
  </script>

Plugins: Barebones

Let's use the cycle plugin: http://jquery.malsup.com/cycle/ (images from http://lorempixel.com)

<html>
  <head>
    <!-- We include jquery -->
    <script src='js/jquery.min.js'></script>
    <!-- We include the plugin -->
    <script src='js/jquery.cycle.all.js'></script>
  </head>
  <body>
    <div id='slideshow'>
      <img src='images/image1.jpg'/>
      <img src='images/image2.jpg'/>
      <img src='images/image3.jpg'/>
      <img src='images/image4.jpg'/>
    </div>
    <script>
      $(document).ready(function() {
        $('#slideshow').cycle();
        });     
    </script>
  </body>

Cycle: Style and Options

<html>
  <head>
    <!-- We include jquery -->
    <script src='js/jquery.min.js'></script>
    <!-- We include the plugin -->
    <script src='js/jquery.cycle.all.js'></script>

    <style>
       /* #slideshow img { border:1px solid black; padding:10px; border-radius:10px; } */
    </style>
  </head>
  <body>
    <div id='slideshow'>
      <img src='images/image1.jpg'/>
      <img src='images/image2.jpg'/>
      <img src='images/image3.jpg'/>
      <img src='images/image4.jpg'/>
    </div>
    <script>
      $(document).ready(function() {
        $('#slideshow').cycle({
          //next: "#slideshow",
          //speed: 5000,
          //timeout: 200,
          //random: 1,
          fx: 'fade' 
          // transition types, ex: fade, scrollUp, shuffle, etc...
        });
      });     </script>
  </body>

Ajax

$.ajax, $.get, $.post, $.getJSON

<script>
$(document).ready(function() {

var ajax = $.get("names.json",function(data) {
  alert(data);
});

});

</script>

JSONp

Ajax is same-domain only. So there's a hack to pull data across domains called $.getScript

<script>
$(document).ready(function() {
 var username = 'aplusk';
 var count = 10;
 $.getJSON('http://twitter.com/statuses/user_timeline/' + username + '.json?callback=?',
	  function(data) {
		alert(data);
		console.log(data);
	  });
});
</script>

Homework

Coding

Through both the beginner and intermediate courses on codecademy

Beginning Programming / jQuery and the DOM / Functions in Javascript

Javascript & jQuery

HTML/CSS Are Static

(Now only mostly true, as you can add interactivity via CSS Hover, Animation)

Anything else dynamic is "programmed"

Animation effects

Sliders

Drag and Drop

Autocomplete

Ajax

And, unless it's flash..

It's programmed in Javascript"Lingua Franca" of the Web

Disclaimer:

Programming is Hard

We'll do our best..

But you're not going to learn it in a day. It take a lot longer than that...

About Javascript

First created in '96

Nothing, whatsoever to do with Java.

People hated it for a long time. Now people love it.

Now can be used for:

Client Side

Server Side

Mobile (iPhone, Android)

Desktop

Javascript is both:

The worlds most popular language (beat Visual Basic)

The world's most unpopular language (people love to complain about it)

Why so much hate for JavaScript?

Incompatible Implementations

OO, but not a classical inheritance

Initial Implementation were slow

It looked like a silly toy next to Flash

No AJAX to start with (while Flash did)

What Changed?

The "Gmail" and "Goole Maps Era" (2004-2005)

"Framework Era" (2005-Today) jQuery

"Chrome Era" (2008-Today)

The "javascript MVC era" (2010-Today) salon.io

Where does Javascript go?

Where do we prefer?

Downright Bad: Include as an event

Even Less Good: Include in the <body> tag

Less Good: Include in the <head> tag

Best: Include external .js file

Again, we're not really teaching "programming"

There's way too much to try to cover in 1 class

We're really want to be able to use jQuery

3 Main Goals for today

Be able to read and understand some JavaScript

Be able to manipulate documents with jQuery

Be able to use jQuery plugins

What is jQuery?

Most of what we do in Javscript is manipulate the DOM and Ajax

These are very long and cumbersome to do in straight javscript

On top of this, different browsers have different behavior

jQuery is a library that makes this easy and clean and consistent

Works with CSS selectors

What pieces of Javascript do we need to understand?

Strings and numbers - basic pieces of information

Variables - where to store pieces of information

Functions - how to call reusable pieces of code

Callbacks - functions that get called in response to something else

Arrays - store a list of values (like a list of variables)

Objects - We just need to understand a little bit on these

Conditionals - controlling what parts of a program executes

A Little Demo

Javascript Housekeeping

Hello World!

Our friend the console and console.log

What is a variable?

Stores a value

Deﬁned with “var” keyword*

Can be assigned with a single "="