8 Tips for Creating a Hero Image Banner for a Website
Does the user only need 50 milliseconds to form an opinion on any site? Web developers and designers really have very little time to make a good impression on a…

Continue reading →

Gamification on the site: what is it and why is it necessary?
Currently, on a variety of sites, including business sites, you can find elements of the so-called gamification (gamification, gamification) - a technique that turns user interaction with the site into…

Continue reading →

What can reduce conversion on landing pages?
Landing pages are landing pages of a site to which visitors get from search, contextual advertising or other channels. As a rule, landing pages of a site contain an offer…

Continue reading →

JavaScript and the object model

Scripting languages ​​in some way turned the world around, and it was thanks to them that DHTML appeared, which allows you to do almost anything with the page. As you know, only two languages ​​claim the winner’s laurels in the browser. This is VBScript, a subset of Visual Basic and JavaScript. Here we will be the last to be engaged, as the most universal.

Learning scripting languages ​​alone does not make sense, because they are closely related to the browser object model and, in fact, most scripts simply set the corresponding properties of objects or call their methods.

What is an object model?
Once upon a time, when browsers still had a version number equal to one, there was nothing of the kind. Information was simply displayed as it arrived, without being subjected to any changes. Everything was simple, and even compatibility glitches were not there 🙂

Now the page’s path to the display is much longer. Let’s step by step follow her path:

The page is downloaded from the site and placed in the computer’s memory
The page is analyzed, as a result of which it is prepared for its components.
The blocks that make up the page (<body> </body>, <head> </head>, <p> </p>, etc.) are placed in a temporary database according to the structure of the object model.
The database becomes available to other programs and, in particular, to the renderer, which displays the page on the screen. To access and manage the contents of this database, the browser provides us with an object mechanism and scripting language through which access is performed.
Of course, the contents of the database can be changed before being displayed, which allows DHTML to work. But the object model remains working even after the page is shown on the display screen. This gives us the opportunity to change the contents of the page after loading to a small extent (and in the latest versions of HTML 4.0 almost completely).

Object Model Structure
To make it clear what we are talking about, we will consider the general structure of the object model. Below is the object model of Internet Explorer version 4 and higher.

window – an object giving access to the browser window
frames – an object that gives access to frames
window …
window …

document – an object containing the entire page
all – a complete collection of all document tags
forms – collection of forms
anchors – collection of anchors
apples – applets collection
embeds – collection of embedded objects
filters – collection of filters
images – image collection
links – collection of links
plugins – a collection of plugins
scripts – collection of <script> </script> blocks
selection – collection of selections
stylesheets – a collection of objects with individually defined styles
history – an object that gives access to the history of visited links
navigator – an object that gives access to the characteristics of the browser
location – an object containing the current URL
event – an object that gives access to events
screen – an object that gives access to the characteristics of the screen
The Netscape Navigator object model is slightly different from the above, but its meaning is exactly the same. And using JavaScript allows us to get around the differences in the implementation of object models.

Instead of explaining in detail each object that is part of the browser model, I will explain the meaning of the corresponding objects, their properties and methods with specific examples, as necessary.

As you can see, the structure of the object model is quite complicated, but strictly defined, and there is a unique way to access any property or method. The syntax is exactly what is used in object languages. Those. underlying objects are separated from the overlying ones by a dot, and to access a specific property you just need to correctly build the access string.

And, as you know, this is where the script language comes into the scene, which allows us to manipulate objects.

Like any programming language, JavaScript has a certain set of types of variables, operators, built-in functions and objects. Learning JavaScript as such consists in remembering all this. But, as you know, divorced from the object model, it is of little use in itself. That’s why I’ll just talk about the popular effects used on the pages, giving explanations along the way. And I hope that if this interests you, then you will already write more complex things yourself.

How and where to place the script code?
But first, we digress a little from the effects and talk about how and where to place JavaScript. Since the language is scripted and designed to work on web pages, its code is placed directly in the HTML code of the page. Moreover, JavaScript code usually consists of two parts:

Functions that are called from the page code in response to some event
Code of events that call functions :))
The description of the functions should be located in the <head> </head> tag – this ensures that by the time the function is called, it will already be in the computer’s memory. To insert the code, a special <script> tag is used, in the parameters of which we define a specific language.

The main types of user interface buttons
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of…

...

Sliders for the site and factors affecting their usability
On commercial sites, especially when it comes to online stores, today you can often find sliders, or so-called “carousels,” - site design elements in which slides with photos or text…

...

Web design and font size selection for the site
Too small font of the main text used on the site can become one of the factors of pessimization of this site in search results, because today search engines pay…

...

Interactivity! What? And How?
Initially, there was a network, then e-mail appeared, and people began to correspond. They wanted to tell about themselves, share information - the World Wide Web (WWW) appeared. But static…

...