J3 Limited
 
Google
WWW J3Ltd
 
JavaScript Expressions

JavaScript Expressions...

Contents

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Introduction

This section is very important. The language depends on expressions to do perform calculations and to decide what to do next.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Variables

A programming language offers variables to hold and manipulate values.

A variable is a programmer's box. Anytime a value needs to be kept, a variable is created. Variables are essential to software development.

Consider the following example two buttons:



In order for the close window button to work, it must have a window object to work on. Hence when the window object is opened we need to hold on to a variable (put the object in our programmer's box for later use).

In JavaScript a variable is declared as follows:

    var wWindow

The above statement tells JavaScript that we have defined a variable called wWindow. A variable can hold anything (a window object, a document object, just a number...). We give it a name, so that we can refer to it later on by its name.

Note: It is a good idea to use meaningful names for variables, and not to use existing JavaScript object or command names.

We can assign a value to the variable using the = operator:

    wWindow = "This is not really a window object, just a text string"

    wWindow = 10

    wWindow = window.open("JAVDEMO.HTM", "WindowName", "height=150,width=250,height=200,resizable=1")

The last example statement is what we use to hold on to the window object opened. The window.open() method of the window object hands over to us the object just created, this is called returning, the window.open() returns a window object to us and we assign the object to our variable we called wWindow.

Once we have assigned a window object to the variable, we can call some of its methods:

    wWindow.close()

JavaScript Variable Naming Rules

A JavaScript identifier name must start with an alphabetic character (a .. z, A .. Z) or underscores, then it can contain numbers too. w123a is a valid variable name, spaces are not allowed. Underscores are allowed, and are sometimes used to separate words in a variable name. The use of upper case is encouraged, underscores discouraged. For example: myVariable is preferable to my_variable.

JavaScript Arrays

This link expalins JavaScript arrays. Appologies for making it a link, a complete explanation of arrays will be inserted here soon.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Literals & Data Types

A literal is a fixed value. For example my EMail address can be expressed as a literal: "jacques@dial.pipex.com". The bit between the double quotes is a literal. Numbers can also be literals: 3.14

Literals are usually passed to object method parameters, or assigned to variables.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


String Literals

Strings are what most people refer to as text. If we wish to give a string value to a variable, the JavaScript interpreter needs to know when a string starts, and when it ends. Otherwise it might include too many spaces, or trailing information which is meant to go into another value. For example:

wWindow = window.open("JAVDEMO.HTM", "WindowName", "height=150,width=250,height=200,resizable=1")

The above statement contains three strings.

In JavaScript, you can use the single quote and double quotes to enclose a string. Sometimes we wish to put a quote within our text string. In this case we can escape the quote. For example:

<SCRIPT LANGUAGE="JavaScript">

var quote = "\"To be or not to be<BR>That is the question\""

document.write(quote)

</SCRIPT>

Displays the following quote:

The escape character can be used to represent characters which are hard to put in a string:

  • \b is a backspace
  • \f is a form feed (throws a page on a printer)
  • \n is a newline
  • \r is a carriage return
  • \t is a tab character

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Integer And Floating Point Literals

Programmers deal with two main types of numbers. Whole (integer) numbers, and real (floating point) numbers.

Integer numbers do not have a decimal part. 12 is an integer, so is -12, but 12.1 is a floating point number, because it has a decimal part.

Integer numbers can be represented in a variety of useful ways. For example I can never remember what three bytes set to 255 make as one large number. But in Hexadecimal notation this is easy to remember, and good for setting a white color.

  • An integer has no leading zero, and can have a leading sign to represent negative numbers.
  • An octal number is preceeded by a zero, a leading sign is allowed.
  • A hex number is preceeded by a leading zero and an X (or x) a leading sign is allowed.

Hence 16777215 is the same as 077777777 as 0xFFFFFF, which is three bytes with all its bits set to 1. In JavaScript we can use any of these three notations to represent an integer literal.

When dealing with octal or hexadecimal representations, putting a leading negative sign is rare. This is because the main reason for using these representations is to have a good idea of the bytes which make up the number. Putting a negative sign can affect the bits in each byte of the number.

Floating point numbers are identified by containing a '.' or E or e

The code used to display the above is:

    <P><SCRIPT>document.write("3.1 is ", 3.1, "<br>")</SCRIPT></P>

    <P><SCRIPT>document.write("3E1 is ", 3e1, "<br>")</SCRIPT></P>

    <P><SCRIPT>document.write("3.1E-2 is ", 3.1E-2, "<br>")</SCRIPT></P>

    <P><SCRIPT>document.write("3E-1 is ", 3E-1, "<BR>")</SCRIPT></P>

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Boolean Literals

A boolean type can have one of two values: true or false. It's a very handy type in programming. There are many uses for boolean types, which are explained in the conditional statements later on. The window.confirm() method shows another use for boolean types

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Expressions And Operators

Expressions in programming terms are ways of expressing formulae or calculations. Programming languages have many data types (as explained in the Literals section, we have String types, boolean, integer ...). The result of a calculation can also have different data types, depending on what is being calculated:

    • " Hello" + " " + "World" is a string expression, producing a string
    • 1 + 2 + 3 is a numerical expression producing an integer
    • 1 > 4 is a boolean expression producing a boolean result

In order to write down expressions we need operators ( +, -, >, ....). we also need operators to assign values, or values of expressions to variables. The assignment operator = does this:

    myVariable = 1 + 2 + 3 assigns the result of 1 + 2 + 3 to the variable myVariable. So myVariable holds 6

Sometimes we want to write a complex expression. Programming languages allow the use of round brackets to allow the programmer to state more clearly what to do, and in what order. Consider the following examples:

    2 * 5 + 2 is two times five, plus two: 12

    2 * (5 + 2) is two times (five plus two): 14

There is what is known as a precedence of operators at work here. Knowing which bit is done first is not always easy, as a rule of thumb: if in doubt, bracket it!

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Operators

Operators combine what is to the left with what is to the right, to produce a result. For example 1 + 3 produces 4. Operators are an essential part of expressions. There are many things we could want to do with symbols, some we want to add, others need their bits twiddled. A variety of operators are made available to the perform specific tasks.

Arithmetic Operators

Addition uses +

Subtraction uses -

Multiplication uses *

Division uses /

    Division gives the result of dividing two numbers. For example 20 / 3 gives

Modulus uses %

    Modulus produces the remainder of trying to divide two numbers without going fractional. For example 20 % 3 gives 2. Because 6 threes go into 20, giving a remainder of 2

Unary Negation uses -

    If we want to represent a number as negative we precede it with a -. For example -100 degrees centigrade is cold, whereas 100 is very hot.

The special ++ and -- operators are discussed in the assignment operator section.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Bitwise Operators

These operators in JavaScript are used to perform binary operations on numbers: perform bit twiddling. In most cases these operators are not used.

Because JavaScript treats all numbers as the same (whether they are floating point or integral), it has to do some work before performing a bitwise operation: floating point numbers are stored in a way totally differently to integrals. JavaScript converts the operands into 32 bit numbers, performs the bitwise operation, then returns a number.

JavaScript provides bitwise operators to do the following:

  • Bitwise and uses &
  • Bitwise or uses |
  • Bitwise exclusive or uses ^
  • For example:

    15 & 3 should give 3

    15.9 & 3 gives I don't know what! Floating point number are not generally used when dealing with individual bits.

JavaScript also provides bitwise shift operators. WIth these it is important to realise that the value on the right of the operator determines how many times to perform the operation on the value to the left. For example 9>>2 shifts 9 two binary places to the right.

  • Bitwise left shift uses <<, the bits lost on the left are lost. The new bits on the right are set to zero
  • Sign propagating right shift uses >>, 9>>2 gives 2 but -9 >> 2 gives -3 (bits going off to the right are lost, but the left most bit is preserved, so a negative number will remain negative).
  • zero fill right shift uses >>>, new bits on the left are set to zero, so negative numbers instantly become positive.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Logical Operators

Logical operators allow finding out if a condition is true or false (boolean). These are essential parts of programming.

JavaScript uses the following operators:

    &&

    Logical AND. true && true is true. true and false is false

    ||

    Logical OR. true || true is true, true || false is true

    !

    Logical NOT !true is false !false is true

    ==

    Logical == : Do they equal each other? true == true is true, but true == false is false (they are not the same).

    >

    Logical greater than. 10 > 1 is true, 1 > 10 is false

    >=

    Logical greater or equal to. 10 >= 1 is true 10 >= 10 is also true

    <

    Logical less than. 1 < 10 is true, 10 < 1 is false

    <=

    Logical <=. 10 <= 10 is true

    !=

    Logical NOT Equal. 10 != 1 is true (they are not equal). 10 != 10 is false, they are equal

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


String Operator

The string type is special. It has only one valid operator (in addition to the assignment operator). It is +, this operator allows us to build up text.

    For example "Hello " + "There" gives a new string with "Hello There"

The += and = assignment operators are also allowed

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Assignment Operators

If we want to assign the value of a calculation to a variable, we need an assignment operator to do this.

    Example:

    var aNumber

    aNumber = 10 + 3

    The variable aNumber contains 13

Javascript has many assignment operators. Some are very much like C (and C++ and Java). Here is a list of all the assignment operators:

    Frequently Used

    =

    The assignment operator, the result of the calculation on the right of the = operator is assigned to the variable to the left of =. For example a = 5 + 3 sets the variable a to 8

    +=

    Shorthand. Adds to the variable on the left of the += operator the result of the expression on the right of the operator. For example a += 3 + 4, is the same as a = a + (3 + 4): it sets a to whatever it was plus 7

    -=

    Shorthand. Subtracts from the variable on the left of the -= operator the result of the expression on the right of the -= operator. Example: a -= 7 is the same as a = a - 7

    *=

    Shorthand. Multiplies the variable on the left of the *= operator by the result of the expression on the right of the *= operator. a *= 5 + 2 is the same as a = a * (5 + 2)

    /=

    Shorthand. Divides the variable on the left of the /= operator by the result of the expression on the right of the /= operator. a /= 5 + 2 is the same as a = a / (5 + 2)

    %=

    Shorthand. Takes the remainder of the integer division of variable on the left of the %= operator by the result of the expression on the right of the %= operator. a %= 5 + 2 is the same as a = a %(5 + 2)

    Rarely Used

    <<=

    Shorthand. a <<= 2 + 3 is the same as a = a << (2 + 3)

    >>=

    Shorthand. a >>= 2 + 3 is the same as a = a >> (2 + 3)

    >>>=

    Shorthand a >>>= 2 + 3 is the same as a = a >>> (2 + 3)

    &=

    Shorthand. a &= (2+ 3) is the same as a = a & (2 + 3)

    ^=

    Shorthand. a ^= (2 + 3) is the same as a = a ^ (2 + 3)

    |=

    Shorthand. a |= (2 + 3) is the same as a = a | (2 + 3)

    Frequently Used

    The following operators are not classified as assignment operators, they modify variable contents nevertheless.

    • ++
    • --

    The above two operators are special in the way they work. They can be used as prefix or postfix operators. They add (for ++) or subtract (for --) one from the variable they immediatly prefix or postfix.

    A prefix operator modifies the variable to which it refers, before the rest of the expression gets to it (it's a programmer's shorthand). The postfix modifies its variable after the rest of the expression has got to it.

    Prefix example:

      a = 10

      b = --a

      Sets b to 9 and a to 9

    Postfix example:

      a = 10

      b = a ++

      Sets b to 10 and a to 11

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


  Copyright 2000 J3 Ltd Permission is granted to reproduce material on this page, on the condition that a reference to "WWW.J3Ltd.com" is given as the source of the material.