29/12/2015
Object oriented programming
Objects
An object is a 'thing'. For example a number is an object. An array is an object. Your browser window is an object. A form in your document is an object. There are hundreds more, and in some cases you can create your own.
Objects can have objects in them. For example, your document can have a form in it. This form is a 'child object' of the document. Therefore the document is the 'parent object' of the form. To reference the child object, we have to go through the parent object, eg. document.myForm
An array can have numbers in its cells. As we have already discussed, the array is an object, and so would be a cell within it, and so is the content of the cell. We cannot refer to the cell itself, but we can refer to its contents: myArray['cell name or number'] for example.
Classes (or types)
A class is a group of objects that are similar in some way. For example, a number and a piece of text can both be stored as a variable (in a way, like the variables you would use in mathematical algebra). In essence, we can say that pieces of text and numbers are examples of class 'variable'.
Numbers can be sub divided into two groups, integers and floats (or doubles). Integers are whole numbers: 1, 2, 3, 4, 0, -1, -2, etc. Floats have decimal points: 1.1, -5.7, 0.5, etc. In this case, we can say that 3 is an instance of class variable, (sub)class number, (sub)class integer.
In fact, a variable is a type of object. All instances of class 'object' have a certain two methods: toString() and valueOf(). Therefore, as 3 is an instance of class object, (sub)class variable, (sub)class number, (sub)class integer, it will inherit the toString() and valueOf() methods provided by the class 'object'.
Classes are not so important in JavaScript as they are in many other object oriented programming languages. Classes can be created when you define your own classes of objects, but it is not usual to create your own 'sub'-classes.
Collections
If you need to know what arrays are, see the section on Variables.
There are many arrays that are inbuilt into each document. The document itself is an array in certain uses. The most obvious of these collections is the images collection. To refer to images in the document, we use
document.images['name of image']
This is a special kind of array, known as a collection.
Properties
Take, for example, an image. When we define images in HTML, we write:
The properties of the image would be src, name, height, width, alt and if we also used Style Sheets we might have included several more (like background-color for example). All properties are a type of object so to refer to the src of my image, I would write document.images['myImage'].src
Methods
There are always actions that are associated with objects. For example, a form may be submitted or reset. The actions are methods. To submit a form in non-object-oriented programs, we might write submit('name of form')
That would simply be a function. In object oriented programming like JavaScript, we would use document.nameOfForm.submit()
The reason this is a method and not just a function is that each form will have its own submit() function built in, which is referred to using the object oriented syntax shown above. You will never have to write methods in yourself unless you create your own objects, the browser does that for you.
You can think of it like this:
With the non-object-oriented way, we would tell a function to submit the form.
With the object oriented way, we would tell the form to submit itself.
If wanted, you can run several methods in turn on the same object by using:
referenceToTheObject.method1().method2().method3().method1again()
In this case, method1 must return a class of object that has the method 'method2' etc.
Operators
The most common operators are mathematical operators; +, -, /, * (add, subtract, divide, multiply) for example. Operators can be split into two groups, comparison operators and assignment or 'action' operators. Comparison operators test to see if two variables relate to each other in the specified way, for example, one variable is a higher number than the other. Other operators perform an action on a variable, such as increasing it by one.
The following table gives those that are most commonly used. The JavaScript 1.3 operators such as the identity operator === are supported by all current browsers, but are not used as often as the others. Old browsers that do not understand them will just produce errors.
JavaScript operators Operator Uses
+ adds two numbers or appends two strings - if more than one type of variable is appended, including a string appended to a number or vice-versa, the result will be a string
- subtracts the second number from the first
/ divides the first number by the second
* multiplies two numbers
% divide the first number by the second and return the remainder
= assigns the value on the right to the object on the left
+= the object on the left = the object on the left + the value on the right - this also works when appending strings
-= the object on the left = the object on the left - the value on the right
> number on the left must be greater than the number on the right - this also works with strings and values
< number on the left must be less than the number on the right - this also works with strings and values
>= number on the left must be greater than or equal to the number on the right - this also works with strings and values
bitwise rightshift
& bitwise AND
| bitwise OR
^ bitwise XOR
~ bitwise NOT
! logical NOT (the statement must not be true)
&& logical AND (both statements must be true)
|| logical OR (either statement must be true)
in object or array on the right must have the property or cell on the left
=== the numbers or objects or values must be equal, and must be the same variable type
!== the numbers or objects or values must not be equal, or must not be the same variable type
Note, if you do not set the language="javascript1.2" attribute in the tag, 0 == false == '' and undefined == null. If you do set the language attribute to 'javascript1.2', Mozilla/Firefox and other Gecko browsers (but none of the other major browsers) will change this so that none of these will equate to each other. Since the attribute is deprecated anyway, and the JavaScript versions were never standardised, you should not rely on this behaviour. If you need that behaviour, use the === and !== operators.
There are also a few operators that can also be used like functions:
void
void statement or void(statement) (see the section on writing functions)
typeof
typeof variable or typeof(variable) returns the type (or class) of a variable.
eval
eval(string) interprets a string as JavaScript code.
There are also the 'var', 'new' and 'delete' operators. See the section on variables for examples of their uses. Also see the section on the Math object operators below.
Note that JavaScript has no logical XOR operator. If you need that functionality, see my separate XOR article.
Operator precedence
If you ask JavaScript to perform a calculation using multiple operators, those operators will be evaluated in a specific order. For example 3 + 6 * 7 is calculated as ( 6 * 7 ) + 3 because the * is calculated before the +. The order in which these are evaluated is: * / % + - + (where the second + is appending strings). To change the order in which they are calculated, use parenthesis ( ) as the contents of parenthesis are calculated before the contents outside the parenthesis. For example, 3 + 6 * 7 = 45 but ( 3 + 6 ) * 7 = 63
The Math object methods
In reality, these are methods of the Math object but they are used in place of operators.
Math object methods Operator What it does
Math.abs(n) Returns the absolute value of n
Math.acos(n) Returns (in radians) cos-1 of n
Math.asin(n) Returns (in radians) sin-1 of n
Math.atan(n) Returns (in radians) tan-1 of n
Math.atan2(n,k) Returns the angle (rads) from cartesian coordinates 0,0 to n,k
Math.ceil(n) Returns n rounded up to the nearest whole number
Math.cos(n) Returns cos n (where n is in radians)
Math.exp(n) Returns en
Math.floor(n) Returns n rounded down to the nearest whole number
Math.log(n) Returns ln(n)
Note, to find log10(n), use Math.log(n) / Math.log(10)
Math.max(a,b,c,...) Returns the largest number
Math.min(a,b,c,...) Returns the smallest number
Math.pow(n,k) Returns nk
Math.random() Returns a random number between 0 and 1
Math.round(n) Returns n rounded up or down to the nearest whole number
Math.sin(n) Returns sin n (where n is in radians)
Math.sqrt(n) Returns the square root of n
Math.tan(n) Returns tan n (where n is in radians)