How to Create JavaScript Statements for HTML Integration - dummies

How to Create JavaScript Statements for HTML Integration

By John Paul Mueller

To be able to integrate JavaScript with HTML, it’s essential for web developers to understand how JavaScript statements work. Here is some essential information to help you work with JavaScript statements.

Dot syntax in JavaScript statements

JavaScript uses what’s known as a dot syntax — a period between elements of a complete statement. In general, a complete statement begins with an object or variable. Objects can have functions, properties, and events associated with them. Here’s a short explanation of these elements:

  • Object: An entity that contains everything associated with a particular aspect of an application.

  • Property: A description of a particular object feature.

  • Function: An action you can perform with an object.

  • Event: An action that the object or an external source has performed with an object. The event is a notification that this action has occurred.

You use dot syntax to describe to JavaScript how to interact with the objects, properties, functions, and events in an application. For example, when you write document.write(“This is some direct output”), you’re telling JavaScript to

  1. Access the document object.

  2. Find the write() function within that object.

  3. Send “This is some direct output” to the write() function.

  4. Tell the write() function to execute.

The dot syntax can go down as many levels as needed to fully describe what you want JavaScript to do.

How to add multiple statements to a single script

A statement is a single command that you want JavaScript to perform. Each statement always ends with a semicolon (;). In real applications, you seldom complete an application using a single statement — you combine statements to obtain a specific result.

JavaScript executes the statements in the order that you type them. JavaScript doesn’t require that you place each statement on its own line, nor does it require you to place a single statement on one line.

Here’s an example of three statements within a single function.

<script language="JavaScript">
  function WriteText()
   document.getElementById("First").innerHTML =
     "Changed First"; alert("Check First!");
   document.getElementById("Second").innerHTML =
     "Changed Second";

The first statement changes a <p> element with an id of First. The second statement displays an alert() so that you can verify that the first statement executed without doing anything else. The third statement changes a <p> element with an id of Second.

When you run this example, you see a heading and two paragraphs. The first paragraph says First Statement, and the second paragraph says Second Statement. Click the Click Me button and you see that the first paragraph changes and that the browser displays an alert().


Basic code blocks in JavaScript

You’ve probably noticed that the coding examples use curly brackets to show where a function begins and ends. A left (opening) curly bracket ({) always shows the beginning of the function, and a right (closing) curly bracket (}) always shows the ending of the function.

The combination of an opening and closing curly bracket defines a code block. JavaScript relies on code blocks to help organize code and to define the beginning and ending of a particular task.

Case sensitivity in JavaScript

JavaScript is a case sensitive language. This means that you must exercise care in how you type. For example, there’s an alert() function, but not an Alert() function, supplied as part of JavaScript. The color property is completely different from the Color property, which is different still from the cOlor property. The word is capitalized differently, so JavaScript sees it as a different word.

Use white space effectively for JavaScript statements

White space is essential for humans, but JavaScript doesn’t require it. For example, you can write an alert() in any of the following ways, and all of them will execute without problem:

alert( "Hello" );
alert(             "Hello"       );

The first and second lines are relatively easy to read. The third could present a problem because the human viewer may have trouble seeing where the message is in all that white space.

The use of white space is important. For example, you could place the function on a single line like this:

function WriteText() {document.getElementById("First").innerHTML ="Changed First";alert("Check First!");document.getElementById("Second").innerHTML ="Changed Second";}

This code is incredibly hard to read. It works, but human developers would have a hard time maintaining it. It’s far better to add white space so you can see where lines of code begin and end like this:

function WriteText()
  document.getElementById("First").innerHTML =
   "Changed First";
  alert("Check First!");
  document.getElementById("Second").innerHTML =
   "Changed Second";

Every statement appears on its own line. Continuations appear indented so you can tell that they’re a continuation. The entire code block appears indented, and you can clearly see the opening and closing curly brackets. This second version is a lot easier to maintain.

The JavaScript line continuation character

JavaScript provides a line continuation character, the backslash (), that you can use in your code to break up long lines. In practice, you seldom see the line continuation character used because JavaScript also allows for natural breaks.

For example, you can naturally break lines between statement components. When you want to set a property to a new value, the description of which property to change can appear on one line and the new value on the second line. However, there are times when you need to use the line continuation character, such as when working with long segments of text like this.

function WriteText()
  document.getElementById("LongParagraph").innerHTML =
   "This is a really long line of text that won't 
   easily fit on a single line.";

This example actually contains two line breaks. The first is a more traditional natural line break — the second relies on the line continuation character. You must use the line continuation character in the second case because the break appears in the middle of a line of text. If you don’t use the line continuation character in this case, JavaScript displays an error message.