ВишенкиНовости
Готовые работы
Услуги
Полезные ссылки
Глоссарий
Контактная информация
Articles about web-design

JavaScript and object model

Print this article
Print this article

Script languages in some sense have turned the world, due to them dynamic web has appeared, which allows to do practically everything As it's known, only two languages claim laurels of a winner in the browser world - VBScript (subset Visual Basic), and JavaScript (word Java was used only for marketing purpose and it has nothing to do with Java language). JavaScript is supported by most browsers and we'll talk about it.

Script languages are tied to browser's object model, to learn them as programming language is meaningless, main part of the script associates with properties of browser's objects and calling its methods.

What is object model?

In the past, when browsers had version number equal to 1, nothing a like existed even in mind. Information was just output to the display as it came. Everything was simple, and even nuts of compatibility’ve not yet herd.

Now path of the web page to the display is much longer. Let's fallow this path.

  1. Page is copied from website located on a disk in the web-server to a computer memory.
  2. Analysis of the page is performed, and it disassembled on constituents.
  3. Blocks, the page composed of (like: <body></body>, <head></head>, <p></p> etc.), are placed in temporary database according to a structure of an object model.
  4. Data becomes available to other programs, in particular render program which output the page to a screen. For access and control of this data the web browser submits us mechanism of objects and script languages as means of access.

Contents of the data can be changed before transmitting to a browser, what is happened with dynamic web pages. But the object model continues to work during rendering the page by browser, even after page is shown on the screen. It gives us a possibility in small limits (and in last versions HTML 4.0 practically completely) to change contents of the page after loading.

Structure of an object model

To clear, what we speak about, let’s consider general scheme of the object model. Below the object model of Internet Explorer versions 4 and above is presented.

  • window - object for access to the browser's window
  • frames - object for access to the frames

    • window...
    • window...
    • ...

  • document - object containing the page

    • all - full collection of all document tags
    • forms - collection of forms
    • anchors - collection of anchors
    • applets - collection of applets
    • embeds - collection of the embedded objects
    • filters - collection of filters
    • images - collection of images
    • links - collection of the references
    • plugins - collection of connected modules
    • scripts - collection of blocks <script></script>
    • selection - collection of selections
    • stylesheets - collection of objects with specific styles

  • history - object allowing access to visited pages
  • navigator - object giving access to browser's parameters
  • location - object containing current URL
  • event - object giving access to events
  • screen - object giving access to a screen's parameters

The object model of Netscape Navigator differs a little. JavaScript allows us to work with both object models.

As you can see, the structure of the object model is rather complicated, but strictly defined. And there is a defined syntax to access to any property or method, similar to the syntax used in object oriented languages. I.e. embedded objects are separated by dot from containing, and to get access to a concrete property or method it is necessary simply correctly to construct a line of access.

As any programming language, JavaScript has a defined set of types of variables, operators, built-in functions and objects. Studying JavaScript is remembering all these. We'll just speak about popular effects used in web pages. Hope if you will be interested, you'll write more complicated things by your own.

Where and how to place a script code?

Later we'll discus some effects produce by Java Script, for now we look at where and how to place JavaScript. Because script is supposed to work in web pages, it is placed in a HTML-code of the page. JavaScript usually consists of two parts:

  1. The functions, which are called from a code in reply to any event
  2. Code of events, which call functions

The functions should be in a <head></head> tags, this guarantee the function will be in memory of the computer to a moment of it call. For script code insertion special tag <script> is used. Type of used script is designated as parameter of this tag. Here an example of JavaScript code:

<script language="JavaScript">
<!--

function somefunction()
{
    // function code goes here
}

//-->
</script>

As you see script code is put in comment tags. Older browsers ignore it, and new programs understand it.

You can notice also, that closing tag of the comment is a little unusual with two forward slashes. Two forward slashes are a comment of the JavaScript language, i.e. script ignores everything, that goes after it. Such complicated construction is used because Netscape browser doesn't understand here closing HTML comment.

Well, we’ve sorted out bases of scripts, examples of popular and useful effects will be realized in the coming articles.


<< Previous Article | Next Article >>