Milestones to achieve

• Learn object based concepts
• Learn about Events & handlers

Object based Concepts

The 1st thing to cover about some object based terminology is that for this course we will be covering terms related to Math object, String, Date, Boolean,Number, and Document.

Starting from Math object. It has a variety of methods that will allow you to perform calculations. Some examples are from images 1 & 2 above this section. To use methods from math.methodname(parameter).

Next is the String object. A string is a series of characters treated as a single unit. String literals/constants are written with double or single quotation marks. Combining strings is called concatenation. For a list of method for the string object please refer to image 3,4,5.

In String object there are multiple types of methods related to certain subjects. The 1st group covered are methods related to character processing. These methods are charAt,charCodeAt, fromCharCode, toLowerCase, toUpperCase. Method charAt returns the character at the position you have specified, however do take note that strings start at 0 and if the index number is outside the string’s boundary you will get an empty value. Method charCodeAt returns the unicode value at the index number and will return NaN if outside the boundary. Method fromCharCode will return a string created from unicode values. ToLowerCase&UpperCase will lowercase/uppercase the string. Please refer to image 6 to see how each method described will result.

The 2nd group of methods are related to searching. These methods are indexOf & lastindexOf. Method indexOf finds the location of the first occurrence of its argument(parameter) in the string used to call the method. If there is no value it returns -1, else you will get the 1st index number for the substring. Method lastindexOf is the same except it searches for the last occurrence.

The 3rd group of methods in the string object are split  & substring. Split breaks the string into tokens, the argument parameter is the delimiter string and it returns an array of strings containing the tokens. Substring on the other hand returns a substring from the initial index up to but not including the end. If the end of the substring is longer than the original string you will only get up to the end of the original string. Also a delimiter is a string that determines the end of each token in the original string.

Moving onto Date object now. This object provides methods related to date and time. Most of these methods have a UTC application and a local time zone variation. Using empty parentheses will indicate to the constructor to use no arguments. See image 7-10 for the list of data object methods. There is only two methods that will be covered for this object. These methods are Parse & UTC. Parse receives as its argument a string representing the date & time and returns in milliseconds between midnight Jan 1 1970 and the specific date + time. UTC is also in the same position as Parse. However the arguments need a required year, month,date and for optional parameters hours,minutes, seconds & milliseconds. if no argument is supplied everything else is supplied with a 0 in its place.

The object & numeric objects are object wrappers for true/false and number values. See image 11 and 12 for methods & properties.The final object being covered is document. This is already provided to you by the browser and allows the document to be manipulated by javascript.

Javascript events allows the scripts to respond to user interactions and modify the document accordingly. Events and event handling makes applications more dynamic and interactive. An event handler is a function that responds to an event. To register an event you would have to assign it to an event on a Document Object Model Node. Another option is to use method addEventListener on a DOM Node to register multiple event handlers for an event. To Remove it use remove EventListener with the same arguments as addEventListener. Another thing to take note is that if a script in the header tag attempts to get a DOM node for an html element, get elementbyid will return null due to the fact the body has yet to load in. Moving onto events such as MouseMove,over,out  and event object.

The mousemove event starts when the user moves the mouse over the web document. When you move your mouse over an element, it starts the mouse over/hover element. When it leaves the element the mouseout event begins. See the 13th image for what a mouse out result would look like. See the 14th & 15th images to view a list of events.