Programming concepts and terminology are similar for all programming languages, including all Web programming languages. After you understand the basic concepts, you can apply those to any programming language.

This lesson introduces you to basic programming concepts and terminology. Other lessons build on this as you continue your exploration of Web Programming.

What is programming ? Basically, programming is learning to communicate (speak and write) in a language that a computer understands. Communicating includes sending information to computers as well as receiving information from computers.

When you learn a new language, you learn the syntax of the language -- the vocabulary, how to put words together to form sentences, how to use proper punctuation, how to put words in the correct order, and all the other details that comprise the grammar of the language. Learning a programming language is similar to learning any new language; learn the syntax, and practice, practice, practice.

A line of code is called a statement . Statements are the phrases and sentences of a programming language. A program is essentially a collection of statements. In JavaScript (the language you'll use from this point on to illustrate basic programming concepts), statements end with a semicolon.

The semicolon is not always required for correct JavaScript syntax, but it makes it much easier to debug your code and keep track of where one statement ends and a new one begins.

A statement is a single line of code. Don't insert line returns in the middle of a statement; let the code wrap, if necessary. (Note that in this course, however, we've inserted returns in lines of code that won't fit on the page.)

A line return character in the middle of a statement is one of the most common errors in JavaScript, and will make your code nonfunctional. In JavaScript, unlike HTML, if there are problems with your code, it won't display in the wrong way -- it just won't do anything at all.

A variable is a temporary storage container that holds information, or data . When you create a variable, you give it a name. You use the name to access the information that the variable contains. After you create a variable, you can put new information in it as often as you want.

You create a variable by declaring it. When you declare a variable, it's empty. Its value at this point is undefined . To declare a variable, use a var statement:

var a;

You can declare more than one variable at a time with the same var statement:

var a, b, c;

Name Variables in JavaScript

There are a few rules for naming JavaScript variables, such as the following:

• no spaces, hyphens, or punctuation characters (except for underscores)
• must start with a letter or an underscore
• no more than 255 characters (whew!)
• can't use JavaScript reserved words (for example, you can't name a variable var)

It also helps to give your variables meaningful names so you can remember what the variables are used for.

JavaScript is case sensitive, so pay attention to the case of variable names; myName is not the same as myname, MyName, or MYNAME.

After you declare a variable, you can assign a value to it.

a = 10;
b = bolo;

After you've declared a variable, you don't need to use var to refer to the variable.

The variable name is on the left side of the equal sign, and the variable value is on the right side of the equal sign. The equal sign is called the assignment operator . You'll learn more about operators later in this lesson.

Variable assignment works from right to left. The first code statement above assigns a value of 10 to the variable named a.

Variables can also be initialized . When you initialize a variable, you assign a value at the same time you declare the variable.

var a = 10;
var b = bolo;

Every programming language uses datatypes to signify the kind of information that's being used. JavaScript is a weakly typed language; it will convert the datatype of a variable depending on the context in which it's used. This can be a convenience, but it can also cause unexpected problems in your code. You'll look at this issue more closely later in this lesson when you concatenate (add together) one or more strings.

The following are three basic datatypes that JavaScript uses:

• numerical: Includes integers (numbers without decimal points) and floating-point numbers (numbers that include decimal points)
• string: A string is simply a collection of one or more text characters.

You identify a string as text by enclosing it in quotation marks; for example, "3" is considered and acted on as string data, whereas 3 is treated as numerical data.

• Boolean: True or false.

Programming languages use operators to manipulate data. JavaScript includes different types of operators: arithmetic, conditional, and logical operators. In this lesson, you'll look at arithmetic operators; conditional and logical operators are covered in later lessons.

Operators do some action on the information (operands) supplied to them. For example, in this statement

var c = a * b;

a and b are operands of *, the multiplication operator.

JavaScript includes arithmetic operators for all the common mathematical functions. The arithmetic operators are shown in the following table.

A script block includes an opening script tag, a closing script tag, and everything in between.

