JS Events Methods Objects

8/10/2019 JS Events Methods Objects

http://slidepdf.com/reader/full/js-events-methods-objects 1/25

JAVASCRIPT OBJECTS



• Objects are composed of attributes.• If an attribute contains a function, it is

considered to be a method of the objectotherwise, the attribute is considered a

property.





• The syntax for adding a property to anobject is

• objectName.objectProperty = propertyValue;





Object Methods

• The methods are functions that let the objectdo something or let something be done to it.

• There is little difference between a functionand a method, except that a function is astandalone unit of statements and a method

is attached to an object and can bereferenced by the this keyword.



• Methods are useful for everything fromdisplaying the contents of the object to thescreen to performing complex mathematicaloperations on a group of local propertiesand parameters.



Example:-

document.write("This is test");



User-Defined Objects:

• All user-defined objects and built-in objectsare descendants of an object called Object.

The new Operator:• The new operator is used to create an

instance of an object.• To create an object, the new operator is

followed by the constructor method.



• In the following example, the constructormethods are Object(), Array(), and Date().

• These constructors are built-in JavaScriptfunctions.



• var employee = new Object();• var books = new Array("C++", "Perl", "Java");

• var day = new Date("August 15, 1947");



The Object() Constructor:

• A constructor is a function that creates andinitializes an object.

• JavaScript provides a special constructorfunction called Object() to build the object.

• The return value of the Object() constructoris assigned to a variable.



Example 1:• <html>• <head>• <title>User-defined objects</title>• <script type="text/javascript">• var book = new Object(); // Create the object• book.subject = "Perl"; // Assign properties to the object• book.author ="Mohtashim";• </script>• </head>• <body>• <script type="text/javascript">

• document.write("Book name is : " + book.subject + "<br>");• document.write("Book author is : " + book.author + "<br>");• </script>• </body>• </html>



Example 2:• <html>• <head>• <title>User-defined objects</title>• <script type="text/javascript">• function book(title, author)• {• this.title = title;• this.author = author;• }• </script>• </head>• <body>• <script type="text/javascript">• var myBook = new book("Perl", "Mohtashim");• document.write("Book author is : " + myBook.author + "<br>");• </script>• </body>

• </html>



JavaScript Native Objects

• Here is the list of all important JavaScript NativeObjects:

• JavaScript Number Object• JavaScript Boolean Object• JavaScript String Object• JavaScript Array Object• JavaScript Date Object• JavaScript Math Object• JavaScript RegExp Object



JavaScript 16

JavaScript Date Object

• A scriptable browser contains one global Date object perwindow.

• When you wish to work with a date, such as displayingtoday’s date, you need to invoke the Date objectconstructor function to obtain an instance of a Date objecttied to a specific time and date.var today = new Date();

document.write(today);Produces:Sun Nov 19 19:26:35 EST 2006



JavaScript 17


• The Date object takes a snapshot of the PC’sinternal clock and returns a Date object for thatinstance. – Internally the value of a Date object instance is the time

in milliseconds, from zero o’clock on January 1 st, 1970Greenwich Mean Time Zone.

• You can specify the date information as parameters to the Date object constructorvar someDate = new Date("September 22, 1952 02:00:00");



JavaScript 18


• You can extract components of the Date object via a seriesof methods that you apply to a Date object instance.

var today = new Date();document.write("Milliseconds since 1/1/70 00:00:00 GMT: " + today.getTime());document.write("<br /> Current year: " + today.getYear());document.write("<br /> Current month: " + today.getMonth());document.write("<br /> Current date: " + today.getDate());

document.write("<br /> Current day: " + today.getDay());document.write("<br /> Current hours: " + today.getHours());document.write("<br /> Settin time in ms: " + today.setTime(1000000000));document.write("<br /> Current year: " + today.getFullYear());



JavaScript 19

JavaScript Date Object• Results

Milliseconds since 1/1/70 00:00:00 GMT: 1163984366847

Current year: 2006Current month: 10 (note getMonth is zero based i.e. Jan = 0, Feb = 1)Current date: 19Current day: 0 (note getDay is zero based i.e. Sun = 0, Mon = 1)Current hours: 19

Settin time in ms: 1000000000Current year: 1970



EVENTS

• JavaScript's interaction with HTML is handledthrough events that occur when the user or

browser manipulates a page.• When the page loads, that is an event. When the

user clicks a button, that click, too, is an event.• Another example of events are like pressing any

key, closing window, resizing window etc.



onmouseover and onmouseout:

• These two event types will help you tocreate nice effects with images or even with

text as well.• The onmouseover event occurs when you

bring your mouse over any element and

theonmouseout occurs when you take yourmouse out from that element.



Example:• <html>

• <head>

• <script type="text/javascript">

• <! --

• function over() {

• alert("Mouse Over");

• }

• function out() {

• alert("Mouse Out");

• }

• // -- >

• </script>

• </head>

• <body>

• <div onmouseover="over()" onmouseout="out()">

• <h2> This is inside the division </h2>

• </div>

• </body>

• </html>



HTML 4 Standard Events

• The standard HTML 4 events are listed herefor your reference.

• Here script indicates a Javascript functionto be executed agains that event.



• Event Value Description• Onchange script Script runs when the

element changesOnsubmit script Script runs when the

form is submittedOnreset script Script runs when the

form is resetOnselect script Script runs when the element

is selectedOnfocus script Script runs when the element gets

focusOnkeydown script Script runs when key is pressedOnkeypress script Script runs when key is pressed

and releasedOnkeyup script Script runs when key is released



Documents

JS Events Methods Objects