A web resource visit is a specific URI in the address bar of a browser. The visitor indicates the address of the page, and it is parsed by the browser into the elements of the DOM tree - Document Object Model. Any link on this page tells the browser to parse another page and build a different tree of objects.
The browser allows the visitor to go back or go forward along the chain of pages that have already been viewed in the current session.
In fact, user actions are moving between systems of objects formed in the process of visiting pages. Each page is its own DOM tree and, in addition, JavaScript object's are syntax objects of the language itself and user descriptions.
DOM: Download, Update and Change
There are three main options that form the web page’s page objects, both at the DOM level and the JavaScript language itself, which performed the construction of creating variables, and based on descriptions made by the developer:
- loading - the visitor came to the site page;
- update - the visitor has updated the page (browser button or Ctrl-F5);
- changing a page element, for example (AJAX, script, event, ...).
All three processes are fundamentally different, but it is especially important to distinguish the features of the first two. It is difficult to forbid the visitor to refresh the page - this is an ineradicable "pernicious" habit of the visitor, which the developer should keep in mind.
Navigation on the page and beyond should lie solely in the functionality of the page itself, and not in the browsing history of the browser and the functions of its buttons. Many sites declare this important requirement, but visitors traditionally violate it.
Changing a page without reloading at the level of its individual element (for example, AJAX) is a common solution for dynamic pages. As a rule, this is used to navigate through page elements, change its objects, and control the dialogue with the visitor.
Fundamental JavaScript Objects
JavaScript is based on objects. Almost all language variables are objects. The developer can formulate their own descriptions of objects using a variety of syntax options.
Anything other than a string, a number, true, false, null, or undefined is an object. Within the framework of the language syntax, this can be ignored, meaning by objects only DOM elements and JavaScript's own descriptions. The fundamental structure of the language in most cases for the developer does not have significant practical value.
For example, mathematical functions are represented by a Math object. This is convenient within the framework of the concept of the language, but for the developer it’s just a convenient syntax for using the necessary arsenal of mathematical operations.
It is important to work correctly with the DOM and correctly describe your own objects. The syntax of JavaScript object function's and expressions for their application is a form of recording the logic of the necessary algorithm.
Strings, Arrays, and Objects
All JavaScript objects are based on the rule: "property" = "value" and the concept of an associative array. In the simplest case, object JavaScript is a collection of pairs "property" = "value". Moreover, the “value” can not always be a number, and the property is not always written without quotes.
Property naming should not be abused. Ideally, when property names contain only characters from the Latin alphabet, satisfy the requirements for naming variables, and are not key (including reserved) words in the language.
No property ordering is supposed, but when creating or initializing an associative array, knowing how its elements are located is perfectly acceptable. It is not recommended to use this circumstance, but keeping in mind is possible.
Initializing an array of properties means at the same time:
- array creation;
- object creation.
In the specific application context, you can consider the JavaScript object as an associative array, and in another place of the algorithm as an object, assign the necessary methods to it, change the values of its elements.
Since property names and their values must be specified in string format when creating or modifying, it is recommended that you use string notation and quotation marks.
Access to object properties
You can get and change the values of object properties using the Object.keys construct: JavaScript forms an array of all object properties. When objects are created dynamically, this design is very convenient because it automatically generates a list of all the properties available in the object.
In this example, two arrays are described in different ways. In application, both arrays are equivalent, because they contain the same name properties and their values. In the loop, all properties of the second array are sorted and a row of all values is formed.
A similar effect can be achieved in dotted notation or bracketed:
- x1_Obj . NameLast;
- x1_Obj [ 'NameFirst' ].
Both designs are acceptable and give the desired result. In the given example, when specifying an array through curly brackets "{}", an error can be made in the form of the symbol "," at the end of the enumeration (marked with a red circle in the example). Usually browsers ignore the extra character in the enumeration, but it’s better not to.
Removing object properties
Since the object is an associative array, the JavaScript delete object operation is performed at the level of the current object (for inheritance, it matters) and is considered on the collection of properties of this object.
In the context of the above example, the following constructs can be used:
- delete x1_Obj . NameLast ;
- delete x2_Obj [ 'NameFirst' ];
The first construction removes the second element of the first object, the second construction removes the first element of the second object. The delete operator does not work on prototype properties and returns false if the property cannot be deleted.
Properties and methods of objects
The syntax of JavaScript object properties and functions is similar to the general canons of the syntax and semantics of a language. In fact, the situation is just the opposite.
The properties and methods of an object are a variant of the description of information and the actions allowed with it through the object-oriented JavaScript paradigm.
In this example, the x3_Obj object is described, which has only two properties: item and pos. Then the hello () method was added as a function. As a result, interpreting this description in the context of property values, JavaScript object values will do as shown in the result window, that is, put the body of function (1) as a value.
When the Hello () property is directly called, it is interpreted as a method (function) and the result (2) will be the execution of the code of this method.
The this keyword in an object
For orientation in the object properties space, the developer can use the this keyword and refer through it to the properties described by him to get or change their values.
This is just the beginning of the description of the object with the body of only the constructor. This example describes the object for working with cookies. The object is initialized at the time the page loads with the construct:
- var oCookie = new scCookies ( cOwnerCode );
- oCookie . Init ();
In this example, cOwnerCode is the unique visitor code. If it is not, then new code will be created in the constructor of the oCookie object. It doesn’t matter what the author of the object meant by the visitor’s authorization, it’s important how the this keyword is used here to describe the methods of the object and call them from other methods of the object:
- this . GetCookie = function (cName) {...};
- this . SetCookie = function (cName, cValue) {...}.
This describes the methods of the object for reading cookies by its name and recording the value of cookies with a specific name.
- this . GetCookie ( 'cOwner' );
- this . SetCookie ( 'cOwner' , cOwner );
So they are used, if as a result of the first construction the value will not be presented, then the second construction sets it.
Sample cookie object
You can discuss what JavaScript Object's and the paradigm of the object-oriented approach of the language running in a browser environment. This is interesting, but in reality, practice is needed, not theory. Serving DOM pages, providing tools for manipulating objects and moving around object systems is JavaScript's strong point.
In object-oriented practice, something else is important. Working with cookies on almost all web resources is in the order of things. Implementing this as an object is a great idea. In this context, the object is initialized at the moment the page is opened: the page is loaded = the cookie exists and read everything, but what was not created.
In the process of working with the page, the visitor performs certain actions and the browser must change or create cookies. There are two object methods (indicated above) that do this.
In fact, the cookie object arises immediately after the browser builds the DOM and supplements the JavaScript object system with new functionality: read and create (modify) cookies.
In this simple example, object-oriented programming is considered as a procedure for creating real objects that have exclusively their own properties and functionality (methods). Each object does its job and does not participate in the general algorithm, does not change the data of other objects or the common namespace.
With this approach, the developer ensures the creation of a system of unique objects sufficient to describe and service the problem being solved.
Page and Object Events
An important element of the functioning of the DOM and JavaScript: object event's - allowing you to get information about the event in its handler. Almost every page element can be assigned its own handler for one or more events.
In fact, the JavaScript developer does not create one large "piece" of code, but a multitude of descriptions of functions, objects, data structures and assigns event handlers to specific page elements.
Object event - this is information about the event that the handler called and the ability of this handler to execute an adequate response to this event. Each event differs not only in name and place of occurrence, but also in many other parameters.
In particular, keyboard events are one set of parameters, mouse events are a completely different spectrum of data, and the server’s answer through AJAX is completely planned by the developer.
In each specific case, the picture of events that may occur on the page is transformed into the spectrum of included handlers, and the page does not take any action outside the specified processing options for a specific set of events.
Creation and operation of objects
The browser "transforms" the URI, the web resource address specified by the visitor, into the DOM tree, the system of page objects for this web resource. When a visitor moves through the page links, the browser goes to the corresponding trees of other pages.
This circumstance allows the developer to build his system of objects as the foundation of a web resource that adequately responds to visitor behavior. If you isolate the general functionality, for example:
- work with cookies;
- receiving / transmitting data (AJAX);
- tooltips
- internal messages (chat site);
- other tasks;
then, once created, the systems of objects can be used in the development of other sites. This is a significant advantage of the object approach over the usual use of JavaScript as a browser language that ensures the functioning of the page and reaction to events.
Objects are finished components that can be formatted as separate files and used in the future. A characteristic feature of this approach is the possibility of feedback when an updated, improved object can be used in a previous development, automatically updating its functionality without updating the site.