Introduction to jQuery

Functions and variables are two JavaScript concepts you'll use often in jQuery. Unlike the preceding chapter, where we covered fairly self-explanatory vocabulary that reads well and makes sense, you needn't expect the same from the syntax in this chapter! This is where you'll start wading through JavaScripts legendary curly brackets and semicolons. 

No fear though! Once the purpose of JavaScript functions and variables are clear, you'll be absolutely ready for jQuery. I know you're probably giving me side-eye right now, considering we haven't even touched jQuery yet. Don't worry though; we're almost there!

Variables

A variable is a piece of data stored under a different name or "identifier." Storing this data allows the scripts you write to keep information organized for future reference. Declaring a variable is very simple, as seen here:

var firstName = "Emily";

That's it! Now"Emily" is stored as the value offirstName. First, you must write the keywordvar, a reserved word in JavaScript which identifies the following contents as a variable. You follow with the name of the variable in CamelCase, the equals sign (assignment operator), and the contents of the variable. You can store almost anything as a variable, including strings, numbers, and arrays.

Here are some more declarations of variables:

var country = "France";
var city = "Paris";
var animalType = "dog";

Functions

A function is a set of code that executes or performs an action. Here's a function that creates a browser alert that says hello to you:

function greetStudents() {
    alert('Hello students!');
}
greetStudents();

In JavaScript, you define a function by (1) writing the word function, (2) followed by the desired name of your function. You'll then (3) add parentheses where you can pass parameters (data) to the function if needed. I didn't in the above function, thus the empty parentheses. (4) Write an opening curly brace to "begin" the set of statements that will comprise the function. Once you have listed the statements, (5) close the function definition with another curly brace.

The last line,greetStudents(); makes the function run. Defining a function and actually running a function are two different steps.

Learning jQuery is a great way to understand and write functions that are more readable and less complex. You're not supposed to feel ready to write crazy functions yet, but you should understand that they're a way to define action. Functions will become clearer with examples and practice using the jQuery library instead of raw JavaScript.

Combining functions and variables

In the following code example, you can see a variable declaration, a function declaration that includes the variable, and that same function called.

var firstName = "Emily";
function greetUser() {
    alert("Hello " + firstName);
}
greetUser();

Here's another example that updates a hypothetical user's hypothetical biography. This is the sort of complicated JavaScript that we could replace with much simpler jQuery later in the course.

function updateBiography() {
    var bio = document.getElementByID('biography');
    bio.textContent = 'New biography';
}
updateBiography();

Again, I defined the function (step 1) and then called it (step 2).

Variables (stored information) and functions (statements that define action) can be combined into clear, readable JavaScript. You'll use these JavaScript concepts in jQuery to bring your web pages to life, shortly to be seen in the next chapter!