The difference between UI and UX
Today there will be a guest post on the topic of UX and UI interfaces using the Icons8 service as an example. The author is a usability specialist Andrei Burmistrov,…

Continue reading →

How to make a menu for a site? The main features of the menu selection
Whatever the site, without which it certainly cannot do, is without a menu. And often on one site there are several menus at once - for the main and additional…

Continue reading →

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…

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.

GIF Image Optimization
Converting a full-color image to an index image (i.e. using a palette) is an important operation, and here a few words need to be said about how this is done…

...

What are longreads on sites
The so-called longreads are one of the leading web design trends in 2015, and also, as expected, in 2016. With the help of long reads, sites today do not just…

...

Creating the perfect landing page (for example, successful sites)
There is nothing more exciting in working on a site than when all the specialists join their own efforts to create a new ideal landing page or the main page…

...

Usability of an online store: basic requirements for sample pages
Conversion rates for an online store are influenced by a whole group of factors, among which usability can be called one of the main. When developing, paying close attention to…

...