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
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
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.
How and where to place the script code?
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.