Scribd
Upload
24 views23 pages

E-Notes PDF Unit-3 21052019110700AM

Uploaded by

Ahetisam Malek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
24 views23 pages

E-Notes PDF Unit-3 21052019110700AM

Uploaded by

Ahetisam Malek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 23
Darshan Ince of of Dp Se -3 Object Models in JavaScript Javascript Document Object Model: What is the DOM? ‘* DOM stands for Document Object Model. © The W3C is establishing the Document Object Model (DOM) as a standard application programming interface (API) for scripts to access and manipulate HTML and XML documents, Document Root element: ‘ Element: Element chead> Element: ARtribute: Element: Element: titles href Text Text Text oMy tle My link” oMy header” Fig 3.1 Document Object Model Tree Structure © When a web page is loaded, the browser creates a Document Object Model of the page which gives a logical view of the document where objects represent different parts: windows, documents, elements, attributes, texts, events, stylesheets, style rules, etc. * These DOM objects are organized into a tree structure (the DOM tree) to reflect the natural organization of a document. * Each Web page has a document node at the root of the tree. The head and body nodes become child nodes of the document node (Figure 3.1). ‘© With the object model, JavaScript gets all the power it needs to create dynamic HTML: © JavaScript can manage all the HTML elements and attributes, CSS styles in the page. Introducing object in Model Every web page resides inside a browser window which can be considered as an object. A Document object represents the HTML document that is displayed in that window. * The Document object has various properties that refer to other objects which allow access to and modification of document content. The Objects are organized in a hierarchy. The below Figure 3.2 represent simple hierarchy of few important objects: © Window object: Top of the hierarchy. It is the outmost element of the object hierarchy. © Document object: Each HTML document that gets loaded into a window becomes a document object. The document contains the content of the page. © Form object: Everything enclosed in the
...
tags sets the form object. Dept: CE DWSI (3360705) Prof. Ravi G. Shrimali Darshan Ince of of Dp Se Window = | e ———_——_ ate a aa — Ti Be ae [ I I 1 a ae i aaa peewee] [et mia I option Figure 3.2 hierarchy of important objects © Form control elements: The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes. The Document Object ‘© When an HTML document is loaded into a web browser, it becomes a document object. * The document object is the root node of the HTML document and the "owner" of all other nodes: element nodes, text nodes, attribute nodes, and comment nodes. * The document object provides properties and methods to access all node objects, from within JavaScript. The Document Object is supported in all major browsers. * The following are the most common properties and methods that can be used on HTML documents: document.body, document.close(), _ document.forms, document.open(), _ document.title, document.getElementByid(), document.getElementsByTagName() document.getElementsByName(), document.writeln() and document.write(). Writing to Documents ‘* The write() method writes HTML expressions or JavaScript code to a document. ‘© Using document.write() after an HTML document is fully loaded, will delete all existing HTML. * The document.writeln() method is similar to write(), only it adds a newline character after each statement. Example: 2 | Dept: CE DWSI (3360705) Prof. Ravi G. Shrimali Darshan Ince of of Dp Se -3 Object Models in JavaScript Dynamic Documents + The HTML DOM allows JavaScript to change the content of HTML elements. * To change the content of an HTML element, use the following syntax: document.getélementByld{id).innerHTML = new HTML + The easiest way to modify the content of an HTML element is by using the innerHTML property. + To change the value of an HTML attribute, use the following syntax: document.getélementByld{id).attribute = new value Example:

Change Me by Entering Data

* Inthe Above code, when we click on the button, it will change the content of a

element with the content of the textbox that we enter. Browser Object * The Browser Object Model (BOM) allows JavaScript to “talk to" the browser, There are no official standards for the Browser Object Model (BOM). + The browser provides us with a hierarchy of objects which we can use to control and access various information about time, screen, page, elements on a page etc. * BOM objects allow to control the browser, e.g change current URL, access frames, do background requests to server with XMLHttpRequest etc. Functions like alert, confirm, prompt also belong BOM, they are provided by the browser. © The following details are some javaScript browser option: © History Object: Used for examining and moving between URLs stored in the browser's history. 3 | Dept: CE DWSI (3360705) Prof. Ravi G. Shrimali Darshan Ince of of Dp Se -3 Object Models in JavaScript © Location Object: Contains information about the current URL. This object also provides the means to perform tasks such as loading a new page or reloading the current page. © Navigator Object: Contains information about the current browser. For example, you can determine the browser type and whether the browser has cookies enabled. © Screen Object: Specifies the physical characteristics of the device used to display the page, including page height, width, and color depth. © Window Object: Provides access to the browser's window so that you can perform tasks such as displaying message boxes. When working with pages that contain frames, the browser creates a window for the entire HTML document and another window for each frame. Note: The example of this object is same as Navigator Object below or Window Object (Refer page No. 17) Navigator Object The navigator object contains information about the browser. It is useful for customizing your JavaScript based on the user's browser and what they have enabled on that browser. Remember all browsers are different and handle JavaScript differently. For example, the user might not have cookies enabled, but has JavaScript enabled. Properties: appCodeName: Returns the code name of the browser. appName: Returns the name of the browser. appVersion: Returns the version information of the browser. cookieEnabled: Determines whether cookies are enabled in the browser. platform: Returns for which platform the browser is compiled userAgent: Returns the user-agent header sent by the browser to the server. Methods: © javaEnabled(): Specifies whether or not the browser has Java enabled. © taint€nabled(): Specifies whether the browser has data tainting enabled. Example: Output: Mozilla Netscape 0000 4 | Dept: CE DWSI (3360705) Prof. Ravi G. Shrimali Darshan Ince of of Dp Se -3 Object Models in JavaScript 5.0 (Windows NT 6.2; WOW64) AppleWebkit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36 true win32 The String Objects A string literal is zero or more characters enclosed in single or double quotation marks. A string literal has a primary (primitive) data type of string. A String object is created by using the new Operator, and has a data type of Object. The escape character (\) can also be used to insert other special characters in a string. The Special characters that can be added to a text string with the backslash sign: single quote(\'), double quote(\"), backslash(\\), new line(\n), tab(\t), backspace(\b),etc. Syntax: var val = new String(string); Properties © constructor: Returns the function that created the String object's prototype © length: Returns the length of a string. © prototype: Allows you to add properties and methods to an object. Methods length: Returns the number of characters in a string, © indexOf(): Returns the position of the first found occurrence of a specified value in a string. © lastIndexOf(): Returns the position of the last found occurrence of a specified value in a string, © match(): Searches a string for a match against a regular expression, and returns the matches. © substr(): Extracts a part of a string from a start position through a number of characters. ° ° ° substring(): Extracts a part of a string between two specified positions. toLowerCase(): Converts a string to lowercase letters. toUpperCase(): Converts a string to uppercase letters. © trim(): Removes whitespace from both ends of a string. © valueOf{): Returns the primitive value of a String object. © split(): Splits a string into an array of substrings. Example: The above script remove extra whitespace from both sides of a string 5 | Dept: CE DWSI (3360705) Prof. Ravi G. Shrimali mH i arshan -3 Object Models in JavaScript Ince of of Dp Se Understanding built-in object (JavaScript Native Objects) * All programming languages have built-in objects that create the essential functionality of the language. Built-in objects are the foundation of the language in which you write custom code that powers custom functionality based on your imagination. ‘JavaScript has several built-in or native objects. These objects are accessible anywhere in your program and will work the same way in any browser running in any operating system. The below is the list of all important JavaScript Native Objects: JavaScript Number Object JavaScript Boolean Object JavaScript String Object JavaScript Array Object JavaScript Date Objec JavaScript Math Object e0000 User defined object * JavaScript is an Object based Programming language. Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of the object otherwise, the attribute is considered a property. + Alluser-defined objects and bui in objects are descendants of an object called Object. ‘The new Operator: © The new operator is used to create an instance of an object. Example: var employee = new Object(); The Object) Constructor: © A constructor is a function that creates and initializes an object. JavaScript provides a special constructor function called Object() to build the object. The return value of the Object() constructor is assigned to a variable. The with Keyword: © The with keyword is used for referencing an object's properties or methods, © The object specified as an argument to with becomes the default object for the duration of the block that follows. The properties and methods for the object can be used without naming the object. Syntax: with (object}{ properties used without the object name and dot 6 | Dept: CE DWSI (3360705) Prof. Ravi G. Shrimali Darshan Ince of of Dp Se -3 Object Models in JavaScript Example: User-defined objects Output: © The above script demonstrates how to create an object with a User-Defined Function. Here this keyword is used to refer to the object that has been passed to a function Form Object * The JavaScript Form Object is a property of the document object. A form object is used to take user data as input for processing. A form can be submitted by calling the JavaScript submit method or clicking the form submit button, © Form object is created for every html form element. The Form object represents an HTML

element. 7 | Dept: CE ‘DWSL (3360705) Prof. Ravi G. Shrimali mH i arshan -3 Object Models in JavaScript Ince of of Dp Se ‘* Form can be accessed by document.form.formName or document.formName, where formName is the name of the form. © You can access a element by using getElementByld(). For Example, var x = document.getElementByld("myForm"); ‘You can create a element by using the document.createElement() method. For Example, var x = document.createElement("FORM"); Form Object Properties: action: Used to get or set the action attribute of form field. elements: It returns an array containing all the objects (ike button, checkbox, etc..) in a form. encoding: Used to get or set the enctype attribute of form field. length: It is used to check the number of elements present in the form. method: It is used get or set the attribute "method!" of form field as POST or GET. name: It is used to get or set the name of the form. target Itis used get or set the attribute "target" of the form. Form Object Methods: (© submit() :Used to dynamically submit a form using javascript. ©. reset() :Used to dynamically reset the values of the form. 20000 Working with Form Elements and Their Properties Button Object * Button is one of the most commonly used form types. The Button object represents an HTML