JavaScript QuickStart: Elements of JavaScript

JavaScript QuickStart: Elements of JavaScript

ike any other language?be it English, Japanese, or C?JavaScript has some basic elements with which you work. In JavaScript these include: objects, variables, arrays, operators, events, event handlers, statements, and functions.

Don’t worry if you aren’t familiar with these terms. They make common sense once you see what they are.

Objects
Objects are the most basic building blocks of JavaScript. They are the elements upon which the whole object-oriented philosophy is built. They are the elements that interact with each other and with the reader based on a set of pre-defined rules. JavaScript objects include items such as the browser window and the HTML document.

Each object has a set of characteristics, called properties, and a set of things it can do, called methods.

For example:

  • One of the document object’s properties is “bgColor”. You can give use JavaScript to se the background color of an HTML document.

  • One of the document objects’s methods is “write”. You can use JavaScript to write text in an HTML document.

Each type of object is a template. You can create instances, or copies, of an object, assign the new instances different properties, and work with the instances in your scripts.

When you see an object used in a script, it is usually written like this, with the object type followed by one of its methods or properties, followed by that method’s or properties attributes. For example:

document.bgColor=”white”

sets the document’s background color property to white.

For example:

document.write(Welcome dear reader, to my Web-abode);

uses the document.write method to write the phrase “Welcome dear reader, to my Web-abode” into the HTML document.

Variables
Variables are containers that hold a value. You’ll see variables in use throughout a script.

Here’s a few notes about variables:

  • Variables can have any name, as long as the name starts with a letter.

  • The process of creating a variable is called “declaring the variable.”

    A common JavaScript error is “variable-name undefined.” That means you are trying to use a variable in the script, except that particular variable doesn’t exist.

  • You can assign a specific value to a variable. This example declares a variable named “clickThrus” and assigns it the value 0:

    var clickThrus = 0

  • You can have the script calculate the value of a variable. This example declares a variable named visits, and sets the value of “visits” to be the sum of “clickThurs” plus 10:

    var visits = clickThrus + 10

Arrays
Arrays are a set of variables referred to by a single variable name. If you’re working with a series of mouseovers (images or phrases that change when the reader moves his or her mouse over some part of your page), you might see an array that looks something like this:

blurb = new Array(5)

blurb[0] = “Your mouse is over Halebo, photographed from the Hubbel Space Telescope!”
blurb[1] = “Your mouse is over the Andromeda galaxy.”
blurb[2] = “Now you’re mousing on the planet Venus.”
blurb[3] = “Last, but not least, is Neptune.”
blurb[4] = “”

This array creates a set of five variables; each of the variables contains a different phrase. The whole set — the array — is named “blurb.”

Arrays start numbering their variables with 0, so the the individual variables within the array are named blurb[0], blurb[1], blurb[2], blurb[3], and blurb[4]. In this example, blurb[4] has two double quote marks with no text; this will make the status bar blank.

Operators
Operators are mathematical verbs. They set, calculate, compare, or evaluate values. For example, if you want to assign a value to a variable, you would use the equal sign operator, like this:

fred = 100
This sets the variable “visits” to equal the variable “clicks” multipled by 2.
visits = clicks * 2
This compares the value of the variable “current” to see if it greater than or equal to 100.

current >= 100

Events
Remember, JavaScript was designed to work with a browser. It is “aware” of actions that happen inside the browser window, actions that the reader might do. These interactions between reader and browser are called events.

Some common events include:

  • mouseover: the reader putting the cursor over a link

  • mouseout: the reader removing the cursor from a link

  • click: the reader clicking on an option

  • submit: the reader submitting a form for processing.

Event Handlers
You can use JavaScript to make different things happen when a specified event occurs. You do this with a category of JavaScript elements called event handlers.

Event handlers are the glue that let you create an action tied to an event and make your site respond to what the reader does. Some event handlers are built into JavaScript. In addition, you can create your own event handlers for your specific applications.

Some common event handlers include:

  • onmouseover: when the reader puts the cursor over a link

  • onmouseout: when the reader removes the cursor from a link

  • onclick: when the reader clicks on an option

  • onsubmit: when the reader submits a form for processing.

Statements
A statement is a single line of instruction to the computer.

You might think of a statement as being a bit like a JavaScript sentence, made up of objects, expressions, variables, and events/eventhandlers.

Each statement should end with a semicolon, although sometimes people will omit the semicolon and end with a hard return.

For example, you might create a statement that tests to see if the value in the variable named “frogs” is equal to the phrase “green”:

frogs == “green”;

Or, you might use a statement to write a line of text into your page, using the “document.write” method.

document.write (“Many frogs are green, but the red-toed tree piper is yellow and red.”);

Functions
A function is a series of statements grouped together to perform a specific task. You give the function a name and can call it by name.

In the real world, driving a car is a function with a series of steps: putting the key into the ignition, turning the key, and shifting gears from “park” into “drive.” In JavaScript, you might create a function to test items in a list, to determine whether the reader had entered a certain value, and if the reader has, to post a message that says “guess again!”

You can tell a function definiton because it begins with the command “function”, and contains a series of statements within braces.

function greeting()   {
  document.write(“Welcome to the Underwater World
“);
  document.write(of
“);
  document.write(The Happy Squid
“);
}

This is a simple function. The function is named “greeting” and it writes three lines of text into the HTML document.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist