JavaScript & jQuery Video Tutorial

Part 9 - Variables

The following code is from the Video.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">p {background-color: yellow;}</style>
</head>

<body>
 <h1 id="head1">Heading 1</h1>
 <p>First line of text.</p>
 <p>Second line of text.</p>
 <p>Third line of text.</p>
 <img id ="picture" src="eightball.gif" alt="eight ball" />
 
 <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
 <script type="text/javascript" src="my_code.js"></script>
</body>

</html>

String Variable - Declare and Initialize with simple text

Declare a variable using the var keyword. Initialize using the = symbol. Example: var hText = "This is just some text." - Click on the heading to see the text displayed in the elements.

$(document).ready(function() {
  var hText = "This is just some text.";

  $("h1").click(function() {
    $("p").text(hText);
  });
});

Try it out.

String Variable - Declare and Initialize with value from text() method

Read text from an element using the text() method. Example: var hText = $("#head1").text() - Click on the heading to see the text displayed in the elements.

$(document).ready(function() {
  var hText = $("#head1").text();

  $("h1").click(function() {
    $("p").text(hText);
  });
});

Try it out.

String Variable - Combining Strings

Combine strings using the + symbol. Example: var text2 = text1 + hText - Click on the heading to see the text displayed in the elements.

$(document).ready(function() {
  var hText = $("#head1").text();
  var text1 = "The heading text is ";
  var text2 = text1 + hText;

  $("h1").click(function() {
    $("p").text(text2);
  });
});

Try it out.

String Variable - Declare and Initialize with Combined Strings

Variables can be initialized with a combined string. Example: var hText = "The heading text is " + $("#head1").text() - Click on the heading to see the text displayed in the elements.

$(document).ready(function() {
  var hText = "The heading text is " + $("#head1").text();

  $("h1").click(function() {
    $("p").text(hText);
  });
});

Try it out.

Numeric Variable - Declare and Initialize

Declare a variable using the var keyword. Initialize using the = symbol. Example: var lineNum = 0 - Click on the heading to change the background color of the first element.

$(document).ready(function() {
  var lineNum = 0;

  $("h1").click(function() {
    $("p").eq(lineNum).css("background-color", "red");
  });
});

Try it out.

Numeric Variable - Math

Math operations can be performed on numeric variables. Example: lineNum = aNumber - 4; - Click on the heading to change the background color of the second element.

$(document).ready(function() {
  var lineNum = 0;
  var aNumber = 5;
  lineNum = aNumber - 4;

  $("h1").click(function() {
    $("p").eq(lineNum).css("background-color", "red");
  });
});

Try it out.

Incrementing Numeric Variables and the "if" statement

Increment numeric variables by following the variable name with ++. The "if" statement can be used to test if a condition is true. Example: lineNum++; if (lineNum > 2) {lineNum = 0;} - Repeatedly click on the heading to cycle thru the background colors of the elements.

$(document).ready(function() {
  var lineNum = 0;

  $("h1").click(function() {
    $("p").css("background-color", "yellow");
    $("p").eq(lineNum).css("background-color", "red");
    lineNum++;
    if (lineNum > 2) {lineNum = 0;}
  });
});

Try it out.

Array - Declare and Initialize

Declare a variable using the var keyword. Initialize using the = symbol. Enclose comma separated strings in square brackets [ ]. Example: var imageName = ["floatingball.gif", "redball.gif", "eightball.gif"] - Click on the image to change the picture.

$(document).ready(function() {
  var imageName = ["floatingball.gif", "redball.gif", "eightball.gif"];
  var indexNum = 0;

  $("#picture").click(function() {
    $("#picture").attr("src", imageName[indexNum]);
    indexNum++;	
    if (indexNum > 2) {indexNum = 0;}
  });
});

Try it out.

Switching Images using fadeIn() and fadeOut() methods

Click on the image to fade-out the old image and fade-in the new one.

$(document).ready(function() {
  var imageName = ["floatingball.gif", "redball.gif", "eightball.gif"];
  var indexNum = 0;

  $("#picture").click(function() {

    $("#picture").fadeOut(300, function() {
      $("#picture").attr("src", imageName[indexNum]);
      indexNum++;	
      if (indexNum > 2) {indexNum = 0;}
      $("#picture").fadeIn(500);
    });
	
  });
});