A script block can be used in the head or the body of an HTML or XHTML page. A script block is often used in the head section to declare variables and functions (reusable groups of code statements).

A script element can include two attributes: language and type. The type attribute refers to the MIME type, and is required for valid code. The language attribute is optional, but is useful for older browsers that don't recognize the type attribute. The language attribute can also be used to specify a particular version of JavaScript.

MIME (Multipurpose Internet Mail Extension) types include text, graphic, audio, and video files. MIME formats allow both text and nontext information to be sent over the Internet.

To include a script block in the head of your page:

<head>
<title>My JavaScript Page</title>
<script type="text/javascript" language="JavaScript">
<!--
insert the script here
// -->
</script>
</head>

The comment tags are used to hide the script from older browsers that don't support JavaScript; otherwise, older browsers may print the contents of the script block to the page even though they don't execute the script.

To insert a script block in the body of your page, the format is basically the same:

<body>
<script type="text/javascript" language="JavaScript">
<!--
insert the script here
// -->
</script>
</body>

String addition is called concatenation . It uses the + operator. This operator is both the addition operator and the string concatenation operator.

When you add two strings, JavaScript groups the strings as one string, for example:

var fname = Joe;
var lname = Smith;
var full_name= fname + lname;

In this case, full_name now has the value JoeSmith. You can also include additional punctuation; for example, to include a space in between the first and last name:

var full_name = fname + " " + lname;

Now, full_name holds the value Joe Smith. The " " string is an empty string that holds a space.

Variable Conversion

As mentioned earlier in this lesson, JavaScript is a weakly typed language and will automatically do datatype conversions in context.

JavaScript automatically converts a string to a number if the string is used in a numerical calculation, for example:

var a = 2;
// a is a number
var b = "5";
// b is a string
var c = b - a; 
// b is automatically converted from a string 
to a number, which assigns the numerical value 3 to c

JavaScript also automatically converts a number to a string if the + operator is used; for example:

var a = 2;
// a is a number
var b = "5";
// b is a string
var c = b + a;
// a is automatically converted from a number 
to a string, and string concatenation is performed,
which assigns the string value of "52" to c

As you can see from the preceding section, this automatic conversion feature may be a problem when you want to add numbers together instead of concatenating them. JavaScript includes features that allow you to work around this issue.

Note that this is only a problem when you're using the + operator. Because JavaScript uses the same operator for two different purposes (addition and string concatenation), it's not always clear to JavaScript whether data should be considered a number or a string. If you use any other mathematical operators in a statement, JavaScript makes the appropriate conversions, as in the first example in the previous section.

You can also use any of the methods associated with JavaScript's built-in Math object to make sure JavaScript recognizes data as numeric; for example, you can use the round method to round a number to the closest integer value:

var a = "5.1";
// the value of a is the string "5.1"
var a = Math.round (a);
// the value of a is now 5, and JavaScript 
treats it as numerical data

If the decimal portion is greater than or equal to .5, it's rounded up; otherwise, it's rounded down.

You can also use the parseInt () function to convert a string to a number; for example:

var a = "5.1";
// the value of a is the string "5.1"
var a = parseInt (a);
// the value of a is now 5, and JavaScript treats 
it as numerical data

parseInt() converts a string to an integer. It can also take numbers from the beginning of a string and leave the rest; for example, parseInt ("123abc"); returns the numeric value 123.

And finally, a simple way to convert strings to numbers is to multiply them by 1; for example:

var a = 2;
// a is a number
var b = "5";
// b is a string
b = b * 1;
// b is now a number
var c = b + a;
// the value of c is now 7

Moving On

This lesson showed you how to add scripts to HTML pages. You also learned important terminology that'll come in handy in later lessons. In the Lesson 3, you'll see how automatic conversion can be important when obtaining numeric information from users. But, no problem, right? You can now apply the techniques you learned in this lesson to make sure that numbers are treated as numbers.

Before you move on to Lesson 3, don't forget to do the assignment and take the quiz. In addition, visit the Message Board to find out what your fellow students are talking about.